Nouveau flux de travail basé sur des récipients d'Elementor (2023) : créer une page d'atterrissage de site Web de remise en forme à partir de zéro

1. Intro: Bienvenue dans une autre classe élémentaire géniale avec moi can better. C'est toujours un plaisir de vous avoir ici et je suis très heureuse de vous présenter un tout nouveau cours sur la façon de créer magnifiques pages de destination et sites Web avec Elementor. Comme d'habitude, que vous soyez propriétaire d' une entreprise, indépendant ou simplement quelqu'un qui cherche à améliorer vos compétences en matière de conception Web. Ce cours vous apprendra tout ce que vous devez savoir pour créer facilement de superbes sites Web. Elementor est un constructeur de pages WordPress qui a révolutionné la façon dont les sites Web sont construits. Désormais, grâce à leur nouveau flux de travail basé sur des conteneurs, il créer des sites Web de qualité professionnelle qui s'affichent parfaitement sur n'a jamais été aussi facile de créer des sites Web de qualité professionnelle qui s'affichent parfaitement sur tous les appareils. Dans ce cours. Je vais vous expliquer étape par étape le processus de création d' une page de destination pour un site Web de fitness. L'utilisation des dernières fonctionnalités et techniques d'Elementor. Et nous allons le faire à partir de zéro. Vous n'avez pas besoin d' expérience pour commencer. Tout au long du cours, vous apprendrez à concevoir et à personnaliser chaque aspect de votre page de destination à l'aide d' une interface glisser-déposer élémentaire et intuitive, en mettant l'accent sur l'utilisation du flux de travail des conteneurs. Nous examinerons les conteneurs en détail et à la fin du cours, vous aurez parfaitement compris comment travailler avec les conteneurs élémentaires pour créer une page de destination pleinement fonctionnelle. Le site Web fictif de fitness que je viens de mentionner, va de la sélection de la palette de couleurs parfaite à la personnalisation de la police et à la création de graphismes accrocheurs, à l'ajout et au redimensionnement d'images, à la création d'arrière-plans et d'effets de mouvement sympas. Je vous guiderai tout au long du processus afin que vous puissiez créer une page de destination qui non seulement soit belle, mais qui aide également votre entreprise à se démarquer en ligne. Et comme d'habitude, nous utiliserons la version gratuite d' Elementor et d'autres outils gratuits incroyables. Par conséquent, vous voulez que je dépense de l'argent en plugins premium pour créer ces magnifiques pages de destination. Tout ce dont j'ai besoin de ta part, c'est un profond désir d'apprendre Elementor. Si c'est la première fois que vous me voyez, m'appelle Ken et j' utilise elementary pour créer sites Web pour moi-même et pour mes clients depuis cinq ans. J'enseigne également au primaire à des milliers d'élèves, comme vous ici ou Skillshare sur YouTube et d'autres plateformes en ligne depuis deux ans et demi. Donc, si vous êtes prêt à faire passer vos compétences en conception Web au niveau supérieur et à apprendre à créer de magnifiques sites Web grâce une nouvelle fonctionnalité de conteneurs élémentaires. Rejoignez-moi dans ce nouveau cours passionnant et construisons ensemble une page de destination géniale. Alors allons-y. 2. Aperçu du projet: Désormais, le meilleur moyen d' appréhender un nouveau concept ou renforcer une compétence est de construire un projet. Ainsi, tout au long de ce cours, comme je l'ai mentionné, nous travaillerons sur une page d'accueil entièrement pour un site Web de fitness fictif. Faisons donc un bref aperçu de la page de destination. Nous y voilà donc. Il s' agit de la page de destination qui sera créée avec Elementor. Et avant d'y jeter un coup d'œil, je dois mentionner que j'ai créé cette page comme page d'accueil de référence lors de la préparation du cours. Et l'avantage d'avoir une page d'accueil ou site Web de référence, c'est que cela vous permet de voir ce que nous créons. Donc, quand viendra le temps de créer cette partie, je pourrai au moins vous montrer que nous sommes en train de créer quelque chose comme ça. Donc, ensemble, nous allons parcourir cette page et la reconstruire à partir de zéro. Faisons donc un rapide défilement du haut vers le bas. Comme vous pouvez le constater, permettez-moi tout d' abord de le rafraîchir. Alors laisse-moi recharger cette page. Maintenant, comme vous pouvez le voir, nous avons ces animations dans la section héros. Et les animations se trouvent sur toute la page d'accueil, pas seulement dans la section des héros. Comme vous pouvez le voir, nous avons ce lecteur vidéo ici. Et lorsque vous cliquez dessus, vous pouvez avoir une vidéo expliquant au visiteur quoi consiste cette page de destination ou en quoi consiste votre site Web. Et lorsqu'ils cliquent sur Play, pourront visionner une vidéo. Cliquez à l'extérieur. Au fur et à mesure que nous faisons défiler la page, nous avons différentes sections où vous pouvez répertorier vos services et où l'utilisateur peut cliquer sur le bouton En savoir plus pour être redirigé vers la page considérée comme obscène. Nous avons cette animation. Donc, en faisant défiler vers le bas. Et ceci et ces témoignages sont censés se trouver juste au milieu. J'ai dû oublier de l'aligner au centre ici même. Mais bien sûr, dans la dernière page que nous sommes en train de créer, elle sera bien alignée. En descendant au pied de page, c'est un dossier. Et si j'appuie sur Control Shift, je vais imiter différents appareils. Si je clique sur cette icône ici, comme vous pouvez le voir, la page de destination est également magnifique sur une tablette. Voici l'iPad Air. Permettez-moi de créer un iPhone 12s Pro. Voilà à quoi ressemblera la page de destination sur un iPhone 12s Pro. Et bien sûr, le menu ici est un menu de hamburgers. Et lorsque nous sommes en mode tablette, c'est toujours un menu de hamburgers. Faisons donc défiler la page jusqu'en bas. Et voici à quoi cela ressemble sur un smartphone. Donc, en gros, comme vous pouvez le constater, la page de destination est superbe sur tous les appareils. Il est réactif et nous verrons comment le rendre également réactif. Donc, en un mot, je l'ai créée comme page de destination de référence. L'avantage de la création la page d'accueil de référence est que lorsque vient le temps de créer cette section, je peux au moins vous montrer l'avance ce que nous allons créer, plutôt que de simplement la lancer et de vous demander de suivre sans que vous sachiez ce que nous sommes en train de créer. Il ne s'agit donc que d'un bref aperçu de ce sur quoi nous travaillerons . Lorsque nous aurons terminé, vous aurez cette page de destination entièrement fonctionnelle et prête à être utilisée sur un site Web. C'est donc ce que nous allons concevoir. Et pour réaliser cette page de destination, nous devrons utiliser plusieurs fonctionnalités élémentaires et modifier de nombreux paramètres qui vous permettront d' acquérir les compétences nécessaires pour créer en toute confiance vos propres pages Web avec Elementor à l'avenir. Et pour vous aider à suivre ce cours et à reproduire la même page de destination. J'ai préparé toutes les images pour vous et je les mettrai dans un dossier appelé assets. Téléchargez-le simplement depuis l'onglet Projets juste en dessous de ce lecteur vidéo. Maintenant que vous savez sur quoi nous allons travailler, j'ai l'impression que vous êtes très impatient de commencer. Alors, sans plus attendre, allons vous voir en classe. 3. Installez le thème Astra: Et nous y voilà. Comme vous pouvez le constater, il s'agit d'une toute nouvelle installation de WordPress. Il s'agit de la version 6.2 de WordPress. Et la première chose que je fais toujours lorsque je travaille sur projet WordPress est d' installer un thème WordPress. Alors, sans perdre de temps, passons aux thèmes d'apparence. Maintenant, bien sûr, comme nous sommes en 2023, le thème actif par défaut est 2023. L'année dernière, c'était 2022, et l'année précédente, c'était 2021. Mais nous n'allons pas utiliser ces thèmes WordPress par défaut. Nous allons dire Ajouter un nouveau. Et nous installerons l'un des meilleurs thèmes du marché, nommé Astra. Je vais donc cliquer sur Installer. Astra est l'un des meilleurs thèmes du marché WordPress. Très bien, je vais donc appuyer sur Activer. Et maintenant, Astra est le thème actif. Comme vous pouvez le constater, nous vous remercions d' avoir installé la notification Astra. Alors laisse-moi juste fermer ça. Et voici comment installer un thème WordPress. Dans la leçon suivante, installons Elementor. Je te verrai bientôt. 4. Installer Elementor: Nous sommes de retour. Maintenant que notre thème est installé, il est temps d'installer Elementor avant de commencer à créer notre page. Passons donc directement aux plugins. Nous pouvons cliquer sur Ajouter, mais tout d'abord, je veux juste cliquer sur les plugins pour pouvoir accéder à la liste des plugins d'installation. Et ce sont les plugins qui sont venus par défaut lorsque j'ai installé WordPress. Donc je veux juste m'en débarrasser tous. Avant de pouvoir le faire, je vais sélectionner ces deux options et les désactiver. Sélectionnez l'option Activer dans ce menu déroulant. Et puis disons Appliquer. Vous avez peut-être des plugins par défaut différents de moi. Je vous suggère de les supprimer tous. Maintenant qu'ils sont tous désactivés, je vais tous les sélectionner cochant cette case. Ensuite, ici, je vais passer à Supprimer, appliquer. D'accord ? Très bien, maintenant, si je rafraîchis la page, aucun plug-in n'est installé. Je vais donc continuer et dire Ajouter un nouveau et je serai redirigé vers le répertoire des plugins WordPress. Je vais donc partir à la recherche Elementor ici, Elementor. Et soyez parmi les premiers dans la liste des résultats d' elementary.com avec plus de 5 millions d'installations actives. Cliquez sur Installer. Maintenant, voici comment installer chaque plugin dans WordPress. Très bien, alors allons-y et appuyons sur Activer. Nous y voilà. Elementor est donc maintenant activé. Maintenant, avant de passer à autre chose , s'il s'agit de la toute première installation d'Elementor, vous pouvez être redirigé vers un assistant de configuration où vous devrez suivre plusieurs étapes pour configurer votre site Web. Parce que j'avais déjà installé Elementor sur ce domaine particulier. Je n'ai pas été redirigé vers cet assistant. Et juste au cas où vous auriez été redirigé vers cet assistant de configuration, où vous devrez suivre ces étapes. Les prochaines minutes seront un processus étape par étape. J'avais préenregistré pour un autre cours où je vous montre comment suivre toutes ces étapes. Alors on y va. Je vais donc l'installer, non ? Ainsi, lorsque je clique sur Activer, je suis redirigé vers l'assistant de configuration Elementor. Alors, appuyons sur Activer. Et voici le magicien. Alors laisse-moi faire un petit zoom arrière pour que tu puisses tout voir. Comme vous pouvez le voir maintenant, nous avons environ cinq étapes pour tout configurer avant de pouvoir commencer à utiliser Elementor. Et la première étape consiste à créer un compte elementor.com si vous souhaitez profiter de ces avantages, mais vous n'avez pas besoin d'un compte élémentaire pour utiliser Elementor. Je vais donc sauter cette partie. La deuxième étape consiste donc à décider si vous souhaitez utiliser le thème hello développé et maintenu par l'équipe élémentaire. Mais vous avez également la possibilité de sauter cette étape si vous souhaitez utiliser une autre équipe, j'aime utiliser Astra. Astra Theme est l'un des les plus légers, les plus rapides et les plus adaptés au référencement thèmes les plus légers, les plus rapides et les plus adaptés au référencement du marché. Je vais donc sauter cette partie. La troisième étape consiste à donner un nom à votre site Web. Et par défaut, le nom qui apparaît dans ce champ est le nom que vous avez donné à votre site Web lors de l'installation de WordPress. C'est donc le nom que j'ai donné à mon site Web. Je ne vais pas le changer. Donc je vais juste rester, je vais juste appuyer sur Escape. Ensuite, si vous avez un logo, vous avez la possibilité de le télécharger dès maintenant, mais vous pourrez toujours le faire plus tard, pendant la création de votre site Web, afin que nous puissions passer à autre chose . Enfin, nous pouvons directement modifier une toile vierge et commencer à une toile vierge et commencer créer une page Web à partir de zéro. Nous pouvons également parcourir des centaines de modèles créés par Elementor qui se trouvent dans l' espace de travail Elementor ou importer notre propre élément de modèles que nous aurions peut-être achetés ou créés nous-mêmes auparavant. Je vais y aller et oublier ça. Et par défaut, lorsque vous cliquez sur Ignorer, vous accédez directement à un canevas vierge où vous pouvez commencer à créer votre page Web. Donc, pour quitter cet endroit, cliquez sur ce menu hamburger, puis sur Sortir du tableau de bord. Nous sommes donc redirigés vers le backend de l'éditeur pour canevas vierge que nous venons de laisser. Mais ce que nous voulons faire, c'est cliquer dessus pour accéder au tableau de bord où se trouvent tous les paramètres de Wordpress. Et maintenant, si vous regardez dans le menu de gauche, vous remarquerez que nous avons Elementor et des modèles. Les deux apparaissent après l' installation d'Elementor. Et si nous cliquons sur Elementor, nous pouvons jouer avec tous les paramètres ici. Mais en général, vous n' aurez pas besoin de modifier les paramètres par défaut du plugin. Vous allez simplement commencer directement à créer vos pages Web. Mais bien sûr, n' hésitez pas à vérifier à quoi servent tous ces autres paramètres. Si vous ouvrez un modèle ici, vous y trouverez une liste de tous les modèles élémentaires que vous avez peut-être téléchargés ou créés. Si vous souhaitez créer un nouveau modèle que vous pouvez continuer à réutiliser dans votre projet. Vous pouvez en ajouter de nouveaux. Si vous souhaitez importer un modèle que vous avez téléchargé, vous pouvez l'importer à partir d'ici. Bien, maintenant que nous avons installé Astro, le thème et Elementor, nous sommes prêts à commencer à créer la page de destination. Et nous commençons par la section des héros. Il s'agit de la partie supérieure de toute page de destination que le client voit lorsqu'il accède à la page. Dans la leçon suivante, nous allons donc commencer à créer la section des héros. Je te verrai bientôt. 5. Aperçu de l'espace de travail Elementor: Bon retour. Il est donc temps de créer la section des héros. Et pour ce faire, examinons d'abord ce qu'est la section des héros. Passons donc à cette page d'accueil de référence que j'ai créée en préparation de ce cours. Voici la section des héros. Il contient le H1 principal ou le titre de la page de destination, qui est une brève description de l'objet de la page de destination. Certains boutons d'appel à l'action. Nous avons ce bouton vidéo ici. Ensuite, nous avons cette dame. Ce bouton vidéo fait apparaître un lecteur vidéo de YouTube. Vous pouvez présenter en quoi consiste votre site Web. Et les visiteurs peuvent jouer et voir quoi. Laisse-moi fermer ça. Voyons donc comment les créer. Revenez donc dans notre tableau de bord et accédez directement aux pages. Et comme il s'agit d'une toute nouvelle installation de WordPress, nous avons des pages par défaut qui accompagnent chaque nouvelle installation de WordPress. Je vais donc les sélectionner tous les deux en cochant cette case. Et dans ce menu déroulant, déplacez-les vers la corbeille et appliquez-les. Nous n'avons donc plus de pages. Je vais dire Ajouter un nouveau. Et comme il s'agit de notre page d'accueil, je suppose que c'est la page d'accueil. Je vais donc dire maison, c'est le nom de la page. Et maintenant, nous avons quelques réglages. Ce sont les paramètres Wordpress, et voici les paramètres Astro. Si vous n'avez pas installé Astra, vous n'aurez pas ces paramètres ici, car ils sont fournis avec un thème et nous en avons besoin. Alors tout d'abord, allons-y et changeons le modèle ici en Elementor sur toute la largeur. Juste comme ça, parce que nous voulons qu'il se déroule de la gauche vers la droite ou de la droite vers la gauche. Donc Elementor sur toute la largeur. Et c'est tout ce dont nous avons besoin dans les paramètres de WordPress. Maintenant, changeons les paramètres Astro. Et ici, nous avons plusieurs menus déroulants que nous devons ouvrir. Tout d'abord, nous voulons dire étiré sur toute la largeur. C'est à cela que devrait ressembler la mise en page du contenu. Bien sûr, ces options sont également utilisables, mais j'aime les utiliser étirées sur toute la largeur. Passons à la barre latérale. Nous ne voulons pas qu'un site Web ou page de destination ait une barre latérale. Je vais donc y aller sans barre latérale. Nous pouvons toujours modifier ces paramètres sur la page elle-même lors de sa création à l'aide d'Elementor. Et je vais vous montrer où nous pouvons changer cela. Et enfin, passons à la désactivation des éléments. Nous ne voulons pas l'en-tête ou le pied de page Astra par défaut , car nous allons créer nôtre avec Elementor. ces paramètres définis, je dirais Publier, cliquez à nouveau sur Publier. Et maintenant, notre page est publiée. Cliquez maintenant sur Modifier avec Elementor et nous serons redirigés vers le générateur frontal où nous pourrons commencer à créer notre page. Maintenant, si c'est la toute première fois que vous utilisez Elementor, la dernière version d'Elementor introduit ce que nous appelons des conteneurs. Avant l'introduction des conteneurs, nous utilisions des sections et des colonnes. Et c'est le flux de travail que vous trouverez dans toutes mes classes élémentaires précédentes. Et ce flux de travail est toujours très pertinent. Vous pouvez choisir de travailler avec des sections et des colonnes si cela vous convient. Mais Elementor nous donne maintenant la possibilité d'utiliser des conteneurs, et c'est ce que nous allons apprendre aujourd'hui. Je souhaite donc activer la fonctionnalité du conteneur. Je vais donc cliquer dessus. Cela ouvrira un nouvel onglet qui nous mènera aux paramètres où nous pouvons activer le conteneur Flexbox. Il suffit donc d'aller dans le conteneur Flexbox. Il s'agit des fonctionnalités et des paramètres d'Elementor. Le menu déroulant est activé. Ensuite, faisons défiler la page vers le bas et enregistrons les modifications. Bien, avec ces modifications, revenons à la page. Nous y sommes. Et bien sûr, avant d' actualiser la page, l'interface utilisateur de l'éditeur ressemble à l' ancienne interface utilisateur qui comportait le flux de travail des sections et des colonnes. Mais maintenant, lorsque nous actualiserons cette page pour refléter l'activation du conteneur flexbox, cela changera légèrement. Remarquez que nous avons maintenant un conteneur et que les colonnes ont disparu. La première chose à faire est donc d'avoir un aperçu rapide du fonctionnement des conteneurs. Je vais donc simplement y glisser un conteneur. Et maintenant, nous avons ce conteneur qui va de la gauche vers la droite. Et c'est ce que nous allons organiser dans notre section consacrée aux héros. Et à l'intérieur de ce conteneur, nous pouvons déposer plus de conteneurs contenant différents types de contenu. Donc, pour révéler les éléments déplaçables, encore une fois, nous pouvons cliquer sur cette icône ici. Et cela révélera les éléments. Encore une fois, si je peux réduire tous ces panneaux ici. Il s'agit de différents éléments que nous pouvons faire glisser sur notre page pour créer du contenu. Donc, par exemple, nous avons la zone pro. Ce sont les éléments qui ne sont disponibles qu' avec Elementor Pro. Vous devez payer pour utiliser Elementor Pro. Mais maintenant, nous avons les éléments de base tels que le titre, l'éditeur de texte d'image et tout le reste. Ensuite, nous avons également des éléments généraux. Ils sont toujours gratuits. Les éléments Pro ont une petite icône de verrouillage en haut à droite. Comme ici. On peut le faire glisser et le mettre là-haut. On peut le faire glisser et le déposer dedans. Permettez-moi d'annuler ce contrôle Z. Donc, en gros, c'est là que nous allons récupérer nos éléments les déposer ici , puis y apporter des modifications. Pour en revenir à notre panneau de base et à la mise en page étendue, le panneau de disposition contient l'élément conteneur. Et au fur et à mesure que nous commençons, il y a un paramètre très important que nous devons modifier. Et je vais te montrer ce que c'est. Chaque fois que vous survolez un conteneur, vous pouvez le sélectionner en accédant à l'un de ces coins. Donc, si, par exemple, je vais ici et que je fais glisser un titre là-dedans, je peux le sélectionner en allant dans ce coin juste ici. Et maintenant, ces changements de titre. Si je souhaite sélectionner le conteneur lui-même qui contient ce contenu, je peux le sélectionner en cliquant dessus. Et maintenant, ce conteneur est élu. Et si je voulais sélectionner ce conteneur extérieur, je peux cliquer dessus. Et ces modifications pour contenir un acier. Maintenant, lorsque nous survolons ces sélecteurs, nous pouvons révéler quelques raccourcis rapides qui nous permettront d'économiser quelques étapes dans notre flux de travail. Donc, si je vais dans ce menu de hamburgers, les préférences utilisateur, que je les modifie et que j' active les poignées d'édition. Maintenant, si je passe la souris sur l' un de ces coins, nous avons ce raccourci dupliqué et ce raccourci de suppression. Plutôt que d'y aller. Si je le désactive, plutôt que d'aller ici, cliquez avec le bouton droit de la souris, puis dupliquez. Quand c'est allumé. Tout ce que j'ai à faire est de les survoler, puis les dupliquer sur Supprimer. Maintenant, pour en revenir à ce menu de hamburgers, nous avons également plus de réglages. Donc, si je clique sur les paramètres de ce site, nous avons des couleurs globales et nous verrons comment travailler avec des couleurs globales, des polices globales. Nous pouvons modifier le comportement de tous les téléphones du site Web ici, ainsi que tous ces autres paramètres. Mais nous n'aurons pas besoin de les toucher pour le moment. Vous devez généralement les toucher lorsque vous travaillez sur l'ensemble du site Web. Mais pour l'instant, nous nous concentrons sur la page de destination. Permettez-moi donc de fermer ces paramètres. Voici maintenant un bref aperçu de l'espace de travail élémentaire. Dans la leçon suivante, nous allons maintenant commencer à travailler avec des conteneurs pour créer la section des héros. Je te verrai donc bientôt. 6. Comprendre les conteneurs: Salut, bon retour. Maintenant que nous avons eu un aperçu rapide de l'espace de travail élémentaire, il est temps de commencer à comprendre le fonctionnement des conteneurs. Permettez-moi donc de supprimer cela. Et puis, au lieu de faire glisser ce conteneur ici, permettez-moi de cliquer sur cette icône plus ici. Maintenant, voici de jolies structures d'un conteneur. glisser-déposer ici revient à ajouter l' un de ces conteneurs. Mais maintenant, ces conteneurs qui comportent des divisions sont des conteneurs contenant d'autres conteneurs en tant que modèles. Ces deux-là ne contiennent aucun contenant. Et cela revient à le faire glisser et déposer dedans parce qu' il n'y a pas de contenant. Si nous l'ajoutons ici, comme vous pouvez le voir, c'est un conteneur. Vous pouvez le voir à la frontière. Et il y a ce contenant. Et ce contenant. Si nous ajoutons peut-être celui-ci ici. Comme vous pouvez le voir, c'est le conteneur, et il y a six autres conteneurs à l'intérieur. Et maintenant, si je supprime ceci, jetons-y un coup d'œil. Maintenant, parce que ce conteneur extérieur contient deux conteneurs à l'intérieur. Si nous le sélectionnons et que nous en affichons les paramètres, vous remarquerez que nous avons une section contenant ces éléments , sous les éléments de mise en page, et que nous avons le paramètre de direction. Et ce réglage des directions signifie simplement la façon dont les conteneurs à l'intérieur d'un autre conteneur sont disposés. Donc, rangée, horizontale signifie qu'ils sont disposés de gauche à droite. Parce que maintenant, c'est ce que nous avons de gauche à droite. Si nous voulons que ces conteneurs soient empilés les uns sur les autres, c' est-à-dire de haut en bas. Nous pouvons choisir ce réglage vertical comme ça. Et maintenant, c'est au top de la base. Juste pour nous aider à comprendre visuellement ce que nous faisons. Permettez-moi d' y mettre un titre, de revenir ici et peut-être d'y déposer un bouton. Alors maintenant, souvenez-vous que ce sont toujours des conteneurs. Et chaque conteneur contient désormais un élément. Cela contient donc un élément de bouton et un élément de texte. Maintenant, en revenant en arrière et en sélectionnant ce contenant extérieur, nous revenons aux réglages de consommation. N'oubliez pas que nous sommes allés de gauche à droite. Permettez-moi de sélectionner de gauche à droite, de gauche à droite, puis de haut en bas. Mais avant de cliquer dessus de haut en bas, nous pouvons l'inverser. Cela signifie que le conteneur de gauche doit maintenant être placé sur la droite et celui de droite sera placé sur la gauche. Voyons donc l'inverse et maintenant ils sont inversés. Et maintenant, empilons-les du haut vers le bas. Cela signifie que le premier conteneur sera désormais en haut et le second en bas. Et l'inverse se produit du bas vers le haut. Et maintenant, ce sera inversé. C'est ainsi que fonctionne un conteneur. Et bien sûr, peu importe le nombre de conteneurs que nous avons. Ce qui compte vraiment, c'est la direction que vous avez sélectionnée pour le contenant extérieur qui contient les autres récipients. Donc, si on y retourne et qu'on y ajoute un contenant, on va le déposer là-dedans. Et maintenant, nous avons trois conteneurs. Et si nous les organisons de gauche à droite, sélectionnez ceci. Si nous les organisons de gauche à droite. Nous avons maintenant trois conteneurs. Et si nous en ajoutons, ajoutons-y peut-être une, ajoutons-y une icône. Maintenant, en sélectionnant le conteneur extérieur, nous pouvons les inverser. Et celui du milieu ne change pas car lorsque nous les inverserons, il restera toujours au milieu. Alors maintenant, au fur et à mesure que nous construisons les différentes parties de la page de destination, vous pourrez voir ces conteneurs en action. Et ils nous offrent une grande flexibilité dans la manière dont les différents éléments circulent sur notre site Web. Et ce n'est qu'un bref aperçu des conteneurs. Dans la leçon suivante, nous allons passer à des choses plus pratiques et voir comment les mettre en œuvre pour créer une magnifique section consacrée aux héros. C'est la seule façon de comprendre comment les utiliser réellement. Je te verrai donc bientôt. Pièce. 7. La section du héros - ajouter les éléments de héros: Bon retour. Mettons maintenant pratique les connaissances théoriques que nous avons apprises sur les conteneurs. Allons-y et supprimons tout à partir d'ici. Et maintenant, observons ces sections pendant une seconde. Nous avons ici ce conteneur qui contient le texte et les boutons. Et nous avons un autre contenant l'image du héros. Ajoutons donc un double récipient. Conteneur En d'autres termes, un conteneur qui possède déjà deux conteneurs. Nous y voilà. Alors maintenant, dans ce conteneur, allons-y et ajoutons un élément d'image. Dans ce contenant. Ajoutons un titre. Retournons ici. Un éditeur de texte, en d'autres termes, un paragraphe. Déposez-le dès que cet indicateur apparaît. Ensuite, déposons un élément de bouton. Très bien, alors laissez-moi d'abord cliquer sur Mettre à jour. Et prévisualisons les modifications. C'est donc ce que nous avons. Très basique. Alors maintenant, ajoutons d'abord une image ici, une image réelle de cette dame. Rappelez-vous que je l'ai mentionné, toutes ces images sont fournies dans un dossier appelé assets. Juste en dessous de cette image, il suffit de regarder l' onglet Projets en dessous de cette image. Donc, en revenant ici, je vais sélectionner l'élément image et cela changera pour modifier l'image. Ce sont donc les paramètres de cet élément. Je vais sélectionner cette case là-dedans. Pour l'instant. Je n'ai pas encore d'images dans la médiathèque, je vais donc télécharger des fichiers, sélectionner. Et maintenant, ce dossier est sur mon bureau. Je vais juste cliquer dessus. C'est ce qu'on appelle des actifs. Vous pouvez le télécharger dans l'onglet Projets. Alors laisse-moi l'ouvrir. Voici la dame ouverte. Et il est maintenant téléchargé. Alors laissez-moi dire sélectionner. Nous y voilà. Voilà donc la dame. La deuxième chose à faire est de changer la police et la couleur de la police. Donc, pour y revenir, si nous changeons la police en blanc, vous ne serez pas visible. Ce qui nous amène à l'étape suivante, qui consiste à modifier l' arrière-plan de notre site Web. Alors, dans ce menu de hamburgers, allons dans les paramètres du site. Cela révélera tous ces paramètres ici. Et nous voulons accéder à Contexte, type d'arrière-plan. Et sélectionnons cette couleur et changeons-la en noir. Je le mets à jour dans l'éditeur. Nous pouvons maintenant modifier cette police ici. Nous voulons utiliser une police appelée Montserrat. Donc, pour modifier ces textes, nous sélectionnons l'élément de titre, et cela changera pour modifier le titre. Et on peut y aller avec style. Changez-le en blanc. Tout d'abord, cliquez n'importe où dans l'éditeur pour supprimer cette boîte. Passons ensuite à la topographie. Et dans ce menu déroulant, tapez Montserrat, sélectionnez les mois, Irak, et comme vous pouvez le voir, il est remplacé par moniteur. La prochaine chose que nous voulons faire est de modifier le poids de la police. J'aime utiliser le noir. Cela signifie un texte très gras, car il s'agit de notre titre principal sur cette page de destination. Je vais juste m'y prendre et copier ceci. Vous devrez le saisir. Allez-y, copiez-le. Et tant que cela est toujours sélectionné, allez dans le contenu, dans le titre, collez-le dedans. Un corps, un esprit et une âme forts. Je vais sélectionner ces textes. Going Insights, texte en mosaïque, couleur, remplacez-le en blanc. Cliquez n'importe où ici pour vous en débarrasser. Et puis, bien sûr, vous remarquerez qu'il s'agit de Roboto. Elemental est livré avec des polices par défaut, et principalement pour les paragraphes, c'est Roboto. Cela signifie que chaque fois que nous ajouterons un tout nouvel élément d'éditeur de texte, ce sera toujours Roboto, sauf si nous le modifions manuellement. Maintenant, pour éviter d'avoir à le modifier manuellement à chaque fois, nous pouvons entrer dans le menu des hamburgers, encore une fois, dans les paramètres du site. Et c'est là que nous modifions maintenant les polices globales. Primaire, c'est-à-dire les titres. Nous les avons déjà remplacés par Montserrat. Mais remarquez que c'est Roboto. Cela signifie que chaque fois que nous ajouterons un titre, ce seront toujours des robots. Donc, à moins que nous ne disions spécifiquement que nous voulons que ce soit Montserrat et que nous voulons que ce soit noir. Passons au secondaire. Changeons cela pour Montserrat. Passons aux textes. Maintenant. Ce sont les textes des paragraphes. Remplacez cela par Montserrat. Passons à l'accent. Remplacez cela par Montero. Mettez-le à jour dans l'éditeur. Maintenant, pour une raison quelconque, cela n'a pas changé, mais nous pouvons toujours le modifier manuellement. Je vais découvrir pourquoi. Alors allons-y. À l'intérieur, lorsque cette option est sélectionnée, topographie de l'éditeur de texte, Montserrat. Mettez-le à jour. Passons en revue les modifications. Nous y voilà. 8. La Section du héros - Styler les éléments du héros: Alors maintenant, nous voulons changer le bouton pour avoir ces coins arrondis. Et en même temps, nous devons lui donner ce vert. Et j'ai ce code couleur vert ici. Permettez-moi de le sélectionner sur mon autre écran. Je vais à l'intérieur. Sélectionnez cela. Je fournirai également ce code couleur vert spécifique , juste au cas où vous voudriez l'utiliser avec le code couleur vert sélectionné, je vais sélectionner ce bouton, avec un style qui coïncide. Le bouton. Nous avons la topographie. Nous sommes déjà passés à Montserrat, mais nous avons aussi de la couleur. Sélectionnez-le, collez-le dedans. Et vous remarquerez que la couleur du bouton a changé. maintenant à la couleur du texte, changeons-la en noir, et maintenant c'est noir. En survol. Nous voulons qu'il soit de couleur blanche. Maintenant, lorsque nous survolons, il est de couleur blanche. Nous voulons que le texte reste noir. Passons également au rembourrage. Nous voulons ajouter l' espacement entre le bord du bouton et le contenu, le texte. L'espacement, juste ici. Comme vous pouvez le voir, elle est légèrement plus grande ici. Alors passez au rembourrage, brisez ce lien. Pour modifier les différentes faces. Sans rompre le lien. Cela signifie que chaque fois que vous modifiez l'une des cellules ici, cela affecte tous les côtés. Vous souhaitez modifier des côtés individuels. Alors décochez cette case. Sélectionnez la gauche, donnez-lui 50, n'est-ce pas ? 50. Le haut et le bas peuvent être 20. Et maintenant, pour le rayon de bordure, donnons-lui 50. Pour lui donner ce coin arrondi plus petit que le nombre ici, moins il est arrondi. Donc, si nous lui donnons peut-être 20, vous verrez qu'il devient moins arrondi. Si on lui donne dix, c'est beaucoup moins arrondi. Si on lui donne zéro, il n'est pas arrondi. Donnons-lui donc 15. Si vous cassez ce lien comme ça, vous pouvez avoir un côté sans le coin arrondi. Mettez-le à jour. Prévisualisons les modifications comme ça. En fait, je vais le laisser comme ça. Maintenant, vous remarquerez que nous avons deux boutons. Alors, comment ajouter le deuxième bouton ici ? Si nous faisons glisser un nouveau bouton ici, il se trouvera juste en dessous de ce bouton. Et c'est parce que les boutons, l'éditeur de texte et le titre se trouvent tous dans un seul conteneur. Donc, si je sélectionne le contenant, si on regarde dans la direction, ils sont tous disposés du haut vers le bas. Tous les éléments vont donc du haut vers le bas. Si vous voulez qu'ils aillent de la gauche vers la droite et sélectionnent la ligne horizontale. Tout, y compris la taxe, sera réorganisé de gauche à droite. Mais ce n'est pas ce que nous voulons. Nous voulons uniquement que les boutons soient disposés de gauche à droite, pas le texte. Donc, pour en revenir à ce paramètre, de haut en bas, que faisons-nous ? Nous pouvons utiliser un conteneur ici, faire glisser un conteneur et le déposer dedans. Ensuite, faisons glisser ce bouton là-dedans. Et faisons également glisser ces autres boutons à l'intérieur de ce conteneur lorsque cet indicateur apparaît. Et maintenant, ils sont tous les deux à l'intérieur du conteneur. Et maintenant, lorsque nous sélectionnons ce conteneur spécifique ici, nous pouvons changer la direction de gauche à droite. C'est le pouvoir des conteneurs. Alors maintenant, sélectionnez ce bouton, cliquez avec le bouton droit de la souris, Copier. Sélectionnez ce bouton, collez le style. Et maintenant, il a hérité tous les styles de ces autres boutons. Mais maintenant, nous voulons qu'il soit de couleur blanche. Donc, tant que c'est encore sélectionné, je vais entrer dans le style. Couleur. Change ça en blanc. Et en survol. passez le pointeur de la souris, ou passe-t-il vous passez le pointeur de la souris, ou passe-t-il au gris clair ? Sur Hobo, nous le voulons aussi à Bob. Donc, pendant qu'il est toujours sélectionné en survol , je veux être aussi vert clair comme ça. Et lorsque le survol est sélectionné, vous verrez une animation de survol. Dans ce menu déroulant. Vous pouvez sélectionner l' animation de votre choix. J'aime bien Bob et Bob, juste comme ça. Sélectionnons ceci. Sous le pointeur, survolez l'animation. Bob. Très bien, alors allons-y, mettons-le à jour et prévisualisons les modifications. Très bien, maintenant, revenons ici, permettez-moi de sélectionner cette rubrique. Accédez à la page Typographie stylistique. Et changeons la taille pour qu'elle soit peut-être quelque part. Mettez-le à jour. Et prévisualisons les modifications. Très bien, vous remarquerez maintenant qu' ils ne sont pas bien alignés verticalement. Le texte et le bouton semblent légèrement plus élevés que la fille. Parce que si nous traçons une ligne imaginaire ici, celles-ci devraient être légèrement plus basses. Maintenant, la meilleure façon de le faire est d'utiliser la justification. Donc, si nous sélectionnons ce conteneur principal et que nous alignons les éléments, c'est là que ces paramètres entrent en jeu. Si on dit centre. Maintenant, tout ce qui fait référence au contenant extérieur sera placé verticalement au centre. C'est l'espacement à partir d'ici. Et l'espacement ici sera égal. Juste comme ça. Mettez-le à jour. Et prévisualisons les modifications. Nous y voilà. Mais remarquez maintenant que ce contenu est poussé jusqu'au bout, presque jusqu'à la périphérie et que le nôtre est poussé vers l'intérieur. Revenez donc ici, sélectionnez le conteneur principal et largeur du contenu dans ce menu déroulant, puis sélectionnez Semaine complète. Et maintenant, nous avons une mise à jour complète du conteneur. Passons en revue les modifications. Nous y voilà. Mais maintenant, nous ne voulons pas qu'il touche complètement les bords. Donc, en y repensant, tant que cela est encore sélectionné, nous pouvons dire peut-être 80 %. Donc 80 %. Et aujourd'hui, il occupe 80  % des écrans. Pleurez. Mettons-le à jour et prévisualisons les modifications. Nous y voilà. Maintenant, la prochaine chose que nous voulons faire est d'ajouter cet arrière-plan, ces vagues qui leur ajoutent une certaine valeur esthétique. Page de destination. Donc, pour en revenir ici, alors que cela est toujours sélectionné, je veux entrer dans le style, l' arrière-plan, le type d'arrière-plan. Je vais sélectionner Classic. Et maintenant, nous avons cet espace d'images ici. Cliquez sur cette image car nous voulons ajouter ces vagues comme arrière-plan de l' image. Je vais donc procéder au téléchargement et vous trouverez toujours cette vague ici. Il s'agit de la section des héros en arrière-plan néon. Je l'ai déjà créé pour vous dans Adobe Illustrator. Et maintenant, nous l'avons téléchargé. Sélectionnez donc. Et voilà, nous l'avons. Mais maintenant, vous remarquerez que c'est coupé ici. Donc, une chose à faire est de rentrer en position centrale, non ? Comme ça. Et nous voulons également dire «  ne pas répéter », « ne pas répéter ». Mettez-le à jour. Et prévisualisons les modifications. Nous y voilà. Cela soulève donc maintenant un petit défi. Comme vous pouvez le constater, elle est coupée car le bord de cette section représente 80 % de la largeur de la page. Et ce que nous voulons, c' est que ça aille jusqu'au bout comme ça. Nous devons donc faire preuve de créativité à cet égard. N'oubliez pas que ce conteneur contient deux conteneurs principaux. Il contient le conteneur du bloc de texte et le conteneur de la section héros. Et les réglages s'exécutent de gauche à droite. Donc, si nous voulons ajouter un conteneur ici, nous devons l'ajouter ici. Nous avons donc maintenant trois conteneurs, mais nous voulons placer ce conteneur, ces deux conteneurs à l'intérieur du nouveau conteneur. Je vais donc y mettre ça. Et puis ça là-dedans. Et maintenant, nous avons ce conteneur qui contient ces deux conteneurs. Mais par défaut, tout se déroule de haut en bas. Nous devons donc lui dire de courir de gauche à droite. Et maintenant, ces deux conteneurs sont à l'intérieur de ce conteneur, c' est-à-dire à l'intérieur de ce conteneur extérieur. Et si nous créons ce conteneur extérieur sur toute la largeur, l'arrière-plan s'étend maintenant de gauche à droite, d'un bord à l'autre. Permettez-moi de le mettre à jour. Et prévisualisons les modifications. Très bien, maintenant, le contenant intérieur qui contient ces deux récipients est toujours en boîte. Nous voulons qu'il soit sur toute la largeur, mais maintenant nous voulons qu'il soit de 80 %. Et nous voulons sélectionner le contenant extérieur pour pousser ce contenant intérieur vers le centre. Nous voulons donc qu'il soit au centre. Mettez-le à jour. Et prévisualisons les modifications. Nous y voilà. Et maintenant, au moins, nous commençons à avancer quelque part. Ce texte est légèrement plus grand, alors sélectionnons le titre, topographie du site, agrandissez-le comme ça. Mettez à jour, prévisualisez les modifications comme ça. Et maintenant, alignons le tout verticalement au centre. Dans ce conteneur. Juste comme ça, mettez à jour. Prévisualisez les modifications. Maintenant, tout est correctement aligné. Voilà comment créer la section des héros. Mais maintenant, vous vous demandez peut-être si c'est une belle section Heber, mais nous n'avons pas de barre de navigation. Où se trouve la barre de menu ? Où se trouve le logo ? Ne vous inquiétez pas, c'est ce que nous allons faire. Dans la leçon suivante. Voyons comment ajouter la barre de navigation, qui contient le menu et le logo. Juste comme ça. Le logo et bien d'autres. Je te verrai donc bientôt. 9. La barre de navigation - Installer ElementsKit: Bon retour. Nous avons donc déjà travaillé sur la section des héros. Bien sûr, je sais que nous n'avons pas ajouté ce bouton vidéo ici, mais nous allons le faire, ne vous inquiétez pas. Mais ce que nous voulons faire, c'est créer le napa. Pour en revenir à notre éditeur, voici la page d'accueil, mais ce n'est pas là que nous allons créer la napa. Donc je veux juste sortir d'ici. Nous reviendrons ici pour créer le reste de la page, toutes ces autres parties. Mais pour l'instant, quittons cette page. Je vais donc cliquer sur ce menu de hamburgers. Et en bas , il y a une sortie. Lorsque vous le lancez pour la première fois, un menu déroulant vous permet de sélectionner l'endroit où vous souhaitez toujours être redirigé chaque fois que vous cliquez sur Quitter. Je vais donc choisir le tableau de bord WP. Cela signifie que chaque fois que vous cliquez sur Quitter ici, vous serez toujours redirigé vers le tableau de bord. Cela n'arrive qu'une seule fois, je vais donc sélectionner WP Dashboard, puis appliquer. Tout d'abord, permettez-moi d' annuler et de mettre à jour si les modifications sont correctes. Comme j'ai déjà sélectionné endroit où je veux être redirigé, si je clique sur Quitter, vous n'afficherez pas cette fenêtre contextuelle. Cela m'amènera juste au tableau de bord. Maintenant que nous savons déjà qu'il s'agit de la version 6.2, permettez-moi de l'ignorer. Et maintenant, pour créer ces barres de navigation, nous allons devoir installer un autre plugin, qui est une extension d'Elementor du nom de plugin elements keep light. Revenons donc à notre tableau de bord. Plugins, ajoutez-en de nouveaux. Et ici, je veux rechercher Elementor. Elementor. Et maintenant, vous remarquerez, bien sûr, en plus d'Elementor, il existe de nombreux autres plug-ins basés sur Elementor. Il s'agit de plugins créés par des développeurs tiers pour étendre la puissance et les fonctionnalités d'Elementor. Elementor est développé par Elementor Outcome, mais les extensions essentielles pour Elementor sont développées par le développeur WP, les extensions premium par Leap 13. Et ce dont nous avons besoin, c'est d'Elements Keep Elemental Add-ons de WP Met. Je vais donc cliquer sur Installer maintenant. Nous aurons également besoin des effets d'en-tête rémanents pour Elementor, et je vais vous montrer où ils seront utilisés. Pour. Maintenant, notons l'installer. Nous l'installerons quand nous en aurons besoin. Maintenant que le kit Elements est installé, cliquez sur Activer. Nous y voilà. Nous avons maintenant installé la lampe Elements Key, et la voici dans notre barre latérale. kit d'éléments sélectionnés sera donc redirigé vers l'assistant étape par étape où nous pourrons configurer le plugin ou le module complémentaire. La première étape consiste à sélectionner l'une de ces trois options. En gros, la signification de ces options dépend de l' option que vous sélectionnez ici. Certains widgets et fonctionnalités présentés ici ne seront pas actifs et ne seront pas disponibles dans le front-end lorsque vous utiliserez Elementor. Donc, par exemple, si je sélectionne Avancé ici, regardez ce qui arrive à certains de ces widgets. Par exemple, le générateur de widgets est désormais activé par défaut. Cela signifie que lorsque j' utilise Elementor dans le front-end pour créer une page que nous avons créée, elle sera disponible pour moi dans le frontend. Il en sera de même pour d'autres fonctionnalités ici. J'aime donc utiliser Advanced. Nous allons donc cliquer sur l'étape suivante. Prochaine étape. L'étape suivante consiste à partager certaines données de diagnostic non sensibles. Ensuite, max., enregistrez les modifications. Le kit d'éléments est maintenant prêt à être utilisé. Laisse-moi m'en débarrasser. 10. La barre de Nav - Ajoutez les éléments de la barre de Navbar: Et maintenant, vous remarquerez que sous le kit Elements, nous avons ce que nous appelons en-tête et pied de page. C'est ici que nous voulons aller, cliquez sur En-tête et pied de page. Et c'est ici que nous pouvons créer différents en-têtes et pieds de page qui apparaîtront sur différentes pages en fonction de nos paramètres. Je vais donc continuer et en ajouter de nouveaux. Appelons cela un en-tête. Le type est en-tête. Nous ne pouvons avoir qu'un en-tête ou un pied de page. Les conditions sont que je souhaite qu'il soit visible sur l'ensemble du site Web. Maintenant, si vous achetez la version Pro de ce plugin, vous pouvez décider que vous souhaitez que cet en-tête particulier soit disponible ou visible uniquement sur des pages spécifiques. Je veux donc qu'elle soit visible sur la face antérieure et je veux qu'elle soit activée lorsque vous effectuez une maintenance et que vous ne voulez pas que cette barre de navigation soit visible pendant que vous effectuez cette maintenance. Vous pouvez le désactiver. Enregistrez donc les modifications car je veux qu'elles soient visibles. Je vais le laisser tel qu'il est activé et enregistrer les modifications. Et nous y voilà. Alors maintenant c'est actif. Disons modifier. Le contenu modifié sera redirigé vers le front-end où nous pouvons désormais le créer visuellement. Nous y sommes. Vous remarquerez maintenant que nous n' avons pas la section des héros que nous avons déjà créée. Et c'est parce que nous avons laissé partie où nous étions en train de modifier la section des héros. C'est maintenant la partie où nous éditons la barre de navigation. Allons-y et ajoutons un double récipient, un conteneur. La structure, qui contiendra le logo. Cliquez donc sur cette image Plus car notre logo est essentiellement une image. Et tant que cela est sélectionné, cela changera pour modifier l'image. En vous rendant ici, téléchargez des fichiers, sélectionnez des fichiers. Forme physique. C'est le logo que j'ai créé pour ce projet. Nous y voilà. Sélectionnez cela. La prochaine chose que nous voulons faire est d'ajouter notre menu. Alors allons-y et disons plus. Et ici, tapons nav. Maintenant, vous remarquerez que nous devons naviguer dans les éléments. Nous avons la navigation par Elements Kid, puis maintenant par Elementor Pro. Et nous ne pouvons pas utiliser élément de navigation Elementor Pro car il y a cette icône de verrouillage ici. C'est un élément pro. Alors laisse-moi le glisser et le déposer ici. Et maintenant, lorsque vous le déposez là, alors qu'il est encore actif, c'est bien sûr que les éléments d'édition apparaissent dans le menu de navigation. Voici ses paramètres. Et vous remarquerez que la première chose à faire ici est le menu de sélection, un menu comme celui-ci. Et ce menu est composé d'éléments de menu. Et ces éléments de menu sont en fait des pages, pages Web, la page à propos, page Vidéos, la page Sharp et la page Contact. Cela signifie que nous avons besoin de créer un tas de pages Web pour être nos éléments de menu. Donc, pour y revenir, je vais juste appuyer sur Mettre à jour. Ensuite, prévisualisons les modifications. Et bien sûr, nous n' avons pas de menu ici. Donc, pour y retourner, je veux revenir au tableau de bord, donc je vais sortir. Et passons à l'intérieur des pages pour créer quelques pages. Nous avons déjà la page d'accueil. Je vais donc cliquer dessus avec le bouton droit et ouvrir le lien dans un nouvel onglet. Je vais le faire encore et encore. Maintenant, en passant à ces onglets, changeons cela. Disons que c'est à peu près. Nous ne sommes pas vraiment préoccupés par ces modifications publiées pour l'instant. Nous voulons simplement que certains éléments du menu soient publiés. Passons aux prochaines vidéos publiées. Passons à la boutique. Publier. Le contact est également publié sur de nombreux lots. Donc, pour y revenir, si je rafraîchis le tableau de bord, nous avons maintenant toutes ces pages. Maintenant, la prochaine chose à faire est entrer dans les menus d'apparence. Et c'est ici que nous créons le menu qui contient toutes ces pages en tant qu'éléments de menu. Et vous remarquerez ici, sur la gauche, que cette partie est effacée car nous n'avons pas encore créé de menu. Créez votre premier menu ci-dessous. Je vais donc appeler ça un menu de remise en forme. Et j'en ferai le menu principal. Ensuite, créez un menu. Maintenant qu'il est créé, nous pouvons ajouter des éléments de menu à partir de la colonne de gauche, juste ici. Et si je réduis cela, les éléments du menu peuvent être des pages , et c'est ce que nous allons utiliser. Mais il peut également s'agir de publications telles que des articles de blog. Il peut s'agir de liens personnalisés. Nous pouvons développer cela et avoir un lien spécifique ici. Et puis les textes des liens peuvent en savoir plus. Et nous pouvons dire Ajouter un menu, ou nous devons fournir un lien, je vais juste mettre un hachage. Nous l'avons donc ajouté ici. Ou ils peuvent également être des catégories. Mais pour le moment, nous voulons que les éléments du menu soient des pages. Et si nous élargissons cela, voici toutes nos pages. Permettez-moi donc de tout sélectionner et d'ajouter au menu. Supprimons-les. En savoir plus Lien personnalisé car nous n'en avons pas besoin. Et faisons glisser réorganisons ces éléments de menu. Domicile. Contact parce que c'est du côté le plus à droite. Accueil à propos de Videos Sharp. Accueil à propos de Videos Sharp. Et maintenant nous y sommes, c'est terminé. Enregistrer le menu. Notre menu de remise en forme est donc enregistré. Il a été mis à jour avec ces éléments de menu. Revenons maintenant au dossier d'en-tête du kit Elements, à en-tête, à l'édition avec Elementor car nous avons déjà commencé à travailler dessus. Si nous sélectionnons l'élément de navigation que nous avons ajouté à cette moitié et que nous accédons au menu Sélectionner. Nous avons maintenant le menu de remise en forme à notre disposition. Si nous sélectionnons cela. Notre menu a été ajouté. 11. La barre de la Nav - Styler les éléments: Mais par défaut, tout est noir, nous devons donc, tant que cela est encore sélectionné, accéder au style. Permettez-moi d'abord de réduire le panneau d'emballage du menu. Rentre à l'intérieur. Menu, style d'élément, élément, couleur du texte. Faisons en sorte qu'il soit blanc. Nous y voilà. Revenons au contenu et disons position horizontale du menu, n'est-ce pas ? Cela le poussera vers la droite. Revenons à la mode. Cependant, nous voulons qu'il soit aussi vert. Alors laisse-moi juste choisir cette couleur verte. Copiez ça. Bien que cette option soit toujours sélectionnée, je souhaite réduire l'emballage du menu, le style des éléments de menu, la couleur des ensembles d'éléments, mais nous voulons que ce soit ce vert. Et lorsqu'il est actif, nous voulons qu'il soit toujours aussi vert. Je dirais Mise à jour. Et prévisualisons les modifications. Nous y voilà. Mais maintenant, bien sûr, ce logo est trop grand. Permettez-moi de fermer ces onglets. Revenons donc ici, sélectionnez le contenant extérieur et ajoutons-le sur toute sa largeur. Mettez-le à jour. Prévisualisons les modifications. Et maintenant, il semble que c'est éteint. Alors, quelle est la solution ? La même solution que nous avons utilisée pour la section héros lorsque nous avons placé ces deux conteneurs dans un conteneur qui se trouvait à l'intérieur du conteneur extérieur. Voyons comment procéder. Donc, en entrant ici, faisons glisser un conteneur ici. Parce que n'oubliez pas que tout est empilé de gauche à droite dans le conteneur extérieur . Et maintenant, faisons glisser le logo à l'intérieur de ce nouveau conteneur. Et faisons également glisser ces conteneurs à l'intérieur de ces autres conteneurs. Cela signifie qu'il doit se trouver en dessous du logo. Juste comme ça. Très bien, alors sélectionnons-le maintenant. Tant qu'il est encore sélectionné. Nous allons sélectionner des arrangements de gauche à droite comme celui-ci. Tant qu'il est encore sélectionné, ajoutons-le sur toute sa largeur. Et sélectionnons le contenant du logo et faisons en sorte qu'il ait une largeur de 20  %. Comme ça. En fait, faisons en sorte qu'il ait une largeur de 1010 %. Vous remarquerez maintenant que nous avons cet espace ici parce que nous n'y avons pas donné de pourcentage précis. Et ça devrait être 90 parce que c'est dix pour cent. Le contenant du logo représente dix pour cent, ils devraient donc occuper les 90 % restants, 90 % comme ça. Mise à jour. Et prévisualisons les modifications. Alors on y va. Mais maintenant, sur notre site Web de référence, ils n'étaient pas très proches des limites. Donc, en revenant ici, nous pouvons fabriquer ce récipient intérieur qui contient ces deux récipients. Sur toute la largeur, mais à 90 %. Maintenant, bien sûr, cela commence de la gauche vers la droite. Ainsi, en sélectionnant le contenant extérieur, nous pouvons placer tout ce qu'il contient au centre. Juste comme ça. Maintenant, c'est juste au milieu. Mise à jour. Et prévisualisons les modifications. Juste comme ça. Maintenant, voici comment créer le menu de navigation. Revenons ici, car nous en avons fini avec la barre de navigation. Passons au tableau de bord. Accédez à l'intérieur des pages. Page d'accueil parce que nous avions commencé à la modifier avec Elementor. Il dispose de cette option. Si vous n'avez jamais modifié de page avec Elementor auparavant, vous n'aurez pas cette option. Modifiez donc avec Elementor. Et nous y voilà. Alors remarquez maintenant que cette partie est modifiable, la section des héros. Et le Napa est visible dans notre section consacrée aux héros ou sur notre page d'accueil sur toute la page. Mais il n'est pas modifiable. Et c'est parce que ce n'est pas là que nous étions en train de modifier ou que nous n'avons pas créé le menu de navigation. Permettez-moi donc de prévisualiser les modifications. Nous y voilà. Bien entendu, nous pouvons les pousser vers l'extérieur. Alors laissez-moi d'abord fermer ça. Pendant que nous sommes ici, nous pouvons simplement sélectionner ce contenant intérieur et le porter à 90 %. Tout comme la barre de navigation. Mettez-le à jour. Et prévisualisons les modifications. Et nous y voilà. Maintenant, en les regardant et en les comparant à notre page de destination de référence, cela ressemble presque à ça. Identique. Maintenant, ajoutons ce lecteur vidéo avant de l'appeler un wrap. Donc, en revenant ici, je vais ouvrir les éléments, puis rechercher une vidéo. Vidéo. Et celui que nous voulons, c'est celui-ci de Elements Kit. Alors glissez-le et déposez-le dedans. Nous voulons le déposer là. Et puis faites-le glisser jusqu'à n. Mettez-le à jour. Prévisualisez les modifications. Et nous y voilà. Ainsi de suite, celui-ci devient vert. Mais par défaut, celui que nous avons ajouté ne changera même pas de couleur. Réglons donc cela pendant que cela est sélectionné. Passons au style. C'est où ? Style de bouton, couleur brillante. Donnons-lui d'abord cette couleur verte. Type d'arrière-plan. En survol. Faisons en sorte que ce soit vert. Juste comme ça. Mise à jour. Prévisualisez les modifications. Nous voulons que cette icône devienne noire lorsque vous passez le pointeur. C'est la couleur du texte en survol. Faisons en sorte qu'il soit noir, même dans son état normal. Faisons en sorte qu'il soit noir. Mettez à jour, prévisualisez les modifications. Maintenant, c'est noir en vol stationnaire. En fait, ils n'aiment pas ça. Vert et rose Je ne pense pas qu'ils riment. Alors laissez-moi simplement changer la couleur de la lueur en rose Update. Et si j'ai choisi la couleur par défaut du mauvais rose, c'est parce que cela la fait ressortir. Presque tout le reste est blanc et vert, mais celui-ci est rose, donc ça sort vraiment du lot. Et cette onde luminescente attire également l'attention du spectateur et lui donne simplement envie de cliquer dessus. Et si vous cliquez dessus, bien sûr, il y a maintenant cette vidéo. Tant que cette option est toujours sélectionnée, vous pouvez ajouter une URL à votre vidéo ici. Donc, si vous avez une vidéo YouTube, c'est ici que vous pouvez l'ajouter. Et lorsque les gens cliquent dessus, la vidéo est diffusée. Et voici comment ajouter le menu de navigation. Dans la vidéo suivante, nous allons voir comment commencer à créer le reste de ces sections. Je te verrai donc bientôt. 12. Section 1 de l'organisme - Partie 1: Nous sommes de retour. Maintenant que nous en avons terminé avec la section héros et la barre de navigation, il est temps de commencer à créer ces différentes sections qui constituent le corps de la page d'accueil. Commençons donc par cette rue ici. Revenons donc dans notre éditeur de page de destination, juste en dessous de notre section consacrée aux héros, ajoutons un conteneur. Juste comme ça. Et à l'intérieur de ce conteneur, bien sûr, ajoutons un texte. Je veux ajouter un éditeur de texte, pas un titre, juste comme ça. Maintenant, laissez-moi saisir ces textes ici, bien sûr, vous allez maintenant taper le texte que vous voulez. Alors recopiez ce vert ici. Je vais le coller dedans. Mais je ne veux pas le coller avec sa mise en forme, je vais donc l'annuler. Et puis Control Shift V qui colle le texte dans ces éditeurs sans aucune équipe précédente. Très bien, alors maintenant que c'est toujours sélectionné, je vais entrer dans le style, le changer en noir. Et je vais changer cet arrière-plan du contenant extérieur en vert. Alors laisse-moi sélectionner ce bouton, dont le style coïncide. Sélectionnez ce vert. Copiez-le et revenez à ce conteneur ici. Style, type de fond, couleur classique. Je vais le coller ici. Alors maintenant, c'est si vert. La prochaine chose que je veux faire est, bien sûr, tout d'abord de sélectionner ces textes. Comme vous pouvez le constater, il comporte un rembourrage ou une marge par défaut. Ainsi, pendant que le texte est sélectionné, accédez à Avancé. Supprimez, brisez ce lien. Et ce lien aussi. Je veux d'abord entrer dans le style et le centraliser comme ça. Et puis la typographie. Augmentons la taille jusqu'à ce point. Vous pouvez accéder à l'intérieur de manière avancée alors que c'est encore sélectionné pour le rembourrage inférieur, pour la marge inférieure. Réduisons-le comme ça. Et je vais m'assurer que c'est espacé. Alors qu'il s'agit encore de sites sélectionnés en cours, topographie, espacement des lettres, espacons-le comme ça. Et ne vous inquiétez pas, c'est de l'emballage. Tout ce que nous avons à faire est de sélectionner l'extérieur, sélectionner le contenant extérieur. Sous Mise en page, ajoutons-la sur toute la largeur. Juste comme ça. Augmentons la marge supérieure. Réduisons maintenant la marge inférieure encore plus haut jusqu'à quelque part. Mettez-le à jour. Bien entendu, nous devrons ajouter une marge entre la section des héros de ce strip. Donc, en sélectionnant le conteneur extérieur, marge avancée, supprimez ce lien afin que nous puissions modifier une seule cellule, la cellule supérieure. Disons que 15 150, c'est peut-être trop. Cent. Mettez à jour cette prévisualisation des modifications. Nous y voilà. Nous avons donc ce strip. Et bien sûr, nous pouvons l' augmenter autant, nous pouvons lui donner autant de rembourrage que nous souhaitons sur le contenant extérieur lui-même. Donc, le rembourrage extérieur du contenant, cassons ça. Et donnons-lui un rembourrage en haut et en bas, peut-être 20, en bas, 20 en haut comme ça. Mise à jour. Très bien, alors voilà. Permettez-moi de prévisualiser les modifications. Ça y est. Mais maintenant, vous remarquerez que cet arrière-plan est un peu coupé par le bord du contenant contenant tout ce qui s'y trouve. Comme vous pouvez le voir, celui-ci en coupe une partie. Comme vous pouvez le voir, celui-ci en coupe une partie. Nous allons donc sélectionner ces conteneurs. Et sous la hauteur, hauteur minimale, choisissons la hauteur de la fenêtre d'affichage. Mettez-le à jour. Et prévisualisons les modifications. Très bien, ça ne change rien. Nous pouvons donc simplement dire 100 %. Essayons ça. C'est essayer de le faire apparaître à 100 % sur l'écran. Donc, avec cela, réduisons simplement la marge en haut. Mais au fond, en fait, nous nous sommes débarrassés de ce chariot. Essayons peut-être 80 % de la hauteur de la fenêtre d'affichage. Prévisualisez les modifications. Je pense que c'est bien mieux, mais nous pouvons faire beaucoup mieux. Essayons 70  %. Mettez-le à jour. Prévisualisons les modifications. Prévisualisez les modifications. Nous y voilà. Maintenant, en sélectionnant cette option, nous pourrions en fait réduire la marge supérieure à peut-être 50. Mettez-le à jour. Il s'agit de jouer avec ces chiffres jusqu'à ce qu'ils soient beaux à votre avis ? Oui. Donc parce que nous le voulons parce que je voulais qu'il soit visible lorsque vous êtes sur la page de destination. Alors c'est ça. Donc, en gros, c'est comme ça que l'on crée cette bande. Dans la leçon suivante, allons-y et créons cette section ici même. Et si je rafraîchis cette page, laissez-moi simplement l'actualiser. Vous verrez ces animations. Ce gars entre en ligne de compte avec les textes, il va voir comment faire tout ça. Je vous verrai donc dans la prochaine leçon. 13. Section 1 de l'organisme - Partie 2: Nous sommes de retour. Maintenant, il est temps de voir comment créer ce type ici avec ce bloc de texte. Une chose que vous remarquerez, c'est que l'arrière-plan ne bouge pas. Au fur et à mesure que nous défilons, ces ondes restent fixes au même endroit. Alors, comment parvenir à ce résultat ? Faisons-le d'abord avant de commencer à créer ce type. Donc, en revenant ici, lorsque nous faisons défiler la page, vous remarquerez que nos vagues se déplacent avec le conteneur. Sélectionnez donc le conteneur qui a ces vagues comme arrière-plan. Et pour ce qui est du style, nous avons l'attachement, qui est réglé par défaut. Nous pouvons le réparer en un seul endroit. Et maintenant, quand on fait défiler la page, c'est corrigé à cet endroit. Mettez-le à jour. Prévisualisons les modifications. Maintenant, si nous faisons défiler la page vers le haut, nous n'avons pas assez de contenu en dessous pour faire défiler l'écran. C'est le dernier contenu que nous avons ici. Ajoutons donc une section. Je vais donc descendre ici et cliquer sur le signe plus. Et ajoutons, encore une fois, je veux juste ajouter un contenant sans contenant. Donc, juste comme ça. Et maintenant, ajoutons le premier conteneur qui doit contenir l'image. Permettez-moi d'y ajouter un texte factice. Et maintenant, ajoutons un autre contenant. Je vais donc le glisser-déposer à l'extérieur du conteneur que nous venons de créer. Nous avons donc maintenant deux conteneurs, mais je veux que ce conteneur contenant le texte soit après le conteneur d'image. Permettez-moi donc de faire glisser ce conteneur d'images avant le conteneur de textes, juste comme ça. Maintenant que nous avons ces piles comme ça, passons au contenant qui les contient. Ce contenant extérieur. Et changeons la direction de gauche à droite, comme ça. Donc, ici, ajoutons un élément d'image. Eh bien, c'est actif. J'avais téléchargé cette image avec ce gars, donc je vais simplement la sélectionner. Nous y voilà. Et ici, nous voulons dire devenez plus fort, plus vite. Je vais donc simplement le récupérer, le sélectionner sous le titre du contenu. Collez-le dedans. Et remarquez que lorsque nous ajoutons des titres, ils sont en noir de Montserrat, c'est très fort, en gras, et c'est ce que nous avons défini comme police globale pour les titres. Donc, tant qu'il est encore sélectionné, disons style, couleur du texte, blanc, légèrement plus grand. Il s'agit d'un éditeur de texte, d'un texte factice, donc je dirais simplement d' ajouter un éditeur de texte, Lorem Ipsum par défaut. Tant qu'il est encore actif, passons au style de la couleur du texte. Changez-le en blanc. Juste comme ça. Et nous avons ces listes ici. Revenez donc ici, sélectionnez la liste des éléments et c'est une liste d'icônes. Je vais donc faire glisser la liste des icônes en dessous. Et si je clique sur le premier élément, je peux le modifier comme je veux. Qu'est-ce que c'est ? Soulever des objets lourds. Donc, techniques de levage de charges lourdes , d'entraînement d'endurance , de musculation, , d'entraînement d'endurance, de musculation, de musculation. Et vous pouvez également apporter les modifications ici plutôt qu'ici. Ainsi, l'article loué numéro trois répertorié deux numéro trois peut simplement sélectionner ce texte. Entraînement d'endurance. Et bien sûr, vous remarquerez maintenant que nous pouvons modifier les icônes ici. Donc, si je sélectionne ceci, tapons check. Parce que je voulais cocher la case, c'est bon. Insérez, cochez la case, réduisez-la, développez-la, entrez dans l'icône. Chèque. Insérer. Et enfin, soulever des objets lourds. Chèque. Tu peux commencer. Et nous y voilà. Maintenant allons-y et allons-y. Et vous pouvez ajouter, comme vous le pouvez, d'autres éléments ici si vous le souhaitez. Donc, ci-dessous, nous avons ajouté un élément, peut-être des séances de yoga. C'est aussi dire chèque. Insérez et maintenant nous avons des séances de yoga. Maintenant, pour changer les couleurs, il faudrait entrer dans l'icône de style. Mettons-le en vert. Je pense qu'ils sont blancs ou verts. Donc, en les sélectionnant, en sélectionnant ces conteneurs en entrant dans le style, sélectionnez la couleur, copiez. Sélectionnez le style de liste. Icône Couleur. En survol. La couleur doit être blanche. Juste comme ça. Maintenant, faisons également quelque chose à propos des textes. À l'état normal. Nous voulons qu'il soit blanc. Et en survol, nous voulons qu'il soit vert. Juste comme ça. Mise à jour. Et maintenant, bien sûr, comme dans la section des héros, nous voulons que tout soit équilibré verticalement afin avoir le même espacement en bas qu'en haut. Ces textes semblent être placés en haut de la liste et nous voulons les placer quelque part au milieu. Nous sélectionnons donc le conteneur qui contient ces deux conteneurs. Accédez aux éléments, alignez-les et alignez-les verticalement au centre comme ça. Et maintenant, bien sûr, vous remarquerez que cette image est plus grande et qu'elle est presque à la périphérie. Et cela signifie que le conteneur lui-même est sur toute la largeur. Faisons donc en sorte que ce conteneur soit sélectionné sur toute la largeur comme ça. Et maintenant, ajoutons son arrière-plan. Donc, pour ce qui est du style, du classique, je crois que j'avais déjà téléchargé ces arrière-plans. C'est ce contexte ici. Fond néon à gauche. Je l'avais déjà téléchargé. Apportez donc une médiathèque Insight. C'est ici. Sélectionnez. Et maintenant, on y va. Mettez à jour, prévisualisez les modifications. Défiler vers le bas. Nous y voilà. Et remarquez que le schéma se répète et ce n'est pas ce que nous voulons. C'est ce qui se passe par défaut. Donc, répétez les valeurs par défaut, non. Pas de répétition. Mettez-le à jour. Prévisualisez les modifications. Faites défiler l'écran vers le bas. Et maintenant, ça ne se répète plus. Nous y voilà. Attendez, et je viens de remarquer que nous avons perdu l'éditeur vidéo d'une manière ou d'une autre. Je ne sais pas ce qui lui est arrivé. Il est donc bien sûr très facile de l'ajouter à nouveau. Alors, donne-moi juste un moment. Vidéo. Il a des enfants. Juste là. Je n'y travaillerai même pas parce que tu sais déjà quoi faire. Permettez-moi donc de le mettre à jour. Ensuite, prévisualisons les modifications. Nous y voilà. Donc, en faisant défiler vers le bas. Maintenant, ce conteneur est trop proche du flux. Nous voulons qu'ils soient séparés. Nous allons donc sélectionner le conteneur lui-même. Avancé. Brisez ce lien. Donnons-lui 150. Marge supérieure. Cela l' espace donc complètement. Et j'ai l'impression qu'il y a trop de place ici. Je pense que nous devons pousser ces éléments un peu plus haut. Donc, en sélectionnant ce conteneur qui contient tout ce qui est avancé, marge, haut, réduisons cet espacement comme ça, peut-être moins 85, selon vos préférences. Et prévisualisons les modifications. Nous y voilà. Je pense que c'est maintenant très bien positionné. Donc, en faisant défiler vers le bas. Maintenant, corrigeons cet arrière-plan avant de l'appeler un wrap. La sélection de cette pièce jointe de style conteneur a donc été corrigée. Juste comme ça, mettez à jour. Prévisualisez les modifications. Défiler vers le bas. Nous y voilà. Alors maintenant, bien sûr, c'est très facile à ajouter. Nous avons oublié d'ajouter le bouton. Et le bouton a une icône, nous avons donc oublié de l'ajouter. Donc, en sélectionnant ce bouton sous l'icône Contenu, nous pouvons sélectionner dans la bibliothèque d'icônes. Je veux cet insert en forme de flèche. Et on peut le mettre après. Je peux donc me positionner après, juste comme ça. Et ils disent : rejoignez-nous aujourd'hui, regardez les cours. Alors, pendant que cette option est sélectionnée et que le texte du contenu du texte est en cours, rejoignez-nous aujourd'hui. Et cela devrait dire des cours ou des cours. Allons-y. Maintenant. Dupliquons cela. Je vais donc simplement dupliquer ce bouton en le faisant glisser. Maintenant, je vais le déposer là. Et bien sûr, vous remarquerez que nous avons trop d'espace ici. Je vais donc sélectionner ce texte (marge avancée en bas). Réduisons-le à cela, jusqu'à ce point, puis sélectionnons liste, liste, avancée, divisons cette marge en bas. Augmentons cela pour séparer le bouton. Mettez-le à jour. Et prévisualisons les modifications. Défiler vers le bas. Nous y voilà. Cette section est donc maintenant complète. Comme vous pouvez le constater, les principes restent les mêmes. Les mêmes choses que nous avons faites dans la section des héros, ou les mêmes trucs et astuces que nous utilisons pour créer ces autres sections. Maintenant, bien sûr, passons à la section suivante, nous allons utiliser les mêmes principes, mais l'image se trouvera de l'autre côté. C'est ce que nous allons faire dans la prochaine leçon. À bientôt. 14. Section 2 et 3 du corps: Très bien, alors revenons aux affaires. Nous venons donc de terminer la création de cette pièce. Passons à la création de cette section ici. Revenons donc à notre éditeur. Allons-y et ajoutons un double contenant comme celui-ci. Et ici, en fait, nous pouvons simplement le faire glisser, nous pouvons simplement dupliquer ce conteneur ici comme ça. Ensuite, faites-le glisser ici sur le côté de cet autre conteneur. Débarrassons-nous de ça. Et nous pouvons également le dupliquer. Et faites glisser un sac mixte comme ça. Alors débarrassons-nous de cela. C'est ainsi qu'Elemental vous facilite les choses. Vous pouvez simplement dupliquer et réutiliser des éléments. Bien sûr, la sélection du conteneur extérieur est maintenant avancée. Ajoutons une marge supérieure de 150 pour plus d'uniformité. Et tant que cette option est toujours sélectionnée, passons à l'intérieur de la mise en page et alignons le tout au centre, verticalement. Sélectionnez cette image ici pour que nous puissions la remplacer. Je vais télécharger cette dame ici. Ouverte. Nous y voilà. Voilà donc notre fille. A-t-elle des antécédents ? Bien sûr, elle le fait, mais c'est un contexte plus simple. Donc, en entrant ici et en sélectionnant arrière-plan de style de conteneur externe, classique, sélectionnons les fichiers de téléchargement en arrière-plan. Ce sont les éléments BG. C'est le contexte que nous avons créé pour cette section. voilà, nous sélectionnons et nous avons maintenant ce joli fond d'écran. Bien entendu, nous pouvons augmenter le rembourrage, l'espacement entre le bord ici et le contenu en haut et en bas. Donc, en sélectionnant le récipient extérieur. Passons au rembourrage, cassons ça. En haut, faisons 50 et en bas, 50. Nous avons donc maintenant ce bel espacement là-bas. Tant qu'il est encore sélectionné. Revenez à l'intérieur de la mise en page. Passons maintenant à l'attachement au style, corrigé. Maintenant, pendant que nous faisons défiler la page, cela ressemble à une seule mise à jour en arrière-plan. Prévisualisons les modifications. Nous y voilà. Commençons donc à faire défiler la page. Juste comme ça. Et nous y voilà. Mais bien sûr, permettez-moi de modifier légèrement ces textes et la taille du texte est plus grande que celle que nous avons sur le nôtre. Donc, en sélectionnant cela, entrez dans le contenu, collez-le dedans, un homme, agrandissons le texte en entrant dans le style. Typographie. Je pense que c'est la taille parfaite pour un corps parfait. Ensuite, pendant que cette option est toujours sélectionnée, cliquez avec le bouton droit sur Copier, sélectionnez ce style de collage avec le bouton droit de la souris. Cela lui donne donc la même taille que celui-ci. S'il s'agissait peut-être d'une couleur différente, ce serait aussi cette couleur. Très bien, alors mettons-le à jour. Et bien sûr, dans la leçon suivante, nous les aurions créés. Mais plutôt que d' attendre la prochaine leçon, nous allons simplement dupliquer cela. Dupliquons ce conteneur là-bas, comme ça. Nous devons maintenant le faire glisser en dessous de ce conteneur. Maintenant c'est là et la copie est toujours là. Sélectionnez cette image. Nous avons besoin de ces gants. Alors je vais y aller. Gants sélectionnés. Sélectionnez. Nous y voilà. Boxe de classe mondiale. Copiez ça. Sélectionnez cela. Et puis, en ce qui concerne le titre, une boxe de classe mondiale. Bien entendu, vous pouvez modifier tous ces contenus à votre guise. Personnalisez-le en fonction de vos besoins spécifiques. Nous cherchons simplement à mettre en page chaque élément de la page de destination. Très bien, nous avons maintenant ces services, et c'est sur cela que nous allons travailler dans la prochaine leçon. Alors, tout d'abord, laissez-moi vous parler de cette mise à jour. Voyons ce que nous avons dans le Oui, le contexte ici est toujours le même que le contexte à ce sujet. Juste comme ça. Prévisualisons donc les modifications. Faites défiler l'écran vers le bas. Et nous y voilà. Donc, dans la leçon suivante, nous allons voir comment les créer. Voyons comment créer ces fonctionnalités ou services avant de passer aux témoignages. Je te verrai donc bientôt. 15. Section des services: Salut, bon retour. Il est donc temps de créer ces sections de services ou de fonctionnalités. Et cette partie est un peu plus complexe que les parties précédentes car elle implique des conteneurs dans des conteneurs, dans des conteneurs. Voyons donc comment procéder. Revenons donc ici, créons d'abord le contenant qui contient tout. Il y a donc un conteneur qui contient tous ces objets. Alors, tout d'abord, créons cela. Et je veux juste partir d'un contenant vide comme celui-ci. Rentrons à l'intérieur de manière plus avancée. Brisez ce lien. Marge supérieure de 150, juste comme ça. Et mettons-le à jour. Et pendant la mise à jour, permettez-moi de dupliquer ce titre, car nous aurons besoin d'un titre dedans. Et aussi ces brèves descriptions se trouvent en dessous du titre. Et tant que cette option est toujours sélectionnée, je vais entrer dans le style, l' aligner au centre. Lorsque cette option est désactivée, rendez-vous dans le centre d'alignement du contenu. Permettez-moi tout d'abord de modifier cela pour nos fonctionnalités pendant que ce titre est sélectionné. Cela restera ainsi. Mise à jour. Donc, pour en revenir ici, voici un conteneur et ce sont deux éléments. Et ils sont disposés dans le contenant extérieur qui les contient tous. Et ils sont disposés de haut en bas. Permettez-moi donc d'illustrer cela très rapidement. Permettez-moi de faire un léger zoom arrière pour que nous puissions tout voir là-haut. Permettez-moi maintenant de choisir l'outil de découpage. Alors maintenant, allons-y. Supposons donc qu'il s'agisse d'un conteneur. Tout cela est un conteneur. Et ce contenant, nous avons cet élément. Et cet élément. Et voici également un contenant. Ce sont donc trois éléments qui sont disposés de haut en bas. Donc, pour rentrer ici, ils sont arrangés. Permettez-moi de sélectionner ce contenant extérieur. Ce contenant extérieur est ce contenant extérieur, le contenant noir ici. Et il comporte trois éléments : le titre, la description et un contenant à l'intérieur. Et c'est arrangé de haut en bas, comme ça. Ça va ? Cela signifie donc que nous avons besoin d' un conteneur juste en dessous de ces deux éléments. Ajoutons donc un conteneur ici. est donc ce contenant qui contiendra ces autres conteneurs. Ça va ? Donc, maintenant, en regardant cette rubrique et cette description, il s'agit de deux éléments disposés dans un conteneur de haut en bas, comme ici. Donc un titre et sa description dans un conteneur organisé de haut en bas. Et puis ce conteneur sur cette image se trouve à l'intérieur d'un autre conteneur disposé de gauche à droite. Et voici une colonne, contient ceci, voici un conteneur qui est une colonne avec trois conteneurs comme celui-ci, disposés de haut en bas. Très bien, maintenant c'est ce que nous essayons de réaliser. J'espère que tu l'as compris. J'espère que vous avez compris ces dessins, même s'ils ressemblent à des griffonnages, au moins vous avez suivi et compris comment les contenants sont liés les uns aux autres. Alors maintenant, nous travaillons sur. Commençons donc par créer ce conteneur ici, CrossFit et sa description. Alors allons-y et dupliquons cela. Et puis dupliquez-le. Alors maintenant, dessinons ceci. Dans le conteneur et celui-ci juste en dessous. Ils sont donc tous les deux à l'intérieur d'un conteneur. C'est ce contenant ici disposé de haut en bas. Donc, si nous sélectionnons ce contenant, il est disposé de haut en bas, comme ça. Maintenant, créons ce conteneur externe qui contient l'image dans ce conteneur. Cela signifie donc que nous ajoutons un conteneur. Ajoutons-y un contenant. Dans ce contenant. Laissons tomber cet autre contenant. Juste comme ça. Dans ce contenant extérieur. Ce contenant extérieur. Laissons tomber l'image. Permettez-moi donc d'y ajouter une image. Nous avons donc maintenant ce conteneur qui se trouve à l' intérieur avec le texte et sa description. Et le deuxième élément est l'image. Il est donc temps de sélectionner ce conteneur. Et il doit aller de gauche à droite, juste comme ça. Nous avons donc maintenant ce conteneur ici. La prochaine chose que nous voulons faire est de créer ces conteneurs qui contiennent, comme une rangée avec trois services, 123. Maintenant, faisons glisser un autre conteneur ici, juste en dessous du texte. Et faisons glisser ce conteneur là-dedans. Maintenant. C'est un service là-dedans. Dupliquons le service. Dupliquons-le une fois de plus. Nous y voilà. Nous venons donc de créer cette colonne. Mais maintenant, n'oubliez pas que nous avons également deux colonnes. Ces deux colonnes se trouvent donc à l'intérieur d'un autre conteneur. Et ils sont disposés de gauche à droite. Nous devons donc avoir un autre conteneur et dupliquer cette colonne. Maintenant, ajoutons un autre conteneur. Et faisons glisser ce conteneur là-dedans. Alors on y va. Ce conteneur contient donc maintenant trois services. C'est à l'intérieur de ce contenant. Alors maintenant, dupliquons-le. Mais bien sûr, par défaut, ce conteneur qui contient désormais les deux colonnes est organisé du haut vers le bas. Et si nous faisons défiler la page, nous avons cette colonne contenant trois services. Et puis cette deuxième colonne dupliquée. Donc, ce que nous voulons faire, c'est sélectionner telle ou telle colonne. J'utilise le mot colonne parce que c'était le flux de travail précédent dans Element. Sélectionnez donc ce conteneur extérieur qui contient ces deux colonnes. En le sélectionnant. Changeons-le de gauche à droite. Nous avons maintenant deux colonnes. C'est ça. Maintenant que nous l'avons, quoi d'autre avons-nous besoin ? Je pense que nous avons tout prévu. Il ne reste plus qu'à créer le contenu dont vous avez besoin ici. Sélection de cette image. De quoi avons-nous besoin, cette fille ? Allons donc à l'intérieur et téléchargeons des fichiers. Cette fille. Ouverte. Très bien, alors sélectionnez-le. Nous avons donc cette image. Réduisons tout d'abord la taille du titre. Il faut le réduire considérablement jusqu'à quelque part. Et nous voulons qu'il soit aligné à gauche. Donc, le contenu est aligné à gauche, comme ça. Ensuite, je souhaite sélectionner ces textes et supprimer la plupart, car il ne s'agit que d'une brève description. Et tant qu'il est toujours sélectionné, stylez, alignez à gauche. Je vais maintenant sélectionner cette copie. Sélectionnez-le. Cliquez avec le bouton droit, copiez. Sélectionnez ce style de collage avec le bouton droit de la souris. Sélectionnez ce style de collage avec le bouton droit de la souris. Sélectionnez. Style de collage. Sélectionnez, cliquez avec le bouton droit sur Coller. Sélectionnez, cliquez avec le bouton droit sur le style de collage. Sélectionnez cette option. Alignez à gauche, comme ce style, ligne à gauche. Bien entendu, cela sera désormais remplacé par votre contenu spécifique. Je voulais réduire cela une fois de plus. Utilise ça, utilise ça, utilise ça comme ça. Mise à jour. Et maintenant, les titres sont de couleur verte, et en fait, il n'y même aucun fait qui soit aussi gras. Donc je n'irais pas non plus. 700. Oui, je pense que c'est la bonne. Audace, textes, couleurs. Donnons-lui ce vert. Sélectionnez donc ce bouton. Style. Copiez ça. Rentre ici. Sous le titre « Style ». J'aurais dû faire tout ce dont j'avais besoin , puis le coller. Cliquez donc avec le bouton droit sur Copier, Coller. Je vais le faire pour toutes les autres rubriques ici. Collez le style comme ça. Permettez-moi de sélectionner cette image, basée sur le cardio. Et puis pendant que c'est sélectionné, je vais entrer ici. Sélectionnez l'image cardio-vasculaire. Sélectionnez. Allez-y et sélectionnez cette option. C'est du CrossFit. Sélectionnez CrossFit, endurance, perte de poids. Et enfin de la force. Alors mets-le là. Et laissez-moi rapidement ces images. Elementary les redimensionnera donc automatiquement pour que vous ayez la même taille. Bien qu'en réalité les images n'aient pas les mêmes dimensions. Et enfin, ajoutons l'image de perte de poids. Et voilà, c'est ce que je veux dire. Donc, si nous sélectionnons cela, comme vous pouvez le voir, elemental l' a redimensionné. Maintenant, sélectionnons cette image, entrons dans le style, la bordure et le rayon. Donnons-lui 20 pour lui donner des coins arrondis. Donnez-lui des coins arrondis. Répétons la même chose pour le reste. 20 ici, style, style. C'est un style de course. Ronnie. Enfin, l'entraînement de style. Alors mettez-le à jour. Et maintenant, souvenez-vous, qu'en serait-il de l'alignement de textes qui semblent être élevés vers le haut dans un conteneur ? Ou nous devons sélectionner le conteneur lui-même, ce conteneur, et aligner tout au centre de cette manière. Répétons donc cela pour tous les services. Centre. Sélectionnez ce centre, sélectionnez ce centre. Sélectionnez ce centre, puis sélectionnez ce centre. Mise à jour. Et prévisualisons les modifications. Donc, en faisant défiler vers le bas. Nous y voilà. Nos services sont maintenant terminés. Si vous le souhaitez, vous pouvez créer ces conteneurs sur toute la largeur. Sélectionnez donc le conteneur lui-même. Voyons voir. Oui, sélectionnez ce conteneur pour sa largeur. Mise à jour. Et prévisualisons les modifications. Défiler vers le bas. Le contenant qui les contient ne doit donc pas non plus être emballé. Nous allons donc sélectionner ceci. Comme vous pouvez le constater, il est toujours emballé, donc sur toute la largeur, mais faisons-le à 70 %. Maintenant, disons 80 %, 80 %. Et sélectionnons le conteneur qui contient ces conteneurs. C'est le contenant extérieur. Et alignez tout au centre comme ça. Mise à jour. Et prévisualisons les modifications. Donc, en faisant défiler la page vers le bas, c'est un peu plus espacé. Et voici comment créer cette section de fonctionnalités. Dans la leçon suivante, juste avant de créer le dossier, créons les témoignages. Je te verrai donc bientôt. 16. Section des témoignages: Bon retour. Il est donc temps de créer la section des témoignages juste avant de créer le pied de page. Alors, sans perdre plus de temps, allons-y. Pour en revenir à Elementor, juste en dessous de notre section de services, cliquez sur ce signe plus et nous voulons juste un simple conteneur vide ou vide. Et puis ici, ajoutons un témoignage. Nous avons maintenant l'élément de témoignage Elementor par défaut et nous avons un élément , des éléments du kit. Utilisons donc les éléments, gardons-en un car c'est très, c'est beaucoup mieux. Et comme toujours, laissons-lui une marge en haut. Sélectionnez donc le conteneur externe, avancé, évaluez ce lien. Un cinquième. Bel espacement là-haut. La prochaine chose que nous voulons faire est de sélectionner le témoignage lui-même, l'élément de témoignage. Bien qu'il soit sélectionné, nous avons différents formats ici. Celui que j'aime, c'est celui-ci ou celui-ci. Alors allons-y avec celui-ci. Et nous y voilà. Passons à l'intérieur des paramètres. Et nous pouvons montrer deux diapositives à la fois. Alors laissez-moi juste en dire deux. Maintenant, avant de faire quoi que ce soit d'autre, nous devons créer, entrer dans le style. Et pour le rayon de bordure, donnons-lui 20. Juste comme ça. Allons-y et changeons la couleur de fond. Sous Mise en page. Sous mise en page, nous avons le type de fond, classique. Donnons-lui peut-être un gris foncé pour le séparer du fond noir. Juste comme ça. Cliquez n'importe où ici pour vous en débarrasser. Ensuite, réduisons cela pendant une seconde parce que nous voulons modifier la description. Avant de modifier la description, passons au témoignage sur le contenu. Témoignage 1. Je veux juste récupérer ces témoignages ici. C'est donc Emily Chan. OK, je ne peux pas saisir ça. Est-ce que je peux ? Je ne peux pas traîner ça. Je vais donc devoir utiliser certains de ces textes. Disons que c' est la désignation de Julia Roberts, peut-être une spécialiste du marketing. Maintenant, collons ce témoignage là-dedans. Je vais le dupliquer à nouveau. Et maintenant, nous avons là une quantité importante de textes. Donc, en retournant à l'intérieur, réduisez le style qui entre dans la description, changez de couleur en blanc. Maintenant que notre témoignage s'est effondré, passons à l'évaluation. Tu peux le changer en vert. Laissez-moi donc sélectionner ce style. Copiez ça. Sélectionnez les éléments du témoignage, réduisez la mise en page, passez à l'évaluation, à la couleur, changez-la en vert, et maintenant nous avons une belle évaluation réduite en vert cohérente. Allons voir le client. Tout d'abord, la couleur du nom du client. Nous pouvons le faire de même. Vert. Augmentez à nouveau le nombre de clients. Alors, adressez-vous à un agent de commercialisation de la désignation de clients discrets. La couleur doit donc être blanche. Comme ça. Quoi d'autre ? Qu'est-ce qu'il y a ici ? Image du client, nous n'avons pas besoin de facturer l'image du client. Je pense que ça a l'air bien. Ou nous devons le faire est ajouté. Alors maintenant, laissez-moi réduire le client. Entrez dans les guillemets, icône de citation. Vous pouvez également lui donner une couleur verte comme ça. Et puis peut-être réduire l'opacité après quelque part pour qu'il ne crie pas. En survol. Nous pouvons simplement le rendre blanc ou réduire l'opacité. Encore une fois, juste comme ça. Peut-être comme ça. Nous pouvons le copier actif. Qu'il soit également de la même couleur. Bien que ces activités ne soient pas pertinentes ici, car vous ne pouvez pas cliquer et les activer. Mais ainsi de suite, c'est juste cette couleur. Revenons à l'intérieur des paramètres de contenu. Et maintenant, nous pouvons également activer la boucle. Cela signifiera qu'il ne va pas de gauche à droite, de gauche à droite. C'est juste aller dans une direction en boucle. Afficher les points. Nous pouvons montrer les points pour que quelqu'un sache quel témoignage vous êtes en train de consulter en ce moment. Oui. Laisse ça comme ça. Alors rentrons à l'intérieur. Témoignage. Premier témoignage, Julia Roberts, clients, avatar. Allons-y et téléchargeons des fichiers. Voici les trois clients. Je vais télécharger les trois. Sélectionnez. Alors c'est Julia. Nous y voilà. Permettez-moi de résoudre ce problème. Le second. Peut-être des accrocs d'équipe. Peut-être. Mât Jim. Copions un bloc de texte. Copiez ça. Collons-le là-dedans. Et puis il est une image. C'est lui. Laisse-moi réduire l'équipe. Développons-nous. Peut-être. Pseudonyme. Leurs ailes. Les ailes appellent, désignent. Musicien qui aime la santé et la forme physique. Nous allons également y coller certains des textes. Bien sûr, choisissons son image. Mettons-le à jour. Nous avons donc maintenant trois témoignages et je viens de remarquer que nous avons oublié de mettre le titre et sa description en haut de page. Des témoignages encore indécis, c'est ce que nos clients avaient à dire. Nous pouvons donc simplement le dupliquer et le faire glisser vers le bas. Déposez-le là-haut. Ce contenant. Allez ici en double exemplaire. Faire glisser. Déposez-le là-dedans. Alors mettez-le à jour. Et prévisualisons les modifications pendant la mise à jour. Modifions cela pour tester deux monômes. Mise à jour. Encore une fois. Prévisualisons-le. Défiler vers le bas. Nous y voilà. Notre témoignage est donc maintenant magnifique. Nous avons presque terminé la page de destination et j'ai aimé les résultats jusqu'à présent. Mais le plus important, pour ne pas obtenir le site Web ou la page de destination parfaits pour le moment , c'est d'apprendre le flux de travail. Je suis sûr que vous pouvez faire beaucoup mieux et produire une bien meilleure page de destination avec le temps. Alors prenez votre temps, améliorez ces compétences. Et ce n'est que la pointe de l'iceberg. Il y a bien d'autres choses, beaucoup plus de trucs et astuces que vous pouvez apprendre. Très bien, voici comment créer la section des témoignages. Dans la leçon suivante. Allons-y et créons le dossier. lire avant de rendre le site Web ou la page de destination réactive sur différents écrans d'appareils. Je te verrai donc bientôt. 17. Le pied de page: Bon retour. Il est maintenant temps de créer le pied de page. Alors, sans perdre plus de temps, passons directement à notre page de destination. Et bien sûr, tout comme pour la section Napa ou la section de navigation, nous n'allons pas créer le dossier ici même. C'est ici que nous construisons le corps de la page pour le pied de page et l'en-tête, nous les construisons séparément. Maintenant, tout ce que j'ai à faire est de sortir d' ici pour être redirigé vers le tableau de bord. Et nous pouvons entrer dans le kit d'éléments, l'en-tête et le pied de page. Et nous pouvons dire Ajouter un nouveau. Appelons-le dossier, sélectionnez le pied de page ici. C'est l'étiquette que nous voulions sur l'ensemble du côté. Et nous voulons qu'il soit actif. Disons donc des changements. Nous y voilà. Donc, comme il n'est pas édité avec Elementor, il ne dispose pas de ces options. Cliquez sur Modifier. Le contenu sera redirigé vers le front-end où nous pouvons désormais le créer visuellement. Allons-y. Très bien, commençons maintenant avec un contenant vide. Nous y voilà. Et maintenant, nous voulons commencer par cela. Nous voulons commencer par ce conteneur ici. Il contient la description locale et une brève description et tout est organisé de haut en bas. Nous nous sommes déjà habitués à ces conteneurs. J'espère. Donc. Faisons glisser un conteneur là-dedans. Et ajoutons un élément d'image et un éditeur de texte juste en dessous de l'image. Juste comme ça. C'est juste un contenant avec deux éléments. Sélectionnez les éléments de l'image, puis choisissons le logo. Juste comme ça. Sélectionnez la description. Je veux copier ceci. Copiez ça. Et je vais sélectionner tout ce contrôle Shift V pour le coller sans aucun formatage. Et tant que c'est encore sélectionné, je vais entrer dans le style. La couleur doit être blanche. Mettez-le à jour. Nous y voilà. Maintenant, la prochaine chose que nous voulons faire est de créer cette pièce. Et maintenant, comme nous l'avons fait avec l'outil de capture ici, je veux vous montrer comment nous allons nous y prendre. Donc, encore une fois, il s'agit d'un conteneur qui contient une image. Et ces textes. Ensuite, nous avons ici un conteneur qui contient deux éléments pour les listes d'icônes. Et ils sont disposés de gauche à droite. Et puis voici un élément de titre. Avec ce conteneur ici. Ils se trouvent à l'intérieur d'un récipient et sont disposés du haut vers le bas. Nous avons donc le texte, puis le conteneur, ici même. Ignorez cela. Ici, nous avons cette icône, ces icônes sociales. Et nous avons ce formulaire d'inscription. Ce sont deux éléments à l'intérieur de ce conteneur, et ils sont disposés de haut en bas. Et puis ils sont tous disposés dans un conteneur de gauche à droite. Nous avons donc déjà créé ce conteneur qui contient ces deux. Et voici ce contenant. Ce que nous voulons faire, c'est créer ce conteneur extérieur avant de créer les deux autres. Ajoutons donc un conteneur. Ils vont entrer ici. Faites glisser et dessinez un conteneur l'extérieur de ce conteneur intérieur. Non, je ne mangerai pas dehors. C'est bon. Permettez-moi de le laisser là pour le moment. Très bien, donc, oui, donc c'est à l'extérieur de ce conteneur. Maintenant, nous voulons y faire glisser ce conteneur. Et dupliquons-le. Un. Deux. Maintenant que nous avons trois colonnes, celles-ci sont comme ces trois colonnes. Choisissons le contenant qui les contient tous. Et pour la direction, changeons-la en trois colonnes. Maintenant, ce dont nous avons besoin, c'est souvenir que c'était aussi un conteneur. Faisons donc glisser un conteneur ici. Déposons-le là-dedans. Débarrasse-toi de ça. Permettez-moi d'y ajouter une boîte d' icônes, une liste d'icônes. Et comme c'est un conteneur, si je le duplique, il sera empilé. Mais si je sélectionne le conteneur, nous pouvons accéder aux instructions et les modifier en deux colonnes, comme ici. Maintenant, nous avons besoin de ce texte. Ce texte apparaîtra ici parce que vous sélectionnez un titre. Déposez-le au-dessus de ce contenant. Débarrassons-nous de cette image. Mettez-le à jour. Alors, ici, débarrassons-nous de ça. Et débarrassons-nous de cela. Signe Plus. Disons des icônes sociales. Je vais opter pour les éléments, les icônes sociales pour enfants. Et c'est ainsi qu'ils apparaissent par défaut, vous ne pouvez pas les voir car l'arrière-plan est noir. Mais bien que cela soit toujours sélectionné, bien sûr, par défaut, nous avons Facebook, Twitter, LinkedIn, et vous pouvez en ajouter autant que vous souhaitez si vous voulez Pinterest, Instagram et tout ça. Alors tout d'abord, avant même d'aller plus loin, ouvrons Facebook. Et passons à la couleur. Par défaut, c'est gris, mais nous voulons qu'il soit vert. Est-ce que j'ai toujours ce vert ? Non, je ne sais pas. Alors laissez-moi le prendre de l'autre côté. Copiez ça ici. Collons-le. Et maintenant c'est vert. Et en fait, je voulais que l'arrière-plan soit vert, pas l'icône. Alors collez-le dedans et ils devraient être de couleur noire, juste comme ça. Donc, en survolant, nous voulons que ce soit un fond blanc. Juste comme ça. Répétons la même chose pour Twitter. Couleur. C'est la couleur du texte, le noir, la couleur de fond. Collez-le en vert. Ensuite, lorsque vous passez la souris, nous voulons que l'arrière-plan soit blanc. Faisons de même pour LinkedIn. Couleur du texte, noir, couleur de fond vert. En survol. Nous voulons que ce soit blanc. Bien. Nous y voilà. Nous pouvons également tous les aligner à droite, à gauche ou au centre. Comme ça. Si nous entrons dans le style, nous pouvons également réduire ou augmenter la taille de l'icône. Mettez-le à jour. Je voulais sélectionner ce texte. Et qu'est-ce que ça dit ? Liens rapides. Je vais donc le copier. Tant que cette option est sélectionnée. Rentre à l'intérieur. Liens rapides. Style, typographie blanche. Faisons en sorte que le poids de police soit 700, juste comme ça. Maintenant, remarquez que cela est espacé. Cela signifie donc que c' est sur toute la largeur. Tout d'abord, faisons en sorte que le récipient extérieur soit sur toute sa largeur. Il est maintenant en pleine largeur. Mais maintenant, nous avons également le contenant intérieur qui les contient tous. Doit également être sur toute la largeur. Mais nous devions atteindre 90 %. Donc, ça va jusqu'ici. Mettons-le au milieu, en sélectionnant le récipient extérieur. Mettons tout au centre, juste comme ça. Sélectionnez ce logo. Passons en revue la largeur des carreaux. Allons-y, peut-être jusqu'à 30 %. Et alignons-le vers la gauche. Comme ça. Nous allons sélectionner la liste d'icônes qui se trouve ici. Vous pouvez changer cela pour vérifier, vérifier, insérer. Une sur les cours à l'item, disons le contact. Cela a également changé les icônes. Chèque. Modifions-les pour vérifier. Enfin, celui-ci à vérifier. Insérer. Dans. Nous y voilà. Alors, avant de le dupliquer, alors qu'il est encore sélectionné, passons à l'icône de style. Passons au vert foncé. Est-ce que j'ai toujours ce vert ? Non. Permettez-moi de le sélectionner ici. Contenu. Facebook copie ça. Sélectionnez ces icônes de style. Il faut qu'il soit vert comme ça au survol, il faut qu'il soit blanc. Ensuite, pour le texte, typographie, la couleur doit être de couleur blanche. Et le survol doit être de couleur verte. Juste comme ça. Dupliquons la liste des icônes. Supprimez-le. Et maintenant, passons à la confidentialité, à la politique, aux conditions d'utilisation et peut-être aux licences. Fermons ça. Mise à jour. Prévisualisons les modifications. Et c'est ce que nous avons. Remarquez maintenant que nous avons un peu plus d'espacement entre les deux. Et nous avons ce formulaire d'inscription, qui est très important. Retourner ici. Sélectionnez un contenant contenant tout ce qu'il contient. Ce conteneur a évolué. Cassons ce rembourrage ici même. Et pour le rembourrage gauche, c'est l'espacement par rapport au bord. Faisons en sorte que ce soit 50, ou qu'un cinquième sache, 100, 100. Mise à jour. Prévisualisons les modifications comme ça. Mais maintenant, nous devons créer ce formulaire d'inscription, et c'est ce que nous voulons faire dans la prochaine leçon. Je te verrai donc bientôt. 18. Créer le formulaire d'inscription: Salut, bon retour. Nous avons donc déjà créé le dossier, mais ce qui manque, c'est le formulaire d' inscription ici, droite, sur le côté droit de la photo. Alors, comment s'y prendre ? Nous devons installer un plugin de formulaire. Il existe plusieurs plug-ins de formulaire dans le référentiel de plugins WordPress, mais j'adore les créer plus tard. Nous devrons donc l'installer pendant environ une minute. Sortons d' ici pour le moment. Sortez. Et si j'adore Formulator, c'est parce que Nominator est très puissant et que vous pouvez l'utiliser gratuitement. Et certaines des fonctionnalités les plus importantes qu'il vous fournit gratuitement sont en fait payantes sous une autre forme de plugin. Vous devez donc payer pour ces fonctionnalités lorsque vous utilisez d'autres plugins de formulaire. Utilisez le formulateur et vous les obtiendrez gratuitement. Passons donc à la section Plugins et ajoutons-en de nouveaux. Et je vais juste taper quatre minutes ici. Pour Terminator. Le Terminator. Et nous y voilà. C'est donc par WP MU Deb. Donc installé maintenant. À l'heure actuelle, il est installé. Alors activons. Et nous y voilà. Et c'est juste ici, presque en bas du menu latéral. Passons donc au formulateur. Vous pouvez cliquer pour moi plus tard ou accéder directement aux formulaires, mais je souhaite que nous accédions au tableau de bord du formulateur. Nous y voilà donc. C'est ici que se trouve le plugin Four Monitor de WordPress. Comme vous pouvez le constater, nous avons différentes options. Nous pouvons créer un formulaire ou un sondage. À l'heure actuelle, nous sommes intéressés par un formulaire. Alors créez. Et nous avons ici des modèles parmi lesquels nous pouvons choisir et qui sont déjà prédéfinis. Nous voulons donc vous inscrire à la newsletter. Alors allons-y et disons inscription à la newsletter, continuez. Inscrivez vous. Disons simplement « inscrivez-vous » ou «  c'est bien ». Maintenant, il est créé. Et maintenant, nous avons deux champs. Prénom, e-mail, puis un bouton d'abonnement. Et si vous voulez le prévisualiser, vous pouvez simplement dire aperçu. Nous avons donc le prénom, e-mail et l'abonnement, le prénom, l'e-mail, l'abonnement. Et nous pouvons faire glisser et réorganiser ces champs. Par exemple, nous pouvons mettre la peur, nous pouvons les mettre côte à côte comme ça dans l'aperçu gratuit. Maintenant, ils sont côte à côte. Je ne veux donc pas inclure le prénom, donc je vais simplement le supprimer. Et maintenant, il ne nous reste plus que l'adresse e-mail. Juste comme ça. Fermez ça. Et maintenant, nous voulons donner à ce bouton cette couleur verte. Alors laisse-moi juste prendre ce vert qui se trouve de ce côté. Encore une fois Copie. Retourner ici. Je voulais m'intéresser à l'apparence intérieure. Et voici un aperçu des modifications que vous apportez. Donc, si vous optez pour le plat, je préfère le plat sans cette bordure dure. Peut également être utilisé avec des matériaux audacieux ou non. J'aime bien cet appartement. Et vous pouvez également ajuster les couleurs, c'est ce que nous voulons faire. Cliquez donc sur costume. Cela révèle chaque partie d'un formulaire existant. Comme vous pouvez le voir en bas, nous avons le bouton Soumettre. Si je clique dessus, nous pouvons changer sa couleur en cliquant sur la couleur d'arrière-plan. Sélectionnez cela, je vais y coller le vert. Cliquez à l'extérieur. Ensuite, pour les textes, mettons-le en noir. En survol. Je veux que le bouton soit blanc. Et pour ce qui est de la mise au point, je veux qu'elle soit blanche. Prévisualisons-en un aperçu. En survol. Très bien, alors passez la souris, faisons en sorte que le texte soit blanc, noir. Déconcentré. Le texte doit être noir au survol et doit également être aperçu en noir, exactement comme ça. Publier. Et quand on fait probablement des feuilles, on nous donne un code court. Un code court est essentiellement un petit code comme celui-ci, et je l'ai copié. Il s'agit d'un petit code que vous collez n'importe où sur votre site Web. Et ce formulaire s'affichera. Ce petit code représente un formulaire. Ces 243 sont le numéro ou l'identifiant du formulaire. Si vous avez créé dix formulaires natifs, vous avez créé quatre pages différentes. Peut-être que la page de contact possède son propre formulaire contenant plus de champs. Il se peut qu'il ait un numéro différent. Chaque formulaire possède son propre numéro unique, de sorte que chaque code abrégé affiche un formulaire différent. Alors laisse-moi le copier. Le raccourci a été copié avec succès. Fermez ça. Maintenant, en retournant dans notre tableau de bord, je souhaite ouvrir notre pied de page. Alors portail de fitness, entrons dans le tableau de bord. J'ai toujours cette page ouverte, mais j'ouvre le tableau de bord dans un autre onglet afin que nous puissions accéder à Elements Kids, à l' en-tête, au pied de page, à la modification avec Elementor. Et maintenant, dans ce conteneur, nous voulons déposer un élément de code court, un élément de code court. Alors glissons-le là-dedans. Et il s'agit simplement d'un champ pour saisir nos shortcodes. Alors collons ça là-dedans. Et maintenant, comme vous pouvez le constater, le formulaire apparaît dans notre dossier. Si nous faisons glisser ces éléments de code abrégé vers une autre partie, le formulaire apparaîtra dans cette partie. Alors mettez-le à jour. Et prévisualisons les modifications. Et nous y voilà. Ce formulaire d'édition n'est donc qu' un lien vers notre éditeur. Si je clique, il sera redirigé vers le tableau de bord pour continuer à le modifier. Mais lorsque vous ne le modifiez pas, si vous êtes un visiteur ou un client de leur site Web, vous ne les verrez pas. Seul l'administrateur peut les voir car il modifie activement le site Web. Très bien, alors on y va. Voici notre pied de page. Maintenant, si nous entrons dans le tableau de bord, pages du tableau de bord, toutes les pages. Et voyons la page d'accueil. Défiler vers le bas. Nous y voilà. Notre dossier est maintenant prêt. Mais une chose que je veux faire est d'augmenter la marge entre les témoignages et le pied de page, car nous avons besoin d'un bon espacement. Ainsi, pendant que nous sommes ici sur la page, nous pouvons accéder à Modifier avec Elementor. Nous pouvons cliquer sur l'en-tête pour modifier le dossier d'en-tête afin de modifier le dossier. Ou cliquez simplement sur Modifier avec Elementor pour modifier le contenu de la page elle-même. Nous sommes donc en train de modifier la page. Faisons défiler la page jusqu'en bas. Sélectionnez le conteneur de témoignages avancé pour la marge inférieure. Donnons-lui 100. Mettez-le à jour. Et prévisualisons les modifications. En faisant défiler l'écran jusqu'en bas. Nous n'avons pas encore assez d'espacement. Alors, tant qu'il est encore sélectionné, donnons-lui un. Mettez-le à jour et prévisualisons les modifications. Défiler vers le bas. Oui, maintenant nous en avons 150. On peut peut-être lui en donner 200. Disons 250. Mettez-le à jour. Prévisualisons les modifications. En faisant défiler l'écran jusqu'en bas. Oui, donc maintenant, il y a un bon espacement entre les deux. Et remarquez que nous avons besoin de plus d'espace ici. Revenons donc à notre dossier, sélectionnez ces deux. Si nous sélectionnons le contenant contenant ces deux objets et que nous y entrons, nous avons un contenu justifié. Nous pouvons centrer le contenu. Nous pouvons le justifier à partir de Start, ce que nous avions à l'origine. Nous pouvons les pousser jusqu'au bout. On peut avoir un espace entre les deux. Nous pouvons avoir de l'espace autour de nous ou même de l'espace. Je pense donc que l' espace semble correct. Mais maintenant, cela ne correspond pas au titre. Donc, une autre chose que nous pouvons faire est de les faire démarrer dès le début et de sélectionner cet élément lui-même Avancé. Passons à la marge, à gauche. Faisons-en 20, ou faisons-en 50. Jusqu'à ce point. Mettez-le à jour. Prévisualisons les modifications. Nous y voilà. Alors maintenant, si nous allons sur notre page et l'actualisons, faisant défiler la page jusqu'en bas. Nous avons maintenant un bel espacement. Nous avons également notre inscription pour et tout ça. N'oubliez pas que nous pouvons également faire de ce logo un lien. Donc, en retournant dans notre éditeur, si nous sélectionnons cette image, nous pouvons la transformer en lien, peut-être en URL personnalisée. Et maintenant, vous pouvez peut-être dire votre site web.com, c'est la page d'accueil. Et si vous souhaitez que ce lien s'ouvre dans un nouvel onglet, cliquez sur cette roue dentée et sélectionnez Ouvrir dans une nouvelle fenêtre. Prévisualisez les modifications. Si nous cliquons maintenant dessus, il s'ouvrira dans un nouvel onglet. Mais bien sûr, ce site Web n'existe pas. Votre site web.com. C'est là que cela nous amène à héberger. Ce sont des vendeurs de domaines. Donc, en gros, c'est ainsi que vous devez créer votre page de destination. Nous avons presque terminé. Dans les prochaines leçons, nous allons rendre cette page de destination réactive sur les smartphones et les tablettes, car elle est déjà superbe sur ordinateur de bureau. J'espère que vous avez apprécié le cours. Si c'est le cas, c'est le bon moment pour prendre une minute et laisser un avis. Dites aux autres élèves ce que vous pensez du cours. Comment en avez-vous bénéficié ? Qu'est-ce que tu aimes dans ce cours ? Cela vous sera très utile ? Maintenant, retournons au travail. On se voit dans la prochaine leçon. 19. Créer le Sticky de la barre de navigation: Donc, pour le moment, nous voulons travailler sur la barre de navigation. Nous voulons apporter quelques améliorations. Et pour être plus précis, nous voulons le rendre collant en haut. Vous remarquerez tout de suite que si nous commençons à faire défiler la page, la barre de navigation disparaît. Et si vous souhaitez accéder à d'autres pages du site Web, nous devrons revenir en haut pour accéder au menu. Ce n'est pas très convivial et notre objectif est de rendre le site Web aussi convivial que possible. Passons donc à notre tableau de bord. Et je veux entrer dans Plugins, Add New, parce que nous voulons ajouter un plugin qui nous permettra de rendre la barre de navigation collante en haut. Alors, ici, tapons « sticky ». J'espère qu'il l'apporte. Oh, oui. Ce sont donc des effets d'en-tête persistants pour Elementor. Ainsi, tout comme les éléments, la chaleur effets d'en-tête collants pour Elementor, il existe un autre plugin créé en tant que module complémentaire pour Elementor. Nous allons donc l'installer maintenant. Activez. Et nous y voilà. Et il semble que je doive mettre à jour les éléments, obtenir de la lumière. Permettez-moi simplement de cliquer sur Mettre à jour. Maintenant. Il est toujours bon de garder vos plugins à jour. Bien, maintenant que les effets d'en-tête rémanents sont installés, revenons à la page. Et maintenant, je veux passer la souris sur Modifier avec Elementor. Mais comme nous voulons modifier l'en-tête, je vais cliquer sur en-tête. Et nous y voilà. Alors, tout d'abord, permettez-moi de fermer ces navigateurs. Et maintenant, ce conteneur est sélectionné. Je souhaite accéder à la mise en page de réduction avancée et étendre les effets d' en-tête rémanents activés. Mettons-le à jour. Passons en revue les modifications. Très bien, donc ce que nous prévisualisons, c'est la barre de navigation. Mais ce que nous voulons, c'est un effet collant en action. Permettez-moi donc de cliquer sur Accueil pour accéder à la page de destination. Mais maintenant, nous avons déjà rendu la barre de navigation collante. Commençons donc à faire défiler la page. Et maintenant, vous remarquerez qu'il reste en haut même lorsque nous faisons défiler la page. Nous avons donc toujours accès au menu quelle que soit la partie du site Web. Mais il y a un petit problème. Notez que si nous faisons défiler la page jusqu'à un texte, par exemple ces textes, nous ne pouvons pas lire le menu car il y a des textes en arrière-plan. Alors, que faisons-nous introduire un arrière-plan dans la barre de navigation. Donc, en retournant dans l'éditeur, vous remarquerez que nous avons des paramètres ici sous l'effet d'en-tête rémanent . Donc, en faisant défiler vers le bas. Couleur d'arrière-plan : choisissez la couleur à utiliser pour modifier l'arrière-plan après le défilement. Donc, je vais l'allumer puis je vais le changer en noir. Mettons-le à jour. Prévisualisons les modifications. Comme d'habitude, allons à la page d'accueil pour pouvoir faire défiler a. Maintenant, si nous commençons à faire défiler la page, vous remarquerez que l'arrière-plan du menu est noir. Et cela nous permet de continuer à lire le contenu du menu, peu importe ce qui se trouve en arrière-plan. Et c'est ainsi que vous pouvez rendre la barre de navigation collante pour permettre à l'utilisateur d'accéder au menu, quelle que soit la partie du site Web où il se trouve. Et cela leur donne une bonne expérience utilisateur. Tout tourne autour de l'UI UX. Dans la leçon suivante, allons ajouter des effets de mouvement aux nous allons ajouter des effets de mouvement aux différents éléments de la page. Je te verrai donc bientôt. 20. Ajouter des effets de mouvement: Il est maintenant temps d'ajouter certains des effets de mouvement que nous avons vus sur le site Web de référence. Permettez-moi donc de passer au site Web de référence. Vous remarquerez que différents éléments sont animés et qu'ils ajoutent simplement des effets intéressants au site Web et le rendent plus mémorable. Juste comme ça. Voici donc un aperçu spectaculaire des différents éléments dont nous disposons. Voyons donc comment procéder. Pour en revenir à notre éditeur, voici la page que nous sommes en train de créer. Je vais aller dans Modifier avec Elementor et cliquer dessus. Nous pouvons donc commencer à modifier les éléments de la page. Et nous y voilà. La page est donc désormais modifiable. La première chose à faire est donc de sélectionner le conteneur qui contient le TextContent avec les boutons. Ce conteneur se trouve ici dans la mise en page Advanced Collapse. Et nous avons des effets de mouvement. Nous en avons plusieurs. Cliquez donc sur ce menu déroulant. Par exemple, sur le site de référence, il me reste du rebond. Là-dessus. Bien sûr, je peux utiliser Bouncing Right. Allez-y, sélectionnez-le. Accédez à la mise en page Advanced Collapse , développez les effets de mouvement, le menu déroulant, l' équilibrage, les droits. Juste comme ça. Mise à jour. Prévisualisons les modifications. Et nous y voilà. Maintenant, en gros, nous allons simplement utiliser différents effets sur les différents éléments de cette page et vous pouvez être aussi créatif que vous le souhaitez. Alors, revenons ici, voyons voir. Vous pouvez même les animer si vous le souhaitez, mais je vais juste sauter dessus. C'est à vous de décider. Permettez-moi de sélectionner le contenant qui contient cette image. Par exemple, mise en page de réduction avancée. Encore une fois, des effets de mouvement. Disons que je zoome vers la gauche ou la droite. Sélectionnons ce conteneur externe : Avancé. Je vais voir en zoomant à droite. Mettez-le à jour. Prévisualisons les modifications. Tout d'abord, la section des héros, qui défile vers le bas. Comme vous l'avez vu, ils ont zoomé à gauche et à droite comme nous les avons définis. Donc, en gros, allez-y et créez le reste des effets de mouvement. Ajoutez le reste des effets de mouvement. Chaque élément que vous ajoutez peut avoir un effet de mouvement. Alors faites preuve de créativité. Voyons ce que vous serez capable de trouver. Et avant de terminer cette leçon, je viens de me souvenir que je ne vous ai pas montré comment configurer la page d'accueil. Et c'est très important, car vous voulez que le domaine racine soit à deux points votre page d'accueil afin qu'il ne s'agisse pas de barre oblique de votre domaine racine .com. Il s'agit simplement de votre domaine racine .com, donc s'il s'agit de fitness.com, il pointe vers cette page d'accueil. Ce n'est pas fitness.com slash home fitness.com. Alors, comment régler cela ? Vous revenez sur notre tableau de bord ? Je vais entrer dans Paramètres, Lecture. Et ici, nous avons votre page d'accueil qui s'affiche, puis nous avons des options. Choisissez donc une page statique et pour la page d'accueil, sélectionnez accueil enregistrer les modifications. Et maintenant, si je clique dessus avec le bouton droit de la souris et que j'ouvre le lien dans un nouvel onglet, si nous y accédons, vous remarquerez que nous sommes maintenant sur la page d'accueil et que c'est le domaine racine. Et en gros, c'est comment ajouter les effets de mouvement et définir la page d'accueil. Dans la leçon suivante, nous allons voir comment rendre la page de destination réactive sur les tablettes et les téléphones mobiles. Je te verrai bientôt. 21. En-tête réactif: heure actuelle, nous voulons rendre ce site Web réactif, ou plutôt notre page de destination réactive. Et nous voulons commencer par l'en-tête, en d'autres termes, le Napa. Voyons comment rendre la barre de navigation réactive. Alors, tout d'abord, permettez-moi de fermer tous les onglets que nous avions ouverts. Et maintenant, il nous reste une page de destination. Permettez-moi donc de passer la souris dessus, puis de cliquer sur l'en-tête. Parce que nous travaillons sur l'en-tête. Nous voulons maintenant le rendre réactif. Je vais donc cliquer sur ce bouton du mode réactif. Et cela affichera ces paramètres ici. Et ce qui nous intéresse vraiment, ces trois icônes, comme vous pouvez le constater, c'est le bureau. La page de destination s'affiche déjà bien sur ordinateur. Travaillons donc sur la version tablette en cliquant dessus depuis le haut. Et maintenant, nous y sommes. Nous passons donc immédiatement en mode tablette. Vous remarquerez que le menu a disparu et c'est parce qu'il est devenu un menu de hamburgers. Si je passe la souris dessus, voici un menu de hamburgers. Par défaut, dans son état inactif, il est noir et bleu lorsque je survole. Nous pouvons donc le remplacer par notre vert. Donc, ce que je veux faire, c'est sélectionner le menu lui-même. Optez pour le style, car nous voulons modifier le style du menu des hamburgers. Réduisons l'emballage du menu et ouvrons le style hamburger. Et passons au type d' arrière-plan. Changeons. Je veux coller la couleur verte ici. Juste comme ça. Je vais cliquer n'importe où ici pour m'en débarrasser. Et nous n'avons pas vraiment besoin de modifier l'ensemble des paramètres de l'oiseau, car lorsque vous utilisez une tablette, vous n'avez pas besoin de passer votre doigt sur votre tablette pour cliquer sur quelque chose, il vous suffit de la toucher. Les effets de survol n' auront donc aucun effet réel. Maintenant, lorsque nous développons ce menu en cliquant dessus, le menu latéral apparaît. Nous devons donc modifier ce contexte. Donc, en entrant dans l'enveloppe du menu, qui est le premier élément, type d' arrière-plan, changeons-le en noir. Maintenant, bien sûr, il est de couleur noire et il hérite des couleurs que nous avons définies pour le bureau. Et je pense que je vais m'en tenir là. Mais maintenant, nous avons également ces icônes à bascule ici. Nous pouvons changer sa couleur en réduisant l'enveloppe du menu. On entre dans le style d'un hamburger. Si je ne me trompe pas. Et ici, nous avons fermé la bascule. Donc, en faisant défiler vers le bas, nous avons le type d'arrière-plan. Sélectionnez la couleur ici et collez le vert dedans. Et maintenant, il est de couleur verte. Et je crois que j'aime ça. Eh bien, le menu est toujours sélectionné. Nous pouvons également accéder aux paramètres du contenu et du menu mobile. Nous pouvons ajouter un logo ici. Sélectionnez cela, sélectionnez. Et maintenant, lorsque nous touchons cette icône, le logo apparaît, mais il semble déformé. Donc, en ce qui concerne le style, nous pouvons entrer dans le logo du menu mobile et travailler sur le weep 100% et battled k. Nous pouvons également travailler sur la marge. Développons cela. Enfoncez-le depuis la gauche. Donc, Margin-Left met à jour cela. Prévisualisons maintenant les modifications. Nous pouvons désormais utiliser les outils de développement fournis avec chaque navigateur pour imiter différents appareils. Donc, si je clique sur mon bouton de commande Chrome , cela fera apparaître les Chrome DevTools. Et si vous cliquez sur cette icône du mode réactif ici, nous pouvons basculer entre différents appareils. Donc, pour le moment, c' est le pixel 5. Si vous cliquez sur le menu déroulant, nous avons différents appareils ici car nous travaillons sur la version tablette. Cliquez sur iPad Air. Et voici à quoi cela ressemble sur un iPad Air. Donc, pour y revenir, nous voulons agrandir légèrement le logo. Et ce que nous voulons faire, c'est travailler avec des pourcentages de ces conteneurs contenant le logo et le menu, en sélectionnant le logo lui-même. Remplaçons ces unités en pourcentages. Et sélectionnons également les conteneurs qui contiennent le menu et changez-les en pourcentage. Et maintenant, faisons en sorte qu' ils soient de 20 %. Et je pense que c'est une mise à jour de bonne taille. Maintenant, si nous prévisualisons les modifications, je pense que c'est une meilleure taille qu'auparavant. y revenir, passons à la version mobile. En cliquant dessus, vous remarquerez maintenant que le logo et le menu sont empilés, mais nous les voulons côte à côte. Donc, pour l'instant, il s'agit simplement de jouer avec les pourcentages. Nous pouvons donner au logo peut-être 50 % de la largeur de ce contenant extérieur. Et, bien sûr, donne 50 % à ces autres contenants. Qu'en est-il de 149 % ? Je pense qu'il faudrait peut-être donner 30 % au logo. Et cela nous permet de lui donner 70 %. Réduisons le pourcentage jusqu'à quelque part. Mettez-le à jour. Et prévisualisons les modifications. Et passons à n'importe quel téléphone portable que nous voulons ici, peut-être le Pixel 5. Voilà à quoi ça ressemble sur un pixel 5. Regardons l'iPhone Pro, l'iPhone 12s Pro. Voilà à quoi cela ressemble sur un iPhone 12. Nous élargissons cela. Voilà à quoi ça ressemble. Ce sont des icônes de réglage. Le logo est visible sur un téléphone réel. Et en gros, nous en avons terminé avec les paramètres du mode réactif pour l'en-tête. Dans la leçon suivante, nous allons voir comment rendre le corps principal de la page de destination réactif. Je te verrai donc bientôt. 22. Sections du corps réactives: Nous venons donc de terminer de travailler sur la réactivité de l' en-tête ou de la barre de navigation, et nous en avons terminé. Ensuite, nous voulons travailler sur la réactivité du corps lui-même. Donc, si je vais dans le menu et que je clique sur Accueil, nous pouvons ouvrir la page d'accueil. Voici à quoi cela ressemble actuellement avant que nous ne fassions quoi que ce soit. Comme vous pouvez le constater, nous n'avons pas vraiment beaucoup de travail à faire sur cette page. En fait, cela ne prendra que quelques minutes. Permettez-moi donc de m'éloigner des paramètres du mode réactif et de fermer les outils de développement. Passons maintenant à Modifier avec Elementor. Maintenant, nous éditons la page comme ça. Permettez-moi donc d'entrer ici où nous étions en train de modifier l'en-tête et de le fermer. Il ne nous reste donc que ça. Et puis, comme toujours, cliquez sur l'icône du mode réactif ici. Et passons en mode tablette. Voilà à quoi ça ressemble sur tablette. Commençons par sélectionner le conteneur qui contient le bloc de texte et l'image. Et je pense que c'est ça. Je n'arrive pas à le sélectionner. Je vais donc passer à Control I pour faire apparaître le navigateur. Et maintenant, ce conteneur est le conteneur le plus haut de la section des héros. Et à l'intérieur, il y a le contenant que nous recherchons. Ce contenant. Et à l'intérieur de ce conteneur, nous avons les deux conteneurs. Celui-ci contient le bloc de texte et celui-ci contient l'image. Sélectionnez donc ce conteneur. Maintenant, c'est sélectionné. Rentrons à l'intérieur de manière plus avancée. Brisons d' abord cette marge pour la réduire. Et laissez-moi sélectionner ces textes. Et réduisons la taille en entrant dans la typographie de style. Je pense que c'est une bonne taille. Pour les boutons. Je pense que nous pouvons les empiler les uns sur les autres. Je vais donc sélectionner le contenant contenant les boutons. Ensuite, pour la direction, je vais passer à la colonne verticale, comme ça. Ensuite, alignons-les dès le départ. Jusqu'au début. Juste comme ça. Mise à jour. Maintenant, je pense que nous avons trop de marge ou rembourrage autour de ce contenant intérieur. Alors, sélectionnez-le. Quels sont les paramètres ici ? À propos du contenant extérieur ? Poids ? Nous devons sélectionner cela. Et dans la mise en page. Faisons en sorte que ce soit 100  %, pas des cellules de combat. Je pense que c'est une bonne taille. 90 %. Mettez-le à jour. Et je l'aime bien comme ça. Mais bien sûr, si vous souhaitez agrandir l'image, vous pouvez également décider de les empiler au lieu de les placer côte à côte. Vous pouvez donc sélectionner ce conteneur extérieur contenant le conteneur d'images et le conteneur de textes. Et pour la direction, passez à celle-ci. Sélectionnez ensuite ce conteneur. Passez à 100 %, 100 % comme ça. Et pour l'image, changez également cela en pourcentage, 100 % comme ça. Tout dépend donc de votre créativité et différentes personnes auront des paramètres différents pour leurs pages de destination. Je pense que ça a déjà l'air bien. Mais bien sûr, si vous souhaitez y apporter des modifications, vous pouvez simplement sélectionner l'éditeur de texte lui-même. Passez au style. Par exemple, je souhaite modifier la topographie, la hauteur de la ligne. Je pense qu'ils sont trop proches l'un de l'autre. Comme ça. Je pense que cela semble déjà une bonne chose, mais nous pouvons réduire la taille de cette rubrique. Typographie de style. Réduisons-le à peut-être 45. Et tout le reste semble bon. Je vais à l'intérieur. Vous pouvez également sélectionner ce style typographie dans la taille de texte 45, comme l'autre. Et comme c'est trop près du bord, je vais sélectionner le contenant extérieur. Rembourrage avancé. Pour la gauche. C'est le droit. On peut lui en donner 20. Et pour la gauche, 20. Cela poussera donc tout vers l'intérieur à partir du bord. Je pense que ça a l'air bien aussi. Vous pouvez sélectionner ce style de typographie. La taille 45 est correcte. Nous pouvons également travailler sur le rembourrage comme nous l'avons fait avec celui-ci. Maintenant. Ici, la solution est très simple. Il suffit d'entrer dans chaque conteneur de service, comme celui-ci, et de tout empiler de haut en bas, comme ça. Ensuite, sélectionnons le texte ici. Alignez-le au centre, description, style, centre d'alignement. Répétons la même chose pour ces autres services. Voici donc la direction du conteneur, haut en bas, au centre, au centre aligné. Sélectionnez la direction du service. C'est presque fini. Direction de haut en bas, centre, centre du style. Et enfin, direction de haut en bas, centre, centre. Génial. Et maintenant, ce texte est également trop près des bords. Revenez donc ici, sélectionnez le conteneur qui contient tout ce qui est avancé. Et allons-y et changeons le rembourrage à gauche et à droite. Nous avons donc maintenant un bel espacement. Eh bien, nous pouvons également réduire la taille de cette rubrique. 245 pour l'uniformité. Témoignages, 45 également. Sélectionnez un contenant qui les contient. Rembourrage avancé pour les gauchers, les 20, les droitiers ? Ça a l'air bien. Et en gros, c'est tout. Oh, nous pouvons sélectionner l'en-tête de cette section de héros et le placer au centre. Juste comme ça. Ensuite, le centre de style de texte. Et nous pouvons également sélectionner les boutons, conteneur et tout pousser vers le centre, aligner les éléments au centre, comme ça. Mise à jour. Et prévisualisons les modifications. Alors maintenant Control Shift. Je le lui ai ensuite dit. Passons à l'iPad Air, et voici à quoi cela ressemble sur un iPad Air. Je pense que tout a l' air génial. Si nous passons à un téléphone portable. Passons à la suite. Passons à l'iPhone 12. Je le pense déjà, je pense qu'il a déjà l'air bien même si nous ne l'avons pas touché. Et je vous laisse le soin d'apporter les modifications ou améliorations que vous jugerez nécessaires à la version mobile. Mais je pense que ça a déjà l'air bien. Il a hérité des paramètres que nous avons définis pour la tablette. Alors, bien sûr, si nous faisons défiler la page jusqu'au dossier, vous remarquerez un certain désalignement, et c'est ce sur quoi nous travaillerons dans la prochaine leçon. Je te verrai donc bientôt. 23. Pied de page réactif: À l'heure actuelle, nous sommes ici dans le dossier. Nous avons juste besoin de faire quelques ajustements et nous en avons terminé avec le pied de page. Donc, sans perdre de temps, désactivons cette icône ici et fermons les DevTools. Et puis, bien sûr, passez la souris dessus et cliquez sur Dossier pour modifier l'aliment lui-même. Et c'est ici que nous avons édité le contenu principal. Arrêtons-le, car nous avons enregistré les modifications. Maintenant, c'est ici que nous éditons le dossier. Cliquez à nouveau sur l'icône du mode réactif. Et passons à la tablette. Dès le départ. Voilà à quoi ça ressemble. Si nous sélectionnons ce conteneur qui contient les liens rapides et que nous y accédons en mode avancé, vous remarquerez que nous héritons de ce remplissage à 100 % gauche du mode bureau. Juste comme ça. Donc, pour en revenir à l'intérieur de la tablette, arrêtons ces saisies. Cela réinitialise tout et nous pouvons définir les valeurs souhaitées pour la version tablette. Mais si nous revenons au mode bureau, il en a toujours une centaine. Revenons donc à l'intérieur de la tablette. Voyons donc ce que nous pouvons faire ici. Si je sélectionne ce conteneur qui contient les liens, que je vais dans la direction et que tout recommence depuis le début. Nous avions un peu de rembourrage ou de marge à ce sujet. Donc, en sélectionnant cette option avancée, oui, nous avions une marge de 50. Si nous supprimons cela, nous avons ces deux ensembles de liens. Je pense que maintenant ça a l'air beaucoup mieux. En fait. Si je sélectionne le logo lui-même, je vais à l'intérieur, style, je peux augmenter la largeur jusqu'à ce point de mise à jour. Et prévisualisons les modifications. Bien sûr, nous devons contrôler Shift I , puis l'activer. Voilà à quoi cela ressemble sur les téléphones portables. Mais qu'en est-il de l'iPad Air ? Voilà à quoi ça ressemble sur iPad Air, je pense que ça a déjà l'air bien. Passons à l'iPhone Pro. Je pense que cela a également l'air génial sur iPhone ou sur les écrans mobiles. Nous n'avons donc pas vraiment besoin d'apporter modifications en ce qui me concerne. Mais juste au cas où vous souhaiteriez apporter des modifications à la version mobile, il vous suffit de cliquer sur cette icône ici. Et par exemple, si vous souhaitez tout centraliser. Nous allons donc sélectionner cette image. Contenu, alignez-le au centre. Sélectionnez ce style de texte, alignez-le au centre. Sélectionnez ce contenant ici. Disposition. Alignons tout au centre. Il s'agit également d'un autre conteneur. Alignez le tout au centre. Sélectionnez ce contenant ici. Alignez le tout au centre. Et maintenant, vous avez un autre réglage. Mais je vais entrer dans cette histoire et revenir là où nous en étions il y a un instant. Je pense que c'était juste là. J'aime bien ce décor. C'est ici que vous pouvez consulter tous les mouvements que vous avez effectués depuis que vous avez commencé à modifier. Contenu sur la page ou sur n'importe quel éditeur. Et comme vous pouvez le voir, c'est le plus ancien, montage a commencé et c'est le dernier changement que nous avons apporté. Nous pouvons remonter le temps et rétablir l'état des choses d'il y a un moment. Je voulais entendre cette mise à jour. Prévisualisons les modifications. Et voilà à quoi ça ressemble. Alors, bien sûr, vous pouvez faire bien plus. Il s'agit simplement d'un flux de travail pour démarrer. Plus vous utilisez Elementary, plus vous serez créatif, plus vous découvrirez différentes manières d'obtenir les mêmes résultats. C'est donc à vous de continuer à vous entraîner à vous améliorer et à comprendre comment utiliser toutes les fonctionnalités de cet outil génial. Alors sortons de cette zone. Je vais juste en parler et le fermer. Pour en revenir à notre éditeur. En fait, laissez-moi sortir d' ici parce que nous allons bien maintenant. Ou prévisualisons les modifications, puis cliquez sur Accueil. Eh bien, laissez-moi simplement supprimer cela et accéder à la page d'accueil Control Shift. Je l'active pour que nous puissions l'examiner de haut en bas. Tout d'abord, avant de faire défiler la page, ouvrez le menu. Voilà à quoi il ressemble. Évadez-vous. Faites défiler l'écran vers le bas. Et nous y voilà. Passons donc en mode tablette, iPad Air. Voilà à quoi ressemble la nourriture sur iPad. Défiler vers le haut. Maintenant, j'y vais pour le regarder depuis la version de bureau. Donc, en gros, c'est comment créer cette page de destination Comme indiqué à la classe, mon intention était de vous montrer comment utiliser les conteneurs pour créer une belle page de destination. Les conteneurs sont la toute nouvelle façon de créer des pages Web à l'aide d'Elementor. Vous pouvez toujours utiliser le flux de travail en sections et en colonnes que j'ai enseigné dans tous mes cours élémentaires précédents, que vous pouvez consulter en visitant mon profil. Maintenant, avant de conclure, j'ai quelques autres conseils importants à partager avec vous. Et puis on appelle ça une enveloppe. Je te verrai donc dans l'outro. 24. 24 réflexions finales: Félicitations, vous avez enfin atteint la fin du cours, ce qui signifie que vous avez terminé de créer votre page de destination. Je veux juste prendre un moment et vous remercier de m'avoir rejoint dans ce cours sur la création de pages de destination avec Elementor. Et j'espère sincèrement que vous avez trouvé le contenu utile et instructif et que vous avez acquis de précieuses compétences que vous pourrez appliquer à vos propres projets de développement Web. Maintenant que vous avez appris à créer une belle page de destination avec Elementor et, par extension, beau site Web avec Elementor. Il est important que vous vous assuriez qu'il est convivial pour le référencement. Vous devez faire plusieurs choses pour que vos pages de destination et vos sites Web soient visibles pour les moteurs de recherche , car c'est ainsi que vous serez découvert. Par exemple, vous avez dû remarquer que lorsque nous téléchargions des images depuis notre ordinateur vers la médiathèque WordPress, nous avions des champs de texte que nous ne prenions pas la peine de remplir. Mais ces champs de texte sont très importants pour votre référencement. Vous devez fournir des détails tels que le texte alternatif pour rendre les images plus accessibles rendre la page plus conviviale pour le référencement. Un autre exemple est que nous avons utilisé des titres sur notre page de destination, mais nous n'avons pas défini de hiérarchie pour ceux-ci. À partir de 1 jusqu'à la H6. Il est très important que vous compreniez comment utiliser les titres manière hiérarchique pour une meilleure structure de page, ce qui améliore votre référencement. Et ce n'est que la pointe de l'iceberg en ce qui concerne les actions et les étapes nécessaires à la visibilité des moteurs de recherche. Si vous souhaitez en savoir plus sur le référencement WordPress, j'ai un cours complet étape par étape à votre disposition sur mon profil ici. Et je vous recommande vivement de le suivre immédiatement après ce cours afin comprendre ce que vous devez faire vos futurs sites Web pour les rendre plus visibles. Enfin, si vous avez trouvé ce cours utile, j'apprécierais beaucoup vos commentaires. Veuillez prendre une minute pour laisser un avis sur le cours afin d'aider les autres futurs étudiants savoir à quoi s'attendre de moi et de m'aider à améliorer mes futurs cours. Qu'avez-vous apprécié dans ce cours ? Comment se passent les leçons ? Le professeur était-il captivant ? Pour laisser votre avis, cliquez simplement sur l'onglet Révision situé sous ce lecteur vidéo Cela vous prendra moins d'une minute. Encore une fois, merci d' avoir suivi le cours et j'espère vous voir très bientôt dans mes autres cours. Jusqu'à la prochaine fois. Prends un bon une-pièce.