Concevoir une page de destination animée à thème sombre avec Elementor (plugin gratuit)

1. Introduction: Bienvenue dans une autre classe élémentaire géniale avec moi, est-ce que Besser peut être un expert WordPress, et j'utilise Elementor pour construire mes pages Web depuis 4,5 ans. Et j'aime montrer aux gens comment utiliser ces mêmes compétences créer des pages de destination pour leurs sites Web et pour leurs clients. Dans ce cours, je vais vous apprendre à concevoir une page de destination photographe. Donc, si vous êtes photographe et que vous voulez savoir comment créer une page de destination pour votre site Web. Ce cours est fait pour vous, mais juste au cas où vous n'êtes pas photographe, mais que vous aimeriez quand même apprendre à utiliser Elementor pour créer de superbes pages de destination. Ce cours est fait pour vous. Lorsque vous aurez terminé ce cours, vous aurez acquis les compétences nécessaires pour créer des pages de destination de classe mondiale à l'aide d'Elementor. Donc, sans perdre plus de temps, permettez-moi de vous montrer la page de destination que vous allez concevoir en classe, puis commencer. Juste trois. C'est donc ce que nous concevons. Si vous êtes prêt et excité à commencer, je le sais. Plongeons directement dedans. 2. Installation du thème: La première chose que nous voulons faire est sauter dans notre tableau de bord et d'installer le thème qui contrôlera l'apparence de notre site Web. Et le thème est la chose qui définit apparence et le fonctionnement de votre site Web. Allons donc dans le tableau de bord et si vous voulez en savoir plus sur le thème, Cisco à l'avance et cherchons des tutoriels sur ce qu'est un thème WordPress sur YouTube ou simplement Google. Dans notre tableau de bord, nous voulons donc entrer dans les thèmes d'apparence. Et par défaut, lorsque vous installez WordPress pour la première fois, un thème par défaut sera installé. Et selon l'année, la douleur recevra le nom de la même année. Donc en ce moment, nous sommes en 2020 un, mon thème est 2021, mais vous avez aussi 2019 et 2020 disponibles pour vous juste au cas où vous voudriez les utiliser. Mais ce que nous voulons faire, c'est installer un autre thème appelé Astra. Et comme vous pouvez le constater, Astra est l'un des thèmes énumérés ici pour moi car c'est l'un des thèmes que j'utilise le plus. Il doit être parmi les meilleurs pour moi. Mais juste au cas où vous ne pouvez pas le voir, allez-y et tapez Astra ici dans la barre de recherche. Override Astra. Je vais donc l'installer vendredi. Allons de l'avant et activons. Cliquez donc sur Activer. Et maintenant, notre thème actif est Astra, comme vous pouvez le voir ici dans cette fenêtre contextuelle. Et ils ont ce message qu'Astro est livré avec n'est pas si prêt à utiliser des modèles de démarrage et tout ça. Mais nous apprenons à créer nos propres pages Web à partir de zéro. Je fermerai ce message et je fermerai ce message juste là. Maintenant que le thème Astra nous a été vendu et activé, si nous sommes prêts à entendre parler d'Elementor, nous sommes prêts à installer elementor et à avoir une vue d'ensemble de l'espace de travail élémental. Nous allons donc le faire dans la prochaine classe. Je vous verrai bientôt. 3. Mise à jour rapide - l'assistant de configuration d'élément: Bon retour parmi nous. Maintenant, cette leçon est une brève remarque ou une mise à jour rapide du processus d'installation d' Elementor. Si vous suivez ce cours en mai 2022 et au-delà, vous remarquerez que l'activation d' Elementor dispose désormais d' un assistant de configuration composé de plusieurs étapes que vous devez suivre pour configurer les éléments de base de votre site Web. Alors que je créais ce cours il y a plusieurs mois, Elementor ne disposait pas de cet assistant de configuration. Je veux juste que nous utilisions cet assistant de configuration. Mais tout ce que tu apprends dans ce cours ne change pas. C'est toujours le même processus. Le seul ajout est l'assistant de configuration. Comme vous pouvez le voir en ce moment, j'ai une toute nouvelle installation de WordPress et nous en sommes à la version 6. Et ce que je veux faire, c'est aller dans Plugins, Ajouter un nouveau. Nous pouvons donc ajouter Elementor et suivre ce processus. Je vais maintenant rechercher l'installation d'Elementor. Et maintenant, lorsque je clique sur Activer je suis redirigé vers cet assistant de configuration. Et nous pouvons le faire ensemble. sommes donc là. Je vais juste effectuer un petit zoom arrière afin que nous puissions voir plus de détails. accord, vous remarquerez maintenant que la première chose qu' Elemental veut que nous fassions maintenant est de créer un compte pour tirer le meilleur parti d'Elementor. Voici donc quelques-uns des avantages de la création d'un compte chez Elementor. Mais le fait est que vous n' avez pas besoin d'un compte Elementor pour utiliser Elementor. Je vais donc simplement sauter cette partie. La deuxième étape est d'accepter, de continuer avec le thème sacré qu' Elementor a créé pour nous. Ceci est fait par Elementor, mais nous utilisons le thème Astra, donc nous allons de l'avant et sautons. Astra est un thème plus puissant. La troisième étape consiste à donner un nom à notre site Web. Pendant que vous installiez votre WordPress. Vous avez donné un nom au site Web. C'est le nom qui apparaîtra ici. Mais cela nous donne la possibilité de changer le nom pour n'importe quel autre nom que nous voulons. Mon site Web, puis cliquez sur Suivant. Et si vous avez un logo pour votre site Web et que vous souhaitez l' ajouter dès maintenant à l'avance. Vous pouvez simplement ouvrir la médiathèque et la sélectionner dans la médiathèque ou la télécharger depuis votre ordinateur. Mais nous n'allons pas le faire pour l'instant. Je vais donc simplement continuer cette étape. Et bien sûr, nous pouvons ajouter le logo plus tard et je vais vous montrer comment procéder. Cliquez sur Ignorer. Et maintenant, nous arrivons à la toute dernière étape où nous avons deux options. Nous pouvons commencer à modifier notre page d'accueil à partir d'une toile vierge avec l'éditeur Elementor. Nous pouvons également parcourir des centaines de modèles ou importer nos propres modèles si nous en avons. Mais je vais y aller et sauter. Ça. Sera redirigé vers le canevas où nous pouvons maintenant commencer à créer un site Web. Et on y va. En gros, c'est tout ce que je voulais vous montrer. C'est une nouvelle mise à jour. Elle n'y était pas il y a quelques mois. Maintenant, c'est là. Mais tout le reste dans les leçons à venir reste le même. Le processus reste le même pour créer une landing page. Donc, sans perdre plus de temps, passons à la leçon suivante. Je vais accéder au menu de ce burger et cliquer sur Quitter le tableau de bord. Quittons cette page. Nous sommes maintenant dans le tableau de bord et nous sommes prêts à commencer à créer le site Web. 4. L'aperçu de l'espace de travail Elementor: Bienvenue de retour. Dans la leçon précédente, nous avons installé et activé le thème Astra. Nous sommes maintenant prêts à installer Elementor et avons un aperçu rapide des éléments de l'espace de travail. Nous pouvons donc nous familiariser avec les outils et fonctionnalités que nous traitons lorsque nous construisons notre page de destination. Allons-y et faisons-le. Installons Elementor. Je vais donc aller à l'intérieur, je vais juste aller de l'avant et cliquer sur les plugins pour commencer. Et comme il s'agit d'une toute nouvelle installation de WordPress, je dois déjà installer des plugins par défaut. Je vais donc aller de l'avant et les sélectionner tous les deux. Et dans ce menu déroulant, je vais sélectionner Supprimer, puis appliquer cela. Supprimons-les. Et maintenant, nous avons une ardoise propre à travailler. Je vais donc cliquer sur Ajouter un nouveau. Et nous serons redirigés vers le dépôt de plugins WordPress où nous pourrons rechercher Elementor. Il devrait s'agir du premier résultat ici avec plus de 5 millions d'installations actives. Je vais cliquer sur Installer maintenant. Et vous remarquerez que nous avons nombreux autres plug-ins ici qui portent le nom Elementor. Alors pourquoi est-ce que c'est ça ? D'autres développeurs peuvent créer des fonctionnalités, outils et des fonctionnalités pour étendre la puissance d'Elementor. Et ces gars l'ont fait parce que, comme vous pouvez le constater, Elementor lui-même est créé par Elemental.com, mais ces autres plugins tiers sont développés par des développeurs tiers. Nous utiliserons donc certains de ces plugins ici au fur que nous construisons notre page de destination, et vous apprendrez à savoir quel plug-in joue, quelle ligne. Activons Elementor maintenant qu'il est installé. Très bien, donc maintenant nous n'avons qu'un seul plugin installé et Elementor. allons donc créer une page afin que nous puissions ouvrir l'espace de travail élémentaire. Je vais donc entrer dans les pages, toutes les pages. Et comme je l'avais mentionné, il s'agit d'une toute nouvelle installation de WordPress. Je dois donc les pages par défaut déjà créées ici, mais je n'ai pas besoin de ces deux-là, donc je vais les sélectionner deux. Et dans ce menu déroulant, je vais passer à la corbeille et l'appliquer. Maintenant, nous n'avons pas de page, donc je vais dire Ajouter un nouveau. Et nous pouvons donner un nom à notre page. Disons donc chez nous. Supposons donc qu'il s'agisse de notre page d'accueil. Ici, à l'extrême droite. Sous Modèle, je vais sélectionner dans le menu déroulant Elementor pleine largeur. Ensuite, je vais cliquer sur Publier. Et maintenant, notre page est publiée. Et maintenant que notre page est prête, cliquons sur Modifier avec Elementor qui sera redirigé vers le front de page où nous allons modifier la page. Nous sommes donc au front end. Et lorsque nous modifions la page, c'est exactement à quoi elle ressemblera. Nous sommes donc en train de modifier la page et de voir les résultats en temps réel. À l'extrême gauche, juste ici, nous avons ce volet inférieur juste ici. Cette partie inférieure présente quelques options. Nous avons le bouton de mise à jour lorsque nous effectuons des modifications ici, nous cliquerons sur Mettre à jour. Et nous allons cliquer sur l'icône d'aperçu des modifications ici pour afficher la page avec les modifications et sans ces outils. Et ici, nous avons le mode responsive. C'est ici que nous cliquerons lorsque nous voulons rendre notre page réactive à différentes tailles d'écran, smartphones, tablettes et ordinateurs de bureau. Et nous le ferons au fur mesure que nous rendrons cette page de destination réactive. Et la prochaine chose ici est la zone historique où nous aurons une liste de tous les mouvements effectués, de tous les changements que nous avons apportés au fur et à mesure que nous ajoutons des éléments à notre page dans cette session. Par exemple, si j'ajoute une section à double colonne comme celle-ci, puis j'ajoute peut-être une section à triple colonne comme celle-ci. Nous avons maintenant deux choses ajoutées. Donc, si nous entrons dans l'historique, vous remarquerez que nous avons d'abord ajouté cette section, puis que nous avons ajouté cette section. Et nous pouvons cliquer ici pour revenir au moment où nous n'avions que cette section. Il s'agit donc d'une zone de voyage dans le temps où vous pouvez vous rendre à n'importe quel moment précis où vous avez subi certains changements, alors que certains éléments ne ressemblaient dans le temps où vous pouvez vous rendre à n'importe quel moment précis où vous avez subi certains changements, que d'une certaine manière. Et nous verrons à quoi servent toutes ces autres options. Mais la partie interagira le plus avec ce domaine ici. Et c'est le domaine qui nous fournit tous les outils et fonctionnalités que nous voulons ajouter, tous les éléments que nous voulons ajouter à notre site Web. Par exemple, si Alco a réduit ce panneau, vous remarquerez que nous avons un autre panneau qui indique Pro. Les outils du panneau Basic sont donc gratuits. Si nous réduisons cela et que nous allons à l'intérieur du panneau, vous remarquerez qu'ils ont le petit verrou juste ici pour montrer que ces outils ne peuvent pas être glissés et déposés là-dedans lorsque vous essayez de faire glisser, il y aura cette fenêtre contextuelle qui dit que vous en avez besoin, vous devez avoir la version pro d' Elementor pour pouvoir les utiliser. Et puis, nous allons nous effondrer. Ensuite, nous avons plus sous le général et de nombreux autres outils intégrés sous tous ces panneaux. Nous allons donc travailler avec les panneaux qui ont les éléments libres car ils sont largement suffisants pour réaliser les choses dont nous avons besoin pour réaliser cette page de destination ici. L'autre chose que je voulais mentionner ici, c'est que lorsque nous ajoutons des plugins, souvenez-vous des plugins tiers que nous avons ajoutés, laissez-moi entrer dans le tableau de bord et passons à l'intérieur des Plugins. Disons « Ajouter un nouveau ». Permettez-moi de chercher l'élémentaire. Souvenez-vous donc de ces plugins tiers nous venons de parler. Si nous installons un plugin tiers créé pour étendre la puissance d'Elementor, comme les modules complémentaires essentiels pour Elementor, et nous l'installerons ultérieurement. Il apparaîtra ici en tant que panneau. Les modules complémentaires indispensables pour l'élémentaire, nous vous présenterons avec tous les outils supplémentaires qu'il apporte dans Elementor. Et vous constaterez que certaines de ces fonctionnalités gratuites avec ce nouveau plugin sont répertoriées ici dans la version Elementor Pro. Alors qu'Elementor lui-même charge ces outils, ces gars auront créé outils qui font la même chose, mais fournis gratuitement. Et autre chose, disons que nous sommes à l'intérieur. Nous sommes ici et nous sommes en train de modifier des choses et nous voulons ajouter quelque chose. Nous voulions faire glisser un outil, un élément à partir d'ici, mais nous ne pouvons pas le voir car pour le moment où nous avons ces paramètres pour cette section, nous pouvons aller de l'avant et cliquer sur ce menu juste là. Et cela va faire apparaître ces panneaux dotés d'outils. Ainsi, chaque fois qu'il ne peut pas voir ces outils, cliquez sur cette minuscule icône juste ici et les outils apparaîtront. Ensuite, ici, nous avons d'autres paramètres avec lesquels nous pourrons interagir au fur et à mesure que nous progressons. Il s'agit donc d'un aperçu rapide de l'espace de travail élémentaire. Et pour commencer à créer une page Web, il suffit de créer une section avec Elementor. Les sections sont structurées en fonction des différents cas d'utilisation courants. Nous pouvons donc avoir une double colonne comme celle-ci. Et maintenant, il s'agit d'une section à deux colonnes. Les colonnes sont délimitées par ces lignes noires brisées. Et la section est délimitée par cette bordure bleue. Et nous pouvons redimensionner et nous pouvons simplement faire glisser les colonnes pour les redimensionner si nous le voulons. Et nous pouvons également cliquer avec le bouton droit de la souris et dupliquer une colonne. Et maintenant, nous avons trois colonnes. Pour commencer à ajouter des éléments à l'intérieur d'une page Web, il suffit de cliquer sur ce signe plus juste là ou de cliquer sur ce bouton pour afficher les outils. Donc, si je clique, cela révélera les éléments et nous pouvons maintenant commencer faire glisser un par un. Et maintenant, lorsque nous avons un élément actif, comme en ce moment, c'est l'image que nous modifions est le nom de l'élément qui apparaîtra ici. Quel que soit l'élément sélectionné ici , c'est l'élément qui apparaîtra ici. Donc, si je sélectionne cette section, nous sommes en train de modifier la section. Si je sélectionne cette image, nous sommes en train de modifier l'image, ce qui signifie que ces paramètres correspondent à l'image ou à droite n'est donc qu'un aperçu rapide des éléments de l'espace de travail. J'espère que vous connaissez maintenant certains des outils et fonctionnalités d'Elementor avec lesquels interagira. Mais bien sûr, vous comprendrez comment utiliser la plupart de ces autres choses que nous n'avions pas touchées lorsque nous construisons une page de destination, car c'est en fait la raison pour laquelle nous avons cette classe dans la première place pour que vous puissiez vous habituer à travailler avec Elementor. La prochaine chose que nous voulons faire maintenant, si je pouvais passer à notre point de référence c'est construire la barre de navigation. Et la barre de navigation est composée de deux éléments : le logo et le menu du site Web. Commençons donc par ajouter le logo du site Web. On va le faire dans la prochaine classe. Je vous verrai bientôt. 5. Ajouter le logo de site Web: Bienvenue à une autre leçon géniale. Il est donc temps d'ajouter la barre de navigation de notre site Web. Et nous voulons commencer par notre logo. Mais voici le truc. Nous devons ajouter un plugin qui nous aidera à créer ces Napa car ce sera un élément autonome uniquement de l'espace. Nous voulons donc installer un plugin. Nous allons donc passer à l'intérieur des plug-ins du tableau de bord. Les plugins ajoutent une nouvelle recherche pour Elementor. Et cela va faire apparaître ces plugins liés aux éléments ici. Et nous sommes à la recherche d'un générateur de dossiers d'en-tête pour Elementor donc ou l'année ici, générateur de pieds de page d'en-tête Elementor est dit maintenant. Et nous allons activer cela. Maintenant, le générateur d'en-tête et de pied de page Elementor est activé et nous pouvons y accéder via l'apparence. Les éléments sont le générateur d'en-tête et de pied de page. Allons de l'avant et cliquons dessus. Et comme nous n'avons pas encore créé d'en-tête ou de pied de page, nous n'avons pas de liste ici, alors continuons et créons, Add New. Et on peut sauter ça. Nous n'avons pas besoin de cela. Et nous allons donner un nom à notre en-tête de navigation. Allez-y et appelons-le, appelons-le comme vous voulez. Je vais juste appeler ça mon nav. C'est un bar de navigation. Et nous avons toutes ces options devant nous. La prochaine chose que nous voulons faire est de sélectionner le type de modèle. C'est un en-tête. Et cela fera apparaître ces options ici , sous l'écran. Où devrions-nous décider si nous voulons que la barre de navigation soit affichée sur l'ensemble du site Web, quelle que soit la page Web qui vous appartient, vous êtes censé être en mesure d'avoir la barre de navigation dans les principaux rôles d'utilisateur. Allons de l'avant et disons tout. Cela signifie que si vous êtes administrateur et que vous avez des personnes sous vos ordres qui modifient également le site Web. Vous pouvez restreindre qui peut modifier votre barre de navigation afin que n'importe qui puisse la modifier. Je vais le laisser du tout. Et puis voyons, ici à l'extrême droite, je veux aller à l'intérieur du modèle, les défauts changent cela en Elementor pleine largeur. Et sous les paramètres Astro, je veux aller en dessous de la barre latérale et dire pas de disposition de contenu de la barre latérale, étirée en pleine largeur. Et désactivons ces paramètres par défaut fournis avec Astra primaire et disons Publier. Maintenant, notre barre de navigation est publiée. Nous voulons aller au front end et commencer à le construire pour ressembler à cela. Ce que nous devons faire, c'est de cliquer sur Modifier avec Elementor. Mais avant de faire cela, je veux juste entrer dans l'apparence Elementor, générateur d' en-tête et de pied de page. Et vous remarquerez que maintenant nous l'avons répertorié ici. Nous venons de le créer et maintenant il est répertorié sous notre plugin. Donc, si je clique sur Modifier, nous reviendrons cette page et nous pourrons toujours apporter des modifications à ces paramètres. Ensuite, nous allons cliquer sur Modifier avec Elementor. Et maintenant, nous avons été amenés à l'avant où nous pouvons maintenant commencer à construire la barre de navigation. Allons donc à l'intérieur, disons Add New et nous ajouterons une section à double colonne. Et maintenant, nous pouvons faire glisser cette colonne pour qu'elle soit plus petite que la colonne de droite , car bien sûr, cette colonne est plus longue que la colonne de logo. En revenant ici, je cliquerai sur ce signe plus. Ensuite, nous allons faire glisser un élément d'image là-dedans. Et maintenant, nous pouvons mettre notre logo ici. Et rappelez-vous, parce que c'est notre élément actif c'est celui que nous modifions ici et que nous pouvons cliquer dessus et ajouter notre logo. Et comme aucune image n'a encore été ajoutée, je vais sélectionner les fichiers de téléchargement et sélectionner des fichiers. Et j'avais déjà préparé ce dossier de ressources ici. Si vous l'ouvrez, il contient tous les éléments utilisés sur le site Web. Cela signifie inclure des images. Toutes les images sont là. Juste si vous voulez suivre, vous pouvez utiliser les mêmes images que celles utilisées dans mon travail. Nous avons également les résultats finis ici. Vous pouvez donc importer ces pages de destination et elles ressembleront exactement à notre terrain, notre page de destination finale et nous avons le logo. Je vais donc importer le login pour le moment. Double-cliquez dessus. Et maintenant qu'il est importé, je vais cliquer sur Insérer un média. Et maintenant, notre image est importante, mais parce que cette moitié du nom est blanche, nous pouvons le voir pour l'instant. Faisons donc quelque chose à propos de la couleur d'arrière-plan. Je vais donc d'abord mettre à jour ça. Et maintenant, allez dans ce menu de hamburgers. Cliquez sur les paramètres du site du menu Burger. Et je vais rentrer à l'intérieur. Arrière-plan, type d'arrière-plan. Cliquez sur ce bouton. Et dans cette petite boîte ici, il suffit de le faire glisser et de changer la couleur d'arrière-plan en noir, puis de le mettre à jour. Alors maintenant, tout le site Web a un fond noir. Fermez cette zone bleue et revenez à notre zone d'édition. Remplacer. Nous allons donc prévisualiser les modifications. Dans. C'est à quoi ressemble notre logo. La prochaine chose que nous voulons faire est d'ajouter notre menu de navigation de site Web, et nous le ferons dans la prochaine classe. Je vous verrai bientôt. 6. Ajouter le menu nav: Bienvenue de retour. Il est maintenant temps d'ajouter un menu de navigation de site Web. Donc, revenez à l'intérieur de notre espace de travail ici. Donc, ce que nous voulons faire, c'est aller dans cette boîte et cliquer sur le signe plus juste là. Et ici, nous allons taper nav. Et nous avons quelques options de navigation ici. Mais rappelez-vous l'un des plugins, nous venons d'installer le générateur de pieds de page d'en-tête IIS pour Elementor, et c'est pour ça que HF est là. Nous allons donc faire glisser ça et le déposer juste là. Nous nous attendons maintenant à voir un menu, mais il n'y a pas de menu. Prévisualisons donc cela pour voir les changements. Pas de menu ici. Alors, que se passe-t-il ? Eh bien, c'est toujours sélectionné. Si vous regardez cette zone ici, vous remarquerez qu'il n'y a pas de menus sur votre site. Accédez à l'écran des menus pour en créer un. Nous devons donc entrer dans le tableau de bord WordPress, créer un menu que nous afficherons dans cette boîte ici. Ce que je veux faire, c'est dans un autre onglet, aller dans le tableau de bord. Je vais donc cliquer dessus, revenir à l'intérieur du tableau de bord pendant que cet onglet est toujours ouvert. Et je veux entrer dans les menus d'apparence. Et maintenant, ici, vous remarquerez que la première chose en haut, c'est le menu d'édition du menu. Créez votre premier menu ci-dessous. Et nous pouvons aller de l'avant et créer un menu. Donnons un nom. Mon menu. Et faisons de ce menu le menu principal, puis le menu Créer. Voici comment créer un menu WordPress, qui peut ensuite s'afficher en frontal. Et remarquez maintenant que le menu est prêt, il est écrit Ajouter des éléments de menu à partir de la colonne de gauche, cette colonne juste ici. Ce sont nos options de menu. Il s'agit des éléments de menu 1, 2, 3, 4, 5, 6 éléments de menu. Ensuite, ici, les éléments de menu peuvent être des pages Web, il peut s'agir de billets de blog, liens personnalisés que vous avez créés. Il peut s'agir de catégories de contenu. Nous avons donc besoin de créer n' importe lequel de ces types de contenu et de les afficher dans votre menu en tant qu'éléments de menu. Je veux simplement créer des liens personnalisés pour l'instant, nous nous concentrons sur la page de destination afin que nous n'ayons plus besoin de pages. Je vais donc créer une URL personnalisée. Je vais juste insérer un hashtag juste là. Je peux utiliser ce hashtag comme espace réservé pour une URL imaginaire vers laquelle ces liens pourraient pointer. Mais pour l'instant, parlons simplement de Ajouter au menu. Et maintenant, c'est un élément de menu. Je vais y ajouter une autre URL, une autre URL, juste un autre hachage. Appelons ce blog. Mais bien sûr, dans un scénario réel, ce serait quelque chose comme http slash slash www dot. Peut-être que si vous avez une vidéo YouTube que vous souhaitez partager avec quelqu'un en tant qu'élément de menu. Mais maintenant, laissons-le comme un hachage maintenant. Ajouter au menu. Et je le ferai encore deux fois. Encore une fois. Ajouter au menu. Et maintenant, nous avons quatre éléments de menu. Je vais donc aller de l'avant et enregistrer le menu. Et parce que nous avons enregistré notre menu, maintenant, si nous allons dans notre espace de travail élémentaire où nous avons créé notre en-tête, si nous actualisons cette page, je cliquerai sur Control R ou si vous êtes sur un Mac Commande R. Très bien, donc maintenant nos quatre éléments de menu apparaissent à l'intérieur cet élément qui a été introduit par le générateur de dossiers hetero pour Elementor, le plug-in que nous avons installé. Et parce qu'il est maintenant sélectionné. Si vous regardez l'endroit qui avait le message que nous n'avions pas de menu. Nous avons maintenant ce menu déroulant et il affiche notre menu principal comme l'un des menus. Si nous avions quatre menus, ils seront répertoriés dans ce menu déroulant. Et vous pouvez sélectionner ceux que vous souhaitez afficher ici. C'est donc ça. Alors mettez-le à jour. Et même si cette option est toujours sélectionnée, vous pouvez le sélectionner en cliquant n' importe où dans cette bordure bleue. Je vais donc cliquer n'importe où là-dedans. Et bien qu'il soit encore sélectionné, je vais passer à l'intérieur de la mise en page. Sous Alignements, je clique sur les droits pour pousser le menu à droite. Et puis je dirai, salut. Prévisualisons les modifications. Et maintenant, notre menu commence à prendre forme. Mais bien sûr, nous avons quelques changements à apporter comme cet effet de survol. Et ce dernier élément doit être un bouton. Voyons donc comment le faire. Je vais à l'intérieur ici. Bien que cette option soit toujours sélectionnée, réduisez la mise en page et entrez dans le menu et nous avons le dernier élément de menu. Je vais aller de l'avant et appuyer sur le bouton dernier objet. Et ça va changer ça par un bouton comme ça. Mettez à jour cela. Et prévisualisons les modifications. Nous l'avons donc. La prochaine chose que nous voulons faire est de changer la couleur du survol. Tout d'abord, la couleur par défaut des liens, puis leur couleur de survol et le comportement du survol des boutons. Allons donc ici et voyons comment se comporte notre référence. Lorsqu'il est actif, il est jaune en vol stationnaire, il est jaune, mais par défaut, il est large. Allons donc à l'intérieur ici. Alors que le menu de navigation est toujours sélectionné, je vais entrer dans le style. Et la première chose que nous voulons faire est d'effondrer le menu principal. Vous remarquerez que nous avons quatre panneaux ici pour les menus déroulants. Commençons par un bouton. Cliquez sur le bouton. Et tout d'abord, changeons la couleur du texte ici en blanc, comme ça. Et puis modifions le type d'arrière-plan du bouton à partir de ce vert. Changeons donc cette couleur. Et je veux remonter ces couleurs. J'ai ces couleurs dans ce document ici, que j'ai incluses dans le dossier des ressources que j'ai mentionné précédemment. Vous pouvez le trouver dans la description ci-dessous. Prenons donc cette couleur jaune , jaune vif. Je veux récupérer ce code. Retournez ici et collez-le ici. Et maintenant, notre bouton est jaune. Cliquons n'importe où à l'intérieur pour se débarrasser de cette boîte. Ensuite, en survol, nous voulons revenir en arrière et dire le type d'arrière-plan. Ça devrait l'être. Revenons ici, copions ça. Revenons ici et collons ça là-dedans. Dans notre propre survol, le bouton est rouge. Mettons-le à jour. La prochaine chose que nous voulons faire est de changer les couleurs du lien. Donc, réduisons ce bouton. Et passons à l'intérieur du menu principal. Cherchons la topographie. La couleur du texte doit être blanche, alors faites-le glisser jusqu'en haut. Et en vol stationnaire, il doit être jaune. Je vais donc cliquer dessus. Et j'irai à l'intérieur et j'attraperai ce jaune. Collez-le là-dedans. Et maintenant, il est jaune. Voyons comment ça a l'air actif. Quand il est actif, pas de couleur, donc je lui donnerai le même jaune. Ensuite, mettez-le à jour. Prévisualisons les modifications. Et maintenant, notre barre de navigation se comporte exactement comme prévu. Voyons donc notre référence et la police ici est noire. Allons donc ici et changeons le contact en noir. Donc, réduire ce menu principal et ouvrir la couleur du bouton devrait être noir quand il est normal. Mettons-le à jour. Et en vol stationnaire, il faut être blanc. Mettez à jour cela. Et nous allons le prévisualiser. Il change. Par défaut, il est noir en vol stationnaire, blanc. Génial. J'aime donc où nous sommes arrivés avec le bar de navigation. Maintenant, nous pouvons continuer à créer la section héros avec ce texte animé auto-tapé. On se voit sous peu. 7. Ajouter le texte animé: Bienvenue de retour. Nous voulons donc ajouter ces textes animés ici. C'est un endroit très agréable pour ajouter mots-clés importants dont vous souhaitez que les visiteurs se souviennent ou que les visiteurs aient à l'esprit au moment où ils arrivent sur votre page. C'est un endroit agréable pour informer les gens très brièvement de quelque chose dont vous voulez qu'ils soient conscients. Voyons donc comment le faire. sautant à l'intérieur de notre tableau de bord ici, nous voulons ajouter un plugin qui nous permettra d'avoir ce texte dynamique. Nous allons donc entrer dans Plugins, Add New, et nous allons taper les atomes essentiels sont simplement de type essentiel dans ce qui devrait être le premier résultat ici même par le développeur WP. Et vous remarquerez que ce sont des modules complémentaires essentiels pour Elementor. N'oubliez pas que ces plugins que nous disons ont été développés par développeurs tiers pour étendre Elementor. C'est l'un d'entre eux. Alors installons-le maintenant. Fin. Il dispose de plus d'un million d'installations actives. Juste pour vous montrer à quel point le plugin est cool ou bien, alors activez-le. Et dans cet assistant de configuration, vous pouvez aller de l'avant et sélectionner l'option souhaitée. Mais parce que vous l'êtes, je suppose que vous êtes débutant, vous pouvez utiliser les paramètres de base recommandés. Passons donc à la prochaine. Et ce sont les paramètres que vous avez acceptés en sélectionnant la prochaine chose de base. Allons à la prochaine. Prochaine. N'installez pas à votre époque ni n' installez aucun d'entre eux si vous le souhaitez. Ensuite, terminez ça. Très bien, nous avons maintenant installé des modules complémentaires essentiels pour Elementor et nous avons accès à toutes ces nouvelles fonctionnalités qui étendent Elemental. Donc, je retourne à l'intérieur de notre espace de travail élémentaire ici. Je vais donc actualiser cet espace de travail en appuyant sur Control R ou Commande R sur Mac. Et comme je l'ai déjà mentionné, si vous réduisez ces panneaux ici, vous remarquerez que maintenant nous avons plus de panneaux ajoutés ici parce que dans la leçon précédente, panneaux ajoutés ici parce que dans nous avons ajouté Elementor, en-tête et le générateur de pieds de page. Et à l'heure actuelle, nous venons d'ajouter des adultes essentiels. Et si nous développons cela, il y a des éléments supplémentaires que nous pouvons faire glisser ici et atteindre notre page de destination. L'une de ces fonctionnalités est donc un texte froid et sophistiqué. Ce que je veux faire et je viens de me rappeler, c'est que nous sommes toujours dans l'espace de travail d'en-tête. Ce que nous voulons faire, c'est quitter cet espace de travail car nous avons fini de modifier la barre de navigation. Quittons donc en cliquant dessus et quittons le tableau de bord. À l'intérieur de notre tableau de bord se trouve dans les pages. Et nous avons la page d'accueil que nous avons créée précédemment, et c'est ce que nous utilisons comme page de destination. Je vais donc modifier avec Elementor juste au cas où vous n'avez pas cette option, cela signifie que vous n'avez pas cliqué sur Modifier avec Elementor. Nous pouvons cliquer sur Modifier. Et selon l'apparence de votre page, il suffit de cliquer sur Modifier avec Elementor, où que se trouve le bouton. Dans notre, dans la zone où nous modifions le contenu principal de la page de destination. La première chose que vous remarquez, c'est que nous avons cette photo ici, que nous ne mentons pas. Revenons donc dans le tableau de bord, dans les pages, toutes les pages d'accueil. Vous remarquerez que nous avons ces petites icônes de paramètres Astra ici. Cliquez sur cette icône. Et sous la mise en page du site, disons pas de barre latérale, étirée pleine largeur. C'est bon. Désactivons ensuite l'en-tête ci-dessus. Désactivons l'en-tête principal sous en-tête, l'en-tête mobile, le titre. Désactivons l'image en vedette et désactivée ou le dossier. Ensuite, mettons à jour cela. Et maintenant, si je clique sur Modifier avec Elementor ou que je retourne directement sur cette page et que je l'actualise. Laissez-moi juste le rafraîchir. Maintenant, ce pied de page n'est plus là. La première chose que nous voulons faire est d'ajouter une section de colonne pleine largeur. Celui-là, ici. Cliquons sur le signe plus à l'intérieur et faites-le glisser à l'intérieur ici tapez fantaisie. Et cela fera apparaître ces éléments par des modules complémentaires essentiels pour Elementor, le plugin que vous venez d'installer. Je vais faire tomber ça à la fin maintenant parce que c'est l'élément actif. Il est écrit Modifier un texte chic ici. La première chose que nous voulons faire est d'examiner l' anatomie de cet élément. Il a ces trois chaînes et sont ces trois mots qui changent ici. Ensuite, nous avons ces trois premiers mots pour des mots qui ne changent pas. Ce sont les textes de préfixes, donc nous pouvons nous en débarrasser. Et nous avons le suffixe, c' est-à-dire la phrase, de la phrase. Enlevons ça aussi. Et ajoutons un point, un arrêt complet là-dedans. Pour que nous l'ayons fait, rappelez-vous que nous avons cet arrêt jaune ici. Donc, je retourne ici. Maintenant, changeons ce que ces mots disent. Passons cela à quelque chose de créatif. Changeons le second en photographe, vidéaste. Vidéaste. Et mettons à jour cela. Maintenant, les trois mots, prévisualisons les changements ou bien, donc c'est ce que nous avons actuellement. La prochaine chose que nous voulons faire est de me laisser fermer ces pages supplémentaires ici. La prochaine chose que nous voulons, c'est de modifier la couleur du texte et la taille. Donc, cliquez sur style. Donc, cliquez sur style. Nous voulons réduire les textiles préfixes et ouvrir les styles de texte fantaisie, car ce qui nous reste, c'est le texte de fantaisie lui-même. Et cliquons sur Topographie. Augmentons la taille. Quelque chose comme ça, peut-être 162, mais tout dépend du mot que vous avez tapé là-dedans. Cliquons donc à l'extérieur. Puis couleur unie. Changeons ça en blanc. Comme ça. Mettons-le à jour. Nous pouvons changer la couleur du curseur si vous le souhaitez, mais je veux la laisser en blanc. La prochaine chose que nous voulons faire est de réduire les textiles fantaisie et d'aller au suffixe textile parce que nous voulons lui donner une couleur. Rappelez-vous ici, il est jaune. Je veux donc accéder à ce document et saisir cette couleur jaune. Copiez ça. Appuyez ensuite sur notre page. Et je veux ouvrir la couleur du texte du suffixe et coller ça là-dedans. Collez ça. Maintenant, il est jaune, mais maintenant il est trop petit. Cliquez sur Topographie et augmentons la taille ici. Quelque part là. Je pense que ça me plait juste là. Très bien, mettons-le à jour. Et maintenant, remarquez que dans notre page, dans notre page de référence, le type d'animation est différent. Cela s'estompe alors que le nôtre est en train de taper. Donc, pour changer cela, passons à l'intérieur du contenu et réduisons les textes sophistiqués et développons les paramètres de texte fantaisie. Et comment changer le type d'animation passant de la saisie à fondu, fondu vers le haut. Essayons limites thêta comme ça. À propos de Zoom. seigle. J'aime bien Zoom. Mais pour simplifier les choses, je vais juste le laisser à FE, aller de l'avant et jouer avec ces autres paramètres juste là. Et mettons à jour cela. Ensuite. Bien sûr, vous remarquerez que nous avons de la place ici. Nous avons une certaine marge entre celui et la barre de navigation. Allons-y et faisons-le. Nous allons sélectionner la section elle-même. Et allons à l'intérieur avancé. Réduisons ces liens de rembourrage. Et puis augmentons le rembourrage supérieur à quelque chose comme disons 50. Disons 100. Et mettons à jour cela. Prévisualisez les modifications ou droite ? Mais maintenant, notre police doit être un peu audacieuse. En ce moment. Il semble qu'il s'agisse d'un thème. Donc, en sélectionnant ce texte fantaisie là-dedans et en entrant dans le style, des styles de texte fantaisie. Allons de l'avant et sélectionnons le type Paléographie ici et augmentons le poids de la police à quelque chose comme 900. Maintenant, le poids de police est plus lourd, mais maintenant passons la famille à Montserrat. Montserrat. Prévisualisons les modifications. Remplacer. J'aime bien ça. C'est donc ça, c'est comment ajouter des textes fantaisistes. Nous nous dirigeons quelque part. Nous allons donc y ajouter ces textes. Je vais juste copier ça. Copiez et je vais entrer ici et cliquer sur cette minuscule icône juste ici pour faire apparaître les éléments et faire glisser cet éditeur de texte sous le vidéaste. Et bien qu'il soit toujours sélectionné, je sélectionne tout cela supprimé puis je collerai le petit texte que nous venons de copier de l'autre côté. Et alors qu'il est encore sélectionné, je vais entrer dans le style et aligner son centre. Changez la couleur en blanc. Sélectionnez ensuite le vidéaste. Allez à l'intérieur avancé, brisez la marge , puis baissez la marge inférieure. Poussez les minuscules textes vers l'extérieur. Mettons-le à jour. Et prévisualisons les modifications. Super génial. Nous avons donc ajouté nos textes fantaisistes et le texte descriptif à la section héros. Ensuite, nous voulons ajouter ce bouton ici. Nous allons donc le faire dans la prochaine leçon. 8. Ajouter le fond animé: Bon retour. Cette fois-ci, nous voulons créer arrière-plan animé ici. Si vous regardez de près, vous remarquerez que l'arrière-plan comporte une sorte de cercles qui se déplacent aléatoirement et qu'ils sont tous de taille aléatoire. Voyons donc comment le faire. Ce que je veux faire, c'est sauter dans le tableau de bord. n'irai donc pas dans le tableau de bord. Laissez-moi simplement cliquer dessus. Et maintenant, dans le tableau de bord, nous voulons aller à l'intérieur des plugins, ajouter de nouveaux. Parce que nous voulons ajouter un plugin qui ajoute ces particules. Allons de l'avant et tapez Pi, sortie pi ou net. Nous avons donc deux plug-ins pi out net ici. Et celui que nous voulons E, c'est des extensions de botnet pour Elementor. Donc, inculquez cela et l'activation ou la conduite. Ce sont donc les fonctionnalités que le plugin met à notre disposition et il a également quelques procédures. Maintenant que le plug-in est installé, revenons à notre espace de travail ici et actualiserons cette page afin que nous puissions charger le plug-in ou la mariée nouvellement installé. Maintenant, il est chargé. Nous allons nous effondrer de base. Il s'est effondré pro général, il a tout effondré. Et maintenant, vous remarquerez que nous avons ces widgets gratuits PAF E. C'est donc l'extension Pilot Net pour les éléments de widgets gratuits. Et il a bien sûr les éléments qu'il a apportés dans le projet. Donc, en sélectionnant notre section. Maintenant, nous allons sélectionner cette section. Et vous remarquerez maintenant qu' en plus des trois onglets que nous avons eu ici en haut, nous avons le PIFP. Donc, si vous cliquez dessus, on a présenté des paramètres supplémentaires pour le PAF II, donc des particules PIFP, sélectionnez-nous. Maintenant, il est actif. Avant d'apporter des modifications, je clique sur Mettre à jour. Et prévisualisons les modifications. C'est donc à ça qu'il ressemble par défaut. Il faut donc le modifier un peu pour qu'il ressemble à quelque chose de plus subtil. Allons donc aller de l'avant et sautons dans notre espace de travail. Et parce que tout est rouge pour l'instant, nous devons changer ces couleurs. Nous allons donc opter pour quelque chose comme un gris très foncé juste là. Quelque part là. Je vais utiliser ce code couleur. Je vais copier ça. Et je vais aussi, parce qu'ils ont aussi des liens, remarquer qu'ils ont ces lignes qui relient les points. Je veux donc simplement que la couleur du lien la même couleur que les cercles ou les éléments. Alors collons ça là-dedans et mettons-le à jour. Prévisualisons les modifications. Et c'est ce que nous avons maintenant. Remarquez donc qu'ils avancent trop vite et nous avons besoin qu'ils ralentissent un peu. Voyons donc où est la vitesse de cette particule ? Réduisons cela à 1. Mais bien sûr, il peut jouer avec la vitesse et la régler à la vitesse que vous voulez. Nous allons donc prévisualiser cela. C'est donc ce que nous avons en ce moment. Je pense que ça me plait. La prochaine chose que nous voulons faire est de créer ce bouton ici. Et remarquez qu'il a cet effet flottant lorsque vous le survolez. Et nous verrons comment le faire. Alors, passons ici, et cliquons sur cette icône Plus ici et tapez le bouton. Et cliquons sur le premier bouton. Ou supprimons tout cela. Écroulez ça. Et passons à l'intérieur de la base. Et nous allons sélectionner le bouton ici. Déposons-le lorsque cette ligne bleue apparaît pour indiquer que nous sommes prêts à tomber. Et maintenant, par défaut, il se trouve sur le côté gauche. Poussons-le au milieu. Et passons à l'intérieur du style. Non, tout d'abord, changeons ce qu' il dit sous contenu. Textes, cliquez ici. Qu'est-ce qu'il dit ? Consultez mon portefeuille. Voir mon portefeuille ou mon RI. La prochaine chose que nous voulons faire est d' entrer dans le style pour que nous puissions commencer à le coiffer. Je vais réduire cela un instant et vous remarquerez que nous avons ces deux options. Alors, développons le bouton. Et pour la couleur, passons à ce jaune. Je vais donc cliquer ici et copier ces jaunes. N'oubliez pas que j'ai fourni ce document dans le dossier dans la description ci-dessous. Alors, collons ça là-dedans. Et maintenant, le bouton est jaune, mais la couleur de test doit être noire, comme ça. Et puis passons la typographie à Montserrat. Montserrat. J'aime bien ce que ça ressemble. Et faisons quelque chose à propos du rembourrage car remarquez ici sur notre bouton, il y a un joli rembourrage qui le rend plus visible et c'est ce que nous essayons de réaliser. Alors que le bouton est toujours sélectionné, je vais annuler le bouton. Passons au rembourrage et cassons ce lien. Et cela va déformer le bouton pendant un instant. Augmentons le rembourrage gauche 250 et le rembourrage droit 250, bas et le haut 20. Ou RI. Mettons-le à jour. Et prévisualisons les modifications. Super génial. C'est donc ce que nous avons en ce moment. Mais maintenant, remarquez que notre section des meilleurs héros va jusqu'ici parce que c'est là que le bouton atteint. Nous devons augmenter le rembourrage ici et augmenter l'espacement entre le bouton et ce texte, comme ici. Alors, faisons-le. Nous pouvons donc sélectionner lorsque le bouton est toujours sélectionné. Allons à l'intérieur avancé. Brisons ce lien là-haut, et faisons en sorte que la marge supérieure soit de 50. Maintenant, faisons-en 100. Mettons-le à jour. Prévisualisons les modifications. Ou bien, donc maintenant c'est un bon endroit. Mais nous voulons augmenter. La prochaine chose que nous voulons faire est d'augmenter le rembourrage de la section héros elle-même, délimitée par cette bordure bleue ici. Nous allons donc sélectionner la section elle-même. Et allons à l'intérieur avancé. Et donnons-lui un rembourrage inférieur de 6060 comme ça. Mettons-le à jour. En avant-première, les modifications. Très bien, nous avons maintenant ces particules se déplacent au-dessus et au-dessous du bouton. Et notre section des héros est désormais superbe. La prochaine chose que nous voulons faire est de travailler sur cette section ici même avec cette belle icône. Oui, ce sera donc un endroit très agréable pour présenter l'un de vos projets préférés ou les plus récents. Nous allons donc créer cette section. Je vous verrai bientôt. 9. Insertion de l'image: Bienvenue de retour. Sautez donc dans l'est de notre espace de travail. Ce que nous voulons faire, c'est ajouter une toute nouvelle section car n'oubliez pas que nous voulons créer cette section ici et qu'elle se trouve juste dessous de notre bouton. Nous voulons donc ajouter une section à deux colonnes. Alors, faisons-le. Cliquez sur ce bouton. Et maintenant, nous avons une double colonne N ici. Je vais cliquer dessus, faire glisser un élément d'image là-dedans. Cliquons dessus et faites-y glisser un élément de titre. Et cliquons sur ce petit bouton juste là et glissons un éditeur de texte juste là, puis déposerons lorsque cette ligne bleue apparaît. Et n'oubliez pas que nous avons cette icône ici. Revenons ici et cliquons sur cette minuscule icône pour faire apparaître l'icône Insight des éléments et choisir celle qui a l'étoile. Il s'agit des éléments par défaut Elementor, Elementor, Icône. Faites-le glisser et déposez-le juste au-dessus du titre. Et par défaut, c'est au milieu. Alors qu'il est toujours sélectionné, alignez-le vers la gauche. Mettez à jour cela. Très bien, nous allons donc prévisualiser les modifications. Très bien, donc c'est ce que nous avons. J'ai pas l'air très joli. Nous devons faire quelque chose à ce sujet. Allez-y et ajoutons d'abord l'image. Je vais sélectionner l'image et cela changera pour modifier l'image et les sorties. Cliquez là-dedans et cliquez sur Aller pour télécharger des fichiers, sélectionnez des fichiers. Et rappelez-vous que j'ai mentionné que j'ai préparé ce dossier de ressources et qu'il sera dans la description ci-dessous. Vous pouvez le télécharger. Il a toutes les images que vous utiliserez. Je vais donc sélectionner cette image. Oui, laissez-moi sélectionner cette image pour l'instant. Ouvre ça. Et allons de l'avant et insérons des médias. Juste comme ça. Mettez à jour cela. Voyons maintenant à quoi ressemble notre police. C'est donc Montserrat. Je vais copier ce Lorem Ipsum. Nous pouvons donc le coller là-dedans, copier ça. Et allons-y ici. Nous allons le sélectionner. Chaque tir compte. Et nous allons sélectionner la description. Alors allez à l'intérieur ici, sélectionnez tout, supprimez cela, et ajoutons notre long Lorem Ipsum, à droite, donc tant que cela est toujours sélectionné, passons à l'intérieur du style et changeons la couleur de la police en blanc. Cliquez n'importe où là-dedans pour sortir de cette boîte. Et cliquons sur la topographie. Formons la famille à Montserrat. Entrez. Je vais sélectionner le titre, le titre. Je vais changer cela. Oui, c'est un H2, j'aime bien ça. Et revenez à l'intérieur du style, changez cela en blanc aussi. Alors, sélectionnons l'icône et passons ici, à l'intérieur de la caméra. Je n'aime pas ça. Très bien, alors choisissons ça. Mais vous pouvez également télécharger vos propres icônes si vous le souhaitez. Alors insérez ça. Et maintenant c'est un appareil photo, mais nous devons en faire cette couleur jaune. Allons donc à l'intérieur ici alors que c'est encore le style sélectionné. Je vais ici. Et je vais cliquer sur ce bloc-notes ici et le copier. Allez à l'intérieur ici et collez-le ici. Et maintenant, il est jaune. Mais ces éléments sont trop proches les uns des autres. Donc, ce que nous devons faire est de sélectionner cette section et d'aller ici sous Disposition, espace colonnes. Sélectionnons l'une de ces options que vous aimez, mais je vais aller plus loin, puis je mettrai cela à jour. La distance entre ces deux colonnes est donc augmentée. Nous allons donc prévisualiser les modifications. C'est donc ce que nous avons jusqu'ici. Je pense qu'il commence à prendre forme. Nous devons changer ces polices deux mois de famille Arad. Nous allons donc choisir cela. Entrez dans la typographie de style. Famille, Montserrat. Montserrat. Et je veux augmenter le poids jusqu'à 800 et le mettre à jour. Il augmente également la taille. Je vais juste utiliser mes yeux. Disons que jusqu'à un endroit où 38 ça va. Mettez à jour cela. Et maintenant la distance entre le bouton , la distance entre le bouton et cette section est un peu petite. Augmentons donc cela. Nous allons sélectionner la section dans Coïncide Advanced. Brisez ce lien ici et augmentez la marge supérieure jusqu'à quelque chose comme 50. L'application à cet endroit et mettez-la à jour. Et nous pouvons prévisualiser les modifications. Très bien, j'aime bien ça. La prochaine chose que nous devons faire est donc d'ajouter ce bouton. Et une chose intéressante avec Elementor est que vous pouvez copier et coller des éléments comme dans une autre normale, le logiciel de conception visuelle comme Adobe Illustrator ou Photoshop. Et donc, en entrant ici, nous pouvons simplement copier ce bouton ici. Cliquez avec le bouton droit sur le bouton et copiez-le. Ensuite, je vais rentrer ici. Cliquez avec le bouton droit sur les éléments de texte et collez. Le bouton va donc se placer en dessous du clic droit élémentaire. Maintenant, il est en dessous, mais maintenant il a les paramètres que nous avons définis pour celui-ci, nous devons modifier les paramètres en fonction de ces zones. Tout d'abord, déplacons-le vers la gauche. Supprimons ces marges. Passons donc à Avancé et supprimons cette marge. Peut-être qu'il a fait 0. Augmentons peut-être la taille de l'image jusqu'à cet endroit. Et mettons à jour cela. Et prévisualisons les modifications. Et c'est ce que nous avons jusqu'ici. Juste ici. C'est rouge et jaune. Changeons donc cela. Appliquons donc cet effet de survol. Eh bien, le bouton est sélectionné. Allons dans le style sur Hoover, qui voulait être la lecture souriante. Je vais donc copier ça, coller ça là-dedans. Donc, nous ne voulons pas qu'il soit doucement lu, qu'il soit doux à l'état normal et en vol stationnaire. Nous voulions que ces jaunes et jaunes vifs copient cela en vol stationnaire, voulant être ce jaune vif comme ça. Et puis état normal, la police doit être blanche. Oui, il faut être blanc. Donc, police d'état normal, large. En vol stationnaire, on peut le rendre noir comme ça. Nous allons donc mettre à jour cela et prévisualiserons les modifications. Défilons vers le bas. Et maintenant, notre bouton se comporte comme nous le voulons. Allons de l'avant et créons cette section, mes services. Et ce sera un endroit très agréable pour donner une brève description de ce que vous faites pour votre client. Créons donc la section Mes services. Dans la prochaine leçon, je vous verrai bientôt. 10. Ajouter les services: Bienvenue de retour. Nous voici donc dans une autre leçon géniale. La prochaine chose que nous voulons faire maintenant est ajouter ma section Services. Nous allons donc commencer par ajouter le titre et bien sûr ces icônes et ces textes. Nous allons donc sauter directement à l'intérieur de notre espace de travail. Et ce que nous voulons faire, c'est ajouter une seule section de colonne qui s'étend de gauche à droite. Et n'oubliez pas que nous pouvons copier des éléments un endroit à un autre lorsque vous travaillez avec Elementor, comme si nous copions ce bouton et que nous l'utilisons ici. Nous voulons donc également copier ce titre ici pour pouvoir l'utiliser ici. Je veux vous montrer rapidement une fonctionnalité très pratique fournie par Elemental. Et vous remarquerez que lorsque je survole ce coin, rien ne se passe ici. Ou si je survole ici, rien de spécial ne se passe. Mais je veux cliquer sur ce menu de hamburgers ici et entrer dans les préférences des utilisateurs. Poignées d'édition. Changez cela par oui et dites mettre à jour cela. Maintenant, lorsque nous sommes ici, lorsque vous survolez les coins, ces options vous aideront à faire votre travail plus rapidement. Donc, comme si je voulais les dupliquer, il suffit de les survoler et de cliquer dessus. Et maintenant, je peux faire glisser cela dans notre section complète de l'interface graphique ici. La prochaine chose que je veux faire est de dupliquer ça et de le faire glisser dans notre section juste là. Et puis je veux supprimer tout ce sexe pour qu'il nous reste une phrase. Et bien qu'il soit encore sélectionné, passons à l'intérieur du style, alignez-le au milieu et faisons de même pour le titre. Alignez-le au milieu. Et cliquons sur la section elle-même. Allez dans Avancé, cassez le lien sur marge et donnez-lui une marge de 100. C'est vrai ? Nous avons donc un bon espacement entre les deux sections. Mettez à jour cela. Prévisualisons rapidement les modifications. Et c'est ce que nous avons. La prochaine chose que nous voulons faire est d'ajouter ces services. Voyons donc comment le faire. Cliquez ici sur cette petite icône pour faire apparaître ces éléments. Et nous voulons faire glisser une section intérieure juste en dessous de ce texte. Dans cette intersection, il faut avoir quelques colonnes supplémentaires. Une fois de plus, elle est dupliquée. Dans ces colonnes, il y aura différentes parties de ces zones. Donc, pour l'instant, une colonne les contiendra et une autre colonne les contiendra. Une autre colonne, et une autre colonne. C'est pourquoi nous en avons quatre. Donc pour celui-là et faites glisser ça jusqu'à quelque chose comme pour l'instant, commençons par neuf. En faisant glisser, vous remarquerez que nous avons des mesures qui changent en temps réel. Celui de gauche est un, a, changeons ces neuf quelque part là-dedans. Allons aussi porter ça à neuf. Regardez les métriques de gauche. Donnons-lui maintenant un 5,55 g qui font également 55. Ou RI. Donc ici, ce que nous devons faire est cliquer sur ce signe plus et de taper l'icône. Et glissons une icône là-dedans. Et avec cette icône, cliquez ici et sélectionnez n'importe quelle icône que vous voulez en rapport avec la photographie. Laissez-moi donc choisir cela, insérez-le. Et vous remarquerez que l'icône est en bec par défaut. Mais nous allons faire quelque chose à ce sujet. La prochaine chose que nous voulons faire est de me laisser copier ce texte ici. Copiez cela et la section est mes services. Permettez-moi donc de choisir ce premier n ici. Je veux cliquer sur ce signe plus, puis faire glisser un élément de titre. Et bien qu'il soit encore sélectionné, la photographie de mariage, je vais coller ça là-dedans. Très bien, donc la prochaine chose, prenons ça et attrapons un éditeur de texte dans le dépose-le là-dedans. Nous allons donc coiffer les textes. Commençons par l'icône. Ici, à l'intérieur. Allons à moi concis et faites-le glisser jusqu'à ce que vous soyez satisfait. Je pense que 35 est bon pour moi. Et changeons la couleur du bouton, la couleur de l'icône en jaune. Laissez-moi donc sauter par-dessus et copier ça et y retourner et coller ce jaune là-dedans. Maintenant, c'est jaune. Sélectionnons ce titre, passons à l'intérieur du style, sélectionnons le collège, le modifions en blanc. Je veux maintenant changer la famille typographique de deux mois en Irak. Et je veux changer les poids de police à 700, mais je veux réduire un peu la taille à 25, c'est correct. Ensuite, je vais sélectionner cette description ci-dessous. Et bien qu'il soit encore sélectionné, style des côtés va, changez la couleur en blanc. Changez la famille de typographie en Montserrat. Très bien, mettez à jour ça. Et je veux changer un peu cette couleur. Soyez donc un gris plus foncé, légèrement foncé, de sorte qu' il se distingue du titre lui-même. Quelque part là. Très bien, il y a donc une légère différence entre leurs nuances. Et ensuite, je vais prévisualiser ça. Nous l'avons là, donc nous avons un seul service. Maintenant, la prochaine chose que nous voulons faire est de dupliquer cela, survoler ça et de le dupliquer et de le faire glisser là-dedans. Et maintenant, vous remarquerez que nous ne sommes pas en mesure de le déposer dans ce petit bogue, cette boîte parce qu'elle est petite, donc je vais l'agrandir. Faites-le glisser et déposez-le là-dedans. Et rappelez-vous que nous avions fait 5,5. Faites-le glisser jusqu'à 5.5. C'est bon. Dupliquons c'est bien, faites-le glisser là-dedans. Dupliquez-le, faites-le glisser là-dedans. Et c'est notre deuxième service. Je vais donc prendre ce graphisme et le coller là-dedans. Le troisième est la photographie d'entreprise. La prochaine chose que nous voulons faire est de les dupliquer. Maintenant que nous avons ces deux services, nous voulons dupliquer cette section comme celle-ci et la dupliquer à nouveau. Nous avons donc maintenant l'ensemble des services tous coiffés de manière cohérente. Nous allons donc copier ça. Nous avons dit que c'était de la photographie d'entreprise. Collons ça là-dedans. Donc, Graham, sélectionnez-le dans la photographie de l'événement. Et enfin, la production vidéo. Ou bien, mettons à jour cela. Ensuite, prévisualisons les modifications. Donc, en faisant défiler vers le bas, remplacer notre section Mes services est super génial, agréable et propre. La prochaine chose que nous voulons faire est donc créer cet espace d'appel à l'action ici même. Il s'agit donc d'une page de destination qui doit amener les gens à agir pour répondre aux besoins d'appeler les gens à l'action. Et c'est l'une des façons de le faire pour recevoir conseils photographiques de ma part et quelqu'un peut rejoindre votre liste VIP. Nous allons donc créer cette section. Et il a ce bel effet là où l'image d'arrière-plan est fixée. Voyons donc comment faire cela au cours suivant. 11. Ajouter un appel à l'action: Bienvenue dans ce cours. Nous avons donc déjà créé cette section services. Il est maintenant temps de créer cette zone d'appel à l'action ici. Nous voulons pouvoir appeler les gens à prendre mesures souhaitées qui nous seront bénéfiques. Et parce que nous sommes photographes, nous voulons que les gens se joignent à nos envois postaux. C'est pourquoi nous avons ce bouton ici. Voyons donc comment créer ces sections dans notre espace de travail. Pour sauter dans notre espace de travail, la prochaine chose, comme vous l'avez déjà deviné, c'est de créer une nouvelle section. Et voyons voir. Oui, c'est une section pleine largeur comme d'habitude. Et remarquez que nous n' avons aucune marge entre ces deux-là. Alors pourquoi ne pas commencer par ajouter une marge alors qu'elle est encore sélectionnée. Allez à l'avance, brisez ce lien ici. Ajoutons donc une marge supérieure de 100. Et maintenant, nous avons un bon espacement entre les deux. Et alors que cette section est toujours sélectionnée, passez à l'intérieur du style. En arrière-plan, laissez-moi réduire l'arrière-plan et nous avons tous ces panneaux ici. Et nous sommes intéressés par le contexte pour l'instant. Type d'arrière-plan. Cliquez sur le pinceau juste là et accédez à Image. Cliquez sur le signe plus ici, et nous devons ajouter l'image qui sera notre arrière-plan comme celle-ci. Je vais donc sélectionner des fichiers, sélectionner des fichiers. Et je pense que c'est une photo. Ouvre ça. Et insérons des médias. C'est donc à ça que ça ressemble par défaut. Donc, la première chose que nous voulons faire, c'est toujours sélectionné. Nous allons aller au centre de position, au centre, puis aux pièces jointes, disons fixes de sorte que lorsque nous faisons défiler, reste à un endroit comme ça. Et puis disons répéter, pas de répétition, taille, disons couverture ou RI. La raison pour laquelle ce n'est pas tout à fait visible, car notre section ici est vide. N'oubliez pas que c'est notre contexte, mais la taille de notre section sera déterminée par la quantité de contenu que nous y mettons. Cliquons donc sur ce plus. Et au lieu de créer un nouveau titre, dupliquons cela. Cliquez dessus, puis faites-le glisser et déposez-le là lorsque la ligne bleue apparaît. Mes services. Et juste en dessous. Nous allons dupliquer cela et faites-le glisser sous mes services. Maintenant, alors qu'il est toujours sélectionné, poussons-le vers le centre, vers le milieu. Il est donc maintenant aligné au centre. À l'heure actuelle, nous ne pouvons pas lire car l'arrière-plan est lumineux. Sélectionnez donc cette section à nouveau. Et sous Type d'arrière-plan et un arrière-plan, nous avons une superposition d'arrière-plan. Développons ce type de superposition d'arrière-plan. Et donnons une couleur noire. Donnons un noir foncé comme ça. Et ensuite, augmentons l'opacité juste pour la rendre un peu plus sombre. Très bien, mettez à jour ça. Et prévisualisons les modifications. génial, donc c'est ce que nous avons. Nous ne pouvons pas faire défiler plus loin que cela parce que nous n'avons rien en dessous. Mais nous pourrons faire défiler et voir pour l'instant, ce que nous voulons faire est de saisir le texte ici, de le copier. Et je veux le sélectionner. Et même s'il est encore sélectionné, je veux le coller ici. Collez ça là-dedans. Et revenons ici. Oui, ça prend en compte. Et maintenant, notez que nos textes vont maintenant de gauche à droite. Et c'est parce que nous avons utilisé une section à colonne unique pleine largeur. Je pense que nous devons en faire une triple colonne, donc je vais dupliquer les colonnes deux fois comme ça. Et maintenant, débarrassez-vous du contenu dans les colonnes latérales. Maintenant, supprimons cela, supprimons cela et supprimons cela. Et maintenant, nous avons ces colonnes au milieu. Maintenant, nous pouvons faire glisser ça, assurer que tout se trouve au milieu. Donnons un, 20, 20 % à gauche. Donnons également que c'est 20 pour cent juste là, 20 % à droite. Très bien, nous allons donc mettre à jour ça. Une autre chose que vous remarquerez est que nous n'avons pas assez de rembourrage au-dessus du texte, donc il touche presque le bord de la section. Augmentons donc le rembourrage supérieur de la section. Sélectionnez une section de rembourrage avancé. Cassons ce rembourrage et augmentons le rembourrage supérieur. Juste pour que nous puissions avoir une belle pièce dans l'espace en haut. Quelque chose comme 70 ans. Faisons donc la même chose pour le bas. Faisons un 7070 comme ça. La prochaine chose que nous voulons faire est aller ici et de dupliquer ce bouton. Et faites-le glisser et placez-le sous le texte. C'est notre appel à l'action. Et par défaut, c'est sur la gauche. Alors, alors qu'il est encore sélectionné, mettons-le au milieu. Et qu'est-ce que cela dit ? Jane, ma liste VIP. Alors qu'il est toujours sélectionné sous contenu, ma liste VIP et la met à jour. Et prévisualisons les modifications. Défilement vers le bas. Génial, nous avons donc un bon appel à l'action et les gens peuvent cliquer dessus parce qu'ils veulent recevoir des conseils photographiques de votre part. C'est donc un bon endroit pour avoir un appel à l'action. La prochaine chose que nous voulons faire est de travailler sur cette galerie filtrable. Quelqu'un est venu voir tous les projets sur lesquels vous avez travaillé. Ou ils peuvent les consulter par catégorie. Par exemple, catégorie mariage. Ils cliquent sur le fait que cela ne leur montre que les projets liés au mariage qui ont fait coopérer la clique. On ne leur montre que les concerts d'entreprise que vous avez eus. Studio, c'est votre studio, en plein air. Et nous pouvons revenir à tous. Voyons donc comment créer cela. Je vous verrai bientôt. 12. Créer une galerie de projets: Bienvenue de retour. Il est maintenant temps pour nous de créer cette galerie ici. Sautons donc directement dans notre espace de travail. Et bien sûr, comme nous l'avons fait, la prochaine chose que nous devons ajouter est une autre section, une section à trois colonnes. Et c'est celui que nous voulons utiliser, donc je vais le sélectionner. Et maintenant, il s'agit d'une section à trois colonnes. Créons un espace entre les deux sections en ajoutant une marge supérieure. Sélectionnez la marge supérieure de la section, brisez ce lien. Nous ne faisons donc face qu'au sommet. éruption serait 100. Maintenant, nous avons cette pièce. Cliquez ensuite sur le signe plus ici. Et allons ici et taper filtrable. Filtrable. Et nous avons ces éléments apportés par des modules complémentaires essentiels pour Elementor, c'est pourquoi j'aime vraiment ces plug-ins. Alors, faisons-le glisser là-dedans. Et bam, il montre déjà une galerie d'espaces réservés ici que nous pouvons commencer à remplir avec notre propre contenu. allons donc mettre à jour cela et prévisualiserons les modifications avant de commencer à les remplir avec le nôtre. Prévisualisons ça. Allons faire défiler. Et c'est ce que nous avons. La première chose que je veux faire est d'augmenter la largeur de cette colonne. Donc je retournerai ici et faisons glisser ça jusqu'à ce que je lui donne un 11 sur la gauche. Sur la matrice de gauche, ici. Je vais lui donner un 10, et de l'autre côté, un 10. Et mettons à jour cela. Et pendant ce temps, et pendant que cette option est sélectionnée, cliquez n'importe où ici. C'est maintenant l'élément actif avec lequel nous travaillons. Et vous pouvez le confirmer en regardant le haut ici. Maintenant, la première chose que je veux faire est de réduire ces paramètres juste là. Et vous remarquerez que nous avons ces contrôles filtrables et que nous avons des éléments Gallery. contrôles filtrables sont ces contrôles ici lorsque vous cliquez sur l'élément de la galerie et que vous cliquez sur tout. Ce sont les commandes filtrables, n'est-ce pas ? Ensuite, les objets de la galerie sont les images elles-mêmes, les objets eux-mêmes. Commençons donc par les contrôles filtrables en développant cela. Et ajoutons un article. Donnons-lui un nom, peut-être mouiller. Nous allons effondrer ça. Il y avait déjà des contrôles par défaut, alors développons cela et donnons un autre nom. Coopère, noyau, défilé. Nous allons effondrer ça. Nous allons le dupliquer en cliquant sur cette icône ou en cliquant sur Ajouter un élément. Photographie en cours, par exemple en extérieur, en plein air. Nous allons dupliquer ça. Disons peut-être quelque chose comme la mise à jour de Studio. Nous avons donc maintenant quelques contrôles. Il peut s'agir de vos différents projets ou de n'importe quel type de catégories que vous souhaitez avoir pour vos projets. Très bien, réduisons les contrôles filtrables et entrons dans les éléments de la galerie. Ce sont les objets de la galerie que nous avons déjà ici, afin que nous puissions commencer à les changer. Par conséquent, le nom du contrôle signifie le contrôle qui sera utilisé pour l'afficher. Par exemple, si vous voulez que cet élément de la galerie soit visible lorsque quelqu'un clique sur le mariage, nous saisirons ici le mariage de mariage. Nous allons effondrer ça. Donc, si nous voulons que cela apparaisse, lorsque quelqu'un clique sur coopérer, nous cliquerons sur pour taper les noms de coopération. N'oubliez pas que ce sont les contrôles que nous avons créés ici. Coopération, mariage, extérieur et studio. Allons donc à l'intérieur ici et donnons-leur au hasard différents contrôles. Et j'ai oublié de leur donner des noms. Le premier objet ici peut donc être mon meilleur coup. Nous allons nous effondrer. Très bien, M avant que nous ne le quittions, alors que nous sommes encore dans mes meilleurs tirs, si nous survolons, vous remarquerez qu'il est maintenant passé à mes meilleurs tirs. Et si on fait défiler vers le bas. C'est ici que nous ajoutons l'image. Nous sommes toujours dans le premier élément ici. Nous le sélectionnons et nous pouvons cliquer, allons à l'intérieur, télécharger des fichiers, sélectionner des fichiers. Et maintenant, je pense que je veux importer toutes ces images même temps car elles en auront besoin. Très bien, commençons donc à sélectionner un par un. Je pense que je peux commencer par celui-là. Insérez un support. Et maintenant, c'est l'image qui va apparaître ici. Comme ça. Donc, en faisant défiler de nouveau vers le haut, je vais m'effondrer. Mes meilleurs clichés. Accédez à la deuxième image. Cela est contrôlé par entreprise et la galerie nommée peut être l'objet de la galerie par le biais de vos courts-métrages. Et ensuite, faisons défiler ici. Cliquez sur cette image. Alors que le studio, nous avions une image studio. Quoi qu'il en soit, choisissons des images aléatoires ici. Bien sûr, vous prendrez le temps de cultiver le meilleur. Défilons vers le haut. s'est effondré qui élargit ça. Cela peut être contrôlé par l'extérieur, disons oui, en plein air. Donnons un nom. Des photos en plein air. Et faisons défiler vers le bas et sélectionner une image ici. Mettons-le à jour. Continuons, nous allons nous effondrer. Réduisez cet élément suivant. Et vous pouvez continuer à créer autant d'éléments de galerie que vous, éléments de galerie que vous le souhaitez. Mais bien sûr, finissons ces six. Disons qu'il s'agit également d'un contrôle. Pas question. C'est ce que l'on appelle, peut lire, lire des clichés, et cela est contrôlé par un contrôle de filtre de mariage. Allons à l'intérieur des images. C'est comme cette photo de mariage juste là. Ensuite, continuons à faire défiler le prochain élément de la galerie ici. Commencez simplement par changer l'image. Donnez-lui ça. Nous allons choisir ça. Ensuite, je vais faire défiler vers le haut et lui donner son nom. Des clichés sonores par exemple. Et c'est contrôlé par, disons à l'extérieur. N'oubliez pas que vous devez vous assurer que ces contrôles, ces contrôles ici. Les noms de contrôle de mariage sont les mêmes noms de contrôle filtrables que ceux que vous avez utilisés ici, car ils sont littéralement ceux auxquels vous faites référence lorsque vous remplissez ces zones, n'est-ce pas ? Le tout dernier devrait donc être contrôlé par Studio. Studio. Et le nom de la galerie. Donnons peut-être quelque chose comme oui, des photos en studio. Et faisons défiler vers le bas et ajouter une image pour cela, n'est-ce pas ? Alors cliquons sur Peut-être, oui, peut-être celui-là. Insérez un support, mettez à jour cela. Et c'est notre dernier article de galerie. Donc, si j'écroule ces photos de studio et que je me laisse agrandir le tout premier, mon meilleur cliché ici. Et regardons à l'intérieur pour que vous puissiez ajouter des éléments tels que les prix, les évaluations et tout cela. Et vous pouvez également avoir un lien ici, page vers HTTP, google.com. Et vous pouvez aussi, chaque fois que quelqu'un clique sur ce tout premier élément ici, qui est mes meilleurs clichés , qu'ils seront redirigés vers Google.com ou partout où ils les mènent. Donc, si, par exemple, vous avez une autre page qui a tout votre meilleur cliché, cela les amènera dans cette zone. Nous pouvons donc également ouvrir un nouvel onglet. Si vous cochez cela, ouvrira dans un nouvel onglet, mettons-le à jour et prévisualiserons les modifications. Prévisualisons les modifications. Défilement vers le bas. Super génial. Maintenant, la dernière chose que nous devons faire est de changer la couleur d'arrière-plan pour qu'elle soit noire. Revenons ici. Et même si cette option est toujours sélectionnée en sélectionnant n'importe où, cliquez n'importe où. Défilons vers le bas, défilons haut, réduisons les éléments de la galerie, puis passons à l'intérieur du style, de l'arrière-plan, couleur, du noir, comme ça. Et puis nous allons effondrer la tuile générale. Et passons à l'intérieur du style contrôlé pour changer la couleur de ces contrôles. La couleur du texte doit donc être blanche. Mettez à jour cela. Oui, donc je pense que nous sommes sur la cible avec ça. Et vous pouvez aller de l'avant et jouer avec tous les paramètres disponibles ici. Il y en a beaucoup, mais c'est un défi pour vous maintenant, allez-y et jouez avec tous ces paramètres pour voir ce que vous pouvez trouver. Mais si nous prévisualisons les modifications maintenant et voyons à quoi ressemble notre galerie, faisons défiler et voir ce que nous avons là-bas. Très bien. C'est super génial, mais maintenant je viens de me rappeler que nous avons oublié d'ajouter un titre. Nous allons donc les récupérer sur notre page de référence. Copiez ça. Je vais rentrer ici. Et ce que je veux faire, c'est dupliquer ça. Et maintenant, je veux faire glisser ça et le déposer juste au-dessus de la galerie filtrable. Et même s'il est toujours sélectionné, je vais sélectionner tout cela et coller les derniers projets là-dedans. Et je vais le mettre à jour. Prévisualisons ça. C'est vrai ? J'aime bien ce que nous avons. Donc, si nous cliquons, coopérer ne seront que les projets d'entreprise , le mariage, le studio extérieur, et nous pourrons tous les voir. La prochaine étape que nous voulons faire est créer la section Rencontrez l'équipe. Nous allons donc le faire dans la prochaine leçon. Je vous verrai bientôt. 13. Créer des membres de l'équipe: Et bon retour. Nous sommes maintenant sur la page de référence que nous copions. Et la prochaine chose que nous voulons créer aisément la section équipe, cette section. Allez-y et faites-le dans notre espace de travail, juste en dessous de la galerie de rouleaux de filtres. Allons de l'avant et ajoutons une seule section de colonne comme celle-ci. Et la première chose que nous voulons faire, c'est de dupliquer cela. Faites-le glisser et déposez-le dans la section d'une seule colonne. Allons de l'avant et ajoutons la marge en haut de cette section. Donnez-lui 100. Et maintenant, nous avons cet espacement juste en dessous de ces projets. Donnons cette brève description. Nous allons donc dupliquer cela. Et nous allons faire glisser ça là-dedans. Très bien, maintenant que nous avons cela, allons-y et ajoutons une intersection à trois colonnes. Nous allons donc faire glisser une intersection là-dedans. Nous allons donc dupliquer cette section. Maintenant, nous en avons trois. Cliquons plus là-dedans et faisons glisser un élément d'image là-dedans. Et même si elle est toujours active, je vais sélectionner l'une de ces images que nous avons importées. Allez-y et cliquons sur ce type. Il est membre de l'équipe. Et nous voulons écrire en dessous de lui. Cliquons sur cette icône et faisons glisser un petit et un en-tête juste là. Et donnons un nom, peut-être. Alex Rider ou quelque chose de ce genre. Allons l'aligner sur le centre. Faisons de ça une haine 3. Et réduisons un peu la taille. Peut-être 23 ans. Changeons la famille en Monstera. Changeons la couleur en blanc. Et Wallah, cliquons sur cette icône dans le, faites glisser un éditeur de texte là-dedans. Jetons-le dans le, donnons un titre. Réalisateur pour deux photographies graphiques. C'est vrai ? Et alors que cela est toujours sélectionné, va à l'intérieur du style, alignez le centre. Et maintenant, la distance entre le nom et le titre est trop grande. Réduisons donc la marge supérieure sur ce point alors qu'il est toujours sélectionné avancé. Brisez ce lien juste là et réduisez la marge supérieure. Mise à jour. Et maintenant, dupliquons cette image et déposons-la là-dedans. Nous allons dupliquer cela et le déposer dans le duplicata et marée deux fois. Déposez cela à la fin, celui-ci en fin de compte fait la même chose pour le nom dupliqué deux fois. Et maintenant, nous pouvons le sélectionner et le modifier par n' importe quel nom sous le contenu dont nous avons besoin. Jane Doe. Et Jane. Jane va dans le contenu. Changeons cela pour le mettre à jour, sélectionnons Alex Writer ici. Changez ça par ma chanson thème. Peut-être le directeur marketing marketing. Dates ça. Et changeons les images. Je vais donc sélectionner cette image. Et une fois que je l'ai sélectionné, cela fera apparaître ça. Cliquez sur ce bouton. Sélectionnez un autre membre. Ce type. Notez, choisissons cette dame parce que vous utilisez le nom d'une dame ici, Jane Doe. Nous allons sélectionner ce type ici. Nous allons sélectionner le dernier membre de l'équipe, Michael Sims lors de la mise à jour. Et remarquez que c' est un peu plus court que les autres, donc nous pouvons toujours les redimensionner jusqu'à ce que nous ayons de beaux pieds. Il suffit de jouer avec la taille jusqu'à ce que vous ayez la nourriture parfaite. Et puis passons un aperçu de cela. Donc, faites défiler vers le bas. Très bien, voici maintenant notre équipe, mais maintenant nous devons changer ce x pour lire. Rencontrez notre équipe, rencontrez nos équipes. Alors mettez-le à jour. Et prévisualisons les modifications. Défilement vers le bas. Et maintenant, notre équipe est super géniale. Allons donc à notre page de référence ici. La prochaine chose est mes réalisations en chiffres, cette section ici, et elle est animée. Lorsque quelqu'un visite la page pour la première fois. Ces chiffres sont animés. Voyons comment le faire dans la prochaine leçon. Je vous verrai bientôt. 14. Créer un comptoir animé: Bienvenue de retour. Nous continuons là où nous nous sommes arrêtés. Nous voulons maintenant créer ces sections, mes réalisations en chiffres. Et ces chiffres sont animés. Voyons donc comment le faire à l'intérieur de notre espace de travail. Alors, en sautant à l'intérieur, j'irai jusqu'au fond. Et créons une seule section de colonne. Juste comme ça. Et ce que nous voulons faire, c'est ajouter une intersection. Donc, en cliquant juste avant de faire cela, ajoutons une marge en haut de ces sections. Cliquez donc sur cette avance, cassez ce lien et donnons-lui une marge supérieure à 100. C'est vrai ? Donc, c'est assez d'espacement juste là. Donc, ce que nous voulons faire, c'est cliquer sur le signe plus à la fin, faire glisser une intersection. Et puis nous allons le dupliquer deux fois de plus . Juste comme ça. Nous avons maintenant quatre colonnes à l'intérieur de cette section, c' est-à-dire à l'intérieur de cette section. Dans cette section intérieure, je cliquerai sur Plus. Et puis je vais taper à l'intérieur ici compte. Et nous avons quelques éléments liés ici, mais celui qui aurait besoin d'alléger le compteur. Glissons ce comptoir ici et déposons-le là-dedans. M par défaut, il commence juste à faire son travail. Est-ce que vous remarquez que nous avons le numéro de fin ici, ces 100 sont ici, donc nous pouvons toujours le changer à 23 selon ce que vous voulez montrer. Et changez ce numéro cool ici, nous pouvons toujours changer le titre ici. Par exemple, voyons ce que nous avons ici. Oui, donc le nombre de photographies arrive ici et collent ça là-dedans. Nous avons maintenant 23 photographies. Cela n'a pas de sens. Supposons que vous ayez 6 400 photos. Très bien. Donc, ce que nous voulons faire, c'est styliser cette seule réussite ici , puis dupliquer la même chose pour le reste. Tout d'abord, changeons cette couleur en jaune. Sachez que c'est blanc. Passons donc à l'intérieur du style et passons à la couleur du texte en blanc. typographie l'a définitivement changé à la hausse. Mais vous êtes libre de la remplacer par n'importe quelle police de votre choix. Et puis je vais jouer avec la taille juste pour qu'elle ne soit pas trop grande. Penser à 35, ça suffira. Et je veux le rendre audacieux, alors je vais lui donner 900. Maintenant, donnons sept cent huit cents. Yup. Et puis je fermerai ça. Je vais entrer dans le titre et changer la typographie ici. Tout d'abord, être Monstera interagissez. Et puis je changerai la couleur en jaune ici. Je vais donc copier ce jaune et le coller ici. Et maintenant, il est probablement toujours là. Cliquez n'importe où ici pour vous en débarrasser, mettez-le à jour. Et maintenant, bien sûr, vous remarquerez que nous avons ici cet arrière-plan grisâtre qui permet ces réalisations de se démarquer comme des onglets. Créons donc cet arrière-plan. Ce sont certainement les sections, donc je vais sélectionner la section elle-même. Et puis je vais entrer dans le style, arrière-plan, l'arrière-plan, le type, la couleur. Je vais lui donner un gris foncé comme ça. Laissez-moi cliquer n'importe où ici. Et maintenant, c'est génial. Mais maintenant, notre colonne n'a plus de couleur. Je veux donc sélectionner la colonne, Notre colonne ici. Et je veux entrer dans le style, type d' arrière-plan et lui donner une couleur noire. Maintenant, c'est noir. Mettez à jour cela. Et prévisualisons les modifications. Défilement vers le bas. Et c'est comme ça que ça ressemble pour l'instant. Nous devons donc lui donner cette bordure et lui donner un rayon de bordure. Alors, bien qu'il soit encore sélectionné, notre premier, un style aller à l'intérieur. Frontière. Et nous allons lui donner une bordure solide. Et donnons un rayon de limite de cinq. Maintenant, donnons un sept. Et puis pour la largeur de la bordure, donnons-lui quelque chose comme donnons-lui un quatre pour l'instant et mettons à jour les modifications précédentes. Très bien, voyons quelle est notre référence. Il a une sorte de gris. Alors qu'il est toujours sélectionné, je veux dire ombre de boîte car j'ai remarqué que nous devions ajouter un box-shadow. Et lorsque nous cliquons sur le box-shadow, vous ne pouvez pas voir maintenant à cause de ces cadres, ces cadres d'éditeur que nous avons maintenant, mais l'ombre de boîte est déjà affichée. Permettez-moi de le mettre à jour et d'aller en aperçu pour que vous puissiez voir le box-shadow. Et puis, nous allons choisir, Allons-y. Nous allons sélectionner une section. Je veux augmenter le rembourrage en haut et en bas. Je vais donc d'abord sélectionner la section. Vaste rembourrage, haut. Donnons un 50. Maintenant, c'est 550. Et le bas 50. Et maintenant, nous lui avons donné une belle place en haut et en bas. Et nous pouvons faire de même pour les côtés, les deux côtés. Donnons peut-être une mise à jour 2220 ou écrivons ça. Et faisons quelque chose à propos de ces frontières. C'est trop lumineux. Alors que cette option est sélectionnée, la colonne elle-même. Allons à l'intérieur de la couleur des bordures. Et donnons également ce dock gris, puis mettons-le à jour. Prévisualisons les modifications. Surcharger super génial. Mais maintenant, les chiffres semblent toucher le haut de la colonne et nous avons besoin d'un bon rembourrage. Augmentons donc le rembourrage de la colonne elle-même. Cliquez donc dans cette colonne. Aller à l'intérieur avancé. Rappelez-vous que nous avions rompu ces liens il y a un instant. Maintenant, augmentons peut-être le rembourrage supérieur jusqu'à 15. Et le rembourrage du bas aussi. 15. Et nous allons maintenant copier. Cliquez avec le bouton droit sur la colonne, la colonne elle-même, cliquez avec le bouton droit sur Copier. Et ici, cliquez avec le bouton droit de la souris et collez le style. Vous avez donc collé ce style. Et répétons la même chose pour ces deux-là. Nous collons tous ces carreaux que nous avons appliqués à cette colonne. Maintenant, ça ressemble presque à eux. La prochaine chose que nous voulons faire est de dupliquer ça trois fois et de le faire glisser là-dedans. Faites glisser ça là-dedans et faites-le glisser là-dedans. Et maintenant, remarquez qu'ils touchent les bords, ce sont donc les marges droite et gauche. Nous allons donc choisir celui-ci. Nous allons sélectionner ces colonnes uniques. Et augmentons la bonne marge par quelque chose comme 10. Et le rembourrage gauche à 10, marge gauche, 10, dix ou droite. Ensuite, cliquez avec le bouton droit de la souris et copions ce style. Et collons ce style à l'intérieur de ces trois. Et maintenant, ils ont été correctement séparés. Mettons-le à jour. Prévisualisons les modifications. C'est vrai ? Défilons vers le bas et voyons ce que nous avons. Mais parfait. ne reste donc qu'un sous-titre pour la section. Je vais donc dupliquer ça et le faire glisser ici. Déposez-le juste là. Et nous pouvons appeler cela. Mes réalisations. Les chiffres sont corrects, mais nous devons évidemment modifier tous ces chiffres ici. Ils ne peuvent pas tous lire la même chose. Par conséquent, le fait de choisir ce contenu peut être remplacé par 51. Et c'est peut-être des clients. Changeons ensuite cela en CD. Des CD que vous avez couverts, peut-être 15 CD. Et la finale du 1er mai sera des années d'expérience, peut-être 25 ans et plus. En ce moment, nous en avons 25 ici. Mais nous pouvons venir ici au suffixe numérique ou au préfixe et ajouter quelques éléments. Disons donc un suffixe numérique. Nous pouvons ajouter le signe plus, suffit de frapper plus, et maintenant il apparaîtra ici, 25 ans et plus. Nous allons donc mettre à jour cela dans l'aperçu des modifications. Donc, faites défiler vers le bas. Très bien, j'adore ce que je regarde. Nous allons donc terminer avec cette section des réalisations. La prochaine chose que nous voulons faire est de créer ces derniers articles de blog ici. Et il extrait toutes ces données des de blog que vous avez déjà publiés. Voyons donc comment le faire dans la prochaine leçon. voit sous peu. 15. Affichage de les derniers publications de blog: Bienvenue de retour. Continuons. Nous voulons donc créer ces derniers articles de blog, sexuels. Et comme nous l'avons déjà mentionné, il tire des données de nos articles de blog déjà publiés. Cela signifie que nous avons besoin d'un billet de blog publié. Allons à l'intérieur de notre tableau de bord et créons quelques publications. Donc, à l'intérieur du tableau de bord, j'irai dans les publications. Cliquez dessus. Et nous avons un article de blog Hello World par défaut qui vient avec chaque nouvelle installation de WordPress. Bien sûr, je vais le déchirer parce que nous voulons créer le nôtre, Ajouter Nouveau ou juste quand nous serons ici, donnons un nom à un billet de blog. Je vais juste rentrer ici. Et je veux prendre ce nom ici. Copiez ça. Et passons à l'intérieur du tableau de bord et collons-le là-dedans. Je ne toucherai donc rien d'autre ici parce que nous essayons simplement de publier rapidement quelques articles de blog. Passons donc à l'intérieur paramètres et défilons vers le bas et cherchons une image en vedette. Fixons une image en vedette pour cet article de blog. Disons donc, par exemple, quoi s'agit-il ? Voyons les réglages corrects de l'appareil photo pour, oui, alors regardons une belle image pour les bons réglages de l'appareil photo comme celui-ci. Mettons l'image en vedette. Et nous allons le mettre à jour. Post mis à jour. Nous pouvons voir le post, mais revenons ici et créons des articles de blog mondiaux. Ajoutez nouveau ou RI, les deuxièmes articles de blog vont ici et saisissez ce nom et collez-le ici. Et bien sûr, dans le monde réel, vous allez créer le billet de blog et le publier. Mais maintenant, nous ne créons aucun contenu, nous ajoutons simplement le titre du blog, n'est-ce pas ? Donc, avant de publier, il faut ajouter une image en vedette. Voyons donc, je pense qu'il s'agit de photographies extérieures, donc je vais choisir ça. Et puis publié cela, publiez ce rappel. Nous devons en créer un autre. Ajouter Nouveau. Il s'agit donc des données qui seront extraites au recto de la page Web et qui s'y afficheront. Nous allons donc le copier et le coller là-dedans. Attendez, définissons l'image en vedette. Je ne sais même pas de quoi il s'agit, alors je vais juste m'asseoir sur cette publication. Nous avons donc défini notre image en vedette, lui donnant un nom. Revenons ici. Nous avons maintenant trois articles de blog. Ils ont un titre et une image en vedette. C'est le titre et il s'agit de l'image présentée. Donc, ce que nous avons, tout ce dont nous avons besoin. Pour revenir à l' espace de travail de notre page Elementor ici, nous voulons ajouter une seule section de colonne, et à l'intérieur de celle-ci, nous devons ajouter une grille de publication, qui est disponible par les modules complémentaires essentiels pour Elementor, mais il n'est pas actif par défaut, nous devons revenir à l'intérieur de notre tableau de bord et l' activer dans le plugin EIA. Allons donc dans le tableau de bord et cliquons sur les atomes essentiels. Allons à l'intérieur des éléments. faisant défiler vers le bas, vous remarquerez que sous éléments de contenu dynamique, la post-note n' est pas cochée, alors vérifiez-le. Faites défiler vers le haut et enregistrez les paramètres. Paramètres enregistrés. Nous avons maintenant ajouté ces éléments à notre arsenal ici. Mettons donc cette page d'abord à jour. Et maintenant qu'il est mis à jour, cela signifie que nous avons enregistré nos modifications. Rafraîchissons la page Control R ou Command R sur un Mac pour actualiser la page afin que la note postérieure soit disponible. Bon, donc maintenant si nous tapons la cupidité, il apparaît ici, Post Greed. Défilons donc vers le bas jusqu'au bas. Et rappelez-vous que nous avions ajouté cette section à colonne unique. Donc, tout d'abord, glissons cette cupidité de post là-dedans et déposons-le là. Maintenant, vous remarquerez nos trois articles de blog, nos articles prêts à apparaître. Et maintenant, augmentons cette marge en haut ici en sélectionnant la section avancée. Brisez ce lien là-bas, donnez-lui 100. Et maintenant, nous avons une belle marge au sommet. La prochaine chose que nous voulons faire est de cliquer n'importe où dans cette marge bleue. Nous avons donc sélectionné l'élément, la grille de poteau. Tout d'abord, nous devons lui dire d'où extraire les données. Nous pourrions donc utiliser des catégories. Mais pour l'instant, cette classe ne concerne pas les catégories, mais rappelez-vous que les publications ont des catégories. Vous pourriez donc avoir des articles sur la photographie extérieure, articles sur la photographie intérieure. Et quand quelqu'un vient sur votre site Web à la recherche de photographies extérieures, messages que vous avez définis dans la catégorie pour la photographie extérieure seront présentés . Mais à l'heure actuelle, par défaut, si nous n'avons aucune catégorie, les publications sont généralement classées comme Il existe donc une catégorie que nous classées. Il existe donc une catégorie que nous ne pouvons pas la supprimer. Nous pouvons donc extraire, par défaut, données à partir de là, juste pour être sûr que nous pouvons taper et classer et classer et qu'elles sont apparues plus de 8 ici. Et maintenant, nous sommes assurés qu' il extrait les données. Et la prochaine chose que nous voulons faire, c'est changer. Donc, tout d'abord, les publications par page, nous voulons en montrer trois. Donc, si nous avions sept articles de blog, nous n'en verrions encore que trois ici. C'est donc ce que cela signifie. Et réduisons cela pendant une seconde et développons les paramètres de mise en page. Nous voulons afficher trois colonnes ou écrire, mettre à jour cela. Et prévisualisons les modifications. Défilement vers le bas. Super génial, donc ils prennent déjà forme. Ne vous laissez donc pas tromper par leur apparence ici. Si nous actualisons la page, laissez-moi simplement Contrôler R pour rafraîchir leur apparence ici. Ou de la variété. Donc, en descendant ici. La prochaine chose que nous voulons faire est bien sûr de changer la couleur d'arrière-plan en Ryan avec notre couleur d'arrière-plan ici. Alors que cette option est toujours sélectionnée, sélectionnez n'importe où dans l'élément. Nous voulons entrer dans le style. Donc non, revenez à l'intérieur du contenu et cachons certains de ces détails ici. Passons donc aux styles de mise en page. Et ne montrons pas d'avatar. montrons pas le nom de l'auteur. Il n'est pas indiqué cette date. Ou peut-être pourrons-nous montrer le nom de l'auteur. C'est donc à vous de décider ce que vous voulez montrer. Je ne veux pas montrer le nom de l'auteur. Oui, je pense que c'est comme ça que j'aime ça. Juste le titre et quelqu'un peut en lire plus. Nous pouvons également montrer l'extrait si nous le voulons, mais je ne veux pas montrer que les œufs sont. Donc, en entrant dans le style, nous avons la couleur de fond de style carte postale. Changeons donc ça en noir. Il prend donc déjà la forme que nous voulons. Et la prochaine chose que nous voulons, c'est passer à typographie et changer la couleur du titre en blanc. Est-ce qu'il s'élargit ici ? Ici, c'est large. Et changeons la typographie elle-même en Monterrey. Monterrey. Et augmentons la police à 800. Et je veux le centraliser comme ça. Ensuite, développons le style de bouton Lire la suite ou vers la droite. Changeons la couleur du texte en blanc. Et puis choisissons cette couleur jaune. Copiez ça. Et changeons le type d'arrière-plan 2, cette couleur jaune. Els change ça dans cette colonne, mec. Très bien. Donc, la prochaine chose que je fais est augmenter le rembourrage sur le bouton ici. Comme vous pouvez le constater, les mots touchent les bords du bouton. Donc. Allons au rembourrage et cassons ça. Donnons peut-être 30 à gauche, 30 à droite. Essayons maintenant. Gauche et droite 2020. Et puis le haut et le bas peuvent être 10101055 c'est correct. Très bien. Et puis donnons un rayon de bordure de cinq pour lui donner ce coin arrondi comme ça. Et ensuite, brisons cette marge. Et donnons une marge supérieure. Augmentons et utilisons notre œil pour voir jusqu'où nous devons aller, disons 15. Et sur la marge de gauche, augmentons peut-être la marge de gauche à 100. Oui, un 100 est bon pour l'instant. Changeons cette police en noir en noir. Et puis, en survol, passons au blanc. Et puis modifions la couleur du type d'arrière-plan en rouge doux. Alors, collons ça là-dedans. Donc, sur celui qui mange cette lecture douce, mettez-le à jour. Et maintenant, nos images présentent des coins nets et nos images de référence ont des coins arrondis. Faisons donc quelque chose à ce sujet. Donc, en réduisant cela et en entrant dans le style miniature, donnons-lui un rayon de bordure de 20. Et maintenant, il a ce coin arrondi. Mettez à jour cela. Et maintenant, dupliquons ce titre. Et faisons-le glisser là-dedans. Derniers articles de blog. Et puis, dupliquons ce qui est bien, et déposons-le juste là. Comme ça. Voici donc une brève description de ce à quoi s'attendre ici. Mettez à jour cela. Et prévisualisons les modifications. Défilement vers le bas vers le bas ou vers la droite. C'est donc ce que nous avons actuellement. Je vous conseille de continuer à jouer avec les paramètres pour voir ce que vous pouvez produire d'autre avec ces post-cupides. La prochaine chose que nous voulons faire est de créer ce formulaire ici. C'est un autre appel à l'action génial. Obtenez des conseils photographiques, une nouvelle livraison dans votre boîte de réception. C'est donc un bon moyen d'obtenir des e-mails pour que vous puissiez leur parler régulièrement. Voyons comment créer cette section d'appel à l'action dans la leçon suivante. Je vous verrai bientôt. 16. Ajouter un formulaire: La prochaine chose que nous voulons créer est cette zone d'appel à l'action qui comporte une inscription, et c'est une partie assez importante d'une page de destination car elle vous permet de capturer les contacts de l'utilisateur. Et c'est un élément très important des activités en ligne. Voyons donc comment le faire dans nos projets. Donc, je saute à l'intérieur ici. Et ce que nous devons faire, c'est aller ici, monter, faire défiler vers le haut et dupliquer cette section. N'oubliez pas que nous avons déjà créé quelque chose comme ça. Et maintenant que nous en avons deux, je vais simplement faire glisser ça jusqu'au bas. Et maintenant, nous pouvons simplement modifier cela. Il suffit donc d'aller à l'intérieur ici, sélectionner cette section, puis de l'arrière-plan de style. Je vais choisir une autre image. Je pense que je vais choisir celui-là. Insérez un support. Et c'est là que nous l'avons. Maintenant, c'est une image différente. Et c'est l'original. Allons ici et vous remarquerez que dans notre page de référence, celle-ci est un peu plus grande et c'est à cause de la forme et de tout le contenu. Rappelez-vous que je vous ai dit que la hauteur des sections est déterminée par la quantité de contenu qu'elle contient. Alors, tout d'abord, prenons ces textes. Je vais le copier, le sélectionner et le sélectionner. Collez-le là-dedans. Je vais aller de l'avant et choisir ça. Et maintenant, c'est Lorem Ipsum ou Ride. La prochaine chose que nous voulons faire est de créer ce formulaire. Pour ce faire, nous allons utiliser un code de plug-in de formulaire pour terminator. Alors installons-moi plus tard. Mais tout d'abord, sautons de côté de notre page ici, mettez-la à jour et prévisualisez les modifications. Défilement vers le bas vers le bas ou vers la droite. C'est donc ce que nous avons actuellement. Donc, aller à l'intérieur de notre tableau de bord coïncide. Plugins, ajoutez de nouveaux. Et dans notre barre de recherche ici, nous saisirons le nom de ministre. Comme les formulaires Terminator for Minister. Où est-il ? Oui, juste ici. 200 000 installations actives de WP Mu dev. Alors installez maintenant, exécutez ou roulez, activez. Et maintenant, quatre ministres sont installés. Nous pouvons donc y accéder à partir de ce menu de gauche ici. Il suffit donc de cliquer quatre minutes. Nous abordons donc cette page de destination avec un résumé des statistiques. Donc, ce que nous voulons faire, c'est créer un formulaire. Ainsi, la création sera présentée avec des modèles préfabriqués. Et oui, allons-y et cliquons sur l' inscription à la newsletter. Continuez. Donnons un nom. Formulaires d'inscription, formulaire d'inscription. Créons-le. Et maintenant, il a été créé. Le voici donc avec son nom, a quelques options ici dans ce menu déroulant. Et vous verrez comment nous pourrons utiliser ces codes courts dans un instant. Pour l'instant, jetons un coup d'œil à ce que nous avons. Sur la gauche, nous avons donc différents panneaux qui ont différentes étapes de la création de votre formulaire. Ainsi, lorsque vous créez votre formulaire, voici les étapes que vous traversez. Par conséquent, vous créez d'abord les champs, puis vous définissez les champs. Ensuite, vous déterminez comment le formulaire se comportera lorsque des utilisateurs soumettent des données, puis configurez tous les paramètres des notifications par e-mail lorsque quelqu'un soumet des données via un formulaire, puis si vous souhaitez l'intégrer. et tous ces trucs. Mais pour l'instant, ce que nous voulons faire, c'est créer un formulaire à afficher ici dans le front end comme ça. Vous remarquerez donc que nous avons deux champs et que nous avons ces options pour insérer des champs. Si nous cliquons dessus, nous pouvons ajouter d'autres champs à notre formulaire, mais nous n'avons besoin que du prénom et de l'adresse e-mail. Si nous prévisualisons cela, c'est à quoi cela ressemblera. Et sortons de là. Et il possède le bouton S'abonner. Nous allons donc prévisualiser cela. Et le bouton indique s'abonner. C'est donc notre forme. Nous allons donc publier ce formulaire. Et une fois publié, on présentera ce code court que nous pouvons copier en cliquant ici. Nous l'avons copié. Le code court a été copié avec succès. Ou nous pouvons monter ici, inscrire au formulaire, cliquer dessus et copier le code abrégé. Une fois que vous avez cliqué dessus, vous copiez le code abrégé. En entrant dans notre page ici, notre espace de travail. Nous devons monter ici et cliquer sur cette minuscule icône et dire un code court. Et faisons glisser cet élément de code court ici. Allons-le là-dedans. Et alors qu'il est toujours sélectionné, nous pouvons entrer le code court que nous venons de copier ici. Nous ne faisons que copier ce court code. Et maintenant, collons-le ici. Maintenant, cela va afficher ce formulaire pour nous. Débarrassons-nous de ce bouton et appliquons maintenant cela. Et nous allons vraiment changer vendredi. C'est donc ce que nous avons pour l'instant. En revenant à l'intérieur, Allons à l'intérieur de l'apparence. Et l'apparence intérieure. Vous remarquerez que nous avons ici ces différentes options, matériaux plats, audacieux et aucune. Choisissons plat, ce qui élimine les bordures des champs de saisie. Et puis passons à l'intérieur du costume sous les couleurs. Allons à l'intérieur du costume, faites défiler vers le bas et sélectionnez le bouton Soumettre. Cela devrait faire apparaître les différents paramètres du bouton, pour la couleur d'arrière-plan. Passons à ça, laissez-moi choisir ce jaune. Copiez ça à l'intérieur. Collons ce jaune et propre Hoover, qui voulait être lu. Je vais donc prendre ces lectures douces ici et les coller là-dedans. Et en nous concentrant, nous voulons que le rouge soit bien, collez-le là-dedans. Nous allons donc mettre à jour cela et prévisualiserons les modifications. Ou bien, donc ça a l'air génial. Sautons donc ici et appliquons les modifications. Ainsi, ces changements se reflètent désormais dans notre espace de travail élémentaire ou notre trajet. Nous allons donc prévisualiser les modifications. Très bien. C'est donc ce que nous avons maintenant en vol stationnaire. Il est rouge et dans son état normal, il est jaune. Passons donc à la zone de contact ici. Nous allons donc ajouter la section contact. Donc, ce que nous voulons faire, c'est ajouter une section à six colonnes. Cette section est donc ici avec six colonnes. Et nous allons faire glisser ça jusqu'à notre barre de cinq points juste là. Et faisons de même pour ce 5.5. Et enfin pour ce 5.5, quelque part là. Et maintenant, ce que je veux faire, c'est venir ici et dupliquer ça. Faites-le glisser jusqu'au bas, juste ici. Ensuite, dupliquez-le et faites-le glisser jusqu'au bas. Déposez-le là. Revenez en arrière et copiez cela, dupliquez-le. Ce que nous voulons faire, c'est dire au bureau. Et bien sûr, là où se trouve le bureau, c'est cette zone juste là. Et je veux dupliquer ça, puis faire glisser ça là-dedans. Dupliquez-le, faites-le glisser là-dedans. Et vous connaissez l'exercice. Mais maintenant, cela peut être déposé là-dedans parce que rappelez-vous que c'est trop petit, alors je vais faire glisser ça, déposer ça là-dedans. Redimensionnez cela à 5.55.5, quelque part il y a 5.5. Je ne peux pas avoir un 5.5, mais je vais dupliquer ça déposer de la soie et la déposer là-dedans. Alors, agrandissez-le, tombant là. Le 5.5. Ensuite, dupliquez ça. Déposez ça là-dedans. Dupliquez ça, déposez-le là-dedans. Allons-y et prenons ce numéro. Déposez-le là-dedans, collez-le dedans. Envoyez-moi un e-mail. Appelez-moi. Mettons-le à jour et prévisualisons les modifications. Droite. Faisons défiler jusqu'au bas. Et c'est ce que nous avons. Mais nous devons faire quelque chose remédier à cette marge au sommet. Revenons ici, sélectionnons cette option avancée, rompons ce lien. Nous avons donc affaire au sommet, seulement 100. Et mettons à jour cela. Maintenant que nous avons fini avec la zone de contact, allons donc prévisualiser cela. Sec. Faisons défiler jusqu'au bas. Parfait. Maintenant que nous avons fini avec la section contact, créons cette section cartographique. Cela vient directement de Google Maps. 17. Aidez-moi à enseigner un élément à 10 000 élèves: Bonjour mon ami. Tout d'abord, je tiens simplement à vous remercier de m'avoir rejoint dans ce cours et d'avoir choisi d'apprendre de moi. Et je tiens également à vous féliciter pour être arrivé si loin dans la classe. Le fait que vous soyez arrivé aussi loin dans la classe signifie que vous gagnez de la valeur de la classe. Je t'apprécie vraiment et j'espère que tu apprécies le cours en lui-même. Cela étant dit, j'ai besoin de ton aide. J'ai pour mission d'enseigner à au moins 10 000 entrepreneurs comme vous à utiliser elementary pour créer leurs propres sites Web ou pages de destination pour vendre leurs produits. Voici comment vous pouvez nous aider. Vous voyez quand un nouvel étudiant rejoint un cours sur Skillshare, puis aime ce cours et laisse un avis. Cela permet aux autres élèves savoir à quoi s'attendre de la classe. Et quand une classe reçoit de nombreuses critiques de la part des étudiants, Skillshare dit : «  Hé, tu sais quoi ? Ce cours suscite beaucoup d'engagement et de nombreuses critiques de la part des étudiants. Cela doit donc être utile. Cela doit donc être utile. Nous allons donc le pousser vers le haut dans la bibliothèque pour qu'il soit plus facile à découvrir par les nouveaux étudiants. L' algorithme Skillshare pousse donc ce cours vers le haut et le rend plus visible plus facile à découvrir pour les nouveaux étudiants. Parce qu'il a reçu des critiques positives. Et c'est là que tu interviens. Rejoignez-moi dans cette mission et m'a aidé à enseigner à au moins 10 000 étudiants comment utiliser Elementor, comment créer de belles pages de destination, sites Web fonctionnels en laissant un avis dans ce cours et leur indiquant à quoi s'attendre de ce cours. Cela ne vous prendra que deux minutes et c'est terminé. Mais votre évaluation aidera grandement les nouveaux étudiants, les futurs étudiants, à savoir à quoi s'attendre de la classe. La classe répond à vos attentes. Cela a-t-il dépassé vos attentes ? Si vous avez des questions, n'oubliez pas que vous pouvez toujours les poser dans la zone de discussion sous cette vidéo et je serai en mesure de vous aider. Je réponds toujours à chaque question ou commentaire que les étudiants laissent dans mes cours. Cela étant dit, je veux juste vous dire «  profitez bien du cours » et je vous verrai à la prochaine leçon. Paix. 18. Ajouter une carte Google: Bienvenue de retour. Maintenant, dans cette leçon, nous voulons ajouter ce Google Maps afin que les gens puissent nous voir si vous êtes photographe et quelqu'un a pris rendez-vous avec vous, ou si vous souhaitez y entrer clients pour pouvoir trouver votre bureau. Vous souhaitez avoir une carte sur votre site Web, sur votre page de destination. Voyons donc comment ajouter ces cartes. Sauter à l'intérieur de notre espace de travail juste ici. Ce que nous voulons faire, c'est ajouter une section pleine largeur, seule colonne, une section pleine largeur. Et donnons une marge supérieure de 100. Donc, en entrant dans l'avancée, en brisant ce lien, nous avons donc affaire à une marge supérieure. Donnons 100. Et maintenant, sélectionnons le signe plus ici. Et à l'intérieur d'ici, tapez carte. Nous avons ici quelques options de carte. Celui que nous voulons Epi, c'est Google Maps. Déposez-le là-dedans. Et maintenant, nous avons différentes options que vous pouvez remplir ici. Par exemple, ici, vous devez entrer votre emplacement réel ou l'emplacement de votre bureau ou de votre studio. Nous allons donc le mettre à jour et prévisualiser les modifications. Donc, faites défiler vers le bas ou vendredi, donc maintenant c'est en direct sur la page Web. La prochaine chose que nous voulons faire, et les gens peuvent passer à la carte Google. Passons donc simplement à cette partie de la ville. Et nous y allons et ils peuvent se déplacer et zoomer s'ils le souhaitent. Il s'agit de Google Maps intégré à notre site Web en le plaçant dans cette div. Maintenant que nous avons fini avec une carte, la prochaine partie restante est le pied de page et nous en avons fini avec la page de destination. Voyons donc comment le faire dans la prochaine leçon. Je vous verrai bientôt. 19. Créer le pied de: Bienvenue de retour. Dans cette leçon, nous sommes sur le point de terminer la création de la page de destination, mais nous devons ajouter le dossier et bien sûr rendre la page réactive avant de terminer les choses. Nous allons donc sauter directement à l'intérieur de notre page. Et maintenant, ce que nous voulons faire, c'est quitter cette page maintenant parce que nous avons fini modifier la partie principale de la page. Vous voulez donc quitter ici et entrer dans le tableau de bord. Je fermerai cette sortie vers le tableau de bord. Je vais sortir juste là. Et je vais entrer à l'intérieur de l'apparence, Elementor, header and footer builder. Et maintenant, nous voulons créer un dossier. Je vais donc ajouter un nouveau, et ça va sauter ça. Et passons directement au nom de la 41e. Mon pied de page sélectionne le dossier. C'est le type de modèle. Je veux qu'il soit visible sur l'ensemble du site Web et que n'importe qui puisse le modifier. Alors, la prochaine chose ici, Elementor pleine largeur, disons pas de barre latérale, étirement vers l'avant. Désactivons ces quatre paramètres juste là. Et ensuite, publions ça. Maintenant et maintenant. Modifiez avec Elementor car nous le créons visuellement dans le front end de notre espace de travail. La première chose que nous voulons faire est d'ajouter le logo. Ajoutons donc une section pleine largeur, une section colonne unique, c'est-à-dire la largeur. Et ajoutons un élément d'image. Et nous avons sélectionné cette image, je vais sélectionner ici et sélectionner le logo. Insérez un support. C'est la bonne taille. Je l'ai créé pour être très petit et c'est pourquoi il s'adapte bien ici. La prochaine chose que nous voulons faire est de cliquer sur la petite icône juste ici et de sélectionner l'éditeur de texte. Faites-le glisser sous le logo. Nous allons donc copier ce texte de copyright. Copiez ça. Bien que cela soit encore sélectionné, je vais déposer ça là-dedans et je vais entrer dans le style, le centraliser. Changeons la couleur en blanc. Et changeons la famille de polices en Montserrat. Très bien. Réduisons la taille à 12. Parce que c'est des informations sur les droits d'auteur Il n'a pas besoin d'être très grand. Mettons-le à jour. Et au fur et à mesure que nous mettons à jour cela, cliquons dessus et saisissons social. Parce que nous voulons ajouter des icônes de médias sociaux. Faites-le glisser et déposons-le là-dedans. Et maintenant, ces icônes sont trop grandes, alors passons à l'intérieur du style et de la taille. Nous allons le réduire jusqu'à ce point juste là. Très bien, puis sélectionnons ce texte. Accédez à Marge avancée, rompez ce lien et la marge inférieure. allons le réduire pour que nous puissions les rapprocher un peu plus. Et mettons à jour cela. Je pense que ça me plaît. Prévisualisons les modifications. Voilà donc à quoi ressemble notre pied de page. Donc, je retourne à l'intérieur. Maintenant que nous avons terminé le pied de page, nous pouvons fermer cette page. Je vais donc entrer dans le contenu. Non, je vais entrer dans le menu de la clique de hamburger Exit to Dashboard. Et maintenant, à l'intérieur des pages. Sur la page d'accueil, je clique avec le bouton droit sur Afficher et ouvrir le lien dans un nouvel onglet pour que nous puissions le voir. Et c'est là. Voyons cela de haut en bas, car nous en avons fini avec tout le contenu. Il ne reste plus qu' rendre la page réactive. C'est vrai ? Nous y voilà. Les textes animés, il fonctionne parfaitement. Je viens de rappeler que nous devons faire quelque chose à propos de ce bouton. Cela n'a pas l'effet que nous avons eu sur la page d'origine. Laissez-moi simplement faire défiler vers le haut. Nous devons ajouter cet effet flottant et je vais vous montrer comment le faire. Maintenant, en sautant sur notre page, c'est celle que nous venons de concevoir, en faisant défiler vers le bas. C'est vrai ? C'est donc ce que nous avons. Nous les avons créés. Soyez fier de vous. Vous les avez créés jusqu'ici si vous avez suivi et que vous êtes arrivé jusqu'ici, donnez-vous une tape dans le dos. Offrez-vous une pause aujourd'hui, regardez un film ou quelque chose de ce genre. Mais maintenant, notez que notre dossier n'a pas cette marge supérieure, et qu'il doit également avoir ce fond gris. Faisons défiler jusqu'au bas de cela, il faut avoir ces arrière-plans gris. Donc, en revenant sur notre page, non, dans notre pied de page. Allons à l'en-tête et au pied de page élémentaires Apparence. Ou nous pouvons aller au front end ici. Et si nous survolons Elementor Edit avec Elementor, nous pouvons cliquer sur mon pied de page et cela ouvrira espace de travail du dossier et nous pourrons modifier la photo à partir de là. Très bien, donc nous y voilà. Nous allons sélectionner la section elle-même. Allez dans Avancé, rompre ce lien. Donnons une marge supérieure de 50. Non. Ça devrait être le rembourrage. Désolé pour ça. C'est donc le haut de 50 rembourrage. Comme ça. Et nous allons vous en donner 50 en bas. Et passons à l'intérieur du style, de l'arrière-plan. Donnons cette couleur grise. couleur gris foncé comme ça. Gris foncé, j'aime bien ça. Alors mettez-le à jour. Et maintenant, si nous revenons arrière et cliquez avec le bouton droit sur notre page, cliquez avec le bouton droit sur Afficher. Et puis en sautant, regardez notre page. Faisons défiler jusqu'au bas. on a l'air super génial. Mais maintenant, augmentons le rembourrage juste ici au bas de la carte pour qu'il y ait un peu plus de noir en bas. Revenons donc ici. Passons le curseur sur l'édition d'éléments avec Elementor et cliquons sur Modifier avec Elementor. Nous pouvons donc modifier la page elle-même. Appelons le bas. C'est ici que nous avons notre carte. Ce que nous devons faire, c'est cliquer sur cette section de carte elle-même Advanced, et donnons-lui une marge inférieure de 50. Oui, donnons 50 à cette date, mal. Nous pouvons maintenant prévisualiser les modifications. Allons grandir jusqu'au fond. Très bien, donc nous avons plus de place ici, un peu plus noir juste en dessous de la carte. Et c'est la page de destination. Nous en avons fini avec le design sur le bureau. Il est maintenant temps de rendre la page de destination réactive sur différentes tailles d'appareils avant d'emballer les choses. Je vous verrai donc dans la prochaine leçon. 20. Conception réactive : The navbar: Bienvenue de retour. Nous avons déjà rendu la page de destination superbe sur le bureau. Il est temps de ne pas le rendre superbe sur des écrans plus petits que les smartphones et les tablettes. Donc, sans perdre plus de temps, sautons dans le tableau de bord et commençons. Et nous allons commencer par un bar de navigation. Alors ici, passons à l'intérieur du générateur d'apparence, d' élémentaire, d'en-tête et de pied de page. Et cliquons sur Modifier avec Elementor. Modifions la barre de navigation avec elementor. Très bien, donc nous y voilà. C'est ici que nous éditions la barre de navigation. Et maintenant, je veux le rendre réactif. En descendant ici, cliquons sur cette icône du mode réactif. Il va faire apparaître cette barre ici avec toutes ces configurations qui nous aideront à rendre la page réactive. Comme vous pouvez le constater, nous avons des paramètres mobiles, des paramètres de tablette et nous sommes actuellement dans les paramètres du bureau. Passons donc au mobile. Nous y sommes donc. Donc ce que nous voulons faire, c'est que si je pouvais revenir à la taupe de bureau pendant une seconde, je veux vous montrer quelque chose. Dans cette section pleine largeur, nous avons deux colonnes, la colonne logo et la colonne de menu. Chacune de ces deux colonnes occupe donc un pourcentage de la section pleine largeur. Ainsi, lorsque nous passons aux écrans mobiles, la section est toujours pleine largeur, mais nous devons maintenant diviser ces deux colonnes en 100 % de cette colonne pleine largeur. Nous allons donc le faire en sélectionnant la première colonne ici, la colonne qui porte le logo. Nous allons le sélectionner. Et sous la largeur de la colonne Disposition, disons 50 pour cent. Ensuite, nous allons sélectionner la deuxième colonne. Et sous la colonne Disposition avec, disons 50. Et maintenant, ils sont tous deux dans la même ligne. Ce que nous devons faire ensuite, le menu Sélectionner, cliquez n'importe où à l'intérieur. Et sous la mise en page. Défilons vers le bas et trouvons l'alignement. Sous alignement réactif. Alignons ça vers la droite. Et maintenant, c'est du bon côté. Nous allons grandir vers le haut. Allez dans le style, nous voulons le rendre large. Nous allons réduire le menu principal et développer le déclencheur principal et fermer l'icône. Donnons donc une couleur de fond blanche. Pour l'instant, c'est blanc. Et en survol, disons le fond de ce jaune. Nous allons donc sélectionner l'arrière-plan. Je vais choisir cette couleur jaune. Copiez ça. Et revenons ici. Changeons la couleur en jaune. Donc, en survol, c'est jaune. Bon, mettons à jour ça. Et maintenant, un nouveau clic sur l'icône elle-même pour faire apparaître le menu déroulant. Vous voyez que le menu déroulant est de couleur blanche. Alors réduisons le déclencheur principal et passons à la liste déroulante, développons le menu déroulant. Et tout d'abord, faites défiler vers le bas et recherchez la distance maximale. Déposons-le en dessous de ce point pour que le menu soit visible. Poussez-le un peu vers le haut. Ensuite, vous remarquerez que les polices sont blanches par défaut et jaunes au survol. Faisons donc quelque chose à ce sujet. Donc, faites défiler vers le haut tout en étant toujours sous la liste déroulante, la topographie, la couleur du texte. Mais depuis ce jaune. Et maintenant, ils sont jaunes. Et en vol stationnaire, nous voulons qu'ils soient blancs. Et ainsi de suite. La couleur est blanche, normale, jaune. La prochaine chose que nous voulons faire est de changer la couleur d'arrière-plan. Dans des circonstances normales. Nous voulons que ce soit aussi gris. C'est vrai ? Mettons-le à jour. Et prévisualisons les modifications. Très bien, maintenant pour voir à quoi il ressemble sur les écrans mobiles, appuyez sur Control Shift I ou mes fenêtres pour ouvrir les DevTools. Cela va faire apparaître les DevTools. Et je peux cliquer sur cette minuscule icône ici, icône du mode responsive. Et cela va changer la vue pour imiter les appareils mobiles. Et dans ce menu déroulant, nous pouvons imiter de nombreux types d'appareils différents, y compris les iPad, les iPhones et les galaxies. Voici donc à quoi ça ressemble actuellement sur les téléphones mobiles. Si nous développons cela, nous allons nous effondrer. Il est élargi. Oui, je pense que ça me plaît. Faisons quelque chose à propos de cette frontière ici. Alors qu'ils sont toujours sous la liste déroulante, faisons défiler vers le bas et cherchons un séparateur. Ici, ici, diviseur, style de bordure. Changez cela par aucun. Cela devrait se débarrasser de ces lignes juste là. Et maintenant, les menus déroulants sont bien meilleurs. Nous allons donc mettre à jour cela. Et prévisualisons les modifications. Très bien, donc sur cette page, contrôlez Maj I, et je cliquerai sur cette minuscule icône juste là. Affichez le mode réactif. Cliquez sur l'icône juste là dans notre menu. Ça a l'air génial, j'aime bien. La prochaine chose que nous voulons faire est rendre le reste de la page réactif. Nous en avons fini avec le bar de navigation. Je vous verrai bientôt. 21. Conception réactif : Le corps principal: Très bien, je l'aime bien. La prochaine chose que nous voulons faire est de rendre le reste de la page de destination génial sur les téléphones mobiles. Revenons ici. Maintenant que nous avons fini avec les menus du smartphone, quittons cet espace de travail. Je vais donc cliquer sur ce menu Burger et quitter le tableau de bord. Ensuite, sautons à l'intérieur des pages. Et trouvons notre page. Nous voici donc notre page de destination. Nous allons éditer avec Elementor. Passons donc en mode réactif et voyons à quoi il ressemble. Cliquez donc sur la vue mobile. Commençons par les textes animés. Cliquez sur ce bouton. Maintenant, entrez dans le style et le style, je vais passer à des textes fantaisie, des textiles fantaisie et de la typographie qui ont réduit la taille jusqu'à cet endroit. Et puis, nous allons nous effondrer. Je vais entrer dans le suffixe textile. Je veux maintenant réduire la taille de ce point jusqu'à ce point. Mettons-le à jour. Et bien qu'il soit encore sélectionné, passons à l'étape avancée. Et brisons ce lien de marge qui devrait les séparer comme ça. La prochaine chose que nous voulons faire est de cliquer sur cette colonne ici, d'aller dans Advanced. Donnons-lui un remplissage de 15 sans rompre le lien pour qu'il s'applique à tous les champs ici. Alors 15, et disons 20. 20 ça va. Nous devons pousser cela un peu plus haut. Donc, en sélectionnant cette section, avançant à l'intérieur, cassons, cassons le rembourrage. Et maintenant, poussons-le progressivement bas jusqu'à cet endroit. Je l'aime bien là-bas. Passons ensuite au bouton. Je vais sélectionner le bouton lui-même. Et je vais aller à l'intérieur avancé. Brisons le lien de marge. Et cela devrait se débarrasser de tous les paramètres qui étaient là. Très bien, faisons défiler vers le bas. Je pense que j'aime bien où tout se trouve. Certaines personnes préfèrent tout ce qui se trouve au milieu, mais je pense que j'aime bien où tout est positionné de gauche à droite. Nous pouvons aller de l'avant et sélectionner ces colonnes ici. M pour cela, nous pouvons également lui donner un rembourrage de 20 sans casser le lien. Et ce 20 a été appliqué à toutes ces colonnes car elles se trouvent à l'intérieur de cette colonne principale. Il s'agit d'une intersection. Ce sont des intersections. Ensuite, allons à l'intérieur ici. Choisissez une lampe qui semble correcte. Très bien, donc ces boîtes sont en contact ici. En haut et en bas. Nous devons augmenter la marge supérieure et inférieure. Je vais donc sélectionner l'une des cases, entrer dans Advanced, je vais lui donner une marge de dix. Et maintenant, cela devrait s'appliquer à tous les champs, n' importe quel espace 2D sur tout. Je vais donc sélectionner, je clique avec le bouton droit, je le copierai, puis je cliquerai clique avec le bouton droit, je le copierai, puis je cliquerai dessus avec le bouton droit de la souris et je collerai le style. Je vais répéter la même chose pour ces deux-là, style de collage et enfin, le style de collage. Et maintenant, ils sont bien espacés. Continuons. J'aime bien là où ces oppositions, on peut sélectionner cette colonne, aller à l'intérieur avancé. Donnons une marge d'essai au genou de 20 pixels. Comme ça. Je devrais espacer l'image depuis les bords. C'est vrai ? Ensuite, nous allons sélectionner cette colonne ici. Avancé 20 ans, je devrais créer un peu de place entre cette forme et les bords. Allons ici. Sélectionnez ce sous-titre. Alignons ça au centre. Sélectionnez-le. Je vais le sélectionner. Va à l'intérieur du style, au milieu. Faites de même pour cela. Et enfin, ce style. Aligner le centre. Je pense que j'aime bien où se trouve la carte, mais nous pouvons également lui donner un peu de rembourrage. Je vais donc sélectionner la colonne elle-même, avec un remplissage de 20. Et puis je pense que j'aime bien où se trouve le pied de page, donc nous n'allons pas y toucher. Mettons-le à jour. Et passons en revue les changements. Génial, donc en appuyant sur Control Shift I, je clique sur cette icône juste ici. Et passons à la vue mobile. C'est ainsi que cela devrait ressembler sur les écrans mobiles. Maintenant, le menu, la barre de navigation est super géniale. Le menu déroulant fonctionne correctement. Et si nous commençons à faire défiler, contrairement à la section héros, j'aime bien où tout se trouve. Je pense donc que cela marque la fin de la classe. J'ai vraiment aimé vous apprendre et j' espère que vous avez aimé le regarder. Mais surtout, j'espère que vous avez appris quelque chose. J'espère que vous avez acquis une nouvelle compétence que vous pouvez maintenant utiliser dans des projets réels. Je m'appelle Ken Visa. C'est toujours un plaisir d'être avec vous ici. Et nous continuerons la prochaine fois.