Comment créer des sites Web professionnels sans codage

1. Comment créer des sites Web professionnels en matière d'appartenance de sites Web: J' ai essayé d'apprendre à construire des sites Web. Ou peut-être êtes-vous un concepteur qui aimerait offrir des services de profondeur Web à vos clients. Eh bien, vous savez, la conception est une chose, mais ensuite transformer ça pour le concevoir en un vrai site web en direct. Eh bien, c'est une chose complètement différente. Et pour beaucoup, cela peut sembler une sorte de sorcellerie b. Et beaucoup d'entre eux abandonnent et rapidement. Mais heureusement, ce n'est pas forcément le cas. Parce que dans ce cours, vous apprendrez comment construire des sites Web à partir de zéro sans la nécessité de coder quoi que ce soit. Et pour cela, nous allons utiliser le constructeur d'oxygène, ce qui vous permet de créer un contrôle n'importe quel aspect de votre site Web. Et en cours de route, vous apprendrez à créer des en-têtes, des menus réactifs, des en-têtes collants, des en-têtes de superposition. Comment construire des sections de héros dans des curseurs pleine largeur en arrière-plan. Et comment ajouter des icônes animées, comment ajouter des forums de contact, des témoignages, des blogs et des billets de blog, etc. Mais fondamentalement, vous apprendrez tout ce qu'il y a à savoir pour créer un site Web en utilisant le constructeur d'oxygène. Je trouve juste que c'est la meilleure solution en ce moment pour créer des sites Web professionnels, surtout si vous venez d'un fond de conception. Donc, si vous êtes vraiment intéressé à apprendre à développer des sites Web, la future preuve attendre, juste vous inscrire à ce cours maintenant. Et j'espère vraiment te voir à l'intérieur. 2. Introduction: Alors dites-moi, avez-vous essayé d'apprendre à développer des sites Web ? Ou peut-être que vous êtes concepteur aimeriez offrir des services de développement web à vos clients. Tu sais, la conception est une chose, mais transformer ce design en un vrai site web. C' est une histoire complètement différente et une histoire plus complexe, je dois dire. Et pour beaucoup, cela peut ressembler à une sorte de sorcellerie. Quand ils pensent à développer des sites Web, ils sont intimidés et souvent ils quittent. Mais heureusement, il n'y a vraiment pas besoin d'être le cas parce que nos jours créer des sites web professionnels personnalisés est vraiment plus facile qu'auparavant. Alors les scores sont juste à peu près ça ? Laissez-moi vous dire d'abord ce que ce cours n'est pas. Ce n'est certainement pas un autre mot, corps de presse. Si vous êtes un noob Wordpress total, je vous conseille d'abord d'apprendre les bases, puis de revenir à ce cours. Maintenant, War Powers va être un environnement dans lequel nous allons travailler, mais nous ne nous y concentrerons pas du tout. Et vous apprendrez comment construire n'importe quel type de site Web en utilisant quelque chose appelé constructeur d'oxygène. Maintenant, oxygène et Builder est un constructeur de site, ce qui signifie qu'il vous permet de concevoir, développer et contrôler essentiellement n'importe quel aspect d'un site Web, vos en-têtes, pieds , menus, blogs, colons, modèles pour 04 pages, etc. beaucoup plus. Et ce qui se distingue, c'est qu'il vous donne un contrôle total sur leur partie de développement. C' est, c'est vraiment difficile d'imaginer et de concevoir qui ne pouvait pas être développé avec de l'oxygène. Et la grande majorité des designs peuvent être transformés en sites Web sans même toucher au code. Je veux dire, vous pouvez utiliser les outils fournis et ne pas écrire une seule ligne de code. Mais bien sûr, si vous avez besoin de quelque chose de plus complexe, vous pouvez ajouter du code supplémentaire parce que l'oxygène vous donne une liberté totale. Et laissez-moi être clair. Le discours n'est en aucun cas un terrain de vente pour le plugin. Maintenant, nos vues et testé beaucoup d'autres constructeurs ont utilisé élément Devi ou Visual Composer of Vada thème ultimatum. Mais ils n'ont jamais vraiment livré ce que j'attendais. Et vraiment, je sais que c'est un cliché, mais une fois que j'ai trouvé de l'oxygène, je n'ai jamais regardé en arrière. Mais bien sûr, il a ses défauts. Au début, ça peut sembler intimidant. Et mes concepteurs, je n'aime pas certaines de ses solutions de convivialité. Mais après quelques minutes, surtout si vous êtes familier avec fondamentalement n'importe quel outil de conception, publicité et commencera à avoir du sens. Et bien sûr, je suis là pour vous guider. Donc, ne craignez pas une fois que nous aurons installé de l'oxygène, nous allons commencer à développer un site. Et en cours de route, vous apprendrez divers outils et aspects du plugin. Donc, nous allons construire des en-têtes, y compris les en-têtes collants, pieds de page et menus, ajoutera des curseurs, y compris une pleine largeur curseurs d'arrière-plan comme ceux que vous pouvez, vous savez, comme celui que vous pouvez voir ici. Nous allons donc ajouter des galeries, icônes, des vidéos et des portefeuilles. Et bien sûr, nous rendrons tout bien responsable. Et pour terminer le cours, nous allons prendre un prêt fait la conception et le recréer en utilisant de l'oxygène. Et nous allons passer de l'en-tête à travers les sections principales avec des images, icônes, des transitions jusqu'à un pied de page étendu. Et en passant, ce sera un site web en direct. Vous serez en mesure de rechercher en ligne et vous serez en mesure de regarder comment il fonctionne, comment il fonctionne une fois qu'il sera développé. Donc, vraiment si vous avez été à la recherche d'un cours pour vous apprendre à développer des sites Web personnalisés professionnels. Et cela le ferait directement jusqu'au point. Je pense que la recherche est terminée. Alors nous allons juste sauter dans notre première vidéo. 3. 2.1, Qu'est-: Donc, pour construire notre site, nous allons utiliser le constructeur d'oxygène. Dans le passé ont essayé d'autres constructeurs comme Devi ou élémentaire, mais ils ont toujours été Mason certains, certaines fonctionnalités, surtout en termes de création de bloc. Maintenant peut-être que ces jours-ci quelque chose, quelque chose a changé. Mais quand l'oxygène 3 ou 3.1 est sorti, j'étais vraiment, vous savez, j'étais accro. J' ai décidé de l'avoir. J' ai décidé de l'acheter parce que j'ai vraiment vu le potentiel. Le potentiel. Et je vais vraiment trouver quelque chose qui me permettrait de construire les côtés. Ce n'est pas la façon dont je voudrais vraiment le faire. Donc, si vous allez sur le site oxygènebuilder.com, bien sûr, vous serez en mesure de lire quelques informations sur les ventes, sur l'oxygène. Vous serez en mesure de consulter la visite des produits ou de voir les tutoriels. Vous, vous serez en mesure de comparer l'oxygène ou avec ça, avec la concurrence comme Beaver élémentaire, Builder ou Devi et constructeur. Mais ce que je voudrais savoir, comme, tourner votre attention, c'est que l'oxygène n'est pas seulement un constructeur de page, mais c'est aussi un, un constructeur de site. Maintenant, la plupart de ces constructeurs, certainement DV ou élémentaires, ils utilisent des thèmes, donc vous devez toujours avoir un thème. Vous pouvez avoir un thème gratuit, mais vous devez toujours en avoir un. L' oxygène n'utilise pas de thèmes, donc vous n'avez pas à vous inquiéter à ce sujet. Et pour vous en tant que développeur web en herbe et un graphiste qui veut offrir plus de services à vos clients, offrez un service de développeur web à vos clients. Je pense que l'une des choses les plus importantes serait que si vous obteniez de l'oxygène, c'est en fait comme Dv. Dv, vous pouvez simplement acheter une licence ou un octet une fois et vous avez les mises à jour pour toujours, mises à jour à vie. Et vous avez obtenu votre licence est valide pour un nombre illimité de sites Web, sorte que vous n'avez pas à racheter les licences pour chaque site que vous allez créer. Donc, il est fondamentalement toujours avec espoir pour toujours un achat unique pour la vie genre d'un accord. Donc, ce n'est qu'une courte vidéo juste pour vous mouiller les pieds, juste pour vous montrer quel outil nous allons utiliser dans ce cours. Et dans les prochaines vidéos, nous allons jeter un oeil sur la façon de télécharger l'oxygène, mais aussi comment essayer l'oxygène. Si vous voulez d'abord vérifier si c'est vraiment quelque chose pour vous. Et vous serez en mesure, grâce à la, à ce genre de fonctionnalité de démonstration de l'oxygène, vous serez en mesure de faire exactement ce que je fais en termes de construction de notre site. 4. 2.2Ne l'achetez pas - essayez: Donc l'oxygène est fondamentalement un plug-in. Et si vous êtes familier avec les bases mêmes de Wordpress, ce qui est une sorte de condition préalable à ce cours. Comme je l'ai mentionné précédemment, l'oxygène fonctionne comme un plugin. Donc, une fois que vous l'aurez obtenu et comment vous devriez le télécharger, vous serez en mesure de le télécharger comme un plugin normal. Et vous serez en mesure d'entrer votre, vous savez, votre clé de licence et vous serez en mesure d'obtenir mises à jour gratuites pour ce site Web particulier. Et nous sommes sur le point de le faire. Nous sommes sur le point de télécharger le plugin. Cependant, si vous n'êtes pas convaincu, si vous ne voulez pas l'acheter, vous pouvez simplement aller sous la main. Vous pouvez simplement faire défiler jusqu'à, à ce pied de page de puits. Et vous verrez cette option ici qui dit essayer l'oxygène. Alors, nous allons cliquer dessus. Et ici, vous pouvez entrer là une démo, un environnement bac à sable où vous pourrez utiliser oxygène comme vous l'utiliseriez si vous décidez de mordre, si vous décidez de le télécharger. Et ici, vous pouvez choisir l'installation vierge, ce que je pense que ce serait mieux parce que nous voulons vraiment construire notre enseigne à partir de zéro. Et nous voulons vraiment apprendre tout, eh bien, la plupart des choses qui viennent avec l'oxygène, certainement toutes les choses qui vous permettront de commencer à l'utiliser indépendamment. Mais bien sûr, vous pouvez également choisir l'exemple de site Web pré-construit, qui chargerait certains éléments de la bibliothèque qui vient avec de l'oxygène. Mais je vais choisir l'installation vierge. Et après quelques instants, nous écrivons le tableau de bord WordPress. Et ici, vous pouvez voir que nous avons déjà de l'oxygène installé et nous sommes en mesure de l'utiliser comme vous l'utiliseriez si vous l'avez acheté, si vous le téléchargez et le téléchargez dans votre bibliothèque de plugins de votre côté, bien sûr, nous avons obtenu sur notre Tableau de bord WordPress standard. Nous pouvons ajouter des pages, vous savez, changer l'apparence et changer le manuel, toutes ces choses. Donc, si vous n'êtes pas convaincu que vous voulez, que vous voulez acheter de l'oxygène, vous pouvez toujours simplement essayer Oxygen à partir de leur site Web. Cependant, je suis déjà convaincu. Je vais donc utiliser ma propre installation. Je vais utiliser ma propre version ou licence du plugin. Et je suppose qu'on peut commencer à construire notre site web. Pourquoi pas ? 5. 2.3Charger l'oxygène sur notre site: Donc, comme vous pouvez le voir, j'ai eu une nouvelle à partir de 20-20 installation WordPress. Et si vous jetez un oeil à ma barre d'adresse, vous allez voir localhost. Et c'est parce que je dirige Wordpress localement. J' ai juste décidé de le faire comme ça parce que si je devais le mettre sur un serveur en direct, je suis qu' on pourrait éprouver une perte de connexion, peut-être de l'argent et des problèmes. Et je voulais vraiment l'éviter. Je voulais vraiment rendre les choses aussi petites que possible, aussi vite que possible. Parce que, bien sûr, vous n'aurez pas à attendre que le serveur réponde. Et puis nous devrons juste attendre que mon ordinateur réponde ou tout devrait être beaucoup plus rapide et plus facile à modifier pour moi après cela. Mais de toute façon, si vous l'êtes, si vous avez votre Wordpress installé uniquement serveur en direct, bien sûr, vous auriez votre nom de domaine ici. Et ce que nous devons faire, c'est que nous devons nous connecter. Donc, je vais juste taper barre oblique, puis juste administrateur de tableau de bord WP. Et ici, je vais juste utiliser mes identifiants de connexion. Donc, en ce moment, nous pouvons réellement télécharger le plugin. Donc je vais aller aux plug-ins, je vais en ajouter un. Je vais le télécharger. Je vais juste devoir le trouver. Oxygène 3.5. Et je vais cliquer sur Installer maintenant. Une fois qu'il est installé, ils vont être activés. Je cours un multi-site afin que vous puissiez voir un réseau activer le bouton, bouton sur vos serveurs. Ça va juste être activé. Et puis vous pouvez réellement commencer à utiliser de l'oxygène. 6. 2.4Activer l'oxygène: Donc une fois notre plugin, une fois que l'oxygène est téléchargé, entrons notre donneur de licence. Gardez. Maintenant, si vous avez décidé de l'acheter, bien sûr, vous l'obtiendrez dans un e-mail d'eux, équipe de constructeur d'oxygène. Et si vous essayez simplement de l'oxygène sur leur serveur, bien sûr, vous n'avez pas à entrer la licence, donc vous pouvez simplement sauter cette vidéo. Donc ce que je vais faire, c'est aller à l'oxygène et ensuite deux réglages. Ici. Je vais choisir la licence. Et ici, nous allons taper notre clé de licence. Cela vient à nouveau dans un e-mail une fois que vous achetez le constructeur d'oxygène, et puis vous pouvez simplement appuyer sur soumettre et vous allez, espérons que vous devriez voir le texte valide ici. Et maintenant cela signifie que l'oxygène sera mis à jour pour la vie. Vous allez recevoir toutes les mises à jour. Dans votre tableau de bord WordPress. Vous pouvez essentiellement mettre à jour votre plug-in comme n'importe quel autre plug-in que vous pouvez obtenir à partir du référentiel WordPress standard. Donc, une fois que l'oxygène est installé, une fois qu'il est une licence a été et il est mis ici, nous pouvons peut-être passer à un peu plus d'un fondamentalement lié à Wordpress mince, pas seulement l'oxygène lié mince. Nous allons ajouter nos pages à notre site. Donc, nous, donc nous avons quelque chose de notre côté. Alors passons à ça. 7. 3.1Ajoutez les pages: Donc on ajoute de l'oxygène, on a la licence. Maintenant, prenons quelques pages. Quand nous allons à notre menu Pages juste ici, commençons. Peut-être, eh bien, voyons d'abord quelles pages nous avons déjà. Eh bien, nous n'avons pas payé ici, mais si vous avez une nouvelle installation WordPress et vous aurez probablement une politique de confidentialité ou un exemple de page. Et ce que je vais faire, c'est que je vais juste ajouter les pages que nous allons utiliser dans notre, dans notre cas. Donc pour le titre, je vais rentrer chez moi. Ce sera notre page d'accueil, évidemment. Alors je vais en ajouter un autre. Puisque nous sommes des designers qui souhaitent offrir leur développement web et leurs services, nous allons l'utiliser. Eh bien, nous allons avoir besoin d'un portefeuille. Alors publions ce site. Ajoutons, disons que nous avons beaucoup de choses à dire, beaucoup de choses intéressantes à dire sur notre travail. Donc, nous allons l'être, nous allons ajouter un blog à notre site. Et disons que nous avons beaucoup de choses à dire sur nous. Donc, nous allons taper sur, et bien sûr, nous devons ajouter une page de contact. Alors faisons ça. Allons au contact et publions ce côté. Maintenant, avant de passer à créer réellement ou immuable notre maison, la page, allons aux paramètres, puis allons à permalien. Et nous allons nous assurer que nous avons sélectionné le nom de poste ici. Et en ce moment, quand nous essayerons de visiter notre page, nous devrons simplement taper le nom de la page et nous serons prêts à y aller. Et c'est, c'est la meilleure pratique à des fins de référencement. Donc, je vais juste enregistrer les changements. Et si nous allons aux options de lecture, nous pouvons utiliser cette option d'affichage de votre page d'accueil pour afficher réellement un site spécifique, donc bien page, donc nous pourrions utiliser vos derniers messages si nous avons juste eu un blog. Mais nous aurons un côté plus développé. Donc, je vais choisir une page statique et ma page d'accueil va être à maison et les messages vont être mis sur ma page de blog. Donc je vais juste sauver ça. Maintenant, ici, j'ai décidé d'aller avec décourager les moteurs de recherche de l'index dans ce site parce que c'est une installation locale et bien fondamentalement, cela n' affectera pas le classement de ma pepsine se trouve juste sur mon ordinateur. Mais lorsque vous construisez votre propre côté, votre site en direct, vous voudrez peut-être vérifier cela parce que les moteurs de recherche pourraient, vous savez, indexer vos progrès une fois que vous construisez le site. Et si vous voulez décourager les moteurs de recherche de cela, vous voudrez peut-être vérifier ceci. Mais bien sûr, lorsque vous utilisez un plugin SEO, une fois que les concepteurs sont terminés, cette option doit être décochée. 8. 3.2Ajoutez le premier modèle: Alors, quels sont les modèles en oxygène ou, ou, ou modèles en général ? Les modèles seront fondamentalement comme des morceaux de conception et de contenu qui se pencheront essentiellement sur le travail de la même manière. Généralement sur la, chaque, chaque page que vous créez. Que ce soit, c'est une page dynamique basée sur le contenu, comme une page de blog ou une page statique. Donc, une fois que vous aurez mis ce modèle, ça sera le même sur chaque page. Le scénario le plus courant pour un modèle consiste à ajouter votre en-tête en tant que modèle et votre pied de page en tant que modèle. Parce qu'un en-tête héberge habituellement votre logo, le nom de votre, de votre entreprise ou de vos services, ou votre nom. Et le menu à peut-être des informations de contact ou des icônes de médias sociaux. Et dans le pied de page, bien sûr, vous devrez également ajouter quelques informations supplémentaires. Peut-être que vous ajouteriez certains, certains liens, peut-être un autre menu. Et yen fondamentalement, vous auriez besoin de créer un modèle pour un en-tête et un pied de page. Donc, si nous allons à l'oxygène et ensuite les modèles, vous pouvez voir que je n'ai pas de modèles ici. Donc, je vais ajouter un nouveau modèle, et je vais l'appeler mes modèles principaux. Je vais juste taper en main. Si vous jetez un oeil à ces options ici, vous pouvez voir que nous pouvons généralement être en mesure d'ajouter, hériter de la conception d'un autre modèle. Mais puisque c'est notre principal, c'est notre premier modèle. Il n'y a rien à hériter d'un autre modèle. Ici. Nous pouvons dire à l'oxygène à quelle partie de notre site à ce modèle devrait se rapporter. Donc, si vous créez simplement un modèle pour, pour un type singulier de contenu, comme un message ou une page, ou pour une page d'archive pour une catégorie spécifique ou pour un auteur spécifique. Vous pourriez, vous seriez en mesure de l'ajouter ici. Mais nous créons un modèle pour un en-tête et un pied de page. Et généralement, nous aimerions ajouter le même type d'en-tête et de pied de page aussi, et à toutes nos pages. Alors gardons les choses simples. Laissons-le comme ça pour l'instant. Supposons que nous voulons ajouter le même type de pied de page et d'en-tête à toutes nos pages. Donc, dans cette autre section, nous allons juste sélectionner cette option catch all. Et puis je vais juste frapper Publier. A partir de maintenant, ce modèle va être, va dire à toutes les pages quels en-têtes et pieds de page que la page spécifique devrait rendre. Donc, une fois que ce modèle est prêt, nous pouvons, nous pouvons frapper éditer avec de l'oxygène et effectivement commencer à éditer ce modèle à l'intérieur de l'oxygène. 9. L'interface 3.3Ooxygène: Avant de commencer à éditer notre modèle ou à ajouter quoi que ce soit à un site Web, c'est une bonne idée de savoir ce que nous recherchons au début, surtout si vous n'avez jamais vu d'oxygène auparavant. Jetons donc un coup d'oeil à l'interface de l'oxygène. Et en fait, au début, ça pourrait sembler un peu effrayant parce qu'il n'y a rien ici. On a juste des toiles vierges, des options, des boutons ici en haut, des boutons ici sur le côté gauche, et c'est tout. Cependant, en quelques secondes, vous verrez que les interfaces d'oxygène, je pense assez similaire à beaucoup de programmes de concepteur comme Photoshop, Illustrator, designer, ou tout ce que vous utilisez pour votre outil de conception. Donc ici, en oxygène, nous avons des outils à gauche. Si nous cliquons simplement sur ce bouton, vous allez voir que nous avons beaucoup, beaucoup d'outils différents et différents que nous pouvons ajouter à notre site Web. Nous avons donc eu les bases comme certains conteneurs, liens texte, et nous pourrions ajouter des images, des vidéos et d'autres minces. On a des aides, des rafales, c'est comme ça qu'on appelle des aides. Mais en réalité, ils ne sont que quelques-uns, comme la plupart des choses ou des modules courants que vous pourriez utiliser dans la conception web. Et c'est donc comme un post de galerie que nous allons utiliser le module Easy posts pour notre blog. Nous avons le constructeur d'en-tête que nous allons utiliser pour construire notre en-tête, icônes sociales, témoignage, curseurs, tout, tout ça, toutes ces choses. Nous avons des modules Wordpress, Wordpress, Wordpress liés en fait comme un menu pro menu, shortcodes, communs et tous ceux. Et toutes ces choses. On a des données dynamiques. Ce sont donc les choses qui vont être retirées de notre base de données, mais c'est pour une vidéo ultérieure. On va chercher des widgets. Donc, si nous utilisons des widgets pour l'intérieur où nous pouvons d'abord utiliser, nous pouvons les faire glisser à partir d'ici. Et nous avons aussi des ensembles de concepteurs de bibliothèque qui viennent avec, qui viennent avec, avec, avec de l'oxygène. Et nous avons des pièces réutilisables, mais nous n'avons encore rien créé. Donc, je n'ai pas fabriqué sur mesure, fabriqué par nous et des pièces qui pourraient, pourraient être ajoutées à notre design. Donc, en gros, ici à gauche, vous allez voir tous vos outils. Et ici, la recherche en haut et la boîte que nous pourrions juste taper peut-être comme certains, comme une image. On y va, on a notre module d'image. Ou nous pourrions taper peut être un peu plus léger ou SL, Et nous avons notre curseur et et cetera. Donc, nous pouvons simplement taper le moins de lettres, les premières lettres du nom de n'importe quel module. Et qu'un module va être filtré de ce panneau. Juste ici. Ici, à droite, en haut à droite, nous avons quelques boutons juste ici, et nous avons ce gros bouton bleu Sauvegarder que nous devons, Eh bien, nous devons, c'est une bonne idée de cliquer dessus fréquemment. Et on a d'autres boutons. Donc, nous allons d'abord cliquer sur la structure. Bouton et comme vous pouvez le voir, nous avons notre structure et en quelques secondes va, il va ressembler fondamentalement, fondamentalement comme des calques dans Photoshop, Illustrator ou designer. Donc, tous les éléments que nous allons mettre ici sur notre toile seront représentés ici dans cette structure. Pas de douleur. On a le panneau d'histoire, mais on n'a rien fait, donc les histoires sont vides. Et nous avons obtenu les options Gérer qui nous permettent d'accéder à un autre, différents paramètres ou paramètres globaux. Donc, par exemple, si nous essayons de modifier certains paramètres, par exemple, nous pourrions peut-être changer certains paramètres de pavage avec lesquels nous pourrions définir notre page. Nous pourrions jouer avec des paramètres globaux pour les animations. Et, mais aussi, si nous allons de l'avant et choisissons un style global, nous allons jouer avec ceux-ci en seulement une seconde. Nous sommes capables, nous serons en mesure d'ajouter nos couleurs globales qui seront toujours présentes lorsque nous voulons utiliser les couleurs. Il y aura, chaque fois que nous cliquerons comme un sélecteur de couleurs, nos couleurs globales seront là. Et bien sûr, nous avons aussi des polices comme. Donc, nous pourrions choisir notre police d'affichage par défaut, affichage devant des chevaux, une police pour notre, pour nos titres. Et nous avons aussi des polices pour notre texte. Vous pouvez également ajouter des fonds ici si vous, si vous le souhaitez. Et nous pourrions changer nos titres afin de définir globalement la taille et les couleurs de chacun de nos titres de 1 à 6 ans. Et nous pourrions aussi changer le corps du texte, la taille de la police, poids, la couleur de notre puits, ce corps de texte. Donc, toutes ces choses que, que vous aimeriez définir globalement. Maintenant, disons que vous voulez juste et définissez vos titres pour être, je ne sais pas, écrit dans la police Bree Serif. Et vous voulez qu'ils soient lus Toujours. Tu pourrais juste mettre ça ici. Et puis quand vous ajoutez un titre de notre, comme ce gars ici de notre panneau d'outils, alors vous n'avez pas à vous soucier des couleurs , de la taille, du poids et de la hauteur de la ligne. Tu peux tout mettre ici, non ? Nous avons donc parlé brièvement de cela et de l'interface oxygènes, bien sûr, nous allons plonger, plonger beaucoup plus profondément une fois que nous commençons à ajouter nos éléments à notre site Web. Mais en fait, nous allons peut-être jouer avec ces paramètres globaux. En fait, des globaux, des couleurs, des couleurs globales. Et ajoutons quelques polices à notre, à notre site. Et pour cela, nous allons devoir juste jeter un coup d'œil à d' autres sites qui utilisent habituellement mon scénario de concepteur. Et je ne veux juste pas sauter une étape lors de la création de ce design. Bien sûr, gardez à l'esprit que le design lui-même n'est pas la chose la plus importante ici. chose la plus importante est l'apprentissage de l'UE, ou encore une fois, dans toutes les compétences dont vous aurez besoin pour créer, recréer vos propres designs. Donc passons en fait à un site que j'utilise pour ramasser quelques couleurs et quelques fans. 10. 3.4Global et polices de caractères: Alors commençons peut-être par ajouter des jeux de couleurs à notre site Web. Donc, je vais choisir, je vais aller sur un site appelé Coolers dot co. Et vous probablement bien, vous avez probablement vu ce site ou entendu parler, au moins. C' est juste un excellent site pour trouver des couleurs différentes, des schémas de couleurs. Alors commençons le générateur. Et ici, comme vous pouvez le voir, nous avons des nuances de couleur. Par défaut, nous avons 12345 nuances de couleur. Mais si vous le souhaitez, vous pouvez simplement cliquer dessus, ajouter des couleurs plus un symbole pour simplement ajouter une autre nuance de couleur. Et bien sûr, nous pourrions l'enlever si vous le vouliez. Et nous pourrions faire la même chose avec d'autres couleurs. Donc, ce que je fais habituellement, ce que je commence habituellement c'est que j'essaie de les trouver en couleur pour mon texte et en couleur pour l'arrière-plan du texte. Et je n'aime pas vraiment aller avec Leckie noir et avion. Pourquoi ? Parce que je pense juste qu'ils sont trop utilisés l'HIPPA, trop ennuyeux. Mais bien sûr, ce sera totalement à vous de décider si vous voulez aller avec du noir et du blanc uni. Quoi qu'il en soit, j'aime juste utiliser un peu couleur gris très clair. Et je sais que le code hexadécimal pour ça est F8, F8, F8. Nous pourrions aussi aller avec quelque chose encore plus léger, qui serait F9. F9, F9, F9. On y va. Et une fois que je serai heureux avec la couleur, je vais juste la verrouiller. Et puis je vais essayer de trouver un beau fond, comme, euh, comme la couleur la plus sombre. Je vais, j'aime passer du plus léger et du plus sombre et ensuite on peut essayer de trouver autre chose. Donc pour ce type, je vais peut-être essayer de trouver une belle nuance de ça, peut-être cette couleur marron très foncé qui semble bien, et je vais juste la verrouiller. Et puis si nous essayons juste de venir bien, si nous laissons juste le générateur de venir avec d'autres couleurs pour nous, nous pourrions juste appuyer sur la barre d'espace pour trouver quelques couleurs que nous pourrions utiliser fin ces couleurs pourraient être pour nos liens. Ils peuvent être pour nos boutons ou nos états de vol stationnaire, tout ça, toutes ces choses. Mais la partie la plus importante ici est d' essayer d'abord de trouver votre jeu de couleurs lorsque vous concevez votre site Web. Et puis pour utiliser tous ces, toutes ces couleurs, toutes ces nuances de couleurs, peut-être ajoutons un de plus. Tous ces échantillons de couleur à l'oxygène. Et c'est essentiellement ce que j'aimerais que tu apprennes de cette vidéo. Donc nous avons ce F8, GAFI, F9, F 9 sur 9. Je vais juste copier cette couleur. Et je vais aller à l'oxygène. Et je vais ajouter un jeu de couleurs. Et je vais l'appeler peut-être comme les couleurs par défaut. On y va. Et je suis, je vais juste à Edit. Et maintenant, dans cet ensemble, ce jeu de couleurs par défaut, je vais juste ajouter une couleur. Et appelons que ça peut être gris clair. Et je vais juste coller cette valeur hexadécimale, hexadécimale comme ça. Donc, nous avons notre, notre lumière, gris clair et puis nous allons de l'avant et. Prenez ce code hexadécimal aussi. Et ça va être notre brun foncé. Marron foncé. On y va. Je vais le coller. Et voilà, nous avons notre gris clair et notre brun foncé. Et bien sûr, dans votre cas, vous ajouteriez différentes couleurs. Nous allons peut-être juste, comme la pratique, ajoutons peut-être un peu, peut-être attrapons ce Y marron plus léger rien. Cela pourrait être une bonne couleur pour nos boutons. Donc je vais juste me mêler ça s'appelle brun moyen. On y va. Et un autre hashtag et ajouter la couleur. Donc je ne vais pas le sauver. Donc, ce serait notre palette de couleurs par défaut. Pour l'instant, gardons les choses simples et gardez-les comme ça. Comme je l'ai dit, est, il ne s'agit pas vraiment de la partie design. Je ne veux pas vraiment la rendre jolie. Je veux juste le rendre pratique. Je veux juste que tu apprennes les compétences. Je veux juste que tu apprennes à manipuler l'oxygène pour créer tes propres designs. Bien sûr sera la création d'un design le long du chemin. Mais pour l'instant, apprenons simplement que par défaut. Comment configurer certaines valeurs par défaut ici à l'intérieur de l'oxygène. Donc ce sont nos couleurs. Alors qu'en est-il des polices ? Donc, quand il s'agit de polices, j'aimerais aller à la paire de polices. Parent affectueux. Là, nous allons de parent dot co. Et ici, nous avons une belle, assez vaste ensemble de différentes, de différentes paires de polices nous allons. Et nous pourrions aller avec des polices Sans Serif et Sans Serif ou san-serif serait notre écran trouvé notre téléphone de tête et serif. Dans ce cas, Alexandria, serait notre corps de police de texte. Nous pourrions aller avec un capteur de san-serif, affichage et san-serif comme celui-ci, ou affichage et Serif. Et nous pourrions, vous savez, choisir la catégorie que nous voulons ici. Donc, tous ces téléphones sont des polices Google ou ils sont libres et ils viennent avec de l'oxygène aussi bien. Essayons de trouver quelque chose de gentil. Je sais que je vais utiliser pour notre police de logo appelée Bree Serif. Voyons si on peut le trouver. On y va. On a Bree, Serif et Laura juste là. Voyons s'il vient dans une autre paire. Bree Serif et l'ouverture se termine. Et je pense que je vais aller avec cette paire parce que c'est juste un beau contraste entre genre de titre funky et un texte vraiment lisible. Donc nous pourrions aller avec ces polices Paris, mais nous pourrions aussi aller sur un site de code de site appelé Font font joy. On y va. Et ici, nous pourrions jouer avec ce contraste le curseur, Curseur de contraste. Nous pourrions donc dire que nous aimerions avoir plus de contraste entre nos titres et notre texte. Ou nous aimerions avoir un contraste très, très faible. Et vous pouvez voir que nous avons le nom de la police ici sur la gauche, et le nom de la police de notre sous-titre ici sur la gauche aussi. Et nos textes et bien, le nom de notre corps de police de texte est également ici. Donc, si tu veux aller avec une paire de polices très contrastées, on pourrait le faire. Donc, nous aurions un Enrico Letta et aussi un labo de pitreries pour notre, pour notre corps texte. Mais c'est juste un autre outil simple et très intéressant pour trouver des paires de polices joliment regardantes. Donc je vais y aller avec Bree Serif et Open Sans. Alors je vais aller à l'oxygène. Ma police d'affichage va être Bree Serif. Et je vais laisser ça en science ouverte et je vais juste la sauver. Donc en ce moment, chaque fois que j'ajouterai un titre ou j'ajouterai du texte. Et l'oxygène va supposer que je veux utiliser cette police Bree Serif pour mon titre, une phrase ouverte pour mon corps de texte, mais aussi pour les menus et les liens finis. Donc nous avons les couleurs, les couleurs par défaut, nous avons les polices. Nous pourrions aussi passer à nos rubriques si nous le voulions. Donc, disons que nous aimerions peut-être garder ce titre, un comme 36 pixels. Mais ajoutons peut-être, eh bien, changeons une couleur. Donc je vais juste cliquer sur cette couleur. Et vous pouvez voir ici, nous avons affiché nos couleurs par défaut. Donc, il pourrait juste ajouter ce brun foncé comme couleur. Et puis appuyez sur sauver. On pourrait faire la même chose pour le titre 2, brun foncé. Et maintenant, chaque fois que nous ajoutons cette rubrique un ou un cap à, en direction de la rubrique 3, si nous, si nous ajoutons simplement cette couleur, nous savons que c'est exactement la couleur que nous utiliserons pour cette rubrique. Et bien sûr, nous pourrions également changer la taille de la police si nous le voulions. Mais maintenant, gardons les choses simples. Ajoutons juste les couleurs. On pourrait toujours les changer. La valeur de titre d'une instance spécifique d'un titre une fois qu'il a été placé sur notre, sur nos cannibales. D' accord. Donc on a les couleurs, on a les fonds, on a quelques rubriques. On pourrait peut-être réduire la taille de la police à 15. Et peut-être changeons la couleur pour notre brun foncé. On y va. Laissons la hauteur de la ligne pour l'instant, tel quel. On pourra le changer plus tard et je vais juste le sauver. Nous avons donc mis en place nos valeurs par défaut. Nous sommes arrivés à, nous apprenons à utiliser l'interface oxygènes fondamentalement. Donc maintenant, nous pouvons réellement commencer à ajouter notre modèle. Et allons-nous commencer par ajouter, bien sûr, une section. Et nous allons apprendre ce que sont les sections, ce que sont les colonnes et les développeurs dans les vidéos suivantes. Et nous commencerons par ajouter notre logo dans le coin supérieur gauche de notre site Web. Site web. Alors commençons à le faire ensuite. 11. 3.5Commencez à construire l'enl: Pour commencer à ajouter nos logos, menus et icônes sociales et toutes ces choses, nous devons d'abord réfléchir à l'endroit où nous allons le mettre. On a besoin d'une sorte de récipient à l'intérieur d'un oxygène. Et en fait, dans n'importe quel projet de développement d'armes, c'est une bonne idée d'avoir d'abord une sorte de conteneur pour garder toutes vos petites pièces, tous vos petits éléments. Maintenant, généralement en oxygène, nous commencerions par une section et ensuite nous pourrions ajouter un div ou des colonnes. Et nous en parlerons dans quelques instants. L' un des, l'une des vidéos à venir. Mais nous construisons un en-tête, notre modèle avec un en-tête en ce moment. Donc, en oxygène, vous obtenez un constructeur Hadoop. C' est un type spécial d'élément de module de section. Donc, si nous tapons juste l'en-tête et puis le constructeur Hatteras, vous pouvez voir qu'il a effectivement été ajouté à notre site Web. Si nous nous dirigeons vers notre structure, vous pouvez voir que nous avons notre constructeur d'en-tête. C' est notre section principale. Et puis nous avons notre ligne d'en-tête avec trois éléments. Donc, nous avons obtenu notre élément gauche, élément central et éléments d'écriture. Donc à gauche, au centre et à droite. Et généralement dans un scénario de conception Web typique, nous mettrons notre logo dans la partie gauche de notre en-tête. Et pour cela, nous pourrions utiliser la partie gauche de la ligne ici à l'intérieur de notre ligne d'en-tête. Donc, nous allons réellement ajouter un logo de créé est quelque chose comme, eh bien, un logo très, très simple, simple pour notre site Web. J' appelle la conception wow parce que y rien, Je viens de prendre cette icône simple de l'icône plate. Et comme vous pouvez le voir, j'ai eu deux versions différentes de ce logo, de ce logo. L' un est, eh bien, notre brun foncé et l'autre est notre lumière, lumière, grande. Donc, dans ce cas, nous pourrions ajouter notre logo de deux façons différentes. Le plus simple, le plus facile sera juste de transformer ce gars en une image simple et de le télécharger comme notre logo, ce que nous allons faire maintenant. Et vous le feriez généralement comme ça si votre type est quelque chose d'un peu plus spécial, quelque chose de funky, quelque chose de personnalisé, quelque chose qui n'est pas facilement récupérable avec du texte simple et simple. Donc je vais juste attraper ces gars. Et je vais appuyer sur Alt plus control plus Shift plus S pour exporter ces éléments. Comme vous pouvez le voir, j'utilise Affinity Designer, mais si vous utilisez Photoshop ou Illustrator, vous pouvez transformer votre texte et cette icône en une image. Donc je vais choisir le PNG parce que je n'ai pas besoin de l'arrière-plan. Et je vais juste utiliser la sélection sans arrière-plan. Et la taille est très bonne. Je vais juste frapper Export. Et je vais l'appeler peut-être le logo 1. Et je vais frapper Save. Et maintenant, je vais revenir à mon design. Et je veux ajouter une image ici dans la partie gauche de mon générateur d'en-tête. Donc encore une fois, je vais choisir ajouter et je vais trouver une image. On y va. Et je vais devoir trouver mon image dans ma médiathèque. Donc, je vais juste aller chercher. Et maintenant, je vais juste devoir trouver cette image. Donc, une fois que j'ai trouvé mon image, je vais juste double-cliquer dessus et juste choisir Sélectionner l'image. Et comme vous pouvez le voir, cette image a été placée à l'intérieur de ma flèche gauche. Donc c'est mon logo. Et, tu sais, si tu veux, et ça, je pense que ce serait une bonne idée. On pourrait peut-être jouer avec cette image. Je veux dire, on pourrait, par exemple, le rendre plus petit. Alors laissez-moi juste peut-être changer la hauteur à quelque chose comme 45 pixels, ou peut-être même dernier, quelque chose comme 32 pixels, ou peut-être même 26 pixels. Nous pourrions descendre et descendre et descendre autant que nous, comme nous le voulons. C' est donc une façon d'ajouter le logo sur notre site Web. Bien sûr, nous devons encore jouer avec un peu d'espace autour de tous ces éléments. Mais pour l'instant, nous apprenons simplement à ajouter un élément sur notre site Web. Et en fait, si on travaillait et gardait ça, et si on prenait nos, nos sites Web, eh bien, l'adresse, je vais juste la copier. Et depuis que je suis sur un Firefox, je vais juste utiliser le contrôle plus Shift plus P raccourci clavier pour ajouter à entrer que le mode Incognito. Mais si vous êtes sur Chrome, vous utiliseriez, vous pouvez utiliser le contrôle plus Shift plus n pour entrer en mode Incognito. Donc je vais juste à l'adresse de la tablette. Et vous pouvez voir qu'en fait, nous commençons déjà à construire notre site Web. Vérifions si cela, si cela fonctionne aussi sur Chrome. On y va. Nous avons obtenu notre site Web essentiellement commencer, commencer à fonctionner vraiment. C' était aussi simple que ça ? Mais comme je l'ai dit, ce n'est qu'une des façons d'ajouter un logo comme celui-ci. Ce que nous pourrions faire, cependant, est que nous pourrions peut-être ajouter le juste notre, à notre image comme cette pièce de notre design. Donc je vais juste l'attraper. Et encore une fois, je vais contrôler le décalage en tant que sélection PNG sans arrière-plan. Exporter. L' exportation est, comme vous pouvez le voir, déjà, exploitée, exportée auparavant. Donc je vais juste appeler ça login pour sauver ce gars. Retournez à Firefox et à nouveau, ajoutez une image. Et je vais devoir trouver ce type. Donc, une fois que je l'ai trouvé, je vais juste la lire, sélectionner une image. On va frapper Save. Comme toujours, parfois, nous avons juste à rafraîchir la page et nous avons mis notre logo juste ici, encore dans notre gauche, rangée gauche. Si vous le voulez, vous pouvez simplement faire glisser cette image dans une autre partie de notre, eh bien, ce générateur d'en-tête si vous le voulez, mais, vous savez, c'est juste, c'est juste une chose que vous pouvez faire, mais nous allons la mettre à l'envers et appartient. Et je suis, je vais juste enlever ce logo maintenant. Donc, pour ce faire, je vais juste passer la souris sur cette image juste ici, cette couche. Et je vais juste appuyer sur cette icône x Supprimer le composant. On y va. Donc nous avons eu notre image et nous allons peut-être la rendre plus petite, mais nous n'avons pas le texte, alors comment ajouter le texte pour notre logo ? Quand encore, encore une fois, je vais juste appuyer sur ajouter. Eh bien, trouvons le texte. On y va. Et je vais juste taper, WOW, concevoir leur ego. Mais puisque ce n'est qu'un texte simple et que nous l'avons défini au sens ouvert, comme vous pouvez le voir, notre police n'est pas la police qui, censée battre, censée être Bree Serif. On pourrait le changer ici. On pourrait juste aller de l'avant et choisir d'afficher le serif, ou on pourrait juste me laisser enlever ça. Ou on pourrait ajouter un titre. Donc il suffit de taper le titre. Et comme vous pouvez le voir, nous avons déjà la police dont nous avons besoin. Mais comme il est défini, cette balise est définie sur un. Et dans nos valeurs globales et globales, nous le fixons à 36 pixels, je crois. C' est beaucoup trop grand, mais on pourrait quand même le rendre plus petit, comme 24. Bien sûr, nous allons taper le texte pendant la conception. Et on y va. On pourrait peut-être changer certaines choses. Laisse-moi faire une ville peut-être juste un peu plus petite, 36 parce que ça devrait aller. Et on pourrait encore aller à l'onglet Avancé, puis à la topographie. Et ici, on pourrait peut-être augmenter l'espacement des lignes, espacement des lettres vers le mu principal pour le faire ressembler à ça. Je pense que ça a l'air bien. Maintenant, si vous voulez peut-être augmenter ou diminuer l'espace entre eux, ces éléments, vous pouvez saisir votre texte ou votre image dans ce cas. Et encore une fois, passez à avancé, cette fois à la taille et à l'espacement. Et ici, vous pourriez, vous pourriez, bien sûr, n changé leur hauteur ou leur hauteur minimale ou largeur. Mais vous pouvez aussi jouer avec quelque chose appelé rembourrage et marge. Mais parlons de ces deux-là dans la prochaine vidéo. 12. 3.6Ajoutez du rembourage et padding: Donc, nous allons maintenant parler rapidement de deux idées, deux éléments dans un développement web et sont extrêmement importants, mais heureusement extrêmement facile à comprendre. Et ils sont extrêmement importants parce que vous les utiliserez beaucoup. Et ces éléments sont rembourrage et marge. Et la différence entre eux est qu'ils annoncent essentiellement de l'espace autour d'un objet, mais Padding ajoute comme un espace intérieur dans un conteneur et l'espace extérieur de la marge d'Ed. Mais dans notre cas, fondamentalement en ce moment, nous pourrions utiliser l'une de ces valeurs. Donc, si nous voulons ajouter, disons, un peu d'espace entre notre oiseau et le texte, nous pourrions utiliser soit le remplissage, soit la marge. Donc, si nous tapons, disons, dix pixels, vous pouvez voir que nous développons ce conteneur ici. Vous pouvez voir cette ligne, cette ligne violette, c'est une marque dans notre conteneur. Et si nous avions la marge, vous pouvez voir que le conteneur reste le même. Mais nous avons un peu d'espace entre notre oiseau et le texte, comme nous l'avons fait avec le rembourrage, mais le conteneur reste intact. Maintenant, une autre chose que nous pourrions faire en termes de marge et rembourrage est que nous pourrions ajouter un peu de rembourrage à notre conteneur principal, notre ligne d'en-tête juste ici. Et vous trouverez presque toujours des options de rembourrage et de marge sous l'onglet avancé. Et puis la taille et l'espacement. Nous sommes à nouveau dans ce rembourrage, rembourrage et options de marge maintenant. Mais avant de commencer à faire cela, et avant de vraiment commencer à comprendre la différence entre le rembourrage et la marge, surtout lorsqu'il est ajouté aux conteneurs. Permettez-moi de changer rapidement l'arrière-plan de notre en-tête à quelque chose de vraiment arbitraire, quelque chose comme ça. On le changera dans une seconde. Donc encore une fois, la taille et l'espacement. Et si nous ajoutons maintenant un peu de rembourrage en haut et en bas, disons 50 pixels puis 50 pixels, deux haut et bas. Vous pouvez voir que notre conteneur grandit. Maintenant, nous avons beaucoup de cette couleur rouge pâle juste ici. Mais si nous avons ajouté la marge, même si les valeurs sont les mêmes, vous pouvez voir que nous gardons fondamentalement le conteneur intact en termes de taille visible ou perceptible. Mais nous ajoutons de la marge à l'extrémité supérieure et inférieure. Bien sûr, vous ne pouvez rien voir en ce moment parce qu'il est blanc contre large. Mais si vous passez juste au-dessus de cet espace ici, vous pouvez voir que nous le sommes, nous ajoutons en fait une certaine marge. Et en passant, si vous ne voulez pas ajouter de marge ou de rembourrage comme manuellement comme ici, vous pouvez toujours saisir ceci comme un bord d'un conteneur. Les bords jouent autour d'elle, jouer avec elle. Et la même chose pour le rembourrage comme celui-ci. Et puis, comme vous pouvez le voir, ces valeurs ont été saisies automatiquement ici à l'intérieur de nos valeurs de remplissage et de marge. Je ne veux pas que ces gars ressemblent à ça. Je veux ajouter un peu de rembourrage, mais pas beaucoup. Allons-y avec peut-être 2525. Je suppose que ça devrait être distribué, non ? Peut-être, peut-être 18 ans. Bien sûr, si nous avions développé une conception appropriée auparavant, nous aurions déjà toutes ces valeurs. Mais comme je l'ai dit, il est plus sur juste la plaine autour d'un apprentissage des compétences pour construire un site que juste en fait coller directement à notre conception et faire une publicité mince Luca, le plus beau possible. Donc on a notre logo, on a une marge, et on a de l'espace juste ici. Je ne suis pas allé, cependant, supprimer cette couleur d'arrière-plan. Et nous sommes de retour avec notre, notre design. Et si vous voulez vérifier à quoi cela ressemble, si nous ne sommes pas connectés. On y va. Nous avons notre bien conçu et notre logo juste ici en haut à gauche. Maintenant, ça a l'air tout, tout va bien. Mais bien sûr, nous devons toujours nous souvenir notre conception quand il sera accessible par les utilisateurs à partir probablement d'un appareil sans mobile. De nos jours, la majorité du trafic et des sites Web provient d'appareils mobiles, pas d'ordinateurs de bureau, d'ordinateurs portables ou autres. Nous devons donc faire attention à cela. Et je pense que nous devrions déjà commencer à comprendre comment aborder ce problème dès le début, dès le début, parce que c'est extrêmement, extrêmement important. Donc, il est en fait commencer à le faire dans la prochaine vidéo. 13. 3.7Prendre en compte la réactivité: Donc, comme je l'ai dit, notre design est beau. Eh bien jusqu'à présent, notre logo semble bien sur les appareils de bureau, mais qu'en est-il des appareils plus petits ? Nous devons donc nous occuper du côté réactif des choses ici, à l'intérieur de l'oxygène. Et c'est vraiment facile. Si nous regardons ce petit mélangeur juste ici à gauche, vous pouvez voir que nous avons quelques icônes. Et si nous cliquons simplement sur l'une de ces options, alors allons-y avec le conteneur de page, 1120 pixels et ci-dessous. C' est ce que notre design est probablement, eh bien, je veux dire, la taille de notre logo va ressembler à la plupart des ordinateurs portables. Jusqu' à présent, ça a l'air bien. Allons à moins de 992. Ça pourrait être comme des tablettes plus grandes. C' est aussi très bien. Allons à moins de 768. Maintenant, puisque nous allons avoir un menu ici, peut-être que nous pourrions changer certaines choses à ce sujet. Peut-être pourrions-nous, par exemple, changer la taille du texte. Donc je vais juste sélectionner, c'est en route, ce gars juste là. Et pour 768, j'aimerais peut-être le rendre juste un peu plus petit, peut-être cette image aussi. Donc je vais peut-être utiliser ce curseur maintenant. Et je vais ramener ce type à 18 pixels. Et pour ce type, peut-être que je vais le faire, voyons aussi en pixels. Maintenant, ça va être beaucoup trop petit. 2424 devrait être bien. On y va. Donc on a notre hmm, tu sais quoi, peut-être qu'on change aussi ça. La taille de notre écart ici. Peut-être que nous allons le rendre juste un peu plus petit. Et comme vous pouvez le voir, si vous passez à la taille et à l'espacement, nous pourrions peut-être faire comme cinq pixels, pas plus. Donc, si nous allons maintenant à nos anciens appareils, alors c'est notre logo. Puis conteneur de page, puis moins de 992, puis 768. Maintenant, il devient plus petit et passons moins de quatre AD. Pour 80 ans, ça a toujours l'air bien. Bien sûr, nous allons jouer avec le côté réactif des choses beaucoup plus dans les prochaines vidéos. Si tu veux, tu pourrais peut-être, peut-être parce que c'est comme ça que tu veux faire ton design. Allons peut-être à notre ligne d'en-tête. Et disons que peut-être nous aimerions changer la couleur de l'arrière-plan pour, pour notre comme Cain, peut-être comme une vue de smartphone. Pourquoi pas ? Juste pour le plaisir ? Donc si on est en moins de 480, maintenant, on va à Advance. Bien sûr, nous avons sélectionné notre ligne d'en-tête. Nous allons à l'arrière-plan, la couleur de fond. Et glissons peut-être changer la couleur de l' arrière-plan à ce gris clair ou peut-être même quelque chose de visible. Donc juste pour que vous puissiez voir le changement. Et on va le laisser comme ça. Je vais le sauver. Donc, si vous allez maintenant à nos anciens appareils ou grand fait un conteneur de page de bureau rien ne se passe moins que mon 92, pas grand-chose se passe. Moins de 768. Le logo et le texte changent maintenant, il est plus petit et moins de quatre AD. Et passons à notre, notre design. Et que d'ailleurs, nous pourrions, par exemple, en ce moment, juste commencer à changer la taille de notre port de vue de notre navigateur. Donc, comme vous pouvez le voir, nous sommes de plus en plus petits maintenant. Le sauté trop bien à moins de 768, je crois que c'était. Et la régularité du paysage, plus petit, plus petit. Et on y va. Nous avons notre plus petit smartphone aura dans la rangée d'en-tête sur les plus petits appareils ressemblera à ceci. Et si vous ne voulez pas conserver ces changements, ces changements comme celui-ci, n'oubliez pas toujours de vous assurer que vous êtes sur la bonne pause. Donc moins de quatre AD dans ce cas, je vais juste l'enlever. Et passons à moins de 768. Peut-être que je vais le laisser. Laissez-le comme ça, et rappelez-vous toujours que tous ces changements fonctionnent. Il y a une hiérarchie entre tous ces types. Donc, si vous définissez quelque chose pour moins de 992, disons que vous allez changer cette couleur de texte en, allons avec quelque chose de jaunâtre peut-être ou juste quelque chose de visible. On y va. Donc pour moins de 992, c'est comme ça. Donc, pour les valeurs supérieures, donc pour l'élément parent, nous sommes restés immobile, nous avons toujours notre original. Mais si nous descendons, si nous allons à l'enfant, cette valeur change et ensuite nous allons si nous allons à l'autre enfant, cette valeur change, mais seule la taille change parce que nous n'avons pas touché la couleur, donc la couleur reste la même. Si tu devais le changer pour quelque chose comme ça. Ensuite, nous allons à 1992. Nous sommes devenus verts, puis 768, nous sommes devenus bruns. Si nous n'y appliquons rien, et que nous n'appliquons pas la couleur, la couleur. Eh bien, n'importe quel attribut prend réellement les valeurs de l'élément parent, qui dans notre cas est le point d'arrêt 992. Mais bien sûr, nous n'avons pas besoin de la couleur verte, donc je vais juste m'en débarrasser. Je suppose qu'on pourrait rester avec notre avec la taille de notre logo. Ça a l'air bien. Gardons-le comme ça. Donc, nous avons notre logo, nous avons bien fonctionné, nous avons pris soin d'un côté réactif des choses. Donc je suppose qu'il est grand temps d'ajouter notre menu principal à droite. Alors commençons à le faire dans la prochaine vidéo. 14. 3.8Ajoutez le menu de bureau: Alors maintenant, commençons à ajouter notre menu. C' est un processus assez long ou complexe, mais il y a quelques étapes pour construire un menu sur chaque site web, pas seulement ici à l'intérieur d'un oxygène. Commençons donc par ajouter nos éléments de menu. Donc encore une fois, je vais juste frapper et, puis commencer à taper menu. Maintenant, comme vous pouvez le voir, il y a deux modules pour notre menu. Ce menu est le, eh bien je ne veux pas dire obsolète, mais c'est un vieux module de menu. Et depuis, je crois que l'oxygène à trois points, 3.2 ou 3.3, nous avons le menu pro. Donc je vais le faire, donc je vais utiliser notre menu ici. Maintenant, comme vous pouvez le voir, il est ajouté à notre première rangée, cette ligne, partie gauche, juste ici. Et je voulais être du bon côté, donc je vais juste le faire glisser vers la droite. Maintenant, par défaut, vous pouvez voir qu'il y a quelques liens de menu factice simples ajoutés à notre, à notre menu. Donc je vais aller à l'option du menu. Et comme vous pouvez le voir, c'est essentiellement AMT qu'on n'a rien ici. C' est parce qu'on n'a pas encore créé de menu. Donc, je vais juste sauver mon, mon site. Et je vais retourner au panneau d'administration. Et de temps en temps, vous allez voir ces messages ici vous informant que certains, certains de la mise en cache, que vous modifiez certains paramètres globaux et que vous devez remanier vos paramètres d'oxygène. Donc, nous allons juste cliquer dessus. Et puis vous êtes fondamentalement alors, comme vous pouvez le voir, tout fait, l'argent CSS universel généré avec succès. C' est essentiellement pour rafraîchir la mémoire de l'oxygène. Alors passons à la création réelle de ce menu. Je vais aller au panneau d'apparence, puis aux menus. Et créons notre premier menu. Je vais l'appeler Menu principal. On y va. Et je vais cliquer sur Créer le menu. Et ajoutons simplement tous nos éléments. Nous avons donc eu un contact sur le portefeuille AN. Je vais peut-être faire bouger ces gars. Bien sûr, nous pourrions également ajouter quelques éléments de sous-menu, mais pour l'instant gardons simplement, gardez-le simple. Et je vais frapper Create. Et puis nous pouvons retourner à nos pages Accueil. Et puis je vais juste appuyer sur Modifier le modèle. Et on y va. Vous pouvez voir que notre menu est, est juste ici sur la droite, sur le côté droit. Donc, comme vous pouvez le voir, l'oxygène a ajouté notre seul menu là où il est censé aller. Mais bien sûr, il y a beaucoup de choses dont nous devons nous occuper. Juste ici. Sur la gauche, vous pouvez voir différents onglets qui contrôlent l'apparence et la sensation de notre, de notre menu. Alors commençons par aller de l'avant et modifions certaines choses sur l'apparence du bureau de notre menu. Donc, si nous, si nous cliquons sur eux et le menu du bureau, vous pouvez choisir entre l'orientation verticale et horizontale de votre menu si c'est quelque chose que vous voulez faire, par exemple, si vous voulez faire comme une page de portefeuille. Ou site de portefeuille, vous pouvez peut-être simplement ajouter un menu vertical sur le côté et comme une grande pièce de portefeuille de l'autre côté. Et ici, nous sommes devenus différents à des moments différents. Et cela contrôlera réellement l'aspect et la sensation de divers aspects de notre menu. Donc, si nous passons à la typographie, nous n'avons pas besoin de jouer avec la famille de polices parce que non, notre d, nous avons déjà défini la valeur par défaut pour notre topographie pour les éléments autres que les en-têtes. Donc nous pourrions peut-être jouer avec la taille de la police si nous le voulons. Peut-être allons-y avec quelque chose comme 14. Et on pourrait changer la couleur. Allons avec notre couleur par défaut. Et peut-être, peut-être allons-y Chido. Voyons à quoi ça va ressembler si nous le mettons en majuscules, majuscules, notre transformation de texte. On pourrait aussi utiliser des minuscules si on le voulait, mais je vais aller avec des majuscules. Nous n'avons pas trop d'éléments Menu. Donc, je suppose que nous pourrions peut-être le rendre plus important, rendre plus visible par un changement dans le, transformant le texte en majuscules, en majuscules. Maintenant, si vous le souhaitez, vous pouvez également modifier le poids de la police. Rappelez-vous qu'il s'agit de la police Google, la science ouverte, de la science ouverte et de cette police de caractères. Nous allons donc obtenir des poids de police différents pour cette police et cet angle spécifiques. Laissons-le, laissons-le par défaut. Je pense que si tu pars avec 600, ça pourrait être un peu trop. Peut-être que si ce n'était pas le cas, si ce n'était pas en majuscules, peut-être que ça aurait l'air mieux. Donc, comme je l'ai dit, vous avez obtenu une flexibilité totale en ce qui concerne le changement de l'apparence et de la sensation de ces éléments. Et cela dépendra essentiellement vos goûts artistiques et de votre design et des attentes de vos clients, à quoi cela va ressembler. Mais vous savez, vous obtenez tous les, tous les changements juste ici visuellement, joliment disposés. Bien sûr, tous ces éléments se touchent les uns les autres. Ils sont trop proches les uns des autres. Allons donc dans l'espace dans une ligne et une bordure. Donc, ce que je voudrais faire, c'est que je voudrais ajouter une certaine marge entre ces éléments. Voyons donc, huit pixels. Huit pixels peuvent être corrects. Maintenant, si vous voulez ajouter, si vous voulez ajouter un peu de rembourrage à vos éléments, vous pouvez bien sûr le faire. Et ce serait, cela pourrait être utile si vous voulez ajouter des couleurs à cet élément, à l'arrière-plan. Donc, disons que nous voudrions ajouter un peu d'autonomie. On aime ça, ce genre de, ce genre de couleur. Et puis allons à nos manuels de bureau, base et alignement. Et ajoutons peut-être comme dix pixels. Et comme vous pouvez le voir ici, vous pouvez, il y a un, il y a un petit bouton Appliquer tout. Si nous cliquons dessus, nous allons appliquer à la même valeur à tous nos éléments. Mais ce n'est pas vraiment ce que je veux faire. Je vais juste supprimer tous ces éléments, tous ces éléments. Et bien sûr, je ne veux pas vraiment que ce type soit aussi marron. Je pense que ça a l'air mieux. Cependant, nous pourrions toujours jouer autour. Avec la topographie, peut-être augmenter la Taille puisque nous l'avons mis en minuscules, peut-être comme 15. Mais comme je l'ai dit, ce sera totalement, totalement à vous de décider. Et le dernier onglet ici dans ce menu de bureau est le survol et l'onglet actif. Tous ces éléments, tous ces, toutes ces valeurs vont vous permettre de changer l'apparence de votre, de vos liens de menu quand ils sont Hubbard ou quand ils sont actifs. Donc, lorsque la page spécifique est active. Donc, disons que nous aimerions changer la couleur du texte sur un hover. Disons que nous aimerions le faire sur notre vie. Couleur rouge funky. Donc, chaque fois que nous survolons notre morceau de texte, il va le faire, ça va changer. En outre, nous pourrions changer la couleur d'arrière-plan Hubbert. Donc, comme vous pouvez le voir maintenant, nous changeons le texte et l'arrière-plan. Et c'est là qu'aucun rembourrage ne jouerait bien avec ces changements, nous aurions plus de marge de respiration ici. Nous aurions plus d'espace. Donc, ça aurait l'air certainement mieux. Mais vous savez, nous apprenons les options. Donc, c'est ce que cette couleur d'arrière-plan survolée ne fait pas. Vous pourriez aussi avoir une frontière. Donc, si nous survolons, notre élément va ajouter une bordure. Laisse-moi enlever ça. Ajoutons simplement une bordure de deux pixels en bas. Et comme vous pouvez le voir en ce moment, nous avons déjà ce bas, cette bordure inférieure appliquée à notre, l' un de nos éléments de menu parce que nous sommes en train de prévisualiser cette page en ce moment. Donc, si nous avons un aperçu sur, cette bordure apparaît sous le lien about juste ici. Donc c'est quelque chose qu'elle pourrait faire. Bien sûr, vous pouvez également ajouter l'option de survol supérieur de la bordure supérieure. C' est ce que tu veux faire. Je pense que je vais le laisser en un seul. Je pense que j'aime cette option. Et je vais me débarrasser de la couleur du texte stationnaire. Je veux juste un joli soulignement de la frontière. Chaque fois que je survolais dans, survolait le menu, menu lien vous, nous pourrions également changer la couleur du texte actif. Donc, si nous affichons maintenant un aperçu de la page à propos, il s'agit donc de notre page active. On pourrait changer cette couleur pour, je ne sais pas, peut-être quelque chose, quelque chose comme ça. Donc, chaque fois que cette page est active, cette couleur de lien de menu va changer. Et je ne veux pas que cette couleur soit identique pour la couleur d'arrière-plan active. Et nous pourrions aussi changer la durée de la transition. Donc, si nous voulons ajouter une couleur à notre classe de textes survolés, revenons avec le rouge juste pour que vous puissiez tout voir mieux. Et si nous changeons la durée de transition, disons, je ne sais pas 5,5 secondes. Si nous survolons cet élément, vous pouvez voir qu'il s'estompe bien lorsque nous survolons le lien et s'estompons lorsque nous survolons comme ça. Donc c'est quelque chose que nous pourrions faire. Je vais le laisser et je vais juste quitter le fond de la frontière Hover. Cela va aussi être, comme vous pouvez le voir, sera aussi une transition comme ça, mais bien sûr, c'est un poids trop gros. Donc, on devrait l'être, devrait aller bien. C' est donc notre menu de bureau. Si nous commençons à faire de notre côté plus petit. Maintenant, à ce stade, il semble toujours bien, mais seulement parce que nous n'avons pas trop de pièces ici, juste ici, pas trop, pas trop d'éléments Menu. Mais une fois qu'on commencera à ajouter d'autres liens ici, ça gâcherait totalement notre menu. Ça n'aurait pas l'air bien. En fait, ajoutons peut-être d'autres liens à notre portefeuille. Juste, vous savez, juste pour apprendre à les ajouter et à quoi ça ressemblerait une fois qu'ils seront ici. Et nous pourrions également ajouter quelques éléments de sous-menu juste pour voir tous les effets que nous pouvons ajouter. Lorsque vous êtes, lorsque vous avez quelques éléments de sous-menu dans votre, dans votre menu et ce que vous pouvez faire avec eux ici à l'intérieur de l'oxygène. 15. 3.9Rendez le meu plus: Donc, si vous avez déjà des éléments de sous-menu dans votre menu, comme nous l'avons ici, vous ne pouvez pas changer leur apparence ici. Si c'est bien sûr, un menu de bureau juste ici dans cet onglet de liste déroulante de bureau. Donc, tout d'abord, nous pouvons activer la liste déroulante. Donc, quand nous faisons cela, nous pouvons réellement voir ces éléments ici. Bien sûr, si nous n'activons pas la liste déroulante, c'est bien, ça a disparu. Il est toujours là. C' est toujours dans la base de données. On ne le voit pas. Donc la première chose que nous pouvons faire ici est que nous pouvons changer le type d'animation maintenant il est réglé pour fondu, fondu vers le haut. Alors peut-être que nous allons voir à quoi ça ressemble quand nous, quand nous sortons de ce mode de construction, allons en mode Incognito. Donc c'est notre, c'est l'animation que nous avons, cette animation fondu vers le haut. Laisse-moi juste faire, le rendre plus petit pour qu'on puisse voir ici. Et si on va à quelque chose comme, je ne sais pas, on va retourner. Je vais sauver ça. Et puis je vais rafraîchir la page. Vous pouvez voir qu'on a une autre huile à différentes animations. Bien sûr, je vais vous laisser le soin. Nous pourrions augmenter ou diminuer la durée de cette animation. Alors voyons peut-être à quoi ça ressemble, quel effet ça fait. Vous ne pouviez pas les voir que non, en ce moment il faut beaucoup, beaucoup plus de temps pour animer ces éléments. Mais bien sûr, nous ne voudrions pas que l'animation prenne autant de temps. Je dirais que quelque chose entre 0,2 seconde et 0,4 devrait suffire. Nous voulons que tout se passe à innocence dangereusement, Nous ne voulons pas que nos utilisateurs attendent que notre magnitude se charge. Donc ça devrait être bien. Donc maintenant, ce que nous pouvons faire est que nous pourrions ajouter une ombre de boîte à notre, à notre menu. Donc, tout ce menu aurait une ombre derrière lui. Donc, je vais aller de l'avant et choisir une couleur, une couleur d'ombre. Et dit habituellement Devrions-nous quelque chose de sombre, mais aussi, je vais diminuer la transparence jamais si légèrement. Peut-être faire quelque chose comme ça. Et maintenant, nous pourrions faire peut-être jouer avec les valeurs de décalage horizontal, décalage vertical juste pour déplacer notre, notre ombre de boîte. Et nous pourrions échanger, augmenter et le flou et, et augmenter ou diminuer la propagation. Bien sûr, toutes ces options sont pour vous de jouer avec. Et ils fonctionnent essentiellement de la même façon qu'ils travaillent dans n'importe quel design et ce logiciel de conception. Alors voyons en fait quel effet il a fait. Alors on y va, on a ajouté notre ombre. Bien sûr, cela a l'air horrible, mais en fait, vous pouvez voir que c'est tout simplement fonctionne. Et c'est juste à votre imagination, à votre application, à votre design pour le rendre esthétique. Et pour vous et bien sûr à votre client, si vous voulez vraiment faire cela, que l'ombre de la boîte maintenant il semble bien un peu différemment. Maintenant, je n'ai pas vraiment besoin de cette boîte ombre Amoco en juste supprimé. Mais bien sûr, je voulais vous montrer à quoi ressemble cette option parce que, bien sûr, nous voulons apprendre à utiliser l'oxygène pour construire nos sites Web. Donc maintenant, nous pouvons aller à l'icône déroulante. Et bien sûr, nous pouvons montrer l'icône déroulante ou nous n'avons pas besoin de le montrer. Donc, cela saura juste que cela laissera à l'utilisateur penser s'il y a quelques sous-menus que nous voulons montrer, nous n'informons pas l'utilisateur qu'il y a réellement quelque chose qui se cache à l'intérieur de ce lien. Mais peut-être que cette icône n'est pas ce que vous voudriez. Je sais, je n'aime pas vraiment ça. On pourrait peut-être trouver autre chose. Par défaut, nous pouvons choisir parmi et polices impressionnantes polices ou icônes linéaires. Voilà, tu y vas. Peut-être qu'on trouvera quelque chose ici. Si vous les connaissez. Si vous connaissez le, vous savez, le nom de l'icône, vous pouvez simplement le taper. Laisse-moi voir à quoi ressemblera ce type. Je suppose que ça a l'air mieux que cette icône, mais peut-être que je vais juste changer la taille, quelque chose comme huit pixels et peut-être augmenter la marge, peut-être pas à dix, mais pour comme cinq, ça devrait aller. Et si vous le souhaitez, vous pouvez également faire pivoter l'icône. Peut-être deux, quelque chose comme ça. Voyons, 120 ou 90. Sachez, chaque fois que quelqu'un survolait cette icône, il verrait notre, notre sous-menu. Donc, il y a beaucoup de, beaucoup d'options à choisir ici. Et je pense que ces explications sont assez claires. Vous pouvez changer la rotation ouverte, vous pouvez changer même cette transition, de cette rotation. Mais encore une fois, je vais vous laisser le soin, à votre goût de conception, une application à votre expérimentation, parce que c'est vraiment le seul moyen que vous allez être doué à cela. Donc, après la liste déroulante Ico, nous avons des couleurs déroulantes. Donc si on change la couleur de fond pour peut-être quelque chose comme ça. Si nous survolons, vous pouvez voir que notre arrière-plan est, est en train de changer. Et si nous changeons cette couleur de fond survolée à quelque chose comme ce rouge foncé, quand nous survolons, peut-être laissez-moi juste enregistrer ce serait plus facile de voir les changements ici. Quand nous survolons, vous pouvez voir que c'est en fait, c'est en train de changer. Notre expérience est en train de changer. Laisse-moi me débarrasser de ces types. Bien sûr, nous pourrions changer la couleur du lien, la couleur du texte survolé, mais nous allons, je vais laisser le soin de vous si vous voulez changer cela. Et nous pourrions aussi changer les liens enfants ou si nous avions comme un sous-menu. Dans un sous-menu, on voudrait changer tous ces gars ici. Ok, donc je suppose qu'on a trié le menu du bureau. Et maintenant, je pense que nous pouvons maintenant passer à rendre notre menu réactif. Alors commençons à faire ça. Dans la vidéo suivante. 16. Menu 3.10réactif: Comme nous le savons déjà, une fois que nous avons commencé à aller, disons chance, comme moins de 768, notre menu semble horrible. Ça brise notre site. Donc ici, quand nous allons à notre menu pro primaire, éléments de menu pro, vous pouvez voir cette option juste ici qui dit Menu Mobile basculé en dessous de ceux avec tourbillon ouvert, vous pouvez voir que nous pouvons, que nous avons obtenu nos points de pause le comme ici. Et aussi toujours et jamais. Toutes ces options contrôlent quand votre menu va apparaître comme un, comme un menu réactif. Donc, si nous le faisons toujours, notre menu va toujours regarder comme c'est un menu réactif. Si nous le faisons, jamais, notre menu ne sera jamais un menu réactif. Mais si nous choisissons, disons moins de 992. Si nous commençons à prévisualiser notre, notre côté en ce moment, quand il est réglé à 11120 pixels et au-dessous, il semble toujours correct. Mais quand nous allons à moins de 992, vous pouvez voir que notre menu se transforme en un, dans un menu mobile, dans le menu smartphone. Je vais sauver mon site parce que je pense que je vais le laisser comme moins de 992. Ça a l'air bien. Que pouvons-nous faire pour notre menu ? Tout d'abord, lorsque nous cliquons dessus, vous pouvez voir à quoi ressemblera notre menu quand, quand nous l'ouvrons. Donc, quand vous allez à l'option de menu mobile juste ici, et vous pouvez voir que nous avons une tonne et une tonne d'options pour contrôler notre mobile, manuel mobile. Donc, tout d'abord, nous pouvons vérifier, nous pouvons voir quel bien, ce que je peux, Nous pourrions utiliser comme notre menu. Donc, d'habitude, nous utilisions quelque chose comme une simple barre de trois. Voyons si on peut le trouver. Peut-être pas comme ça. Voyons les lignes. Bien que tout va bien, je suppose qu'on pourrait utiliser celui-là. Mais je sais qu'il y a un autre, laissez-moi juste commencer à taper le menu qui peut-être, ce sera peut-être mieux. Donc, je vais choisir et ces barres ici, et vous pouvez voir que nous changeons notre, notre menu, icône de menu sera essentiellement instantanément. Et ici, vous pouvez choisir de laisser ceci comme levier manuel, ce texte comme menu. On pourrait taper quelque chose d'autre comme ouvert ou comme moi. Si vous le vouliez, ce serait juste le texte de notre menu, mais habituellement je le laisse vide. Donc, nous avons juste le menu simple longueur est, bien sûr, si nous cliquons dessus, vous pouvez voir que nous avons notre menu juste ici. Nous pourrions bien sûr changer sa taille, le rendre plus grand, le rendre plus petit. Je vais vivre. Ce ne sera pas aussi 42. Pourquoi pas ? On pourrait changer la marge, on peut changer la couleur. Alors peut-être que je vais lui donner ma couleur par défaut. Je sais qu'il n'y a pas trop de changement, mais je garde et les couleurs cohérentes. Nous pourrions changer la couleur du survol de l'icône si nous le voulions. Donc, chaque fois que quelqu'un le ferait, gros tapant dessus, alors cette couleur changerait. On pourrait changer le rembourrage. Donc si vous vouliez avoir peut-être comme dire, laissez-moi peut-être rendre ce gars noir et ensuite le je peux colorier. Faisons le, faisons la couleur blanche ou blanc cassé. Vous pouvez voir comment nous pouvons changer l'apparence de notre bouton. Bouton complètement. Ça va juste être, eh bien, ça peut être votre choix de design si vous voulez le faire comme ça, et vous pourriez peut-être juste leur faire que Penn est plus petit. C' est ce qu'elle pourrait faire si tu le voulais. Je vais peut-être se débarrasser de ces gars et revenir à notre original. Et je n'ai pas besoin de la couleur du rembourrage. Et je suppose, vous savez, toutes ces valeurs sont assez explicites, mais vous avez juste besoin de cliquer et de vérifier et de glisser. Et c'est juste toutes ces options juste pour que vous puissiez voir quel effet ils ont sur votre icône de menu. C' est donc l'icône du menu, mais c'est bien sûr seulement la mise en page de l'icône Ouvrir. Si vous voulez changer, si vous voulez avoir du texte ici comme ce texte de menu, vous pouvez le modifier, vous pouvez contrôler ce texte à partir de cette topographie d'icône Ouvrir. Maintenant, si nous allons fermer, je peux mettre en page. Ça va être l'ONU, ce menu juste ici. C' est, je veux dire, cette icône juste ici. Si vous vouliez le rendre différent, essayons peut-être de trouver quelque chose qui correspondrait à notre icône Open, comme une hache ou quelque chose comme ça, qui correspondrait à notre icône comme bébé, ce qui aurait l'air un peu mieux . Et encore une fois, vous pouvez choisir de laisser que le, cette icône textes aussi proche. Si tu voulais faire ça. On pourrait peut-être changer la position de notre icône. Peut-être le déplacer du côté gauche vers la droite. Et en fait, je pense que c' est quelque chose que l'équipe d'oxygène pourrait peut-être changer. Je ne sais pas pourquoi ils, cette icône est toujours définie par défaut à gauche quand généralement les gens sont droitiers. Et je suppose que c'est juste une meilleure convivialité UX lorsque cette icône proche est plus proche du côté droit et que nous ne le faisons pas, nous n'aurions pas à changer. Et tous ces éléments, toutes ces valeurs juste pour déplacer l'icône vers la droite. Et bien sûr, nous avons toutes les mêmes options ici que nous avions avec notre mise en page d'icône Open. Ok, donc peut-être pas, peut-être augmentons cette icône à 42. Je pense que la mise en page ouverte Eigen a été définie pour ouvrir eigenstates était entièrement définie à, je crois, je suppose que nous pourrions toujours le vérifier comme 42, donc nous gardons les choses cohérentes. Allons à nos styles de menu. Et je suppose que la chose la plus importante ici serait changer l'alignement du texte de l'élément au centre. Bien sûr, si vous vouliez l' aligner à gauche ou à droite, vous pourriez le faire. Mais d'habitude, quand j'en ai beaucoup qui ressemblent à ça, je le garde généralement centré. Donc je vais juste sauver ça. Et si nous passons maintenant à notre conception, vous pouvez voir ça et b, laissez-moi le faire plus grand. Si nous le rendons maintenant plus petit. On y va. Si nous commençons à rendre notre fenêtre plus petits et atteint le point de rupture 992 va changer en un simple Liban, simple, mais certainement un Menu Mobile. 17. Menu 3.11Off: Une autre chose intéressante à propos du menu mobile Voici ici et l'oxygène est le fait que vous pouvez le faire hors toile. Si vous cliquez simplement sur cette option ici, vous allez être en mesure d'animer la came sur la toile dans le menu. Un peu comme si ça venait de la fenêtre. Laisse-moi te montrer ce que je veux dire. Donc si on supprime juste ce gars, donc on a toutes les options par défaut ici. Je vais le sauver. Et puis nous allons à notre menu. Je vais rafraîchir la page. Vous pouvez voir que c'est un peu comme s'évanouir du côté droit. ce moment. Ce qu'on pourrait faire, c'est augmenter la taille de notre toile. On pourrait peut-être même le faire, pour l'instant, le rendre plus petit. Faisons en sorte que 66% juste pour qu'on puisse voir ce qui se passe. Et je vais l'enregistrer et je vais changer la couleur de fond juste pour que vous puissiez voir ce menu un peu mieux. Et donc si nous actualisons maintenant la page, encore une fois, vous pouvez voir que c'est notre, c'est notre manuel qui est un peu comme tomber de droite. Nous pouvons bien sûr changer certaines choses à ce sujet. Voyons si nous l'alignons à gauche. Et voyons à quoi ça ressemblera. Et vous pouvez voir qu'il est maintenant aligné vers la gauche. Mais je suppose que de la droite serait mieux. Et nous pourrions bien sûr, changer l'animation sur Canvas. Et il y a beaucoup d'options à choisir. Voyons voir, zoomer vers le bas et voyons ce que ça va faire. Je vais rafraîchir la page. Et ça va ressembler à ça. C' est assez lourd. Mais peut-être, vous savez, peut-être que c'est quelque chose que vous voudriez faire. Je réduirais peut-être la durée pour le rendre plus rapide. Voyons ce qu'il fait maintenant. Donc vous pouvez voir, je suppose que ce n'est pas la plus petite des animations, mais de noter quelque chose à quelque chose que vous pourriez faire. Donc je vais peut-être faire quelque chose de simple comme diapositive, glisser à gauche. Pourquoi pas ? Voyons, glissez vers la gauche. Et comme ça. Et ça a l'air beaucoup, beaucoup mieux, beaucoup plus lisse. Donc, bien sûr, quand nous diminuons la taille de notre fenêtre, puisque nous, puisque cette largeur est réglée à bouillir, réglé sur des pourcentages, vous savez, il va toujours prendre la, une quantité spécifique d'espace juste ici, montré dans pourcentages. Si nous devions le définir sur seulement des pixels. On y va. Et rafraîchissons la page. Maintenant, il va toujours prendre cette valeur. Mais dans les pixels qui n'ont pas l'air, n'a pas l'air trop beau. Si cependant nous voulions peut-être aimer couvrir toute cette page, nous pourrions utiliser la valeur de largeur de la fenêtre. Et si nous le définissons sur 100, cela signifie que toute la vue, toute la fenêtre sera cachée. Donc, si vous sauvegardez ce gars et puis actualisez la page et nous allons l'augmenter. Et vous pouvez le voir maintenant, nos menus couvrant l'ensemble de notre point de vue de gauche à droite parce que c'est ce que cette largeur de fenêtre VW unité ne fait pas. Donc je vais le laisser comme cette diapositive a laissé 2,2 secondes. Ça a l'air, ça a l'air bien. Donc maintenant que nous sommes arrivés à notre menu hors Canvas triés, nous pourrions toujours jouer avec des listes déroulantes mobiles. Alors ouvrons notre menu. Et comme vous pouvez le voir, nos menus sont cachés ici, mais ils n'ont pas l'air si bien. On pourrait peut-être changer la couleur de fond à ce que l'on voudrait vraiment. Nous pourrions peut-être changer la largeur de notre bordure à 1,1 pixels afin qu'elle corresponde aux bordures du menu du bureau. Et bien sûr, si vous vouliez mais jouer avec la couleur que vous auriez le style. Mais je suppose que ça a l'air, ça a l'air bien. On a notre mm-hm. Menu mobile. Menu. Plutôt, assez triés. Donc si on sauve ce gars et rafraîchit cette page, et je vais la rendre plus grande. Si nous commençons à descendre, descendez, descendez. Vous obtenez notre menu mobile. Si nous cliquons dessus, vous obtenez notre animation et nous avons nos listes déroulantes. Donc tout fonctionne, fonctionne bien, fonctionne bien, fonctionne bien. Donc, lorsque vous travaillez avec des menus ici à l'intérieur de l'oxygène, si vous ne voulez pas jouer avec toutes ces options, vous pouvez utiliser l'un de leurs presets qui viennent avec le, avec le programme. Donc je suppose qu'on pourrait jeter un coup d'oeil à ceux suivants. 18. Les préréglages du menu: Avant de commencer à utiliser les préréglages de menu de D, je vais enregistrer mon propre menu comme mon propre préréglage. Donc, je vais le nommer mon menu. Je sais que ce n'est pas créatif, mais je vais le sauvegarder comme mon menu. Et maintenant, il se trouve juste ici dans mon, dans ma liste avec d'autres préréglages de menu. Donc, disons que je voudrais utiliser le curseur pour écrire lieu. Et comme vous pouvez le voir, non seulement l'effet glissant va être appliqué, mais aussi tous les autres éléments. Ainsi, par exemple, le menu est réglé sur mobile et comme toujours, si nous cliquons dessus, vous pouvez voir qu'il est déplacé vers la gauche et nous avons tous, tous ces éléments. Et si nous allons à, disons bureau et mobile, vous pouvez le voir à nouveau, le menu change. Ça ressemble maintenant à ça. Et bien sûr, nous pourrions, voyons le minimalisme comme mon minimalisme. Eh bien, ce n'est pas trop pour minimiser les jours de fracture. Voyons à quoi ça ressemble. Quand nous, quand nous l'avons aperçu ici. Si nous cliquons dessus, c'est, c'est notre, c'est notre menu. Ça n'a pas l'air si mal, mais bien sûr, on pourrait encore changer les liens. On pourrait changer la police, toutes ces choses. Mais encore une fois, si vous voulez utiliser l'un des, l' un des presets qui viennent avec moi, viennent avec de l'oxygène. Tu pourrais certainement, certainement faire ça. Mais je pense que je vais rester avec mon, avec mon menu et je vais le sauver. Et je pense juste que ça a l'air un peu mieux. Et c'est une sorte de look que je vais chercher pour ce design parce que nous créons un design pour nos services en tant que designers. Donc je pense que si nous voulons simplement garder les choses simples, cela va nous montrer en tant que designers qui, qui a eu, qui a eu du goût. Laissons-le comme ça. Mais bien sûr, nous n'avons pas encore fini. Nous n'avons même pas fini avec notre en-tête. Dans le, dans les vidéos suivantes, nous allons jeter un oeil à des en-têtes collants et ajouter également des en-têtes de superposition. Ici, à l'intérieur du concepteur, nous avons fini avec le menu. Maintenant, nous allons terminer cet en-tête avec le, avec l'en-tête collant et l'en-tête de superposition. 19. Contenu d'intérieur: Donc maintenant, nous allons nous occuper de l'en-tête collant et aussi d'un en-tête de superposition. Mais pour que ces effets soient visibles, nous avons besoin d'un peu plus de contenu sur notre site Web. Et en fait, c'est une étape très importante ici dans l'oxygène d' initié parce que sans ce module de contenu interne, nous ne pourrions rien ajouter sur notre site une fois que nos modèles seront lus. Donc ce que je vais faire c'est que je vais aller de l'avant aux modèles d'oxygène et je vais l'ajouter mon modèle principal avec, avec de l'oxygène. Ok, donc je suis à l'intérieur de mon modèle et je vais aller de l'avant et cliquer sur ce bouton Ajouter. Et je vais commencer à taper du contenu. Et une fois que j'ai eu ce module de contenu interne ici, je vais juste cliquer dessus. Et comme vous pouvez le voir, il est ajouté à ma structure et pas grand-chose se passe réellement. Je veux dire, on pourrait le coiffer si tu le voulais, mais ce n'est vraiment pas le but de ce module. Fondamentalement, ce module va nous permettre de tout montrer sur notre site sans cela. Je, je suppose que ce serait possible, mais nous allons juste construire nos modèles. Et maintenant, si vous vouliez ajouter des images ou du texte ici, ce jour-là ferait partie du modèle. Et ils seraient affichés sur, sur chaque page qu'un utilisateur verrait. Donc, chaque fois que vous voulez juste, vous savez, comme la finition de la conception de votre, de votre modèle, de votre modèle principal. N' oubliez pas d'avoir le module de contenu interne prêt et attendu, pour vos prochaines étapes de conception. Parce que sans elle, ils seraient fondamentalement impossibles. Donc, une fois que c'est fait, on doit juste le sauver. Ensuite, je vais retourner à mon panneau d'administration. Parce que pour l'instant, si nous voulons voir cet en-tête collant et si nous voulons voir l' effet d'en-tête de superposition, nous devons avoir du contenu sur notre site Web, sur notre page. Donc je vais aller sur les pages et je vais l'ajouter avec de l'oxygène. Je vais éditer la page d'accueil avec de l'oxygène. Comme vous pouvez le voir en ce moment, nous avons obtenu à ce clic Ajouter à, ajouter des éléments à cette zone. Et ce bouton devrait essentiellement correspondre à ce bouton. Mais puisque, comme je me souviens de cela, ce texte est un peu différent de ce morceau de texte. Je sais que c'est juste le positionnement de ce symbole plus, mais annule toujours, tu sais, je le vois toujours. Je le remarque toujours. Mais de toute façon, une fois qu'on a ce type ici , on a eu ce texto. Nous savons que nous devons maintenant ajouter quelques éléments à notre site Web. Donc, si nous allons juste ajouter comme d'habitude, je vais juste commencer par une section. Et cette section va accueillir notre image de héros. Et je vais aller à l'Avancé , puis l'arrière-plan et inhere dans l'image d'arrière-plan. Je vais juste ajouter cette image à mon arrière-plan. Et comme vous pouvez le voir, il a été ajouté à toute ma section et il dit de parcourir toute la page par défaut, mais ce n'est pas le cas en termes de taille, eh bien, la hauteur de notre section. Donc si tu veux, je peux revenir à la taille et à l'espacement. Donc, si vous voulez, vous pouvez régler la hauteur juste ici. Et bien sûr, si vous le définissez comme des pixels, 500 pixels, vous allez essentiellement voir ceci. Et si nous devions changer la valeur unitaire de pixels à ce temps VH, qui est la hauteur de la fenêtre. Maintenant, nous allons dire au navigateur de, vous savez, de répandre notre image d'arrière-plan sur toute la hauteur de notre, de notre conteneur et indépendamment de la fondamentalement du conteneur. Donc, si nous devions le mettre à 100, ce design va, cette image va prendre, prendre 100 unités de hauteur de clôture. Je sais que nous pouvons encore voir comme ça, cette pièce ici en bas. Mais c'est juste parce que nous avons cet en-tête en haut et nous allons le faire, une fois que nous initialisons la superposition gérée, nous allons corriger cela. Mais pour l'instant, je vais juste le laisser comme ça. Et quand vous allez sur notre page principale, vous pouvez voir que nous avons cette image, image juste ici. Alors peut-être ajoutons un peu plus de contenu. Je suis bon d'y aller et je vais aller au panneau de structure et peut-être que je vais juste ajouter une section. Et comme vous pouvez le voir, il est ajouté juste sous notre section précédente. Et je vais aussi juste à, Je vais ajouter un texte factice que je vais emprunter du côté lorem ipsum. Je vais juste, je vais juste le copier. Et puis je vais juste le coller. Et peut-être laissez-moi juste dupliquer ce texte. Et je pense que ça devrait être bien. C' est quatre. Maintenant, c'est assez, assez de texte que nous avons juste pour apprendre à utiliser l'en-tête collant et l'en-tête de superposition. Alors commençons à le faire ensuite. 20. 3.14,: Pour ajouter un en-tête collant et pour changer notre en-tête en un hétéro-superposition, nous devons le faire à partir de, partir de notre niveau de modèle. Donc je vais juste m'assurer que je l'ai sauvé. Et nous allons simplement cliquer sur mon en-tête et cliquer sur ouvrir et modifier le modèle. Oui, oui, ouvre quand même. Et en ce moment, nous pouvons changer notre, notre en-tête, comme vous pouvez voir notre aperçu dans les maisons. Donc, nous pouvons voir tous ces éléments qui seraient juste mis pour notre page d'accueil. Et une fois que notre générateur d'en-tête est actif, nous pouvons aller à sticky et vous pouvez cliquer sur Activer l'en-tête collant. Donc, cela va faire est que cela va nous permettre de créer un en-tête collant, qui serait visible chaque fois qu'un utilisateur fait défiler sur notre site Web. Donc, quand quelqu'un fait défiler vers le bas, nous pouvons toujours montrer ce menu à notre, à nos utilisateurs. Donc, je vais juste laisser la distance de défilement dans un 2-300 parce que lorsque les utilisateurs défilent vers le bas dans un 300 pixels, vous pouvez voir que nous avons obtenu notre menu et apparaissant, mais nous allons corriger cette mise en page en seulement une seconde. Donc je vais le laisser comme ça. Je vais changer le fond collant à cette couleur. Donc maintenant, quand un utilisateur fait défiler vers le bas, fait défiler vers le bas, l'utilisateur va voir ceci, ce manuel comme ça. Et je vais choisir la décoloration, coller qui va juste bien animée. On pourrait peut-être augmenter cette perte de vitesse. On y va. Ça aurait l'air bien plus agréable. Et je vais sauver ce type. Cependant, nous pourrions peut-être changer certaines choses à propos de notre menu qui va être collant. Je veux dire, je ne pense pas qu'ils voudraient que ça ressemble à ça. Par exemple, je voudrais que ce menu soit plus petit. Et peut-être que je voudrais qu'il soit toujours réactif tout le temps. Donc pour ça, je vais juste aller à ma ligne d'en-tête et je vais le dupliquer. Donc, en ce moment, nous avons deux lignes d'en-tête identiques. Mais ce que je vais faire, c'est que je vais prendre mon image à gauche et que je vais la rendre plus petite. Je vais faire 24, peut-être même moins que ça, comme 18 ans. Et je vais faire la même chose avec le cap. Je vais le rendre plus petit, comme peut-être 16 ans. Ça devrait être bien. Et laissez-moi juste saisir l'image peut être et peut-être diminuer cette marge toujours aussi légèrement à quelque chose comme cinq pixels. Et puis je vais prendre mon manuel professionnel. Et je vais dire que ça va bien, d'être mobile. Toujours comme ça. Et peut-être que je vais aller à la mise en page du menu mobile et de l'icône Ouvrir. Et je vais le rendre plus petit, comme 24. Peut-être que ça ira bien. Maintenant, nous avons deux menus. Peut-être que je vais aussi changer ce rembourrage pour quelque chose comme 1010, ou peut-être même moins que ça, comme 55, non ? Donc je vais sauver ça. Et si nous revenons maintenant tout le chemin vers le primaire, nous pouvons maintenant choisir d'afficher cette ligne, cette ligne d'en-tête uniquement comme un en-tête collant. Donc je vais cliquer seulement montrer en collant. Et je vais cliquer sur cette ligne et je vais dire cache-toi en collant. Et maintenant, quand on sauvera ce gars, et je vais rafraîchir ma page. Si je commence maintenant à faire défiler vers le bas, vous pouvez voir que cet en-tête n'est affiché qu'une fois que le collant est masqué. Et quand tu descends, on a notre menu juste ici. Bien sûr, nous devrions résoudre certains problèmes ici, mais bien sûr, c'est, c'est facilement réparable. On peut facilement réparer ça. Mais le point principal ici est que vous pouvez changer la façon dont ce bâton d'en-tête hetero se comporte. Et une fois que vous faites défiler votre page, quand nous montons, l'ancien en-tête revient. Et quand on descend, on a vu notre nouvel en-tête collant juste ici. Donc c'est cet en-tête collant. Qu' en est-il de l'en-tête de superposition ? Je vais supprimer cet en-tête collant. Je n'en ai pas besoin. Laisse-moi juste enregistrer ça et je vais rafraîchir ma page. Donc j'ai mon en-tête juste là. Et ce que je vais faire, c'est que je vais aller au constructeur d'en-tête de structure. Et je vais aller de l'avant et choisir Overlay. Et je vais dire que je veux toujours superposer l'en-tête, ce qui va faire mon, mon image monter et faire mon, mon en-tête aller comme sur nos sections principales. Donc, si je l'enregistre et si je rafraîchis la page, vous pouvez maintenant voir que notre, que notre en-tête est tous été superposé sur cela, sur cette section. Et cette image est en fait en ce moment parce que nous l'avons réglée à 100 Vh, comme vous vous en souvenez, elle en ce moment, a pris tout, tout cet espace. Mais bien sûr, certains, eh bien, ça, eh bien, nous pourrions peut-être jouer avec toutes ces couleurs nous ne voulions peut-être pas faire ressembler ça à ça. Donc, ce que je ferais c'est que nous avons à nouveau, allez à la ligne d'en-tête et nous pourrions le dupliquer, dupliquer cette ligne d'en-tête. Et non, je ne veux pas le rendre plus haut et collant. Ce n'est pas ce qu'on veut. Ce qu'on veut, par exemple, on voudra cacher ce type quand il sera en superposition. Donc, cet en-tête supérieur, donc je dirais Haydn overlay. Mais ce gars du fond, on pourrait peut-être changer de couleur. Alors allons-y, laisse-moi prendre ma tête. Et je changerais la couleur du texte. Bien sûr, nous devrions changer cette couleur alors que cette image aussi bien. Mais si vous ne voulez pas le changer, si vous ne voulez pas simplement télécharger une version blanche de ce logo, nous pourrions peut-être faire un petit tour. On va aller à l'effet avancé que l'effet. Ensuite, vous pouvez aller à Filtrer. Et à partir de là, nous pourrions changer, choisir , inverser, puis aller à 100%. Et nous retournerions simplement la couleur de notre, de notre local. Maintenant, cela fonctionne dans ce cas, eh bien parce que nous inversons le noir. Donc, du noir, nous allons au blanc. Et si elle était lue, je suppose que bon pourrait inverser au vert ou au bleu. Je ne suis pas vraiment sûr, mais dans ce cas, cet effet fonctionne, généralement nous serions mieux si nous venons de changer cette image pour une version plus légère de notre, de notre logo. Mais de toute façon, on peut le faire comme ça pour le moment. Nous pouvons également aller à notre menu pro. Et nous pourrions peut-être changer, changer la couleur de notre, de notre menu. On pourrait changer la couleur ici. On pourrait saisir la couleur du curseur. Et je vais juste le laisser tel quel pour l'instant. Juste, juste pour vous montrer ce que cet en-tête de superposition fait réellement dans notre cas. Et comme vous pouvez le voir, ça a l'air plutôt sympa. Fondamentalement, nous avons un bon contraste entre notre arrière-plan et notre en-tête. Donc je suppose qu'on pourrait, on pourrait le laisser comme ça. Bien sûr, nous, je suppose que nous devrions travailler sur notre logo, sur notre menu ici, parce que pour le moment, ce n'est pas si génial. Et tu sais quoi, je suppose que je vais aller avec ce genre de design. Je vais aller avec cette superposition comme un en-tête. Donc je suppose qu'on pourrait peut-être réparer ce menu pour le faire paraître correct. Donc on pourrait peut-être jouer avec l'arrière-plan. On pourrait jouer avec les liens, l'icône, solide, commencer à le faire ensuite. 21. 3.15Reading du menu: Alors réparons notre menu. Faisons en sorte que ça soit beau. Donc je vais aller à mon moins de 992. Et je vais changer cette icône ici. Alors je vais aller à mon menu mobile. Je suis ouvert, je peux mettre en page. Et je vais changer la couleur pour ma couleur plus claire comme ça. Et si on clique dessus, laisse-moi voir à quoi ça ressemble. Nous avons eu le contexte que nous devions changer et les liens que nous devrons changer. Mais peut-être commençons par le fond. Donc je vais aller aux styles de menu, et je vais aller à la couleur de fond. Et nous allons l'enlever. Et tu sais quoi, peut-être essayons quelque chose de différent. Je vais aller avec cette couleur marron plus foncé, mais je vais diminuer cette transparence à un mensonge Psaume dix. Donc ça devrait paraître bien. Et maintenant, nous n'avons pas à jouer avec notre, avec nos liens parce que nous avons assez de contraste. Mais nous devons aller à notre icône de menu de fermeture, donc fermer la mise en page de l'icône. Et laissez-moi juste trouver la couleur pour ça. Donc, je vais juste cliquer sur cette option et changer ceci en blanc. Et peut-être que je vais essayer de le déplacer sur le côté. Donc, ça couvre ça et cette option ici, cette partie juste ici. Donc je vais juste aller de l'avant et je peux me positionner à gauche et je vais aller avec les pourcentages. Et voyons 75, voyons 85. Voyons voir 19. Peut-être que 90 ira bien. Sauvons ça. Et voyons à quoi ça va ressembler. Une fois que c'est fait. Je suppose que ça a l'air bien. Je suppose qu'on pourrait le laisser comme ça. Ou notre puits, presque tous nos menus fonctionnent bien. Nous devons toujours nous occuper des listes déroulantes mobiles. Allons donc à nos listes déroulantes mobiles. Et je vais supprimer cette couleur déroulante. Alors voyons à quoi ça ressemble maintenant. Ça a l'air beaucoup mieux. Sauvons ce type, rafraîchissez-vous. Et encore une fois, et c'est notre menu. l'air plutôt sympa, je pense que ça a l'air bien. Donc, nous avons notre, nous avons notre menu d'en-tête terminé. Nous avons également complété notre image principale pour notre héros. Cependant, nous allons jouer avec notre héros tranquillement dans les prochaines vidéos. Et n'oubliez pas que nous avions encore notre en-tête collant juste ici. Donc vous pourriez voir quelqu'un des pépins. Bien sûr, si vous voulez garder l'en-tête collant, vous pouvez le faire. Tu sais déjà comment faire ça. Et je vous encourage certainement à jouer avec toutes ces options, mais je vais peut-être me débarrasser de ça. Je vais juste aller aux options collantes. Et je vais désactiver l'en-tête collant. Et voyons si ça a marché. Donc, je vais juste rafraîchir la page et comme vous pouvez le voir, l'en-tête collant a disparu. Donc, comme je l'ai dit, en ce moment, nous pouvons passer à rendre notre section de héros un peu plus intéressante ici. Nous pouvons ajouter un titre, des textes, peut-être des boutons, et peut-être un curseur, mais nous verrons cela dans les prochaines vidéos. 22. 4.1ering dans une section: Ok, alors passons à notre page d'accueil. Donc je vais aller sur les pages, toutes les pages, et je vais choisir la page d'accueil et je vais éditer avec de l'oxygène. Donc c'est notre mise en page. Donc, nous avons le nôtre, nous avons notre en-tête de superposition. Nous avons notre section 2, que nous avons ajouté une image de fond, celle-ci juste ici. Mais aussi, comme vous vous en souvenez peut-être, nous l'avons également réglé à 100 vh. Cette image s'étend sur toute la hauteur de notre section héros. Et bien sûr, on a du contenu factice ici que je suppose qu'on pourrait vraiment l'enlever, mais gardons-le pour l'instant. Donc l'étape suivante serait de rendre notre image de héros un peu plus intéressante. ce moment, nous n'avons qu'une image. Et nous ne communiquons pas trop de choses à nos utilisateurs. Donc, ce que je voudrais faire ici, c'est que je voudrais ajouter peut-être comme un titre, je voudrais ajouter du texte. A peut être un appel à l'action sous une forme, sous la forme d'un bouton. Mais avant de faire tout ça, et il y a quelques choses que nous devons garder à l'esprit. Si nous devions maintenant simplement ajouter, Disons ce titre. Et puis nous aimerions ajouter du texte. On y va. Et puis nous aimerions ajouter un bouton. On y va. Vous pouvez voir que toutes ces choses sont ajoutées dans le coin supérieur gauche. Bien sûr, il y a un peu de remplissage ici parce que la section par défaut est définie pour avoir la taille et l'espacement est défini pour avoir 75 pixels de remplissage haut et bas et 20 pixels de remplissage gauche et droit. Il y a donc quelques choses que j'aimerais faire pour ce texte apparaisse au centre, non seulement horizontalement mais aussi verticalement. Mais je voudrais aussi changer un peu cette image. Et je veux dire, j'aime m'assurer que cette image en arrière-plan, qu'il est également centré. Et en ce moment, on dirait qu'il est centré, comme si c'était bon. Mais quand nous commencerons à rendre tout ce design réactif, vous verrez que nous allons perdre notre composition, pour ainsi dire. Alors prenons-le lentement, étape par étape. Alors commençons par jeter un oeil à la façon de faire tout ce contenu, comment centrer ce contenu par rapport à notre section. Et vous pensez peut-être que nous devons peut-être aimer prendre la rubrique, la taxe ou le bas. Et puis peut-être comme dans Photoshop et Illustrator ou tout autre programme, touche juste une option d'alignement juste ici en haut. Mais dans la construction de site web, je suis, ce serait surtout ici en oxygène. Ce serait une meilleure idée de dire à la section, cette section juste ici comment rendre tout le contenu. Et cela est en fait mis dans notre section et dans notre, dans notre section héros et héros. Donc peut-être, en passant, nous allons simplement cliquer sur ces, sur ce menu, sur ces flèches. Et renommons notre section. Appelons ça. Appelons ça une section de héros. On y va. Je vais sauver mon design. Donc ce que je veux faire, c'est que je veux m'assurer que ce titre, que ce texte, et que ce bouton est réglé exactement dans la zone centrale verticalement et horizontalement. Donc, quand j'ai sélectionné ma section héros ici, je vais passer à cette option horizontale d'alignement d'élément. Et je vais cliquer sur le centre. Comme vous pouvez le voir, tous mes éléments sont maintenant centrés horizontalement, mais ils ne sont pas centrés verticalement. Je veux que tous ces types soient exactement au milieu de notre section. Donc, pour ce faire, je vais dans l'onglet Avancé et je vais aller à Layout. En passant, tous ces éléments restent look. On dirait que ça ressemble à des trucs assez effrayants ici. Mais laissez-moi vous dire que fondamentalement ce que nous faisons ici, c'est nous disons à oxygène d'écrire quelques règles CSS pour nous. Et CSS signifie bien sûr feuilles de style en cascade. Fondamentalement, ces styles sont responsables de donner nos titres l'apparence qu'ils sont censés ressembler. Ils sont responsables de l'alignement. Toutes ces choses. Je veux dire, on n'a pas besoin d'écrire de code. Nous pouvons simplement dire à oxygène d'écrire ce code, bien sûr, dans le backend pour nous simplement en cliquant sur certaines, certaines options. Comme vous pouvez le voir, nous avons notre centre d'alignement des éléments. C' est essentiellement ce qu'on a fait. Laisse-moi aller à l'école primaire. C' est ce qu'on a fait ici. Et maintenant, ce que nous voulons faire, encore une fois, c'est que vous voulez mettre tous ces éléments au centre. Donc, pour ce faire, tout ce que nous avons à faire est de simplement cliquer sur cette option de centre de contenu justifier. Et fondamentalement, nous avons fini. Nous mettons notre contenu exactement au milieu. Et si nous allons sauver ce gars et nous commençons à jeter un oeil. Et nous allons jeter un oeil à nos options réactives. Vous pouvez voir que tout, tout le temps, tous ces éléments resteront toujours exactement au milieu. Bien sûr, comme vous pouvez le voir en ce moment, cette taxe est mise en place. Il a été aligné au centre et nous aimerions qu'il soit aligné pendant qu'il est aligné vers la gauche. Mais nous voulions être alignés sur le centre et nous allons bien sûr s'en occuper dans une seconde. Mais aussi vous pouvez voir que notre image de fond, C'est un peu comme été recadrée. Comme si on ne voyait pas ce point focal exactement au centre. Et c'est quelque chose dont nous devons nous occuper aussi. Mais commençons à le faire dans la prochaine vidéo pour l'instant, je veux juste que vous compreniez que si vous voulez vous assurer que vous alignez tout le contenu exactement dans la zone centrale. Tout ce que vous devez faire est d'aller dans l'onglet Avancé, puis de mettre en et vous obtenez toutes les options d'alignement prêtes et vous attendent juste ici. Alors passons maintenant à l'alignement ou au centrage de notre image. 23. 4.2Affirmer l'image d'arrière-plan: Si nous commençons à prévisualiser notre conception f, comme si elle était rendue sur certains appareils plus petits. Vous pourrez voir que notre image d'arrière-plan est xm. C' est un peu comme se faire recadrer. Nous ne sommes pas, nous ne pouvons pas voir notre point focal, dans ce cas notre point central. Eh bien, nous sommes instantanément au centre. Si nous passons à moins de 480, vous pouvez voir que, eh bien, ce genre d'apparence un peu bizarre et vous pensez que cet ordinateur portable a été recadré sur le côté et nous ne sommes pas sûrs de ce que nous regardons. Donc, afin d'éviter que cette situation ne se produise, il y a une petite solution rapide, une petite astuce rapide qui vous permettra de garder votre point focal exactement où vous voulez qu'il soit en termes de visualisation de vos images d'arrière-plan. Maintenant, dans notre cas, nous voulons le point focal nous exactement au milieu. Donc, ce que nous pouvons faire, c'est que nous pouvons aller à quand notre section est sélectionnée. Vous pouvez aller à l'arrière-plan. Et en bas, vous verrez ces options à gauche et en haut. Donc, ces gars vous permettent de déplacer votre image d'arrière-plan par rapport au point gauche et au point supérieur. Maintenant, si nous devions dire, je ne sais pas, faire quelque chose comme 50%. Maintenant, à ce stade, ne se passe pas grand-chose parce que nous affichons un aperçu du grand bureau. Mais si nous avons commencé à descendre, vous pouvez voir que notre image est en train de bouger. Si vous vous souvenez, quand nous étions, quand cela a été réglé sur le 0, voici comment, c'était notre, notre image de fond. Et en ce moment, on l'a déplacé pour décider. Et si vous voulez le garder comme ça, bien sûr, vous le pourriez, mais ce ne serait pas une bonne technique de production équivalente à une bonne pratique de production. Ce qui est préférable de le faire, c'est de garder toujours vos valeurs de gauche et de haut de gamme à 50% et à gauche et 50% au sommet, car cela assurera toujours que votre point focal est exactement au milieu. Bien sûr, si vous voulez, voudrait mettre votre point focal comme dans le coin supérieur droit, vous pouvez jouer avec ces options aussi bien. Mais si nous commençons maintenant à regarder notre conception sur des appareils plus petits, vous pouvez voir que notre point poco, un point focal appelé B1, est toujours, toujours au milieu. C' est donc juste une belle petite technique de production pour vous, vous pouvez utiliser quand vous voulez jouer avec la réactivité de vos images d'arrière-plan et avec le centrage de votre point focal. 24. 4.3A-ajuster le contenu du héros: Donc, une fois que nous aurons trié l'arrière-plan, eh bien, comme dans 99%, nous allons faire un peu mince une fois que nous aurons notre contenu juste ici trié. Donc, bien sûr, ce que je veux faire, c'est changer la couleur de ma rubrique. Donc je vais juste attraper ce gars et choisir cette couleur claire. Et je vais faire la même chose pour ce type. Et je vais laisser le bouton tel quel pour l'instant. Ce que je veux faire, c'est peut-être ajouter un peu plus de texte ici. Allons donc à Lorem, ipsum. Ça va à un peu de Lorem. Prenons du texte Lorem Ipsum. Ça devrait être, je suppose qu'on peut attraper ça. Et je vais juste double-cliquer ici et appuyer sur le contrôle V pour coller ce type ici. Quand on y regarde, eh bien, on a eu quelques problèmes en fait, pas un seul problème. Donc, tout d'abord, notre texte a été, eh bien , c'est beaucoup trop grand, c'est beaucoup trop large. En outre, nous pourrions peut-être jouer avec l'espacement entre tous ces éléments, comme entre les en-têtes dans le texte et le bas. Mais nous aussi, je ne pense pas que nous ayons assez de contraste entre notre texte et notre contexte. Alors peut-être abordons ce dernier problème en ce moment. Donc je suis toujours là sur ma section. J' ai fait sélectionner ma section. Je vais aller à Advanced puis à l'arrière-plan. Et ici, nous avons cette option qui dit la couleur de superposition de l'image. Si on choisit notre couleur, disons que je vais attraper ce type ici. Vous pouvez voir qu'en ce moment nous superposons une couleur sur notre image d'arrière-plan. Et bien sûr, ce n'est pas tout à fait ce que nous voulons. Laisse-moi reprendre la couleur. Ce que je veux faire, c'est que je veux diminuer la transparence jamais aussi légèrement à l'été ici juste pour ajouter quelques contrastes entre l'en-tête MyText et bien sûr le bas, ce fond. Donc, je vais le laisser comme un donc c'est un problème trié. Maintenant, l'autre question est que si nous commençons à réduire dans notre texte, eh bien , notre fenêtre d'affichage, vous pouvez voir que notre régime fiscal s'étend bien sur presque toute la page. Et ce n'est pas exactement ce qu'on voudrait. Donc je vais retourner à mes vieux appareils. Je vais y aller, je vais revenir à ça, et bien, cette vue juste ici. Et ce que j'aimerais faire, c'est que j'aimerais rendre tous ces gars plus petits. J' aimerais, vous savez, nous pourrions peut-être prendre ce texte et aller à Advanced. Et puis à la taille et l'espacement et peut-être jouer avec la largeur. Disons que vous tapez 50 pixels ou 50% et rendre ce gars plus petit. Et nous pourrions faire de même pour le conteneur de notre cap. Mais allons-y, allons-y. Un peu différemment, et apprenons en fait une technique de plus, je pense, très importante ici à l'intérieur de l'oxygène. Mettons tous ces éléments dans un récipient spécifique. Et ce conteneur sera notre div. Donc, un div est fondamentalement juste un peu comme un conteneur générique qui vous permet de mettre d'autres morceaux de contenu à l'intérieur. Et bien, vous savez, il n'a pas d'attributs spécifiques comme cela, mais il vous permet de contrôler la mise en page et la taille de très, très facilement. Et c'est un, c'est un très puissant, un morceau puissant de, eh bien, un CSS ou HTML en fait ici à l'intérieur de l'oxygène. Donc, la façon dont nous pourrions le faire, c'est que nous pourrions simplement aller de l'avant à notre cap. Et encore une fois, utilisez ce petit menu ici et choisissez simplement envelopper avec DIV. Ce qu'il va faire, c'est mettre ce contenu spécifique, dans ce cas le titre. Et il va le mettre à l'intérieur de cette div. Et ce que je veux faire, c'est que je veux juste les déplacer aussi dans notre conteneur. Comme vous pouvez le voir, certaines choses ont changé, mais la taxe ne fonctionne pas correctement. Donc, en ce moment, quand nous avons notre div, nous pourrions aller au centre d'alignement horizontal des éléments, mettre le contenu au centre. Mais je pense que nous devrions aussi aller à notre texte plutôt qu'à topographie avancée et aligner le texte au centre aussi bien. Alors maintenant, quand nous allons à notre conteneur de page, vous pouvez voir que tous ces éléments sont bien alignés au centre et vous pouvez aller à moins de 992. La même situation se produit. Maintenant, à ce point de rupture, vous pouvez voir que notre titre commence à regarder, eh bien, pas le meilleur que nous pourrions peut-être changer certaines choses à ce sujet, mais je pense que nous pourrions peut-être changer la taille de celui-ci, la hauteur de la ligne, mais aussi le alignement. Donc, comme vous pouvez le voir quand vous, quand vous vérifiez votre réactivité en cours de route, si vous n'attendez pas que tout votre design soit terminé, si vous venez d'ajuster la réactivité au fur et à mesure que vous allez, cela va juste vous sauver un beaucoup de temps, faites-moi confiance sur celui-là. Donc je vais aller sur tous les appareils. Encore une fois, prenez cette rubrique, allez à la topographie avancée et alignez-la au centre. Donc maintenant, si nous passons à moins de 992 ou 68, vous pouvez voir que notre cap est bien aligné. Donc, ce que je vais aussi faire est que je vais peut-être augmenter la taille de la police. Voyons 48. Ça devrait être correct. Et peut-être que nous allons taper quelque chose ici. Disons, bienvenue à wow, design. Le lieu de votre prochain projet. Mets-le comme ça. Je vais laisser ce texte factice comme il est juste ici. Et maintenant, quand nous commençons à changer notre réactivité, vous pouvez voir que nous avons une, eh bien, la hauteur de ligne juste ici est, je pense que c'est un peu trop grand. Alors je vais reprendre le cap. Et à partir de la topographie de l'onglet Avancé, nous allons vérifier et la hauteur de la ligne comme un ou peut être 1.1. Et je vais aller à la page conteneur 1120. Je pense que ça devrait paraître bien. Je pense que c'est bon. Mais au début, comme vous vous en souvenez, nous avons mis tous ces types dans une div spécifique et nous l'avons oublié. Mais c'est seulement parce que nous avons commencé à jouer avec ces éléments. Je n'ai pas fait d'action et j'ai oublié ça. Alors comment cela, toute cette div, situation peut nous aider quand nous jetons un oeil à d'autres points de rupture plus petits et plus petits, vous pouvez voir que ce div est Non à mes coups de base un peu trop, c'est un peu trop large si nous allons à nos anciens appareils. Et puis quand le div est sélectionné, quand nous allons à cela, passons à notre onglet primaire. Et nous avons ceci avec option juste ici. Je vais changer les unités de pixels. Allons peut-être aux pourcentages. Et nous allons taper comme 75%. Vous pouvez voir que tous les, tous nos morceaux de contenu ou d'être et contrairement réajustés pour s'adapter à l'intérieur de cette div. Donc, nous n'avons pas à saisir juste titre, puis des tags, puis Barton à, pour les rendre plus petits ou plus grands, nous pouvons juste manipuler l'apparence de notre div, juste ce seul morceau de contenu pour le rendre, rendre plus petit, plus petit, ou plus grand. Et en même temps, tous ces éléments de contenu sont de plus en plus petits ou plus grands. Mais quand on va à la page conteneur 1120, je suppose qu'il semble toujours. D' accord. Mais pourquoi ne pas aller à moins de 992 ? Je suppose qu'on pourrait peut-être changer un peu la largeur. Donc, au lieu de, je pense que c'était 75, faisons comme 80% ou peut-être même 90, 90% devraient paraître mieux. Et puis passons à moins de 768. C' est toujours 90%. Et pour 80, 90% devrait aller bien. Donc, quand on vient de sauver ce gars, et je vais aller à mon mode Incognito à nouveau est que je vais juste appuyer sur contrôle C, contrôle shift plus P sur Firefox, contrôle plus Shift plus n sur Chrome. Et je vais juste entrer cette adresse. Et quand on commence, il suffit d'augmenter ce type. Donc ce que je vais devenir plus petit, plus petit, plus petit. Vous pouvez voir comment cette taxe est bien réajustée à nos points de rupture jusqu'à ce que nous ayons jusqu'à ce que nous allions jusqu'ici. Bien sûr, si vous voulez changer la taille de vos titres en fonction de vos points de rupture, mais je vais vous laisser le soin. Vous savez déjà comment vous pouvez vous y adapter. Il y a donc quelques autres problèmes que nous avons avec ces morceaux de contenu. Et c'est la volonté, le rembourrage ou la marge entre tous nos éléments. Et bien sûr, nous devons nous occuper de notre fond. Alors commençons à le faire ensuite. 25. 4.4Ajoutez la marge au contenu: Donc maintenant que nous avons notre centre div, nous avons notre centre comptable, ce serait une bonne idée d'ajouter un peu d'espacement entre tous ces éléments. Donc ce que je vais faire, c'est que je vais prendre ce texte et que je vais aller à Taille avancée et espacement. Et on pourrait juste ajouter une marge, une marge supérieure et une marge inférieure. Mais nous pourrions aussi saisir notre bordure supérieure de notre texte et juste ajouter un peu d'espacement ici. Et comme vous pouvez le voir, nous avons eu ces valeurs. Will, on va mettre ici. Et faisons peut-être ces égaux comme 20 pixels, 20 pixels. Mais bien sûr, nous ne pouvons pas oublier de vérifier à quoi cela va ressembler sur nos conteneurs de pages plus petites. Donc ça va être notre 1120. Et voyons, 768. Je suppose que ça a toujours l'air bien, mais peut-être faisons-le 480. Je suppose que nous pourrions peut-être ajouter un peu plus de rembourrage ici pour notre bouton donc il est facilement l, sera facilement accessible sur les plus petits appareils. Donc, en quelques clics ici à l'intérieur de l'oxygène, vous pouvez vraiment, vraiment contrôler la réactivité de votre, de votre, de votre, de votre design. Donc, c'est à ça qu'il ressemble quand il est différent du plus grand bureau. Mais quand nous avons commencé à descendre, vous pouvez voir que notre bouton va bouger jusqu'ici. Et il y a aussi une autre façon de contrôler la mise en page du contenu dans, dans un div. Et cela pourrait bien fonctionner dans vos conceptions. Donc je pense que ça vaut la peine de regarder. Donc pour l'instant, je vais juste prendre ce texte et je vais me débarrasser des valeurs de marge. Et je vais me débarrasser de cette marge de 50 pixels ici. Donc ce que je vais faire, c'est que je vais attraper la div. Et ici, vous pouvez voir cette option qui dit l'espace entre ce qu'il fait est qu'il fait que tous ces morceaux de contenu soient également espacés verticalement. Bien sûr, nous ne pouvons pas voir beaucoup se passer en ce moment parce que notre div n'a pas changé sa taille. Mais quand vous allez à l'avancée qu'une taille et l'espacement, et laissez-moi juste changer la hauteur des pixels en pourcentages. Je vais taper 75 %. Vous pouvez maintenant voir que notre groupe, mais tous ces éléments sont comme, un peu comme collé à la partie supérieure de notre div et la partie inférieure d'un div et ce texte reste, reste au centre. Si nous devions faire comme 50% ou même 40%, vous pouvez voir que nous avons obtenu gentiment même doute. Les morceaux de contenu et les espaces entre ces éléments sont, sont les mêmes. Et bien sûr, nous devrions nous assurer que cette, cette conception est cohérente à travers tous nos points d'arrêt. Comme dans ce cas, nous pourrions peut-être faire la div un peu plus grande, peut-être comme 40%. Et nous aurions juste à savoir, continuer, continuer, cette approche à travers tous ces points d'arrêt, 992, ça pourrait aller peut-être comme 45%. On y va. Et puis 768, peut-être 50 %. Ou même un 55 ou même 65. Donc, c'est juste une autre façon de changer les espaces entre les éléments de votre contenu qui sont placés dans l'élément div, l'intérieur d'un élément div. Mais je pense que je vais juste aller avec les marges que j'ai ajoutées à mon texte. Et au lieu de faire maintenant tous les changements, en s'assurant que nous avons obtenu que nous avons supprimé toutes ces options de tous ces points d'arrêt. Je vais juste utiliser le panneau d'histoire ici à l'intérieur de l'oxygène, mais commençons à le faire ensuite. 26. 4.5Utiliser le panneau d'histoire: Donc ici, sur le côté oxygène, nous avons enfin le panneau d'histoire qui est juste ici. Et ici, vous allez voir toutes vos, toutes les étapes que vous avez prises pour arriver à cet endroit précis. Et si vous le souhaitez, vous pouvez simplement cliquer sur ce bouton Annuler et rétablir pour revenir en arrière dans l'histoire ou aller de l'avant. Ou vous pouvez simplement cliquer sur l'un de ces états pour juste, vous savez, retourner à l'endroit où il aimerait vraiment être. Donc je vais juste y retourner. Voyons quelque part ici, ou peut-être même l'été ici. Ça devrait aller. Vous pouvez voir que nous avons obtenu 40 pixels de marge entre cet élément et cet élément. Et bien sûr, si je devais le changer, pour dire comme 2525. Donc, en ce moment, ce changement est reflété ici en bas. C' est donc notre dernière étape. Et bien sûr, on pourrait y retourner, y retourner si tu le voulais. Mais je pense que je vais le garder comme 25 par 25. Le panneau d'histoire est donc relativement nouveau à l'oxygène et nous l'avons heureusement. Mais une fois qu'il est là, je pense que c'est une bonne idée de se familiariser avec ça. Et puis vous pouvez, chaque fois que vous faites des erreurs de conception ou des erreurs de développement, vous pouvez simplement revenir à l'histoire. Vous pouvez revenir dans l'histoire jusqu'à votre état initial. Ce serait quelque chose comme ça, mais je ne veux pas revenir à ça. Je veux aller de l'avant à cette partie ici. Maintenant, nous pouvons commencer à changer notre bouton. Alors faisons ça ensuite. 27. 4.6. Personnalisation de boutons: Prenons soin de notre fond. Donc je vais le sélectionner. Et la première chose que je vais faire est que je vais juste double-cliquer dessus pour éditer le texte. Laissez-moi juste taper en vue de notre portefeuille. Ce sera notre appel à l'action. Et une fois que notre bouton est sélectionné sur la gauche, vous pouvez voir qu'il y a beaucoup de choses que nous pouvons changer. Par exemple, définissons notre URL. Je vais juste cliquer sur Set. Et cela ouvrira notre option de lien d'édition d'insertion. Et ce que je veux faire, c'est que je veux l'utilisateur qui clique sur ce lien. Je veux que l'utilisateur accède à notre page de portefeuille. Donc, je vais choisir portefeuille et je vais juste cliquer sur ajouter un lien. Donc, en ce moment, vous pouvez voir que ce lien est ajouté à nos boutons. Donc, chaque fois que quelqu'un clique dessus, vous savez, cette personne va être redirigée vers cette page spécifique. Nous pourrions donc changer le style du bouton de solide à contour. Si nous le voulions. Bien sûr, on pourrait changer la taille. Laisse-moi peut-être faire ce type mais plus grand pour quelque chose comme 18 ans. Je vais changer le texte. La couleur du bouton peut être à cette couleur plus foncée ou peut-être cette couleur marron plus clair et bouton survolant. On pourrait peut-être grêper le même brun moyen, mais rendons peut-être un peu plus sombre à quelque chose comme ça. Donc, chaque fois que quelqu'un passe au-dessus d'un bouton d'heure, cette personne va voir une sorte de feedback. Alors sauvons ce type. Et je vais prendre mon, prendre cette version Incognito de mon site. Et comme vous pouvez le voir, lorsque nous survolons notre bouton et que la couleur d'arrière-plan change. Bien sûr, nous pourrions également changer la couleur du texte de simple large à notre très, très clair gris. Et nous pourrions changer la taille de police qui pourrait être juste un peu trop grande, mais si vous le voulez, vous pouvez faire une ligne folle. Je vais aller à quelque chose comme si 1818 ne devrait pas être bien. On pourrait aussi jouer avec le poids de la police. Donc, comme vous pouvez le voir, c'est joli, assez simple. Ce que je voudrais faire, cependant, c'est que je voudrais vérifier la réactivité, comment va mon bouton, à quoi ressemblera mon bouton, comment il va se comporter dans les uns et la fenêtre est plus petite. Donc pour l'instant, ça a l'air bien. 99 pour trouver encore 768. Je suppose qu'on pourrait peut-être le rendre un peu plus petit. 14 et la taille du texte à peut-être comme 16. Et puis passons au 418. Et je suppose que ça devrait aller. Donc, dans l'ensemble, comme vous pouvez le voir, processus assez simple. N' oubliez pas d'entrer le lien vers votre bouton. Et vous savez que vous pouvez changer le style en solide ou contour, puis vous pouvez changer les couleurs et la couleur du survol. Toutes ces options sont à l' intérieur, en un simple clic que vous pouvez facilement changer la taille de votre bouton. Peut-être que je vais rendre ce gars juste un peu plus petit à quelque chose comme 16 et la taille du texte à quelque chose comme 17. Et ça devrait aller. Alors on y va. On a créé notre section héros. Mais ce genre de sectionnalisme de héros, eh bien, il l'est. D' accord, mais c'est un peu ennuyeux. Je suppose. On pourrait toujours juste l'annonce, peut-être comme un peu grand, énorme curseur qui s'étendrait à travers notre section héros. Et dans ce curseur, nous pourrions ajouter différents morceaux de contenu. Nous pourrions, par exemple, changer l'image de fond. Parce que si je me souviens bien, nous avons comme le Web Design, l'image de marque et les sous-pages de conception d'impression. Pour que nous puissions les inclure dans notre curseur. Et nous pourrions ajouter quelques informations et différents appels à des actions, différents boutons à, à ces portefeuilles spécifiques ou sont ces pages spécifiques. Mais nous commencerons à le faire ensuite. 28. 4.7Ajoutez le 4.7Add: Avant de commencer à ajouter nos diapositives, je dois ajouter quelques nouvelles images ici à ma médiathèque. J' ai préparé du web design, de impression et des images de Brandon. Je vais juste les ouvrir et attendre qu'ils téléchargent. Maintenant, nous avons ces images. Bien sûr, nous pourrions utiliser notre ancienne image de héros aussi. Donc je vais aller sur mes pages et je vais l'ajouter à la page d'accueil avec de l'oxygène. Encore une fois. Nous n'allons plus utiliser cette section avec ces éléments de contenu. Je suppose qu'on pourrait les sauver. Peut-être que je vais juste prendre cette div et je vais la mettre de côté ici. Je vais juste le mettre dans cette section, donc c'est juste là. Ça va nous attendre une fois que nous commencerons à ajouter nos diapositives. Donc c'est juste un, Je suppose une bonne technique de production, un fossé, tout. Sauvons quelques choses. Cependant, ce que je veux faire est dans la section Maintenant mon héros, je veux me débarrasser de cette image de fond. Donc ce que je vais faire, c'est aller à l'arrière-plan de la section. Je vais me débarrasser de cette superposition d'image, et je vais me débarrasser de cette image de fond. Donc maintenant, ce que nous devons faire est que nous devons réellement ajouter le curseur. Donc, je vais juste appuyer sur Ajouter et je vais commencer à taper curseur. On y va. Et je vais juste cliquer dessus. Comme vous pouvez le voir en ce moment, nous n'avons pas vraiment beaucoup de choses ici. Dans cette douleur de structure. Lorsque nous ouvrons le calque de curseur, nous avons seulement trois diapositives que nous pouvons réellement, vous pouvez effectivement cliquer dessus et comme vous pouvez le voir, il y a une animation en cours. On a de jolis petits points ici, des points de navigation. Et ce que je vais faire maintenant, c'est que je pense que je vais juste me débarrasser de deux diapositives et je vais juste travailler avec une seule parce qu'après ça, nous pouvons juste dupliquer notre premier vol parce que nous allions fondamentalement avoir le même, même genre de contenu dans notre, dans notre diapositive. Donc juste pour voir ce qui se passe ici, je vais juste ajouter une image d'arrière-plan à ma diapositive. Donc je vais aller à l'arrière-plan avancé, image de fond. Et je vais attraper, peut-être commençons par notre image web design. Donc c'est ce type ici, et je vais juste le sélectionner. Alors maintenant, nous avons notre image, ajouter à notre curseur. Mais il y a quelques choses que nous devons faire. Alors peut-être avant de commencer à jouer avec notre curseur, avec les paramètres de notre curseur. Prenons soin de la diapositive très rapidement. Ainsi, comme avec notre image de fond de section, nous pouvons définir les points gauche et supérieurs à un 50%, assurez-vous simplement que notre point focal est exactement au centre. Alors on peut prendre notre div. C' est, rappelez-vous que c'était cette div et je vais juste mettre ici dans ma première diapositive. Donc, il se trouve bien dans mon, dans mon curseur. C' est notre première diapositive, ce type avec notre div. Donc, si nous devions maintenant juste prendre notre première diapositive, peut-être, laissez-moi juste le renommer. Appelons ça, pensons que c'est, appelons ça un web designer. On y va. Et puis si nous cliquons simplement sur ce menu, bouton Menu contextuel et cliquez simplement sur duplicate, nous avons une autre diapositive appelée web design bien sûr, mais passons à, peut-être changons-le en branding. On y va. Et puis dupliquons cette diapositive. Mais ce type, nous allons le renommer, et appelons ça le design d'impression. On y va. Bien sûr, toutes ces diapositives ont les mêmes images d'arrière-plan. Donc je vais aller au branding. Et je vais changer l'image de fond à mon avis était Yay était branding. Donc, le branding, je pense que c'était ce gars. Je vais sélectionner l'image. Ensuite, je vais aller à ma conception d'impression avancée de fond de navigation. Et je pense que ce sera ce type. Et on y va. Nous avons des diapositives différentes pour différents milieux pour nos diapositives. Bien sûr, si nous le voulons, nous pouvons toujours aller de l'avant et choisir une couleur de superposition d'image si nous le voulions. Pour nos diapositives, faisons peut-être quelque chose comme 40% de transparence. On pourrait faire la même chose pour ce type. Bien sûr, si nous le faisions dès le début, dès le début, ce serait beaucoup plus facile. Nous aurions tous ces types déjà mis en place comme ils le devraient. Alors 40, faisons-le comme ça. Et la même chose pour la conception d'impression, arrière-plan, l'image superposer cette couleur. Et à 40 ans, je vais frapper sauver. Donc maintenant, nous avons mis en place nos diapositives pour qu'elles fonctionnent correctement. Si on va à notre page principale et que je vais juste rafraîchir ça. Notre curseur est, eh bien, ça marche techniquement. Ça n'a pas l'air bien. Ça n'a pas l'air joli, mais ça va ressembler à ça. Ça va avoir l'air bien dans quelques secondes. C' est juste le poids que vous ajoutez, un curseur ici à l'intérieur de l'oxygène, et c'est ainsi que vous pouvez ajouter des diapositives. Et n'oubliez pas qu'à l'intérieur des diapositives, vous pouvez avoir tout ce que vous voulez. Il s'agit juste d'ajouter un élément de contenu spécifique, un module spécifique à l'intérieur de l' une des diapositives, juste ici, à l'intérieur du module de curseur sur le côté, la couche de curseur. Alors commençons réellement pris soin du curseur lui-même dans la vidéo suivante. 29. 4.8Faites le diapositive pleine largeur et hauteur: Donc, lorsque nous cliquons sur notre couche de curseur sur notre module de curseur, vous pouvez voir que nous avons principalement quelques options de style et de configuration juste ici dans ces deux onglets. Donc, pour le style, nous pouvons choisir entre l'animation horizontale ou fondu. Donc, ce sera notre changement si nous choisissons d'aller avec l'animation de fondu. Mais je pense que je vais aller avec l'animation horizontale. Nous pouvons choisir d'augmenter ou de diminuer la vitesse de notre animation de diapositives qui est présentée en millisecondes. D' habitude, je pense que c'est plus rapide. Cette transition, la pâte. Et puis nous pouvons choisir la couleur de nos points. Ces gars ici, je vais changer cette couleur pour notre couleur gris clair. Et peut-être que je vais diminuer un peu la transparence, quelque chose comme 3%. Et nous pourrions enlever le rembourrage autour de nos diapositives. On pourrait faire en sorte que les points superposent notre curseur. Et si vous le souhaitez, si vous aviez des tailles différentes de toutes vos diapositives, vous pouvez les étirer à la même hauteur. Ce sont donc les choses de base qui contrôleront notre curseur. Si nous allons à la configuration, nous pouvons choisir l'option show flèches ou non. Nous pouvons choisir de montrer des points ou non. Et nous pouvons choisir la fonction de lecture automatique, ce qui rendra le curseur auto-play. Et vous pouvez choisir le délai ici, ce qui signifie essentiellement combien de temps une diapositive va être affichée. Et nous pouvons choisir de définir l'option infinie qui va juste boucler notre curseur. Je vais juste désactiver la lecture automatique pour l'instant juste pour que nos chapeaux ne fassent pas mal. On a fait un ménage de base. Si nous venons de rafraîchir ce gars, nous avons nos points juste ici. Eh bien, nos flèches ici et nos points en bas. Mais toujours le curseur n'est pas, n' est pas présenté comme pleine largeur comme notre section précédente ou image d'arrière-plan. Donc, afin de corriger cela, nous devons jouer avec quelques options de curseur qui sont disponibles juste ici. Mais ils sont disponibles ici à l'intérieur de la taille et de l'espacement. Donc, tout d'abord, ce que je vais faire, c'est que je vais faire le curseur, les curseurs hauteur 100 VH pour le rendre comme travée sur tout mon site entier. Donc, il prend soin de certaines choses, mais pas de toutes les choses. Notre curseur est accroché, volonté est toujours bien, il n'est pas encore pleine hauteur et une pleine largeur parce que notre section a des options de marge et d'espacement par défaut qui lui sont assignées. Si nous allons à l'onglet Avancé, la taille et l'espacement, nous pouvons voir que nous avons 75 pixels de rembourrage, en bas et 20 pixels à droite et à gauche. Si je tape juste 0 ici, puis cliquez sur Appliquer tout, vous pouvez voir que tout ce rembourrage a disparu. On peut sauver ce type et ensuite aller à notre mode Incognito et rafraîchir la page. Et vous pouvez voir que notre curseur est présenté en pleine largeur, en pleine gloire et en pleine hauteur. Bien sûr, ça marche bien. On peut bouger ces gars comme ça. Qui que ce soit, quand nous regardons de plus près nos images de fond, nous pouvons voir qu'elles sont un peu comme être répétées en arrière-plan. Et c'est certainement ce que nous voulons. Et nous pouvons facilement réparer ça. Si nous allons à notre première diapositive, alors avancé que l'arrière-plan. Ici, vous pouvez voir cette option de taille d'arrière-plan. Et si nous choisissons de couvrir l'option, cela va couvrir tout notre terrain ou tout un terrain. Faisons la même chose pour notre image de marque. Si avancé par le sol, la couverture, conception d'impression, l'arrière-plan avancé, puis la couverture. Si nous sauvegardons simplement notre curseur et actualisons notre page, vous pouvez voir que nous n'avons pas d'arrière-plans répétitifs. Et bien sûr, il ne reste plus qu'à vérifier cette réactivité. Laisse-moi juste rendre ce gars un peu plus grand. Ça a l'air bien. Comme vous pouvez le voir, notre arrière-plan est réajusté jusqu'à notre plus petit petit appareil. Alors, voilà. C' est ainsi que vous pouvez définir notre curseur. Et bien sûr, ce que nous aurions à faire, c'est que vous deviez aller à l'image de marque. Nous pourrions peut-être modifier ce texte pour voir nos projets de marque. On y va. On pourrait peut-être me laisser enlever une partie du texte pour le faire ressembler à ça. De même pour le design imprimé de la marque, nous pourrions taper et voir nos motifs imprimés. Et encore une fois, peut-être juste se débarrasser d'un texte comme ça. Bien sûr, nous pourrions changer le texte de notre portfolio. Peut-être que nous pourrions taper quelque chose comme peut-être voir des projets. On y va. Même chose pour ce projet de vue de fond. Les projets, on y va. Et pour notre dernier bouton ici, tu pourrais faire la même chose. Voir les projets qui sont égo. Bien sûr, c'est à vous de décider. Je veux juste vous montrer que vous pouvez mettre tout ce que vous voulez et le changer ajusté. Bref, tu aimes. Et ici à l'intérieur du concepteur lorsque vous créez un, créer votre, votre curseur. Donc, si nous revenons à notre mode Incognito, rafraîchissez ce type. Vous pouvez voir que notre bouton a changé et nous avons obtenu nos projets de branding VR, nos designs d'impression. Vous savez, tout est rendu instantanément dans notre navigateur. Donc je suppose qu'on a préparé notre section de héros. Nous pouvons maintenant passer à remplir dans toutes ces sections ou avec certaines, avec un contenu intéressant et intéressant, nous allons apprendre en une seconde comment utiliser des cours ici à l'intérieur d'un oxygène. Mais d'abord, nous allons ajouter quelques icônes et quelques textes juste pour montrer comme nos services aux utilisateurs. 30. 5.1, ajoutez d'abord les colonnes: Maintenant, nous pouvons commencer à créer notre section services et nous avons déjà notre héros. Maintenant, nous pouvons commencer une section qui va être placée sous notre section héros. Et nous avons déjà une section juste ici. Et je pense que je vais le laisser, mais je vais me débarrasser d'un de ces morceaux de texte. Je vais laisser celui-là et peut-être, créons tout à partir de zéro. Je vais donc ajouter une nouvelle section. On y va. Je vais le mettre ici sous la section des héros. Et peut-être que nous allons renommer et appelons ça les services. On y va. Je vais tout sauver. Donc, ce que nous voulons faire ici, c'est que nous aimerions ajouter une sorte de titre et peut-être du texte ici. Et puis nous aimerions avoir, vous savez, comme ces petits morceaux de puits, comme de petites icônes et quelques en-têtes sous ces icônes, des morceaux de texte. Tout comme vous le voyez sur beaucoup, beaucoup de designs parce que nous aimerions, vous savez, énumérer les services que nous fournissons. Donc ce que je vais faire en premier, c'est peut-être que je vais juste emprunter certains de ces gars ici. Donc, je vais attraper ce diff qui a ce titre, tags et bouton. Donc je vais juste attraper celui-là. Je vais le dupliquer. Et puis je vais juste le déplacer dans ma section de services ici. C' est ce type juste là. Et bien sûr, nous devons changer certaines choses à ce sujet. Donc, tout d'abord, je vais prendre le titre et je vais changer la couleur, même pour le texte. Donc, je vais juste supprimer ces couleurs par défaut et nous n'avons pas besoin d'un bouton. Alors je vais me débarrasser de ça, m'en débarrasser. Et je vais supprimer cette valeur de largeur ici. Et peut-être qu'on pourrait changer le texte ici. Tapons dans Discover. Notre enquête dit : « On y va. C' est donc notre rubrique, ce sont nos textes. Je vais laisser ce texte pour l'instant. Donc, ce que nous devons faire maintenant, c'est que nous devons ajouter les icônes que nous avons mentionnées. Et ce sera une excellente occasion pour nous d'en apprendre davantage sur les cours. Mais avant de passer à cela, passons juste sous cette div, ajoutons des colonnes. Il nous faut trois colonnes. Donc, je vais aller de l'avant et cliquez sur Ajouter des colonnes de type n. On y va. Et une fois que vous cliquez sur les colonnes, vous pouvez voir que vous avez comme prédéfini une colonne morceaux ici. Et nous avons besoin de trois colonnes et du côté B. Donc, nous allons choisir 33 par 33 par 33. Donc je vais juste cliquer dessus. Et on y va. Vous pouvez voir que nous avons trois pièces ici. Et fondamentalement, ils sont juste trois divs sont un pour en fait, nous pourrions vouloir changer les noms afin que nous puissions changer comme dans quelque chose comme la colonne un. On y va. Ensuite, on va appeler cette colonne de type à leur ego. Et ce gars sera notre troisième colonne, juste pour que vous puissiez tout voir, vous pouvez comprendre, tout. Vous n'avez pas à le faire si vous savez ce que vous faites ici, mais vous pouvez certainement le faire. Donc on a notre cap, on a des textos en dessous, on a nos colonnes. Et maintenant, nous allons mettre nos icônes et notre texte à l'intérieur de ces comptes. Mais avant de passer à ça, peut-être ajoutons un peu, peut-être comme une marge ici. Donc je vais prendre mes colonnes. Et je vais peut-être les mettre un peu en bas, peut-être quelque part ici. Ça devrait être correct. Maintenant, nous allons commencer à ajouter notre contenu dans nos colonnes et en apprendre davantage sur les cours. Alors commençons à le faire dans la prochaine vidéo. 31. 5.2Créer la première icône: Donc, ce que nous aimerions ajouter ici serait une, une icône, puis un petit titre chanceux et certains, et un peu de texte. Donc nous pouvons le faire ici à l'intérieur de l'oxygène de deux façons différentes. Donc, d'abord, nous allons apprendre la première façon, puis nous allons apprendre la deuxième façon juste vous compreniez ce qui se passe réellement ici. Donc, d'abord, nous allons juste ajouter une icône plutôt qu'un titre, puis du texte. Et puis nous allons utiliser un des modules prédéfinis ici à l'intérieur de l'oxygène appelé la boîte d'icônes. Donc ce que je veux faire, c'est que je veux ajouter une icône. Donc je vais aller de l'avant et choisir et, et commencer à taper l'icône. On y va. Ensuite, je vais ajouter un titre. On y va. Et puis je vais ajouter du texte. On y va. Donc, bien sûr, allons changer ce texte pour peut-être changer d'abord l' effet afin que nous sachions à quoi le changement du texte. Donc je vais juste attraper cette icône. Et comme vous pouvez le voir sur la gauche, ici, nous avons quelques paramètres différents pour notre icône. Ainsi, vous pouvez choisir le contour, style Solide ou le style bien connu. Alors on peut changer la couleur. Peut-être que nous allons changer Tower amoeba, changeons-le à cette couleur, bien que sont une couleur par défaut, l' une des couleurs par défaut. Et bien sûr, nous pouvons changer l'espace ou la taille de l'icône. Donc peut-être que nous allons faire comme 442 devrait aller bien. Et puis nous avons deux sets à choisir. Donc police impressionnant et linéaire, icônes linéaires. Donc, je vais aller avec Font Awesome pour cet exemple. Et comme vous pouvez le voir par défaut, il est livré avec cette icône pouce vers le haut pré, pré-tapé ici. Mais si nous supprimons simplement le texte, vous pouvez voir que nous avons toutes nos icônes ici. Donc, disons que nous fournissons quelque chose comme des services de conception web. Alors voyons si nous avons quelque chose ici qui serait comme le web design ou peut-être le design. Allons peut-être avec ce type, ce bureau juste ici. En fait, rendons peut-être ça un peu plus grand. On y va. Alors saisissons notre titre et tapons un Web Design, le Rio. Peut-être que vous pourriez changer la balise pour aimer Heading 3 et peut-être augmenter la taille de la police un peu à quelque chose comme, voyons, 26 ou peut-être 32. Ça devrait être correct. Et nous allons peut-être emprunter du texte de bas, d'ici. L' exigence va le copier, puis le coller à nouveau. On y va. Donc, comme vous pouvez le voir, nous avons eu notre icône, nous avons eu notre texte va en tête, et nous avons eu notre, bien simple morceau de texte. Mais bien sûr, ce que nous voulons faire, c'est nous assurer que tous ces gars sont alignés sur le centre. Donc, avec ma colonne une fois où mon premier DEF a été sélectionné, je vais choisir parmi cet alignement horizontal d'élément. Je vais choisir Center. Et juste comme ça, nous avons centré notre, notre icône tandis que notre boîte d'icônes, pour ainsi dire. Bien sûr, nous pourrions peut-être commencer à changer les couleurs, certains textes, toutes ces choses. Nous pourrions peut-être ajouter un peu de rembourrage ou de marge entre tous ces éléments. Mais encore, nous avons encore besoin d'ajouter du texte tandis que cette boîte d'icône à notre centre et la colonne de droite. Donc, une fois que nous avons fait cela, nous ne voulons pas vraiment savoir le changement comme chaque aspect séparément. Nous aimerions juste, vous savez, être en mesure de changer toutes ces choses, toutes ces choses en même temps. Parce que fondamentalement et tous ces éléments seront bien même exactement le même, mais certainement très, très, très, très similaire. Donc, avant que nous aimions cloner tous ces éléments et les ajouter à nos colonnes restantes, nous pourrions ajouter des classes à nos éléments. Mais commençons à le faire et à expliquer les cours dans la vidéo suivante. 32. 5.3Classes et d'ID: Lorsque vous sélectionnez un élément en oxygène, vous verrez ici dans le coin supérieur gauche qu'un ID par défaut lui est ajouté. Et l'ID est comme, comme un, comme un, comme un nom, très, très spécifique, très original et unique à un article. Mais vous pouvez aussi ajouter des classes à vos articles. Alors faisons ça. Donc, je vais juste cliquer ici. Et je vais ajouter un cours. Je vais l'appeler peut-être comme Services, icône. Et je vais cliquer sur ajouter une classe. Maintenant, nous avons ajouté une classe à notre article et un ID ajouté à notre article. Alors, quelle est la différence ? Eh bien, fondamentalement à la fois la classe et un ID vous permettent de style élément h1. Toutefois, un ID est unique à chaque élément. Vous ne pouvez avoir que les mêmes ID sur votre, sur votre page. Et vous pouvez ajouter la même classe plusieurs fois à différents éléments. C' est donc une bonne idée d'avoir à utiliser des classes lorsque vous voulez styliser plusieurs éléments de la même manière. Et dans notre cas, puisque nous allons ajouter sur les mêmes éléments à différentes colonnes, c'est une bonne idée d'ajouter des classes à votre, à ces pièces, à cette icône, l'en-tête et au texte. Donc, si vous voulez changer certains aspects de nos éléments, nous pouvons le faire simplement en changeant la classe. Et tous ces changements seront visibles, seront reflétés dans toutes les instances de cet élément qui a la même classe qui lui est appliquée. Donc ce que je vais faire, c'est que je vais prendre la direction de ce web design. Et je vais ajouter un autre cours et ce sera la direction des services. Et puis je vais attraper celui-là. Et je vais entrer dans Services, puis envoyer un SMS, et je vais ajouter la classe. Donc maintenant, puisque, eh bien, une fois ces classes sont ajoutées, nous pouvons maintenant simplement cloner tous ces éléments. Donc je vais attraper l'icône, je vais la dupliquer. Et maintenant, je peux le déplacer dans ma deuxième colonne. On y va. Vous pouvez voir qu'il a été ajouté à cette colonne et qu'il a toujours la même classe, même pour l'en-tête. Tellement dupliqué. Prenez le cap, je vais le déplacer ici. Faites de même pour ce texte. Et je vais le déplacer ici. Et puis je vais faire la même chose pour la colonne de droite. Encore une fois, dupliquer. Ensuite, je vais à la colonne 3. Donc vous avez l'icône, nous avons le titre, et je vais le déplacer et le texte dupliquer et le déplacer ici. Bien sûr, nous devons encore saisir notre div et aligner tout au centre. On y va. Mais maintenant, lorsque nous cliquons sur l'un de ces éléments, vous pouvez voir que nous avons obtenu la même classe appliquée à deux de nos éléments. Donc maintenant, vous pouvez changer l'icône. Donc, nous avons la conception Web peut être maintenant nous allons faire quelque chose comme la conception de logo. Voyons si on a eu un peu de gentil ou peut-être appelons-ça la marque. Donc je vais juste attraper ce gars juste ici. Et nous allons taper et branding. Et puis attrapons celui-là. Et peut-être disons que nous offrons des services de référencement. Voyons voir si on a un peu de SEO en bas. Tu sais, je peux, je veux dire, peut-être que nous allons faire comme l'édition d'images ou quelque chose comme ça. Saisissons celui-ci n'est pas vraiment de trouver la bonne icône, mais d'apprendre et comment ajouter des classes à notre texte. Ok, donc on a ajouté tous nos éléments ici. Donc maintenant, nous pouvons réellement commencer à jouer avec nos classes et ensuite voir la différence entre une balise d'identification et une classe. Alors commençons à le faire dans la prochaine vidéo. 33. 5.4Édition et id's: Ok, on a ajouté les cours à tous nos éléments. Alors maintenant, nous allons comprendre la différence entre la classe et une balise. Comme vous pouvez le voir, nous sommes maintenant ajoutés dans notre classe et nous avons fondamentalement les mêmes options que nous avions auparavant. Donc, une fois que nous commençons à changer cela, vous pouvez voir qu'en fait rien ne se passe. Nous changeons la taille de l'icône, mais la taille reste la même. Alors pourquoi ça se passe ? Si nous allons à notre ID, vous pouvez voir que nous obtenons des valeurs appliquées à notre, à notre icône. Et c'est fondamentalement, puisque nous avons cloné tous ces éléments, cette valeur est la même ici et ici. Et nous ne pouvons voir aucun changement parce que les identifiants ont toujours priorité sur nos classes parce que les identifiants sont plus spécifiques, comme nous l'avons mentionné précédemment. Ils auront donc toujours la priorité sur les sélecteurs moins spécifiques, donc plus généraux. Et dans ce cas, les classes sont plus générales que les identifiants, qui que ce soit, si nous changeons juste la taille de l'icône, si vous supprimez la même chose pour ce gars et la même chose pour ce gars, ok. Il n'y a rien ici. Laisse-moi enlever cette couleur. Et supprimons tous ces éléments. La même chose ici. Je vais aller à la carte d'identité, enlever la couleur et la taille. Donc maintenant, si nous nous assurons toujours que nous devons sélectionner cette classe d'abord. Et maintenant, si nous commençons à ajouter les couleurs, il était donc cette couleur, je crois que vous pouvez voir que tous ces, nos icônes sont en train de changer et nous pouvons changer la taille si nous le voulons, je crois était 48 avant. Mais bien sûr, nous pourrions changer la couleur si nous le voulions. Je ne sais pas. Peut-être que ça pourrait aller avec cette couleur si tu veux. C' est essentiellement à vous de décider. Et nous pouvons faire la même chose pour notre design web, eh bien, pour nos rubriques. Il a donc choisi la direction des services. Bien sûr, nous savons tous, nous devons nous rappeler que nous avons des valeurs appliquées ici. Donc, je vais supprimer tous ces attributs de taille de police. On va aller aux identifiants, puis sélectionner la classe. Et je crois que c'était 32. On y va. Et on peut faire un peu d'espacement. Alors ajoutons une marge supérieure et inférieure. Et comme dix pixels et dix pixels en bas. On y va. Et si vous le souhaitez, vous pouvez changer quelque chose sur le texte. Donc, d'abord, je vais m'assurer que je n'ai rien appliqué à MyText. Ça semble propre ici. Donc nous pouvons juste prendre notre cours, aller à la topographie, aligner tout au centre. Peut-être changé la couleur à l'une de nos couleurs par défaut. Et si vous le souhaitez, nous pouvons changer notre, la, la taille de la police. Nous pourrions, même ici si nous le voulions, nous pourrions choisir l'un des paramètres de police Google, l' un des Google sur les fonds Google, et nous pouvons le choisir ici. Mais j'espère que vous aurez l'idée de ce que les cours font réellement en ce moment. Ils nous aident à changer les éléments qui sont similaires ou censés être similaires. Fondamentalement en une seule fois, nous n'avons pas besoin, comme avec les identifiants, de changer chaque instance de notre contenu. Mais nous pouvons simplement changer certains aspects d'une classe particulière. Et oui, et, et ce changement est appliqué à toutes, toutes les instances, toutes les instances qui ont cette classe spécifique, une classe qui lui est appliquée. Donc, c'est ainsi que vous pouvez construire ces boîtes d'icônes avec des classes. Mais dans l'oxygène, vous pouvez également créer ces boîtes d'icônes en utilisant des modules de boîte d'icônes. Alors commençons à le faire ensuite. 34. 5.5Le module de boîte d'icônes: Alors maintenant ajoutons quelques services ici en bas. Donc ce que je vais faire, c'est que je vais attraper cette colonne va fondamentalement div, et je vais le dupliquer. Et peut-être allons-y. Peut-être que nous allons changer le nom de ces gars. Peut-être qu'on va changer ce type. Faisons une colonne pour ce type, et appelons ce type colonne 5. Et appelons cette colonne en cours, colonne 6. Juste pour que nous sachions que c'est plus facile pour nous de comprendre ce qui se passe. Donc ce que je vais faire, c'est que je vais enlever tous ces éléments. On n'en a pas besoin. Déplacez, retirez et retirez. Ensuite, la même chose pour la colonne, colonne cinq, retirez-les. Et puis dans la colonne 6, retirez-les. Donc il a juste des colonnes vides et vides juste ici. Donc ce que je vais faire, c'est ajouter le module de la boîte d'icônes à notre colonne 4. Donc, je vais cliquer sur Ajouter et commencer à taper. Je viens et on a cette boîte à icônes juste ici. Et comme vous pouvez le voir, nous savons un clic. Nous avons ajouté tous ces éléments à notre, à notre colonne. Si on l'ouvre, tu peux voir qu'on a l'icône juste ici. Nous avons aussi cette rubrique et nous avons du texte. Et si nous sélectionnons simplement notre boîte d'icônes, vous pouvez voir que nous avons certains, certains éléments que nous pouvons, que nous pouvons changer par rapport à tous ces éléments, tous ces éléments. Donc ce que je vais faire c'est d'abord que je vais ajouter une classe à tout mon, tout mon, eh bien, tout cet élément de boîte d'icônes. Donc ce que je vais faire, c'est que je vais l'appeler « Icône ». Peut-être que je viens colonne comme ça. C' est une bonne idée d'utiliser une convention de dénomination qui a du sens pour vous. Pas forcément de sens pour moi, mais cela a du sens pour moi. Alors on y va. Je peux me calmer. Donc maintenant, nous pouvons juste jouer avec tous ces éléments. Donc ce que je vais faire, c'est aller à la mise en page et à l'espacement. Je vais aligner, aligner tout au centre. Nous pouvons choisir où cette icône doit être positionnée. Donc en haut, à gauche, à droite et en bas. Mais j'aimerais recréer ça. Regarde. Certains vont aller en haut, qui est la valeur par défaut. Et laissons cet espace avant tel quel. Et peut-être que je peux l'espace au-dessus, je crois que c'était dix pixels. Donc, nous allons faire dix pixels ayant un espace en dessous et, et n'avaient pas d'espace en dessous et en en-tête, espace texte au-dessus. Je crois qu'on l'a laissée. Je ne pense pas qu'on ait fait quoi que ce soit à l'espacement de notre textile. Laissons-le tel quel. Alors passons peut-être à la typographie et à la typographie, à la, à notre rubrique. Je crois que c'était 32. Laisse-moi voir vite. Prenons le cours oui, 32. Donc je vais attraper ce gars et on va le changer pour obtenir une image de marque. Alice do SEO. Pourquoi pas ? Fusée ? Peut-être que nous allons changer cette police en police. Génial, juste pour que tout soit cohérent tout au long de notre récite. Et voyons si on a quelque chose. Peut-être allons-y et attrapons ce type. On y va. Je crois que ce texte était, je pense qu'il était de 14 pixels. Oui, c'était 14 pixels. Alors attrapons notre boîte à icônes. Topographie, texte, taille de police 14 et couleur. Ce gars juste là. On y va. Et bien sûr, nous devons changer la couleur de notre icône. Laissez-moi emprunter cette couleur. Je suppose que nous pourrions peut-être ajouter cette couleur à notre couleur par défaut. Donc, ce que nous pouvons faire, nous pouvons simplement cliquer sur cette enregistrer comme icône de couleur globale. Je vais cliquer dessus. Appelons ça. Appelons ça le bleu pâle, faute d'un meilleur terme. Et puis on peut juste saisir ou Icône et choisir ce type ici. Et on y va. Nous avons notre, notre fondamentalement je peux boîte créé. Donc maintenant ce qu'on peut faire, c'est qu'on peut juste prendre cette icône. Laisse-moi fermer ce type. Nous pouvons le dupliquer et le déplacer dans notre colonne 5. Puis dupliquez-le une fois de plus. Et on peut déplacer ce type sur notre colonne 6. Maintenant, ce que nous avons à faire, c'est qu'il suffit de changer les icônes et le texte. Mais nous aussi, je pense que nous devons changer la taille de cette icône. Il est défini sur la valeur par défaut, cette valeur par défaut 55. Mais si nous saisissons simplement, si nous saisissons simplement notre boîte d'icônes, vous pouvez voir que malheureusement, il n'y a pas de valeur par défaut pour notre icône. Nous ne pouvons pas le contrôler à partir de, à partir de, à partir de ce niveau. Vous devrez saisir l'icône elle-même, puis changer la taille. Mais je suppose qu'on pourrait peut-être essayer d'ajouter notre classe à ce type. Donc je pense que c'était Services. Je suis présent, c'est ce type ici et la taille va changer. Donc encore une fois, icône Service, ce gars ici, icône Services et l'icône est ajoutée. Alors changeons rapidement nos icônes. Laisse-moi prendre rapidement n'importe quelle icône, peut-être comme ça. Et donc nous avons obtenu web design Imager Brandon en référencement. Qu' est-ce que ça pourrait être ? Alice vient d'appeler cette recherche sur le Web. On y va. Et puis attrapons ce gars et changeons une icône ici. Bien sûr, si vous le vouliez, vous lors de la construction, surtout dans ce cas, vous n'avez pas besoin de choisir une icône de, à partir de l'oxygène. Vous pouvez simplement télécharger votre propre image, votre propre icône et l'utiliser également. Mais dans ce cas, dans ce scénario de zone d'icône, vous devez utiliser l'icône, ceci, cette icône. Bien sûr, vous pouvez ajouter une image aussi ici, mais ce module de boîte d'icônes est livré avec une icône comme pré-installée. Laissez, mettons-le comme ça. Donc encore une fois, je vais attraper cette icône et je vais changer, changer pour peut-être comme ce livre et nous allons juste taper en impression. Impression, design. On y va. Et en gros, nous avons préparé nos services. Et bien sûr, disons qu'elle aimerait peut-être changer seulement les couleurs de ceux-ci, de ces éléments. Mais tu ne veux pas changer de classe. Vous aurez juste à saisir une icône, assurez-vous que vous êtes sur l'ID, pas la classe parce que, si vous deviez changer la couleur de cette icône, vous affecteriez toutes ces icônes. Laissez-moi revenir à ma couleur précédente. On y va. Donc, si on clique maintenant sur ce gars, et puis choisissons cette icône fantaisie, cette ID. Et je vais prendre peut-être cette couleur. Vous pouvez voir que nous changeons juste la couleur. Nous changeons la couleur de cette instance particulière, pas tous ces éléments qui ont des classes leur sont appliquées. Donc, l'ID est toujours plus spécifique. Donc, si vous voulez juste savoir préservé la classe, mais pour en changer un peu, vous avez juste besoin de cibler cet ID, pas la classe elle-même. Donc je ne veux pas faire ça. Je vais juste me débarrasser de ça. Et on y va. Nous avons obtenu notre section de services sont créés. Mais bien sûr, nous devons encore nous occuper de la réactivité. Voyons donc à quoi cela ressemblera sur les appareils plus petits dans la vidéo suivante. 35. 5.6, Rendez les services responsive: Donc nous avons créé notre section. Maintenant, il est temps de le rendre réactif. Donc je vais le faire, je vais aller voir ce gars ici, et je vais choisir le conteneur Page 1120 et ci-dessous. Ça a l'air bien, mais on pourrait peut-être changer comme la largeur de ce texte ici. Donc ce que je vais faire, c'est que je vais aller à la taille et à l'espacement avancés. Et nous allons peut-être faire comme 75%. Je suppose que ça aura l'air mieux. Peut-être allons-y et ajouterons de l'espace et juste ici. Voyons donc à quoi cela ressemblera sur tous les appareils. On dirait ça. Puis sur 1120 et souffler ça ressemble à ça. Maintenant, passons à moins de 992. Ça a l'air bien, mais nous pourrions vouloir peut-être rendre cette div un peu plus large. Donc je vais aller à la taille avancée et l'espacement et passer à 100%. Donc, quand nous allons à tous les appareils, il ressemble à ce conteneur de page. Alors que 1120, ça ressemble à ceci, moins de 992, ça ressemble à ceci. Et maintenant ces gars, je pense qu'on doit changer ces éléments. Donc, si on va à 1120, ça a toujours l'air bien. 99 T2. Maintenant, à ce point d'arrêt, nous pouvons voir que ces, ces morceaux de textes ne sont peut-être pas un peu trop larges. Donc ce que nous pourrions faire, c'est que nous pourrions, par exemple, rendre plus petits si vous voulez garder ces gars orientés verticalement comme ça. Mais nous pourrions aussi forcer cette disposition horizontale précédente. Donc, lorsque nous sélectionnons nos colonnes, vous pouvez voir que nous avons obtenu cette option de colonnes de pile verticalement sélectionnée ici. Et par défaut, vous pouvez voir qu'il dit moins de 992. Donc, à ce stade, nos colonnes commencent à s'empiler verticalement. Mais si nous sélectionnons, si vous voulez à ce point d'arrêt, si nous voulons que nos icônes soient mises l'une à côté de l'autre à ce point d'arrêt, nous pouvons aller moins de 768. Et comme vous pouvez le voir, nos colonnes commencent à ressembler à ceci. Ils sont mis l'un à côté de l'autre. Bien sûr, nous pouvons aussi voir que nous avons eu quelques problèmes ici, comme ce morceau de texte n'a pas été correctement mis en page. On pourrait attraper ce type et aller à la direction de nos services, puis changer la topographie trop centrée. Mais puisque nous sommes à ce point d'arrêt en ce moment, ce changement ne sera appliqué qu'à ce point d'arrêt et en dessous. Et je voudrais qu'il soit appliqué à tous mes points d'arrêt. Donc je vais juste me débarrasser de ça et me débarrasser de ça. Et je vais aller sur tous les appareils. Et maintenant je vais y aller, je vais aller à la topographie et au centre. Donc maintenant, quand on va à moins de 992 et que ce gars est bien mis là où il est censé être. Et aussi je suppose qu'on pourrait peut-être changer la hauteur de la ligne. Mais encore une fois, je vais aller à tous les appareils. Et pour la hauteur de la ligne, tapons simplement 1.1. Et puis quand on va à moins de 992, ça semble, ça semble beaucoup mieux. Maintenant, ce que nous pourrions aussi faire, c'est peut-être changer la taille de nos éléments de ces rubriques. Essayons donc de taille de police comme 26 ou 28. Je suppose que ça devrait être bien. Et nous pourrions aussi faire la même chose pour cette colonne ici en bas. Donc je vais aller dans les colonnes ici. Et je vais les empiler verticalement en dessous de 768. Donc il a eu tous ces types comme ça. Puisque nous ajoutons ces gars comme desmodules de boîtes d'icônes simples, modules de boîtes d'icônes simples, nous ne les avons pas créés à partir de zéro, comme ces gars ici, ils ont l'air un peu différemment. Donc, si vous voulez, vous pouvez juste saisir ces colonnes juste ici. Et je vais juste, peut-être que je vais fermer tous ces éléments et je vais le dupliquer. Et maintenant, nous pouvons simplement changer et ces icônes. Donc c'est ça, je pense que c'était une icône de signal. On y va et on peut l'appeler en tant que PDG. Ensuite, nous avons eu la recherche sur le Web. Eh bien, nous allons taper une recherche. Ensuite, on y va et je vais taper une recherche sur le Web. Et puis on a eu des motifs imprimés. Je pense que ce sera un livre ou quelque chose comme ça. Et ce sera la conception d'impression. Et puis on pourra se débarrasser de ces colonnes ici. Bien sûr, tout est facultatif, c'est à vous de décider. Je voulais juste garder ça simple et je ne le ferais pas, tu sais, parce que c'est plus rapide comme ça. Mais bien sûr, c'est une bonne idée de tester toutes ces solutions par vous-même. Tu voudrais utiliser la boîte d'icônes. Allez-y. Si vous voulez y aller, vous voulez savoir, suffit de créer ces boîtes d'icônes à partir de zéro vous-même. Tu sais, c'est toujours une bonne chose à apprendre. Donc, nous avons nos éléments ressemblant à ceci ou maintenant voyons à quoi ils vont ressembler lorsqu'ils sont sur un appareil plus petit. Je suppose que ça a l'air bien. Et sur un appareil beaucoup, beaucoup plus petit, il est toujours, il est toujours très bien. Donc je vais aller sur tous les appareils. Et puis nous pouvons peut-être juste voir notre, notre design en mode Incognito comme d'habitude. Donc, le contrôle Firefox plus Shift plus P, le contrôle Chrome plus Shift plus n autres navigateurs, je ne suis pas sûr. Donc nous avons eu notre design comme ça. Je vais juste le rendre plus petit, peut-être mais plus petit que ça. Alors maintenant, je vais juste descendre. On a nos services ici. Et quand nous allons commencer à devenir de plus en plus petits jusqu'à un certain point, vous allez voir que nous sommes, que notre design est entièrement, entièrement réactif. Nous avons donc créé nos services. Maintenant, nous pouvons passer à ajouter dans une galerie, une galerie de vos images, des images de votre choix et, ou les images que votre client S2. Alors passons à ça. 36. 6.1Créer la section de galerie: Je suis donc ici sur le site pixels.com. C' est mon site de référence pour des images gratuites et libres de droits. Et ce que je veux faire, c'est que je veux prendre, peut-être que, je ne sais pas, huit à dix photos. Donc, ce que nous pouvons faire ici, c'est peut-être chercher du design. Et on a des images ici. Laisse-moi peut-être attraper ce type ici. Et ici, dans le coin supérieur, je ne veux pas choisir comme le fichier original énorme, énorme taille. Je suppose qu'on pourrait aller avec la grande taille. Et puis nous pouvons, ce que nous pouvons faire, nous pouvons simplement cliquer sur le téléchargement gratuit et juste enregistrer l'image, et ensuite nous sommes prêts à partir. Donc ce que je vais faire maintenant, c'est que je vais prendre huit à dix photos et je vais les enregistrer sur mon ordinateur. Alors j'ai préparé mes images. Je leur ai donné quelques noms génériques juste pour que nous sachions ce que ces images sont censées présenter. Et c'est une bonne idée de donner à vos images des noms significatifs ou du moins des noms qui ont du sens pour vous. Et aussi ces noms seront, seront utilisés par défaut comme nos textes de superposition et lorsque nous ajoutons à la galerie. Alors passons à notre galerie. Passons à notre page et commençons à ajouter notre galerie. Donc je suppose que je vais me débarrasser de ce texte. Je n'en ai pas besoin. Et peut-être que cette fois je vais changer la couleur de fond de ma section. Faisons ressortir un peu. J' ai donc ma section sélectionnée. Laissez-moi juste peut-être fermer ces couches et aller à l'arrière-plan avancé par couleur de fond. Et nous allons choisir cette couleur foncée ici. Encore une fois, nous pourrions peut-être ajouter du texte ici en haut. Donc, je vais attraper ceci, peut-être toute cette div, et je vais le dupliquer et le déplacer vers le bas vers cette page. Ce que nous avons bien sûr besoin de changer la couleur, donc cette couleur plus claire et cette couleur plus claire. Et changeons ça. Notre portefeuille, appelons-le, appelons-le comme ça. Et peut-être que je vais juste supprimer ce morceau de texte juste pour, juste pour le faire paraître un peu différemment. Donc nous avons notre, peut-être changeons le nom de notre section en portefeuille. Gardiennons tout bien organisé. Portfolio. Donc, nous avons notre, notre titre, du texte ici. Maintenant, il est temps d'ajouter la galerie. Donc, ce que je vais faire, c'est que je vais sélectionner ma section, cliquer , ajouter, puis taper GAO GA. Et nous avons déjà notre galerie. Donc, ce que nous devons faire maintenant, c'est qu'il faut y ajouter quelques images. Donc ce que je vais faire, c'est que je vais cliquer sur ce gars ici, Médiathèque, puis cliquer sur Parcourir. Et comme vous pouvez le voir, nous n'avons pas trop d'images ici. Donc je vais juste prendre mes images. Je vais les sélectionner tous et juste les déplacer ici et attendre qu'ils téléchargent. Et une fois que tous ces gars sont téléchargés et qu'ils sont tous sélectionnés, c'est une galerie standard ou de presse. En passant, vous pouvez voir que chacun d'eux a cet attribut title juste ici, qu'il a été récupéré à partir du nom de fichier. Donc ce que je vais faire, c'est que je vais juste cliquer sur créer une galerie, puis insérer une galerie. Et nous pouvons voir toutes nos images présentées ici. Donc, si nous l'enregistrons maintenant et allons sur notre page, laissez-moi juste rafraîchir la page et descendre ici. Vous pouvez voir qu'on a eu notre galerie. Et si nous cliquons sur l'une des vignettes, vous pouvez voir que nous avons eu un effet vraiment sympa, propre, propre et lightbox juste ici. On y va. Mais bien sûr, nous pourrions changer certains aspects de notre galerie. Alors d'abord peut-être, ajoutons juste de l'espace ici en bas. Ou peut-être attrapons ce type, comme ça. Et si nous cliquons sur notre galerie, bien sûr , nous avons quelques options à choisir. Ces identifiants d'image sont simplement tirés de notre bibliothèque WordPress. Donc, si vous souhaitez modifier le positionnement de ces images, vous pouvez jouer avec les ID ici. Donc on pourrait, vous ne pouviez pas changer. Disons que ce type aura 61 ans et que ce type aura 60 ans. Et puis la position changera de ces images. Et si vous ne voyez aucune option été couvercle ici qui dit qu'ils sont pas sur par défaut. Donc, par défaut, nous avons l'option de lien Images mis en place et ajouter la boîte de lumière. Donc, nous pouvons réellement voir que la version zoomée des images. Nous pourrions également modifier la résolution des vignettes. Ça va changer tous ces types, toutes ces miniatures ici, bien sûr, en fonction de la taille de vos images. Mais nous pourrions aussi aller à l'option de mise en page. Et vous pouvez voir que nous avons quelques options ici. Nous avons le flex, qui est cette valeur par défaut qui va essayer de rendre tout égal. Mais nous pourrions choisir aussi l'option de maçonnerie. Et comme vous pouvez le voir, il commence à regarder différemment. Et nous pouvons choisir le nombre d'articles par ligne que nous aimerions. Donc on ne pouvait pas y aller comme dix. Donc on va avoir une galerie qui ressemble à ça. Mais je vais y aller avec deux peut-être. Et vous pouvez voir que ça commence à paraître plus agréable. J' ai ajouté 1010 images. Donc, si on a deux rangées, on a cinq images dans une colonne dans ce cas. Et si vous allez fléchir avec deux images par rangée, vous pouvez voir qu'il ressemble un peu, vous savez, essaie de tout rendre agréable et agréable. Et même je pense que je vais aller avec la maçonnerie pour ça pour l'instant. Et nous allons peut-être laisser, laissez-moi juste changer les images par rangée pour que ça ressemble à ceci. Je suppose qu'on pourrait peut-être ajouter une autre image ici pour la faire paraître, la rendre cool. Mais c'est non, c'est juste pour comprendre ce qui se passe. Nous pourrions changer l'espace autour de la valeur de l'image. Ainsi, par exemple, nous pourrions ajouter comme 50 pixels qui vont étaler toutes ces images plus loin les unes des autres. Mais je suppose que 1010 pixels est final. Maintenant, l'option suivante ici est les légendes, qui seront fondamentalement comme un titre de notre image que vous pouvez superposer, que vous pouvez placer sur vos images. Mais je pense que c'est quelque chose que nous pourrions commencer à faire dans la prochaine vidéo. Pour l'instant, gardons les choses simples. Donc, dans cette vidéo, je voulais juste vous montrer comment vous pouvez ajouter une galerie et quelles sont les meilleures pratiques d'utilisation d'ajouter une galerie simple ? Maintenant, dans la prochaine vidéo, nous allons commencer à jouer avec notre galerie un peu plus. 37. 6.2Ajoutez les légendes: L' option suivante dans notre module galerie est l'option légendes. Mais bien sûr, nous pourrions montrer les légendes si vous le vouliez. Et il sera activé par défaut. Cependant, il n'y a pas de légendes visibles ici. Et c'est parce que nous n'avons pas ajouté de légendes à nos images. Voyons comment on peut faire ça. D' abord, je vais aller à, je vais retourner à mon panneau d'administration. Je vais aller dans les médias et cliquer sur n'importe quel MA et image. Et comme vous pouvez le voir sur la droite, nous avons cette légende et ce champ juste ici. Donc ce que je vais faire, c'est que je vais prendre ce titre. Je vais copier, coller, puis aller à une autre image. Et je vais, je vais le faire pour toutes ces images, toutes ces images qui sont mises à l'intérieur de notre galerie. Ok, donc toutes mes images ont eu les légendes. Donc maintenant, nous pouvons retourner à notre, eh bien, nous pouvons revenir à éditer dans la galerie à l'intérieur de l'oxygène. Donc, je suis de retour en oxygène. Et maintenant, si nous cliquons simplement sur les légendes des spectacles, vous pouvez voir que lorsque nous survolons nos images, nous pouvons voir nos légendes ici en bas. Et c'est le comportement standard parce que donc nous par défaut, nous sommes arrivés aux légendes show que sur le hover est réglé sur yes. Si nous le définissons pour savoir, les légendes seront toujours visibles. Aussi, si vous voulez, vous pouvez peut-être masquer les légendes sur, sur un certain point d'arrêt. Donc, par exemple, si tu veux y aller, quoi ? Si vous souhaitez modifier cette option, Masquer les légendes ci-dessous, disons moins de 992. Et puis, si vous allez à ce point d'arrêt réel, vous pouvez voir que les légendes ont disparu. Je vais y retourner et je pense que je vais dire que je n'ai jamais voulu cacher les légendes, mais je veux seulement les montrer en vol stationnaire. Donc je vais cliquer sur oui. Donc, chaque fois que je passe la souris sur une image, cette légende sera visible. En outre, si vous le souhaitez, vous pouvez changer la couleur de la légende pour savoir comme vous pouvez changer la couleur du texte et vous pouvez changer la couleur de l'arrière-plan. Donc, quand vous survolez, vous pouvez voir que ces, ces changements sont pris, pris effet, peut-être modifions la transparence de ce gars juste un peu pour le faire paraître, peut-être que c'est un peu, c'est un peu bas à quelque chose comme 56. Ça devrait être correct. Donc, la dernière chose que nous pouvons changer ici est quand nous allons passer à l'option de vol stationnaire, nous pouvons choisir l', l'opacité de l'image, vous pouvez le changer. Donc, disons que l'opacité de l'image, comme l'opacité de l'image standard, va être un peu plus faible, disons peut-être pas 05, mais comme 09. Et puis l'opacité de l'image de vol stationnaire va être une. Donc maintenant, chaque fois que nous cliquons sur un, vous pouvez voir que c'est un peut-être laissez-moi juste changer cette image de passage, quelque chose encore plus bas. Et vous pouvez voir que nous avons eu ce bel effet de vol stationnaire. Je peux changer cette durée de transition à quelque chose comme vraiment long. Et vous pouvez voir qu'il faut 1 seconde pour passer de l'opacité 06, 0,06 image à un à 100, opacité comme ça. Mais je vais le changer à 0, peut-être 0 à, et je vais changer ce gars de 06285. Et puis on a eu ce bel effet. Bien sûr, nous pouvons toujours chaîner et nous pouvons toujours vérifier, vérifier sur notre mode Incognito. Donc quand on survolera ce type, tu verras que notre légende change. Nous avons eu, nous sommes arrivés à cette transition d'opacité en cours aussi. Donc, ce que nous pourrions aussi faire, c'est que nous pourrions changer le nombre ou même l'aspect entier de notre galerie lorsque nous atteignons un point de rupture différent. Ainsi, nous pouvons changer la réactivité de notre galerie aussi. Parce que lorsque nous passons à notre mode Incognito, vous pouvez voir que notre galerie va changer par défaut, comme ça. Donc, les images deviennent réactives. Mais tout ça, je suppose que toute cette mise en page, bien qu'elle ne le fasse pas, n'est-ce pas ? Alors prenons soin de la réactivité dans la prochaine vidéo. 38. 6.3, réagissant: Ainsi, comme je l'ai mentionné dans la vidéo précédente, nous pouvons rendre notre galerie bien réactive. Alors, qu'est-ce que je veux dire par là ? Donc, disons qu'à ce point d'arrêt, je ne fais pas ces images à mettre en trois colonnes. Je veux qu'ils soient mis, disons dans deux colonnes que je vais changer les images creusées aussi. Deux comme ça. Ensuite, passons à la page conteneur 1120. Je suppose que ça a toujours l'air. D' accord. Allons à moins de 992. Donc, disons que peut-être ce point d'arrêt, le point de rupture 992, je veux juste voir une image par corde. Mais comme vous pouvez le voir, nous avons un peu de problème ici. Ces miniatures ou pas été là, ne sont pas réparties dans toute la fenêtre ici. Et c'est parce que nous avons mis nos vignettes trop grandes. Mais quand nous allons à, allons à tous les appareils. Je vais prendre la galerie et aller à la résolution thermique. Je vais aller au complet. Ok, donc on s'est occupé de nos miniatures. Maintenant, qu'en est-il de la réactivité elle-même ? On a fixé les images par rangée à deux. Mais que faire si vous voulez avoir peut-être comme juste une rangée ? Quand on va dire moins de 992. Comme ces images commencent à paraître trop petites à mes jours, je voudrais qu'elles soient étalées sur toute la fenêtre. Donc ce que je vais faire, c'est que je vais juste définir la largeur minimale de l'image pour dire comme 450. Donc maintenant, le navigateur va supposer que vous voulez que votre image soit définie sur au moins 450 pixels de largeur. Mais une fois que nous commençons à changer dans nos points de rupture, vous pouvez voir que cela semble toujours bien. Et puis nous allons à moins de 992. Vous pouvez voir que puisque nous voulons notre image serait dit, dit au navigateur que nous voulons que notre image soit au moins pour un 150 pixels de large. Maintenant, il ne tient pas compte de cette image par numéro de ligne. Maintenant, c'est, vous savez, l'image est répartie dans toute la fenêtre et c'est la même chose que d' aller s'appliquer sur nos petits appareils comme ça. Donc, si nous allons maintenant à notre navigateur, laissez-moi juste appuyer sur rafraichir. Et puis quand nous commençons à devenir de plus en plus petits, vous pouvez voir qu'une fois que nous avons atteint le bon point d'arrêt, que ce design et ce design changent, la conception de notre, de notre galerie est en train de changer, mais de Bien sûr, tout fonctionne comme il est censé fonctionner. On a notre effet Lightbox, et on y va. La galerie fonctionne correctement. Bien sûr, il existe d'autres façons d'ajouter des galeries à votre design et nous allons jeter un coup d'oeil à l'ajout d'une fois que nous commencerons à utiliser un plug-in différent simplement pour nos portefeuilles. Mais ça va être dans l'une des prochaines vidéos. Pour l'instant, laissons notre section telle quelle. Nous pouvons maintenant passer à l'ajout d'une autre section, qui serait quelque chose comme une section à propos de moi ou à propos de nous. Et cette section sera en même temps, pleine largeur, mais divisée en deux parties égales. Alors commençons à le faire ensuite. 39. 7.1Créer une section pleine largeur: Ok, on a notre section portefeuille. Alors peut-être maintenant faisons quelque chose comme une, pas comme une section à propos de nous, mais pas seulement le simple, comme une image et un texte, quelque chose comme ça. Faisons une section pleine largeur qui sera divisée en deux parties égales. Et d'un côté, nous allons avoir une vidéo pleine largeur. Non, juste pour impliquer un peu plus nos utilisateurs. Et sur le côté droit, nous allons ajouter du texte. Commençons donc par ajouter une nouvelle section. Donc, je vais appuyer sur Ajouter, puis tapez simplement dans une section. Et nous avons une résection créée ici. Mais comme vous pouvez le voir, c'est un peu, ça n'a pas été, ça ne se répand pas sur toute notre page. Nous voulons faire cette section de pleine largeur. Donc, avec ma section sélectionnée, je vais aller à Taille avancée et espacement. Et ici, vous pouvez voir ce conteneur de section avec option. Donc, si nous l' ouvrons, nous pouvons choisir h avec pleine largeur ou une coutume si nous voulons entrer certaine valeur ici, mais je veux faire pleine largeur et il va répandre cette section comme ça. Donc maintenant, si j'ajoute des colonnes et que je vais ajouter 50 par 50 colonnes, vous pouvez voir que ces colonnes se répandent également sur notre page entière, mais en même temps qu'elles ne touchent pas les bords de notre section. Et c'est parce que notre section que nous, au fait, je suppose que nous pourrions le renommer. Appelons ça à propos de nous. Donc, à propos de nous. Nous y allons, parce que notre section a un rembourrage appliqué à elle. Vous pouvez voir que lorsque nous survolons cette section, ceci comme une couleur pourpre, violet, halo violet apparaît. Donc si nous nous en débarrassons, vous pouvez voir qu'en ce moment notre sanction est en fait l'huile de haricot. Ça touche tous les bords. Et si nous allons à la taille et à l'espacement, vous pouvez voir qu'on a 0 en haut et en bas. Et ajoutons 0 à gauche et 0 à droite. Et si vous prenez nos colonnes, alors ceci est notre colonne de gauche et ceci est notre colonne de droite. Vous pouvez faire la même chose pour peut-être d'abord, faisons la même chose pour la gauche. Et ça va être notre, notre vidéo. Donc je vais juste renommer ce type, et je vais appeler cette vidéo et cette div sur la droite. Je vais l'appeler juste texte. On y va. Alors maintenant, nous allons réellement ajouter la vidéo sur la gauche. Et nous sommes aussi, eh bien, nous aimerions aussi le rendre plein, pleine largeur. Alors commençons à le faire dans la prochaine vidéo. 40. 7.2Ajouter la vidéo: Pour ajouter une vidéo, tout ce que vous devez faire est, bien sûr, je vais d'abord sélectionner mon div, vidéo div. Je vais aller de l'avant et cliquer sur Ajouter. Et puis il suffit de commencer, commence à taper dans la vidéo et il suffit de cliquer dessus. Et l'oxygène est livré avec une vidéo factice, faire mon logo plus grand crème. Mais ce qui est plus important, c'est que nous pouvons encore voir un peu de rembourrage autour de notre, autour de notre vidéo. Donc, si je prends mon div, ma div vidéo, je vais aller à la taille et l'espacement avancés. Et même si nous pouvons voir 0 ici, vous pouvez voir que lorsque nous commençons à ajouter des zéros réels, que, eh bien, cette valeur est réappliquée à notre div. Et maintenant notre vidéo est mise comme il se doit. Bien sûr, on n'a pas besoin de savoir. Ce ne serait pas une bonne idée d'entrer, d'insérer votre propre vidéo. Donc si on va à notre onglet principal, laisse-moi juste prendre cette vidéo ici, cette couche vidéo. Vous pouvez voir que nous avons cette URL YouTube ou Vimeo juste ici. Donc, si vous prenez simplement votre vidéo YouTube, vous pouvez simplement insérer votre lien ici et cette vidéo apparaîtra ici dans notre div. Par exemple, j'ai copié une de mes vidéos, l' une de mes URL vidéo depuis ma chaîne YouTube. Et je vais juste coller ça. Et comme vous pouvez le voir, est d'être bien mis ici dans notre, dans notre def. Et bien sûr, si vous voulez, vous pouvez changer comme ce format vidéo si vous voulez faire ça. Mais je vais aller avec le standard 16 sur 16 sur 9 écran large standard. Et bien sûr, si vous voulez intégrer comme un iframe pour une source différente, vous pouvez le faire ici. Vous pouvez simplement coller votre code ici. Donc, c'est comme ça que vous pouvez, comment vous pouvez ajouter la vidéo. Bien sûr, c'est, il est normalement jouable. On y va. Et maintenant je suppose que ce que nous pourrions faire est que nous pourrions peut-être ajouter du texte ici sur la droite juste pour peut-être dire nos utilisateurs quelques mots sur nous. Alors commençons à le faire dans la prochaine vidéo. 41. 7.3Ajouter le texte et corriger la réactivité: Ok, alors ajoutons du texte dans notre div texte. Donc ce que je vais faire, c'est que je vais juste ajouter un titre. On y va. Et puis je vais juste ajouter un texte comme ça. Bien sûr, peut-être que je vais juste emprunter un peu de ce lorem ipsum. On y va. Je vais aller ici et coller ça. Peut-être une ou deux fois, peut-être encore plus d'oméga. Copions tout ce paragraphe et collez-le dans et noir deux fois. Ça devrait être correct. Donc, ce que je voudrais faire maintenant, c'est que je voudrais mettre cette rubrique et ce texte comme au centre de mon, de mon div. Mais d' abord, commençons peut-être par taper comme sur nous. Ça devrait être bien. Et je vais changer la couleur de ce texte. Donc notre couleur par défaut, même pour ce type. Bien sûr, nous pourrions modifier certains aspects des textes ici. On pourrait peut-être ajouter un peu de marge entre le Hadean et le texte. Mais la chose la plus importante que je voudrais faire ici est de mettre tous ces éléments au centre, verticalement au centre. Et je suppose que je voudrais rendre ce texte un peu plus court mais plus étroit. Donc, ce que ce texte div a sélectionné, je vais juste aller au milieu de l'alignement vertical de l'élément pour mettre mon texte au centre. Et en ce qui concerne ce texte, ce gars ici, ce que je vais faire, c'est que je vais aller à la taille et à l'espacement avancés. Et je veux changer la largeur à environ 75%. Cela devrait être sur la droite. Il y avait encore quelques choses que nous pouvions changer sur la façon dont cette section se comporte. Non seulement en termes de réactivité, mais aussi en termes de son, son ressemble à ceci. Alors, qu'est-ce que je veux dire par là ? Nos colonnes sont définies pour être de 50 % de largeur. Donc, cette vidéo sur la gauche est dit être 50% et cette colonne de texte est définie à 50%. Mais bien sûr, nous pouvons encore changer cela. Par exemple, si nous voulions agrandir cette vidéo, nous pourrions peut-être faire quelque chose comme 67. Et notre div texte va être recalculé. Sa largeur va être recalculée pour ressembler à ceci. Et bien sûr, si nous voulons que le texte soit plus grand, nous pouvons faire comme peut-être 60. Et ce type va être réduit à 40%. Et c'est quelque chose qu'elle pourrait faire. Je vais te laisser le soin si tu veux le faire comme ça, tu pourrais le faire. Vous pourriez, bien sûr, peut-être obtenir ce texte div, et nous pourrions peut-être juste aller à la taille et à l'espacement. Et nous pourrions peut-être aimer augmenter le rembourrage jamais aussi légèrement, peut-être même plus que ça. Pour faire quelque chose comme ça, vous savez, vous avez une totale flexibilité, une liberté totale en termes d'ajustement de l'apparence de tous ces éléments. Donc, si vous voulez ajouter un peu plus de rembourrage, vous pouvez le faire à une certaine marge. Vous pouvez le faire, changer le texte, changer les espaces entre ces éléments. Peut-être comme ça. Vous pouvez le faire très, très facilement. Quand nous commençons à regarder, commencez à regarder cette section particulière, notre section pleine largeur. Lorsque nous commençons à vérifier la réactivité, vous pouvez voir qu'elle n'a pas l'air si belle. Je veux dire, nous pourrions peut-être si vous vouliez supprimer du texte ici pour le faire ressembler plus ou moins à ça, mais ça n'a toujours pas l'air. D' accord. Ce que je pense que ce que je voudrais faire ici, c'est que je voudrais empiler ces gars verticalement. Donc je vais prendre mes colonnes ici. Et comme vous pouvez le voir, nous avons l'option de colonnes de pile verticalement, et en ce moment il est réglé sur moins de 992. Donc, quand nous passons à moins de 992, vous pouvez voir que ces colonnes sont empilées verticalement et tout semble bien. Mais je pense que cet effet particulier est comme plein avec énorme, un effet de section énorme est bon sur comme vraiment, vraiment gros bureau, ordinateurs de bureau. Donc, je suppose que je voudrais rendre ces gars verticaux, commençant par 1120 point d'arrêt. Donc ma colonne sélectionnée, je vais changer cette option de statistiques coms verticalement moins de 992 au conteneur de page 1120 et ci-dessous. Et si vous passez maintenant à ce point de rupture, vous pouvez voir que notre texte est en train de changer. Et dans ce point de rupture, je suppose que nous pourrions peut-être changer la largeur de nos colonnes de texte afin que nous puissions aller à la taille et l'espacement avancés et juste le définir à 100% pour le rendre juste un peu, juste un peu plus grand si vous le voulez. Comme vous pouvez le voir, nous avons ces images ici et nous avons ces, cette vidéo juste ici. Mais que se passe-t-il si nous voulions changer l'ordre de ces colonnes ? Encore une fois, je vais prendre les colonnes. Et vous pouvez voir que nous avons cette option de commande de colonne inversée ici, et par défaut, elle est définie sur jamais. Mais si nous choisissons le conteneur Page 1120 et ci-dessous, cela va changer. Donc on va mettre ces gars sur le côté B comme les plus grands ordinateurs de bureau. Mais quand nous allons à la page conteneur 1120 et ci-dessous, nous avons reçu notre texte. C' est bien la séparation de notre portefeuille et de notre vidéo ici. C' est ainsi que vous pouvez créer des sections pleine largeur et comment vous pouvez diviser ces sections ici à l'intérieur de l'oxygène. Je pense qu'à l'heure actuelle, nous pourrions peut-être passer à quelque chose comme connaître nos services en termes de tarification. Donc, nous pourrions faire quelque chose comme la boîte de prix ci-dessous notre, dessous de notre section pleine largeur. 42. 8.1Ajoutez la première boîte de prix: Donc, que vous créiez votre site pour vous-même afin de faire de la publicité pour votre entreprise ou que vous créiez un site pour un client, vous pouvez inclure comme une section de tarification. Alors faisons ça maintenant. Je vais commencer comme d'habitude en ajoutant une section. Bien sûr. Ce n'est pas absolument nécessaire, mais c'est une bonne technique de production. Juste non, garde les choses bien organisées. Et je vais renommer ma section et je vais l'appeler montée. On y va. Et je vais ajouter sélectionner un titre et du texte. Et peut-être que je vais juste emprunter une partie de ce texte et ensuite le coller ici. Et je pense que je veux changer le centre d'alignement du texte de topographie, même pour mes en-têtes ou centre de topographie avancée. Et je vais saisir cette section de tarification et je veux tout aligner sur le centre. Donc maintenant que nous sommes arrivés à notre rubrique créée, peut-être laissez-moi juste taper quelque chose comme la caisse. Nos prix sont les prix. On y va. Donc maintenant, nous pouvons peut-être ajouter comme certaines colonnes. Je vais ajouter des colonnes, et je vais ajouter trois divs à l'intérieur de ces colonnes. Donc tu as 123. Et ces colonnes vont héberger nos boîtes de prix. Alors peut-être ajoutons une certaine marge entre ces éléments. Je vais saisir mes colonnes, taille avancée et espacement, puis être comme 5050 pixels. Ça devrait être bien. Donc ce que je veux faire, c'est simplement que je voudrais ajouter. Donc ma première boîte de prix ici à l'intérieur de ma première, la première div. Donc, ce que je vais faire, c'est que je vais aller à Ajouter, puis taper dans la boîte de réception de prix. Et je vais juste cliquer dessus. Et comme vous pouvez le voir, il est livré avec certains pré-installé, je suppose que vous pourriez dire que préinstallé le texte. Et quand vous regardez à gauche, vous avez tous les éléments qui contrôlent chacun des aspects de notre boîte de prix. Mais si nous ouvrons notre, ce bien, cette première div, cette première colonne, puis la couche de boîte de réception de prix. Vous pouvez voir que nous avons obtenu l'image et le bas qui sont un peu indépendants de la boîte de prix parce qu'ils viennent sur des couches séparées et vous pouvez les contrôler séparément. Mais nous y arriverons dans une seconde. Donc, disons que nous aimerions offrir nos services de conception web. Donc ce que je vais faire, c'est que je vais changer ce texte en web design. On y va. Et je suppose qu'on peut partir pour les petites entreprises. Et si vous voulez changer les prix ici, vous pouvez le faire. Vous pouvez simplement taper votre prix ici. Mais quand nous allons à notre panneau de prix, ce panneau d'outils, vous pouvez voir que nous pouvons contrôler comme ça, ce prix ici. Nous pouvons ajouter, effectivement cliquer à l'intérieur. On peut, on doit le changer ici. Donc disons que nous voulons commencer à partir de, je ne sais pas, comme 859. Pourquoi pas ? Et nous pouvons laisser la décimale comme IQ si vous le voulez, vous pouvez, vous pouvez changer le symbole de devise et nous pouvons changer le terme. Donc je vais, eh bien, vous pouvez aimer vous en débarrasser complètement. Mais nous allons taper comme quelque chose PR un site Web. Et peut-être que nous allons changer ça normalement trois en quelque chose comme un, comme un millier. Peut-être. Ça va regarder, ça va paraître un peu mieux. Et bien sûr, ici, nous avons nos fonctionnalités que nous pouvons taper ici quelque chose comme le design professionnel. Alors peut-être quelque chose comme logo inclus si vous voulez le faire. Et nous allons taper l'hébergement gratuit pendant un an. On y va. Donc, nous avons créé notre boîte de prix comme ça. Mais bien sûr, nous aimerions certainement changer certains aspects à ce sujet. Par exemple, on pourrait peut-être changer ça comme la taille de notre, de notre cap, peut-être de ce type ici. Donc, je suppose que ce serait une bonne idée d'ajouter comme une boîte de prix de la tour de classe. Juste, vous savez, juste pour vous assurer que lorsque nous modifierons certains aspects de la boîte de réception à prix unique, ce changement sera reflété dans tous les cas de nos prix. Bien sûr, si c'est ce que vous voulez faire, et supposons que vous voulez le faire. Alors commençons à le faire dans la prochaine vidéo. 43. 8.2Ajoutez le cours: Donc, avec ma boîte de prix sélectionnée, je vais monter ici et je vais taper le nom de notre classe. Et il va y avoir une hausse. Gardons-le comme ça. Gardez-le, gardez-le simple. Donc, je vais ajouter la classe. Maintenant, nous avons sélectionné notre boîte de prix. Nous avons ajouté notre classe de prix ici. Alors peut-être que nous allons maintenant dupliquer notre boîte de prix. Et déplaçons ce type ici à ma deuxième div. Et redoublons ce type. Et je vais déplacer ce type dans cette troisième colonne. Disons donc que nous voulons faire comme l'image de marque pour les petites entreprises. Et faisons comme peut-être le référencement pour les petites entreprises. Et bien sûr, nous pouvons changer les prix ici pour que nous puissions faire, au lieu de 859, faisons quelque chose de différent. Faisons comme, je ne sais pas, à 99. Et nous allons taper par projet. On y va. Disons que, oui, nous voulons avoir un design professionnel, mais peut-être que nous allons changer le logo du professeur et inclus aussi. carte de visite gratuite, peut-être quelque chose comme ça. Carte de visite pour la carte de visite. Et peut-être au lieu de l'hébergement gratuit pendant un an, faisons une dizaine comme deux révisions incluses. On y va. Et pour le référencement, peut-être changeons cela normalement. Peut-être faisons-le comme 599. Pourquoi pas ? Et pour le SCO, nous allons normalement prévoir de ne pas changer ce prix pour, je ne sais pas, comme 459. Et faisons-le par site web. Et nous allons peut-être changer ces gars pour aimer la première page. Garanti. Peut-être comme Google et Bing. Et pour le troisième, que pouvons-nous ajouter ici pour le SEO, aidez-moi ici. Faisons des consultations gratuites. Ça va être un peu générique, mais bon, gardons ça comme ça. Ce n'est pas le but principal de cette vidéo, alors ok. Nous avons tous nos prix inclus ici. Alors allons à notre boîte de prix. Nous allons nous assurer que notre classe de prix est réellement sélectionnée. Je vais voir le titre et deux typographies intitulées topographie. Et si vous voulez, vous pouvez changer la famille de polices ici. On pourrait y aller, on pourrait y aller avec notre police principale et la police juste ici. Et bien sûr, on pourrait peut-être le faire juste un gros, juste un peu plus petit à quelque chose comme 38. Ensuite, nous pourrions faire la même chose avec le sous-titre. Gardions la police telle quelle. Mais rendons le plus petit. Quelque chose comme 18. On y va. Cela devrait aller bien, peut-être que maintenant revenons en arrière et vérifions le prix, la topographie de notre prix. Et comme vous pouvez le voir, nous avons beaucoup d'aspects ici. Alors allons avec quatre heures, aller avec le montant principal, nous pouvons changer ce texte ici. Allons-y avec peut-être un peu plus gros, comme 58, je suppose. Peut-être que nous allons changer la devise du montant à quelque chose, mais plus petit à quelque chose comme 22. Je le fais. Je suis juste pour que vous puissiez voir quoi, savoir quelles possibilités, quelles options vous obtenez ici quand vous faites ces boîtes de prix. Et comme vous pouvez le voir, nous pouvons vraiment prendre, profiter de notre, de nos cours ici parce que nous changeons tout en une seule fois. Vous pouvez également changer les caractéristiques, topographie, nous pouvons le rendre plus petit ou plus grand si vous le souhaitez. C' est totalement à toi de décider. Et nous avons peut-être changé comme le texte sur notre fond pour quelque chose comme nous contacter. Contactez-nous. On y va. La même chose ici. Et la même chose ici. Vous pouvez aussi ajouter une classe à notre bouton. Quelqu' un est parti et il suffit de taper le prix bt, n. Et maintenant, si nous commençons à changer la couleur de notre, de notre bouton, disons à notre couleur brune. Et bien sûr, nous devons ajouter la même classe à tous nos boutons. Prix btn, et le dernier, prix btn. Ensuite, si vous voulez changer, comme le bouton survoler la couleur à peut-être cette couleur plus foncée. Juste, tu sais, juste pour voir à quoi ça ressemble. Vous pouvez voir que c'est en fait, ça affecte tous nos boutons. Un autre aspect important dont vous devez prendre note. Vous n'avez pas seulement comme un bouton ici à l'intérieur de la boîte de prix, mais aussi une image. Donc, si vous le souhaitez, vous pouvez ajouter une image au-dessus de votre, de votre titre dans cette boîte de prix. Mais jetons un coup d'oeil à cela dans la prochaine vidéo. 44. 8.3Ajoutez les images aux boîtes de prix: Donc, à l'intérieur, la couche de la boîte de prix, l'image en bas. Donc, à l'intérieur de la couche de boîte de tarification, nous avons également cette couche d'image ajoutée. Donc, par défaut, si nous sélectionnons simplement notre couche, vous pouvez voir que nous avons ceci comme une URL factice ici. Que c'est, eh bien, c'est juste tirer une image factice de ce porte-place. C' est un site web. Et si nous allons à notre boîte de prix et puis graphique ici, vous pouvez voir que nous sommes arrivés à ce inclure des options d'image. Donc, si nous cliquons sur Oui, comment quelque chose change ici. Mais comme c'est une image factice, on ne peut pas la voir en ce moment. Mais si nous le gardons et puis allons sur notre site, nous y allons. Nous avons notre image incluse. Et bien sûr, si on change cette image quelque chose d'autre, je vais juste prendre rapidement peut-être ce, ce logo. Allez dans sélectionné, Enregistrer. Retournez à notre site, actualisez la page, et vous pouvez voir que notre image est incluse. Donc c'est juste quelque chose que tu pourrais faire si tu veux le faire comme ça. Si vous voulez ajouter une autre image ici, vous ne pouvez pas le faire ici à l'intérieur de vos champs de tarification et de tarification. Mais ce n'est qu'une option. Ce n'est pas nécessaire si tu ne le veux pas, si tu ne veux pas le faire. Juste pour se rappeler, pour exclure maintenant cette image de vos bugs de tarification car ici vous ne pouvez pas réellement, comme vous pouvez le voir, vous ne pouvez pas réellement supprimer cette image. Vous pouvez supprimer le bouton. Mais si vous voulez supprimer l'image, vous devez aller à la boîte de prix graphique et juste cliquer sur Non. Ensuite, enregistrez et allez sur notre site. Et voilà, que cette image, cette image a disparu. Donc, une fois tous ces types triés, nous pourrions nous occuper de la réactivité, mais peut-être, ajouter quelque chose comme une petite frontière rapide à notre boîte de prix. Donc, à partir de l'onglet Avancé, je vais aller à Borders. Je vais prendre notre couleur, peut-être ce brun foncé, mais je vais changer cette transparence. Et je veux faire la largeur. Je suis un. Et je veux que cette frontière soit solide. Et ça va me donner juste une, tu sais, un peu plus de définition. Je sais que nous ne suivons aucune conception spécifique ici. Il s'agit plus d'apprendre à utiliser tous ces outils afin de créer votre propre site Web. Mais, vous savez, je pense juste que cela donne juste un peu plus à nos prix et nos boîtes, un peu plus de définition. Et peut-être qu'on pourrait aussi prendre notre section. Laissez-moi juste voir où nous sommes ici, le prix, et peut-être que nous pourrions ajouter comme un fond très, très doux, comme si très, couleur gris très clair, quelque chose comme F9, F9, F9. Et si nous l'enregistrons, allez sur notre site principal, actualisez cela. On a quelque chose comme une belle définition ici. Bien sûr, c'est juste une option. Tu n'as pas à le faire, mais tu sais, tu dois savoir comment le faire. Maintenant que nous avons créé nos prix, peut-être passons à la création de témoignages. Disons que nous voulons nous vanter, nous vanter des résultats que nous avons et de ce que nos lignes d'habitude ont à dire sur nos services. 45. 8.4 Ajoutez les témoignages: Je vais commencer à créer mes témoignages comme n'importe quel autre mini-projet à l'intérieur de ce design. Donc je vais aller à Ajouter et ajouter une section que je vais appeler des témoignages. On y va. Et maintenant, nous pouvons juste commencer à ajouter nos témoignages. Voyons donc ce qu'un module de témoignage peut faire ici. Donc, je vais juste ajouter un module de témoignage. Et comme vous pouvez le voir, on a du contenu factice ici. Maintenant, un bon témoignage, je suppose, vient toujours avec une image parce que nous voulons rendre notre témoignage aussi plausible que possible. Donc, je peux aller à un côté très intéressant qui est appelé cette personne n'existe pas .com. Et c'est un projet, un projet d'IA qui, chaque fois que vous actualisez la page, génère une photo aléatoire de quelqu'un, eh bien, d'une personne qui n'existe pas. Et puis, mais dans notre cas, ce sera, ce sera, ce sera une grande source de photos de portrait de personnes qui n'existent pas réellement. Et toutes ces photos ont été générées par l'intelligence artificielle, ce qui est un peu effrayant, mais il fera, cela fonctionnera très bien dans notre, dans notre scénario. Je vais juste copier trois de ces images et les utiliser pour nos témoignages. Droit. Donc, j'ai obtenu mes images créées, sera téléchargé. Je vais voir mon témoignage. Je vais m'assurer qu'il est sélectionné et je vais aller à Image, puis parcourir. Et je vais sélectionner, eh bien peut-être que je vais sélectionner tous mes fichiers et les télécharger. Donc ce sont toutes ces images. Je vais juste les sélectionner et les ouvrir. Et je vais aller avec cette première image. Je vais juste le sélectionner, le sauver. Et voyons à quoi ça ressemble à l'avant. C' est donc notre premier témoignage. Laisse-moi revenir en arrière. Donc, une fois que j'ai rafraîchi ma page, tu peux voir que ce type est là. Donc je suppose que ce qu'on pourrait faire à nouveau, c'est qu'on pourrait peut-être ajouter comme cloner ce type fin, et peut-être changer certaines choses à ce sujet. Mais d'abord, comme d'habitude, je vais juste ajouter un cours de témoignage à cela. Je vais taper ce témoignage. On y va. Donc c'est notre classe. Et je vais juste le dupliquer une fois et deux fois. Bien sûr, tout dépend comment vous voulez comment vous voulez présenter vos témoignages pour l'instant, gardons-le comme ça parce que je vais juste vouloir changer rapidement certains aspects à ce sujet. Donc ça va, peut-être que je vais aller avec cette image et ensuite le match 30. Alors sourcils. Et on y va. On a tout, tout notre témoignage. Témoignages seront essentiellement prêts. Alors maintenant, puisque nous avons sélectionné la classe. On pourrait aller à la mise en page, et voir ce qu'on a là. Nous avons eu la disposition horizontale et la disposition verticale. Donc, comme vous pouvez le voir, il change rapidement, rapidement, de l'horizontale à la verticale. Vous pouvez bien sûr aligner le contenu et nous pourrions même contrôler comment cette section entière, à quoi ressembleront ces témoignages sur nos appareils mobiles et mobiles. Et bien sûr, on a la typographie. Donc, si vous voulez changer la taille de police du témoignage lui-même, vous pouvez le faire. On pourrait changer la taille de la police de l'auteur. Peut-être qu'on va le faire juste un peu plus grand pour quelque chose comme 20. Et l'information de l'auteur aussi. On pourrait faire quelque chose, quelque chose comme ça. Et bien sûr, je suppose que c'est une bonne idée de peut-être à une certaine marge entre ces éléments. Donc je vais aller de l'avant et choisir comme marge, haut et bas, comme 25. Et il y a un aspect très intéressant et très important de créer des éléments comme celui-ci. Je veux dire, c'est juste un exemple, mais vous pouvez utiliser cette technique n'importe où de votre côté. Maintenant, ces témoignages ressemblent à ça. Ils sont mis à la verticale comme ça. Mais dites que vous souhaitez les garder ou les faire aligner horizontalement. Donc, au lieu de simplement saisir, ajouter quelques colonnes et ensuite mettre tous les témoignages à l'intérieur d'eux, ce que vous pourriez bien sûr faire. Tu pourrais juste prendre ta section sur les témoignages. Et dans cette section, vous pouvez, vous pouvez choisir cette disposition d'élément enfant. Et par défaut, tous ces éléments enfants, donc tous ces développeurs de témoignage sont en fait empilés verticalement. Mais si nous choisissons horizontalement, vous pouvez voir que ces gars sont bien mis l'un à côté de l'autre. Et bien sûr, si nous prenons juste un témoignage, assurez-vous que notre verre est sélectionné, nous allons à la taille et l'espacement, que nous pourrions peut-être juste appuyer sur appliquer tout juste pour faire, juste pour que ces gars aient l'air un peu, un peu différemment. Mais bien sûr, si c'est trop pour toi, on pourrait passer à huit, appliquer à tous. Vous pouvez jouer avec. Bien sûr, j'ai oublié d'ajouter peut-être comme ça, comme certains, un peu de cap, mais ça va être super, super simple, super rapide. On peut juste amener ce type à la même chose, peut-être pas le titre, mais le texte. Donc je vais juste dupliquer ça va ici. Mais comme vous pouvez le voir, puisque notre option enfant de pile stock est définie horizontalement, je veux dire globalement sur notre, sur notre section, vous pouvez voir que tous ces éléments sont empilés comme horizontalement et que n'est pas vraiment ce qu'on veut. Donc, dans ce cas, ce qu'on pourrait faire, c'est juste vérifier ce type à faire, pour que ces éléments ressemblent à ça. Peut-être que je vais juste prendre mon témoignage. Et ce que je vais faire, c'est que je vais simplement cliquer sur ces trois petites barres et choisir div rapide. Là, nous allons et puis mettons tous ces témoignages à l'intérieur. Et encore une fois, ce que nous pourrions faire, c'est que nous pourrions simplement empiler éléments enfants horizontalement pour les garder comme ça. Et bien sûr, je voudrais tout aligner sur le centre. Un témoignage d'homme du bois sélectionné. Je vais choisir ma première option, éléments enfants collés verticalement et juste choisir l'alignement horizontal, le centre. Et je suppose qu'on pourrait peut-être ajouter de l'espace ici. Et peut-être quel genre de rubrique, ce que disent nos clients. Ensuite, nous y allons et nous obtenons nos témoignages créés. Donc, bien sûr, ce n'est qu'une façon de le créer. Mais si nous voulions faire comme un curseur de nos témoignages, juste parce que nous voulons le faire comme ça. On pourrait bien sûr le faire. Et c'est ce que nous allons faire dans la prochaine vidéo. 46. 8.5Placez les témoignages dans un diapositif: Disons donc que nous voulons rendre nos témoignages un peu plus intéressants, un peu plus interactifs, pour ainsi dire. Alors mettons nos témoignages dans un curseur. Donc ce que je vais faire, c'est ajouter un curseur. On y va. Et je vais le mettre sous MyText quelque part ici. Et peut-être que je vais ajouter un peu d'espacement. Et comme 50 pixels de marge. Ça devrait être correct. Et quand nous avons ouvert cette couche, vous pouvez voir que nous avons eu la diapositive 123 et que nous avons en fait trois témoignages, donc c'est bien. Donc, ce que nous pouvons faire, c'est simplement saisir un témoignage, mettre à l'intérieur de cette couche de diapositives, faire de même avec le second, et faire de même avec le troisième. Et AF, nous cliquons simplement sur l'une de ces flèches. Vous pouvez voir que nos témoignages ont bien glissé. On n'aura plus besoin de cette div. Mais nous pourrions peut-être changer certains aspects de nos diapositives, de nos témoignages pour qu'ils soient bien à l'intérieur de notre diapositive. Donc, avec ma diapositive, mon témoignage choisi et ma classe de témoignage active. Je vais aller à la mise en page. Et je vais changer la mise en page à la verticale. Et je vais changer l'alignement du contenu au centre. Et maintenant, si nous pouvions simplement commencer à cliquer sur notre curseur, vous pouvez voir que cela change bien. Bien sûr, nous avons tous encore style notre, notre témoignage. Peut-être que je vais diminuer cette vitesse d'animation. Je vais, peut-être que tu as enlevé le rembourrage. Peut-être ne nous superposons pas de points, mais peut-être modifions simplement certains aspects de configuration. Cachons peut-être les points. Faisons-le jouer automatiquement et infini. Et 3 000 millisecondes, je suppose que ça devrait aller. Voyons à quoi ça ressemble dans le fondant. Je vais juste rafraîchir ce gars. Et voilà, nous obtenons notre curseur. Et c'est être, c'est, ça joue automatiquement parce que c' est ce qu'on a dit qu'il a fait parce que c'est ce qu'on a décidé de faire. Et là, nous allons avec notre curseur, avec nos témoignages. Donc en gros, vous pouvez mettre tout le contenu que vous voulez en quelques heures, à l'intérieur de votre curseur ici, à l'intérieur, à l'intérieur de l'oxygène, non ? Donc, nous avons déjà eu notre section des témoignages. Peut-être commençons à créer notre pied de page parce que je pense qu'il est grand temps. Nous avons commencé à créer du contenu plus dynamique comme notre portfolio, peut-être notre blog, vous savez, choses comme ça, un seul modèle de blog. Nous avons encore beaucoup de travail à faire, mais je veux juste que vous appreniez à fond comment utiliser ce logiciel vraiment, vraiment génial pour créer des pages, des sites Web pour vous-même et pour vos clients. 47. 9.1Placez le pied de vue dans le modèle: Maintenant, un pied de page fait définitivement partie de notre modèle principal. Donc, nous avons notre en-tête. Autrement dit, il y a une partie de nos modèles, donc l'en-tête reste le même sur chaque page. Mais il en va de même pour le pied de page. Alors je vais voir mon administrateur et je vais voir des modèles d'oxygène. Et je vais l'ajouter le modèle de maintenance avec de l'oxygène. Je suis donc à l'intérieur de mon modèle et maintenant je suis prêt à commencer à construire notre pied de page. Mais j'ai décidé que peut-être cette fois, faisons-le un peu différemment. Je veux dire, au lieu de tout construire à partir de zéro, apprenons une autre fonctionnalité ici à l'intérieur de l'oxygène. Ajoutons simplement S1 des sections prédéfinies qui viennent avec de l'oxygène. Donc ce que je vais faire, c'est que je vais aller, et donc ce que je vais faire, c'est que je vais, à partir de mon, de mon panneau d'outils, je vais choisir Bibliothèque. Et ici, nous avons des ensembles conçus. Et ici, vous pouvez voir que nous avons beaucoup de design et d'ensembles prédéfinis. Et si nous choisissons quelqu'un d'entre eux, allons peut-être avec cette période élevée et voyons ce que c'est. Ici. On a des sanctions et des éléments. Et ici, on a des pieds de page. Et disons que je voudrais avoir comme peut-être ce grand complexe pour comme un gros pied de page léger ou peut-être juste un simple Fourier. Allons avec ce grand complexe pour, voyons à quoi ça ressemble. Je vais juste cliquer dessus. Et comme vous pouvez le voir comme étant bien rempli avec nos menus, avec nos polices, avec du texte. On a même comme un fond en bas. Nous avons eu cette image que nous pourrions peut-être changer à notre image. Mais bien sûr, ce serait une bonne idée de semer. Donc je vais aller à des affections avancées et ensuite je vais aller à Filter. Et je vais choisir Invert comme on l'a fait avant. Mais bien sûr, si vous le vouliez, vous pouvez simplement ajouter votre propre image ici. Donc ce serait l' un de nos Fuller. Bien sûr, nous pourrions jouer avec tous ces ensembles de dessins. On pourrait choisir des canaux. Voyons une page deux, peu importe ce que ça veut dire, nous allons trouver quelques pieds de page et pas trop. Allons avec autre chose. Peut-être allons-y avec le premier. Voyons ce qu'il offre. Encore une fois, pieds de page, il y en a beaucoup ici. Alors peut-être allons-y avec ce logo de pied de page de type centré. Le fait que ce pied de page soit pré-conçu ne signifie pas que nous ne pouvons rien changer à ce sujet. Donc, avec cette section des centres de logo de pied de page sélectionnée, je vais aller à fond avancé et je vais me débarrasser de cette couleur. Et je vais ajouter une de nos couleurs. On y va. Et nous avons eu ces icônes, ces icônes, les icônes sociales ici. Et ils ont aussi cette couleur bleu hippie atomique ajouté à elle. Si tu veux le laisser comme ça, tu peux le laisser comme ça. Je vais les changer. Faites une couleur bleue différente comme celle-ci. Pourquoi pas ? Et en vol stationnaire, peut-être que je vais attraper cette couleur, mais sur le vol stationnaire, je veux juste la rendre un peu plus sombre. Juste comme ça. Donc, chaque fois que nous survolons notre icône que je peux changer. Et bien sûr, chacune de ces icônes peut conduire à nos réseaux sociaux. Donc on a ces icônes juste ici. Donc, par défaut, ils ont juste Gamow comme facebook.com, Instagram, Twitter. Si vous le souhaitez, souhaitez ajouter votre profil LinkedIn, vous pouvez ajouter votre profil LinkedIn ici. Je vais juste enregistrer le symbole de la livre. Et comme vous pouvez le voir que cette icône LinkedIn est ajouté même entièrement RSS et YouTube. Tout ce module, soit dit en passant, est le module d'icônes sociales que vous pouvez facilement ajouter à partir de notre panneau Outils de puits. Ce type ici, les icônes sociales. Et bien sûr, vous avez différents éléments et différentes options de style prêts et nous attendent. Mais c'est juste, juste, vous savez, je pense que c'est juste une façon d'ajouter rapidement quelques éléments. Bien sûr, il en va de même pour l'en-tête. Peut-être que je vais juste me débarrasser de certaines de ces icônes. Peut-être que ce type et ce gars qu'on peut partir et ces icônes telles qu'elles sont. Donc, la même chose vaut pour, pour les en-têtes. Donc disons que je vais aller à Ajouter et en-têtes. Et laissez-moi en choisir un, l' un des en-têtes. Allons-y avec ça. 1 mai être, bien sûr, il devrait être mis pas ici, certainement pas ici. Alors nous allons nous débarrasser de, nous allons le déplacer ici. Et comme vous pouvez le voir, nous avons obtenu notre pied de page, nous avons ajouté notre en-tête à partir de notre ensemble de design en quelques secondes seulement. Donc, si vous ne voulez pas commencer à partir de zéro, si vous voulez juste avoir quelque chose de pré-conçu, pré-installé, vous pouvez certainement le faire ici à l'intérieur de l'oxygène. Mais bien sûr, je ne veux pas de ce type ici. Je veux qu'il soit mis ici. Je vais changer cette image à nouveau pour notre conception, un génome bien conçu. Qu' est-ce que peut-être nous allons nous débarrasser de cette image. Je vais juste revenir à mes bases et je vais juste trouver des textos. Et on y va. Ce gars juste là. Et je vais me débarrasser de cette image. Et je vais juste taper dans le design laotien, je vais changer la famille de polices en Bree Serif. Modifiez la couleur du texte. Là, nous allons, et augmenter la taille de la police à quelque chose comme ça. Mais comme vous pouvez le voir dans notre panneau juste ici sur notre panneau Calques, ce lien, ce texte se trouve à l'intérieur d'un encapsuleur de liens. Donc, ce wrapper de liens est en fait un moyen d'ajouter des liens à votre, à vos éléments. Et donc disons que je voudrais, je voudrais ce logo, ce lien texte vers mon plan principal du site, eh bien, mime première page. Donc, je pourrais juste taper l'URL juste ici de ma première page. Et chaque fois que quelqu'un clique sur ce texte, il sera dirigé vers notre page d'accueil. Voyons donc comment notre pied de page se comporte. Sur les appareils plus petits. Il devrait se comporter correctement. Abaissons moins de 768. En passant, si vous voulez changer ce menu aussi, nous pourrions lui dire de devenir réactif une fois que nous atteignons, atteindre un certain point d'arrêt. Disons que lorsque nous atteignons moins de 480, nous voulions être comme un menu mobile. Donc je vais aller sur mobile responsive. Et je vais choisir Mobile Menu, bascule ci-dessous moins de 480. Et ce menu va se tourner vers un menu mobile sur les plus petits appareils, sur les smartphones. Donc ça va ressembler à ça. Sur les plus grands appareils et sur les plus petits appareils va ressembler à ça. Si vous le souhaitez, vous pouvez créer votre propre pied de page. Et si vous jetez un oeil à la structure ici, vous pouvez le voir. C' est juste fondamentalement des colonnes, tout comme nous avons ajouté des colonnes auparavant. Et on a trois div. Donc notre pied de page est divisé en trois colonnes. Et à l'intérieur, nous avons essentiellement comme un menu, quelques morceaux de texte, des liens, des icônes sociales. Vous pouvez ajouter d'autres morceaux de texte. C' est, non, ce serait totalement, totalement à vous de décider. Mais ce qui manque ce pied de page est détesté un petit droit d' auteur, des informations sur le droit d'auteur que nous pourrions mettre ici, peut-être en dessous des icônes sociales. Alors faisons-le dans la prochaine vidéo. 48. 9.2Ajouter les informations de copyright: Alors maintenant, ajoutons le symbole de copyright ci-dessous nos icônes sociales. Mais ne le faisons pas juste comme du texte brut avec quelques mots dedans. Mais voyons, faisons-le, rendons-le dynamique et faisons-en une preuve future. Je veux dire, c'est une bonne idée d'ajouter un extrait de code extrêmement, extrêmement minuscule juste pour, vous savez, juste pour vous assurer que les données que la date de copyright est toujours, sont toujours mises à jour. Donc, vous n'avez pas à revenir dans cette conception après un an, deux ou trois ans pour simplement mettre à jour le code de copyright. Comment peut-on faire ça ici à l'intérieur de l'oxygène ? Tout d'abord, je vais juste au code de copyright Google PHP. Et je vais aller à ce premier résultat de trucs CSS. Maintenant pourquoi ai-je cherché le code de copyright PHP ? Si vous voulez le rendre dynamique, si vous voulez, si vous voulez que ce code récupère les données de notre base de données, de, de notre système. Mettons-le comme ça. Tu dois le rendre dynamique. Et pour le contenu dynamique sera, vous devez aller avec PHP. Donc ce que je vais faire, c'est que je vais juste copier ce petit extrait ici. Je vais retourner à l'oxygène. Et ici, dans ma dernière colonne, je vais juste ajouter, et je vais taper un bloc de code. Maintenant, vous n'avez pas besoin d'être un codeur, vous n'avez pas besoin d'être un programmeur. Vous n'avez pas besoin de savoir essentiellement quoi que ce soit sur le codage pour que cela fonctionne. Mais tu ne peux pas les attraper. Php et onglet HTML. Retirez tout, nous n'en avons pas besoin, et collez simplement ce code dans. Maintenant, ici, si vous voulez laisser comme 2008, vous pouvez, mais peut-être que je vais juste le changer pour 2018. C' est notre date de début. Et je vais juste appuyer sur Appliquer le code. Je vais effondrer l'éditeur et vous ne pouvez rien voir ici parce qu'on doit changer certaines choses et comment on a réussi à le styliser ? Donc je vais aller à la typographie et je vais changer la couleur à mes couleurs par défaut. Et on y va. Nous avons notre droit d' auteur, symbole de droit d'auteur, ici. Bien sûr, si tu veux, tu pourrais changer. Peut-être disons que nous avons ce symbole de copie et que nous allons taper dans le design. Appliquons le code. Et vous pouvez voir que les changements se reflètent instantanément ici. Et encore une fois, nous pourrions peut-être simplement saisir nos paramètres de topographie peut être changé la taille de police à quelque chose comme 12. Et peut-être ajouter un peu d'espace dans une certaine marge au sommet. Et peut-être que nous allons changer la couleur de ce gars ici. En fait, c'est cet atomique, comme vous pouvez le voir, ceci vient de, de notre, de cet ensemble de conception. Alors, rendons peut-être ça un peu plus sombre. Donc topographie, nos couleurs. C' est peut-être une de ces couleurs, je suppose. Je suppose que ça a l'air bien, alors maintenant quand on sauve ce gars et qu'on va à notre modèle principal, on voit que nous avons notre code de copyright ici. Et comme vous pouvez le voir, il est dit, eh bien, c'est 2020, donc il montre la bonne date et quand le virage 21 vient, cette date va changer automatiquement parce que nous avons ajouté m. Nous ne savions pas comme juste écrire les chiffres. Nous avons ajouté le code, un extrait très simple. Et, tu sais, tu peux vraiment oublier ces gars. Vous pouvez juste être sûr que ce dé est, cette date va toujours être il n'y a pas de mise à jour. Alors on y va. Nous avons notre pied de page simple. Bien sûr, si vous voulez le changer, vous pouvez toujours le changer. Vous pouvez choisir un ensemble de concepteurs, vous pouvez, vous pouvez devenir fou avec ce pied de page. Mais ce que je veux me concentrer maintenant, c'est une autre partie de notre site Web. Alors maintenant, nous pourrions peut-être commencer à créer notre blog. Parce que disons que nous voulons partager quelques réflexions intéressantes avec nos, avec nos utilisateurs, avec nos visiteurs, ou peut-être que votre client sera un blogueur. C' est donc une bonne idée de créer un, pour apprendre à créer un blob en utilisant de l'oxygène. 49. 10.1Ajouter les publications du blog: Dans les prochaines vidéos, nous allons créer notre page de blog et un seul modèle de billet de blog. Et ce sera un excellent exercice pour nous avant de commencer à créer notre portfolio parce que nous allons finalement apprendre à utiliser du contenu dynamique ici à l'intérieur de l'oxygène et de WordPress. Mais avant de passer à cela, nous devons avoir du contenu, du contenu bloqué sur notre page. Donc j'entends ce répertoire de plugins. Et ce que je vais faire, c'est que je vais juste ajouter un nouveau plugin qui s'appelle Faker press. Et ce plugin nous permettra simplement d'ajouter du contenu fictif à notre, de notre côté. Donc, je vais juste l'installer et activé. Et une fois qu'il sera installé, je vais aller à la presse. Ensuite, je vais aller à Réglages. Et une fois qu'il sera installé, je vais aller à la presse, et ensuite je vais aller à des postes. Et fondamentalement, la seule chose que je vais faire ici est que je vais juste taper, je vais juste taper ces, donc trois, donc le nombre minimum sera trois, maximum 12 de messages. Et je vais juste cliquer sur Générer. Et une fois que c'est fait, j'irai à des postes. Et vous pouvez voir qu'on a 12345. Et bien sûr notre sixième. Comme le premier billet de blog qui vient par défaut avec WordPress. Mais le problème avec elle est que, eh bien, ces messages, si nous venons d'ajouter et de les ajouter, vous pouvez voir qu'ils ne viennent pas avec une image en vedette. n'y a pas d'image en vedette, et ce serait une bonne idée d'en avoir un juste pour notre billet de blog, juste pour que notre page de blog semble réellement un peu plus intéressant, je suppose. Une fois que nous commençons à ajouter, une fois que vous commencez à jouer avec nos différents designs de notre page de blog, c'est une bonne idée d'avoir quelques images à voir, pour voir réellement à quoi ressemblent ces designs. En outre, comme vous pouvez le voir ici, nous n'avons qu'une seule catégorie qui est appelée non catégorisée. Mais ce que nous voulons faire, c'est que nous voudrions ajouter quelques catégories comme k, Disons design. Et je vais juste éditer peut-être le web design, le web design et peut-être le branding. Laissez-moi simplement cliquer et taper l'image de marque. Et peut-être, je ne sais pas, allons-y, allons-y avec la conception d'impression. Et je vais ajouter une nouvelle catégorie. Et je vais me mettre à jour. Et bien sûr, ce que nous devons faire en ce moment est d'aller de l'avant et de saisir tous nos messages et juste ajouter le changement toutes ces catégories et annonces images en vedette. Donc, afin d'ajouter une image en vedette, ou nous devons faire est de simplement aller à notre post, éditer le post. Je pense que je vais affliger les non-catégorisés. Je vais juste choisir n'importe quelle image que nous avons ici. Cela devrait être, cela devrait être correct. Donc, une fois que c'est fait, je vais juste cliquer sur Mettre à jour. Et puis je vais faire la même chose pour tous les postes restants. Je vais juste ajouter différentes catégories à mon post, et je vais ajouter ces images en vedette, n'est-ce pas ? Donc nous avons eu nos vœux, nous avons nos catégories. J' ai ajouté à l'ivoire, les images en vedette, et je suppose que nous sommes prêts à commencer à créer notre page de blog. 50. 10.2Créer le modèle de blog: Ok, nous avons eu nos billets de blog, donc maintenant il est temps d'ajouter nos messages à notre page de blog. Donc, ce que nous devons faire est en fait nous devons créer un modèle pour notre page d'index de blog. Donc ce que je vais faire, c'est aller à l'oxygène, puis à des modèles. Et puis je vais ajouter un nouveau modèle. Je vais ajouter ça. Je vais nommer ceci comme des billets de blog. On y va. Et nous pourrions hériter de la conception de notre, de notre modèle de nos hommes modèle principal si vous le vouliez. Mais nous pourrions aussi savoir juste toujours créer tout à partir de zéro. Donc, disons que nous voulons seulement avoir la même chose que notre en-tête de superposition sur notre page d'accueil, afin que nous puissions le laisser comme ça. Et sur notre page de blog, nous pourrions avoir un en-tête totalement différent et un pied de page totalement différent. Donc, n'héritons pas de ce modèle principal. Laissons cet effet de superposition sur notre maison par juste si vous, lorsque vous venez de prévisualiser ce design sur vos ordinateurs, vous pouvez voir différents aspects de cette conception. Donc je vais juste le laisser comme aucun. Et puis je vais aller à l'autre et puis choisir l'index blogposts. Parce que si vous, si vous voulez appliquer ce modèle à une page spécifique, spécifique, et nous devons choisir ceci. Où ce modèle s'applique-t-il ? Et à partir de cet autre onglet, nous devons choisir un billet de blog, cet index. Et puis je vais juste frapper Publier. Et quand nous allons à notre page de blog, vous pouvez voir que nous avons notre post, mais ils ne sont pas stylés quoi que ce soit. Ça n'a pas l'air trop beau, n'est-ce pas ? Et bien sûr, nous ne pouvons voir aucun en-tête ici parce que nous n'avons pas hérité de notre conception d'en-tête de notre modèle principal. Et nous pouvons voir notre pied de page. Nous allons créer un design complètement, complètement différent pour cette affiche de bloc, page d' index et pour le billet de blog singulier. Parce que disons que vous avez obtenu en ce que vous devez créer un billet de blog sur un blog, un blog pour votre client. Et nous allons le faire complètement à partir de zéro. Donc, pour l'instant, nous avons ajouté du contenu fictif. Nous avons ajouté un modèle, modèle index de blog. Et maintenant, nous devons styliser ce modèle. Alors commençons à le faire dans la prochaine vidéo. 51. 10.3Ajoutez l'en-tête et un pied d'un pied d'écran, à notre page de billet de blog: Ok, on a nos messages, on a notre modèle. Mais comme vous pouvez le voir, notre modèle est vide. On n'a rien ici. Et c'est parce que nous avons décidé de ne pas hériter et mince de notre modèle principal. Et quand nous allons sur notre page de blog, vous pouvez voir que les blogs, les billets de blog sont affichés. Mais en fait, nous n'avons pas l'air trop beau que ce n'est pas ce que nous voulons. Nous n'avons même pas d'en-tête ou nous n'avons pas de pied de page et bien, nous n'avons fondamentalement pas de styles ici, alors réparons ça maintenant. Donc, je vais commencer par ajouter un en-tête, un pied de page, et peut-être une section avec le titre et quelques textes. Mais au lieu de tout construire à partir de zéro, ajoutons des heures. Eh bien, un des concepteurs, donc je vais aller à Ajouter des ensembles de conception de bibliothèque. Et je pense que je vais aller avec quelque chose de très simple. Donc je vais aller avec cette section Atomic et ensuite je vais enfin en tête. Peut-être que je vais aller avec des en-têtes simples centrés. Donc ce sera notre en-tête. Et puis je vais ajouter un pétrin, qui est peut-être ce pied de page centré comme ça. Bien sûr, nous pouvons changer notre logo. Donc je vais juste prendre cette image, comme vous pouvez le voir ici. Je vais aller à Browse, prendre notre logo, et sélectionner la même chose pour ce gars, parcourir. Et on y va. Nous avons notre, nous avons créé nos logos. Et ce menu, je crois, est complet le, eh bien, c'est la même chose. Mais celui-là a des listes déroulantes. Mais je pense que nous pouvons les coiffer assez, assez de la même façon. Donc je vais prendre ce menu et je vais juste changer la couleur de mon texte à nos couleurs par défaut. Et je vais prendre le menu en bas. Et je vais faire la même chose. Mais peut-être que je vais juste changer aussi la taille de la police jamais aussi légèrement à quelque chose comme 12. Ça devrait être bien. Et peut-être que nous allons changer la hauteur de ce logo pour 20. Et pendant une heure icônes sociales, changeons la taille pour peut-être 18 ou peut-être pour Wendy. Et encore une fois, changeons la couleur de fond pour peut-être cette couleur plus foncée. On y va. Et sur un vol stationnaire, changeons la couleur à notre couleur brune. Donc, quand nous survolons nos icônes, elles ressemblent à ceci. Maintenant, vous pourriez peut-être résoudre quelques problèmes d'espacement ici. Si nous prenons cette image, voyons si vous avez vraiment un espacement ici. Vous avez 12 pixels en bas. Alors faisons-le peut-être comme six. Et vérifions notre menu. Si on a un peu d'espacement ici. Prendons-le comme ça. Et passons à 0. Et tu sais quoi ? Laissons-le comme ça. Soyons simples. Il est vraiment, il ne s' agit pas vraiment de créer le meilleur en-tête et pied de page au monde pour ce design, nous voulons ajouter une page de blog. Donc maintenant, je suppose qu'on pourrait peut-être ajouter une section. Et dans cette section, laissez-moi juste le mettre entre notre en-tête et notre pied de page. Donc, dans cette section, je vais ajouter un titre. Je vais ajouter du texte. Tapons quelque chose comme Bienvenue sur notre blog. Et ici, je vais juste copier ce morceau de texte et puis le coller une fois de plus parce que cela devrait être correct. Et je veux tout centrer en moi section. Mais je vais aussi saisir cette rubrique et l'aligner au centre. même chose ici, et la ligne de ce type vers le centre. Donc, l'étape suivante serait d'ajouter une autre section. Donc, j'irais ajouter une section. Gardiennons tout bien organisé. Et ici, nous allons réellement ajouter notre, nos articles de blog. Nous allons ajouter un module qui va nous permettre d'ajouter un billet de blog. Donc, notre comme la partie principale de notre modèle est terminée. Nous l'avons fait très vite. Donc maintenant, nous pouvons réellement passer à l'ajout de notre billet de blog à remplir notre, notre page avec des blogs, avec des bateaux de bloc. Parce que quand nous allons à notre, notre page de blog et je vais juste rafraîchir cela. Vous pouvez voir que vous commencez réellement à construire notre page de blog. Alors ajoutons nos messages dans la prochaine vidéo. 52. 10.4Ajoutez les publications du blog: Ici, en oxygène, il y a un module qui est responsable de l'affichage de vos billets de blog. Donc, ce que nous pourrions faire est que nous pourrions ajouter un module qui s'appelle des messages faciles. Et nous y allons et comme vous pouvez le voir, dès que nous le faisons, nous ajoutons nos blogposts à notre page. Et par défaut, WordPress affiche une chose, 1010 messages. C' est pourquoi on les voit tous ici. Bien sûr, nous pouvons changer ça. Donc, quand nous allons à, quand nous retournerons à notre panneau d'administration et nous irons à la lecture des paramètres. Donc, ici, nous avons ce blog pages montrent au plus dix messages dans ce cas. Alors changeons ça en, disons avant. Et je vais enregistrer les changements. Et puis, lorsque nous allons sur notre page et actualisons la page, vous pouvez voir que nous n'avons que quatre blogs affichés en ce moment. Et on a cette petite pagination ici en bas. Alors, comment pouvons-nous réellement styler notre module de billets de blog à l'intérieur de l'oxygène ? Eh bien, tout d'abord, bien sûr que je vais y aller, je vais aller aux modèles et blogposts. Je vais l'éditer avec de l'oxygène. Et peut-être que je vais juste me débarrasser de cet espacement parce qu'on a un peu d'espacement ici et dans cette section. Donc, notre module de messages faciles, comme vous pouvez le voir, il y a quelques, quelques changements différents. Donc il y a des aspects qu'on peut changer. Donc, tout d'abord, nous avons cette option de requête juste ici qui vous permet de changer ces requêtes. Donc, fondamentalement, quels messages sont tirés de notre base de données. Donc, il peut être par défaut, requête WordPress, il peut être personnalisé, sorte que vous pouvez choisir le type de poste. Et si nous avions des postdocs personnalisés, nous ne pensons pas en avoir, en ce moment. On pourrait filtrer. Nous pourrions donc, par exemple, simplement ajouter comme seulement des catégories spécifiques et spécifiques. Comme peut-être, disons la conception. Si nous ajoutons à cela et sauvegardons cela, nous verrons finalement notre conception s'opposer. Mais je crois que tous ont, tous nos messages ont cette catégorie. Voyons donc non catégorisé. Et allons à notre page de blog. Et comme vous pouvez le voir, nous n'avons rien ici parce que nous avons simplement défini une catégorie comme notre catégorie. Et je crois que nous n'avons pas de poste non classé. Alors vérifions la conception d'impression. Et je vais rafraîchir la page. Et nous avons quatre d'entre eux ont la catégorie Print Designer. Mais de toute façon, si vous voulez simplement filtrer des catégories spécifiques, vous pouvez, vous pouvez le faire ici. Maintenant. Nous pourrions également changer l'ordre, mais descendant ou ascendant et descendant, ou nous pourrions les commander par date, marée, et cetera. Donc, si nous venons de rafraîchir la page en ce moment, nos messages sont filtrés ou triés par, par le, par le titre. Allons de l'avant et choisissez la requête par défaut. Mais en termes de, en termes de conception, cette utilisation Options prédéfinies est le plus important. Donc, la norme d'image Grit est ce que vous voyez en ce moment. Mais on pourrait y aller avec n'importe quel autre quand il est préréglé ici. Alors faisons l'image de grain avec des dégradés sombres animés. Donc c'est notre, c'est le regard en ce moment. Nous pourrions aller avec une image avec un chevauchement de dégradé pour le faire ressembler à ceci. Ou une image avec un chevauchement de rectangle déchiré. Donc, fondamentalement, vous obtenez beaucoup, beaucoup d'options de style, de style juste ici. Et en passant, si vous vous demandez, comment pouvez-vous changer cet extrait ici où bien, ce n'est pas dépendant de l'oxygène. On peut, on peut arranger ça. Alors peut-être qu'on va faire ça. Prenons peut-être quelques petits extraits. Je vais retourner à l'administrateur. On va aller voir mon patron. Et lorsque vous modifiez un article ici à droite, vous verrez votre panneau d'extraits. Donc si je me débarrasse de la plupart de ce texte, je vais juste laisser peut-être comme trois lignes de texte. Je vais mettre à jour le post et je vais faire la même chose avec mes autres messages. Gardons-le à deux lignes de texte. Et je vais aller à ma page et de l'oxygène, puis des modèles. Je vais éditer le modèle de billets de blog avec, avec de l'oxygène. Et comme vous pouvez le voir, mes extraits, extraits sont beaucoup, beaucoup plus petits en ce moment. Bien sûr, chaque fois que vous sélectionnez un cours différent, un cours différent, je suis toujours sur les messages faciles. Les publications utilisent un dif, préréglage différent. Alors peut-être allons-y, allons-y avec une liste avec des rectangles, chevauchement, chevauchement centré. C' est un blog assez populaire, la conception de blog. Alors gardons celui-là. Donc maintenant, quand ce type a activé ce préréglage, on pourrait aller à des styles. Et nous ne pourrions pas changer certaines choses sur notre conception de notre, de notre bloc, les deux réels, mais peut-être faisons-le. Commençons à le faire dans la prochaine vidéo. 53. 10.5D'indignez les publications du blog: Alors maintenant que nous avons nos messages, commençons à les coiffer. Alors je vais aller aux styles et passons au titre. Disons donc que je voudrais changer la couleur de mon, de mon titre. Et je vais aller avec peut-être avec ma couleur par défaut, ce gars juste ici. Et disons que je voudrais changer la taille de la police. Mais comme vous pouvez le voir, quand nous commençons à faire ça, eh bien, rien ne se passe vraiment. Eh bien, c'est parce que certaines d'entre elles, certaines de ces options de style, même si elles sont ici, vous ne pouvez pas vraiment voir et aimer l'effet parce que les étoiles qui sont, qui sont comme codées manuellement ou prenant la priorité sur ce que nous pouvons faire ici. Donc, par défaut, à titre d'exemple, si nous allons aux modèles, puis Template CSS. Maintenant, il y a beaucoup de code ici, mais ne devrait pas en avoir peur. Si vous commencez juste à lire les noms de toutes ces classes, vous pouvez voir qu'ils sont fondamentalement, je veux dire, ils sont assez logiquement nommés. Donc, par exemple, ce type ici, le titre de poste OCC, vous pouvez voir qu'il a cette taille de police, 1,5 m d'espace. Donc on pourrait changer la taille ici. Par exemple, si nous allons à comme 2.5 et puis appuyez sur Appliquer le code, vous pouvez voir qu'il est en train de changer. Cependant, vous pouvez également simplement saisir cette taille de police. Il suffit de le supprimer. Si vous le souhaitez, appliquez le code. Et maintenant, si nous allons à, si nous revenons à nos styles, puis le titre et la taille de la police, si nous tapons maintenant comme, je ne sais pas, 66, vous pouvez voir que ce n'est en fait pas de changement dans notre titre. Donc je ne veux pas que ce soit si grand. Allons-y avec 46. Cela devrait, va les écrire comme 42. Ça devrait être bien. Je vais le sauver. Laisse-moi juste cacher ce type une seconde. Donc ce serait notre titre. Et bien sûr, nous pouvons, vous pouvez le rendre plus grand, vous pouvez le rendre plus petit et plus petit. Ça va être totalement, totalement à vous maintenant. Mais ce qui est le plus important ici, c'est que parfois si vous ne voyez pas le changement quand vous êtes comme ajuster certains aspects de votre billet de blog réel, c'est très probablement parce que vous, vous, vous allez devoir aimer vérifier le code lui - même afin d'apporter ce changement spécifique et spécifique. Ensuite, nous avons des métadonnées. Et voyons si nous pouvons changer la taille de la police ici. Faisons 36. Pas vraiment. Mais peut-on changer la couleur ? Changons-le à l'autonomie. Ce gars juste là. Eh bien, nous pouvons changer cette question ici. Ceci votre design, l'auteur, le nom de l'auteur. Peut-être faisons-le comme ce gris clair. Peut-être. Peut-être allons-y avec ça, ce gris. Et encore une fois, nous pouvons voir afin de changer la taille si nous le voulons, je vais aller à nouveau, modèles, modèles, CSS. Et c'est ce gars juste là. Je vais juste supprimer cela, j'ai appliqué le code. Et puis quand nous venons de rafraîchir que, quand nous allons à nos messages faciles styles Mehta, Nous pouvons maintenant changer la taille de police de notre, de nos métadonnées Meta. Mais bien sûr, je ne veux pas que ce soit aussi grand. 16 est encore trop grand. Voyons voir, dix. Ou 12. Donc, comme vous pouvez le voir, ce n'est pas il n'y a rien à craindre si vous ne voyez pas, des changements pris, pris effet. Et tu ne devrais pas avoir peur du code que tu viens de voir. Toutes ces classes sont vraiment logiquement nommées. Et, vous savez, c'est juste une question de trouver quelque chose qui sonne logiquement et qui est probablement responsable du changement dans certains aspects que vous voyez ici. Voyons maintenant ce que nous pouvons faire à propos du contenu. Voyons si nous pouvons changer la taille de la police. Nous pouvons changer la taille de la police ici. Alors faisons-moi comme 14 ans. Ça devrait être correct. Je vais aller avec ma couleur par défaut. Et puis nous allons vérifier le Read More. Ainsi, comme vous pouvez le voir, il peut s'agir d'un bouton ou d'un simple lien. Alors changeons la couleur du texte pour peut-être notre couleur brune. Pourquoi pas ? Nous n'allons pas utiliser une boîte sur la taille de la police. Rendons-le juste un peu plus grand. Et on y va. Nous avons fondamentalement changé la conception de notre blog, blog post réel. Mais bien sûr, vous savez, il peut y avoir quelques changements que vous aimeriez implémenter, mais ils ne sont pas disponibles ici dans les styles. Par exemple, cela, ces données ne bouton Date ici, ou peut-être comme l'arrière-plan. Et si vous ne pouvez pas voir ces options ici, il vous suffit d'aller à ce modèle, CSS. Et par exemple, disons que vous aimeriez changer comme ce bouton ici. Et vous pouvez voir que c'est ce gars juste ici. Ok, supposons que la superposition de la date de l'image et que c'est cette date en cours de superposition. Et vous pouvez voir que nous avons eu, avons la position, avons obtenu le haut et la droite et la valeur de la taille de la police. Donc, disons que vous voulez changer la taille de la police. Faisons comme juste pour que vous puissiez voir le changement moins comme 26 pixels. Et puis je vais juste appuyer sur Appliquer le code. Et puis vous pouvez voir que notre rendez-vous change et maintenant c'est beaucoup trop grand, mais, vous savez, ça marche. Donc, je vais revenir à ma valeur précédente. Faisons quelque chose comme 0,9 m d'espace. Et je vais appliquer le code pour avoir ces données à la recherche, ressemblant à ceci. Vous pouvez également modifier la couleur d'arrière-plan si vous le souhaitez. Donc je vais peut-être emprunter ce type. Et je vais juste taper quelque chose de simple comme lire, peut-être et appliquer le code. Et vous pouvez voir qu'il a été vérifié, changeant. Ou on pourrait me faire comme entrer en collision jaune. Voyons voir. Et appliquons le code. Et comme vous pouvez le voir, ces couleurs changent instantanément. Et les noms de ces couleurs sont fondamentalement simples sss, sss, sss noms. Si vous cherchez juste des noms de couleur CSS, nous allons, cherchons pour cela. On peut aller dans les écoles du W3. Et vous pouvez voir que nous avons toutes nos couleurs qui, vous savez, si vous ne voulez pas apprendre Xcode, donc vous ne voulez pas utiliser les codes hexadécimaux. Vous pouvez utiliser ces noms. Disons, je ne sais pas, allons avec comme vous êtes tellement au lieu de jaune clair, faisons ce que nous étions. Appliquer le code et cette couleur change. Je vais revenir à mon dessin original que j' ai copié avant. Et on y va. Maintenant, bien sûr, si vous voulez garder tous ces changements, c'est une bonne idée d'enregistrer votre préréglage. Alors voyons ça. Disons que je veux le changer car je ne connais pas mon préréglage de blog et je vais le sauvegarder parce que, parce que maintenant, quand nous avons essayé de ne pas utiliser d'autres presets, allons-y avec celui-ci. Et puis on saura qu'on a décidé que, oui, je crois que je préfère un. Alors passons à MyBlock préréglage. Et comme vous pouvez le voir, nous avons notre, notre blog, préréglage de blog fonctionne correctement. Et bien sûr, si on va à notre page principale, rafraîchissez ce gars. Vous pouvez voir que nous avons nos billets de blog, page de blog prêt. Mais que faire si nous cliquons sur l'un de ces messages, l'un de ces messages ? Vous pouvez voir que, oui, nous avons le contenu, mais ce contenu, il n'a pas été correctement stylé. Alors, comment pouvons-nous réparer ça ? Eh bien, nous devrions juste construire notre modèle de post unique pour cela. Et c'est ce que nous allons commencer à faire dans la prochaine vidéo. 54. 10.6Ajoutez le modèle d'article unique: Ok, nous avons notre page de blog, créé, notre blog réel pager créé. Mais si on veut voir ? Que faire si vous voulez lire l'un des articles de blog ? Donc, si on prend notre adresse, je vais passer à notre mode Incognito comme d'habitude. Et je vais, et blog. Et je vais cliquer sur n'importe lequel d'entre elles. Vous pouvez voir ça, eh bien, ce n'est pas ce que vous voulez. Ce n'est pas ce que nous voulons voir. Je veux dire, ce contenu de ce post spécifique est en cours de sortie, mais il n'a pas été stylé. Et c'est pourquoi nous devons créer un blog, un seul blog, poster un modèle. Donc ce que je vais faire, c'est aller aux modèles d'oxygène. Je vais ajouter un nouveau modèle et je vais l'appeler single post. Et je vais choisir le singulier. Dans le monde fait ce modèle d'application. Et je vais choisir tous les types de messages et je vais publier ceci. Et quand nous appuyez sur edit avec de l'oxygène, nous allons être en mesure de styliser notre modèle, mais comme vous pouvez le voir, ce n'est qu'une page blanche. On n'a rien. Et je voudrais avoir le même pied de page et le même en-tête que dans le cas de notre modèle de billet de blog. Donc, si vous ne voulez pas hériter de ce design de votre modèle précédemment créé, mais que vous souhaitez utiliser certaines parties de celui-ci. Voici ce que vous pourriez faire. Vous pourriez aller à des modèles d'oxygène et ensuite nous avons eu ce modèle ici, des billets de blog. Et je vais l'éditer avec de l'oxygène. Et ici, je vais aller à ma structure. Et je vais cliquer sur cet en-tête parce que je veux le réutiliser. Et quand nous allons cliquer sur ce menu, je vais cliquer sur cette option rendre réutilisable. Et je vais l'appeler tête de soufflage. Alors on y va. Et puis je vais aller à mon pied de page. Ce gars juste là. Je vais faire ça. Je vais cliquer rendre réutilisable. Et je vais l'appeler pied de page de blog et cliquez sur OK. Je vais le sauver parce que j'aime le dire souvent. Et je vais retourner à mon panneau d'administration. Je vais aller de l'avant et choisir Modèles. Et comme vous pouvez le voir, nous avons ces deux pièces réutilisables juste ici que nous pourrions l'ajouter aussi avec de l'oxygène, mais ce n'est pas ce que nous voulons faire. Nous voulons éditer nos modèles de publication unique. Je vais frapper Edit avec de l'oxygène. Et cette fois, je vais choisir Ajouter. Et ici, vous pouvez voir cette partie. Et cela dit réutilisable. Si nous cliquons dessus, nous avons obtenu notre pied de page de blog et notre en-tête de blog. Je vais cliquer dessus. Et je vais choisir single puisque, eh bien, nous pourrions utiliser modifiable ce qui rendrait nos pièces réutilisables modifiables si vous vouliez le changer, mais je ne veux pas le changer. Je veux juste le mettre sur mon site. Et puis je vais alors je vais ajouter un autre, pied de page de bloc et simple. Et on y va. On a notre poste réutilisable. Ce pied de page réutilisable, nous pourrions peut-être changer son nom, allons le renommer simplement Pied de page. Je n'ai pas besoin de ce morceau. Et pour l'en-tête, je vais renommer ce type aussi. Et je vais l'appeler en-tête. Et en gros, nous avons nos pièces réutilisables. Donc nous avons, nous avons emprunté notre en-tête et notre pied de page de notre modèle précédent. Et c'est juste une autre façon d'emprunter des parties d'autres modèles. Si vous ne souhaitez pas baser votre modèle entièrement sur un, sur un modèle que vous avez précédemment créé. Donc nous avons notre en-tête, nous avons notre pied de page. Maintenant, il est temps d'ajouter les messages de blog à l'intérieur maintenant entre notre en-tête et notre pied de page. Alors passons à ça. 55. 10.7Ajoutez les éléments principaux de post: Donc, je vais commencer comme d'habitude en ajoutant une section. Donc, je vais juste taper la section et je vais en mettre une juste ici. Maintenant, je pense que le design que nous allons adopter sera basé sur deux colonnes à gauche, nous allons voir notre image vedette, notre titre, la taxe sur nous allons voir notre image vedette, notre titre, les métadonnées et toutes ces choses qui sont généralement pour un seul, simple, unique blogposts. Et à droite, nous allons ajouter peut-être comme une biographie d'auteur, peut-être comme les derniers messages ou des choses comme ça pourraient être des tags ou des catégories. Le blog habituel, articles de blog trucs. Donc, dans cette section, je vais ajouter des colonnes. Et allons-y peut-être, laisse-moi penser à Omega. Commençons par seulement deux colonnes, comme 60-40. Mais peut-être que nous allons changer la taille pour peut-être comme Arno, 65, 35 à 40 ans pensent. Ou peut-être même 67. Gardez-le 67. Ce type aura 333 ans. Donc je vais appeler ça div. Laisse-moi appeler ce gars comme billet de blog. Et à droite, je vais appeler ce type barre latérale. Ça va être notre bar latéral. On y va. Donc avant de commencer à ajouter quoi que ce soit ici, nous devons comprendre une chose. Le contenu que nous allons ajouter ici ne sera pas comme aucun contenu tiré de chaque billet de blog. Pour le faire fonctionner, ce que nous devons faire, c'est utiliser les données dynamiques. Donc, fondamentalement, nous allons dire à l'oxygène de simplement importer un peu d'informations spécifiques de la base de données et de le faire dynamiquement. Et selon le type de publication ou de publication, nous voulons prévisualiser que le contenu spécifique sera retiré de la base de données. Donc, ce que nous pouvons faire est d'abord, bien sûr, je vais cliquer sur cette couche avec le billet de blog. Et on veut faire comme, Hey, faisons comme une image. Et puis faisons un titre de billet de blog. Et puis faisons quelques métadonnées, puis le contenu du blog. Donc je vais faire ce que je vais faire, c'est chercher une image. Et nous pourrions, bien sûr, non, si vous vouliez le rendre statique, nous pourrions simplement ajouter une image. Laissez-moi simplement l'enregistrer et le rafraîchir parce que parfois l'oxygène ne veut pas vraiment me montrer les images. Donc on pourrait avoir une image comme celle-ci, mais on veut la rendre dynamique. Donc, au lieu de simplement cliquer sur le navigateur et d'ajouter une image, je vais juste m'en débarrasser. Je vais m'en débarrasser. Et je vais cliquer sur ce bouton Données. Et ici, vous pouvez voir que nous avons obtenu ce post option image vedette juste ici. Et si nous cliquons dessus, nous pourrions choisir des valeurs spécifiques pour notre taille. Je vais juste appuyer sur insert. Je vais sauver ça. Et choisissons un aperçu de l'un de nos messages, peut-être celui-ci. Et voilà. On a une image en vedette. Si nous en prévisualisons un autre, cette image va changer. Nous avons donc notre image en vedette. Maintenant, ajoutons un titre. Donc, je vais ajouter un titre. Ensuite, nous allons et ici, et nous allons en double-clic sur ce titre. Et ici, vous pouvez voir que nous avons eu ce champ de données d'insertion. Alors je vais cliquer dessus. Et ce sera notre titre de poste. Donc je vais cliquer dessus. Et nous ne voulons pas le lier parce que c'est déjà dans notre titre de post, donc nous ne voulons pas lier à un autre post, certains sont partis, je clique sur Insérer. Et comme vous pouvez le voir, ce titre est extrait de notre base de données. Et bien sûr, nous pouvons inculquer le style comme vous, comme nous le voulons. Ajoutons une classe à cela. Alors appelons ça le titre du poste. On y va. Et peut-être augmentons un peu la taille de la police. Quelque chose comme 42. Ça devrait être bien. 42 va vérifier le changement de la balise de H1 à H2. Et peut-être allons à la typographie et jouer avec la hauteur de ligne sont généralement commencer par un. Et puis essayons 1.1 ou peut-être même deux sur la droite. Cela devrait être, ça devrait être bien. Et bien sûr, une fois que nous commençons Preview et nos, nos messages, vous pouvez voir que ce titre est en train de changer. L' image en vedette est en train de changer. Tout a l'air comme il se doit. Bien sûr, peut-être qu'on pourrait ajouter un peu d'espace. Ambulance humaine va avec, disons avec dix pixels de marge ou 20 pixels de marge. Et peut-être faisons la même chose pour le haut et le bas, parce que maintenant, Adnan, en bas, nous allons ajouter des métadonnées comme Meta, mais commençons à le faire dans la prochaine vidéo. 56. 10.8Ajoutez le contenu: Donc je vais prendre, je vais en prendre un, allons juste y aller et juste utiliser du texte simple. Je vais cliquer dessus. Et encore une fois, je vais cliquer à l'intérieur. Et je vais aller de l'avant et choisir Insérer des données. Et choisissons peut-être, peut-être le nom de l'auteur. Faisons-le comme ça. Je vais insérer ça. Et je vais sauver ça. C' est donc notre auteur ici. Mais bien sûr, ce que nous pourrions faire est que nous pourrions peut-être taper écrit ou posté par. Nous allons faire posté par. Et on y va. Si nous sauvegardons cela, vous pouvez voir que seulement que ces données dynamiques ont été extraites de la base de données avec ceci est le nom de mon auteur et nous pouvons simplement ajouter n'importe quoi sur le côté. Et bien sûr, nous pourrions aussi le styliser. Alors peut-être que je vais y ajouter un cours. Appelons ça post meta. Méta. On y va. Et peut-être que nous allons changer la taille de la police est quelque chose comme 12. Et la couleur du texte, peut-être allons-y avec un peu de couleur gris clair. On y va. Et peut-être que nous pourrions aussi ajouter comme une date sur le côté. Alors je vais juste reproduire ce type. Et encore une fois, cliquez à l'intérieur. Et peut-être que cette fois nous allons taper, cette fois nous allons taper quelque chose comme si ça allait être posté par votre design. Et puis nous allons et cette fois, au lieu de cela, au lieu de cet auteur de données d'oxygène, nous allons choisir une autre, une valeur de données dynamique différente. Donc je vais aller à Insérer des données, et choisissons juste la date et l'insertion. Et comme vous pouvez le voir, ces données sont reflétées. Réfléchi ici. Je pense que j'ai un support pour beaucoup. Et on y va. Nous nous sommes vantés d'un le 20 septembre 2020. Mais bien sûr, ces gars, je pense qu'ils devraient être les uns à côté des autres. Ce qu'on pourrait faire, c'est prendre notre premier texte. C' est notre nom d'auteur. Et je vais cliquer sur ce menu et je vais l'envelopper avec div. Alors je vais prendre mon rencard et le mettre dans cette div. Et cela, cela nous permettra de grep cette div et de contrôler le positionnement des morceaux d'information qui sont mis à l'intérieur de cette div. Donc, ce que je vais faire, c'est que je vais choisir les éléments enfants de pile horizontalement à partir de mes éléments enfants de mise en page. Quand on clique dessus, on voit que ça et ces gars vont côte à côte. Et encore une fois, je vais aller à ma classe et aller avec espacement côté1 et peut-être ajouter un peu d'espace de marge à droite. Et on y va. On a nos métadonnées ici. Et maintenant, ce qui est cool, c'est que nous pourrions ajouter différents éléments ici à côté de nos données dynamiques. Par exemple, si nous attrapons notre div et choisissons ajouter, choisissons une icône. On y va. Et trouvons une icône. Peut-être que ça va être comme une personne comme ce gars. Et nous allons le rendre plus petit, comme 12 pixels, peut être 14, peut-être 16. Et changeons la couleur. Mais je ne me souviens pas vraiment de la couleur du gris atomique. Alors attrapons notre icône. Et pour la couleur, allons-y avec le temps. Croyez que c'était ce type ou peut-être ce type. C' est ce que deux, super. D'accord. Je ne veux pas passer trop de temps à choisir, à choisir cette couleur. Oui, je pense que c'est un raisin atomique. Et je vais bouger ça. Je viens jusqu'à l'avant. On y va. Et puis je vais me marier, je vais juste le dupliquer. Et je vais le déplacer ici, donc c'est juste là. Et puis à côté de ce texte de septembre. Et peut-être que je vais juste me débarrasser de celui-là. Texte. On y va. Et je vais changer cette icône. Essayons de trouver quelque chose comme un calendrier peut-être. Voyons si on a ça ici. On en a, on a du temps. Peut-être allons-y avec cette icône de l'horloge. On y va. Et peut-être que je vais juste prendre mon texte. Je veux, je veux cibler ce cours. Et je vais ajouter un peu d'espacement sur la gauche aussi. Et quand je prends mon div en ce moment, vous pouvez voir que le, ces, ces icônes et le texte, qu'ils ne sont pas alignés correctement, je veux les aligner sur les expéditeurs. Ainsi, lorsque nous choisissons l'alignement vertical au milieu, vous pouvez voir que ces icônes apparaissent à droite en place. Nous pouvons donc, nous avonsune flexibilité complète et complète en ce qui concerne la création de notre modèle et, une flexibilité complète et complète en ce qui concerne la création de dans ce cas, notre boîte de métadonnées. Donc, l'étape suivante serait juste d'ajouter comme un contenu réel. Donc ce que je vais faire, c'est que je vais ajouter du texte. On y va. Et encore une fois, je vais juste double-cliquer, insérer des données et publier du contenu. Et on va sauver ça. Et comme vous pouvez le voir, mon contenu est sorti directement, directement ici à l'intérieur, à l'intérieur de l'oxygène. Mais bien sûr, c'est une bonne idée de le mettre là où il doit aller. Donc je ne vais pas le mettre ici. Et on pourrait peut-être le coiffer un peu. Encore une fois, je vais créer un contenu de sondage de classe. Et ajoutons peut-être un peu de rembourrage à ce gars. Pas trop, peut-être comme 12 pixels autour. Ça devrait être bien. Et bien sûr, si vous voulez, vous pouvez changer le texte à l'intérieur ici. Vous pouvez le coiffer comme vous le souhaitez. Mais, tu sais, c'est, ça va être totalement à toi de décider. Ce que je veux faire, c'est que je veux sauver ce type, ce modèle. Et je vais aller sur ma page. Et comme vous pouvez le voir, ma vantation est d'être joliment, joliment affiché ici. Et bien sûr, si je vais à ma page de blog et cliquez sur l'un de ces gars, ce modèle est en cours, est affecté à tous mes, tous mes messages. Et je n'ai plus à m'inquiéter du stylisage, moins en termes d'ajout de mes données dynamiques et dynamiques. Maintenant, pratiquons nos données dynamiques. Prenons soin de la cybernétique. Ajoutons quelques informations sur le propriétaire du blog. Et ajoutons quelques catégories. Peut être quelques derniers messages insemblables. Toutes ces choses que nous pouvons faire avec des données dynamiques ici à l'intérieur de l'oxygène. 57. 10.9Créer les informations de l'auteur: ce moment, commençons à créer notre barre latérale et commençons par ajouter un nœud comme une inflammation bio. Donc je vais ajouter une image et du texte à côté. Donc je vais prendre un module d'image. Je vais éditer l'image. On y va. Et je vais parcourir ma médiathèque. Laisse-moi, maman, je vais juste choisir cette image. Je vais le sélectionner. Et encore une fois, je vais le sauvegarder et rafraîchir ma page. Et passons un aperçu du texte. Et cette image est beaucoup trop grande. Voyons, peut-être comme 75 ou 100. Ce serait bien. Et ce que je veux faire, c'est que je veux ajouter du texte sur le côté. Donc, je vais ajouter le texte. Mais comme vous pouvez le voir, il a été mis sous notre, notre image. Laisse-moi prendre un peu de Lorem Ipsum. On y va. Prenons juste un peu de ça. Et je vais coller ce m ça devrait suffire. Peut-être allons-y juste et un espace. Alors, comment faire réellement ce morceau de texte flottant vers la droite ? Ce que je ferais, c'est que je prendrais cette image et je l'envelopperais avec un div, mettrais ce texte à l'intérieur de ce div. Et avec le silicate div, cette couche sera-t-elle sélectionnée, je choisirais simplement les éléments enfants de pile horizontalement. Et bien sûr, on pourrait ajouter du contenu comme, je ne sais pas, salut, je suis Jenny. Allons-y. Faisons-le comme ça. Et nous pourrions peut-être aimer déplacer ce contenu un peu sur le côté. Donc ce module de texte sélectionné, je vais aller à Taille avancée et espacement et je vais ajouter une marge sur la gauche comme dix pixels. Ça devrait être correct. Maintenant, une autre chose que je pense, importante à comprendre lors de la création de morceaux de contenu comme ça est que quand vous êtes alors certains, certains impôts comme dans un module de texte, vous pouvez toujours juste manipuler le style, juste un morceau de ce texte sans ajouter d'autres, aucun autre module. Par exemple, si j'ai eu ce salut, je suis Jenny, un message. Ce gars juste là. Laisse-moi juste taper le premier bonjour, je le suis. Jenny. Qu' est-ce que nous pourrions faire, c'est que nous pourrions simplement sélectionner ce morceau de texte et choisir ce composant de span. Donc, en ce moment, quand nous allons à notre texte, vous pouvez voir que nous avons un autre calque appelé span. Et ce que nous pourrions faire, nous pourrions juste changer ce seul morceau de texte tout en étant dans un module de texte plus grand. Donc nous pourrions le faire, nous pourrions changer la couleur du texte, vous pourriez changer ce texte, la taille du texte. Laisse-moi aller peut-être à la typographie. On pourrait peut-être changer une hauteur de ligne à nouveau vers 1,1. Et nous pouvons peut-être le transformer en majuscules juste comme ça, ce qui nous ferait, rendre la taille de police juste un peu plus petite à quelque chose comme 20. Ça devrait être correct. Et nous pourrions même peut-être saisir ceci, supprimer cet espace de paragraphe juste ici. Mais quand nous allons à notre portée, nous pouvons saisir la taille et l'espacement et nous pouvons facilement manipuler cette taille, cet écart de marge entre ces morceaux de texte. Donc, chaque fois que vous voulez et simplement styliser un morceau de texte dans un texte, vous pouvez simplement sélectionner ce morceau de texte et utiliser ce composant de span ici. Maintenant que nous avons notre configuration bio info, peut-être commençons à ajouter d'autres composants ici. Peut-être comme certains derniers messages ou catégories, toutes ces choses standard de la barre latérale. 58. 10.10Ajoutez les icônes des réseaux sociaux: Alors commençons à compléter notre barre latérale peut être d'abord avec quelques icônes de médias sociaux. Comme nous voulons que les utilisateurs suivent notre auteur de blog sur les plateformes de médias sociaux. Mais je suppose que ce serait une bonne idée d'avoir une sorte de titre devant nos icônes qu'il pourrait dire comme suivez-moi ou quelque chose comme ça. Alors faisons ça. Donc, d'abord, je vais ajouter un titre et je vais changer à la balise pour peut-être comme H3. Et je vais taper quelque chose comme venir me suivre. On y va. Mais je suppose que ce serait une bonne idée de garder les choses bien organisées. Je veux dire, pour garder les choses cohérentes, peut-être comme cette période ici, ce titre pourrait être le même que celui-ci. Voyons comment on pourrait faire ça. Je suppose que la meilleure idée serait d'ajouter une classe. Mais puisque nous avons déjà ajouté quelques options, quelques sélecteurs ici pour cette plage et pour cet ID, nous devrions normalement changer toutes ces valeurs comme la taille de la police, la hauteur de la ligne, la couleur de cette majuscules, réglage, toutes ces choses, puis ajoutez-les simplement à une classe. Mais ce que nous pourrions aussi faire, c'est que nous pourrions simplement copier toutes les valeurs qui sont assignées à notre, à notre ID dans ce cas, et les déplacer. Voyons comment ça fonctionnerait. Donc, disons que nous voulons changer cette police pour cette police d'affichage Bree Serif. Et nous allons peut-être définir la hauteur de la ligne à 1.1. Comme ça. Peut-être augmentons l'espacement à 1010 pixels. Donc, pour l'instant, toutes nos valeurs sont assignées à un ID. Donc, créons une classe qui va être appelée comme Headbar Sidebar, comme ça. Et bien sûr, en ce moment, quand nous sommes dans cette classe, nous n'avons fondamentalement aucune valeur qui lui est attribuée. Donc ce que je vais faire, c'est que je vais attraper ça. Je vais ouvrir ce panneau ici et je vais choisir des styles de copie dans un autre sélecteur. Donc je vais cliquer dessus. Et puis je vais cliquer sur cette icône juste ici sur l'en-tête de la barre latérale qui dit les styles de copie ici. Et en ce moment, toutes ces valeurs sont copiées dans mon, dans ma classe. Donc, maintenant ce que nous pourrions faire, c'est nous débarrasser de tous ces éléments ici. Ainsi, la typographie, les valeurs typographiques par exemple, ou la marge. Donc, ce que nous pourrions faire, c'est que nous pourrions simplement ouvrir ce panneau et choisir Supprimer l'huile de tous les styles de ce sélecteur. Oui, je veux supprimer tous ces styles parce que j'ai obtenu, je les ai appliqués à ma classe. Et si je viens de sauvegarder cela et de rafraîchir ma page, vous pouvez voir que j'ai mon, j'ai eu mon cette étoile, tous ces styles, grâce à ma classe, appliqué. Peut-être que je vais juste changer le poids de police deux parce que je suis presque sûr que ce poids de police sera plus grand que celui-ci. Donc maintenant, si nous ajoutons simplement cette classe Sidebar Heading à notre barre latérale, vous pouvez voir qu'elle a bien été reflétée ici. Je suppose qu'on pourrait peut-être ajouter un peu d'espacement entre ces deux éléments. Donc je vais juste faire venir ce type ici. Et maintenant, nous pourrions ajouter les icônes des réseaux sociaux sous notre rubrique. Ce que nous pourrions faire, c'est que nous pourrions ajouter un simple module appelé icônes sociales. On y va. Mais pour être honnête, je ne suis pas le plus grand fan de ces icônes ici. Donc, je vais juste supprimer ce module et laissez-moi vous montrer une façon différente d'ajouter des icônes, comme, comme, les icônes sociales juste ici. Donc ce que je vais faire, c'est que je vais juste ajouter une icône comme ça. Et laissez-moi juste enlever ce gars, nous allons, tapons Facebook. Celle-là, juste là. Et je suppose qu'à ce stade, ce serait une bonne idée d'ajouter une classe à notre propre pays. Donc je vais me débarrasser de la taille et de la couleur. Et maintenant, nous pouvons ajouter une classe, appelons-le comme icône latérale. Et nous pouvons changer la taille pour, voyons, 3-6 distribué l'espace arrivé autour de l'icône. Voyons dix. On a peut-être changé la couleur pour peut-être cette couleur grise. Pourquoi pas ? Alors maintenant que nous avons tous ces attributs appliqués à notre classe, quand nous dupliquons cette icône, bien sûr, tous ces éléments seront affectés à cette icône et tout ce que nous avons à faire est de changer l'icône en, disons Twitter. Peut-être celui-là. Et comme vous pouvez le voir, cette icône est maintenant, eh bien, elle a toutes les mêmes valeurs que notre icône précédente. Mais nous aimerions pouvoir cliquer sur notre propre. Avant de le faire, avant de cloner la première icône de la mine, je vais l'envelopper d'un lien. Donc, ce que nous pourrions faire quand toute cette icône est active, je vais aller dans mon panneau Outils ToolPak, et je vais cliquer sur les paramètres de ce lien. Lorsque nous cliquons dessus, vous verrez cette option de lien d'édition d'insertion. Et pour l'instant, je vais juste taper les hashtags et le symbole, un symbole de livre, juste pour en faire un espace réservé aux liens. Et je vais cliquer sur Ajouter un lien. Et en ce moment, dans mon panneau Calques, vous pouvez voir que j'ai eu ce wrapper de liens avec une icône pour s'asseoir à l'intérieur. Laissez-moi juste prévisualiser à nouveau un post normal, normal. Et maintenant, nous pouvons réellement dupliquer un, cet emballage de lien entier et changer de nouveau l'icône. Alors appelons-le. Tapons Twitter, peut-être cette icône. Et bien sûr, ce que nous devons faire c'est de mettre ces gars l'un à côté de l'autre, mais nous savons déjà comment le faire. Donc, je vais juste envelopper ce premier wrapper de lien avec un div. Et mettez ce second wrapper de lien à l'intérieur et faites tous ces éléments enfants à empiler horizontalement. Donc, je suppose que la dernière chose serait peut-être de changer la couleur de l'icône sur le vol stationnaire. Et disons que nous aimerions que la couleur du vol stationnaire corresponde à la couleur de la marque. Donc, ce que je ferais c'est que je prendrais une icône et m'assurerais que je ne suis pas sur la, sur la, sur la classe. Et je choisirais l'ID. Et maintenant ce que je ferais est que je cliquerais sur cette option d'état juste ici qui me permettra d'imiter comme le, le style quand, par exemple, mon icône est hubbard. Donc, si je clique sur cette option de vol stationnaire, si nous changeons maintenant cette couleur pour plus comme un collier Facebook façon, ce qui serait je suppose, une sorte de couleur bleuâtre. On va peut-être faire quelque chose comme ça. Ça devrait être sur la droite ? Et maintenant, si je reviens à mon état d'origine, si je passe la souris sur cette icône, vous pouvez voir qu'elle change réellement dans sa, sa couleur. Et nous pouvons faire de même pour notre icône Twitter. Donc encore une fois, un état d'ID, puis survolez. Et pour la couleur Nicholas, juste cette couleur bleue, je suppose que c'est Twitter comme Twitter et je reçois, je vais aller à l'original. Et vous pouvez voir que cette couleur change. Peut-être que je vais ajouter, je vais sélectionner une icône et sélectionner la classe. Peut-être que je vais choisir quelque chose comme une marge sur la droite et clignoter dix pixels, ou peut-être cinq. Ça devrait suffire. Et fondamentalement, tout ce que nous aurions à faire en ce moment, c'est juste de dupliquer notre wrapper de liens. Et peut-être une fois de plus. Dupliquer. Et changeons cette icône pour peut-être aimer Instagram. On y va. Et la dernière icône, changons-la peut-être pour YouTube. Peut-être cette icône. Et bien sûr, moins d'oublier que nous avons cet état de vol stationnaire copié. Donc, pour la couleur YouTube, changeons la couleur du survol. Peut-être cette couleur rouge, y rien, ou peut-être cette couleur rouge. Et pour l'icône Instagram, changeons la couleur du vol stationnaire de ce bleu en fait peut-être ceci, peut-être cette couleur rose comme ça. Donc maintenant, chaque fois qu'un utilisateur passe au-dessus de nos icônes, que les appelants qui vont plus ou moins représenter réel correspondent aux couleurs de la marque de tous ces médias sociaux, les plateformes de médias sociaux. Et bien sûr, si vous voulez, vous pouvez jouer avec la taille de toutes ces icônes. Ils peuvent être plus petits. Cependant, comme, la marge peut être plus grande, comme peut-être 15. Ça va être totalement, totalement à toi qui ? Parce que nous avons ajouté une classe à nos icônes, vous pouvez facilement, vraiment facilement contrôler. Et fondamentalement tous les, tous les aspects de notre, de nos articles. Donc maintenant, nous pourrions peut-être réellement passer à ajouter comme certains savent les derniers messages ici sous le Follow me et peut-être une icône de recherche sur le dessus. Alors passons à ça. 59. 10.11Ajouter les derniers articles: Nous allons maintenant peut-être ajouter un formulaire de recherche avant d'ajouter nos derniers messages. C' est donc aussi facile que de cliquer sur Ajouter puis de rechercher le formulaire que nous allons. Et comme vous pouvez le voir, nous avons quelques options de base, de base, vraiment basiques, que vous pouvez définir pour votre boîte de recherche. Je vais changer le bouton de soumission de ceci. Ce très sombre, sombre, gris foncé, peut-être quelque chose de plus léger comme mon Gray. Peut-être celle-là ou peut-être celle-là. Et peut-être ajoutons un peu d'espacement à vie autonome comme 25. Ou peut-être que c'est un peu trop comme 15 en haut et en bas. Maintenant, nous pourrions juste reproduire notre rubrique. Duplions ce gars et mets-le sous notre cabinet de recherche. Et appelons-le au plus tard. Et je vais sauver ce type. Bien sûr, si vous le vouliez, vous pourriez peut-être saisir le formulaire de recherche et le ramener ici, ou peut-être simplement dupliquer ce titre et ensuite déplacer ce formulaire de recherche et appeler ce site de recherche. Ça va être totalement, totalement à vous de décider. Alors maintenant, il est temps d'ajouter ces derniers messages. Donc ce que je vais faire, c'est que je vais ajouter mon module de messages faciles. Et ce serait une bonne idée de le déplacer sous ma rubrique. Et comme vous pouvez le voir par défaut, cela ressemble plus ou moins à ceci. Si on sauve ce type, c'est à ça que ça ressemble. Donc, ce que nous pouvons faire, c'est nous pouvons saisir notre module de poste facile. Et peut-être allons d'abord à notre requête. Et au lieu de l'option par défaut, nous allons utiliser une requête personnalisée. Et ce que je veux faire, c'est que je veux changer l'ordre. Je veux le commander par date, et je veux le faire descendre. Donc, mes derniers messages sont affichés comme les premiers. Et je vais changer le compte pour, disons peut-être juste les repos. Je ne veux pas avoir plus de trois messages sont affichés dans mon dernier module de messages. Donc, si nous sauvegardons cela, vous pouvez voir que nous avons en fait trois messages sont bien ordonnés, mais ils regardent horriblement, horriblement faux. Alors, changeons ça. Je vais revenir à mes messages faciles et je vais aller à mes presets. Et choisissons une liste avec peut-être comme une image sur la gauche. Et sauvons ce type. Et peut-être que nous allons aussi changer le titre, taille de la police psi pour peut-être 18, et changer la couleur pour ma couleur plus foncée comme celle-ci. Et je vais juste le sauver. Maintenant, quand nous actualisons notre page, nous avons eu nos atouts ici que vous devez vous rappeler que chaque fois que vous modifiez votre préréglage ici, cette requête client risque d'être perdue. Donc, vous aurez juste besoin de refaire l'ensemble du processus. Encore une fois, cela ne fonctionne pas comme ça lorsque vous modifiez simplement les styles, mais lorsque vous changez tout le préréglage, cela peut changer. Maintenant, ce que nous pourrions faire, c'est que nous aimerions aimer le changement ou les extraits, comme vous pouvez le voir, comme cet extrait est beaucoup trop grand. Donc je vais juste changer ça. Et on va aller à mes postes. Et à mon, à mon poste. Je vais juste ajouter ce gars et entendre de mon extrait. Je vais juste choisir, couper ces mecs, supprimer, les affronter. Et quand nous revenons à notre page, vous pouvez voir que disposé est beaucoup, beaucoup plus agréable. Cependant, je pense que nous pourrions vouloir nous débarrasser de certains de ces éléments. Par exemple, je ne pense pas que nous ayons besoin de ce nom d'auteur. Je ne pense pas que nous ayons besoin de ce bouton Lire la suite. Alors comment pouvons-nous faire ça ? Peut-être que nous pourrions même nous débarrasser de l'extrait expert complètement et ensuite laisser le bouton Lire la suite. Nous avons obtenu une flexibilité totale lorsqu'il s'agit de modifier ces aspects. Mais nous devons aimer, pas comme codé ou cellules, mais juste enlever quelques morceaux qui sont très, très logiques et il n'y a rien à craindre. Alors commençons à le faire dans la prochaine vidéo. 60. 10.12Change la structure pour ajuster les derniers postes: Donc, ce que nous devons faire, c'est qu'il nous suffit de prendre nos messages faciles. Et que lorsque nous allons aux modèles, nous avons obtenu cette option de modèle PHP. Nous avons déjà jeté un coup d'oeil au modèle CSS, et maintenant jetons un coup d'oeil au modèle PHP. Maintenant, ici, nous avons quelques quelques quelques extraits de code qui disent fondamentalement cela, eh bien, ce post ce module d'affiche facile pour récupérer quelques informations de la base de données. Mais comme je l'ai dit, nous n'avons pas vraiment besoin de certains de ces éléments. Disons que je vais jeter un oeil à notre, Disons que nous n'avons pas besoin de cet auteur. Comme se débarrasser de ça. Laissons peut-être le titre et le lien Read More. Alors débarrassons-nous de l'auteur et débarrassons-nous de ce texte ici. Donc nous, dans notre cas, nous voulons nous débarrasser de la méta et de cet extrait juste ici. Donc, quand nous regardons ce code, nous pouvons voir que nous obtenons quelques balises assez explicites ici. Donc on a ce titre, on ne veut pas toucher au titre. Ensuite, on a eu la méta et on veut toucher la Metta. Ensuite, nous avons eu un auteur concernant le moment où nous avons obtenu l'extrait et le contenu juste ici. Donc, nous n'avons pas besoin de tous ces éléments, mais nous avons besoin de la classe de départ de OK, supposons rap, c'est un div qui enveloppe tous ces éléments. Donc je vais juste aller de l'avant et enlever cette div qui commence par Oxy post meta. Et je vais descendre jusqu'à ce que je me débarrasse de cet extrait et de cette div de clôture juste ici. Si je viens de couper ces gars et d'appliquer le code, vous pouvez voir que tout ce que nous avons est juste notre titre et notre bouton Read More. Donc si je sauve ce gars et puis retourne sur notre site, vous pouvez voir qu'on a eu et ce genre d' effet comme celui-ci. Et je pense que ça a l'air beaucoup mieux. Bien sûr, nous pourrions toujours aimer fixer l'espacement entre ces éléments et peut-être nous pourrions ajouter une marge sous notre, notre titre. Mais c'est ce que nous devons faire dans le modèle CSS. Donc on a ce poste d'oxy juste ici. Donc, changeons cette valeur inférieure de marge à quelque chose comme essayons 35 pixels. Et je vais juste appliquer le code, le sauvegarder. Et voyons les changements. Vous pouvez voir que c'est maintenant, eh bien, ces messages sont beaucoup, beaucoup plus proches les uns des autres. Alors maintenant, nous allons juste ajouter un peu d'espacement entre le titre et le lien Read More. Essayons donc de trouver notre titre. C' est ce type juste là. Donc, si vous ne voulez rien coder vous-même, vous pouvez simplement sélectionner cette icône de marge inférieure. Je vais appuyer sur Contrôle C. et ensuite on va descendre ici, appuyer sur Entrée, veut ajouter cette ligne de code avant ce crochet de fermeture. Et je vais appliquer le code et voyons ce qu'il fait. Alors peut-être que c'est un peu trop. Alors peut-être que nous allons changer ça un peu. Comme, je ne sais pas, peut-être comme dix pixels. Alors faisons ça. Faisons seulement dix pixels. Mentionne le code. Je vais l'enregistrer et rafraîchir la page. Ça a l'air beaucoup, beaucoup mieux. Et bien sûr, si nous cliquons dessus, nous allons être mis à notre, nous serons en mesure de voir notre post parce que tout fonctionne comme il se doit, parce que c' est notre, c'est nos atouts faciles, facile à la fois à module qui, qui fonctionne avec notre modèle Single Post. Maintenant, peut-être que quand je le regarde, je suis, je suis une chose qu'on pourrait peut-être faire choses à propos de ces rubriques. Je pense qu'ils pourraient avoir plus d'espace en bas. Mais chaque fois que vous faites des changements comme ceux-ci, comme ces changements lourds à vos modèles, comme les modèles de publication faciles, il serait judicieux d'enregistrer votre modèle. Appelons ça l'hormone latérale. Appelons ça les derniers messages. Et sauvons ce type. Et oh, juste pour être sûr que si on gâche quelque chose, on peut toujours retourner là où on était avant. Alors peut-être allons simplement augmenter la taille entre ces éléments. Comme vous pouvez le voir, nous avons ce cours ici. Voyons donc ce que nous pouvons faire en termes de marge inférieure. Voyons comme 25 pixels. Ça pourrait être un peu mieux, mais je pense toujours que ce n'est pas suffisant. Alors peut-être que nous allons juste faire quelques changements simples et simples. Prendons cette div et peut-être Perrin, ce type en bas, et peut-être ce type en bas un peu à quelque part ici. Même chose pour cet élément. Peut-être un peu plus. Laisse-moi prendre cette div. Et encore une fois à un peu plus d'espacement. Et maintenant, voyons à quoi cela ressemble sur notre page lorsque nous actualisons ceci. Je livre, je pense que ça a l'air un peu mieux. Bien sûr encore, nous pourrions jouer avec le style toute la journée, mais c'est, il est plus important d'apprendre comment tous ces éléments fonctionnent parce que c'est beaucoup, c'est beaucoup à prendre en une seule fois. Vous devez vraiment cliquer et vérifier et faire beaucoup d'erreurs juste pour vraiment apprendre comment tout fonctionne vraiment, comment tout fonctionne vraiment, comment tout cela fonctionne vraiment, et pour trouver votre propre meilleur pour le flux de travail. Mais ici à l'intérieur de l'oxygène et vous pouvez vraiment, vous savez, si vous voulez être une flexibilité totale et la liberté en eux, en termes de conception et de faire fonctionner les choses comme vous voulez qu'elles fonctionnent. Eh bien, tu l'as juste là. Donc, nous avons eu les dernières vœux. Peut-être que nous pourrions maintenant ajouter quelques catégories ci-dessous ou des balises, vous savez, des choses comme, des choses comme des choses de barre latérale standard. 61. 10.13Ajoutez le module des catégories: Bon, donc nous avons nos derniers messages ici. Alors maintenant, comme mentionné précédemment, ajoutons cette catégorie. Donc, quand nous allons à notre panneau WordPress puis widgets, maintenant ici vous pouvez trouver ce module de catégories. Mais quand on dit avancé, puis topographie, et par exemple, on veut changer la couleur. Vous pouvez voir que seuls les points de puces changent de couleur. Et puis ces gars ne le font pas parce qu'ils sont des liens et ils doivent être changés. Et ailleurs. Je veux dire, si nous allons à nos paramètres gérés et ensuite quand nous allons à des styles globaux, des styles globaux. Et puis quand vous allez aux liens. Et puis tout ici, quand nous commencerons à changer ça, eh bien, la couleur de ces liens, ils vont changer juste ici. Mais tu sais quoi ? Il y a des choses que vous pouvez faire à ce sujet. Par exemple, vous pouvez faire comme changer la déclaration si vous le souhaitez, si vous voulez souligner votre texte, nous pourrions changer la couleur du lien sur le vol stationnaire, mais il sera difficile, par exemple, changer ces catégories. Will style, parce que c'est un, c'est un widget Wordpress. Pour moi, c'est trop de tracas. Je voudrais le rendre plus facile et j'aimerais utiliser ce que l'oxygène offre. Donc, pour l'instant, je vais laisser ce module ici, mais seulement parce que j'ai besoin des liens qui sont attachés à ces liens seront les URL qui sont attachées à ces liens. Donc, si je clique juste sur chacun d'entre eux et puis passer aux timbres ouverts. Vous pouvez voir que nous avons le contenu, mais nous n'avons pas le style ici et nous allons corriger cela en juste une seconde sur ce que nous avons besoin de ces pages est l'URL. Nous allons l'utiliser dans une seconde quand nous commencerons à créer notre propre module de catégories. Mais pour l'instant, nous aimerions ajouter un modèle à notre catégorie afin qu'ils ne ressemblent pas à notre page de blog. Donc, pour ce faire, je vais juste aller de l'avant et cliquez sur ce sac pour travailleurs et le bouton, puis choisissez Admin. Et ici, je vais choisir un modèle différent pour, un modèle différent à modifier. Et ce sera notre modèle de blogposts. Et dans cette partie, où s'applique ce modèle ? Je vais choisir les archives, et je vais choisir les taxonomies, toutes les catégories. Si nous ne l'avons pas, vous pouvez choisir une catégorie spécifique. Donc, si vous voulez choisir un modèle différent pour une catégorie spécifique, vous pouvez le faire. Mais dans notre cas, je veux seulement garder mon design cohérent. Je veux avoir le même, le même, même look dans la catégorie, la même mise en page pour toutes mes catégories. Ainsi, lorsque nous choisissons toutes les catégories et mettons à jour notre modèle, nous pouvons le fermer. Et puis, lorsque nous actualisons la page, vous pouvez voir que notre modèle est affecté à nos catégories. Et maintenant, il a l'air comme il se doit. Donc, comme je l'ai déjà dit, nous allons utiliser ces URL ici quand nous commencerons à créer notre propre, nos propres catégories, module catégories. Alors passons en fait à ça. 62. 10.14, style les catégories: Je ne pense pas que nous aurons besoin de ce module. Nous avons, nous allons être pris nos liens à partir de ces URL. Donc, à partir des pages LOS. Donc, je vais juste supprimer ce module. Donc, au lieu de notre module de catégories, ce que je vais faire, c'est que je vais ajouter un module de lien texte. Donc, je vais juste taper du texte, puis choisir Lien texte. Et ça va être notre design de sprint. Je crois que c'est notre premier lien ici. Donc, si je copie maintenant simplement cette URL, je vais coller cette URL ici. Et au fur et à mesure que j'y vais, je vais juste y ajouter un cours. Donc ça va être la catégorie de la barre latérale. On y va. Donc maintenant, nous pouvons réellement style notre créateur imprimé sera cette première catégorie. Mais si on le garde et qu'on me laisse juste te montrer que ça marche vraiment. Si nous cliquons sur notre lien de conception d'impression, vous pouvez voir que nous sommes redirigés vers notre page avec tous nos imprimés design, une catégorie articles de blog. C' est donc ce que nous devons faire pour tous ces liens. Mais d'abord, nous devons le styliser. Disons que je vais d' abord passer à ma typographie et que je vais essayer de changer la couleur à ce type. Peut-être, capitalisons notre lien. Peut-être que nous allons résumer à, ajoutons un peu de rembourrage. Donc je vais aller à, aller à la taille et à l'espacement. Et pour le Rembourrage, je vais peut-être faire huit pixels de haut en bas. On y va. Et peut-être allons à nouveau à la taille et à l'espacement. Et changeons la largeur à 100%. Parce que ce que je veux faire, c'est que je veux ajouter une bordure joliment ici en bas qui s'étendra sur toute la barre latérale. Donc pour ça, je vais aller à Borders et je vais choisir la frontière inférieure. Je vais aller avec la couleur gris foncé. Peut-être ce gars ici, et je veux en faire un pixel et solide. Donc, si vous actualisez maintenant cette page, va enregistrer cette page. Et allons à notre poste unique. Donc c'est notre première, c'est notre première catégorie. Et peut-être faisons aussi bien certains, certains comme planer des effets. Donc je vais aller planer et je vais changer la couleur en blanc, noir plus foncé. On y va. Un pixel, puis solide. Et maintenant, si vous allez à notre poste unique, nous y allons. Vous pouvez voir que lorsque nous survolons cette frontière, c'est un effet extrêmement subtil, mais c'est là. Donc, lorsque nous survolons la, cette catégorie, cette bordure change un peu. Donc maintenant tout ce que vous avez vraiment à faire est de simplement dupliquer notre lien texte qui va aller dans notre concepteur web. Donc je vais copier cette adresse, prendre ce morceau de cette catégorie. Je vais coller ce lien. Et je vais taper dans le web design. Alors je vais dupliquer ce type une fois de plus. Et avec l'image de marque, je vais copier ce type. Et je vais taper l'image de marque. Et bien sûr, je dois changer l'URL ici. Et le dernier gars est notre bien, design, simple et simple. Encore une fois, collez ce lien et changez la taxe pour concevoir et sauver un gars. Et si vous allez maintenant à nouveau à notre unique vantail, actualisez la page. Toutes nos catégories sont répertoriées ici. Et bien sûr, si nous cliquons sur un, vous pouvez voir que toutes ces catégories sont joliment, bien fonctionner. Et bien sûr, vous pouvez styliser ces liens comme vous le souhaitez. C' est totalement à toi de décider. Par exemple, nous pourrions peut-être aussi pour l'effet de vol stationnaire, nous pourrions les changer comme la couleur de notre, de nos catégories. Et nous pourrions aussi les animer un peu juste pour montrer un peu de mouvement sur notre page. Et aussi surtout, afin que vous puissiez apprendre à quel point il est facile ajouter quelques belles transitions sur le port ici à l'intérieur de l'oxygène. Alors passons à ça. 63. 10.15 Ajoutez les transitions de hover: Ajouter des transitions ici à l'intérieur de l'oxygène est extrêmement simple. Ce que je dois faire en premier, c'est que je vais m'assurer que ma classe active et que mon état de vol stationnaire est sélectionné. Et puis quand nous allons à avancé, disons que nous voulons changer la couleur du lien. Disons que sur un vol stationnaire, je veux voir une couleur différente. Disons que je vais aller avec ce brun moyen en vol stationnaire. Et ce que je veux faire, c'est que je veux, je ne veux pas que ce soit comme un changement simple et simple de la couleur de la typographie, je veux la rendre plus lisse. Donc ce que je vais faire, c'est aller aux effets. Alors je vais aller à la transition. Et tout ce que nous avons vraiment à faire ici, c'est de fixer la durée de la transition. Si je vais le mettre à 1 seconde, ça va être extrêmement long, mais vous serez certainement en mesure de voir ce changement. Donc je vais juste sauver mon, mon design. Je vais aller à mon poste. Et si vous survolez nos liens, vous pouvez voir qu'ils changent très, très lentement, cette couleur. Et je pense que c'est un peu trop long. Donc je vais aller à quelque chose comme 0,3 seconde. Et peut-être juste pour rendre cet effet un peu plus distinct, si vous voulez, peut-être aller à la typographie et disons que sur le vol stationnaire, nous voulons, disons que nous voulons changer le poids de la police. Alors partons avec, je ne sais pas, 600 peut-être. Et sauvegardons cela et actualisons ma page. Et vous pouvez voir que maintenant que les changements ont également pris, pris f, Bien sûr, c'est juste une option. Tu peux le faire. C' est plus sur l'apprentissage de la technique, c'est plus sur l'apprentissage des outils, comment le faire. Et comme vous pouvez le voir ici à l'intérieur de l'oxygène dans les transitions est une ecchymose est vraiment, vraiment, vraiment, vraiment facile finir comme en général, comme une règle empirique lors de l'ajout de la transition est qui est les garder rapides parce que personne ne veut attendre pour les longues transitions chargement et C et une sorte de feedback afin que les transitions soient meilleures quand elles sont rapides et ne pas aimer lourd. Comme dans ce cas, je pense que si nous changeons juste la couleur sans changer le poids de la police, Ce serait encore mieux. Donc ce que je vais faire, c'est en fait que je vais supprimer ce changement de poids de police. Je vais changer, je vais laisser que les changements de couleur pour s'amuser avec nos catégories. Et fondamentalement, nous avons fini avec notre barre latérale. Je veux dire, ce qu'on pourrait faire, c'est ajouter la même chose pour nos tags. Mais le processus serait, serait similaire, eh bien, serait fondamentalement le même. Tout ce que nous aurions juste besoin de faire est d'ajouter les liens, liens appropriés, puis de les styliser. Et c'est fondamentalement tout. Donc, la dernière étape ici serait deux, je suppose, ajouter une boîte de commentaire ici en bas si vous voulez autoriser des commentaires sur vos billets de blog. Mais vous pouvez le faire ici à l'intérieur de l'oxygène. Alors faisons-le ensuite. 64. 10.16Ajouter les commentaires: Si vous voulez autoriser les commentaires pour votre, pour vos messages, vous pouvez le faire ici à l'intérieur Août n'est pas tout à fait facile. Donc ce que je vais faire, c'est que je vais m'assurer que je suis sur les bonnes colonnes. Donc ce gars ici, et je vais commencer à taper, peut-être allons à notre arbre principal. Je vais commencer à taper des commentaires afin que nous puissions ajouter un commentaire, des listes communes. Donc, si vous voulez d'abord montrer les commentaires, puis nous pouvons ajouter un formulaire commun. Donc, si je clique simplement sur la liste des commentaires, puis sur le formulaire de commentaires, vous pouvez voir que ces modules sont ajoutés à notre, à notre blog post un modèle. Cependant, nous ne pouvons pas voir de liste ici, tout, tout commun parce que cela cela arcs spécifiques, je ne crois pas qu'il ait un commentaire. Alors réparons rapidement ça. Je vais aller à mon, à mon poste. Je vais trouver ces messages. Je pense que c'est ce type, alors je vais le voir. Donc c'est notre, c'est notre page. Nous allons taper quelque chose comme, je ne sais pas si c'est un commentaire et je vais cliquer sur post commentaire. Et on y va. Nous avons maintenant notre commentaire ajouté à mon, à ma page et à mon post. Donc, c'est vraiment, vraiment facile ici à l'intérieur de l'oxygène. Et bien sûr, nous avons aussi quelques options de style ici. Laissez-moi juste rafraîchir la page et nous allons prévisualiser qui se vanter. Alors on y va. Voici notre recteur, voici notre réponse. Et bien sûr, si nous, si nous allons juste à notre poste et laissez-moi juste peut-être prendre ce post et l'ouvrir dans notre mode Incognito afin que vous puissiez voir à quoi il ressemble. Lorsque l'utilisateur n'est pas connecté. Ici, vous allez obtenir comme votre nom, email et champs de site Web que vous devez remplir afin de, pour réellement poster un commentaire. Revenons donc à notre design. On y va. Donc, en ce qui concerne notre liste de commentaires, nous avons quelques presets, pas trop d'obtenir notre preset par défaut est ce gars juste ici. Et nous pouvons changer cela et le changer pour cette couleur grise ou des blocs blancs. Et en ce qui concerne ce formulaire de commentaires de réponse de congé va, nous pouvons changer la couleur de fond du bouton. On peut changer la couleur de la bordure. Alors peut-être juste pour garder notre design cohérent, faisons-le. Je ne vais pas toucher le rayon de la bordure, mais je vais changer la couleur de fond de notre bouton pour peut-être être la couleur brune, la couleur du texte peut-être à notre couleur grise. On y va. Alors voyons à quoi ça va ressembler sur notre front. Rafraîchissons cette page. Et ceci est notre boîte de commentaires et ceci est notre laisser une réponse, le module juste ici à l'intérieur, à l'intérieur de l'oxygène. Donc, dans l'ensemble, joli, assez facile. Si vous vouliez changer comme d'autres aspects de cela, de ces modules, j'ai peur que vous ayez à creuser dans le codage. Mais les chances sont aussi qu'elle aimerait utiliser un plug-in pour les commentaires sociaux comme, peut-être que quelqu'un aurait à se connecter à Facebook ou toute autre plate-forme de médias sociaux pour poster des commentaires sur votre, sur vos billets de blog. Et c'est bien sûr en supposant que vous voulez ajouter, que vous voulez autoriser les commentaires sur votre, sur votre billet de blog. Donc je vais le laisser tel quel. Je pense que ça a l'air bien. Donc, fondamentalement, nous avons obtenu notre page de post blog créé. Donc maintenant, nous pourrions passer peut-être à nos pages de portefeuille. Disons donc que nous voulons montrer nos compétences ou que notre client veut montrer ses projets. Voyons comment on peut faire ça ici à l'intérieur de l'oxygène. 65. 11.1Nous avons besoin d'abord de quelques préparations: Alors maintenant passons à créer dans notre portefeuille. Mais ils ont décidé qu'on pourrait peut-être le porter à un niveau supérieur. Je veux dire, on pourrait ajouter un simple portfolio comme une galerie à notre concepteur précédent. Mais j'ai pensé que, vous savez, dans votre carrière de design, votre carrière de développement, vous pourriez vouloir créer comme un site de portefeuille plus élaboré. Ou peut-être que vous voulez créer un site Web de portefeuille pour vos clients. C' est donc, non, il est essentiel d'apprendre d' autres techniques de mise en page lors de la création de portefeuilles et de pages de portefeuilles. Donc, j'ai pensé que nous pourrions créer un tout nouveau design, un tout nouveau et le nouveau site Web qui sera fondamentalement, sera, va, nous permettra d'apprendre de nouvelles techniques de mise en page. J' ai donc décidé de créer une page complètement nouvelle que j'ai appelé juste portfolio. Eh bien, Nouveau Nouveau Site. Et j'ai ajouté quelques pages, 1-2-3, juste quatre pages. Et j'ai aussi une installation d'oxygène frais avec, sans aucun modèle ici. Ce que je veux faire, c'est créer une descente. Peut-être que je vais te montrer ce que je voulais. Disons que c'est notre première page. Et ce que je veux avoir, c'est que je veux avoir un en-tête, mais un en-tête là-bas va être mis sur le côté. Et ici, ce que je veux, c'est que je voulais juste avoir un logo simple. Laisse-moi juste créer un logo comme celui-ci. Ensuite, j'aimerais avoir un menu ici et peut-être quelques informations sur les droits d'auteur ici, en bas. Et tout pourrait être mis au centre quelque part ici ou en haut. Nous apprendrons les deux techniques. Et puis ce que je veux faire, laisse-moi aller comme Starker, tapons comme paysage. Alors ce que je veux faire, c'est que je veux créer un curseur. Et laisse-moi le mettre à l'arrière. Je veux créer un curseur, mais je veux cela, je veux que ce curseur soit comme mis en dessous, peut-être pas 200 bouton, 2 mille. Je veux que ce curseur soit PUT sous mon, sous mon, ce bien fait l'en-tête comme la barre latérale des en-têtes. Mais je veux que cette barre latérale soit, je voulais être transparente. Donc je vais juste prendre ce rectangle. Comme s'il était semi-transparent, quelque chose comme ça. Et je veux avoir plusieurs images comme en arrière-plan, mais je veux que ces images et changer, je voulais le faire comme un simple curseur. Donc, ce sera notre premier minceur, notre premier ordre de choses. Et quand on crée ça, ce que je veux faire, c'est créer une page de portfolio. Je veux créer un modèle de portfolio qui hébergerait des images et du texte, un titre juste pour que nous puissions montrer, en fait notre, notre portefeuille à nos clients. Alors commençons par créer notre premier modèle qui va être, sera ce réel, en fait le modèle de la première page. Alors commençons à le faire ensuite. 66. 11.2Créer le modèle de page d'avant: Donc, je suis juste ici à l'intérieur de l'oxygène et je vais ajouter un nouveau modèle, cette ville modèle. Ce sera notre modèle principal. Donc je vais l'appeler comme ça. Et je vais l'appliquer à toutes mes pages. Mettons-le comme ça. Et je vais frapper Publier. Ensuite, je vais éditer, édité avec de l'oxygène. Et nous allons écrire ici à l'intérieur de notre modèle avec ma toile vierge préférée personnelle. Je ne sais pas. J'aime vraiment souffler à Poseidon y. Donc ce que je veux faire, c'est que je veux créer comme un en-tête sur la gauche, comme un en-tête et une barre latérale et certains, des textes de soudage de tack un curseur sous cet en-tête. Donc ce que je vais faire, c'est, comme d'habitude, je vais juste créer une section simple. Et cette section est censée être une section pleine largeur. Donc, je vais aller à la taille et l'espacement avancés. Et ici, j'ai le conteneur de section avec option, que je vais définir sur pleine largeur. Et comme vous pouvez le voir, notre section s'étend actuellement sur notre page. Et je ne veux pas que cette section ait un rembourrage. Je veux que toutes ces valeurs soient définies à 0. Je vais sauver ça. Donc ce dont j'ai besoin en ce moment, c'est que j'ai vraiment besoin de div. Donc, un div qui va être à gauche qui hébergerait nos éléments d'en-tête. Et puis un, un autre div qui hébergera nos images d'arrière-plan. Donc, je vais juste ajouter ma première div. Et peut-être appelons ça quelque chose comme, nous allons le renommer. Appelons ça un en-tête. On y va. Et puis je vais ajouter un autre div, et je vais l'appeler, appelons-le curseur. On y va. Donc c'est notre en-tête et c'est notre curseur. Mais comme vous pouvez le voir, ils sont mis les uns sur les autres. Et c'est parce que notre section par défaut empile les éléments enfants verticalement. Alors empilons-les horizontalement. Et je vais prendre ma tête. Et disons que je voulais être quelque chose comme, voyons, 20% de largeur. Et puis je vais prendre le curseur. Et pour l'instant, je vais juste le fixer à 80%, juste pour que vous puissiez voir ce qu'on fait ici. Donc nous avons notre premier DEF, notre en-tête, et ensuite nous avons notre curseur, div curseur. Donc, comme je l'ai mentionné précédemment, je veux ceci, cet en-tête, cette barre latérale d'en-tête. Je voulais être semi-transparent. Donc je vais aller à Advanced. Je vais aller à l'arrière-plan, prendre la couleur de fond. Je vais le rendre noir, mais je vais baisser l'opacité jamais aussi légèrement pour peut-être quelque chose comme, voyons, 66 juste pour l'instant. Et maintenant, si je vais à nouveau à la taille et l'espacement avancés et attrape l'option de hauteur, mettez-le à 100 v h. Comme nous le savons déjà, notre en-tête se propage de haut en bas. Et si on fait la même chose pour notre curseur, alors je vais aller à l'arrière-plan avancé. Je vais aller avec la couleur de fond pour l'instant, juste pour que tu puisses le voir. Et puis je vais prendre cette taille et l'espacement à la même 100 Vh. Vous pouvez voir que mes deux sections se répandent et se répandent de haut en haut en bas. Et cette section principale se propage de gauche à droite. Mais bien sûr, nous voulons que ce curseur passe sous notre en-tête, mais c'est quelque chose que nous allons faire plus tard. Pour l'instant, commençons simplement à remplir notre, notre en-tête avec quelques informations. Alors ajoutons un logo, ajoutons un peu comme un menu. Et puis ajoutons quelques informations de pied de page ici. Alors commençons à le faire ensuite. 67. 11.3Ajoutez les éléments d'en: Donc, à notre en-tête, nous devons ajouter un logo, un menu, puis quelques informations de pied de page ici. Donc je vais commencer par le logo. Donc, je vais cliquer sur ajouter, et je vais taper le titre. Appelons ça. J'essaie de faire comme un blog de photographie, top portfolio de photographie. Donc je vais juste l'appeler pour les frais de culture. On y va. Et peut-être que je vais juste ajouter une icône comme peut-être, peut-être pas comme à côté mais au-dessus de cette rubrique. Donc, je vais juste cliquer sur ajouter, et je vais juste taper l'icône. On y va. Et bien sûr I1, cette icône pour être sur le dessus. On y va. Donc, je n'ai pas de couleurs spécifiques comme définies pour cela, pour ce blog, pour ce portfolio ou un site web. Donc je vais juste prendre mes couleurs préférées comme si je vais aller avec F9 ou un destin fatal de huit pour celui-là. Et je suppose qu'on peut l'ajouter. Je vais l'appeler comme ça. Donc F9, F9, F9. Et puis on y va et je vais prendre peut-être d'abord, on va juste diminuer la taille à quelque chose comme 32. Et puis changeons ça en, essayons l'appareil photo. Peut-être cette caméra rétro. On y va. Et pour la photographie, je vais changer la couleur. Et je vais essayer de trouver une belle police d'apparence. Donc je suppose que nous pourrions peut-être aller chercher Google Fonts pour trouver une bonne police. Ou on pourrait aller avec ce qu'on sait déjà, comme Bree Serif, ça ira bien. Et peut-être que je vais essayer de trouver un plus beau poids de police. C' est peut-être un peu trop gros. Cela devrait être, cela devrait être correct. Donc, bien sûr, ce que je voudrais faire est que je voudrais mettre ces gars au centre de mon en-tête. Et c'est super facile. Je vais juste saisir mon en-tête et je vais aligner horizontalement tous ces éléments. Et je vais aller à la taille avancée et l'espacement. Et je vais ajouter un peu de rembourrage, comme peut-être 50 pixels du haut, peut-être en bas et peut-être 25 à gauche et 25 à droite. Bien sûr, nous pourrions, si nous le voulions, nous pourrions jouer avec la taille de notre cap aussi. Peut-être faire un plus grand, peut faire des nœuds plus petits vont être totalement à vous. Ce que je veux faire, c'est que je veux vous montrer, je veux que vous appreniez à jouer avec options de mise en page lors de la création de ce site Web standard. Parce que nous pourrions aimer à un, comme un en-tête sur le dessus, mettre un logo sur le côté gauche, menu sur la droite. Mais c'est un peu ennuyeux. Et je veux dire, nous voulons faire quelque chose de plus pour notre photographe. Donc, une fois que nous aurons le logo, nous pourrions peut-être même l'envelopper avec un div et l'appeler un logo. Ce serait une bonne pratique organisationnelle. Mais je vais juste ajouter un menu. Je vais aller de l'avant et choisir le menu pro. Et comme vous pouvez le voir, c'est mon seul menu, donc il a été ajouté instantanément. Et ce que je veux faire, c'est que je veux changer beaucoup de choses à ce sujet. Maintenant, ce menu. Donc je vais aller au menu du bureau. Et pour l'orientation, je veux passer à la verticale. On y va. Pour la typographie, je suppose qu'on pourrait aller avec quelque chose de simple comme peut-être le loto. Allons-y avec ça. Je veux changer la couleur, mais peut-être que cette fois-ci, passons à quelque chose comme un peu plus grisâtre. Peut-être que je vais l'ajouter à mon, à mes couleurs globales. Et je vais l'appeler gris foncé. On y va. Et laissez-moi juste peut être capitaliser la police. Allons peut-être les lettres un peu. Et augmentons la taille de la police à quelque chose comme 22 peut-être. Et puis je vais aller dans l'espace dans une ligne et une frontière. Et je veux aligner le centre de texte. On y va. Peut-être que je vais juste diminuer ce poids de police juste un peu à quelque chose comme 20 ou peut-être même 18. On y va. Et puis revenons à nouveau pour passer le vol stationnaire et actif. Et je voudrais sur le vol stationnaire, les gars peuvent être, rendre encore plus sombre. Peut-être comme ça. Et je vais ajouter la couleur et je vais appeler ça un gris stationnaire. On y va. Donc, chaque fois que quelqu'un passe au-dessus de notre menu, il va tourner et vraiment, vraiment, vraiment sombre. Et bien sûr, nous devrons encore jouer avec la réactivité, mais nous le ferons plus tard. Nous allons nous occuper de la réactivité du menu pour cet en-tête et tous nos éléments d'en-tête. Pour l'instant, ajoutons simplement les éléments dont nous avons réellement besoin dans notre en-tête. Donc, une fois que nous avons obtenu le logo, nous avons eu le menu. Ajoutons peut-être les informations du pied de page. Donc, je vais commencer par les icônes sociales. Donc je vais juste taper, taper ça. Et je vais ajouter beaucoup d'entre eux sont en fait, ajoutons tous, toutes ces icônes. Et certainement les rendre plus petits à quelque chose comme 18 pixels. Pourquoi pas ? Et 1010 pixels d'espace autour de la, ces icônes est très bien. Vérifions les couleurs. Allons avec notre couleur gris foncé. On y va. Et si vous le souhaitez, vous pouvez utiliser des couleurs de marque. C' est quelque chose que tu pourrais faire, mais je vais aller avec nos couleurs grises. Et vous pouvez également jouer avec ces options comme Carré, Cercle et Blank. Je pense que je vais aller avec carré. Je pense qu'ils étaient les meilleurs dans ce scénario. Peut-être que je vais augmenter la taille et diminuer l'espacement entre mes icônes en quelque chose comme deux. Je suppose que ça devrait être bien. Et enfin, ajoutons rapidement quelques informations textuelles. Disons que ce sera notre, ce sera notre information probable sur les droits d'auteur, quelque chose comme ça. Nous savons déjà comment le faire. Donc je vais juste rapidement taper quelque chose comme Arnold 20-20 photolithographie portfolio, quelque chose comme ça. Et bien sûr, changeons la couleur du texte. Rendons-le significativement plus petit, quelque chose comme dix pixels. Et puis je vais aller à la typographie avancée. Je vais aligner les textes au centre. Donc, maintenant serait un bon moment pour commencer à aligner dans tout bien. Je veux dire, on pourrait le laisser comme ça, mais ça a l'air trop exigu à mon goût. Je pense que nous avons besoin d'un peu plus d'espace entre tous ces éléments, mais nous avons aussi besoin d'un bon alignement par rapport à notre en-tête. Commençons donc à jouer avec les options d'alignement et l'espacement. Dans la vidéo suivante. 68. 11.4Change l'alignement et la mise en page: Je pense donc que nous devrions commencer par ajouter un peu d'espacement entre ces éléments, en particulier le menu et le logo et les icônes des réseaux sociaux. Donc ce que je vais faire en premier, c'est que je vais prendre le menu pro, aller à Taille avancée et espacement. Et je vais ajouter une marge, comme peut-être 50 pixels vers le haut et le bas. Et si vous vouliez laisser ça comme ça, si, si nous aimons ce genre de mise en page, maintenant nous pourrions le laisser à ça. Ça a l'air bien. Mais que faire si nous voulions peut-être comme répandre tous ces éléments sont et si nous voulions utiliser tout l'espace que nous avons ici ? Et si nous voulions aimer, laissez le logo sur le dessus, prenez le menu et mettez-le exactement au milieu. Et puis prenez les icônes des médias sociaux et notre texte de copyright et mettez-le exactement en bas. Donc, pour ça, je vais prendre mon en-tête. Je vais m'assurer qu'il a été sélectionné. Et je vais saisir cette option comme cette option d'alignement d'élément vertical, dernière option comme un espace entre eux. Maintenant, ce qui se passe ici, c'est que tous ces éléments essaient, vous savez, de l'espace uniformément, verticalement pour aimer remplir tout cet espace disponible que nous avons ici. Mais puisque ces éléments sont séparés, vous pouvez voir qu'ils prennent toute la barre d'espace, puis éditer les espaces entre eux sont égaux. Mais nous aimerions cette photographie de topographie et la charge sera ensemble. Et ces icônes de médias sociaux et les informations sur les droits d'auteur, nous aimerions qu'il soit ensemble. Si c'était une image simple, cela fonctionnerait bien. Mais dans notre cas, ce n'est pas le cas. Mais en fait, c'est un, c'est une bonne chose parce que nous serons en mesure d'apprendre à contester ces problèmes. Donc ce que je vais faire, c'est que je vais attraper cette couche et je vais l'envelopper avec div. Et puis je vais mettre le cap à l'intérieur de cette div. Et comme vous pouvez le voir que la photographie et le titre et l'icône sont maintenant enveloppés dans un div. Et ce div est en fait mis sur le dessus de notre, de notre cap. Mais bien sûr, tout ce que nous avons à faire, c'est d'aligner tout sur le centre. Et puis nous faisons la même chose pour nos médias sociaux, les icônes des médias sociaux. Donc je vais les envelopper avec live. Au texte, vous pouvez voir un centre de ligne vertical. Vous pouvez voir qu'en ce moment tous ces éléments sont bien assemblés et exactement en bas. Et disons que vous voudriez mettre ce menu sur le dessus avec Logo, mais vous voudriez garder les icônes des médias sociaux ici en bas. Alors, comment pouvons-nous faire ça ? Fais ça ? Eh bien, le moyen le plus simple serait de saisir le menu et de le mettre à l'intérieur de cette div. Et cela irait avec cette photographie de logo, l'icône, le titre, et un div englobant. Donc c'est quelque chose que tu pourrais faire. Et bien sûr, si vous vouliez avoir le menu en bas, eh bien, vous auriez juste à le mettre à l'intérieur de cette div. Donc, cette option, il suffit de vous montrer une fois de plus. Cette option espace entre Permet d'espacer tous les éléments verticalement afin qu'ils s'adaptent, sorte qu'ils remplissent tout l'espace disponible. Mais je ne veux pas que ce menu soit comme ça. Je voulais être séparé. Bien sûr, si nous avions d'autres pages ici, nous pourrions les ajouter et ils rempliraient bien tout cet espace. Mais dans notre cas, nous n'avons que ces éléments. Donc maintenant, il semble, ça ressemble à ça. Donc maintenant que nous savons, pris soin de nos options de mise en page, je suppose qu'il est grand temps que nous commencions à jouer avec notre réactivité. Alors commençons à le faire dans la prochaine vidéo. 69. 11.5Fête les réactions de l'en: Donc, pour réparer la réactivité, ce que je vais faire, c'est aller au conteneur FirstPage, ce gars juste là. Et comme vous pouvez le voir, à ce stade, je suppose que le menu semble bien, mais ce texte photographique est beaucoup trop grand, donc je vais juste le rendre plus petit, quelque chose comme 22. Et je vais changer la taille de l'icône à quelque chose comme peut-être 24 ou peut-être 22 aussi bien. Et en ce qui concerne nos icônes de médias sociaux, nous pourrions peut-être pour commencer, prenons la div et nous assurons que nous centrons nos éléments. Et puis je vais aller deux fois les icônes des médias sociaux. Et je vais probablement rendre ces gars juste un peu plus petits pour peut-être quelque chose comme 14 pixels. Ça devrait être bien. Maintenant, allons à notre conteneur de page. Mais avant cela, peut-être ajoutons un peu plus de place comme ici sur le, gauche et à droite. Donc, je vais juste prendre mon en-tête. Et à ce point d'arrêt, je veux que la largeur soit un peu plus grande. Voyons voir, comme 25 ans. Ou peut être encore plus grand à quelque chose comme 2727 devrait être bien. Alors je vais aller à moins de 992. Je suppose que 27 ira bien. En termes de taille. Et tous les autres éléments sont jolis, plutôt bons. Je pense qu'ils ont l'air bien. Laisse-moi peut-être aller à tous les appareils. Maintenant, je n'aime pas vraiment l'espace entre les icônes des médias sociaux et ce texte. Donc je vais juste attraper ce texte en bas ici et ce point d'arrêt, je vais ajouter comme peut-être cinq pixels de marge, je suppose distribuer. D' accord ? Alors quand nous, quand nous allons à moins de 992, ça semble toujours bien. Mais peut-être que nous allons changer ça avec peut-être 33. Alors maintenant passons à moins de 768. Et je pense que, que ce point d'arrêt choses va notre mise en page ne fonctionnera plus très bien. Je veux dire, même si nous avons comme une image de fond, c'est toujours ça ne sera pas professionnel à mon goût. Ce que je voudrais faire, c'est que je veux aimer commencer par ce point d'arrêt I1, la mise en page pour changer complètement. Je veux, je veux avoir comme un en-tête standard en haut. Et je veux avoir comme un, bien notre curseur à mettre horizontalement, mais plus vers le bas. Alors, comment pouvons-nous faire ça ? Rappelez-vous que notre section hérite toujours éléments enfants de pile stock horreur horizontalement, cette fonctionnalité. Donc, lorsque nous ajoutons ce point d'arrêt, dites-lui d'empiler les éléments enfants verticalement. Vous pouvez voir qu'en ce moment notre en-tête est mis sur le dessus de notre prochain curseur. Mais puisque ce gars est réglé à 100 Vh pour sa hauteur, son héritage, cette valeur. Vous pouvez voir qu'il n'est pas pris tout cet espace sur le côté. Donc ce que je vais faire, c'est que je vais prendre mon premier en-tête et que je vais changer cette hauteur. Donc je vais aller à la taille et à l'espacement. Et pour la hauteur, essayons Oran. On y va. Et pour la largeur, allons avec 100% pour le mettre, pour le mettre comme ça. Et je suppose qu'à ce point d'arrêt, on pourrait peut-être prendre notre menu et peut-être changer l'espace de marge. Je crois que c'était 25 ou 50 pixels. Allons-y comme dix, en haut et en bas. Je suppose que ça a l'air bien, surtout quand on les a attrapés menu pro, on va aller dans le dire de se transformer en un menu mobile à moins de 768. Et puis on pourrait peut-être changer certains aspects à ce sujet. Donc je vais me débarrasser de cette icône. Je ne veux pas avoir le texte du menu. Je veux avoir les barreaux. Alors commençons à taper dans les barres. On y va. Et je veux changer cette couleur pour ma couleur de gris curseur. On y va. Et pour l'instant, je vais le laisser tel quel. Nous pourrions jouer avec la réactivité, avec la façon dont le menu ou le menu ressemble sur des appareils beaucoup plus petits, mais nous savons déjà comment le faire. Et je veux juste me concentrer davantage sur la modification des options de mise en page ici. Alors, quand on passe à moins de 480, les menus semblent toujours bien. Donc, si vous allez maintenant à tous les appareils, c'est notre, c'est notre en-tête. C' est notre tête à deux cent vingt neuf quatre-vingt-dix deux. Mais quand nous passons à moins de 768, vous pouvez voir que notre mise en page change complètement. Donc, sur les petits appareils comme les smartphones, c'est ce que nous verrions, non ? Donc, tout est bon et très bien. Mais que diriez-vous comment faire, comment faire passer cette section de curseur, en fait aller sous mon hétérosexuel parce que maintenant il est réglé à 80%. Mais si on veut faire 100 % de largeur ? Vous pouvez voir que ça ne passe pas sous mon en-tête. Et si je vais juste en arrière-plan juste pour te montrer ce que je veux dire, je vais m'en débarrasser et je vais juste choisir n'importe quelle image. Vous pouvez voir qu'il a été mis ici, mais il ne va pas entrer sous notre en-tête et notre en-tête a une couleur d'arrière-plan. C' est vrai, mais cette couleur est transparente. Même si je me débarrasse de ça, vous pouvez voir que nous n'avons pas ce type, le curseur bientôt sous notre en-tête. Alors comment pouvons-nous, comment pouvons-nous changer ça ? Nous allons changer cela dans une seconde. Pour l'instant, laissez-moi revenir à ma couleur d'origine. Je crois que c'était quelqu'un quelque part par ici. Ce que je veux faire maintenant, c'est que je veux réellement ajouter un curseur à cela, à cette section. Et je veux le mettre sous mon en-tête. Alors commençons à le faire dans la prochaine vidéo. 70. 11.6Mettez le curseur sous l'en: Nous avons donc notre modèle presque prêt. Ce que nous voulons faire maintenant, c'est que nous aimerions mettre le malloc, le curseur sous notre en-tête, mais pas seulement le curseur. Puisque cela va être notre modèle. Et nous aimerions permettre à nos utilisateurs d'ajouter des projets similaires à notre portefeuille. Nous devons y réfléchir aussi. Donc ce que je vais faire, c'est que je vais ajouter à cette section, je vais la laisser tel quel, mais je vais juste ajouter le contenu intérieur à cette section sur seulement deux sanctions ou je ne veux pas le mettre comme partout. Je vais juste mettre cette section à l'intérieur de ce curseur, élément de curseur, comme la section de curseur. Et je vais juste sauver ce type. Et je vais retourner à l'administrateur. Je vais prendre mes pages et je vais aller à ma première page que je vais l'ajouter avec de l'oxygène et je suis ici à l'intérieur de ma page. Donc ce que je veux vraiment faire, c'est que je veux finir sur ce curseur maintenant. On y va. Et laissez certains, faites une configuration simple. Alors changeons, diminuons la vitesse d'animation comme 350. Je suppose que je veux enlever le Perrin autour des diapositives. Je ne vais pas utiliser ces points, donc je n'ai pas besoin de cette option de curseur de superposition de points. Je les veux. Je veux que les diapositives s'étirent à la même hauteur. Et pour la configuration, je ne veux pas montrer de flèches. Je ne veux pas montrer les points. Je veux le faire jouer automatiquement 3 000. Laissons-le comme ça, et je veux le rendre infini. Ensuite, ce que je dois faire, c'est que je vais juste me débarrasser de ces deux curseurs. Ce que je dois faire, c'est que je dois ajouter, mais je ne vais pas ajouter une image à mon curseur. Je vais ajouter une image d'arrière-plan parce que je veux jouer avec le positionnement des images. Donc, ce que cette diapositive a sélectionné, je vais aller à l'image de fond et je vais prendre cette option. Et pendant que cette image, et je vais sélectionner l'image, et en ce moment pour la taille d'arrière-plan, je vais le définir pour couvrir. Je ne veux pas que ça se répète. Et je veux mettre le point de mire exactement au milieu. Et nous savons déjà comment faire, c'est que je vais aller avec gauche 50% et Top 50%. On y va. Et bien sûr, je veux que mon curseur s'étire sur toute la hauteur de ma page ou de ma fenêtre. Donc, je vais aller à avancé avec le curseur sélectionné. Ensuite, je vais aller à la taille et l'espacement et entrer 100 pour ce 100 Vh pour mon, pour mon curseur. Alors ce que je vais faire, c'est que je vais simplement dupliquer mes diapositives deux fois. Et changons l'image de fond peut-être pour ce type. Et pour le dernier gars, changeons l'arrière-plan pour ce type. On y va. Laisse-moi juste voir si je mets les diapositives à infinie mais infinie. Donc je vais juste le sauver. Et voyons notre, voyons notre page. Je vais rafraîchir ça. Et on y va. On a fait fonctionner notre curseur comme il se doit. Et bien sûr, quand on le rend plus petit. Donc, quand nous descendons et descendons, le curseur fonctionne et les points d'arrêt Brewer fonctionnent aussi. Donc nous avons eu notre première page. Je vais fondamentalement créé. Alors maintenant que nous avons obtenu cette mise en page principale pour la créer, peut-être que nous avons pris beaucoup de pas, mais dans l'ensemble, une fois que vous en aurez le coup, vous verrez combien de flexibilité vous obtenez avec l'oxygène lors de la création de ces belles mises en page. Et maintenant que notre page d'accueil a été créée, laisse-moi peut-être désactiver la lecture automatique. Nous avons eu la page, la page principale créée. Maintenant, c'est une bonne idée d'ajouter des pages de portefeuille. Nous avons besoin de cela comme une seule page de portefeuille, car nous voulons ajouter comme des projets uniques pour notre portefeuille. Et bien sûr, nous voulons aussi créer comme une page de portefeuille principale. Donc nous allons le faire en utilisant comme un plugin visuel appelé un portfolio visuel. C' est un joli petit plug-in qui vous permet de créer des portefeuilles très joliment à la recherche. Alors commençons à le faire ensuite. 71. 11.7Ajoutez le plugin du portfolio: Donc, dans mon répertoire de plugins, je vais ajouter un nouveau plugin et aller chercher un portfolio visuel, ce gars juste ici. Et je vais l'installer et ensuite je vais l'activer. Donc, la façon dont ce plug-in fonctionne est qu'il vous permet d'ajouter des éléments de portefeuille, qui sont fondamentalement des projets de portefeuille uniques. Et aussi, il vous permet d'ajouter la mise en page afin de contrôler la façon dont votre portefeuille. Portfolios, Fondamentalement des galeries de portefeuille, Luke. Donc, nous allons créer un petit portefeuille rapide juste pour voir comment ce plug-in fonctionne. Ce que je vais faire, c'est ajouter une nouvelle mise en page. Je vais l'appeler mon portefeuille. Et ici, comme vous pouvez le voir, vous pouvez choisir les éléments à inclure dans votre portefeuille. Pour l'instant, nous n'avons pas de posts, nous allons les ajouter plus tard, mais nous pouvons ajouter des images. Je vais donc cliquer sur les images et les images. Et je vais juste ajouter toutes ces images. Voyons à quoi ça ressemblera. Maintenant, ce plug-in, depuis assez récemment, il fonctionne en utilisant des blocs de travailleurs pour le bien ou pour le mal. Donc, ici, sur cet élément de blog, vous pouvez voir que nous avons quelques options que nous pouvons, que nous pouvons ajouter que nous pouvons changer à notre portefeuille. Donc, tout d'abord, nous avons les paramètres d'image juste ici. Donc, si vous voulez, vous pouvez laisser ces titres à votre, à vos images. Donc, lorsque nous survolons ces images, vous pouvez voir que nous avons obtenu et les titres des images, nous pouvons les définir sur titre de l'image ou nous pouvons le définir sur personnalisé. Je vais le laisser au titre de l'image. Nous pourrions supprimer ces descriptions si nous le voulions. Nous pourrions dire que, par exemple, notre description serait notre légende d'image, ancienne ou description. Mais surtout, nous pouvons changer la mise en page de notre portefeuille. Je vais donc cliquer sur cette option Items. Et par défaut, nous avons ces tuiles ici, mais nous pourrions choisir la maçonnerie si vous le vouliez. La grille justifiée ou carrousel. Et bien sûr, chacun de ces, chacune de ces mises en page a là, a son propre, a ses propres options secondaires comme. Alors allons aux tuiles. Et lorsque nous cliquons sur cette option Modifier les tuiles, vous pouvez voir que nous avons différentes tuiles, différentes tuiles comme des mises en page que nous pouvons utiliser. Donc nous allons peut-être utiliser, peut-être celui-là, celui-là a l'air sympa. Je vais le laisser comme ça. Nous pouvons changer l'écart entre nos images. Je vais aller à peut-être comme Tanner. Voilà, tu y vas. Et puis quand nous allons au style des articles, nous pouvons changer la façon dont cet ensemble comme cet effet de cette superposition avec la couleur et le titre, à quoi il ressemble. Donc, je fais et affiche le titre, mais je ne veux pas avoir la date. Et je ne veux afficher la superposition que sur le vol stationnaire. Donc ça ressemblera à ça. Maintenant, nous pouvons bien sûr le changer pour peut-être comme classique. Et cela ressemblera plus ou moins à ceci. Nous pouvons le changer pour voler, ce qui ferait la superposition, superposer comme voler à partir d'une direction de votre curseur de souris et émerger. Ça ferait ressembler à ça. Je vais y aller avec la mouche. Ça a l'air sympa. Nous pourrions également modifier la couleur d'arrière-plan de superposition. Allons donc avec cette couleur noire, mais je vais réduire l'opacité. Donc, quand nous survolons notre image, ça ressemble à ceci. Et nous pourrions changer la couleur du texte de superposition si nous le voulions. Donc, au lieu de blanc, on pourrait peut-être faire quelque chose comme, comme gris clair, peut-être comme ça. Peut être un peu plus clair, comme ça, ou même plus léger que ça. On y va. Et il y a des éléments clic action. Nous pouvons aimer le désactiver complètement. Nous pourrions définir l'URL, l'URL. Et cela signifie que chaque fois que nous cliquons sur une image, cela nous mènera à un portefeuille de projets et comme une seule page de portefeuille de projets. Et puis nous pouvons choisir le pop-up, ce qui serait en fait juste pour que nos images soient affichées dans une fenêtre pop-up. Donc je vais laisser cette pop-up pour l'instant. Je vais laisser le titre de l'image et la description de l'image. Tout va bien. Je vais juste cliquer sur la mise à jour. Ce que nous allons utiliser est ce code court de mise en page juste ici. Donc je vais copier ceci et ensuite je vais aller à page de mon portfolio et je vais le coller dans ma section pour leur portfolio. Mais faisons ça dans leur prochaine vidéo. 72. 11.8Ajoutez le portfolio: Donc je vais aller sur les pages et je vais prendre la page du portefeuille. Et je vais l'éditer avec de l'oxygène. Et ici, je vais aller à la structure. Et je vais juste ajouter une section. On y va. Et à l'intérieur de cette section, ce que nous pourrions vraiment faire est d'aimer ajouter un titre. Et nous allons taper exactement ce qu'il est portefeuille. Peut-être que si on l'épelait correctement, ce serait encore mieux. On y va. Et puis je vais juste ajouter du texte. Juste comme ça. Laissons-le, laissons-le comme ça pour l'instant. chose la plus importante ici est d'ajouter le portefeuille lui-même. Donc on a le titre, on a le texte. Maintenant, ajoutons le portefeuille. Donc, je vais cliquer sur ajouter et je vais juste taper le code court. Et je vais coller le raccourci complet qu'on vient de copier. Juste une seconde et je vais sauver ça. Et dans ce cas, vous pourriez rencontrer un petit, un petit problème parce que quand nous actualisons notre page, laissez-moi juste la rafraîchir. Je vais aller à Portfolio. Vous pouvez voir notre impôt, mais ce portefeuille n'est pas affiché du tout. Et cela se produit parce que notre code court doit avoir, laissez-moi passer à la taille et à l'espacement. Il doit avoir comme des valeurs de largeur. Je vais simplement taper 100 %. On y va. Vous pouvez maintenant voir que le, ceci, ce, ce module de raccourci n'est pas, il est en fait plus visible. Quand on rafraîchira ce type. Vous pouvez voir notre portefeuille fonctionnant correctement. Et bien sûr, ce que je voudrais faire est que je voudrais peut-être ajouter un peu d'espacement ici. Alors faisons peut-être comme 50 pixels. Et je vais ajouter, je ne suis pas 50, 50 % pixels. Je vais le sauver. Et puis rafraîchissons ce gars. Et maintenant, notre portefeuille fonctionne correctement. C' est donc la façon d'ajouter notre portefeuille. Et si vous voulez laisser cette mise en page telle quelle, vous pouvez le faire. Mais nous pourrions peut-être ajouter comme une belle somme en noir, une belle image de fond, et une superposition. Voyons comment on pourrait faire ça. On pourrait attraper notre résection. Et en ce moment, comme vous pouvez le voir, il ne s'étend pas sur toute notre page. Donc, ce que nous pourrions faire est de saisir nos options avancées taille et l'espacement et de le mettre à pleine largeur. Mais cela fera de notre, notre portefeuille et de notre code court aller tout le chemin vers la gauche. Donc, ce que je ferais est que j'ajouterais le module de colonnes. Et dans ce module de colonnes, peut-être faisons quelque chose comme 50-50. Et mettons ce titre dans notre colonne de droite, ce texte dans notre colonne de droite aussi. Nous venons de le mettre dans cette div, même pour le code court. Et maintenant, changeons ça avec de plié, cette div. Donc je vais aller à 25 ou 22. Et puis je vais saisir ma taille de section et l'espacement. Je ne veux pas de rembourrage. Je suppose que ça pourrait ressembler à ça. Laissons-le comme ça. Et pour la section, je vais aussi aller à l'arrière-plan et je vais trouver une image. Sertissons celui-ci, allons le sélectionner, donc ça ressemblera à ça. Mais quand nous allons maintenant à notre page de portefeuille, vous pouvez voir qu'elle n'a pas l'air si belle. C' est bien que ce portfolio soit comme, tu sais, comme sur toute la page. Mais nous devons changer certaines choses à propos de changer cette couleur. Et peut-être qu'on pourrait les changer comme l'image à l'arrière. Et ce que je veux dire par là, c'est quand nous avons obtenu cette image d'arrière-plan, nous pourrions utiliser cette option de couleur de superposition d'image. Donc je vais aller avec le noir, mais je vais changer l'opacité pour quelque chose, mentir ça pour le rendre plus sombre. Et je vais rapidement changer la couleur ici. Et ce gars juste là. Et peut-être ajoutons un certain nombre. Ramenons cette valeur. Donc, ce 75 pixels, si on est haut et bas. Et n'oublions pas de saisir l'arrière-plan et un ensemble de notre arrière-plan à couvrir. Pas de répétition. Et mettons-le à 50, 50  %, comme on l'avait fait avant. Maintenant, quand nous sauvegardons cela et rafraîchir la page ou le portefeuille est beaucoup, beaucoup plus agréable. Et nous avons eu notre image de fond, et nous avons eu notre portfolio avec l'en-tête statique comme ça. Et, bien sûr, notre expérience évolue aussi avec notre portefeuille. C' est ainsi que vous pouvez ajouter un portfolio en utilisant ce plug-in ici, à l'intérieur de notre, eh bien, à l'intérieur de notre page, à l'intérieur de l'oxygène. Bien sûr, la conception dans ce cas est beaucoup moins importante. Et ce que nous avons encore besoin de prendre soin de lui, bien sûr, ce sera la réactivité parce que pour le moment, il n'a pas l'air si grand. Donc, fondamentalement, ce que nous aurions à faire est de saisir les colonnes. Et nous pourrions juste empiler les colonnes verticalement, peut-être à moins de 992. À ce point d'arrêt. Ajoutons peut-être une marge à notre premier div, cette div à gauche. Mettons-le à 20 %. On y va. Donc maintenant, nous pouvons voir à quoi ça ressemble réellement. Comme vous pouvez le voir, nous avons encore quelques problèmes de réactivité. Je veux dire, quand nous avons atteint ce point d'arrêt, ce portefeuille est, semble bien se réajuster lui-même. Mais nos, nos dibs ne le font pas. Alors réparons ça dans la prochaine vidéo. 73. 11.9Fixez l'adaptation.: Donc vraiment, la seule chose en termes de réactivité que nous devons corriger ici est cette section qui chevauche notre en-tête ? L' en-tête a l'air sympa. Le portefeuille se réadapte, mais cette rubrique, et cela n'a pas l'air si grand. Donc, ce que nous devons vraiment faire, c'est quand nous passons à moins de 768, c'est là que notre mise en page change. Il faudra ajouter une marge ou peut-être même mieux serait d'ajouter un rembourrage à notre section parce que laissez-moi juste aller les tours structurer cette section parce que quand ce gars frappe ce point d'arrêt, où notre design atteint ce point d'arrêt, nous devons ajouter un peu de rembourrage parce que nous voulons garder notre image d'arrière-plan seul pas, eh bien, intacte fondamentalement. Laisse-moi aller à Taille avancée et espacement. Et je vais changer ce type de pixels en pourcentages. Et essayons et 40%. Ça devrait être bien. Laissez-moi juste rafraîchir la page et peut-être me laisser juste attraper ce gars et rafraîchir la page. Vous pouvez voir qu'en ce moment, vous avez de l'espace de rembourrage et nous avons de l'espace juste ici. Mais quand nous allons plus bas, quand vous allez à 80, vous pouvez voir que nous avons encore besoin d'ajouter juste cela. Donc je vais essayer 55%. Et sauvegardons cela et actualisons la page. Et on y va. On a corrigé cette réactivité. Donc, quand nous avons eu notre mise en page présenté comme ça, tout semble bien. Quand nous avons atteint ce point d'arrêt 7068, toute la mise en page change. Et pour 80, la mise en page change ici aussi. Donc, voici comment vous pouvez créer un portefeuille est très simple page de portefeuille. Avec ce plug-in appelé portfolio visuel, tout ce que vous avez à faire est d'ajouter un code court et ne jamais oublier de le définir à 100% en termes de largeur. Si vous vouliez être 100%, mais donnez-lui toujours des valeurs de largeur. Et si vous voulez créer un comme une galerie, volonté. Voilà, tu y vas. Mais si vous voulez, comme, faire toutes ces images liées à des pages de portefeuille réelles avec plus de galeries ou de taxes ou de titres, tout ça. Eh bien, vous devez créer un modèle différent ici à l'intérieur de l'oxygène. Et c'est en fait une compétence très utile et une chose très utile. Et nous allons certainement commencer à l'apprendre dans la prochaine vidéo. 74. 11.10Ajoutez le modèle de portfolio un seul portfolio: Donc, avant d'ajouter notre modèle de portefeuille unique, il est préférable d'avoir des projets de portefeuille déjà créés. Donc, pour ce faire, je vais aller à notre, notre plugin et je vais aller à des articles Portfolio. Et ces éléments de portefeuille sont tout simplement personnalisés post habitués les deux types de poste personnalisés. Et vous les ajouteriez tout comme vos messages réguliers si vous voulez écrire quelque chose en tant que blogueur. Donc, je vais juste ajouter de nouveaux. Et je vais appeler ça un article de portefeuille un ou dans le projet de portefeuille un et je vais le sauver. Et peut-être que je vais prendre un peu de Lorem Ipsum comme d'habitude. Où avons-nous ce générateur Lorem ipsum ? Et je vais juste prendre un peu de ça. Et je vais taper MLK rythme que n peut-être avec un espace comme ça. Et je vais peut-être aller au document et peut-être coller quelque chose comme notre extrait. Mais pas beaucoup, mais quelque chose comme ça. Ça devrait être bien. Et je vais aussi mettre une image en vedette peut-être à ce type. Et je vais publier ça. Et maintenant, je vais juste créer un, peut-être un couple de plus, peut-être trois autres projets. Non, fondamentalement de la même manière. Donc, je vais le faire tout de suite. Ok, nous avons trois objets de projet de portefeuille avec des images en vedette et du contenu à l'intérieur. Donc maintenant, nous allons réellement commencer à créer notre modèle. Je vais aller à l'oxygène, puis à des modèles. Je vais en ajouter un nouveau. Je vais appeler ça les articles du portefeuille de port. Je veux hériter du design de notre modèle de maintenance. Je veux, je veux avoir le même effet d'en-tête. Et puis je vais aller au singulier. Et je vais trouver des articles de portefeuille qui correspondent à notre portefeuille visuel ici. Je vais juste publier ceci et édité avec de l'oxygène. Et pour l'instant, tout ce que nous avons à faire est d'ajouter les mêmes éléments de mise en page que nous l'avons fait auparavant avec notre page de portefeuille. Donc, dans mon contenu interne avec cette structure, je vais ajouter une section qui va s'étendre sur toute la page. Parce que je veux dire, tu n'as pas à le faire. Si tu veux juste le garder comme ça, tu ne veux pas que tu n'aies pas besoin de ça. Comme une image de superposition, superposer un effet. Vous pouvez, nous pouvons juste le laisser, laisser cette page telle quelle. Ce sera aussi très bien. Donc, puisque je voudrais que mon image de fond change, je voudrais qu'elle corresponde à notre élément de portefeuille. Je vais aller à la taille et à l'espacement. Je vais choisir la pleine largeur comme mon comme ma taille. Et je ne veux pas avoir de rembourrage. Et maintenant ce que je voudrais faire est que je voudrais aller à l'arrière-plan, poursuivre l' option et choisir l'image de fond. Mais au lieu de la fonction de navigation, je veux cliquer sur l'option Données et je veux choisir post image vedette. Et ce sera, tirera notre, notre image vedette de notre base de données. Et bien sûr, comme vous comme d'habitude, je veux aller avec la couverture de la taille de fond. Pas de répétition. Et je veux le mettre au centre, donc 50% pour le haut et le bas. Et quand je veux superposer une couleur, donc encore une fois, je vais aller avec du noir simple et je vais laisser tomber l'opacité à quelque chose comme 77. Je suppose que ça devrait aller. Et je vais enregistrer cela parce que nous avons ajouté cette image en vedette comme, comme image d'arrière-plan. Chaque fois que nous changeons notre projet, vous pouvez voir que cette image change. Elle a été retirée de notre base de données. Bien sûr, peut-être que vous ne voyez pas que j'ai écrit. Permettez-moi d'aller rapidement à la taille et à l'espacement. Je vais augmenter la hauteur à 100 Vh. C' est donc notre projet, un projet pour et cetera. Donc, cette image d'arrière-plan va changer. Donc je vais sauver ça. Donc maintenant, ce que nous pouvons faire, ce que nous devons faire, c'est que nous devons ajouter les colonnes pour héberger notre contenu. Certains vont aller de l'avant avec des colonnes. Encore une fois, 50-50. Celui de gauche, je vais, je vais le mettre à 25. Donc, le rouge sera réglé à 75. Ce gars juste là. Donc, à ce stade, nous sommes prêts à commencer à remplir notre modèle en vaut la peine, certaines données extraites de notre base de données. Alors commençons à le faire dans la prochaine vidéo. 75. 11.11Ajoutez les données de portfolio dynamique: Donc, dans ma colonne de droite, cette div que nous pourrions réellement renommer, appelons ça portefeuille comme aiguille. Contenu du portefeuille. On y va. Qu' est-ce qu'on pourrait ajouter ici ? Eh bien, tout dépendra du portefeuille, de la mise en page du portefeuille unique que vous optez pour. Donc, tout d'abord, nous pourrions ajouter comme un titre de poste. Donc je vais y aller et je vais choisir WordPress. Et puis je veux choisir des données dynamiques. Et je vais aller de l'avant et choisir le titre. Puis aller, Nous avons obtenu le projet de portefeuille pour aller changer la couleur à cette couleur blanche ou la diapositive Gris, Peut-être que ce blanc, couleur presque blanche. On y va. Et bien sûr, nous pourrions toujours changer tous ces aspects. Vous pourriez les changer comme bon vous semble. Et bien sûr, lorsque nous allons de l'avant et que nous changeons notre, notre projet, vous pouvez voir que le titre change dynamiquement. Donc ci-dessous, nous pourrions peut-être ajouter comme un contenu de notre, de notre projet. Donc ce que je vais faire, c'est que je vais aller à Add. Et cette fois, je vais aller avec du contenu. Et comme vous pouvez le voir, mon contenu est extrait de la base de données. Et encore une fois, je vais changer la couleur du texte pour cette couleur plus claire. Mais ce que nous pourrions faire, nous pourrions peut-être aimer certains comme une description de notre projet, mais peut-être que nous aimerions ajouter d'autres éléments d'information sur la droite. Donc je vais prendre cette div et je vais ajouter du texte, un autre morceau de texte. Mais je vais juste cliquer à l'intérieur, saisir les données d'insertion. Et je vais juste taper sur un extrait. Et on va sauver ça. Maintenant, comme vous pouvez le voir, notre extrait est affiché ici. Disons maintenant que je voudrais mettre ces deux morceaux de texte l'un à côté de l'autre. Donc, je prendrais mon div et je dirais à ces éléments d'être empilés horizontalement comme ceci. Et on pourrait peut-être ajouter un peu d'espacement entre eux. Donc ce premier div, ce gars ici, ajoutons comme, voyons, peut-être comme 50 pixels de marge. Et puis je vais prendre ce morceau de texte, la taille et l'espacement. Et je vais ajouter comme 5050 pixels de, d'espace marginal. Maintenant, bien sûr, ces éléments sont comme liés au contenu. Ce projet de portfolio deux n'a que ce contenu, ce texte et cet extrait. Donc je vais sauver ce type. Je vais retourner voir mon administrateur. Et je vais aller à mes articles de portefeuille. Et je crois que c'était le projet 2. Et maintenant, chaque changement que nous faisons ici va être reflété dans notre page de projet de portefeuille de projets. Donc, comme je l'ai dit, notre mise en page, ce mécontentement, est lié à ce contenu. Alors. Partout où nous mettons ici, va être affiché dans notre projet de portefeuille. Il n'a donc pas seulement à être taxé. Par exemple, si nous voulons ajouter quelques images ici, nous pourrions, ou nous pourrions même ajouter un tout nouveau portfolio. Mais malheureusement ici à l'intérieur du capteur d'oxygène, rappelez-vous que nous devions ajouter comme une valeur de largeur pour, pour nos shortcodes. Et fondamentalement, ces gars ne fonctionneront pas vraiment, peut-être quand une mise à jour arrive. Mais pour l'instant, si vous cliquez sur cette mise en page visuelle du portefeuille et choisissez votre mise en page comme vous vous en souvenez, nous l'avons déjà créé pour notre page principale du portefeuille. Ça va marcher. Donc, si nous ajoutons simplement cette mise en page, donc si nous allons à notre page de projet de portefeuille, vous pouvez voir que nous avons notre titre, nous avons notre contenu, nous avons notre barre latérale. Et bien, cet extrait, et nous avons notre portefeuille ici. Mais bien sûr, nous avons aussi un peu de problème ici. Cette section ne s'étend pas sur toute la hauteur lorsque nous faisons défiler notre image et tandis que notre, notre, notre, page de portefeuille. Alors, comment pouvons-nous réparer ça ? Quand nous allons à, quand nous allons à notre, notre modèle et nous prenons notre section, nous pouvons voir que nous avons ce 100 Vh set juste ici. Si nous nous en débarrassons, Cette section va s'adapter au contenu qu'il héberge. Mais ce que nous voulons faire, c'est que nous voulons fixer la hauteur minimale à 100 Vh. Donc, il sera toujours, peu importe le contenu que vous avez à l'intérieur, il va toujours s'étirer sur toute la hauteur. Laisse-moi juste sauver ce gars maintenant, mais il s'adaptera aussi quand on fera défiler vers le bas. Donc maintenant, ça ressemble à ça. Lorsque nous enregistrons cela, actualisez la page, que la hauteur minimale est définie à 100 vh. Donc, il ressemble à ceci en ce moment, mais la largeur maximale est de ne pas définir inadapté défini sur 100 vh. Donc maintenant, nous pouvons faire défiler vers le bas et nous pouvons voir notre portefeuille juste ici. Et bien sûr, comme je l'ai dit, ceci, cette mise en page de portefeuille va être entièrement à vous de décider. Tu peux mettre à l'intérieur ce que tu veux. N' oubliez pas d'ajouter, comme les données dynamiques, le titre et le contenu et l'exercice. Si vous voulez créer quelque chose comme une barre latérale ici, si vous voulez comme numériser le travail qui a été créé ou la technologie qui a été créée. Nous allons utiliser pour créer ce projet spécifique. Mais la chose la plus importante est, est que vous verrez toujours, vous verrez toujours tout votre contenu serait alors votre projet de portefeuille spécifique, peu importe le projet que vous choisissez, il est toutes les données dynamiques et tout dépend de ce que vous avez ici. Vous le verrez toujours ici. Mais notre page de portefeuille, si je vais juste à notre page de portefeuille, passons au portfolio. Donc, notre page de portefeuille montre des images. Ça ne montre pas nos projets. Et alors, comment pouvons-nous réparer ça ? Alors réparons ça dans la prochaine vidéo. 76. 12.1Ajoutez les plug-ins du formulaire de contact: Dans les prochaines vidéos, nous allons jeter un coup d'œil à l'ajout d'une page de contact à notre site Web. Et si nous regardons maintenant notre page de contact, vous pouvez voir que nous n'avons qu'un en-tête et un pied de page simple. Donc, ce que nous devons faire est que nous devons ajouter quelques informations de contact entre l'en-tête et le pied de page et aussi un formulaire de contact. Bien sûr, vous n'avez pas besoin d'ajouter un formulaire de contact. Vous pouvez simplement entrer quelques informations de contact. Mais si vous voulez avoir un formulaire de contact, nous allons apprendre à le faire dans les prochaines vidéos. Donc la première chose que nous allons faire est d'ajouter un plugin, en fait quelques plug-ins. Le premier va être des formes fluides. C' est ce type juste là. Je vais l'installer et ensuite je vais le faire, et ensuite je vais l'activer. Et le prochain sera, je pense que le formulaire de contact le plus populaire est ce qu'on appelle le formulaire de contact 7, vous en avez peut-être entendu parler. Alors je vais le chercher. On va l'installer et je vais l'activer. Pourquoi ai-je choisi ces deux plug-ins ? Eh bien, il fait juste pour vous montrer que pour l'oxygène et fonctionne avec n'importe quel type de plug-in et que vous pouvez choisir celui que vous voulez. Et l'un de ces plug-ins, à savoir dans les formes fluides, est que vous n'avez pas besoin de faire beaucoup pour le faire fonctionner et regarder agréablement. Et je suppose que construire un formulaire est plus facile qu'avec le formulaire de contact. Mais le formulaire de contact est vraiment simple et flexible une fois que vous savez comment le faire. Donc, je veux juste élargir ton ensemble de compétences. Tu es un portefeuille qualifié. Si vous voulez simplement aller de l'avant avec un simple comme un générateur de formulaire de contact glisser-déposer. Vous pouvez le faire avec de l'oxygène. Et si vous voulez opter pour quelque chose de plus comme le faire vous-même, une sorte de plug-in, vous pouvez le faire aussi bien. Alors commençons par les formes fluides. Donc c'est ce gars juste là. Nous avons déjà comme une démo de formulaire de contact. Je n'en ai pas besoin. Je vais le supprimer et je suppose que nous sommes prêts à ajouter notre premier formulaire. Mais avant de le faire, nous avons besoin d'en avoir comme des conteneurs, comme un peu de place pour y mettre nos formulaires. Nous allons donc d'abord ajouter une section et du contenu à notre page de contact. Alors commençons à le faire dans la prochaine vidéo. 77. 12.2Construire la page de contact: La première chose que je vais faire est que je vais modifier ma page de contact avec de l'oxygène. Et je vais rapidement ajouter mon pied de page et mon en-tête réutilisables. Et entre eux, je vais juste ajouter une section. Et je vais le mettre là où il doit aller. Et maintenant, nous pourrions peut-être à certaines colonnes peut être quelques divs, mais gardons cela simple. Utilisons juste quelques actifs pré-conçus. Donc, je vais cliquer sur ajouter. Je vais aller de l'avant et choisir des ensembles de conception de bibliothèque. Peut-être que les sanctions atomiques et les éléments. Et nous allons peut-être prendre ce premier formulaire de contact. Comme vous pouvez le voir. Nous pouvons même nous débarrasser de cela, peut-être cette section, comme vous pouvez le voir, nous avons déjà comme une section de contact et de contact très simple prêt et nous attend. Et ici, vous pouvez voir qu'on a cette div et ça dit formulaire de contact ici. Oxygène fonctionne avec n'importe quel plugin de formulaires. Et c'est en fait un endroit où vous pouvez mettre votre formulaire de contact. Bien sûr, vous pouvez le mettre où vous voulez. Mais puisque nous voulons saisir ce design et nous voulons l'utiliser comme notre référence. Nous allons mettre notre formulaire de contact ici. Mais pour ce faire, permettez-moi d'abord de supprimer l'icône et le texte. Et ça va être notre formulaire de contact. Weekend peut même être renommé ce type juste pour qu'on puisse voir ce qu'on fait ici. Alors contact, on y va. Et à l'intérieur de cette div, cette div de contact, nous allons mettre notre formulaire de contact. Donc, nous allons maintenant d'abord créer le premier formulaire de contact, et mettons-le à l'intérieur de cette div. 78. 12.3Ajoutez le premier formulaire de contact: Alors laissez-moi juste aller de l'avant à notre, à notre plugin. Donc je vais prendre nos formes fluides. Et je vais ajouter un nouveau formulaire. Et nous pourrions créer un nouveau formulaire vierge. Mais je vais juste utiliser rapidement ce formulaire de contact de base. Et je vais cliquer sur créer un formulaire. Et ici, comme vous pouvez le voir, nous avons notre champ Prénom, Nom, adresse e-mail, sujet et votre message. Et lorsque nous survolons chacun de ces éléments, vous pouvez voir que nous pouvons changer certains aspects de l'esprit, que certaines fonctionnalités peuvent être disponibles uniquement, uniquement dans les versions pro de certains plug-ins. Mais généralement pour comme la forme de contact de base et de base des fonctionnalités, ils devraient suffire. Bref, une fois que vous avez fait tous vos ajustements et non, je ne veux pas vous ennuyer avec le, vous savez, clic et le changement dans chaque petit aspect de celui-ci. Je vous encourage à changer ou à vérifier toutes les options disponibles une fois que vous sélectionnez votre plugin de formulaire de contact. Mais pour l'instant, nous apprenons simplement à ajouter un formulaire de contact à notre page. Donc, une fois qu'il est prêt, je vais choisir On Click on Save formulaire. Et vous pouvez voir qu'ici, en haut, vous avez cet identifiant de formulaire courant est égal à deux dans ce cas. Et c'est en fait quelque chose qui s'appelle le raccourci, qui est fondamentalement un code qui permet aux travailleurs d'effectuer une opération spécifique. Dans ce formulaire, il nous permettra d'afficher notre formulaire de contact. Donc, une fois que nous l'avons copié dans notre presse-papiers, nous pouvons aller à l'éditeur visuel d'oxygène sur notre page en fait, juste ici à l'intérieur de cette div, nous ne pouvons pas simplement coller cela, ce raccourci de forme compacte dans. Ça ne marcherait pas. Nous devons d'abord ajouter un conteneur spécial pour ce raccourci pour que l'oxygène sache qu'en fait il est censé rendre ce raccourci. Et que ce module, cet élément est heureusement appelé un simple code court. Et quand nous collons ce raccourci dans cette boîte de raccourci complète, vous pouvez voir que notre code court est bien rendu ici. Donc, quand nous allons maintenant à notre formulaire de contact or page de contact, je vais cliquer sur contact. Vous pouvez voir que nous avons préparé notre formulaire de contact et nous attendons. Et n'oubliez pas que nous pouvons toujours faire un changement comme cet alignement du centre vers la gauche. Nous pourrions aussi jouer avec ce rembourrage juste ici de cette div. Mais si vous voulez changer certains aspects de ce formulaire de contact, vous devez le faire à partir de cette interface de plug-ins spécifique parce que cela rend juste notre raccourci et la façon dont il a été mis en place ici dans ce plugin. Donc, voici comment vous pouvez entrer un simple code court, formulaire de contact simple. Et maintenant passons à notre prochain plugin de formulaire de contact, qui est appelé formulaire de contact sept. Et ce plug-in est peut-être un peu plus difficile, je suppose pour commencer. Mais c'est certainement, certainement la peine d'apprendre parce que cela vous donne beaucoup de possibilités. Passons ensuite à ce plug-in. 79. 12.4Ajoutez le formulaire de contact 7: Donc, notre deuxième plugin de formulaire de contact est appelé formulaire de contact 7. Tout d'abord, permettez-moi de créer un nouveau formulaire de contact. Donc, à partir du menu plug-in, je vais juste cliquer sur ajouter nouveau. Et je vais l'appeler mon formulaire de contact. Et comme vous pouvez le voir, il est livré avec certains codes pré-installés et vous savez, comme les champs pré-installés que vous pouvez utiliser. Mais si vous voulez ajouter un peu plus, vous pouvez choisir dans cette barre de menu, je suppose ici en haut. Et fondamentalement, la façon dont cela fonctionne est comme n'importe quel autre formulaire de contact, tout autre plugin générant de code court. Donc, quand nous allons à nos formulaires de contact, nous pouvons saisir ce raccourci de formulaire de contact. Je vais le copier. Encore une fois, allez à notre page sur l'oxygène. Et maintenant, au lieu de ces raccourcis de forme fluide, nous pouvons coller et ce contact à partir de sept shortcodes. Et comme vous pouvez le voir, nous avons obtenu notre code court et notre formulaire de contact créé et le coller dans. Mais comme vous pouvez le voir, il a l'air horrible et il ne horrible que dans le backend quand vous allez à l'extrémité frontale, il est complètement déstylé. Et c'est, je suppose, l' un des plus grands défis, je suppose que chaque concepteur ou même développeur fait face quand il travaille avec ce formulaire de contact, il est complètement déstylé parce qu'il vise à être vraiment léger et rapide. Donc, il n'y a pas de style lui est attribué quelque chose. Et c'est quelque chose que nous devons faire manuellement et vous pouvez le faire par un plug-in. Vous pouvez saisir un autre plug-in et simplement utiliser des modèles. Vous pouvez les découvrir par vous-même. Mais ce que je voudrais que vous compreniez et appreniez est comment ajouter du code personnalisé ici à l'intérieur de l'oxygène. Cela peut être un peu plus avancé, mais ça vaut certainement la peine. Et, euh, une fois que vous serez mieux dans le développement de sites Web, vous aurez certainement voulez utiliser, sinon, éditer le code, au moins juste saisir du code que vous le trouvez en ligne et ensuite il suffit de le coller dans le de l'oxygène. Alors faisons ça dans la prochaine vidéo. Voyons comment nous pouvons appliquer un code pré-rendu liquide que j'ai pré-rendu le pré-écrit ici dans un formulaire de contact que vous pouvez ajouter à votre formulaire de contact, sept formulaires. 80. 12.5Style du formulaire de contact: Donc, si nous voulons savoir comment styler votre formulaire de contact sept, nous pouvons aller au formulaire de contact sept et composer. Mettons-le comme ça. Et puis nous allons au formulaire de contact officiel 7 page. Vous pouvez voir que nous avons obtenu quelques belles informations que vous pouvez simplement simplement copier et coller afin que vous puissiez styler votre formulaire de contact n. Eh bien, c'est très pratique. Je vous recommande de garder ce côté à portée de main. Mais ce que je recommanderais certainement encore plus est de garder ce code à portée de main. C' est le code que j'ai écrit que vous pouvez utiliser. Certainement, laissez-moi juste nettoyer un peu. Et nous allons l'appliquer à notre formulaire de contact. Et vous verrez à quelle vitesse nous allons changer l'apparence de notre formulaire de contact et vous verrez ce que fait ce code. Donc ce que je vais faire, c'est que je vais juste copier toutes ces règles CSS. On va retourner à l'oxygène. Donc, à partir du panneau de gestion, puis feuilles de style, je vais cliquer sur ajouter une feuille de style. Et je vais l'appeler contact, formulaire de contact. Et je vais cliquer sur OK. Et comme vous pouvez le voir, ce que nous obtenons est cette toile vierge, je suppose que la fenêtre vide, où nous pouvons réellement ajouter notre CSS personnalisé et personnalisé. Donc ce qu'on doit vraiment faire, c'est juste coller ce deux-points. Et comme vous pouvez le voir, tout ce formulaire de contact change en un instant. Et si vous jetez un oeil à ces sélecteurs ici, vous pouvez voir qu'ils se rapportent à notre, à notre entrée. Pas de champs de texte, e-mail, zone de texte, qui est ce gars juste ici. Ce type est notre bouton de soumission, ce gars juste là. Et tout cela, toutes ces règles CSS sont assez faciles à comprendre. Tout ce que nous faisons ici, c'est que nous faisons la largeur 100%. Nous disons que la famille de polices est censée être rubato, la police que j'ai choisie. Si basique, fondamentalement, vous pouvez utiliser vos polices Google ici. Et on peut peut-être, parce que quand on survolera ce type ici, voit qu'il change de couleur, recueille un gris très, très clair. Mais je veux saisir ma couleur par défaut. Je pense que c'était des styles globaux. Je vais aller aux couleurs et aux couleurs par défaut. Et c'est, c'est, c'est ce brun copié. Je vais retourner à mon formulaire de contact Stylesheet et je vais juste remplacer ce contact. Cette couleur de fond a plané sur cette communauté d'énergie de couleur brune quand tu survoles, ce type change comme ça. Donc je vais sauver ce type. Et puis je vais juste rafraîchir la page. Et vous pouvez voir que nous avons obtenu notre formulaire de contact créé, et bien sûr, il fonctionne correctement. Mais tous ces éléments doivent être pris en charge comme cette exigence champs tous ces messages. Ils, ils doivent être pris en charge à partir de ce plug-in, une interface plug-in juste ici. Donc nous avons notre label juste ici. On a reçu cet e-mail, on a ton sujet. Et bien sûr, nous devons dire à quel e-mail ce sera toutes les soumissions de formulaire doivent aller. Tu as le corps du message. Vraiment. Au début, ce plugin peut sembler un peu difficile à apprendre, mais une fois que vous donnez juste quelques minutes, quelques minutes, vous verrez qu'il est en fait assez facile de comprendre ce qui est, ce qui se passe ici. Alors on y va. C'est à quel point il est facile d'ajouter un formulaire de contact ici à l'intérieur d'un oxygène. Et comme je l'ai déjà dit, vous ne pouvez pas simplement laisser vos pages de formulaire de contact avec quelques informations de contact simples comme ici. Mais si vous voulez ajouter un formulaire de contact, vous devez ajouter un plugin de formulaire de contact. n'y a pas comme un module intégré à l'intérieur de l'oxygène comme il y a un indivi, engourdi, mais je suppose que cela vous donne plus de flexibilité, quel que soit le plugin que vous voulez utiliser pour vos formulaires de contact, vous pouvez l'utiliser ici à l'intérieur de l'oxygène et c'est juste une question d'ajouter un raccourci. Au fait, pouvons-nous éditer où vous voulez ? Quand on ira sur notre page, je vais aller à ma structure. Je vais juste dupliquer ce code court. Et disons que je veux l'éteindre. Je ne sais pas. Disons peut-être quelque part ici. Vous pouvez voir que le raccourci est affiché ici. Donc, peu importe où vous l'avez mis, vous allez voir votre formulaire de contact. Exactement où vous, où vous mettez votre, votre côté court et cohérent de cette structure et ces couches. Alors on y va. C' est ainsi que vous pouvez créer un formulaire de contact ici à l'intérieur de l'oxygène. Comme vous pouvez le voir, c'est aussi simple que d'ajouter un simple code court, un simple plug-in, et vous êtes prêt à partir. 81. 13.1Explorez la conception du bureau d'avocat: Dans les prochaines vidéos, nous allons apprendre à créer un site, bien sûr à l'intérieur de l'oxygène. Et cette fois, nous suivrons un certain design. Celui-ci serait d'apprendre tout ce qu'il y a à savoir sur l'oxygène. Nous allons plutôt nous concentrer sur la création réelle de la base du site sur une base sur un design. Et j'ai décidé de créer un site Web d'avocats qui sera à peu près basé sur cette conception. Et je viens de décider que c'est, il a, ce n'est peut-être pas comme le meilleur design au monde, mais il, il a juste comme le plus, le plus typique et les composants dans un site comme celui-ci. Donc on a un en-tête collant juste ici. Et cet en-tête n'est pas trop compliqué, mais pas trop simple. On a des informations ici, logo et un menu. Ensuite, on a un curseur. Vont-ils prier de grogner comme un sac glisseur de sol avec du texte juste ici. Et puis on a eu du texte, des images comme ces images sont, elles n'ont pas l'air si géniales. Nous allons donc échanger cette section ici. Peut-être que nous le ferons, nous ferons des effets de parallaxe. Ensuite, nous avons quelques icônes ici avec des effets de transition. Nous le ferons aussi. Mais peut-être que nous ferons un effet de transition différent. Ensuite, nous avons une section avec, avec quelques textes, nous avons une section équipe, et nous avons un autre curseur avec quelques témoignages, un blog, un simple blog, réel, juste ici. Une autre section avec une image d'arrière-plan et un texte superposé. Nous avons un, nous avons un formulaire de contact juste ici, comme une section contact et un pied de page simple. Donc, dans l'ensemble, nous avons beaucoup d'éléments que vous pourriez vouloir utiliser et créer dans un site Web typique. J' ai donc pensé que ce serait un bon point de référence pour nous. Aussi, j'ai mon design ici, donc j'appelle Pete. J' ai pris une capture d'écran de ce site et cela m'a permis de créer un système de conception comme un design très, très simple, un système pour notre site. Nous avons donc obtenu les couleurs que nous allons utiliser dans notre conception. On a les polices. Donc pour le titre, donc nous allons utiliser le texte pourpre et les balises de corps seront ouverts sens. Et ces deux polices de caractères sont Google Fonts, caractères, j'ai rapidement créé un logo simple, qui est fondamentalement une lettre L pour les prendre à partir de la police de caractères de texte pourpre et mettre sur un fond rond. Et je viens de télécharger quelques icônes de l'icône plate et j'ai ajouté que, cette même couleur rouge pâle et à ces éléments. Et j'ai aussi ajouté quelques images, donc ce sont mes icônes. J' ai aussi quelques images pour notre curseur, pour notre équipe et pour certains effets d'images de parallaxe ou d'arrière-plan. Et je vais télécharger toutes ces images sur notre site Web. Donc je suppose que nous sommes prêts à, prêts à commencer à créer notre design. Et nous allons créer ce design sur une toute nouvelle installation WordPress. Et c'est un vrai serveur, donc vous pourrez voir ce design plus tard. Et la première chose que nous allons faire est que nous allons ajouter comme une page d'accueil ou peut-être simplement ajouter un menu simple et simple, puis commencer à créer notre, notre page, notre site en oxygène. 82. 13.2Ajouter les éléments du menu: J' ai donc décidé de créer un menu simple pour mon site. Allons donc à Apparence et menus. Et ici, comme vous pouvez le voir, je n'ai qu'une page. Ce sera notre page d'accueil, et voici cette page ici. Et j'ai également décidé d'ajouter quelques éléments de menu simples comme des domaines de pratique, des avocats, des études de cas, des blogués et des contacts. Et comme vous pouvez le voir, ce sont tous des liens simples et simples. Ils ne sont pas liés aux pages réelles. Et si vous voulez le faire, vous pouvez simplement aller à des liens personnalisés pour l'URL, suffit de taper le symbole de hachage. Et pour ce texte de lien, je suppose que nous pourrions peut-être taper quelque chose comme trois citation gratuite, ajouter cela à notre menu. Et comme vous pouvez le voir, ce lien personnalisé est ajouté à notre menu. Mais je ne veux pas avoir comme un lien de devis gratuit ici parce que nous allons ajouter un bouton à notre, à notre menu. Et donc je vais juste l'enlever. Mais c'est la façon dont vous créez comme un manuel factice ici à l'intérieur, ici à l'intérieur de WordPress. Il suffit donc d'ajouter des liens personnalisés si vous ne voulez pas ajouter les pages et vous seriez fondamentalement bon d'y aller. Donc, une fois que nous, une fois que nous avons le menu, nous allons tours Paramètres, Lecture, et nous allons nous assurer que nous sommes réellement vus. Notre page d'accueil statique est notre page principale. Et quand nous allons sur notre site, vous pouvez voir que nous n'avons rien ici. Et c'est parce que nous devons d'abord créer un modèle que notre principal, modèle principal pour l'en-tête et pour le pied de page. C' est ce que je vais faire à partir de la prochaine vidéo. 83. 13.3Ajoutez le modèle principal13: Alors ajoutons notre modèle principal et je vais aller à l'oxygène, puis les modèles. Et ici, je vais ajouter un nouveau modèle que je vais appeler main. On y va. Et quand nous allons à l'autre, et puis nous allons choisir attraper tout. Cela va juste signifier que ce modèle va rendre toutes les pages sur notre, sur notre site. Et je vais juste frapper Publier. On y va. Alors maintenant, je vais cliquer sur éditer avec de l'oxygène. Et avant de commencer à mettre certaines choses à notre modèle avant de commencer à ajouter l'en-tête et le pied de page et le contenu interne, ajoutons réellement nos éléments de conception. Alors ajoutons les couleurs. Réglons la police. Donc je vais prendre rapidement ou la première couleur, ce gars juste ici. Et puis je vais retourner à l'oxygène. Et maintenant, je vais gérer les paramètres. Ensuite, je vais aller aux styles globaux, aux couleurs. Et ici, je vais ajouter un jeu de couleurs. Je vais l'appeler avocats TM. Je vais ajouter cet ensemble et je vais commencer, commencer à ajouter d'autres couleurs. Donc notre première couleur sera comme le bleu foncé. Et je vais l'ajouter ce hashtag, ce code hexadécimal en fait. Alors je vais prendre notre couleur rouge. Donc je vais copier cette couleur à la couleur, je vais l'appeler un rouge pâle à cette couleur. Puis encore une fois, je vais saisir cela comme la couleur presque noire, je crois, ajouter de la couleur. Je vais l'appeler. Appelons ça. Appelons ça le texte. Ce sera notre couleur de texte. Alors je vais juste, je vais ajouter cette couleur blanche. Laissez-moi revenir en arrière et colorier. Je vais juste l'appeler White. Et je suppose qu'on pourrait même l'attraper de notre sélecteur, pas de la plaque. Je veux qu'il soit blanc. On y va et on va prendre cette couleur rose. On y va. Est de revenir à l'oxygène et à la couleur. Et on va l'appeler clignotant. Et ce code à la couleur. Et je vais tout sauver. Donc il a 12345 couleurs et je suppose que c'est un bon début. On peut le laisser comme ça. Mais maintenant, je veux ajouter les polices. Donc notre police d'affichage est le texte pourpre ? Donc, si vous ne pouvez pas le voir ici, tapez simplement du texte pourpre. Et on y va. Et notre police de caractères pour la police de texte sera ouverte. Sans. On y va. Et je vais juste sauver ça. Maintenant, nous avons nos couleurs, nous avons nos polices. Donc maintenant, nous sommes en fait prêts à commencer à ajouter du contenu à, à notre modèle. Alors commençons à le faire ensuite. 84. 13.4Ajoutez l'en13.4Ajouter l'enl: Donc, notre modèle de maintenance va essentiellement héberger notre en-tête, le contenu interne et le pied de page. Donc je vais juste commencer par notre en-tête. Donc, je vais aller de l'avant et cliquez sur Ajouter et tapez dans l'en-tête. Et je veux choisir le générateur d'en-tête. Et à l'intérieur de ce constructeur d'en-tête, nous avons bien sûr notre ligne d'en-tête. Donc, notre ligne d'en-tête, si nous regardons nos langages de conception, montez, montez, montez, tout le chemin jusqu'ici. Il a tout simplement comme un fond sombre. On a un logo sur la gauche. Il faut, il faut un menu et quelques informations supplémentaires avec quelques icônes ici. Et donc nous allons ajouter tous ces composants, mais peut-être que nous allons changer un peu la mise en page. Je ne suis pas un grand fan de la façon dont cette mise en page est présentée ici. Je veux les mettre et le menu sur la droite et le logo au centre. Mais je pense que ces types peuvent rester ici. Donc ce que je vais faire c'est que je vais d'abord ajouter une couleur de fond à mon, à mon menu. On y va. Je vais le sauver. Et maintenant, je vais juste ajouter un logo. Donc, pour cela, je vais cliquer et, et je vais taper une image. Et je vais essayer de le trouver à partir de mon, je vais essayer de le trouver dans ma médiathèque. C' est ce type ici et je vais juste coller ça. Aller à l'enregistrer et actualiser la page. J' ai mon logo ici, mais c'est, je pense que c'est un peu trop gros. Essayons quelque chose comme 50 pixels. Je suppose que ça devrait être à droite. Et je voudrais savoir, il suffit de taper le texte des avocats ici en plus de ce logo L. Donc ce que je vais faire, c'est que je vais juste cliquer sur ajouter. Et je vais taper le cap. Je vais cliquer sur ajouter. Et je vais changer la couleur du texte pour cette couleur blanche. Ou peut-être allons-y avec la couleur rouge et nous allons taper les avocats épingles. On y va. Et nous allons changer la taille de ce texte. Et laisse-moi voir quelque chose comme 32. Je suppose que ça devrait être bien. Et quand on va à la typographie, je veux la faire capitaliser. Et peut-être que je vais entrer comme un pixel pour l'espacement des lettres. Ça devrait être bien. Et quand nous allons à notre structure, vous pouvez voir que cela a réellement rencontré cette image et ce titre est mis dans cette rangée, colonne partie gauche, je suppose. Mais nous ne pouvons pas réellement sélectionner, nous ne pouvons rien faire à ce sujet. Et je voudrais peut-être ajouter un peu d'espacement entre ces éléments. Mais ce que je voudrais vraiment faire est de m'assurer que ces gars sont bien centrés verticalement les uns par rapport aux autres. Donc ce que je vais faire, c'est que je vais simplement attraper ce calque d'image et je vais cliquer sur div rapide. Mettez que cela avait un aperçu que div. Et lorsque le diff est sélectionné, je vais m'assurer que mes éléments enfants sont empilés horizontalement. Là, nous allons, et que l'alignement vertical est réglé au milieu. Ensuite, je peux juste prendre l'image et peut-être ajouter un peu d'espace dans le canard signé. Sélectionnez dix pixels de marge. Peut-être moins que ça. Cinq devraient l'être. D'accord. Et peut-être ajoutons un peu d' espacement pour notre, pour notre rangée. Donc je vais aller à la taille avancée et l'espacement. Et essayons comme peut-être 25 pixels de rembourrage haut et bas. Ou peut-être même plus que, que, voyons 35. Je suppose qu'on pourra changer ça plus tard. Ainsi, comme vous pouvez le voir en quelques clics, nous avons ajouté notre logo. Peut-être que je vais juste rendre ce gars un peu plus petit à quelque chose comme 42, peut-être même 36, ou peut-être même quatre. Allons-y avec 40. Mais il y a de la chance petit problème avec elle. Je veux dire, je veux que les gens puissent cliquer sur ce logo s'ils veulent retourner à notre première page. Et comme vous pouvez le voir en ce moment, je peux cliquer sur l'un de ces éléments. Donc je vais prendre mon div. Et ici, dans le coin supérieur gauche, je vais cliquer sur cette option de paramètres de lien. Et cela va réellement envelopper cette div entière dans un lien. Et pour l'instant, je vais juste, je vais juste sélectionner cette page d'accueil, puis ajouter le lien. Donc maintenant à chaque fois que quelqu'un clique sur ce div sur ce lien, rappeur, lui nous étions, elle sera dirigée vers notre page principale. Donc je vais sauver ce type. Et je suppose que nous avons notre logo complet. Alors maintenant, nous allons peut-être ajouter comme ça des informations supplémentaires, ces gars juste ici sur la droite. Et puis ajoutons notre menu. Alors commençons à le faire ensuite. 85. 13.5Ajoutez le menu: Alors commençons avec ces gars, puis, les icônes et le texte. Ce que je vais faire, c'est ajouter une icône. On y va. Mais je veux m'assurer que cette icône est placée ici dans la rangée, non ? Et bien sûr, je vais changer ce type de couleur pour notre couleur rouge. Et je vais le changer de pouce à quelque chose comme un téléphone. Je crois que c'était OU téléphone. Allons-y avec celui-là. Et ici, nous avons ces options de style d'icône pour que nous puissions aller avec contour, solide ou non. Je vais aller avec solide. Et je vais changer la couleur de l'icône peut être à notre, ceci notre couleur sombre principale. Et je vais changer la couleur de fond pour notre couleur rouge comme ça. Et bien sûr, changeons la taille à quelque chose de beaucoup, beaucoup plus petit. Quelque chose comme peut-être 12. Et nous allons changer l'espace autour de l'icône pour quelque chose comme peut être dix. Je suppose que ça devrait aller. Bien sûr, nous pourrions jouer avec ces valeurs peut être comme faire l'espace autour de l'icône à quelque chose comme cinq. Faites l'icône comme certains comme 16. Cela va être totalement, totalement à vous avoir une liberté totale quand il s'agit de créer ces icônes ou d'ajuster ces icônes ici à l'intérieur d'un oxygène. Donc, à côté de cette petite icône, nous devons ajouter le texte. Donc, je vais juste cliquer sur ajouter, puis le texte. Laisse-moi juste cliquer sur ce type ici. Et je crois que c'était le numéro de téléphone. Alors faisons comme 180080555. Pourquoi pas ? Et changeons la couleur du texte en blanc. Et nous allons peut-être changer leur taille de police à quelque chose comme dix peut-être. Ou 12. Je suppose que 12 devrait être, ça devrait aller. Et aussi, ajoutons peut-être une marge à notre icône. Alors passons à Taille avancée et espacement. Et ajoutons quelque chose comme Voyons, cinq pixels de marge. Je suppose que ça devrait aller. Donc maintenant, quand nous voulons ajouter un autre ensemble composé d'une icône et d'un texte, si nous devions juste dupliquer ce gars et ce gars, nous devrions quand même changer comme le positionnement de ces éléments. Donc je vais prendre ce texto et le mettre ici. Et peut-être ajoutons un peu d'espacement. Encore une fois, la taille avancée et l'espacement. Faisons quelque chose comme Stan, dix pixels de marge. Je suppose que ça devrait être bien. Changons cette icône pour aimer l'icône de courrier, quelque chose comme ça. Peut-être de l'enveloppe. Celui-ci serait mieux. Et changeons ce texte. Aimons le contact chez les avocats. Lawyers.com était le faire comme ça. Peut-être sans l'apostrophe. Faisons juste lawyers.com. Ça devrait aller. Donc, l'étape suivante serait simplement d'ajouter un menu sous ces éléments, donc sous ces morceaux de texte. Mais avant cela, je voudrais juste vérifier la réactivité parce que c'est une bonne idée de vérifier la réactivité au fur et à mesure que vous allez, juste pour éviter quelques mauvaises surprises. Plus tard, une fois que vous avez ajouté d'autres éléments de votre conception à votre site. Donc, avant de commencer à ajouter notre menu, vérifions la réactivité. Dans la vidéo suivante. 86. 13.6Vérifiez l'adaptation.: Alors maintenant, vérifions comment notre hétéro-hétéro-se comporterait sur des appareils plus petits. Alors passons à la page conteneur 1120 et ci-dessous. Ça a toujours l'air bien, 992. C' est bien à 768. Maintenant, tous ces éléments commencent à paraître un peu trop exigus à mon goût. Donc ce que je vais faire est que je vais juste retourner à tous les appareils, vais attraper le constructeur d'en-tête, ou nous pourrions saisir la ligne d'en-tête si nous le voulions. Et puis juste ici, vous pouvez voir la pile verticalement en dessous de l'option. Donc, lorsque nous choisissons la pile verticalement en dessous de 768, lorsque nous atteignons ce point d'arrêt, vous pouvez voir que nos éléments commencent à paraître beaucoup, beaucoup mieux. Mais aussi peut-être attrape notre logo. Donc c'est ce lien juste ici. Et peut-être qu'on pourrait ajouter un peu plus d'espacement comme ça. Cela devrait être, cela devrait être correct. Donc je suppose que quand on va au 488 semble toujours bien. Donc maintenant, nous pourrions simplement saisir notre menu comme un élément manuel pro par exemple, et juste le mettre sous ces éléments ici. Donc, ce numéro de téléphone et l'adresse e-mail juste ici. Alors commençons à le faire dans la prochaine vidéo. 87. 13.7Ajoutez les éléments du menu: Donc, à partir de notre panneau d'outils, ajoutons un menu. Et je vais aller avec la pro manie. Et bien sûr, je ne veux pas le mettre ici. Je veux le mettre ici. Mais comme vous pouvez le voir, ça n'a pas l'air si bon. Je veux dire, nous voulons que ce menu soit PUT sous nos éléments ou sous ces icônes et ces morceaux de texte. Donc, je suppose que ce que nous pourrions faire est que nous pourrions simplement saisir ces éléments et les envelopper avec un div, parce qu'en ce moment, ils sont un aperçu technologique des beans et le même div et ils sont placés horizontalement à côté de l'autre. Donc ce que je vais faire, c'est que je vais d'abord attraper cette icône et rapide avec un div, mettre ce texte à l'intérieur. Ensuite, prenez cette icône et rapide avec un div et mettez le texte à l'intérieur. Mais bien sûr, ces gars ne devraient pas ressembler à ça. Donc, je vais attraper le div et je vais empiler les éléments enfants horizontalement et les aligner au milieu. La même chose pour ce type. Empilez-les horizontalement et alignez-les au milieu. Mais bien sûr, cela ne résout pas notre problème. Donc, ce que nous avons encore à faire est que nous pourrions simplement envelopper tous ces éléments dans 1. y compris le menu pro. Donc ce que je vais faire, c'est que je vais ajouter un autre div. Donc je vais juste envelopper, ce gars n'ajouterait pas de div, mettait ce div à l'intérieur, et puis mettons-le div à l'intérieur ici. Donc, à ce stade, ce que nous voulons faire, c'est que ces éléments soient placés horizontalement l'un à côté de l'autre. Mais en même temps, nous voulons qu'ils soient mis à droite et bien sûr, au-dessus de notre menu. Donc, avec ce div majeur sélectionné, ce conteneur principal sélectionné, en fait, vous pourriez peut-être même l'appeler principal. Comme ça juste pour qu'on puisse voir ce qui se passe ici. Ce type sélectionné, je vais juste m'assurer que tous ces éléments sont mis du bon côté. On y va. Et puis je vais attraper cette div, et je vais l'envelopper avec un autre div et mettre cette div à l'intérieur de cette div. Donc il y a beaucoup de divs ici. Mais peut-être que quand je changerai de nom, renommons ce type. Donc ça va être ceci, ce sera nos coordonnées. On y va. Donc en ce moment, cette div héberge ce numéro de téléphone et ces coordonnées. Et bien sûr, à l'intérieur de ces gars, nous avons notre icône et notre texte. On y va. Et chacun de ces divs, donc celui-ci et celui-ci affichent nos éléments enfants horizontalement. Mais nous voulons que ces informations de contact principales, div affiche aussi ces éléments horizontalement. Et en ce moment, le, ce div les affiche verticalement. Donc, quand nous cliquons sur des éléments enfants de violoncelle en stock horizontalement, vous pouvez voir qu'en ce moment nous avons eu l'effet que nous recherchions. Et à ce stade, nous pourrions peut-être ajouter un peu, comme un peu d'espacement. Voyons voir, peut-être 25 ans. Ça pourrait être trop comme. Alors ça devrait être correct. Maintenant, nous pouvons passer à notre menu pro. Donc je vais juste l'attraper. Je ne vais pas passer trop de temps ici. Je veux juste le faire paraître ici sur le bureau et sur, et sur les smartphones, je suppose. Donc je vais prendre le menu du bureau, l'option, topographie, et je vais changer la couleur en blanc. Je vais mettre tous ces éléments en majuscules. Je vais changer la taille pour, disons 14. Peut-être même 13. Ça devrait être bien. Laissez-moi revenir à la frontière d'alignement de l'espace. Et peut-être que j'ajouterai une marge à gauche. Voyons voir comme dix. Je suppose que 10 devrait aller bien, peut-être allons-y comme 15. Pourquoi pas ? Et enfin, je vais revenir à la typographie et je vais ajouter comme un pixel d'espacement des lettres juste pour que ces éléments ressemblent à ça, voyons peut-être 14. Oui, allons-y avec 1414 pixels. Je vais enregistrer ceci et nous pouvons effectivement aller à notre première page et actualiser cela fait adresse. Et on y va. C'est ce que notre, quoi ressemble notre en-tête en ce moment, mais bien sûr, nous devons toujours prendre soin de la réactivité de nos éléments de menu. Donc, je vais juste revenir en arrière et je suis avec mon menu pro, menu sélectionné. Je vais y retourner quelques fois. Et je veux que ce menu soit en fait, vous savez, mobile quand vous menez, une fois qu'on aura atteint le point d'arrêt 768. Donc, quand nous allons à 768, notre menu commence à s'effondrer vers une version smartphone. Mais bien sûr, nous devons changer certaines choses à ce sujet. Donc, modifions la mise en page de l'icône Ouvrir. Je ne veux pas avoir le message. Et je pense que je veux avoir les barres simples comme ça. Et je vais changer la couleur en blanc. On y va. Je ne pense pas que je veux avoir un rembourrage ici, ou peut-être juste comme cinq pixels, mais pas, pas trop. Et bien sûr, ce que nous voulons, c'est que nous voulons que ce menu soit mis ici au centre. Donc, je vais attraper ce conteneur principal, ce div principal, et je vais cliquer sur cette pile enfants éléments verticalement, même si elle est définie par défaut. Lorsque nous cliquons dessus, nous pouvons revoir tous ces éléments. Et je vais cliquer sur le centre d'alignement horizontal des éléments. Et notre menu est bien centré comme ça. Mais bien sûr, lorsque nous cliquons dessus, ce menu ne semble pas trop bien avec. On doit encore le réparer. Donc je vais aller au menu mobile. Je vais d'abord aller à l'arrière-plan. Et je pense que je vais choisir notre sombre fond comme ça. Laisse-moi revenir en arrière maintenant. Je vais fermer la mise en page des icônes. Et je vais changer ces barreaux. Je vais juste utiliser cette icône de croix. Je ne veux pas, je ne veux pas, je n'ai pas besoin de textos. Je vais changer la couleur en blanc. On y va. Alors maintenant, prenons soin de notre topographie, de la mise en page de notre topographie. Alors revenons en arrière. Allons à Styles de menu. Et je veux que les éléments soient alignés au centre. Alors sauvegardons ce gars et rafraîchissons notre page. Et vérifions réellement à quoi cela ressemblera sur les plus petits appareils. Et là, nous allons avec ceci est notre, c'est notre menu mobile. Encore une fois, je ne veux pas le rendre trop chic. Je laisserais le soin de vous si vous voulez ajouter un peu de transparence et peut-être jouer avec cette icône ou quelques effets survolants. Ça va être totalement à vous de décider. Je voulais juste le rendre simple et simple juste pour ce menu fonctionne comme il se doit. Bien sûr, on pourrait peut-être ajouter une certaine marge. En fait, passons à la taille et à l'espacement. Bien sûr, j'ai mon menu pro actif, et ajoutons peut-être quelque chose comme 12 pixels de marge. Et on y va. Lorsque nous allons sur tous les appareils, c'est à quoi ressemble notre en-tête de menu. Et une fois que nous atteindrons ce 768, voici à quoi ressemblera notre menu sur les petits appareils, comme les tablettes et les smartphones. Et en passant, si vous voulez, par exemple, à ce point d'arrêt avant 68 ou même 7068, si vous voulez, si vous voulez que ces éléments soient empilés verticalement, ou vous devez faire est de saisir notre info de contact div. Et encore une fois cliquez sur empiler les éléments enfants verticalement, puis faites-les centrer comme ça. Et bien sûr, on pourrait encore ajouter un peu d'espacement. Donc je vais prendre ce numéro de téléphone. Ce numéro de téléphone div, et je suis peut-être essayons juste comme dix pixels. Et ça devrait être bien. Bien sûr, c'est une option. Tu n'as pas à le faire. Mais vous savez, avec l'oxygène, vous obtenez beaucoup de flexibilité en termes de conception de ces éléments. Je pense que je vais retourner là où c'était avant. Je pense que ça a l'air un peu plus propre. Et oui, on y va. On a notre en-tête. Bien créé. Mais une chose que je voudrais faire est que je voudrais ajouter comme un en-tête collant. Comme vous pouvez le voir, nous avons un en-tête collant comme celui-ci sur notre conception de référence similaire. Alors commençons à prendre soin de notre en-tête et collant dans la prochaine vidéo. 88. 13.8Ajoutez l'en-tête collée: Alors maintenant faisons ce truc d'en-tête collant. Donc nous avons cet en-tête, c'est notre en-tête normal. Mais nous voulons l'ajouter comme une version plus petite d' un en-tête une fois que l'utilisateur fait défiler vers le bas sur notre page. Donc on a cette ligne d'en-tête, je vais la dupliquer. Et disons que pour mon, mon bâton Keller, je ne veux pas voir ces informations, ces informations ici. Donc je vais juste les enlever. Donc je vais chercher des infos de contact et je vais juste l'enlever. On y va. Je viens juste d'avoir le menu. Et je suppose qu'on pourrait peut-être même le faire ici. Et nous n'avons pas besoin de cette div. Et je vais le rendre plus petit. Donc, pour la typographie manuelle du bureau, je vais faire comme peut-être dix pixels. Ça devrait être bien. Et pour notre logo, laissez-moi juste saisir le logo. Rendons l'image plus petite, peut-être 25. Et la police, faisons-le 25. Ou peut-être même moins que ça, voyons 18. Donc, pour que cet effet d'en-tête collant fonctionne correctement, nous devons attraper notre constructeur d'en-tête. Et ici, pour l'option Sticky, choisissons l'en-tête collant activé. Et je pense que je vais laisser la distance de défilement telle quelle, mais je veux fondu sur l'en-tête collant pour s'estomper. Et je vais rendre cette animation plus rapide. 0,2 seconde. On y va. Et maintenant, je vais juste sélectionner cette ligne qui est censée être collante. Et peut-être que je vais juste diminuer cette valeur de remplissage à, disons dix pixels comme ça. Et je vais retourner à l'onglet primaire, et je veux seulement le montrer en collant. On y va. Et cette première ligne d'en-tête, je veux le cacher en collant. Donc, je vais enregistrer mon menu, va enregistrer ma page. Et puis laissez-moi juste rafraîchir la page. Et pour l'instant, nous ne serons pas en mesure de voir notre en-tête collant parce que nous n'avons pas de contenu ici. Mais si nous ajoutons juste certains, certains comme des choses vraiment arbitraires, allons juste faire une section. Ajoutons du texte, comme un texte fictif. Maintenant, je vais juste copier rapidement beaucoup de textes comme ça. Et je vais le sauver. Et puis je vais rafraîchir la page. Nous obtenons nos textos, puis nous commencerons à défiler vers le bas. Vous pouvez voir notre en-tête collant bien s'estomper. Peut-être que si on rendait l'animation un peu plus longtemps, cette animation serait plus agréable. Mais je pense que cela fonctionne totalement, totalement bien. Bien sûr que je vais me débarrasser de cette section. Je n'ai pas besoin de ce texte. Mais ce que je veux faire, c'est que je veux juste ajouter le module de contenu interne pour que nous puissions réellement faire fonctionner notre modèle. Et nous nous occuperons de l'en-tête une fois que nous aurons tous les autres éléments en place. Donc, nous avons notre en-tête, nous avons notre contenu interne, et maintenant nous sommes prêts à commencer à construire notre page, commençant par l'en-tête. Eh bien, le héros et le curseur. Alors commençons à le faire ensuite. 89. 13.9Ajoutez le cure.: Alors maintenant, jetons un oeil à la façon de créer le curseur. Nous allons créer un, juste quelques diapositives avec quelques images de fond et du texte. Donc ce que je vais faire, c'est que je vais aller sur ma page d'accueil et que je veux la modifier. Et je veux l'éditer avec de l'oxygène. Donc d'accord, nous pouvons commencer par ajouter une section simple à notre page. Donc je vais taper dans la section. Et je veux que cette section s'étend sur toute la page. Donc je vais aller à la taille avancée et l'espacement. Et je veux définir le conteneur sectionnel à pleine largeur. Et je veux me débarrasser du rembourrage. Donc, je vais juste taper 0, puis cliquez simplement sur Appliquer. Tout. Donc maintenant, nous n'avons pas de rembourrage appliqué en haut et en bas, à gauche et à droite. Donc, dans cette section, nous allons insérer notre, notre curseur. Donc c'est ce que je vais faire. Je vais juste cliquer sur Ajouter et taper Slider. Et il y a quelques choses que nous devons faire lorsque nous créons notre curseur avec ces images d'arrière-plan pleine largeur et hauteur. Pour commencer, je vais juste me débarrasser de deux diapositives. Je veux juste l'avoir parce que nous allons reproduire jusqu'à plus tard. Et quand le curseur serait-il sélectionné ? Je vais aller au coiffage et je vais aller avec l'animation fanée. La vitesse est OK. On peut le laisser à ça. Et j'aimerais enlever le rembourrage autour des diapositives. Et quand on va à la configuration, je ne veux pas montrer les flèches. Je ne veux pas montrer les points. Je veux que les diapositives soient infinies, mais finalement, nous allons vouloir définir ceci en autoplay. Mais pour l'instant, je vais juste le laisser comme ça. Je ne veux pas que ça soit dans un avion ici dans cette fenêtre d'aperçu. Donc, la dernière chose à faire ici sera d'aller à la taille et espacement et de définir la hauteur de mon curseur à quelque chose comme 90 vh, qui serait plus ou moins étirée à travers bien tendue de haut en bas de la partie restante de ma fenêtre. Bien sûr, nous pourrions plus tard simplement augmenter ou diminuer cette valeur. Cela dépendra de la taille que vous allez définir votre en-tête, comment il sera dit dans votre cas. Donc, nous avons notre configuration de curseur. Nous allons maintenant mettre en place rapidement notre première diapositive. Donc je vais le sélectionner et je vais aller à Advanced. Et je vais aller à l'arrière-plan. Et je vais chercher une image d'arrière-plan. Je vais aller avec celui-là, héros slider un. Je vais juste le sélectionner. Donc, nous l'ajoutons au premier arrière-plan. Mais comme vous pouvez le voir, nous ne voyons pas comme toute l'image de fond. Et nous pourrions, par exemple, simplement augmenter la taille de la diapositive. Mais nous pourrions aussi aller à notre curseur, aller au style, puis choisir toutes les diapositives étirer à la même hauteur. Et voilà, nous pouvons voir notre image. Donc, fondamentalement, ce sont nos options de configuration préliminaires que nous devons définir pour que notre curseur fonctionne. Aussi, passons rapidement à notre diapositive avancée, puis arrière-plan. Nous avons mis en place cette image d'arrière-plan, mais nous allons également définir la taille d'arrière-plan pour couvrir. Et puis nous assurons que le point de mise au point est exactement au centre de notre image. Donc, je vais à pour le type de valeur gauche dans 50%, et je vais faire la même chose pour le haut. Et nous avons notre objectif, domaines d'intervention sont placés au centre de notre fenêtre d'affichage. Donc maintenant, nous pouvons réellement jouer avec notre image de fond si vous voulez la laisser comme ça. Eh bien, c'est à vous de décider. Mais ce que je veux faire, c'est que je veux avoir beaucoup de contraste entre notre image de fond et le texte qui, qui va venir ensuite. Et je voudrais aussi ajouter certains comme design spécifique. Dana est comme la chose que je spécifique à notre, à notre conception, qui sera à savoir, quelque chose comme overlain et peut-être comme une couleur ou tout simplement jouer avec les options de fusion de notre image de fond. Alors commençons à faire tout ça ensuite. 90. 13.10Ajoutez le premier diapositive: Alors commençons peut-être par ajouter de la couleur sur cette image. Donc encore, dans mes options avancées puis d'arrière-plan, je vais choisir la couleur de superposition sur l'image. Et je vais aller avec notre rouge pâle sauvé. Et je vais diminuer la transparence tandis que l'opacité fait quelque chose qui peut être comme 2.750 à 75%. Et si vous voulez aller avec ce genre de, un effet sera mon invité. Vous pouvez le faire, mais il pourrait également jouer avec notre mode de fusion d'arrière-plan, mais aussi avec notre attachement d'arrière-plan, dont nous parlerons peut-être un peu plus tard. Donc, la première chose que je voudrais faire est que je voudrais peut-être ajouter, certains, finiront par ajouter plus de contraste entre l'image d'arrière-plan et le texte qui va venir en seulement une seconde. Donc à partir de cette liste, ce que je vais faire, c'est que je vais choisir multiplier, ce qui va en fait assombrir les zones les plus sombres ici à mon image. Et dans ce cas, peut-être que nous pourrions peut-être rendre cette image peut-être même un peu plus sombre et augmenter cela, la transparence à peut-être quelque chose comme ça. Rendons peut-être ce type un peu plus sombre. Quelque chose comme ça devrait être, ça devrait aller. D' accord. Laissons-le comme ça. Donc maintenant, si je suis toujours sur mon calque de curseur, calque de diapositives, si je vais ajouter, ajoutons un titre. On y va. Et je vais changer la couleur du texte en blanc. Vous pouvez voir qu'en ce moment nous avons beaucoup, beaucoup de, vous savez, juste jouer un contraste entre notre image d'arrière-plan et notre texte. Et nous l'ajoutons également à notre design principal, qui pourrait acheter en accent de couleur à notre image de fond. Donc ce que ce type a choisi, je vais trop bien aller. Je vais aller à mes options. Et je vais augmenter la taille de la police à quelque chose comme peut-être 66. Allons, faisons peut-être 66. Cela devrait être aligné. Et je vais taper dans l'original, si nous fournissons une aide juridique pour et je vais aller à la topographie avancée. Et ici, peut-être augmentons l'espacement des lettres à un. Ça va en ajouter. Posséder notre design. Et allons à la hauteur de la ligne. Je vais le mettre à 1.1. Et je suppose que c'est tout. Je vais juste m'assurer que mon tag est réglé sur H2. Et maintenant ce que je vais faire, c'est que je vais simplement dupliquer cette rubrique. Et peut-être que je vais diminuer la taille de la police, quelque chose comme peut-être 48 ou peut-être même moins. Parce que quand on va à la typographie, je veux la mettre en majuscules et l'espacement des lignes un va bien. Disons que ce sera comme, je ne sais pas, travail à Andrew Reese. Et peut-être que je vais juste diminuer la taille jamais si légèrement ravir 3-6 peut-être, ou 38. Cela devrait être sur la droite. Et je suppose que la dernière étape ici serait d'ajouter un bouton. Donc c'est ce que je vais faire. Je vais ajouter un bouton et je vais taper quelque chose comme venir apprendre plus, simple et simple. En savoir plus. Et je vais changer la couleur du bouton en blanc. Pourquoi pas ? Bouton survolait notre rose uni. Je veux juste un commentaire simple et simple. Et je vais changer la couleur du texte en noir, ou peut-être cela très comme la couleur bleu foncé. On y va. Et en ce qui concerne la typographie, je vais aller à la typographie avancée. Je veux le mettre en majuscules. Et peut-être encore une fois, je vais juste augmenter l'espacement des lettres à un pixel. On y va. Et peut-être que je vais juste introduire un peu d'espacement autour de ce cap de blessures au travail. On va aller à la taille avancée et l'espacement et ajouter les îlots comme 25 en haut et en bas. C' est un peu trop moduler les entraîneurs 1010 en bas. Et on y va. Je vais juste sauver ce type. Et maintenant, je vais juste voir ma page en mode Incognito. Et on y va. C'est, c'est notre site. C' est notre page ici. Et bien sûr, la dernière chose à faire serait simplement de dupliquer cette diapositive et ensuite juste le changement de ce texte. 91. 13.11Finissez le slider finir le slider: Donc, tout ce qu'on a à faire est de saisir notre diapositive et je vais juste la dupliquer. Et je vais le dupliquer deux fois. Donc pour notre deuxième diapositive, je vais juste aller à l'arrière-plan avancé. Et je vais attraper ce curseur de héros à l'image JPEG. Et pour le troisième, et on va faire presque la même chose. Je vais chercher cette image ici, curseur de héros ou trois images de recherche. Et laissez-moi juste changer ça. Commençons peut-être par la deuxième diapositive. Tapons simplement comme les accidents de la route peuvent être. On y va. Et pour celui-ci, nous allons taper quelque chose comme des problèmes personnels. Et je crois que nous avons l'édition de fond ici. Ce n'est pas ce qu'on veut. Certainement. C' est ce problème personnel a été vendu. Alors sauvons ce type. Je vais aller à nouveau au curseur. Et maintenant, je peux réellement entrer va activer la fonctionnalité de lecture automatique. Et maintenant, quand nous allons sur notre site, laissez-moi juste rafraîchir cette page. Et puis on y va, notre, notre curseur fonctionne, fonctionne bien. Bien sûr, si nous le rendons plus petit, vous pouvez voir qu'il est complètement, complètement réactif. Tout regarde, regarde joliment. Alors on y va. On a le curseur. Je pense que je vais éteindre l'autoplay juste pour que nos têtes ne fassent pas mal. Et je suppose que nous pouvons passer à notre puits, une autre section, je suppose, qui sera cette section juste ici. On a mis du texte en colonnes. On en a un peu comme une énorme information ici et on a des images ici. Mais à mon époque, ces images sont comme juste, vous savez, mettre leur juste pour qu'il y ait des images, elles ne servent pas comme un, comme un but plus grand. Il fait de la conception à mes jours au moins. Donc on va changer ça. Nous allons réellement ajouter une image et peut-être que nous allons y ajouter un effet de parallaxe. Et peut-être que nous allons superposer quelque chose comme un, je ne sais pas, obtenir un texte de citation gratuit ou quelque chose comme ça. Mais d'abord, nous allons créer ce genre de texte ici. Et puis la taxe dans ces trois colonnes. Alors commençons à le faire ensuite. 92. 13.12Ajoutez la section d'info: Alors maintenant, commençons à créer la section suivante avec quelques petits morceaux d'information. Comme d'habitude, je vais commencer par une section, celle-ci juste ici. Et je ne vais pas en changer la largeur. Et je pense que je ne vais même pas changer le rembourrage. Laissons-le tel quel. Et bien sûr, je veux que cette section ne soit pas dans cette section, alors laissez-moi simplement l'enlever. On y va. Donc, dans cette section, je vais juste ajouter un titre. Et je veux, je pense que je veux que tous les éléments de cette section soient placés au centre. Donc c'est ce que je vais faire. Et je pense que je vais prendre ce cap. Et nous allons taper. Je crois que c'était notre cabinet. Laisse-moi juste vérifier le texte récupéré. D' accord. Notre cabinet. Rappel vert. Ok, donc je vais juste augmenter la taille de la police. Et encore une fois, je vais aller à la typographie et augmenter l'espacement des lettres. On y va. Et nous pourrions, je suppose, suivre ce dessin et un peu plus près et faire comme une police d'assonance ouverte au lieu de notre titre. Mais je pense que je suis, je pense que je veux le garder un peu plus cohérent, donc je vais juste le laisser comme ça, mais je suppose que nous pouvons peut-être ajouter un sous-titre ici. Et nous pouvons l'écrire avec ouverture, tristesse. Donc avant de faire ça, laissez-moi juste vérifier la hauteur de la ligne. Je vais le faire 1.1 parce que cela fonctionnera essentiellement bien sur tous nos appareils, en particulier les appareils plus petits. Et puis je vais juste ajouter un texte. On y va. Et ici, je vais juste taper. Je pense que ça va oméga. Laissez juste faire plus tout comme deux juste pour que vous puissiez voir, juste pour que nous puissions voir ce que nous sommes sur le point de voir. Alors supporte avec moi une seconde. Donc nous allons juste taper plus. Et puis je vais taper plus. Et nous allons taper le symbole du dollar, 100, k. Laissons-le comme ça. Donc ce que je veux faire en ce moment c'est, eh bien d'abord, allons juste augmenter la taille de la police à quelque chose comme peut-être 32. Et ce que je veux faire, c'est que je veux garder ce type comme ça. Le monde est sur le texte. Mais ce texte, ce plus 100 k. ou nous pouvons faire 100 000 si vous voulez. Je veux le rendre différent. Je veux le coiffer différemment. Donc, la façon dont nous pourrions le faire est que je vais juste sélectionner ce morceau de texte que je veux, que je veux le coiffer différemment. Ce gars ici et ici en haut, je vais juste cliquer sur ce rap avec un composant espagnol de boutons. Je vais juste cliquer dessus. Et maintenant, si nous allons à notre texte, le module, vous pouvez voir qu'à l'intérieur nous avons ce petit module de span, qui nous permettra essentiellement de changer ce petit morceau de texte. On peut maintenant le rendre plus grand. Nous pouvons le rendre plus petit et certainement nous pouvons changer la couleur de celui-ci pour quelque chose comme ça. Et on pourrait peut-être prendre la portée et changer le poids de la police pour quelque chose d'un peu plus grand, comme 600. Peut-être. Ça devrait être correct. Et peut-être que je vais juste attraper ça sur du texte et je vais le rendre juste un peu plus petit à quelque chose comme 20 pixels ou 22. Mais comme vous pouvez le voir, quand nous faisons des changements à ce type, eh bien, l'alignement est, eh bien, il n'est pas là. Donc, ce que vous pourriez faire, c'est que vous pourriez simplement saisir ce texte et nous pourrions aller à avancé plutôt qu'à la mise en page. Cliquez sur cette option de flex d'affichage, puis choisissez simplement une ligne centrée pour vous assurer qu'elle est bien alignée sur le capteur. Comme devinez que ce serait un peu redondant trop bien, comme ce morceau de texte encore et puis plus juste ici. Peut-être qu'on va juste enlever ce type. Et au lieu de finir, je vais juste taper plus. Puis on y va. Et peut-être qu'au lieu de cet espace, laisse-moi prendre cette travée. Et puis je vais aller à la taille et à l'espacement. Et je vais peut-être insérer comme une petite marge sur la gauche. Donc, ce serait bien, ce serait ça. Et je crois que dans notre original nous avons depuis 1970. Ok, alors tapons ça. Encore une fois, je vais juste ajouter du texte. On y va. Et je vais taper depuis 1970. Et faisons en sorte qu'on en fasse 600 peut-être. Et peut-être faisons-le comme 18 pixels. Peut-être même, voyons 700. Laissez faire une différence. Il le fera. Et on y va. Nous avons essentiellement eu cet intestin la section et créé. Donc la prochaine chose que nous aurions à faire est que vous deviez ajouter ces trois petits morceaux de texte sous cette section. Alors commençons à le faire ensuite. 93. 13.13Ajouter du texte dans des colonnes: Comme d'habitude, je vais juste ajouter une section. Et à l'intérieur de cette section, je vais juste ajouter des colonnes. Et je vais aller de l'avant et choisir ce trois par 33 par 33. Il a donc trois colonnes pour notre texte. Et pour remplir nos textes avec le, avec un peu de contenu factice. Je vais recommencer à apprendre. Je vais chercher un Lorem Ipsum. Et je vais juste prendre un peu de, certains de ce texte. Allons peut-être quelques amulettes corrompre tout ce paragraphe. Pourquoi pas ? Encore une fois, dans ma section, je vais aller à ma première div et je vais ajouter un texte comme ça. Et je vais juste taper ça. Alors on continue peut-être, laisse-moi juste, laissons-le comme ça. Et peut-être que nous allons juste comme cliquer, appuyez sur Entrée ici. Juste, tu sais, juste pour en avoir, quelque chose comme ça. Et faisons comme ça. Et je suppose qu'on pourrait juste dupliquer cette taxe. Ne faisons pas moins que de le rendre trop compliqué. Mais peut-être qu'on pourrait peut-être supprimer un peu de ce texte comme ça. Juste pour qu'on ait juste pour que tu aies un peu de variété, laisse-moi juste supprimer ça. Et laissez-moi juste supprimer cette faute de frappe. Et encore une fois, je vais juste prendre ce texte. Peut-être que je vais juste le dupliquer. Ensuite, on y va et on le met juste dans la dernière div juste ici. Et peut-être que cette fois je vais juste laisser ce paragraphe comme ça. Mais quand on jette un coup d'oeil, laisse-moi juste le sauver. Lorsque nous regardons notre original, nous pouvons voir que nous avons ceci en premier, contrairement à un retrait, comme un retrait, que cette lettre est plus grande que toutes les autres. Donc, il semble que lorsque tout ce que nous commençons un paragraphe d'une manière très, très fantaisie. Donc encore une fois, ce qu'on peut faire c'est que je vais prendre ça en premier, laisse-moi prendre cette première lettre. Comme vous pouvez le voir, parfois ce n'est pas si facile. Et encore une fois, je vais juste cliquer sur une travée. Et je vais peut-être changer le poids de la police comme 700 et augmenter la taille de ce gars à quelque chose comme peut-être 60 pixels. Alors je vais peut-être augmenter la marge autour de ça à dix sur le côté. Et puis peut être dix en bas. Et quand j'irai, je vais aller à la typographie et changer la hauteur de la ligne à un. Et peut-être débarrassons-nous de cette marge ici, donc notre paragraphe semble un peu mieux. Mais comme vous pouvez le voir, nous avons un petit problème ici. On a trop d'espace ici en haut. Donc, pour réparer ça, je vais juste prendre cette travée ici. Et encore une fois, je vais aller à la mise en page avancée. Et ici, je vais juste sélectionner flotteur gauche. Et on y va. Le reste des textes ici est mis à droite, et ce type flotte à gauche. Donc si je viens de sauver ce gars et laissez-moi juste rafraîchir mon pas que je vais juste aller de l'avant et rafraîchir la page. Je vais descendre. Vous pouvez voir que nous avons eu notre texte juste ici. Et notre richesse, ce texte ici. Et si nous le réduisons, nous pouvons voir que nous avons encore besoin de corriger certaines choses, mais nos paragraphes fonctionnent bien. Si j'attrape notre incrédulité, c'était ce type. Et je vais aller à la typographie avancée. Je vais aligner le texte au centre. Voyons si ça aide. Laisse-moi juste le rafraîchir. On y va. On a notre manuel au centre. Peut-être pourrions-nous réduire cette somme, cet écart entre ces éléments. Donc je vais juste prendre cette section. Aller à Advanced, je vais aller à la taille et l'espacement et peut-être me débarrasser de cela, se débarrasser de ce rembourrage juste ici en insérant seulement 0 pixels. Et si nous gardons ça, encore une fois, rafraîchissez ma page. On y va. On l'a eu. On l'a réparé. Donc maintenant, l'étape suivante serait de, comme je l'ai mentionné précédemment, juste ajouter comme une belle division une image ici en bas. Mais nous ne serons pas juste, vous savez, entrer. On ne colle que deux images aléatoires comme ça. Nous allons faire une section pleine page, section largeur de pool avec leur image de fond parallaxe. Et peut-être que nous allons ajouter du texte sur cette image. Alors commençons à le faire ensuite. 94. 13.14Ajoutez la section parallaxe: Donc encore une fois, ce que je vais commencer par c'est que je vais ajouter une section. On y va. Et cette section s' étend sur le bord gauche de notre fenêtre vers le bord droit de notre fenêtre. Donc, pour le conteneur de section avec, je vais aller de l'avant et choisir pleine largeur. Et laissez-moi simplement ajouter une image d'arrière-plan. Et à partir de mes images que j'ai ici, je vais choisir celle que j'ai appelée parallax. Je vais donc sélectionner l'image. Et je suppose qu'on pourrait peut-être ajouter une couleur de superposition d'image. Donc je vais aller de l'avant et prendre mon image bleu foncé et juste diminuer cette SY, Eh bien, l', l', l', l', l'opacité à quelque chose comme ça. Et je vais ajouter du texte. Encore une fois, je vais ajouter un titre. Donc un cap comme celui-ci. Et laissez-moi juste changer rapidement sa couleur en blanc pour que vous puissiez la voir. Donc nous allons juste taper, obtenir une consultation gratuite, quelque chose comme ça. Et je vais peut-être augmenter la taille de la police, quelque chose comme 55 et voir ces 56. Donc 56, on y va. Je vais aller à la topographie avancée et nous allons faire l'alignement du texte pour centrer l'espacement des lettres à une hauteur de ligne à une, 0,1. On y va. Et je vais attraper mon sexe et m'assurer que tout est bien aligné au centre. On y va. Cela nous suffit d'ajouter quelques textes simples en dessous de cela. Obtenez une consultation gratuite sur le texte, et nous allons emprunter le texte à partir d'ici. Donc peut-être que je vais juste dupliquer ce gars et le mettre sous mon cap comme ça. Et je vais aussi le rendre blanc. Et je suppose qu'on peut l'aligner au centre. Et on va me laisser appeler lapin et faire en sorte que ça ressemble à ça. On y va. Et si vous le souhaitez, vous pouvez ajouter plus de texte ici. Mais je pense que je vais aussi ajouter un peu d'espacement entre mon titre et le, eh bien, ce morceau de texte et le bas qui va être que je vais mettre sous ce morceau de texte. Encore une fois, je vais y aller avec 1010. Et la dernière chose à faire ici, pour juste ajouter un bouton. On y va. Et je vais juste taper quelque chose comme, bien en apprendre plus comme ça, comme nous l'avons fait avant. Et peut-être que je vais juste changer la couleur du bouton pour cette couleur rose. Et en ce qui concerne la taille du bouton, essayons seulement 12. Et peut-être que nous allons changer la taille du texte à 12 aussi. Et je vais aller à la topographie avancée, espacement des lettres majuscules, la hauteur de ligne 1.1. Ça devrait être bien. Et tu sais quoi ? Peut-être ajoutons un peu plus de marge de remplissage entre ça, ce morceau de texte et, et ce, ce bouton. Et peut-être rendons le bouton un peu plus grand. Rendons ça un peu plus audacieux. Quelque chose comme 18. Et je vais augmenter la taille du texte à quelque chose comme 16. Cela devrait construire correctement ? Et peut-être que je vais juste ajouter plus d'espacement, plus de rembourrage pour ma section parce que je ne sais pas, je suppose que nous pourrions le faire. Il nous sera juste plus facile de voir l'effet Parallax. Maintenant, une fois que nous voulions ajouter plus, plus d'espace entre ces éléments, alors quelle serait ma section sélectionnée ? Je vais aller à l'arrière-plan avancé. Et pour cette parallaxe de fixation de fond, je vais choisir fixe. Et bien sûr, nous devons toujours définir la taille d'arrière-plan à couvrir. Nous ne voulons pas que cela se répète, et nous voulons nous assurer que notre, notre point d'intérêt est placé au centre. Et on y va, je vais le sauver. Et maintenant, allons juste à notre page principale. Je vais le rafraîchir. Et quand nous faisons défiler maintenant, vous pouvez voir que notre image d'arrière-plan est en fait défiler. Eh bien, c'est, ça reste fixe, mais tout le reste reste le même. Et si je juste, juste, juste, juste pour voir un peu mieux ce que cet effet fait réellement pour nous. Je vais juste dupliquer cette section. Je vais le mettre ici si je peux. Parfois, avec de l'oxygène a besoin d'un peu difficile pour l'obtenir correctement. Donc on a cette partie juste ici. Et laissez-moi juste rafraîchir ce type à nouveau. Donc maintenant si nous, si nous le déplacons, vous pouvez voir que nous sommes en fait, vous savez, nous en avons plus, eh bien, tout le contenu est en mouvement et ce terrain de lit reste fixe. Et peut-être qu'on pourrait juste prendre plus de textos. Et nous allons juste, juste pour faire la section d'un plus grand, aller entrer un peu plus de texte, enregistrer à nouveau, et rafraîchir ma page. Et maintenant, nous pouvons voir que nous voyons un peu plus de notre image de fond dans l'image de fond à l'arrière, oui, image de fond à l'arrière. Mais la chose la plus importante est que c'est un moyen très simple d'obtenir cet effet de parallaxe qui fonctionnera, vous savez, sur tous les appareils, peu importe sa taille ou sa taille. Et pourtant, on y va. C' est à quel point il est simple d'obtenir une section de fond de parallaxe ici à l'intérieur de l'oxygène. Et je pense que cela a l'air beaucoup, beaucoup plus engageant et intéressant que seulement ces deux images d'avion qui sont ici dans notre design original. Donc, je ne vais pas utiliser la section. Et plus, je veux ajouter une autre section qui sera cette section des domaines de pratique. Donc ce gars ici, abord on doit ajouter comme ce texte d'aide juridique, puis ce titre de zone de pratique , puis quelques icônes et un bouton ici. Alors faisons-le ensuite. 95. 13.15Ajouter la section des zones d'exercice: Ok, tweak à la ou obtenir une section de consultation gratuite. Alors maintenant, ajoutons ces sections de zones de pratique. Donc, nous allons commencer avec certains, avec du texte ici en haut, puis nous allons ajouter ces icônes juste ici en bas, bien sûr, en bas. Alors ajoutons une nouvelle section. Je vais juste cliquer sur Ajouter la section. On y va. Et à l'intérieur, je vais ajouter mon module de texte. Et puis je vais ajouter un module de titre comme ça. Donc, je vais d'abord sélectionner ma section et je veux m'assurer que l'alignement horizontal de l'élément est réglé au centre. Parce que, vous savez, nous voulons garder tout bien orienté, bien centré. Et nous allons taper ici. Je pense que c'était de l'aide juridique comme ça. Et nous allons changer la couleur du texte en une couleur rouge. Et Mindless Change le poids de la police à quelque chose comme 700 ou peut-être 600. Et puis passons à la typographie. Rendons ce type en majuscule. Et peut-être ajoutons une loi, un pixel d'espacement comme ça. Et je vais aussi souligner ce texte. Je vais juste mettre la décoration du texte à souligner comme ça. Donc, nous avons eu notre premier message. En fait, on va faire 700. Et peut-être faisons comme 1212 pixels ou 13 pixels. Donc maintenant, tout ce que nous avons à faire ici, c'est simplement de taper dans les domaines de pratique des relations publiques que nous allons. Et je crois que notre taille était 56. Donc je vais y aller et taper 56. Et passons à la typographie. Je vais l'aligner au centre et faire un pixel d'espacement des lettres comme ça. Peut-être ajoutons aussi la hauteur de la ligne à 1.1. On y va. Maintenant, si vous le voulez, vous pouvez peut-être ajouter un peu d'espacement ici pour faire une ode, pour ajouter des espaces, pour laisser un peu d'air entre ces deux éléments. Mais c'est tout, c'est une question de goût dans ce cas, parce que ce qui est le plus important ici est d'ajouter ces icônes ici. Et nous devons, nous devons réfléchir avant d'ajouter toutes ces icônes, et nous devons faire ce truc. Il faut qu'on y réfléchisse. Et juste pour trouver les meilleures pratiques, les meilleures connaissances, meilleures étapes à prendre pour faire cela, faire les colonnes, rendre ces colonnes ou rendre cette section aussi facile que possible et aussi rapide que possible. Donc, bien sûr, ce dont nous aurons besoin, c'est que nous allons être soigné toutes les colonnes. On a donc quatre icônes comme ça. Donc, je vais ajouter une ou plusieurs colonnes en fait, et je vais choisir 25 par 25-25. Donc on a quatre divs. Si on jette un coup d' oeil, jetez un oeil ici, nous avons quatre divs au total dans ces colonnes. Peut-être que nous allons juste déplacer ce type juste un peu vers le bas. Donc, afin de rendre le processus aussi rapide que possible, je recommande d'utiliser les classes dans ce cas, mais pas seulement pour comme une icône ou comme un titre sur peut-être un morceau de texte en dessous qui n'avait pas été, mais aussi pour le conteneur entier. Parce que ce que je veux faire, c'est que je veux avoir ce genre d'effet ici. Comme ce que la, ce que les frontières, mais je veux faire un peu différemment. Laisse-moi te montrer ce que je veux dire. Je vais peut-être d'abord renommer ce type ici. C' est donc nos premières colonnes. Je vais juste le nommer comme un seul. Et à l'intérieur, je vais ajouter un div. Donc juste un div simple. Donc maintenant, nous avons un div à l'intérieur de cette div. Donc ce que je veux faire maintenant, c'est que je vais ajouter une classe à cette div. Appelons ça Icône, peut-être comme icône, une colonne comme ça. Donc ce que je veux faire avec ce gars, c'est que je veux m'assurer qu'il est réglé à 100 pixels, 100% de largeur. Donc je vais juste taper ça à 100%. Et je veux m'assurer que tous les éléments enfants sont la vue stupéfiante verticalement, et je vais les aligner horizontalement au centre et verticalement au milieu. Donc, je suis sûr que tous mes éléments seront toujours exactement au centre, à la fois horizontalement et verticalement. Ce que je voudrais aussi faire, c'est que je veux ajouter une bordure autour de cette div. Donc je vais aller aux frontières avancées et je vais attraper, peut-être attrapons notre couleur rose, rose pâle. Et je veux m'assurer que la largeur est définie sur un et qu'elle est réglée sur solide. Donc je sais que c'est très, très léger effet, mais j'espère que vous pouvez le voir. Peut-être que je vais juste prendre ma page et je vais coller cette URL en mode Incognito. Et bien sûr, ce serait une bonne idée de sauvegarder d'abord ma page comme d'habitude. Et maintenant, je vais rafraîchir ça. Et voici notre div. Je sais que c'est un effet très, très léger, mais c'est là. Donc ce que je vais faire maintenant, c'est que je vais ajouter un état à notre classe. Donc nous avons notre classe, cette colonne d'icônes. Ce que je veux faire maintenant, c'est que je veux cliquer sur l'option State, et je veux aller de l'avant et choisir hover. Et en vol stationnaire, je veux que cette frontière change. Donc je vais aller à Advanced. Alors je vais aller à Borders. Et on va choisir ma couleur, ce gars juste là. Et la largeur va être d'un pixel. Et ça va être, eh bien, la frontière va être solide. Donc, quand nous sauvegardons ceci et laissez-moi juste peut-être ajouter rapidement un peu de texte à l'intérieur afin que vous puissiez réellement voir cette bordure. Je vais le sauver. Je veux juste que tu comprennes l'effet. Donc, nous avons notre, notre div juste ici. Et quand vous survolez, vous pouvez voir que notre frontière apparaît quand nous survolons cette div. Mais je ne veux pas ça, je ne veux pas que cette frontière apparaisse comme ça. Ce que je veux faire, c'est que je vais choisir ma div. Je vais m'assurer que je suis en vol stationnaire. Et je vais aller à l'Avancé. Ensuite, je vais aller à la transition des effets. Et je vais juste ajouter une légère transition, la durée de transition à 0,3 secondes. Quand nous sauvegardons cela et actualisons cela. Vous pouvez voir que cette frontière est bien transition est ce n'est pas comme s'il était comme si ce n'était pas comme un saut instantané. Il y a un léger fondu dans. Et je fais tout cela parce que je veux que tous ces changements et soient appliqués globalement à mon disque. Donc, quand je juste pour copier la copie que je veux tous ces éléments CSS ou tous ces ajustements soient ajoutés à tous possèdent tous mes divs. Donc, ce div est créé. Ce que nous pouvons faire maintenant, c'est que nous allons réellement commencer à ajouter les icônes comme à l'intérieur, le texte et le titre. Alors commençons à le faire ensuite. 96. 13.16Ajouter les icônes: Donc si on regarde l'original, on peut voir qu'on a une, on a une voiture juste ici. On a des textos, Will un titre. Et c'est fondamentalement, bien sûr, nous avons quelques animations ici et nous pouvons, eh bien, nous pourrions le faire si vous le vouliez. Donc ce que je vais faire, c'est d'abord, je vais peut-être ajouter tous les éléments dont j'ai besoin. Donc, dans cette div, je vais juste ajouter une image. On y va. Et je vais, peut-être que vous commencez avec cette voiture et je vais sélectionner cette image, la sauver. Et je vais rafraîchir ça. Et on y va. On a notre image juste ici. Et je pense que je vais bien, je veux dire, nous pourrions le rendre plus petit ou pas, faire des choses à ce sujet. Mais avant de le faire, je vais juste ajouter une classe en allant l'appeler tau comme icône. Je ne sais pas que je peux imaginer. Faisons comme ça. Je vais ajouter un cours et je vais changer sa hauteur pour peut-être 35. C'est beaucoup trop petit. Mais 42, 55 ou 58, je suppose que 58 devrait aller bien. On peut toujours le changer plus tard. Donc, ce que nous pourrions faire est, eh bien, notre div en vol stationnaire a une bordure très, très légère. Mais vous savez ce qu'il faut d'abord changer la frontière autour de ça, cette div juste ici. Faisons-le, faisons-le, c' est très, très clair couleur gris. Je veux que la largeur soit d'un pixel solide. Sauvons ce type. Et actualisons la page. Voyons à quoi ça ressemble. On y va. Nous avons une très, très légère, légère, bordure autour notre voiture en ce moment. Donc ce que je veux faire maintenant, alors peut-être qu'on pourrait essayer d'imiter cet effet de vol stationnaire aussi sur notre voiture. Donc, il change d'une couleur grise. Deux, comme ça, notre couleur rouge principale et dominante. Donc ce que je vais faire, c'est que je vais prendre ma voiture. Je vais m'assurer que cette classe d'image d'icône est sélectionnée. Et je vais aller à des affections avancées. Et je vais aller à Filter. Et à partir de cette liste, je vais choisir des niveaux de gris. Et je veux appliquer 100% de cet effet. Donc, tu sais, donc c'est génial. Cependant, lorsque nous choisissons maintenant l'état de vol stationnaire, je veux que ce filtre afin que l'échelle de gris soit définie à 0%. Donc quand on sauve ce gars et qu'on rafraîchit notre page, maintenant, notre voiture est grisée. Mais quand vous passez la souris sur ces gars, vous pouvez voir que notre icône est, est en train de changer aussi. Donc il pourrait me faire aussi ajouter une transition à cet état de vol stationnaire. Donc je vais aller à la transition des effets de transition. Je crois que c'était 0,3 seconde. On y va. Et actualisons la page. Lorsque vous survolez cela, vous pouvez voir les taux joliment, joliment transigeant. Donc, tout ce que nous avons à faire maintenant, c'est que nous devons ajouter du texte. Donc, je vais ajouter un titre. On y va. Et encore une fois, je vais ajouter une classe à elle, donc je vais l'appeler titre ICOM ou ICANN avait une épaisseur qui va, ce sera très bien. Donc, je vais changer la taille de la police à quelque chose comme peut-être, essayons 18. On y va. On va aller à la typographie et on va la mettre au centre. Et la hauteur de la ligne à 1.1. lettres espacent un. Et peut-être que nous allons taper comme, je ne sais pas, des accidents de voiture. Et peut-être augmentons la taille de la police comme 20 pour peut-être nous débarrasser de cet espace dans un élément. Je ne pense pas que ça va l'aimer. Et puis ajoutons peut-être un peu de marge comme dix pixels en haut, puis en bas. Parce que maintenant ce que je veux faire, c'est que je veux juste ajouter du texte. Donc, je vais juste ajouter du texte. Et encore une fois, je vais l'appeler, je vais ajouter une classe, donc Icône, texte, ajouter classe. Et encore une fois, je vais aller à la typographie alignée au centre. Et peut-être que je vais juste changer la taille de police à quelque chose comme 13. Je suppose que ça devrait aller. Donc la dernière chose à faire ici serait d'ajouter peut-être comme un espacement génial à l'intérieur, à l'intérieur de notre div. Donc, je vais le sélectionner, aller à Avancé, puis la taille et l'espacement. Et je vais aimer Demi comme huit pixels de rembourrage autour, ou peut-être même dix pixels. Et puis sauvons ce type. Je vais aller sur ma page, rafraîchir ça. Et c'est notre, c'est notre icône qui ressemble à ça. Bien sûr, si nous le voulions, nous pourrions peut-être ajouter encore plus d'espace. Peut-être que nous allons faire comme 20 pixels. Peut-être. Cela aura l'air juste un peu mieux ou même comme 25. Non, c'est tout à vous de décider. Vous pouvez faire ce que vous voulez avec le rembourrage si vous ne voulez pas si vous n'en avez pas besoin, vous n'avez pas besoin de le mettre à l'intérieur. Mais je pense juste que ça a l'air juste un peu mieux. Et on a un petit effet funky ici. Aussi, si vous le vouliez, vous pourriez peut-être sur un hubbard cultiver ce div un peu comme dans l'original. Donc, tout ce que nous devons vraiment faire est de nous assurer que nous avons notre classe sélectionnée, que nous sommes sur notre couche div. Et puis à partir de l'option d'état, je vais choisir le vol stationnaire. Et puis dans nos effets avancés, et nous allons aller à la transformation, en ajoutant une transformation. Et à partir de ce menu déroulant, et nous allons choisir l'échelle. Et l'autre aime, vous savez, augmenter l'échelle pour être trop drastique. Donc je vais juste passer en direct avec 1.2, peut-être pour l'échelle x 1.2 pour y. et nous allons sauver ça, rafraîchir ma page. Et puis vous pouvez voir que c'est bien écologistes comme, plus comme une croissance en effet lorsque nous survolons notre div. Donc, une fois que nous avons cette div créé, cela nous a pris du temps, mais nous avons fait tout cela juste parce que nous pouvons maintenant économiser beaucoup de temps lors de l'ajout et de l'événement. Eh bien, peut-être changer si vous voulez, certains aspects de nos, nos icônes. Voyons donc comment nous pouvons réellement bénéficier de ces classes que nous venons de les ajouter. Comment nous pouvons bénéficier de tout cela, des mesures que nous avons prises. Et dans la vidéo suivante. 97. 13.17Ajoutez les icônes restantes: Donc, vraiment tout entier en ce moment afin de remplir les colonnes restantes avec le, avec nos icônes, est de simplement dupliquer cette div. Et je vais le déplacer dans ma deuxième colonne. Si je peux le mettre ici, peut-être que je vais le renommer. Je vais l'appeler numéro deux. Alors je vais dupliquer ce type une fois de plus. Et je vais le mettre dans notre troisième div. On y va. Et laisse-moi juste renommer ce type. Je vais l'appeler trois. Et ce gars, je vais le dupliquer et le déplacer dans ma div que je vais appeler. Et je vais appeler. On y va. Donc vraiment tout ce que nous avons à faire maintenant est de simplement changer les, les icônes. Donc je vais prendre cette icône et je vais choisir peut-être comme cette maison. Pourquoi pas ? Mec, je vais juste l'appeler. Je ne sais pas. La propriété peut être le droit de la propriété. Commentons comme ça. Alors je vais prendre cette icône, et je vais juste choisir celle-ci. Et appelons ça auto. Aucun héritage ne peut être nul. Et maintenant la dernière icône, nous allons choisir ce type ici, cette icône, et je vais l'appeler, je ne sais pas, les soins de santé. Juste parce que maintenant nous avons toutes nos icônes. Laisse-moi juste sauver ça. Et je vais juste rafraîchir la page. Et comme vous pouvez le voir, nous avons toutes nos icônes et ils ont toutes ces belles animations qui se passent. Mais disons que nous ne savons pas que nous aimerions peut-être développer ces éléments encore plus. Ou peut-être que nous aimerions changer la transition ou nous n'aimons pas la frontière et, vous savez, des choses comme ça. Mais, vous savez, ça nous prendrait beaucoup de temps si vous vouliez simplement les changer à chaque bit, à chaque icône. L' étape par étape, tout ce que nous pouvons vraiment faire, c'est que nous pouvons simplement prendre un de nos divs qui a cette classe attachée à elle. Et je vais aller en vol stationnaire. Et disons que je ne veux pas que ça grandisse autant. Donc je vais aller à Advanced Affects Transform. C' est notre transition, notre transformation. Donc, disons que je voulais grandir juste par 1.11.1. On va le sauver. Et quand on rafraîchit la page, on voit que tous ces gars grandissent de la même façon. Aussi, disons que je voudrais peut-être les augmenter à la marge entre notre volonté, cette rubrique à l'intérieur ici. Donc encore une fois, je vais m'assurer que j'ai cette classe sélectionnée. Je vais aller à la taille avancée et l'espacement et je vais augmenter la marge, marge supérieure collecte 16. Mais je vais réduire la marge inférieure à quelque chose comme huit. Comme vous pouvez le voir, tous ces éléments changent. Donc, même si vous allez à 0, vous pouvez voir que nous changeons partout dans les instances de notre, de notre rubrique en même temps. Donc c'est juste, c'est juste la façon de travailler plus intelligemment, pas plus dur. Et tu sais, si tu es bête. Travaillez un peu plus dur, mais certainement beaucoup plus, beaucoup plus intelligent au début. Plus tard, tout sera beaucoup plus facile pour vous. Et même maintenant, je vais juste dupliquer ces colonnes. Et comme vous pouvez le voir, nous avons nos icônes et prêts et attendons pour nous. Ils ont les mêmes classes, donc ils se comportent exactement de la même manière. Et tout ce que nous avons vraiment à faire, c'est juste changer ça, changer l'icône. Donc je vais attraper ce coeur, coeur brisé, et je vais aller avec eux, divorcer. Le pire. On y va. Ce gars sera notre semaine déjà avoir la voiture. Alors faisons ça. , Je ne sais pas,Droit fiscal, Mamie, quelque chose comme ça. Ce type, peut-être que je vais attraper le marteau et le ranch et appelons ça les instructions. On y va. Et pour le dernier gars, je pense que ce sera celui-là. Appelons ça le droit des sociétés. Droit des sociétés. On y va. Et gardons ça. Bien sûr, si vous voulez changer le texte ici, si vous ne voulez pas voir cela comme un bloc de texte, bien sûr, nous pourrions le faire très, très facilement. Et aussi nous avons cette classe ajoutée pour que nous puissions, donc si nous décidons juste que nous voulons la rendre plus grande, nous, nous pouvons en faire un gros M. Nous ne ferons toutes les instances de la classe plus grandes. Donc je vais retourner à 13 ans. On y va. Donc je vais sauver ce type. Et je vais rafraîchir ma page. Et comme vous pouvez le voir, tous nos gars sont prêts à se comporter bien. Et je pense que cela semble joli, assez propre et qu'il est approprié pour un site d'avocats avocats. Donc la dernière chose à faire ici, ce serait juste d'ajouter un bouton. Donc ce que je vais faire est toujours dans cette section, je vais juste ajouter rapidement, juste ajouter un petit bouton ici. Je veux que le bouton soit lu. On y va. Je vais juste l'appeler comme En savoir plus. En savoir plus. On y va. Et nous allons passer à la typographie avancée. Je vais faire des majuscules. Et je vais sauver ce type. Aussi. Peut-être que nous allons changer le comportement de notre bouton. Disons que nous voulons peut-être changer la couleur, inverser le jeu de couleurs ici quand nous survolons notre bouton. Donc, avec le bouton sélectionné, je vais passer à l'état de vol stationnaire. Et notre couleur de bouton sera sur la couleur blanche, ou nous pouvons le rendre même transparent. Ensuite, on y va et je vais changer la couleur du texte en rouge. On y va. Et peut-être que je vais juste introduire une frontière simple et simple. Donc je vais aller à Effect frontières bien avancées. Et puis je vais choisir cette couleur rouge. Je veux le rendre très, très bien, très, très solide et très doux. Donc juste un pixel. Rafraîchissons cette page. Alors maintenant, lorsque nous survolons notre bouton, vous pouvez voir que c'est qu'il change là. Peut-être pourrions-nous essayer d'introduire une transition aussi. Donc je vais aller à la transition des effets et juste faire comme 0.3. comme d'habitude. Voyons si ça change quelque chose. Je vais juste rafraîchir la page. Et comme vous pouvez le voir, nous avons une petite transition agréable qui se passe juste ici quand vous passez la souris sur notre, notre bouton. Alors on y va. Nous avons terminé nos domaines de pratique. Eh bien, presque nous avons encore besoin de prendre soin de la réactivité, ou au moins nous devons vérifier si la réactivité fonctionne correctement. Alors faisons ça dans la prochaine vidéo. 98. 13.18: La section prête, alors maintenant vérifions la réactivité. Alors passons à la page conteneur 1120. On dirait toujours, c'est ça. Allons à moins de 992. Je suppose que ça a l'air bien. Je suppose qu'on pourrait le laisser comme ça. Allons au 768. Ça a toujours l'air bien. Et passons à nos quatre AT ce semble certainement, certainement le meilleur. Donc, par exemple, il y a peut-être un peu de problème avec ça, avec cette topographie. Ici. Allons à moins de 768. Et moins de 768, je pense que ça a l'air bien. Allons au 480. Et attrapons ce type. Et je vais faire avancer la topographie et vérifier la hauteur de la ligne si on en tape une. Et ça va paraître un peu mieux. Et peut-être que quand on va au 7068, on pourrait peut-être faire ça , eh bien, toute cette partie ici. Donc peut-être même les colonnes entières un peu plus petites, ou peut-être tous les divs à l'intérieur, juste un peu plus petits. Depuis qu'on a ajouté les cours ici, on peut juste attraper ce type. Et choisissons, sélectionnons 85 en termes de largeur, quatre-vingt-cinq pour cent, peut-être même moins que cela. Allons à 75. Ça devrait être correct. Et maintenant je suppose que ce sont des dibs look bien, mais non, ils ne sont pas correctement centrés. Donc ce que je vais faire, c'est que je vais prendre de l'aide comme un div, comme ça, comme la première div. Et ce type n'a pas de moralement, n'a pas de cours. Donc, maintenant juste rapidement, ajoutons peut-être rapidement une classe à elle. Alors appelons-le comme, je ne sais pas, comme div 768, juste pour savoir que c'est juste pour ça que c'est juste pour ces points d'arrêt spécifiques que je vais faire comme 768. Et ce que je vais faire, c'est que je vais dire à l'oxygène que, oui, je veux empiler les éléments enfants verticalement et que je veux qu'ils soient alignés horizontalement au centre. Et tout ce que nous devons faire maintenant est d'ajouter la même classe à la div restante. Donc la div 768, ce type, div 768, et ce gars, ça va être le numéro quatre, ça va être DIV 768. Et encore une fois, le péché va pour ces éléments, il y a ces divs. Donc le premier, donc c'est la div, 768, deuxième 1. Donnons 768. Comme vous pouvez le voir, si nous l'avons fait, si nous avons ajouté une classe, vous savez, au début. Gagnez certainement beaucoup de temps, mais c'est, eh bien, vous savez, quoi, vous savez, vous apprenez de vos erreurs. Donc maintenant, quand nous allons à moins de quatre AT ceci, eh bien, comme vous pouvez le voir, nous héritons de cette taille de notre div des sept ou 68 que nous avons mis à je crois que nous l'avons fixé à un soixante-quinze pour cent. Je crois que c'était 75. Je pense donc que tous ces éléments ont été fixés à 75. Donc, ce point d'arrêt à 480, nous pourrions, nous pouvons les fixer à 100, 100 %. On y va. Et ça a l'air beaucoup mieux. Donc, si nous maintenant il suffit d'enregistrer cela et de rafraîchir la page. Maintenant, vérifions simplement ce qui va ressembler sur les appareils plus petits. Alors descendons, descendons, jusqu'à ce qu'on frappe un 992. Cela ressemblera à ceci en ligne, 92, puis passons 768 et 418. Alors on y va. On s'est bien passé, on a pris soin de la réactivité. Bien sûr, nous pourrions jouer avec toutes ces options tout au long de la journée pourrait faire ces creux encore plus petits si nous le voulions. Alors disons que non. Laissons-les à 775. Alors actualisons la page. Et nous aurions qu'il ressemble à ceci, fondamentalement le même comme avant. Alors on y va. Nous avons eu, nous avons créé la section, donc nous avons pris soin de la réactivité. Donc, la section suivante serait d'ajouter ceci, pourquoi choisir nous section ? Et je pense que je vais ajouter une image à l'arrière. Mais peut-être que nous pourrions ajouter comme un arrière-plan, comme une superposition d'arrière-plan dégradé. Nous pouvons le faire, définitivement. Pourquoi pas ? Et oui, alors commençons à le faire dans la prochaine vidéo. 99. 13.19The why nous nous choisissez-: Alors maintenant, nous allons créer une autre section. Appelons ça la section Pourquoi choisir. Comme d'habitude, je vais juste créer une autre section. Et je suppose qu'on pourrait emprunter ces deux comme des en-têtes, cette taxe et cet en-tête. Donc, je vais juste le trouver ici dans mon panneau Calques bien. Je vais le poser ici. Et il en va de même pour cette rubrique. Je vais juste, je vais juste le dupliquer. Et je vais juste déplacer cette direction ici. Donc on a notre section, on a notre texte juste ici. Et je suppose qu'on peut peut-être changer cette taxe pour la laisser comme aide juridique, mais faisons ça. Changeons ce flux à pourquoi. Nous choisir ? On y va. Donc ce que je veux faire ici, c'est , en fait, je veux faire trois choses. Donc, je veux ajouter une image d'arrière-plan, mais je voudrais aussi superposer sur le dégradé. Et puis je veux ajouter du texte en dessous juste ici. Et je veux le mettre en colonnes. Et puis je veux juste ajouter quelques chiffres indiquant, vous savez, notre expérience ou l'expérience de notre entreprise. Donc avant de le faire, permettez-moi d'ajouter un texte juste pour que nous puissions voir quelque chose juste ici. Et je vais juste ambuler, prendre un peu de Lorem Ipsum cette fois. Je vais juste prendre ce paragraphe, je vais le copier et juste collé à l'intérieur. Donc, comme je l'ai déjà dit, je vais juste saisir ma section, aller à l'arrière-plan avancé et me saisir cette fois cette, je vais obtenir celui-ci, cette image JPEG fixe points points points points points. Et je vais juste le sélectionner et je vais sauvegarder ma page. Et je suppose qu'on pourrait changer les couleurs. Donc, cette aide juridique, changeons la couleur en blanc. La même chose pour notre cap. Changeons la couleur et la même chose pour ce texte. Et on y va. Maintenant, à ce stade, nous pouvons le voir. On ne voit pas grand-chose. Je veux dire, il y a, il n'y a pas assez de contraste. Je suppose que nous pourrions peut-être longtemps comme superposer un peu de couleur sur ce fond. Et les livrets seront en fait sa superposition d'une couleur, mais nous allons en faire un dégradé. Encore une fois, je vais aller à l'arrière-plan avancé. Et ici, on a cette option de gradient. Et ici, à l'intérieur de l'oxygène, vous pouvez avoir autant de arrêts de couleur a été grader arrêts que vous le souhaitez. Donc ce que je vais faire, c'est que je vais peut-être ajouter à des arrêts de couleur. Et je vais juste prendre ma couleur. Et bien sûr ce n'est pas, ce n'est pas la section que je veux, je veux choisir c'est cette section ici. Donc, encore une fois, dégradé d'arrière-plan avancé, ajouter deux couleurs. Et je vais repartir avec cette couleur foncée et cette couleur foncée. Et bien sûr, on ne voit pas grand-chose en ce moment. Mais une fois que nous commençons à baisser l'opacité, vous pouvez voir que nous sommes en train de faire notre superposition de couleur un peu visible. Alors faisons peut-être quelque chose comme 0, comme 95%. Et en ce qui concerne ce type, on va peut-être en faire 75 %. On y va. Et la grande chose à propos des gradients ici à l'intérieur de l'auxine est que, comme je l'ai mentionné précédemment, nous pouvons ajouter des arrêts de couleur. Donc, par exemple, si nous devions juste attraper ce gars et ajouter une couleur, arrêtez et ajoutez une couleur. Et puis peut-être que nous pouvons être d'accord avec celui-ci et le mettre jusqu'au bout. Vous pouvez voir que nous sommes fondamentalement juste, vous savez, faire quelque chose comme un gradient C directement transparent. Donc, il va de cette couleur plus foncée, cette couleur bleu foncé, à la couleur fondamentalement transparente, puis encore à notre couleur plus foncée et plus foncée. Donc c'est ce qu'on pourrait faire si tu voulais, mais je vais peut-être attraper ce type, prendre notre couleur et laisser tomber l'opacité à quelque chose comme ça. Et même pour celui-ci, mais toujours si légèrement. Donc on a, tu sais, comme un dégradé de fond semi-transparent. Et bien sûr, si vous le souhaitez, vous pouvez changer le type de linéaire à radial. Vous voulez avoir un dos radial retourner au sol. Ou nous pouvons choisir un haut linéaire et nous pouvons changer l'angle à 90 si vous le vouliez. Si vous voulez changer comme le flux de notre gradient, c'est possible aussi. Mais je vais le laisser comme ça. Donc, à ce stade, on pourrait peut-être juste ajouter un peu d'espacement ici. Et la prochaine chose à faire serait de mettre ce texte en colonnes. Et il y a en fait deux façons de le faire. On pourrait simplement saisir des colonnes et ajouter deux divs et mettre cette taxe dans ces vies. Mais nous pourrions également utiliser une propriété CSS appelée le long comme des colonnes ou column-count et calmer gap pour mettre ce texte dans une colonne si vous voulez simuler le flux de texte entre nos colonnes. Alors voyons comment on peut faire ces deux choses. Et quels sont les défis et les différences entre ces deux approches ? Alors commençons à le faire ensuite. 100. 13.20Texte dans des colonnes: Donc, si nous saisissons notre morceau de texte et quand nous allons faire avancer la topographie, vous pouvez voir que nous n'avons pas d'option pour placer notre texte dans des colonnes. Les colonnes Texan sont un peu, eh bien, ce n'est pas si communément utilisé, sélecteur CSS communément utilisé. Alors peut-être que c'est la raison pour laquelle il est difficile de le trouver dans de nombreux constructeurs de sites Web différents en fait. Voyons donc comment nous pouvons contester cette question nos résultats. Eh bien, tout d'abord, ce qu'on pourrait faire, c'est simplement ajouter des colonnes ici. Donc, ce serait le moyen le plus simple, je suppose, de colonnes et de colonnes avec deux divs à l'intérieur. Et quand on savait, prenez nos tags, mégaliths dupliqués, si vous le mettiez dans nos divs. Donc un. Et puis nous allons simplement le déplacer. Mettons-le à l'intérieur de la div. Vous pouvez voir que nous avons obtenu notre texte dans la colonne. Donc je suppose que ce serait la façon la plus simple de le faire ou la plus évidente, je suppose. Mais il y a aussi une autre façon de le faire. Laisse-moi revenir quelques fois jusqu'à ce qu'on ait comme ce texte et que je me débarrasse de ces comptes. Donc, ce que nous pourrions faire, c'est que nous pourrions simplement dire au navigateur d'afficher ce morceau de texte comme, vous savez, sous forme de colonnes. Mais pour ce faire, nous devons le coder un peu. Il n'y aura pas grand-chose, ça va être simple et simple. Et je pense que c'est, vous savez, c'est juste une bonne idée d'apprendre à utiliser cette technique parce que tout alors que presque toutes les autres choses que vous pouvez vous ajuster de nos outils douleur, mais ce mince spécifique et tout ce qu'il n'est pas disponible ici. Donc, ce que nous devons faire est que nous devons aller à avancé, bien sûr serait cette couche sélectionnée. Et comme vous pouvez voir que ce gars ici qui dit CSS personnalisé, quand nous cliquons dessus, vous pouvez voir que nous avons de la place pour entrer notre CSS spécifique pour cela. Et heureusement, que les règles CSS pour cet effet sont assez logiques, je suppose qu'elles s'expliquent, tout ce que j'ai besoin de taper est juste le nombre de colonnes. Et nous allons simplement taper dedans parce que c'est ce que nous voulons. Et puis fermons ça, cette règle. Et comme vous pouvez le voir, tout ce que nous avons à faire est de taper nombre de colonnes et ensuite juste combien de colonnes veulent avoir. Si tu veux en avoir cinq, je vais le mettre en cinq colonnes. Et la meilleure partie à ce sujet est que ce texte coule entre ces colonnes. Si vous deviez juste mettre ce texte à l'intérieur de dibs séparés, nous devrions manuellement tout simplement pas couper et coller les hommes ce morceau, eh bien, ces morceaux de textes. Mais en utilisant cette méthode, nous pouvons simplement laisser le texte circuler entre ces colonnes. Donc je veux avoir deux colonnes. Et en passant, si vous voulez contrôler l'écart entre ces deux, ces deux colonnes, vous pouvez simplement taper une colonne, puis un espace de tiret. Et vous pouvez le régler comme, je ne sais pas, un 150 pixels. Allons-y comme ça. Et vous pouvez voir que cet écart est, bien, c'est certainement trop grand, mais c'est comme ça que vous pouvez contrôler et ça, cet écart. Donc, je vais appliquer ce code. Je vais effondrer l'éditeur, mais je vais copier cette règle. Et maintenant un défi, autre défi avec cela, cet effet est que pourtant vous le ferez, il est facile. Je veux dire, dans certains, je suppose que le flux des impôts est un bel effet. Cependant, quand nous allons dire moins de 768, maintenant que ces deux colonnes, je ne sais pas. Je pense juste que ça a l'air bizarre. Je pense que ce serait mieux si on avait Minow, probablement une seule colonne ici. Alors, comment pouvons-nous nous remettre en question comment résoudre ce problème ? Eh bien, toujours à l'intérieur de mon CSS personnalisé avancé, je vais coller cette règle à nouveau. Et on va changer la colonne de deux à un. Et c'est tout. Nous sommes, nous pouvons fondamentalement d'une manière très, très simple, juste changer aucune règle CSS spécifique pour points d'arrêt spécifiques simplement en les ajoutant ici à l'intérieur ce CSS personnalisé et le panneau à l'intérieur de l'outil Espagne. Au fait, on pourrait peut-être et aimer le, je ne sais pas, comme un lit et un fond. On va peut-être juste, je peux voir que ce n'est qu'un gros paragraphe. Laisse-moi juste peut-être que je ne sais pas. Je vais faire semblant que c'est un paragraphe. Alors maintenant, quand nous allons à tous nos appareils, vous pouvez voir que ce paragraphe est en fait ici, mais le texte toujours bien, bien coule. Donc, nous avons, c'est comment nous pouvons créer le texte dans les colonnes ici à l'intérieur de l'oxygène et fondamentalement dans tout, dans n'importe quel constructeur ou parce que c'est juste un simple style CSS qui a écrit. Et ce que nous avons encore à faire maintenant est d'ajouter comme juste saisir l'original de ces clients mondiaux années d'expérience, experts de l'équipe, prix et honore ces chiffres ici, juste pour ajouter certains, et je voudrais juste une preuve que nous sommes un bon avocat, un bureau d'avocats. Donc c'est en fait que vous commencez à les ajouter ensuite. 101. 13.21Finissez la section: Donc, pour ajouter ces informations, je vais ajouter des colonnes. Et je vais faire du bien à 25-25 par 25 par 25. Donc je veux avoir quatre colonnes au total. Et je vais juste les déplacer un peu vers le bas comme ça. Nous avons donc quatre divs et je suppose que ce serait une bonne idée d'y ajouter des classes. Donc, je vais ajouter une classe que je vais appeler choose div, juste comme ça. Et je vais rapidement l'ajouter à toutes mes diffs. Alors choisissez div, celui-ci, pour fermer div, celui-ci, choisissez div. Et ce que je veux faire avec cette classe, c'est que je veux m'assurer que tous mes éléments ont été centrés horizontalement et verticalement. Pourquoi pas ? Et maintenant, ce que nous devons faire, c'est simplement ajouter ces informations à l'intérieur. Je vais donc ajouter du texte, puis un autre texte. Donc, fondamentalement, n'ont que 22 simples éléments d'information, simple, texte simple. Et je suppose qu'on pourrait ajouter des cours à ces deux-là. Donc je vais l'appeler comme pour perdre eu pour diriger. Et celui-ci va être choisir le texte. Choisissez, choisissez le texte. Je vais ajouter la classe. Donc pour ce gars, je vais m'assurer que ça a cette couleur blanche, que c'est vraiment plus grand. Peut-être pas si grand. Allons au 32. Et le premier était des clients mondiaux. Alors faisons dix. Ok, on y va. Et rendons la police plus grande. Rendons-le plus épais. On y va. Donc ça peut être encore plus grand que ça, comme 82, ça devrait aller. Et puis je vais prendre ce texte du bas. Je vais y ajouter cette couleur. Je crois que c'était celui du client. On y va. Je veux rendre le poids de la police un peu plus épais et je pense que la taille ira bien, mais passons à la typographie. Nous allons nous assurer qu'il est défini sur text-align est réglé sur le centre. Je vais le mettre en majuscule. On y va. Et je pense qu'il serait préférable d'attraper ce gars et d'en faire un méga texte aligné au centre aussi bien. Et peut-être que nous allons changer la hauteur de la ligne à quelque chose comme 1.1. donc nous y allons. Peut-être ajoutons un peu d'espace ici comme ça. Peut-être pas tant que ça. Ça devrait être bien. Donc, tout ce que nous avons vraiment à faire est de simplement dupliquer ces deux éléments. Donc je vais faire ça très vite. Donc, je vais dupliquer ce premier texte, vais le mettre dans cette div, et puis je vais dupliquer ce div inférieur, le mettre ici. Alors je vais faire la même chose. Dupliquer, mettre à l'intérieur. Puis ce type duplique et le pose ici. Et encore une fois, dupliquez et mettez-le ici. Et dupliquez-le et mettez-le ici. Je suppose que nous pourrions peut-être envelopper ces deux éléments dans un div et ensuite simplement cloner un div. Mais je ne voulais pas faire comme div et le dividende, dividende si je ne voulais pas faire trop d'imbrication div. Donc on a, ok, donc des années d'expérience. Alors disons que nous sommes une entreprise. Disons que nous l'avons fait, nous avons comme pas beaucoup, mais à 124 ans d'expérience, c'est une chose qui suffit. années de X. faisons comme peut-être, je ne sais pas dans ce temps, faisons comme, je ne sais pas, 15 000 cas résolus comme ça. Je ne sais pas. Cas. Ou peut-être faisons comme 34 membres comme ça. Et faisons mon je ne sais pas, 19 partenaires dans le monde entier, disons-le, faisons-le. Faisons ça. Mondial. Partenaires. On y va. Alors sauvons ce type. Alors maintenant, allons à notre page. Je vais rafraîchir ceci et le rendre plus petit. Voyons donc à quoi cela ressemblera sur les appareils plus petits. Alors changeons ça, changez ça. Une fois qu'il atteint ces points de rupture, vous pouvez voir que tout est joli, assez bien. Ok, donc on a créé cette section, je pense que chez Old commence à être plutôt sympa, calme professionnel. Donc, la partie suivante serait d'ajouter une section similaire aux membres de l'équipe. Et nous savons dans l'original jette cette équipe professionnelle ici. Mais puisque nous disons que nous avons 34 membres, disons que ce sont des membres de notre équipe. Faisons autre chose. En fait, créons ça, comme ces cartes, je suppose, bonk, mettons-les dans un curseur pour que nous puissions réellement cliquer sur la gauche et la droite, juste voir comme, comme un carrousel de notre, des membres de notre équipe. Alors commençons à le faire ensuite. 102. 13.22Commencez à la section Team: Commençons donc par ajouter une nouvelle section. Donc encore une fois, je vais juste me frapper et juste sélectionner le contenu intérieur. Et puis je vais juste ajouter une section. Cela nous permettra d'ajouter cette section exactement là où nous voulons qu'elle soit. Et je pense que je vais juste emprunter ces deux textes, cette mini rubrique et cette rubrique principale. Donc, si vous ne voulez pas utiliser le menu contextuel juste ici, vous ne voulez pas cliquer dessus, puis choisir dupliquer. Vous pouvez simplement saisir un morceau d'un élément que vous voulez dupliquer. Et vous pouvez aller ici dans le volet d'outils et vous pouvez simplement cliquer sur le composant dupliqué. La même chose pour ce type. Et tout ce que je vais faire, c'est que je vais amener ces gars ici. C' est donc ce titre et ce texte. Donc je suppose ici, je vais taper dans notre équipe, peut-être quelque chose comme ça. Et voici nos avocats. Peut-être que nous allons, capitalisons ce mot. Et bien sûr, je vais prendre ma section et je veux tout aligner sur le centre. Et si nous le pouvions si je pouvais écrire ça correctement, ce serait bien. Ok, donc maintenant tout ce que vous avez vraiment à faire est d'ajouter un, eh bien, je veux le faire comme des cartes simples avec des images et du texte. Je veux en faire un curseur. Donc, parce que nous avons 34 membres, donc je suppose que nous pouvons dire que nous avons 34 avocats. Alors montrons plus de trois, mais rendons cette section compacte. Ce que je vais faire, c'est ajouter un curseur. Et dans ce curseur, nous n'allons pas avoir d'images ou quelque chose comme ça. Nous allons ajouter des colonnes. Mais d'abord, je vais peut-être avoir ces deux diapositives. Et peut-être que je vais aller au coiffage. Et je veux rendre l'animation horizontale, mais je veux rendre l'animation plus rapide. Je veux enlever le rembourrage autour des toboggans et je ne pense pas que je veux voir les points. Donc, je vais supprimer les points de spectacle, et je n'ai pas l'option infinie activée. Donc, en gros, ce sont juste ces quelques choses que nous devons faire ici. Maintenant que nous avons notre configuration de curseur, nous avons notre diapositive. Ce que je vais faire, c'est que je vais commencer à ajouter des divs à cette diapositive. Donc, je vais juste cliquer sur ajouter. Et je vais taper div. Et je vais cliquer sur celui-ci. Et je veux que ce div soit comme 33 pixels de largeur sur 33% de largeur. Et je veux que ce div soit réglé à 33% parce que nous allons avoir trois divs d'affilée. Donc je vais juste y aller trente trois, trente trois et trente trois. Et quand ce gars est ajouté ici, si nous allons juste toboggan et, ou si nous dupliquons notre div. On y va. Vous pouvez voir que nous les ajoutons verticalement et c'est, ce n'est pas ce que nous voulons. Ce que nous voulons, c'est que nous voulons les empiler horizontalement. Laisse-moi passer à notre première diapositive. Je vais empiler les éléments enfants horizontalement. Et on y va. Tous nos divs sont placés l'un à côté de l'autre. Mais pour l'instant, je vais supprimer ces deux divs parce que je veux, je veux dupliquer cette div, mais je veux le dupliquer avec, avec tout son contenu en une seconde. Alors tout ce que vous aurez à faire, c'est que nous ne changerons rien. Et je change certains aspects de notre vie sans ajouter tous les éléments encore et encore. Mais avant de le faire, permettez-moi d'ajouter rapidement une classe à notre div. Je vais l'appeler peut-être comme Team. Et je vais ajouter une classe parce que je veux être capable de manipuler ce conteneur. Et finalement, je veux être capable de manipuler tous les conteneurs pour les membres de mon équipe et, vous savez, en une seule fois. Mais commençons à faire une piste dans la prochaine vidéo. 103. 13.23Ajouter les diapositives: Donc, je suppose que ce que je voudrais faire d'abord est peut-être que j' ajouterais un peu de rembourrage à l'intérieur de mes diffs. Je vais aller avec peut-être quelque chose comme 12 pixels tout autour. Ça devrait suffire. Et bien sûr, ce que je veux faire, c'est ajouter une image. Donc, je vais juste ajouter une image à l'intérieur, aller à la navigation. Et je pense que c'était ma première équipe. Je vais juste sélectionner cette image, je vais la sauvegarder. Et encore une fois, je vais devoir rafraîchir ma page pour voir cette image. Donc, il est là. Et sous cette image, ce que je veux faire, c'est ajouter quelque chose comme le nom de cette personne. Peut-être ajouter sa position, peut-être un texte, et peut-être une consommation de médias sociaux comme ça. Donc, dans ce premier div que nous pourrions vouloir même changer son nom si vous le vouliez. Donc je vais le renommer en, je ne sais pas, juste peut-être l'équipe 1, comme ça. Je vais juste ajouter un simple texte. On y va. Et je vais l'appeler peut-être ce type. Appelons-le le le PDG. Et ajoutons peut-être une classe aux sélecteurs. Appelons ça la position, peut-être la position de l'équipe. Donc la position de l'équipe. On y va. Et faisons-en notre lecture. Peut-être. Faisons la typographie du texte. Mettons-le au centre. Et peut-être que nous allons changer la police pour quelque chose comme 500 ou 600, ou peut-être même un 700. Et peut-être que nous allons changer la taille de police à quelque chose comme 13 ou 14. Et peut-être ajoutons quelques espaces. Donc, je vais ajouter comme peut-être voyons comme dix pixels de marge vers le haut et peut-être quelque chose comme dix en bas. Et bien sûr, je vais aller dans mon équipe un conteneur. Et dans cette classe, je veux empiler, je veux tout mettre, tout empiler au centre. Donc, je vais choisir les éléments enfant étape verticalement. Et je vais définir cet alignement horizontal d'élément de ligne au centre. Donc le prochain texte sera comme le nom de notre membre de l'équipe. Donc je vais m'ajouter, je vais ajouter un titre. On y va. Et je vais le faire négliger en direction de la h4. Et encore une fois, je vais ajouter une classe comme l'équipe, le nom de l'équipe. On y va. Et je vais changer la couleur du texte pour celui-ci juste ici. Et peut-être donnons-nous juste un nom à ce gars. Appelons-le comme Michael Arnold Johnson. Mon contrat un peu de retard, le célèbre athlète, Michael Johnson. Allons à la topographie. Peut-être que nous allons changer la taille de la police à quelque chose comme 16 ou 20, ou 26, ou peut-être même comme 28. On peut toujours changer ça plus tard parce je vais peut-être introduire un espacement des lettres. Et cela devrait être, cela devrait aller bien. Alors maintenant, ajoutons du texte, juste du texte simple. On y va. Et peut-être que je vais juste emprunter une partie de ce texte à partir d'ici et le coller juste ici. Et encore une fois, je vais ajouter un cours, certains comme Team sur la description. Mais je pense que ce texte semble bien. On est peut-être, modifions peut-être la taille de la police. Juste jamais si légèrement. Quelque chose comme 14. Ça devrait être correct. Et la dernière chose à faire ici, je suppose, serait d'éditer les icônes des médias sociaux. Alors essayons et les icônes sociales. Facebook, Instagram, Twitter. Ouais, ok, laissons ça comme ça, mais changeons les icônes. Changons peut-être le style de l'icône. Voyons ce que ça aura l'air bien. Peut-être carré. Peut-être que nous allons changer la couleur de fond pour notre rouge. Et nous allons changer la couleur de l'icône deux, comme ça, couleur pâle ou peut-être même cette couleur de balayage d'avocat. On y va, ça devrait aller. Alors peut-être que lorsque vous survolez cette icône, prenons notre rouge, mais rendons ça un peu plus sombre. Donc, lorsque nous survolons cette icône change un peu. Et peut-être que nous allons changer la taille des articles. Rendons-les significativement plus petits. Peut-être comme 26. Et l'espace entre les icônes, peut-être comme six. Ça devrait être bien. Et je vais ajouter une marge en haut comme 10, ou peut-être même 26. Ça devrait être correct. Et bien sûr, comme vous pouvez le voir, j'ai oublié d'ajouter une classe à mon icône. Donc je vais y aller comme, je vais ajouter un cours appelé Icônes de l'équipe. On y va. Je vais ajouter à mon ID ici, et je vais cliquer sur copier les styles dans un autre sélecteur, et je vais simplement les coller sur l'icône de mon équipe. Donc maintenant, notre classe d'icônes d'équipe a tout, toutes ces valeurs. Donc je suppose que maintenant on pourrait peut-être juste ajouter un peu d'espacement ici. Ajoutons, mettons-le quelque part ici. Donc maintenant, quand nous attrapons, notre équipe a gagné et nous avons dupliqué, il, peut voir que maintenant notre curseur est à la recherche, semble beaucoup plus agréable. Je vais juste renommer cette équipe un à deux. Je vais juste changer cette image à ceci, à cette image. Appelons-la. Disons que ce type est le PDG, donc elle sera comme le directeur financier, peut-être le directeur financier. Pourquoi pas ? Et appelons-la. Je ne sais pas, Jane et Jane Grey noeud. Et maintenant, attrapons l'équipe aussi et les terres dupliquent ce gars. Et nous allons, je vais renommer cette équipe en, je vais l'appeler T3. Et cette image va être ID. Prenons cette image. Et elle sera comme chef des opérations. Pourquoi pas ? Et nous allons colorer. Je ne sais pas. Appelons-la Margaret. Margaret a lu. Pourquoi pas ? Peut-être ajoutons un peu plus de texte ici. Je vais juste prendre une partie de ce texte et en ajouter un autre et un peu, du texte comme ça. Et la même chose ici avec le paragraphe. Ou peut-être moins que ça, le paragraphe, laissons-le. Laisse-le comme ça. On y va. Et la même chose ici. Ou peut-être que je vais juste copier un peu avant ce morceau de texte angularjs à certains, à une certaine variété ici. On y va. Donc, nous avons nos membres de notre équipe. Laisse-moi juste le sauver et le sauver. Donc maintenant, tout ce qu'on a vraiment à faire, laisse-moi fermer ça. Comme nous pouvons le voir, nous avons trois divs à l'intérieur de cette diapositive et menu. On peut renommer cette diapositive en, appelons-la diapositive 1. Et puis, je vais le fermer pour que vous puissiez tout voir mieux. Je vais dupliquer cette diapositive et je vais la renommer. Je vais l'appeler diapositive 2. Et à l'intérieur de cette diapositive, je vais juste entrer dans, encore une fois, changer toutes les images. Donc, je vais attraper celui-là. Prenons cette image. Et puis je vais aller en équipe pour, je vais changer cette image pour cette image. Et je vais le faire, je ne vais pas me soucier de changer le nom dans la position. Je suis presque sûr que tu sais déjà comment le faire. C' est juste une question de changer le texte. Et on y va. Je veux juste te montrer comment ça marche. Alors laissez-moi juste maintenant prévisualiser cette page et vous pouvez voir que notre curseur fonctionne avec nos différentes images. Donc maintenant, puisque nous avons nos cours et ajouté à notre, à nos membres de notre équipe, nous pouvons par exemple, changer tout en une seule fois. Nous pouvons changer cette taille de texte. Disons que je veux en faire 18. Et peut-être que je veux changer l'espacement inactif, cette marge pour être aussi grande, par exemple. Ou peut-être que j'aimerais agrandir cette taille de police. Je veux en faire 32 ou quelque chose comme ça. Et peut-être que je veux ajouter un peu d'espacement en bas. Tu sais, on a les cours. Donc, nous pouvons maintenant faire, faire que tout fonctionne beaucoup, beaucoup plus lisse. Nous pouvons rendre notre processus et beaucoup, beaucoup plus lisse. Alors je vais le sauver. Je vais passer trop de temps et aucun changement dans la façon dont ces gars travaillent. Donc nous avons eu notre curseur et que j'ai oublié de mettre en autoplay, je crois. Donc je vais aller à la configuration automatique, vais sauver ce gars. Et je vais rafraîchir ma page. Et maintenant notre, notre curseur fonctionne comme prévu. Oui, alors on y va. Nous avons notre, je pense que ça a l'air joli, plutôt sympa et notre, notre curseur. Donc je suppose que nous pouvons maintenant passer à notre prochaine section. 104. 13.24Commencez la section témoignages: Dans les prochaines vidéos, nous allons créer notre section Témoignages. Et pour cela, nous allons à nouveau utiliser le curseur, mais cette fois nous allons le remplir avec le module de témoignage. Comme d'habitude, je vais juste créer une nouvelle section. Laisse-moi voir ma structure. Et nous allons ajouter une section. C' est ce type là. Et cette section va avoir une couleur de fond de ce rose pâle juste ici. Donc, je vais ajouter un curseur. On y va. Et comme d'habitude, je pense que je vais juste me débarrasser de ces deux diapositives. Je vais utiliser celui-là. Et bien sûr, nous pourrions faire quelques options de configuration et avec notre curseur. Donc, selon ce que tu veux faire. Et nous pouvons, vous pouvez avoir l'animation réglée sur la vitesse de fondu horizontale, toutes ces choses. Maintenant ce que je vais faire, c'est que je vais ajouter cette couleur à celle-ci. Je pense que je vais enlever le panoramique autour des diapositives mentales. Je pense que je vais étirer toutes les toboggans à la même hauteur. Et bien sûr plus tard, je pense que je vais utiliser l'option de lecture automatique et l'infini, mais pour l'instant je ne vais pas utiliser le hub parce que, vous savez, je ne veux pas que nos diapositives aillent d'avant en arrière. Biologistes, je sais. Je veux, je veux que ça reste simple pour l'instant. Alors nous avons ensuite notre diapositive. Je vais ajouter un témoignage. Témoignage. On y va. Et nous obtenons quelques éléments de témoignage pré-conçus ici à l'intérieur. Donc on a eu le texto, on a le nom, et on a la, oh, je suppose la compagnie pour laquelle cette personne travaille. Ce que je vais faire, c'est d'abord ajouter une image à mon témoignage. Et je pense que je vais aller avec les mêmes images qu'avant. Donc je vais juste en sélectionner un. Et encore une fois, je vais devoir l'enregistrer et rafraîchir la page afin que vous puissiez voir cette image réellement ajoutée à mon, à mon témoignage. Et je vais descendre, descendre, ici pour que nous obtenions notre image dessus. Mais bien sûr, nous pouvons changer certaines choses à ce sujet. Premier objectif, nous pouvons saisir la mise en page. Je veux le rendre vertical juste MAINTENANT, tout comme c'est dans notre, dans notre référence de conception. Et puis je veux aligner le contenu au centre, même pour la version mobile, mobile. Donc, dans l'ensemble, je suppose qu'on pourrait appeler ça un jour. Mais, tu sais, il y a encore quelques choses que j'aimerais faire. Donc, tout d'abord, quand nous allons à notre panneau d'image, nous pouvons définir, bien sûr, la taille de l'image, mais surtout nous pouvons définir la position de l'image. Nous pouvons le faire avant le contenu, ou nous pouvons le faire après. Alors je vais le faire après. Et je pense que je vais réduire la taille de l'image à quelque chose comme peut-être 66. Cela devrait être, cela devrait être correct. Et quand nous allons à notre topographie et ensuite le texte, nous pouvons changer cela d'abord que ce gros taxait trop bien quelque chose d'autre dans notre cas, vous pouvez voir que nous avons comme ça, je pense est tout simplement une autre, comme une police serif. Donc ce que je vais faire, c'est que je vais changer cette police pour quelque chose, quelque chose, quelque chose de serif. Je vais y aller avec Laura. C' est juste une belle police Google serif. Ce gars juste là. Et je pense que je vais, je vais aller dans oblique comme ça et peut-être le rendre juste un peu plus petit à quelque chose comme peut-être 18. Et je vais augmenter le poids de la police à quelque chose comme 600 distribué droit ? Maintenant, si nous regardons notre référence de conception, nous pouvons également changer ces bits ici. Donc ce que je vais faire, c'est retourner à ma, à ma typographie, aller à la section Auteur. Et je pense que je vais rendre ce type un peu plus petit, mais je vais augmenter le poids de la police. Peut-être même plus que ça à quelque chose comme 700. Et peut-être que je vais attraper ça, ces étiquettes principales. Je vais changer la police pour quelque chose comme 500. Et encore, je vais aller à l'auteur. Et peut-être que je vais le rendre en majuscules et le rendre juste un peu plus petit. On y va. Et bien sûr, nous pourrions aussi changer les informations de l'auteur. Et donc ce peu ici, mais je pense qu'ils ont l'air, ils ont l'air bien. Donc je suppose qu'on pourrait peut-être juste emprunter du texte à partir d'ici et le coller dans. Ici. On y va. Et bien sûr, nous pourrions peut-être changer un peu ce texte. Je pense que peut-être que les topographies encore trop grandes, comme 18 points est un peu trop. Comme 16 points. Et fondamentalement, nous avons fini avec ce curseur, sera cette diapositive ici. Mais bien sûr, nous devons encore dupliquer et changer certaines choses à ce sujet. Je veux dire, nous aimerions avoir d'autres témoignages sur notre site. Mais quand on regarde l'original, on peut voir que nous avons encore comme ça, quelques guillemets, je suppose, juste ici avant chaque, chaque morceau de texte juste ici. Alors, comment pouvons-nous y parvenir ? Eh bien, c'est en fait assez simple ici à l'intérieur de l'oxygène et nous aurons juste besoin d' ajouter un état CSS similaire à notre diapositive. Et ça peut sembler un peu difficile, mais ce n'est vraiment pas le cas. Commençons à le faire dans la prochaine vidéo. 105. 13.25Ajouter l'état avant: Donc, nous savons déjà comment travailler avec l'état de vol stationnaire, mais aussi ici à l'intérieur, à l'intérieur de l'oxygène et dans CSS, vous pouvez également utiliser l'état avant et après. Donc, si nous choisissons l'état précédent, vous pouvez voir que la première chose que nous pouvons entrer ici est la zone Contenu. Eh bien, nous pouvons insérer du contenu parce que les états après et survol vous permettent généralement d'ajouter quelque chose, autres, comme certains éléments de conception ou du contenu avant ou après un élément spécifique. Donc, dans notre cas, ce que nous aimerions faire est que nous aimerions ajouter le simple comme une option de guillemets. Eh bien, comme son symbole, entre guillemets. Donc ce que je vais faire, c'est quand je serai sur ce témoignage, je vais aller à l'état avant. Et dans ce contenu, si je tape simplement quelque chose comme je ne sais pas auparavant, vous pouvez voir que cela est en fait affiché avant mon témoignage. Mais je ne veux pas juste taper avant. Je vais peut-être ajouter comme ces guillemets comme ça. Et maintenant, je vais aller à la topographie avancée et on peut changer la taille de la police. Asseyez-vous comme 46 ans. Vous pouvez voir que ça change en fait ici. Et nous pouvons, nous pouvons, si nous le voulons, nous pouvons changer ce texte. Rien de la famille de polices à dire comme notre affichage texte pourpre. On pourrait changer le poids de la police, quelque chose comme May 600 être. Et on pourrait aussi y retourner. On peut changer la hauteur de la ligne pour dire un. On peut changer l'espacement des lettres si tu veux, mais ça ne marcherait pas vraiment ici. Mais surtout ce que je veux faire, c'est que je veux aller à la taille dans l'espace en lui. Et juste ici dans l'option de marge, si bien sûr nous tapons comme 25, vous pouvez voir que tout se répand. Mais si nous aimons le négatif 25, vous pouvez voir que notre marge est réduite et notre texte n'est que plus proche de notre, de notre guillemet. Mais je pense que je vais aller avec peut-être moins cinq ou peut-être même un 0 pour ça au GIP semble bien. Et peut-être que je vais juste augmenter la topographie à quelque chose comme peut-être 56. Cela devrait être, cela devrait être correct. Donc, comme vous pouvez le voir, ajouter des éléments à vos états avant, avant et après en fait est vraiment vraiment, vraiment facile et nous pouvons l'ajouter à nos témoignages, quel que soit le module de témoignage. Donc maintenant, comme je l'ai mentionné précédemment, laissez-moi juste sauver rapidement. Comme je l'ai déjà mentionné, tout ce que nous avons vraiment à faire, c'est simplement de dupliquer nos diapositives. Laisse-moi faire comme deux. Et puis tout ce que nous avons à faire, c'est juste changer les noms, le texte et les images. Mais commençons à le faire ensuite. 106. 13.26Finissez les témoignages: Donc d'abord, je vais passer à mon deuxième témoignage. Et ici, bien sûr, je vais changer cette image pour peut-être celle-là. Et ce gars, je vais m'appeler Jane Doe va s'appeler Jim, fais ça. Et je vais juste prendre ce texte d'ici et le coller à l'intérieur et sauver ce gars. Et puis j'irai à ce témoignage. Et encore une fois, changez cette image, peut-être à cette image. Je vais télécharger ça. Et ça va être comme si tu connaissais Mary, Mary Johnson. On y va. Peut-être qu'elle ne travaille pas pour les solutions web Jarvis, mais pour l'extérieur pas de super solutions de nettoyage ou quelque chose comme ça. Solutions de super choline. On y va. Réparez ça. Et je vais sauver ça. Et jetons un coup d'oeil à notre, à notre page. Donc, je vais copier ceci et le coller dans mon mode Incognito. Je vais descendre jusqu'ici. Et comme vous pouvez le voir, notre curseur fonctionne, fonctionne correctement. Bien sûr, si on le voulait, on pourrait attraper mon curseur maintenant. Et je veux que ces animations soient plus rapides. Donc je vais faire comme Arnold 350. Et pour la configuration, je vais ajouter l'autoplay, je vais sauver ça. Et maintenant, laissez-moi juste rafraîchir la page. Et comme vous pouvez le voir, tout fonctionne bien. Tout fonctionne correctement. Donc je suppose que la dernière chose à faire ici serait de vérifier la réactivité. Je vais aller à la page conteneur 1120, mais avant ça, je vais affliger l'autoplay. Donc je vais aller à la page conteneur 1120. Ça a l'air bien. 992. Ça a l'air bien. 768. Je vais toujours regarder à droite. Et 80. C' est quand même, ça a toujours l'air bien. Mais comme vous pouvez le voir, ces divs ne prennent pas tout l'espace disponible. Donc on va prendre mon équipe une div juste ici. Et je vais m'assurer que je suis sur le coup de la BID va. Nous avons ajouté la taille à notre ID et je vais juste faire la largeur 100%. On y va. Je vais faire la même chose pour cette équipe à div. Et 100%. On y va. Et pour celui-ci, c'est, je pense que c'est l'équipe 3. Encore une fois, la même chose, 100 %. Le regard maintenant il semble beaucoup mieux et nous devons faire la même chose pour notre, pour la volonté ces diapositives. Donc d'abord, je vais grep le gars de la boue de curseur, ce gars juste ici et il ne le fera pas, tous ces éléments peuvent être empilés verticalement. Je vais m'assurer qu'ils sont centrés. Et encore une fois, T1 pour bloquer 100 %. Ce gars, le second avec 100 %. Et le dernier, et le dernier. Passons à 100 %. On y va. Et je suppose que quand on va au 480, maintenant, je suppose que c'est toujours ça semble bien. Alors on y va. Nous avons créé nos témoignages. Nous résolvons certains problèmes de réactivité. Et comme vous pouvez le voir ici, en termes de témoignages, peut-être que ces flèches n'ont pas l'air trop grandes. Donc je suppose qu'on pourrait se débarrasser d'eux. Pour qu'on puisse se débarrasser de ces flèches. On a, on a le point. Donc, si quelqu'un veut vraiment savoir, Parcourez nos témoignages, ils pourraient toujours simplement cliquer sur ces, toutes ces balles. Donc je pense que c'était ce curseur. Alors je vais aller au coiffage. Laisse-moi juste aller à la configuration. Je ne veux pas montrer les flèches. Alors maintenant, quand on passe à moins de 768, il n'y a pas de flèches et ça juste l'air plus propre. Et si on le met à la lecture automatique, il va s'autojouer. Donc je suppose que nous sommes bons. Nous sommes prêts à y aller. Donc je vais juste le sauver. Et notre prochain ordre d'affaires serait d'ajouter quelque chose comme un, quelque chose comme un blog rapide, réel comme nous pouvons ajouter, nous allons juste jeter un oeil à l'original. Nous pourrions ajouter juste comme cette dernière partie de nouvelles juste ici. Mais nous allons commencer à le faire dans la prochaine vidéo. 107. 13.27The Blog Posts: Dans les prochaines vidéos, nous allons créer cette section de billet de blog. Et nous allons d'abord emprunter ces impôts et ensuite nous allons juste ajouter. Juste de la chance trois. blog sera fondamentalement, essentiellement blogposts à des extraits. Donc, comme vous pouvez le voir, je viens d'ajouter rapidement quelques vœux, juste pour, de ne pas vous ennuyer avec le même processus à nouveau. Donc je vais aller sur mes pages et je vais éditer ma première page avec de l'oxygène. Et comme d'habitude, je vais juste commencer par créer une autre section qui va descendre ici. Donc d'abord, je vais emprunter ce texte, ce texte de notre équipe. Je vais le dupliquer et le mettre ici dans ma section. Et puis je vais dupliquer cette rubrique. Et je vais le poser ici. Donc, bien sûr, il doit aller au-dessous de ce, ce texte parce que maintenant vous pouvez voir que nous avons ce notre équipe et rencontrer nos avocats morceaux de texte. Et donc je vais être, nous allons taper des nouvelles. Et je vais taper comme sur notre blog. Et un fils pendant que je suis là, je vais juste m'assurer que ce morceau de taxi se met au centre. Tout va bien. Je vais aller à la section et je vais au centre et écrire comme ça. Donc ce que je vais faire maintenant, c'est que je vais ajouter mes messages. Donc, je vais juste ajouter notre module de messages faciles. Et on y va, on l'a juste là. Donc, si nous regardons notre référence de conception, ce que nous devons faire est d'ajouter d'abord l'image en vedette, puis quelques métadonnées comme la date, les catégories , puis le titre, puis un extrait. Donc, d'abord, dans mon module de pose facile, je peux choisir comme ce premier standard d'image crit présent. Et je vais aller à Query, et ensuite je vais aller à la coutume. Et ici, je veux changer de compte. Je vais y aller comme trois parce que je crois qu'on avait trois postes. Et je vais juste le sauver. Et puis je vais appliquer les paramètres de requête. Et comme vous pouvez le voir, nous avons obtenu notre post en cours d'affichage. Mais bien sûr, il n'y a que quelques problèmes. Donc tout d'abord, je vais peut-être augmenter cet espacement ici. Ce qu'on veut faire, c'est qu'on ne veut pas dire ces extraits de plus en plus grands. Donc, ce que nous devons faire, c'est que nous devons changer ces changements, et ensuite nous devons changer la date. C' est censé être juste ici pour notre titre. Et puis nous devons les ajouter des catégories et peut-être se débarrasser du bouton Lire la suite. Alors commençons à faire tout ça ensuite. Tout d'abord, je vais aller à l'administrateur et je vais juste nettoyer mes messages. Donc ce que je vais faire, c'est que je vais juste, vous savez, réparer ces extraits. Je ne veux pas que ces actes soient aussi longs. Donc, je vais juste résoudre rapidement cela et ensuite nous pouvons réellement passer au style et à nos billets de blog. 108. 13.28Qui publient les publications du blog: Bon, alors maintenant commençons à coiffer nos billets de blog. Donc, tout d'abord, je vais attraper mon module de vantail facile. Et je vais demander le décompte personnalisé. Et je veux montrer trois messages. Donc, je vais appliquer les paramètres de requête. Et nous avons nos messages juste ici. Donc, à ce stade, nous pourrions commencer à changer certaines choses sur notre, sur nos billets de blog. Mais, vous savez, il y a certaines choses que nous allons, nous serons en mesure de faire juste à partir de notre et je suis ce outils paiements cap Espagne. Mais malheureusement, pour recréer ce genre de design, nous devrons certainement creuser dans un code, mais ce ne sera pas difficile, ce ne sera rien d'effrayant. Donc, vous devriez avoir peur URL. Alors avant ça, laisse-moi juste ajouter un peu d'espacement ici. Et la première chose que je veux faire, c'est peut-être que je vais changer la couleur de nos titres. Donc, je vais aller à mon, bien sûr, pour les messages faciles à Styles titre. Et changeons la couleur. Essayons que ce soit peut-être cette couleur plus foncée, presque noire. Et peut-être que je vais juste sauvegarder mon, mon modèle. Donc, je vais enregistrer ceci comme mes messages prédéfinis, et je vais le sauvegarder. Donc, si nous regardons l'original, il y a quelques choses que nous devons faire. Tout d'abord, nous n'avons pas la date ici en haut, comme dans notre cas. Nous avons la date et les catégories ici. Nous n'avons pas le bouton Lire la suite. Et on a un extrait juste ici. Et bien sûr, les catégories sont un peu stylées. Alors commençons par se débarrasser de cet état ici. Et mettons-le après l'analyse du titre. En même temps, une fois se débarrasser de cet administrateur et aucun commentaire étaient des liens. Donc ce que je vais faire, c'est que je vais aller aux modèles, et j'ai besoin d'aller aux templates, PHP. Donc, quand on regarde notre structure ici, notre structure ici, on peut voir que nous avons eu ça en premier. Eh bien, le premier est l'image, mais ensuite on a cette div, OK, supposée superposition de date d'image, et ensuite on a cette fonction de date juste ici. Donc tout ce qu'on a vraiment à faire, c'est juste attraper ce type. Je vais le couper. Et puis je vais descendre ici où nous pouvons voir notre auteur de post matter, post meta item. Et puis nous avons dû poster des méta commentaires, ou ce sont tous, eh bien, ces deux, ces deux liens. Donc, fondamentalement, ce que je vais faire, c'est que je vais me débarrasser de tous ces éléments et je vais juste coller cette fonction de date ici. Et quand nous appliquons le code, nous pouvons voir que notre date saute juste ici, saute à droite, juste en place. Et à ce stade, nous n'avons pas besoin de cette div ici. Gardions le code un peu plus propre. Je vais m'en débarrasser. Et en même temps, ici, on peut voir cet oxo en lire plus. Et nous n'avons pas de bouton Read More ici, donc nous pouvons nous en débarrasser. Donc je vais juste le sélectionner. Et puis laissez-moi simplement le sélectionner. Et je vais juste enlever ce gars, appliquer le code. Donc on a le titre et on a eu la date. Donc maintenant, nous devons ajouter les catégories ici, juste ici. Mais avant de faire ça, je vais tout sauver. Donc, 90, tout ce dont nous avons vraiment besoin, c'est que nous avons besoin des catégories à part ici. Donc, pour ce faire, je vais juste emprunter ce morceau de contenu, ce PHP d x mal. Je vais le copier et je vais le coller à côté de ma date. Et bien sûr, si nous appliquons le code, nous aurons un extrait juste à côté de notre date juste ici. Donc tout ce qu'on a à faire est de changer ce texte, l'extrait pour ne pas aller, allez. Bien sûr, ce n'est pas un oxygène alors est une chose WordPress. Et si nous appliquons simplement le code, nous avons affiché nos catégories avec les liens. Mais bien sûr, ils ne sont pas stylés comme nous aimerions qu'ils soient stylés. Et c'est, tu sais, c'est la chose que nous sommes, nous sommes sur le point de changer. Mais vous devez vous rappeler qu'il y a comme des classes WordPress générales de guerre qui sont responsables rendre ces classes ressemblent à leur apparence, regardent la façon dont elles ont l'air. Il n'est donc pas dépendant de l'oxygène. Donc j'ai peur que nous ne soyons juste un peu de code pour faire ce look. Ce qui fera ressembler nos catégories dans l'original. Mais je pense que ce sera un grand exercice pour nous et transmettre. Les règles que nous allons écrire vont être vraiment, vraiment simples. Alors oui, c'est peut-être arrêter de parler. Et passons en fait dans le style par erreur. Et nos catégories. 109. 13.299: Donc, comme je l'ai dit dans la vidéo précédente, il y a certaines classes ou une classe qui sont responsables du style des catégories sur sont les classes WordPress et les classes d'oxygène. Et si nous inspectons ce couvercle ici, vous pouvez voir que nous avons cette liste non ordonnée catégories de poste de classe. Et dans cette classe, nous avons des éléments de liste. Et à l'intérieur de ceux que nous avons, nous avons des liens. Et nous allons utiliser tous ces trois éléments pour donner à nos catégories l'apparence qu'elles devraient. Mais nous allons commencer par les catégories de poste. Donc, ce que je vais faire, c'est que je vais revenir à mes modèles, à mon modèle CSS. Et ici, je vais juste taper dans les catégories de poste d'époque. On y va. Et puis il suffit d'ouvrir et de fermer le support. Ce que nous voulons, c'est que nous voulons que ces catégories soient les unes à côté des autres. Nous voulons qu'ils soient en ligne. Donc, je vais commencer par le taper dans display flex. C' est donc l'une des règles que nous définissons habituellement lorsque nous voulons manipuler nos sections ou nos développeurs. Et puis je vais dire direction flexible, rho, je vais appliquer le code. Et comme vous pouvez le voir, nos éléments sont bien empilés sous l'huile l'un à côté de l'autre. Je voudrais donc aussi me débarrasser de ces points. Donc, je vais aller à mon, Nous allons poster des catégories. Eh bien, règle et je vais taper dans le style de liste. Je veux le mettre sur None. Et puis quand nous appliquons le code, vous pouvez voir que ces points de puces ont disparu. Donc maintenant ce que je veux faire, c'est que je veux styler les pièces individuelles de l'ONG comme ces catégories individuelles. Donc je vais coller ça, et cette fois je vais frapper, eh bien, je vais taper LI, qui est un élément de liste. Et je vais ouvrir et fermer le support. Et ce que nous voulons faire, je suppose que nous voulons ajouter un peu de rembourrage. Donc je vais taper le rembourrage. Voyons voir comme si je ne sais pas, dix pixels. Et appliquons le code. On y va. Puis prête à peut-être comme une couleur de fond, la couleur de fond. Et je suppose que ce serait une bonne idée d'emprunter nos couleurs à nos couleurs mondiales. Faisons celui-là. Et je vais juste coller ça. Et on y va. Et je vais aussi définir la marge, la marge, non ? Peut-être, je ne sais pas, comme cinq pixels. Et puis je vais appliquer le code. Donc, nous pourrions aussi faire comme la transformation du texte et faire notre texte en majuscules. Et appliquons le code. Alors on y va. Et bien sûr, comme vous pouvez le voir, que le texte ici à l'intérieur de nos catégories, il ne semble pas trop bon. Je veux dire, la couleur n'est pas bonne. Et même si on tape un stylo comme Arnold couleur, blanc. Et puis en appliquant le code, vous pouvez voir que rien ne change. Et c'est parce que nous avons encore ça. Lorsque nous allons à notre mode Incognito, vous pouvez voir que nous avons également un lien ici. Nous avons donc un lien dans l'élément de liste dans une liste non ordonnée. Donc, je vais appeler p les catégories dispersées, bien post et un élément de liste. Et puis je vais juste ajouter un lien d'ancrage juste ici. Et puis je suppose qu'on peut copier ou coller ces gars. Laisse-moi fermer ce support. Et puis vous pouvez simplement ouvrir et fermer le crochet, coller cette valeur N, puis appliquer le code. Et comme vous pouvez le voir, notre, eh bien, ça change, nos, nos catégories changent. Mais je suppose qu'ils devraient être mis comme à côté de l'autre que le mois d'octobre, la date, et ensuite ces gars ici aussi. Donc pour ce faire, nous allons devoir aller à notre méta et règle oxy post. Parce que quand on y va, laisse-moi peut-être le sauver. Quand nous allons à notre modèle PHP, vous pouvez voir que nous avons cette classe div OK, censé mentor. Et à l'intérieur, nous avons cette date et notre catégorie. Donc c'est en fait une classe d'oxygène. Donc quand on va à notre bœuf supposé me faire, c'est ce gars juste là. Nous avons déjà ils ont déjà cette direction flex d'affichage et flex réglé sur une rangée. Mais nous allons simplement taper un centre d'éléments de ligne, puis appliquons le code. Comme vous pouvez le voir, maintenant, ils ont l'air beaucoup, beaucoup mieux. Je suppose que nous pourrions aussi être juste taper texte à transformation en majuscules parce que je pense que dans notre oui, ces gars, comme vous pouvez le voir, ils sont réglés à, eh bien, ils sont tous en majuscules. Donc c'est ce que je vais faire. Je suppose qu'on peut peut-être même emprunter cette valeur de transformation de texte à ce type. Donc, je vais juste coller cela dans et appliquer le code. Et fondamentalement, nos catégories sont créées et vont juste appliquer et sauver. Et puis je vais aller à ma page principale et je vais rafraîchir la page. Et comme vous pouvez le voir, nos catégories sont bien affichées ici. Peut-être qu'on va juste se débarrasser d'eux. Je suppose qu'il y a trop de Perrin ici. Pour nos catégories. Je suppose qu'on peut les rendre un peu plus petits. Si nous jetons un oeil à notre original, Vous pouvez voir qu'il est beaucoup, beaucoup plus petit. n'y a pas trop de rembourrage sur le dessus et beaucoup plus sur les côtés. Et la taille de la police est aussi plus petite. Alors peut-être que nous allons d'abord prendre cette taille de police ici. Et essayons. Essayons peut-être quelque chose comme, je ne sais pas, 12 pixels. Voyons ce que ça fait. Ça pourrait avoir l'air mieux. Donc on a corrigé la taille de la police, mais prenons peut-être soin de la purine. I. C'est trop, trop de Perrin ici. Donc, ce que nous pourrions faire est que nous pourrions peut-être ajouter plus de rembourrage sur les côtés et moins de paris sur le dessus. Donc, avec ces règles, vous pouvez, eh bien, nous règles CSS, vous pouvez suivre une règle, au moins en termes de rembourrage et de marge. Nous pouvons, dans une règle, une ligne de code, nous pouvons ajouter plusieurs valeurs. Donc, si nous l'avons maintenant comme dix et pixels, et si nous laissons dix pixels, cela signifie que nous avons 1010 pixels de rembourrage et tout autour. Mais si nous aimons, ajoutons, disons 20 pixels, puis appliquez simplement le code. Comme vous pouvez le voir, c'est d'abord l'ajout de rembourrage en haut et en bas, puis l'ajout de rembourrage à gauche et à droite. Et si nous allons comme cinq pixels et 50 pixels, maintenant, il va ajouter des valeurs différentes pour le haut, la droite, le bas et la gauche. Donc ça va dans le sens des aiguilles d'une montre, en haut, à droite, en bas, à gauche. Mais bien sûr, je ne veux pas faire ça. Je veux juste ajouter un haut et un bas. Laisse-moi bouger ça. Donc haut et bas va être comme cinq pixels et gauche et droite va être comme dix pixels. Alors voyons à quoi ça ressemble. Je suppose que ça a l'air bien mieux. Donc je suppose que la toute dernière chose à faire ici serait de juste se débarrasser de cet espace entre nos catégories et la date. Alors allons à notre, Allons à notre code. Et je vais juste trouver mes catégories de poste. C' est ce type ici, cette ligne. Et je vais juste taper le rembourrage, le rembourrage à gauche. Et voyons comme dix pixels. Et je vais appliquer le code. Je suppose que dix pixels vont bien. Voyons voir le, l'original. Je suppose que c'est quelque chose comme dix pixels. On a fait réparer les catégories, on les a, on a la date. Je ne pense pas qu'il va créer comme un seul port pour une seule page de publication. On l'a déjà fait avant. Donc, je ne veux pas vous ennuyer avec le criminel simplement ajouter des données dynamiques à votre modèle. Ce que nous allons faire, cependant, c'est que nous allons ajouter ce travail. Je pense que nous allons sauter cette section parce que nous avons déjà quelque chose comme ça. Donc, nous allons passer à cette, eh bien, cette section essentiellement formulaire de contact. Alors passons à ça maintenant. 110. 13.30Commencez à ajouter le pied de vue: Commençons donc à ajouter dans notre pied de page. Et comme d'habitude, je vais commencer par ajouter une section. Et il va avoir notre couleur de fond bleu foncé. Et dans cette section, je vais ajouter des colonnes. Et je vais ajouter la division 50-50 juste ici. Donc, sur la colonne de gauche, nous allons avoir notre texte et quelques informations de contact. Et sur la droite, nous allons construire comme un formulaire de contact factice. Donc, dans la première div, cette div à gauche, je vais commencer par ajouter seulement quelques éléments de texte. Et je suppose que nous pourrions ajouter seulement trois éléments de texte parce que nous allons avoir, laissez-moi juste passer à notre design. Nous allons avoir ce contact avec nous. Et puis nous allons avoir cette évaluation de cas gratuite. Et puis nous allons avoir ce texte juste ici. Et bien sûr, vous avez probablement remarqué que nous allons utiliser, nous allons faire quelque chose d'un peu différent. Je veux dire, on a décidé de sauter cette section parce qu'on a déjà fait quelque chose comme ça avant. Alors faisons comme un gros pied de page gras avec nos coordonnées et ces colonnes. Donc, juste ici, parce que nous voulons aimer séparer nos billets de blog et le de notre pied de page. Donc je vais retourner et à l'intérieur de l'oxygène, je vais taper le testament dans ce module de texte, je vais taper le contact et je vais le faire, allons-y jusqu'ici. Allons-y, faisons-le. Notre couleur blanche. Et peut-être que nous allons changer la taille de police à quelque chose comme dix. Sur. Alors passons à la typographie. Soulignons ça. Faisons peut-être une majuscule. J' aimerais maintenant, juste pour imiter ce design, la taille juste ici. Et voyons si on fait comme 600. Je suppose qu'on peut en faire un plus gros. Je suppose que 12 serait bien. Voyons peut-être comme sept cents, sept cents, ce sera mieux. Donc on a ce contact ici. Maintenant, je vais juste le dupliquer. Et je vais changer la famille de polices. Je vais aller avec notre texte cramoisi. Je vais augmenter la taille de la police à quelque chose comme 56. Bien sûr. Laisse-moi juste descendre ici. Et changeons. N' avons pas comme ce soulignement qui se passe ici. Et écoutons pour capitaliser. Et je suppose que ce poids de police est juste un peu trop gros. Allons-y avec 600. Et nous allons taper. Voyons voir, évaluation de cas gratuite. Donc, comme l'évaluation du cas gratuit E, nous y allons. Et bien sûr, la dernière partie ici serait d'ajouter ceci, ce morceau de texte juste ici. Encore une fois, je vais juste ajouter du texte. Ce type ici, et peut-être que je vais emprunter à Saddam du Lorem Ipsum. Je vais prendre du Lorem Ipsum. Alors laissez-moi juste regarder avec impatience un générateur Lorem Ipsum. Attendons peut-être cette partie. On y va. Et je vais coller ce m bien sûr qu'il doit avoir une bonne couleur. Et peut-être que nous allons changer la taille de la police à quelque chose comme 14, parce que cela devrait être correct. Donc, tout est joli, assez simple. la plus difficile, je suppose, partiela plus difficile, je suppose,serait d'ajouter ce peu ici. Mais je ne pense pas que ça va être vraiment difficile pour nous, non ? Tout ce que nous avons vraiment besoin de faire est d'ajouter un div à l'intérieur de ce div, cette colonne de gauche div. Donc, je vais juste taper div et ajouté ici. Et à l'intérieur, je vais avoir une icône. On y va. Et changeons les icônes colorées pour peut-être cette couleur rouge. Changeons l'icône elle-même. Tapons Maurer. Se produire. On y va. Et rendons le plus petit. Quelque chose comme 36 devrait l'être. D' accord. Et à l'intérieur, à l'intérieur de cette div avec cette icône, nous devons ajouter, ajoutons du texte. Et nous allons taper, je crois que c'était l'adresse. Maintenant, c'était le bureau. D' accord. Donc, bureau. On y va. Et changeons la couleur en couleur blanche. Et changeons la taille de la police pour 12 peut-être. Et allons voir Luke. Changeons le poids. 2s comme 600. Passons à la topographie avancée. Majuscules. Et est-il souligné ? Non, ce n'est pas souligné. Donc, évidemment, nous aimerions ça, mais peut-être ajoutons l'espacement des lettres. Ça devrait être sympa. Et nous allons aussi ajouter et tandis que l'adresse réelle. Encore une fois, je vais ajouter du texte. On y va. Encore une fois, changez la couleur, changez le poids de la police à quelque chose comme peut-être 700. Et je crois que c'était 40 Park Avenue. Allons à Brooklyn. Et pourquoi ? Et augmentons la taille de la police à quelque chose comme peut-être 32. Cela devrait être, ça devrait être bien. Donc, bien sûr, maintenant ce que nous devons faire, c'est que nous devons faire ces éléments pour être empilés comme l'un à côté de l'autre, pas comme ça. Donc, dans cette div I1, ces éléments doivent être disposés horizontalement sauf pour ces deux morceaux de texte. Donc, je vais envelopper ce gars avec un div et mettre ce texte dedans, donc def. Donc on a deux morceaux de texte. Et on y va. On a fait réparer ces types. Mais bien sûr, peut-être qu'on pourrait rendre ce gars plus petit, dit quelque chose comme 28 peut-être. Et je suppose que la dernière partie ici serait peut-être d'ajouter un peu d'espacement. Ainsi, vous pouvez saisir notre icône, aller à avancé, et peut être comme cinq pixels de marge. Et si vous voulez, vous pouvez accorder cette div englobant. Et vous pouvez dire que vous voulez aligner verticalement les éléments à la ligne médiane que. Et enfin, ajoutons peut-être juste une marge comme ça. Et on y va. En quelques étapes simples, nous avons ajouté. Maintenant, ce morceau juste ici, je vais juste cloner cette div. Et je vais juste cliquer sur ce composant en double une fois et deux fois. Et si nous regardons l'original, nous pouvons voir que nous avons eu ce téléphone et ensuite e-mail. Je vais changer cette icône. Je vais commencer à chercher le téléphone. Ce sera ce type ici. Et bien sûr, tout ce que nous avons à faire est de changer le texte et ajouter un numéro de téléphone aléatoire comme ça. Et la dernière icône serait notre icône e-mail. Voyons l'email. Non, voyons l'enveloppe. Il fonctionne avec une enveloppe. Donc, nous allons taper un e-mail et tapons l'adresse e-mail. Alors contactez et lawyers.com. On y va. Donc maintenant tout ce dont nous avons besoin est d'ajouter cette Google Google Map. Et essayons en fait ça. Cette adresse, 40 Park Avenue, Brooklyn. Voyons si c'est une vraie adresse. Et bien sûr, l'annonce que Google Map, nous avons besoin de trouver un module de carte juste ici. Nous avons donc ce module Google Maps. Alors nous allons taper 40 Park Avenue. C' était Brooklyn, je crois. Oh, ouais. Je suppose que c'est une vraie adresse. Alors on y va. Et bien sûr, nous pouvons encore épineter un peu les choses. Nous pouvons changer l'apparence de notre carte. Alors ajoutons une marge ici. Maintenant, nous allons nous assurer que nous le définissons à pleine largeur. On y va. Et nous allons changer la hauteur à quelque chose comme, je ne sais pas, pour un 150 pixels pourrait être ou peut-être 350 pixels. Je pense que ça devrait aller. Et dans notre, dans notre module, vous pouvez voir que nous avons obtenu ces options de zoom afin que vous puissiez zoomer. Nous pouvons zoomer juste pour changer l'apparence de notre, de notre carte. Je suppose que ça devrait être, ça devrait aller. Donc, la dernière chose à faire ici serait d'ajouter un formulaire de contact. Laisse-moi juste zoomer un peu. Donc ce formulaire de contact ici, mais je ne vais pas ajouter un vrai formulaire de contact ici. Je ne veux pas qu'un spam vienne de ce côté-ci. Je viens de voir que nous avons déjà ajouté un formulaire de contact avant que nous l'apprenions. Nous apprenons à utiliser un formulaire de contact ici à l'intérieur d'un oxygène. Alors laissez-moi juste ajouter rapidement quelques divs simples dans cette div. Donc je vais juste faire comme un div et je vais faire 100%. Je vais faire la couleur de fond et être rose tour. Et je vais aussi faire comme un 50 pixels de hauteur. Et je sais que vous pouvez voir beaucoup ici, beaucoup, beaucoup de changement en termes de hauteur. Mais crois-moi, ça arrive. C' est juste une supposition. C' est juste le rendu mince ici à l'intérieur de l'oxygène. Si nous actualisons cette page, vous pouvez voir que nous avons notre , eh bien, disons que c'est notre champ de nom. Peut-être que tu peux le rendre un peu plus grand. Donc je vais y aller comme 75. Et je vais aussi ajouter comme un morceau de texte. Et ça ne sera pas à l'intérieur de cette div. Ou on pourrait faire, peut-être le faire s'asseoir à l'intérieur de la div y rien. Laissez-nous simplement taper quelque chose comme votre nom. On y va. Et je vais faire cette div, alignement horizontal vers le centre. Ou peut-être allons-y avec la gauche, mais ajoutons en fait un peu d'espacement à l'intérieur. Je vais ajouter comme dix pixels de rembourrage tout autour. Et puis je vais juste laisser tomber cette hauteur à quelque chose comme 50. Je vais sauver ça. Et voyons à quoi ça ressemble à l'avant. Laisse-moi descendre. Donc ce sera notre champ de nom. Peut-être allons faire le haut. Faisons un peu plus grand, quelque chose comme 16. Et alors tout ce qu'on aurait vraiment à faire, c'est peut-être cloner ce type. Donc, disons que ce serait notre email. Faisons ton email. On y va. Et ajoutons peut-être un peu d'espacement. Et 25 puis prête dupliquer ce gars. Encore une fois. Faisons en sorte que ça soit sujet, je suppose. Et puis redoublons ce type. Et appelons ceci un message. Et bien sûr, ce type doit être beaucoup plus gros. Alors allons à Advanced. Je vais aller à la taille et à l'espacement. Et je vais peut-être faire comme pour cent. Et je vais y aller avec 50 % peut-être. Et quand nous allons à notre onglet primaire, je veux aligner ce guide sur le milieu. Je voulais le dire comme ça. Et la dernière chose à faire ici serait d'ajouter un simple bouton de soumission. Bouton. On y va. Ce serait notre bouton, et je l'appellerais soumettre. Ensuite, on y va, on va changer la couleur à notre rouge. On va peut-être changer la typographie. Donc je vais aller à la typographie. Je veux le mettre en majuscule. Je vais peut-être espacer un peu la lettre. Rendre la taille de la police juste une taille plus grande mais pas si grande. Allons-y avec 18. Et je vais aussi ajouter un peu d'espace de marge au sommet. Et je suppose que nous pourrions peut-être faire le bouton pour être étiré, s'étirant de gauche à droite. Avec ce bouton sélectionné, je vais aller à la taille et à l'espacement. Et voyons, à 100%. On y va. Je vais le sauver. Et peut-être que pour notre rembourrage je vais aller avec, comme, voyons comme 15 sur le dessus et 15 pixels sur le bas. Sauvons ce type. Quand tu iras à notre première page et que tu le rafraîchiras, tu iras jusqu'ici. Et nous et nous avons notre PAS un vrai je sais que ce n'est pas un vrai formulaire de contact, mais je ne veux vraiment pas avoir comme non, tout spam venant des côtés ne sera pas, vous savez, ajouter un vrai contact pour mon, je veulent juste garder ce côté à la vie pour vous afin que vous puissiez expérimenter. Donc vous pouvez le voir en fait. Et vous pouvez voir comment, comment c'était, comment il a été construit. Quand nous allons à notre original, nous pouvons voir que nous avons fondamentalement obtenu notre, eh bien, ce partenaire créé. Peut-être qu'on pourrait les faire aller à nos diffs. Et disons que ce type sera juste un peu plus grand. Alors faisons comme 60 ou 55. Mais bien sûr, il saura que ça nous fera faire plus de ménage ici. Donc je suppose que c'est peut-être une bonne chose qu'on puisse juste chier cette topographie. Et pour ça ne l'avait pas fait, et je vais juste faire comme 1.1. Et on y va. Et puis vérifions la réactivité. Voyons si on l'a écrit. Ça a l'air bien. Laissez en 1992, il semble toujours bien. 768. Ça a l'air bien. Et quatre AT qui a l'air bien aussi. Donc oui, on a notre contact. Disons que c'est un formulaire de contact factice créé. On a créé ces types ici aussi. Donc maintenant, tout ce qu'on a à faire, c'est qu'on doit ajouter ces trois colonnes, c'est ça ? Juste ici. Alors commençons à les faire ensuite. 111. 13.31, Ajoutez les éléments en pied de page: Donc je vais prendre une autre section. Je vais juste ajouter une section. Ce type ici. Et bien sûr, il doit avoir un, avoir une couleur de fond appropriée. Alors pourquoi ne pas jeter un oeil à l'original. Nous obtenons fondamentalement cette section est d'abord divisée en deux, bien en trois colonnes, mais aussi deux lignes. Donc je suppose que nous finirons peut-être, finalement dans une autre section. Mais pour l'instant, nous allons nous concentrer sur ces trois colonnes ici. Donc ce que je vais faire, c'est que je vais ajouter des colonnes. On y va. Et je vais y aller avec ce type. Et si nous jetons un coup d'oeil à l'original, nous avons ces titres About Us Contact et des liens rapides. Et puis on a eu quelques informations à l'intérieur. Alors commençons par nous. Donc, dans notre premier div, je vais juste ajouter un morceau de texte. Et je vais taper et lier. Comme nous y allons. On va changer la couleur du texte. Et je pense que je vais changer ça, eh bien, cette famille de polices en notre police d'affichage. Et je vais changer le poids de la police à quelque chose comme 600 et augmenter la taille de la police à, disons 22. Ça devrait être bien. Et je ne suis pas sûr que les textes aient été centrés ici. Oui, ce texte est centré. Donc je vais prendre ma div et je vais m' assurer que tout est bien aligné au centre. Et puis je vais juste ajouter un autre morceau de texte. Donc ce type ici, et je vais emprunter ce texte et le coller ici. Et bien sûr, quand on va à la typographie, on doit le faire, on a un alignement au centre et on change la couleur. On y va. Peut-être réduisons la taille de la police à quelque chose comme 12. Peut-être. C' est peut-être qu'on va le faire 13. Et on y va. Donc maintenant, je suppose qu'on pourrait juste reproduire ces éléments. Et si nous regardons l'original, nous sommes arrivés à ce contact et ces informations. Donc je vais prendre mon cap et je vais le dupliquer. Et je vais le déplacer dans cette div. Et je vais l'appeler, je pense que c'était un contact. Alors faisons le contact. Et on va s'assurer que tout est aligné sur le centre. Ensuite, je vais emprunter ce paragraphe et le déplacer ici. Et ça va être notre épaisse. Ça va être notre adresse. Ce type ici. Donc je vais laisser ça comme notre adresse comme ça. Ou peut-être bien, faisons une bonne adresse. Ça va être ce 4040 Park Avenue, Brooklyn, New York. On y va. Et puis je vais juste appuyer sur Entrée et je vais faire quelque chose comme le téléphone 180459845. Et je crois qu'on a deux lignes d'adresse. Oh, nous avons aussi un email juste ici. Alors faisons ça. Donc c'est et pourquoi je vais juste taper à New York un code postal chanceux, je suppose. Et puis faisons les USA. On y va. Et aussi ici, je vais ajouter un contact à lawyers.com. Et laissez-moi juste réparer les espaces juste ici. Et le dernier morceau ici serait juste de dupliquer mon texte, eh bien, cette rubrique et aller sur le côté. Et je crois que c'était, c'est des liens rapides. Ok, alors appelons-le comme ça. Alors faisons des liens rapides. Et puis prenons le centre div tout. Et pour les liens rapides, nous pourrions ajouter simplement des liens texte simples si vous le souhaitez, si vous voulez le faire pour 100 pour les rendre différents de notre menu. Donc je suppose qu'on pourrait faire ça. Mais je vais les envelopper avec un div. Donc d'abord, je vais créer un div. Et à l'intérieur de la div, je vais ajouter un lien texte. Ce type ici. Et changeons ça. Voyons ce que nous avons dans le, dans l'original rentrer à la maison à propos, Je suppose que c'est juste notre menu. Donc je vais aller avec la maison d'abord. Donc, avec mon premier lien sélectionné, Peut-être que je vais ajouter une classe. Je vais appeler ça les liens de pied de page TM. On y va. Et voyons ce qu'on peut changer à ce sujet. Peut-être qu'on peut changer la couleur du texte. Changeons ça. Changons la police, la taille de la police à quelque chose comme peut-être 13. Et passons à la typographie et lentilles font des majuscules. On y va. Et quand nous allons à notre onglet principal, vous pouvez également définir la couleur du vol stationnaire. Peut-être faisons notre couleur dressée. Pourquoi pas ? Donc, quand tu survoleras, nous allons avoir cet effet. Donc, une fois que ce gars est édité, peut-être allons-y avant, avant que je clone ça, je vais ajouter comme un peu d'espacement et comme cinq pixels. Et ensuite, on pourra faire une eau à ce type une fois, deux fois, peut-être trois fois. Et je vais changer le texte en zones de pratique. Donc les zones de pratique que nous avons Torr sympa régule le blog. Et puis faisons le contact, l'escroc, le tact. Et bien sûr dans ma div, je vais m'assurer que tout est aussi centré comme nous l'avons fait dans l'original. Mais ceux-ci, ces liens ne sont pas, eh bien, ils ne sont pas à bouleverser en majuscules. Alors peut-être que nous allons changer ça. Je vais aller à ma classe, topographie avancée et me débarrasser des majuscules. Mais peut-être allons les capitaliser. On y va. Et voilà, nous avons nos trois onglets juste ici. Donc, la dernière chose à faire serait d'ajouter nos icônes et certains normaux comme cette information de copyright ici. Mais puisque nous avons des colonnes créées ici, je ne veux pas utiliser ces colonnes pour ajouter ces éléments bas. Donc, dans cette section, je vais juste aller de l'avant et choisir des icônes sociales. Et je vais prendre cette section et je, bien sûr, je veux tout aligner au centre et à ces icônes. Donc, tout d'abord, ils doivent être plus petits, manquaient quelque chose comme 18. Changeons le style de l'icône. Voyons voir carré. Peut-être allons-y en blanc. Et je vais changer la couleur pour peut-être mon super léger, rose pâle. On y va. Et regardons l'original. On a, il y a un peu d'écart ici. Donc je vais amener ces gars vers le bas Si je peux juste les attraper, peut-être qu'il sera plus facile d'ajouter une certaine marge aux comprimés, comme 25%. Ça va être beaucoup trop. Donc dix ou 66 devrait suffire. Et peut-être pensons que ces lipides sont un peu plus gros, l'original. Donc, faisons en fait ces icônes un peu plus grandes. Alors sélectionnons 20 ou même 22. Et vous savez, je n'aime pas vraiment cette icône Facebook ici. Donc nous pourrions soit se débarrasser de l'icône Facebook, Eh bien, le lien Facebook d'ici et juste le remplacer par l'icône LinkedIn. On y va. Ça a l'air un peu mieux. On a donc les icônes sociales. Maintenant, ajoutons les informations protégées par le droit d'auteur en bas. Ce que je vais faire, c'est d'abord ajouter une icône. Et dans l'ensemble Font Awesome, nous avons un droit d'auteur propre, donc je vais juste commencer à taper une copie. Et c'est ce gars juste là. Et changeons la taille à quelque chose comme peut-être 12. Et bien sûr, changeons la couleur pour notre rose pâle. On y va. Maintenant, nous pouvons ajouter du texte et nous pourrions taper comme, je ne sais pas, 2018 à 2020 lawyers.com. Je ne vois pas vraiment ce que j'écris et j'ai vraiment besoin de changer la couleur du texte. On y va. Je crois que c'est je crois que ça a l'air bien. Et on va changer cette taille à 12 aussi. Donc, bien sûr, que l'icône de copie pour terminer les étapes doivent être, besoin d'aller côte à côte. Et c'est très facile. On doit envelopper ces gars avec la div. On y va. Et puis assurez-vous simplement que nos éléments enfants sont affichés horizontalement. Alignons-les au milieu. Et si vous le souhaitez, vous allez ajouter un espacement à droite de l'icône. Et on y va. Et peut-être que nous pourrions ajouter une marge ici pour nous puissions ajouter un peu d'espace juste ici pour que ça ressemble plus ou moins à ça. Et si tu sais, sauve-le. Et voyons à quoi ça ressemble. Ça a l'air plus joli, à mon goût. Mais je suppose que nous pourrions peut-être ajouter une touche de séparation entre les éléments d' information de contact et cette partie inférieure de notre pied de page. Donc je vais prendre ma section et on peut peut-être prendre notre couleur et le rendre plus sombre, juste comme ça. Et puis sauve ce gars. Alors allons sur notre site principal. Et nous y allons, vous pouvez voir que ça a l'air tout à fait, tout à fait bien. Alors on y va. Nous avons créé notre page. 112. 13.32Résumé: Ok, alors on y va. Nous avons créé notre page. Donc, nous avons d'abord ajouté l'en-tête avec notre en-tête moins collant superposé. Nous avons ajouté ce curseur d'arrière-plan. Ensuite, nous avons eu cette section avec le, quelques petits éléments de texte drôles. Ensuite, nous avons eu cette belle section avec un effet de sol de lit fixe parallaxe. Ensuite, nous avons créé ces icônes avec un bouton. On y va. Ensuite, nous avons ajouté ce texte dans les colonnes. Rappelez-vous comment nous avons ajouté le nombre de colonnes, une règle CSS. Ensuite, nous ajoutons nos avocats, qui, en fait, nous avons dit être un curseur. Et bien sûr, si vous voulez les regarder, si vous voulez les faire jouer automatiquement, vous avez juste besoin de définir le curseur sur la lecture automatique. Et bien sûr, nous avons eu le curseur avec nos témoignages. Nous avons créé le blog, puis nous avons ajouté notre pied de page avec quelques informations de contact, Google map et ces liens et ces colonnes juste ici. Donc, comme je l'ai déjà dit, ce design va être, vous savez, en direct. Vous pouvez le voir n'importe où et quand vous voulez. Alors on y va. J'espère que vous avez aimé et créer ce design. J' espère que vous l'avez créé avec moi. Et j'espère que vous comprendrez rapidement la liberté et le pouvoir que vous donne l'oxygène Builder. Et que vous développerez, élargissez votre portefeuille de compétences et que vous serez en mesure de créer vos propres sites Web et bien sûr des sites Web pour vos clients facilement. Donc, comme toujours, avoir un beau design.