Cours Elementor pour débutants - Apprendre en concevant la page d'accueil de Lyft

1. Introduction: Bienvenue à un autre cours élémentaire génial avec moi peut versa. C' est toujours un plaisir de vous avoir ici. Si vous êtes un débutant, je vais vous montrer les différents outils et fonctionnalités d'Elementor et je ne vais pas seulement regarder cela comme une vue d'ensemble, nous allons concevoir des projets réels, concevoir les pages de destination de marques. Et dans cette première classe commencera par feuille. Si vous n'avez pas de feuille. Leaf est une entreprise qui ressemble à Uber ou bateau. Ils traitent des droits, du covoiturage et tout ça. Ils ont une application. Ils ont donc cette page de destination très impressionnante que nous allons regarder dans un court instant. Et puis nous allons concevoir les pages de destination dans Elementor. Nous allons regarder les défauts d'Elementor et nous allons regarder la force. Et au moment où nous avons terminé, vous aurez compris comment trouver constamment la page de destination impressionnante par vous-même. Donc, si vous avez envie d'apprendre à créer meilleures pages de destination pour votre site Web ou celui de votre client. Joignez-vous à moi dans ce cours et je vous promets que les deux prochaines heures vous seront comblantes, ou surtout, seront bénéfiques pour votre avenir. Alors rejoignez-moi. 2. La page d'accueil nous concevons: Nous voici donc sur la page de destination leaf.com. C' est ce qui va essayer de concevoir aujourd'hui. Et donc si nous pouvions juste faire défiler vers le bas et voir ce que nous avons en réserve pour nous. On y va. Alors que nous concevons ce sera d'essayer de comprendre comment utiliser les outils et les fonctionnalités d' Elementor pour construire une page de destination de travail moderne qui peut convertir les visiteurs en clients. Donc, sans perdre plus de temps, commençons. 3. Mise à jour rapide L'assistant de configuration d'éléments: 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. Installer les plugins: La première chose que nous devons faire est d'installer les plugins que nous allons utiliser. Donc, nous allons aller de l'avant et les installer tous en même temps et les activer. Et au fur et à mesure que nous concevons la page de destination, vous arrivez à comprendre où chaque plugin sera utilisé. Alors allons à Plugins, Ajouter Nouveau, et cherchons Elementor. Allons l'installer. Et pendant que nous y sommes, allons vers le bas dans le générateur d'en-tête et de pied de page d'installation Elementor. Nous devons également chercher un autre plugin appelé formulator. Ces autres sont en train d'installer en arrière-plan. Alors, cherchons le formulateur. Cela nous permettra de créer ces minuscules formes ici. Alors installons ça. Et j'ai une recherche dans la bibliothèque de recherche. Et cela nous permettra de créer une barre de recherche en haut et partout ailleurs qui aura besoin d'une barre de recherche. Donc, une fois que cela est fait, allons dans les plugins installés et activez-les tous. Donc il suffit de confirmer que vous avez tous ces éléments et sélectionnez, Activer dans le menu déroulant, puis appliquer. Bon, Donc tous nos plugins sont maintenant installés et activés. 5. Installer le thème: Juste au cas où vous voulez changer le thème qui est actuellement installé. C' est le moment de le faire. Et bien sûr, je ne veux pas utiliser le thème qui vient par défaut avec une nouvelle installation WordPress, ce qui est pour mon cas, 2021. C' est le thème actuel. Je veux ajouter Nouveau, et je vais chercher Astro. C' est l'un de mes thèmes préférés car c'est un thème polyvalent que vous pouvez utiliser pour de nombreux types d'entreprises différents. Magasins en ligne, blogs personnels, vous le nommez. Astro est un thème super génial que je vous recommande si vous voulez un beau thème polyvalent que vous pouvez utiliser pour vos projets WordPress. Alors je vais l'installer. Allons l'activer. Impressionnant. Alors maintenant, fermons ça. Pour l'instant, notre thème actif est Astro. 6. La barre de navigation: Alors passons maintenant à la toute première chose et créons la barre de navigation supérieure. Donc, nous allons entrer dans l'apparence, Elementor, le constructeur d'en-tête et de pied de page. Alors allons de l'avant et ajoutons de nouveaux. Donnons-lui un nom. Maintenant, barre par exemple. Et appuyez sur Publier. Donc maintenant pour le type de modèle, c'est un en-tête. Donc, sélectionnez en-tête, afficher sur l'ensemble du site Web. Qui devrait le voir ? Tout. Les personnes qui visitent votre site Web. Et mettons-le à jour. Et ici, sur ce côté droit, nous avons quelques réglages qui viennent avec Astra. Et dans la barre latérale, sélectionnez aucune barre latérale. Et pleine largeur étirée. Je vais désactiver l'en-tête principal, désactiver l'en-tête mobile, titre et le pied de page, et je vais cliquer sur Mettre à jour. Maintenant que nous l'avons configuré dans le backend, allons le concevoir visuellement dans le front-end avec Elementor. Donc cliquez sur qui sera redirigé vers l'extrémité frontale où nous pouvons maintenant commencer à construire ceci. Donc nous y voilà. Si vous êtes nouveau à Elementor, vous devez penser en termes de colonnes. Et cette barre de navigation a trois colonnes. Il y a une colonne qui contient cette barre de navigation, une autre colonne contient la barre de recherche, et une autre contient ce logo. Ici, nous avons deux colonnes, une qui contient cette zone et une qui contient les images. Et tu verras ça quand on descend. Donc, la chose ici est que nous devons ajouter une triple colonne. Choisissez une annonce que la section triple colonne. 7. Ajouter le logo: Et à cette fin, réduisons un peu cette taille, et ajoutons un élément image. C' est là que le logo ira. Donc, c'est comment ajouter un logo. Et notez qu'une fois que vous sélectionnez cette option, elle affiche cette option Modifier l'image. Lorsque vous sélectionnez cette option, elle change pour modifier la section. Donc, quels que soient les éléments actifs que vous avez sélectionnés ici, c'est celui sur lequel vous pouvez apporter des modifications. Donc, si vous voulez savoir ce qui est actuellement sélectionné, il suffit de regarder ceci. Alors allez-y et cliquez dessus et téléchargez une image de logo. Et je vais fournir ce dossier ici. J' ai préparé un dossier qui contient toutes les images que j'ai utilisées dans cette classe. Donc, si vous voulez suivre, vous pouvez télécharger ce dossier zip, extraire toutes les images et les utiliser. Alors voici notre logo. Je vais aller de l'avant et en fait, je vais télécharger toutes ces images parce que vous aurez besoin d'elles. Mais je vais aller de l'avant et prendre le logo parce qu'il est déjà chargé et inséré là dedans. 8. Ajouter une barre de recherche: Donc, la prochaine chose que nous devons faire est d'ajouter cette barre de recherche ici. Et la façon de l'ajouter, parce que nous allons utiliser la recherche d'ivoire en retard que nous venons d'installer. Ce que nous devons faire est d'ajouter un code court ici et de le placer là. Et nous allons prendre ce court code du plugin. Donc, nous devons aller au backend. Mais avant de le faire, nous allons cliquer ici pour appliquer. Très bien, puis mettre à jour la page. Donc, à ce stade, ce que je veux faire est d'ouvrir un nouvel onglet et je vais juste saisir rapidement cette section ici. Allons au tableau de bord. Copiez ça. Allez sur le tableau de bord. Et je veux aller directement à l'intérieur de l'ivoire pour qu'on puisse créer notre barre de recherche. Alors gardons ça. Maintenant, si nous ouvrons à nouveau une recherche de bibliothèque, sélectionnons ce code court, copiez-le, changez l'autre onglet, cliquez sur le porte-code court, et ici, collez ce code court, puis appliquez. Vous remarquez qu'il apparaît déjà. Mais bien sûr, il a besoin d'un style supplémentaire et nous allons nous en occuper, alors ne vous inquiétez pas à ce sujet. Donc, revenir aux paramètres ici. Donc, notre objectif en ce moment est d'essayer essentiellement de stylet pour ressembler à cela, mais ce sera une barre de recherche de base. Si vous voulez apprendre à travailler avec les barres de recherche en profondeur, vous pouvez rechercher des vidéos et des tutoriels sur les barres de recherche WordPress. Et si je pouvais rapidement passer à la page d'accueil d'origine des ascenseurs, notre objectif est d'imiter cette barre de recherche, ce contour ici sur notre page. Donc, ici, vous remarquerez que nous avons différentes colonnes avec des paramètres. Ce sont les paramètres principaux ici. Et quand vous développez n'importe quel rempli ici, il s'étend à cette zone. ce moment, c'est la configuration de recherche que nous pouvons voir ici. Nous pouvons donc configurer les types de poste que nous voulons. Et le même cas s'applique au reste de tous ces champs. Donc, si nous pouvions passer ici, nous avons collé ce code ici pour que je puisse vous montrer comment nous allons utiliser ce code court. Mais laissez-moi supprimer cela et revenons ici et ajouter un nouveau formulaire de recherche. C' était la valeur par défaut pour, mais nous voulons créer un formulaire que nous utiliserons dans notre page. Appelons ça mon formulaire de recherche. Sauvegardons ça. Bon, donc je ne veux pas approfondir les résultats que le formulaire de recherche montrera et tout ça. Mais ce qui m'intéresse, c'est de le faire ressembler à ça. Donc, notre domaine d'intérêt est l'onglet Design pour l'instant. Et vous remarquerez que nous avons ce formulaire de recherche Customizer. Il suffit de cliquer dessus pour activer la personnalisation de votre formulaire de recherche. Lorsque nous cliquons, il sera redirigé vers le personnalisateur WordPress. Et nous y voilà. Donc, ici, nous pouvons choisir le style de forme. Donc, actuellement, il a ces boutons, mais nous n'en avons pas besoin. Donc, nous pouvons sélectionner cela et publier ou pondérer. Donc pour l'instant, le formulaire n'apparaît pas parce que rappelez-vous que nous avons supprimé le code court et nous devons saisir le code court du nouveau formulaire que nous venons de créer. Donc, dupliquons ceci rapidement. Et dans cet onglet, Revenons en arrière. Et prenons ce formulaire. Copiez ça. Et revenons ici. Ici, et collez ça là-dedans. Mises à jour Vous remarquerez donc qu'il a déjà pris la forme que nous avons sélectionnée sur ce personnalisateur. Donc ça prend déjà forme. Appliquons ça. D' accord, au moins, on a quelque chose avec lequel on peut travailler. Pour l'instant. Je veux qu'on ajoute le menu. Ensuite, nous pouvons styler toute la barre de navigation à la fois. 9. Ajouter le menu nav: Ajoutons un menu. Et la façon d'ajouter un menu est, tout d' abord, revenons au tableau de bord. Et ici, ce que nous devons faire est de créer quelques pages. ce moment, nous avons les pages par défaut qui viennent avec une nouvelle installation de WordPress, donc je vais les supprimer tous. Déplacer à la poubelle. Appliquez ça. Et passons un instant au site de la feuille. Et vous remarquerez que nous avons chauffeur, écrivain, login d'entreprise, inscrivez cinq éléments. Donc, c'est essentiellement ce que nous faisons lorsque nous créons les pages, parce que ce sont des pages Web. Lorsque vous cliquez sur ce bouton, vous serez redirigé vers la page qui contient des informations sur les auteurs si vous souhaitez être écrivain. Alors créons environ cinq pages. Donc, je vais dire Ajouter nouveau. Alors conducteur, donc conducteur. Et sur le côté droit ici, rappelez-vous les réglages Astros. Dans cette section ici, nous voulons désactiver l'en-tête mobile titre et l'en-tête principal désactivé et le pied de page. Et nous voulons nous assurer que c'est plein qui est étiré et pas de barre latérale. Ensuite, pour le modèle ci-dessous Attributs de page a dit qu'il est Elementor pleine largeur et la publication. Donc, nous allons répéter le même processus pour tous les autres. Est revenir en arrière, ajouter de nouveau. Maintenant, avancez rapidement, et créez le reste. Alors faites la même chose. Maintenant que nous avons cinq éléments de menu, la prochaine chose que nous devons faire est de créer le menu réel. Et nous le faisons en allant dans les menus d'apparence. Et vous remarquerez ici que les menus ci-dessous, nous avons créé votre premier menu ci-dessous, afin que nous puissions créer un menu et collègue, mon menu supérieur. Nous allons créer un menu ou monter dans. Maintenant, ces éléments deviennent actifs et ce sont les pages que nous venons de créer. Alors sélectionnez-les tous et ajoutez-les au menu. Ce menu, génial. Alors réorganisons les en conséquence. Donc, l'inscription de connexion d'entreprise de l'écrivain de conducteur, le login d'entreprise , l' inscription, et nous allons en faire notre menu principal. Je vais sauver ça. Maintenant, nous sommes définis et nous sommes prêts à aller à l'avant et ajouter ce menu qui contient tous ces éléments de menu ici. Donc, en cliquant là, cherchons nav. Et vous remarquerez que nous avons des menus de navigation de défense. Nous sommes intéressés par celui-ci qui a de la haine FB pour Elementor le générateur de pied de page d'en-tête. Faisons-le glisser là et vous remarquerez que les éléments de menu apparaissent déjà. Maintenant, je rafraîchis ma page de destination après avoir ajouté cet élément de menu ici. C' est pourquoi cette zone a l'air un peu différente. Donc, si vous voyez ici une notification bleue indiquant que vous n'avez pas de menus, actualisez la page pour que ce menu apparaisse ici. Et si vous avez plusieurs menus que vous avez créés ici, ils apparaîtront ici dans ce menu déroulant et vous pouvez le sélectionner, et celui que vous choisissez apparaîtra ici. Alors maintenant, disons au menu de ressembler à ceci. Lorsque vous survolez les éléments ici, vous remarquez qu'ils deviennent violets. Alors faisons ça. Donc, en sélectionnant leur élément de menu, il devient actif ici je peux aller à l'intérieur des styles. Sous le menu principal. Nous avons la topographie, et c'est là que nous pouvons changer la police et tout. Et ce que nous voulons faire maintenant, c'est changer la couleur du vol stationnaire en ce violet que nous venons de voir. Donnons-lui juste un peu de violet vif. Oui, je crois que j'aime ça. Je vais copier ça. Et nous allons également nous assurer que lorsque le lien est actif et a la même couleur pourpre. Allons-y et mettons-le à jour. Et nous allons prévisualiser les modifications. Maintenant je sais que vous vous demandez, diriez-vous de ces lignes verticales ici et de cette ligne horizontale ici, où est-elle ? Et c'est parce que tout ici est à l'intérieur de ce seul élément. 10. La section du héros: Et comme je l'ai mentionné, alors que nous commencions à concevoir la barre de navigation, tout ce qui se trouve à l'intérieur de cette page se trouve dans une section. Et chaque section a des colonnes, au moins une colonne. Ainsi, comme vous pouvez le voir, cette zone a deux colonnes. Le site qui a des images et le site qui contient les boutons dans le texte, et vice versa juste ici. Donc, en sautant sur notre page d'éditeur Elementor. Tout d'abord, je vais mettre à jour les changements que nous venons apporter parce que nous avons fini de travailler sur le napa pour l'instant. Nous ferons encore quelques touches finales. Je veux le fermer en cliquant sur ce bouton là-bas et Quitter to Dashboard. Alors ce qu'on veut faire, c'est aller aux pages. Et nous choisirons l'une des pages qui sera notre page de destination. Allons donc avec la page d'affaires. Alors je vais dire Edit. Et parce que nous avions tout mis en place ici pour commencer, ce que nous devons faire est de modifier avec Elementor parce qu'en ce moment nous construisons tout visuellement. Donc, vous remarquerez que nous avons la barre de navigation, mais cette fois, ce n'est pas modifiable ou cliquable. Et c'est parce que nous ne sommes pas dans l'éditeur de barre de navigation, nous sommes à l'intérieur de l'éditeur de page. Donc, la première chose que nous voulons faire est de créer ces deux colonnes. Et ici, sur cette colonne de droite, nous avons besoin de deux images. Donc on peut les empiler ensemble. Donc, pour ajouter une image en dessous, je vais ici dans ce menu et ajouter une image, faire glisser et la déposer lorsque cette ligne bleue apparaît ici. Maintenant, nous avons deux images empilées ensemble, mais bientôt, nous allons les faire se chevaucher comme ça. l'autre côté, nous voulons ajouter certains de ces textes. Et je vais juste copier ce texte directement tel qu'il est. Parce que c'est juste à des fins éducatives. Tu ne peux pas aller copier le site Web de quelqu'un comme ça. Alors je vais aller de l'avant et prendre ça. Une taxe juste là, copie. Et ici, je vais cliquer sur le signe plus et ajouter un titre. Parce que c'est un cap. Et une bonne pratique lorsque vous concevez des pages de destination ou des pages Web, assurez-vous d'utiliser un H1 par page car H1 est le sujet principal de la page. Et une fois que vous avez un H1 dans votre page de destination ou votre page Web, tout le reste peut être sous-titre ou sous-titre, qui devrait maintenant tomber dans H2, H3, H4. Mais rappelez-vous, un H1 par page. Je n'ai pas à le faire. Changeons la couleur ici. Donc, avec cette sélection, je vais cliquer sur le style et la couleur du texte. Je vais le changer en couleur qui est proche de ce qu'on veut. Et bien sûr, regarder la police ressemble plus à Montserrat. Bien sûr, vous pouvez choisir n'importe quelle police de votre choix. Allons-y et disons Montserrat. Donc, sous Typographie, cliquez sur ce bouton Modifier et tapez quelques mois. Et je pense, oui, je pense que c'est une police. Augmentons la taille de la police. Je pense qu'on a presque raison. Pour l'instant, regardons ce que nous avons. Donc, je vais monter les données et je vais prévisualiser les modifications. Génial, Donc maintenant, il commence à prendre forme. Permettez-moi de copier ce texte. Et j'ajouterai un nouveau hashtag. Et cette fois, ça va être au-dessus de ça. Et je vais coller cette petite police ici. Et je vais voir que ce sont des polices plus petites. Donc tout d'abord, c'est un H2. Et nous voulons nous assurer qu'il est noir. Il est écrit de copier ces noirs. Sélectionnez cela. Cliquez sur la couleur sous style, copiez-la, puis sélectionnez cette police plus petite ici. Cliquez sur la couleur. Collez celui que vous venez de copier. Il y a une légère différence. Et puis nous devons rendre ces polices plus petites. Et je pense que c'est Montserrat aussi. Oui. Alors allons de l'avant et disons monstera sous texte, typographie, Montserrat. Et bien sûr, faisons cette taille. Mettez à jour cela. 11. Ajouter les boutons du héros: Ensuite, créons ces deux boutons ici, appliquez à conduire, inscrivez-vous à conduire. Donc, ce que nous devons faire est de cliquer à nouveau sur ce menu. C' est le menu clic lorsque vous voulez ajouter un élément. Nous avons donc besoin d'une double intersection et une section interne habite à l'intérieur une autre section et vous pouvez ajouter plusieurs colonnes à l'intérieur de celle-ci. Donc parce qu'on a besoin de deux boutons ici, on a juste besoin de deux colonnes. Je vais supprimer ça et ça. Et maintenant que nous avons ces deux colonnes, je vais faire glisser un élément de bouton dedans. Et bien qu'il soit toujours sélectionné, il est temps de le styliser. Donc je pense qu'il a cette couleur pourpre. Donc, tant qu'il est encore sélectionné, accédez à Style. Maintenant, avant d'aller au style, Nous allons tout d'abord changer les textes appliqués au lecteur. Donc, sous le bouton Contenu appliqué à sécher. Maintenant, nous pouvons aller à l'intérieur de l'onglet de style. Et sous la topographie. Nous pouvons d'abord changer le type à Montserrat. Et nous devons ajouter, remarquez que les boutons ici, comment ces coin rond. Donc c'est le rayon de la frontière. Et parce que cela est lié, tout chiffre que nous entrons ici sera appliqué à ces autres. Disons que 50 lui donne cet effet de coin arrondi. Et puis pour la couleur, bien sûr, nous devons la rendre de couleur pourpre. Merci. Voyons voir, un violet vif. Très bien, alors sois un peu sombre. Bague de bordure. Oui, en bordure bleue. Cliquez n'importe où ici pour accéder à ce menu. Maintenant que nous avons ce bouton ici, nous pouvons aller de l'avant et le dupliquer. Ensuite, faites glisser la copie dans cette autre colonne et rapportez-la ensemble. Maintenant, nous devons styler cela différemment. Pas de couleur de remplissage, juste un contour. Donc, avec cette sélection, allez à l'intérieur type. Donc, pour la couleur, changeons-le en blanc. Et vous remarquerez qu'il a disparu. Mais c'est parce qu'il n'a pas de frontière. Et si nous ajoutons une bordure solide et lui donnons une largeur d'un et coloré cette bordure manque. Le bouton est maintenant visible. Et changeons la couleur du texte en noir. Mettez à jour cela. Donc, ce bouton passe en grisâtre sur le vol stationnaire. Pour obtenir les mêmes résultats, nous devons entrer ici sous le style de bouton, type d' arrière-plan, sous la couleur. Changez ça en gris. Gris clair. Oui, je pense que c'est bien. Mise à jour. Et nous allons prévisualiser les modifications. Très bien, alors remarquez qu'ici, il y a un peu d'espacement. Mais sur notre page, nous n'avons pas l'espacement, alors nous allons travailler là-dessus. Et c'est une question de marge. Nous allons donc ajouter une marge en haut des colonnes. Cliquez donc sur la colonne et sélectionnez. Accédez à Avancé, dissociez le lien, puis ajoutez une marge supérieure. Il suffit de jouer avec elle et de voir lequel correspond, lequel semble le mieux. Mettons à jour ça. Examinons les modifications. Donc, au moins, nous avons une marge en haut. L' image semble être correctement positionnée. Donc la prochaine chose que nous voulons faire est d'ajouter les deux images et de les faire se chevaucher comme ça. 12. Ajouter les images du héros: Allons ici. Cliquez sur la première image, et bien sûr, cela changera dans les paramètres de l'image. Cliquez dessus. Et je vais dans mon dossier. Vous trouverez un dossier d'images de section héros. Donc on peut juste prendre toutes ces images et les jeter là-dedans. Je vais y retourner et prendre ces autres qu'on n'a pas besoin d'y retourner à chaque fois. Alors revenons en arrière. Je vais aussi obtenir ces images de curseur, disons ouvert. Alors maintenant que nous avons toutes ces images, saisissons cela et insérez des médias, mettez à jour ou montez. Passons à la deuxième image. Choisissons celui-là. Mettez à jour cela. Et passons en revue les changements. Donc, nous avons tout le contenu dont nous avons besoin sur la section héros. 13. Marges de boutton et rembourse: Alors rapportons ces boutons un peu plus près ensemble. Réduisons cet écart. Mais tout d'abord, ce que je veux faire est de sélectionner cette colonne, aller à Avancé, et supprimer toutes ces marges et rembourrage par défaut. même cas s'applique à cela. Sélectionnez cette colonne avancée. Supprimez toutes ces valeurs par défaut. Alors, rapprochez-les ensemble comme ça. Ensuite, dites Mise à jour. J' aime bien où ils sont maintenant, mais maintenant nous devons les repousser un peu parce que cette distance est trop petite. Donc, nous allons prendre toute l'intersection de section avancée, supprimer ce lien, puis ajouter, peut-être, disons une mise à jour 40. Ces boutons semblent avoir un joli rembourrage, haut, bas et côtés. Notre semblait être un peu plus court en hauteur. Alors ajoutons un peu de rembourrage sur le dessus et le bas. Je vais sélectionner un de ces boutons. Je vais aller au rembourrage et dire stagiaire. même cas s'applique à l'autre. Cliquez sur Mettre à jour. D' accord ? Ok, donc la prochaine chose que nous voulons faire est de faire en sorte que ces deux images se chevauchent ici. 14. Styler les images du héros: Donc, je vais sélectionner la première image. Allez à Avancé, et nous jouerons avec la marge et le rembourrage. Supprimons donc ces liens. Et puis pour la marge, augmentez la marge à des mots comme ça. D' accord, passons à la deuxième image. Avancé. Réduisons la marge supérieure. Donnons-lui un 100 négatif, 150 négatif. Et puis réduisons la marge gauche. Et augmentons la marge droite. Donnons-lui peut-être un 90. Et mettons-le à jour en regardant les changements. Impressionnant. Je pense que même si nous ne sommes pas parfaits en ce moment, nous allons quelque part. On l'a fait. Donc maintenant, je suis satisfait de notre section héros. Jusqu'à présent. Ensuite, nous voulons passer à la zone du corps, qui est composée de quelques sections, toutes ayant un nombre différent de colonnes et de lignes. Alors. 15. La section du corps principal: Donc, pour la section du corps, nous avons besoin d'une double colonne à nouveau. Donc, nous pouvons dupliquer cela en cliquant dessus car il a déjà deux colonnes, ou nous pouvons créer une double colonne à nouveau. Alors créons une double colonne. Et vous remarquerez qu'il y a une marge ici, espacement entre les deux sections. Alors faisons la même chose. Ajoutons un peu de marge, le haut de la section. Donc cliquez avec le bouton droit sur la section Alors ira ici. À vaste. Supprimez le lien sur la marge. Et donnons à cela une marge, marge supérieure de 50. Disons peut-être 80. 16. Ajouter un masque d'image: Ajoutons une image ici. Lâchez-le là-dedans. Et bien sûr, nous allons apporter une image, peut-être ce gars, insérer des médias. Et maintenant, ce que nous devons faire est que l'image est toujours sélectionnée, allez à Avancé, faites défiler vers le bas et vous verrez le masque. Cliquez sur ce masque et dites sur. Et vous serez présenté avec ces paramètres. Donc, en ce moment, il est mis à cercle. Essayons les autres. Croquis de fleurs. Nous n'avons pas cette forme ici dans cette liste, mais vous pouvez toujours télécharger votre propre SVG informel ou vous pouvez télécharger une image qui a cette forme. Mais les fichiers SVG sont généralement considérés comme dangereux. Je pense que je vais aller de l'avant et travailler avec le croquis pour l'instant. Mettez à jour cela. Et nous pouvons aller de l'avant et ajouter ce bloc de texte avec ces deux boutons. Copions ça et mets-le ici. Je vais cliquer sur Plus, et c'est un titre. Je vais coller ça là-dedans. Et rappelez-vous que nous avons créé quelque chose de similaire à ce Ici il est. Donc, je vais juste cliquer dessus, cliquer avec le bouton droit, Copier. Cliquez sur ce bouton droit. Et je ne vais pas collé, dépassé son style de sorte que je n'ai pas à essayer de comprendre ce que j'ai fait pour que l'autre ressemble à l'autre. Alors on y va. Ensuite, nous voulons attraper c'est ici. C' est un sous-en-tête bien sûr. Donc, nous pouvons dupliquer cela, survolez ces et cliquez dessus, cliquez à l'intérieur. Ils viennent ici et y collent ce texte. Et bien qu'il soit encore sélectionné, allez à l'intérieur des styles, de la typographie, c'est augmenter la taille. Je crois que ça me plaît comme ça. Et vers les données. 17. Ajouter du texte du corps: La prochaine chose que nous voulons faire est de récupérer un peu de ce texte. Cliquez sur ce bouton pour ajouter un élément. Et l'élément que nous ajoutons ces textes. Cliquez ici, mettez tout en surbrillance et collez-le dedans. Maintenant, si vous remarquez que vous avez collé là-bas et le style de texte semble drôle comme dans peut-être la police est grande. Assurez-vous de tout sélectionner ici. Cliquez sur cette bascule et effacez la mise sorte que dans le cas où la taxe est fournie avec un pré-formatage, vous vous débarrassez de ce formatage afin que vous puissiez faire votre propre formatage. 18. Liste de caractéristiques personnalisées: Donc, ici, nous avons une liste et la liste a des icônes. Alors, comment pouvons-nous y parvenir dans Elementor ? Maintenant, il existe différentes façons d'ajouter cela, mais la façon dont cela fonctionnera dans ce scénario est d'ajouter une intersection. Dans cette intersection sera divisé en deux. Donc, nous aurons une section interne qui a une icône et un titre. Et puis en dessous du titre, nous aurons le texte. Cliquez donc sur l'icône du signe plus. Donc, faisons glisser une icône là-dedans et cliquez là. Nous pouvons saisir avec la direction ici ou nous pouvons simplement dupliquer cela et mettre dans les gains fiables. Collons ça là-dedans. Et maintenant pour les textes, nous pouvons simplement dupliquer cela et faire glisser duplicata dans le ce que bien sûr maintenant nous devons changer cela. Donc, pendant que cela est mis en évidence, mettez tout en évidence et collez-le là-dedans. Cet espacement est trop important donc nous devons le réduire pour correspondre à ce que nous avons ici. Sélectionnez ce texte avancé, supprimez ce lien et ce lien. Ensuite, pour la marge supérieure, réduisons la marge supérieure jusqu'à ce point. Peut être aller plus loin si tu veux. La prochaine chose que nous voulons faire est de réduire la taille de cette police et, pendant qu'elle est sélectionnée, passez à la taille du style. Laissons-le à 20 heures. Et puis nous allons faire glisser que tous les poids qui pointent. Réduisons la distance encore plus loin. Peut le réduire comme ça. J' ai donc remarqué que nous avons beaucoup de marge en dessous des textes. Je vais donc sélectionner le texte et réduire la marge inférieure jusqu'à ce point. Maintenant, tout ce que nous avons à faire maintenant est de dupliquer ça et de le dupliquer à nouveau. Et nous avons une liste. Donc, nous pouvons aller de l'avant et copier tous ces autres éléments de liste qui sont collés ici. Prenons ce texte ici. Cliquez sur ce texte, ajoutez-le juste là. Alors va te faire payer. Je vais faire la même chose, vous savez, la perceuse. Copie qui l'a mis là dedans. Et j'aime jour les changements parce que nous avons fait tant de changements et les avoir sauvés. Ensuite, nous allons prévisualiser ce que nous avons jusqu'à présent. Donc si on commence à faire défiler, je pense que ça commence à prendre forme en ce moment. Mais notez que la distance ici est très petite. Nous devons augmenter la largeur de la, de l'espacement ici pour correspondre à cela. Et en même temps aussi besoin de changer ces icônes qui sont trop minuscules pour être sélectionné, mais je vais essayer de mon mieux. Je vais sélectionner cela et je vais aller à Sommaire en cliquant là. Et je peux choisir une icône. Des gains si fiables, donc c'est un billet de banque. Alors je vais taper de l'argent. Oui, je pense qu'on peut travailler avec ça. Ou ça. On pourrait aussi lui donner une couleur noire. Et au lieu de faire la même chose pour le reste, je vais juste copier ce que nous avons ici. Et je vais les mettre en évidence. Je vais coller le style et il changera à cela sur le collage sélectionné. Et je vais changer ça pour une autre icône. Sélectionnez n'importe quelle icône aléatoire. Parce que pour l'instant ce que nous devons comprendre est comment ajouter et modifier l'icône n'est pas vraiment ce que l'icône est la. Faisons ça. Une voiture, parce que tout est sur les voitures et le chemin. Mettez à jour cela. Et la prochaine chose sur laquelle nous voulons travailler maintenant, ce sont ces deux boutons. 19. Boutons et liens avancés: Allons de l'avant et ajoutons une double section juste en dessous. Et ici, nous pouvons ajouter nos boutons. Alors allons prendre un bouton. Mets-le là-dedans. Je vais sélectionner ce bouton. Copiez, sélectionnez celui-ci, collez le style et passez à cette couleur. Et puis je dupliquerai ça. Maintenant, laissez-moi juste dupliquer ceci et faites-le glisser ici. C' est pourquoi il s'agit d'un générateur de glisser-déposer. Donc maintenant que nous l'avons ici, nous devons styliser ça m'amène à l'arrière-plan et tout ça. Donc, tout d'abord, changeons la couleur de la police en noir. Donc, à l'intérieur du style, alors que le bouton est toujours sélectionné, passera à la couleur suivante. Changement. C' est ce manque. Puis pour l'arrière-plan. Nous voulons sélectionner l'arrière-plan et parce qu'il est vert maintenant, nous voulons venir dire qu'il doit être transparent, complètement transparent pour qu'il soit blanc comme ça. Donc une autre chose que nous voulons faire maintenant est de changer le texte du bouton. Tellement poussé à conduire la façon dont le Dr Pay fonctionne. Cliquons sur ça. Appliqué au Dr Lisa. D' autres disent que c'est content. Comment sèche fonctionne. Maintenant, vous remarquerez qu'ils ne sont pas alignés. Permettez-moi de mettre à jour cela dans les modifications d'aperçu. Si je fais défiler vers le bas, on s'en débarrassera. Ne vous inquiétez pas. Il y a trop de distance entre les deux boutons et celui-ci semble être mal aligné. Donc, ce que nous devons faire est de retourner à notre page, juste titre BCE, et supprimer la marge et le remplissage par défaut et faire de même pour cela. Supprimez ces paddings par défaut et tout cela. Alors rapprochons ces deux-là et nous devons pousser un peu celui-ci vers le bas. Alors augmentons le rembourrage, rembourrage supérieur comme ça. Et allons de l'avant et ajoutons cette flèche à la fin. Donc, tant qu'il est toujours sélectionné, accédez à Bibliothèque d'icônes de contenu. Et nous allons taper la flèche. Utilisons celui-là. Insérer. Et disons qu'on le veut après. Donc juste en dessous de l'icône. Après une mise à jour, nous allons prévisualiser les modifications. Débarrassez-vous de ce bouton tout d'abord, avant d'oublier de faire défiler vers le bas. Et augmentons cette marge supérieure pour que ces boutons aient un peu plus d'espace, plus d'espace. Alors, nous allons cliquer dessus. Accédez à Avancé, supprimez-le, puis marge supérieure. Donnons-lui une mise à jour 35. Et avant que j'oublie, augmentons l'espacement entre cette image et ce bloc de texte. 20. Aligner des marges de section: Donc, je vais cliquer sur la section et la mise en page et aller à l'endroit où il est dit colonnes écart. Donc, je pense que je vais juste choisir large et mettre à jour cela et voir à quoi cela ressemble. Je pense que je l'aime jusqu'à présent, mais nous pourrions faire beaucoup plus. On pourrait faire plus. Donc disons plus large. Très bien, donc, jusqu'à présent si bien. Oh, attends, regarde à quoi ressemble ce bouton. Je pense que nous réduisons trop l'espacement. Réduisons la marge, je pense que c'est l'oreille gauche, la marge gauche. Et mettre à jour ça. Prévisualisons les modifications. J' aime ça jusqu'à présent. Ensuite, passons à cette section du témoignage. Et vous remarquerez qu'il y a plus de témoignages cachés sur le côté droit. Et pour les voir, vous devez cliquer et faire défiler. 21. Ajouter des témoignages de clients: Donc, pour créer ces témoignages, nous devrons installer un autre plugin, et je vais vous montrer quelque chose rapidement ici. Alors allons de l'avant et tapons des témoignages. Et vous remarquerez que nous avons des éléments de témoignage ici, mais ce ne sont pas ceux avec lesquels nous voulons travailler. Revenons donc au tableau de bord et je vais entrer dans les plug-ins et ajouter un nouveau plugin qui a une option qui nous donnera des résultats qui sont similaires à ceux-ci. Donc, en retournant ici, tapez des éléments, des éléments, des enfants. Installez des éléments, des éléments gamins ou des atomes. Bon, alors activons-le. Impressionnant. Maintenant qu'il est installé, je vais passer à notre éditeur et je vais rafraîchir cette page pour que nous puissions apparaître ici. Cliquez donc sur le signe plus ici et tapez témoignage. Et nous prendrons ce témoignage ici. Et notez que nous avons ces différentes options pour la façon dont nous voulons les afficher. Et peut aller de l'avant et choisir un, je pense que je vais choisir peut-être que je vais choisir celui-là. Donc, ce que nous avons actuellement, c'est un témoignage par diapositive, et nous voulons qu'ils soient trois à la fois. Alors réduisons l'onglet Mise en page et allons à l'intérieur témoignage. Et la première chose que nous voulons faire est de dupliquer ceci pour que nous ayons pour la lumière sur la page de gauche 1, 2, 3, 4. Et puis réduisons l'onglet Témoignage et ouvrons Paramètres. Sous Paramètres, nous avons des diapositives à afficher, disons trois, de sorte que ce soit trois à la fois sur l'écran. Et mettons-le à jour. Prévisualisons les modifications. Bon, maintenant, nous allons remplir chaque témoignage avec du contenu. Et je vais aller de l'avant et rapidement et prendre ces témoignages d'ici. Alors effondre les paramètres, je vais entrer dans le témoignage. Je vais témoigner sur le site un. Appelez aussi ici, Mary Mary drivings leaf depuis 2019. Donc Mary conduit depuis qu'il est 17 ans. Et mettons-le ce témoignage ici. Droit ? Ça commence déjà à prendre forme. Comme vous pouvez le voir. Prenons le deuxième témoignage d'Harold. Réduisons Mary et ouvrons le système sur votre outil. C' est Harold qui conduit avec nous depuis 2009, 2018. Collons ce témoignage juste là. Prenons ce jumelé. Réduisez Harold. Droit ? Tu veux dire qu'Alex dit 16 ans. Collons le témoignage juste là. Et puis allons chercher le dernier témoignage ici. S'effondré. Alex, élargis ça. Disons Anthony Driving depuis 2020, depuis 2020,s'efforçant de bien Sperling, d'accord. Très bien, alors collons-le juste là. Prévisualisons les modifications. Défilement tout le chemin vers le bas. Et ajoutons les images ici. Donc, en cliquant n'importe où dans la section, j'irai directement à Anthony d'abord. Et allons à l'intérieur de l'avatar client. Et j'avais déjà téléchargé ces images ici. Rappelez-vous que j'ai fourni un dossier zip que vous pouvez trouver ci-dessous dans la description. Toutes ces images sont là-dedans. J' ai effectivement utilisé cette personne n'existe pas .com pour obtenir ces immédiats. Donc ce ne sont pas de vraies personnes. Alors je choisirai ce type. Insérer le média, mettre à jour Je vais effondrer Anthony, aller voir Alex. L' avatar du client est appelé vers le bas. Attrapez ce type. Il ressemble à un L, c'est Harold. Allons-y et attrapons un avatar client. Prenons ça. Et enfin, ajoutons la photo de Mary à cette mise à jour. Impressionnant. Mais maintenant ces témoignages ici n'ont pas d'ombre portée, mais les nôtres ont une ombre portée, donc nous devons nous en débarrasser. Et nous allons entrer dans le style et chercher l'option pour supprimer l'ombre de la boîte. Et dans ce cas, c'est sous l'ombre de la boîte de mise en page de style. Alors remarquez que quand on a cliqué dessus, ça a changé un peu. Et ce qu'on veut faire, c'est cliquer sur cette minuscule boîte et la rendre complètement transparente. Ensuite, mettez à jour cela. Prévisualisons les modifications. Droit ? Alors faisons défiler vers le bas et voyons les résultats que nous avons. Et vous remarquerez que nous avons du personnel supplémentaire ici qui n'est pas ici, comme ces étoiles de notation et ces guillemets. Et c'est parce que ces gars qui ont fait Lyft n'ont pas utilisé élémentaire pour créer cette page. Peut-être que ces gars ont codé tout ici, mais nous utilisons un générateur de glisser-déposer. Et le générateur de glisser-déposer est livré avec certains éléments par défaut, mais nous pouvons les supprimer. Alors débarrassons-nous des citations. Mais si vous voulez les maintenir là-bas, vous pouvez les garder là. Si vous voulez les supprimer, allez-y et retirez-les. Alors regardons, je vais faire défiler la mise en page réduite vers le haut. Revenir au contenu. Voyons à l'intérieur du témoignage activer la notation cette capable que. Alors maintenant, c'est parti. Et activez les guillemets. Ces Abel aussi. Vous pouvez aller de l'avant et jouer avec les paramètres plus loin pour voir ce que vous pouvez faire d'autre avec les témoignages. Mais bien sûr, comme vous l'avez vu, il y a beaucoup d'options ici. Alors allez-y et essayez toutes ces autres mises en page et voyez ce que vous pouvez obtenir avec vos résultats. Le point ici est de comprendre comment utiliser les outils élémentaires et les fonctionnalités pour créer des pages Web impressionnantes. Et bien sûr, il est assez facile de voir que nous n'avons pas été en mesure de créer ces flèches ici. Avec lequel faire défiler les témoignages. Et bien sûr, c'est parce qu'ils utilisent différentes technologies pour créer leur page. Nous utilisons un générateur de glisser-déposer qui a ses propres pouvoirs et lacunes. Donc la nôtre ressemble à ça. Et il y a ça ressemble à ça. Ensuite, nous allons travailler sur cette section bleuâtre juste ici, jusqu'ici avant de créer ce formulaire. 22. Section du corps avancé: En regardant cette section ici, vous remarquerez qu'il s'agit d'une section bleue et il a un mélange de différentes sections de colonne à l'intérieur de celle-ci. Comme vous pouvez le voir, il s'agit d'une double colonne. Mais quand vous venez ici, c'est une seule colonne parce qu'elle fonctionne jusqu'à la fin. Donc, ce que nous devons faire est de venir ici, créer une seule section de colonne. Donnons-lui tout d'abord cette couleur de fond et je l'avais déjà vérifié. C' est si vous allez à l'intérieur, éditez la section, faites un clic droit dessus et allez là, allez dans le style, l'arrière-plan, la couleur. La couleur est hachage, PB, VB, Ff ou ride. Et à l'intérieur de cela, nous devons ajouter une intersection à double colonne. Alors venez ici et dites ajouter une intersection, qui est maintenant une double colonne. Et en dessous, nous pouvons ajouter une seule colonne. Allons de l'avant et supprimons cela. Ajouter une autre intersection. Mais cette fois bien sûr, nous allons supprimer cette seule colonne, mais nous y arriverons. Donc ce que je veux que nous nous concentrions, c'est cette partie supérieure pour commencer. Alors ajoutons cette image dans cette colonne. Et puis ici devra ajouter du texte. Alors copions ça, juste avec Lyft. Et nous pouvons simplement aller de l'avant et dupliquer cela parce que cela nous permettra d'avoir des sous-titres uniformes. Je vais porter ça et le déposer là-dedans. Je vais prendre ça. Et je vais aussi faire défiler ici. Nous allons dupliquer ça et faire glisser ça là-dedans. Allons le traîner ici. Laissons-le là et attrapons ça et mets-le au-dessus de ça. Cliquez à l'intérieur de ceci. Et nous allons coller du texte. On a juste attrapé, ils ont juste mis la main dessus. Et bien sûr, vous pouvez deviner ce que nous allons faire ensuite est diplômé, dupliquer ceux-ci et c'est comme cela que l'élémentaire vous permet de travailler facilement. Vous n'avez pas besoin de continuer à ajouter de nouveaux éléments. Vous pouvez déjà utiliser les éléments que vous avez déjà stylés. Donc, nous allons coller ce texte là-dedans. Ensuite, créons ce bouton. Et nous pouvons le faire en dupliquant ceci. Et puis faisons-le glisser à l'intérieur de cette zone. Que dit ce bouton ? Obtenez un droit fiable en quelques minutes. Alors, changeons ça. Sexe. Le bouton. Pendant que le bouton est toujours actif, passons à l'intérieur du style. Et donc la couleur. Bien sûr, il doit être large. Mais le type de bordure doit maintenant passer à Solid et nous allons lui en donner une. Et la couleur de la bordure devrait être noir ou blanc, ou la couleur est-elle ici ? C' est cette violette. Alors donnons-lui une couleur pourpre. Cette couleur violette brillante comme ça. Et vous remarquerez qu'il a une ombre portée. Alors ajoutons une ombre portée ici. Mais donc l'ombre de la boîte. Et puis réduisons l'opacité de cette ombre de boîte afin que vous puissiez facilement crier. Je veux juste le rendre un peu subtil. Puis aller au bouton juste ici, couleur du texte, Changeons-le en, Je pense que c'était noir. Ensuite, mettons-le à jour. Et je remarque qu'il y a cette petite icône juste ici. Alors ajoutons une icône. Revenons au contenu. Tant qu'il est encore sélectionné. Cliquez sur cette petite icône juste là. Ripe peut trouver la bonne voiture, la voiture. Attrapons ça, insérez ça. Suivant. Ce sont deux boutons de plus, et ils sont stylés à peu près comme ce bouton ici. Alors nous allons juste dupliquer ça. Faites-le glisser et déposez-le juste en dessous de cela. Dupliquons à nouveau car il y a deux boutons. Planifiez votre écriture avancée. Sachez que vous avez raison. Sachez que votre chauffeur porte un masque. Donc avec cette active la masse. Et le second dit, planifiez votre trajet à l'avance. Alors, cliquez sur cela à l'avance. Allons mettre à jour le calendrier. Bon, a 1 r. Nous allons nous assurer que ces icônes viennent avant le texte. Donc avant, et pour celui-ci avant aussi. Avant. Mettons à jour ça. Suivant. Ajoutons une image du téléphone. Cliquez sur cette image. Alors je vais cliquer dessus. Prends ce téléphone ici. Insérez maintenant le média. Mettez à jour cela. Suivant. Créons ce bouton. Donc, nous allons aller de l'avant et dupliquer ça. Et mettez-le ici, faites-le glisser et déposez-le dans la mise à jour qui et ils sont ce qu'il dit ? Prends un tour. Alors je vais dire notre tour. droite. Ajoutons ce logo. Mais maintenant ce logo, bien qu'il semble être directement sous ce bouton, ils ne sont pas ensemble, ils ne sont pas dans un seul groupe. Et vous remarquerez que lorsque vous faites ces sur les écrans mobiles, parce que nous allons appuyer sur Control Shift I pour un instant. Et si je rends cet écran plus étroit et que je fais défiler vers le bas, vous remarquerez que l'image vient avant ce logo et que le bouton vient avant l'image. Donc, ce logo facilité avec ces textes et ils viennent après cette image. Donc, cela signifie que nous sommes supposés ajouter une nouvelle section juste en dessous de cette section à double colonne. Et rappelez-vous que nous avions ajouté une section double, une autre double colonne. On peut l'utiliser. Alors ajoutons une image ici. Je vais cliquer dessus. On devrait avoir ce logo ici. Allons-y et utilisons-celui-là. Insérez le média, et mettons-le sur le côté gauche. Suivant. Prenons ce texte ici. Copiez ça. Et je vais cliquer dessus. Faites glisser un éditeur de texte ici. Cliquez là et collez ce texte dedans. Et ça devrait être rejoint ici. Alors rejoignez-vous. Et puis mettons-le à jour. Suivant. Jetons un coup d'oeil à ce que cela ressemble sur les écrans mobiles. Juste pour un instant. Donc si nous effondrons ce défilement vers le bas. Oui, donc il va directement en dessous de cela, en dessous de cela. C' est donc une nouvelle section. Allons de l'avant et créons une nouvelle section. Donc je vais dupliquer ça. Et maintenant, nous devrions avoir une nouvelle section. Donc je vais juste me débarrasser de tout ce logo. Qu' est-ce qu'on a ici ? On a ça, les morsures droites pourraient aller bananes. Et c'est moi, H2. Donc, je vais cliquer sur cette icône juste là et faire glisser un en-tête et le coller ici. Changeons la couleur en noir. Bien sûr, vous devez être cohérent lorsque vous créez ces pages. Je mets juste n'importe quel noir, mais si vous utilisez du noir, assurez-vous que vous utilisez toujours le même noir. Si vous utilisez une couleur spécifique, violet, assurez-vous que votre bouton est violet. Chaque bouton qui est violet utilisant le même violet, ne différencie pas un violet. Mettons à jour ça. Et cette police semble être Roboto, les polices par défaut. Alors passons à Montserrat pour plus de cohérence. C' est ce que nous essayons d'insister. Montserrat. On peut lui donner un poids de 700. Oui, ça fait 100 ans. D' accord. Prenons cela et cliquons là-dedans et remplacons ceux-ci par ce nouveau texte. Mais vous remarquerez que ce texte est légèrement plus petit que celui-ci. Alors rendons-le légèrement plus petit que les autres. Donc, du sol peut-être. Oui, mettons-le à jour. Cette phrase semble être en une ligne. Alors élargissons ça jusqu'à peut-être quelque part là-bas. Mettez à jour cela. Alors maintenant, je vais aller de l'avant et dupliquer ceci une fois de plus parce que n'oubliez pas que tout ce contenu que nous créons en ce moment est sur la section bleue. C' est donc là que nous allons ajouter notre curseur d'image. Retirons ça. 23. 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. 24. Carousel d'image défilant: Donc maintenant, nous avons cette seule colonne dans une section. La prochaine chose que nous voulons faire est de type logo, logo client par IQ kids. Faisons-le glisser à la fin. Ici, nous pouvons ajouter toutes les images que nous voulons pour chaque diapositive ici. Donc, je vais à l'intérieur du titre 1 et je vais cliquer sur la zone de l'image. Ce sont les images qui seront utilisées. Donc, je vais cliquer sur le premier, l'inséré là. Cliquez sur le second. Mettons-le là-dedans. Et je peux avancer rapidement ici pour que je puisse ajouter le reste. Mettons-les à jour. Et remarquez qu'ils ont des ombres de boîte et qu'on ne veut pas de ces ombres de boîte, alors on va devoir s'en débarrasser. Alors sautant à l'intérieur du style, Allons à Logo et vous remarquerez que nous avons ce rayon de frontière. Donnons-lui une mise à jour 10 ou écrivez cela. Retirons l'ombre de la boîte. Donc, en cliquant sur cette option d'ombre de boîte, puis sur ce bouton d'opacité juste là, nous pouvons réduire la visibilité de la boîte d'ombre et mettre à jour cela. Comme nous avançons. J' espère que vous pouvez voir quelques-unes des forces et des lacunes d'un constructeur de glisser-déposer comme Elementor. Mais il existe de nombreux autres outils que vous pouvez combiner avec Elementor pour obtenir de meilleurs résultats. Et rappelez-vous, nous utilisons la version gratuite d'Elementor. La version payante a beaucoup plus de fonctionnalités et d' outils qui peuvent vous aider à obtenir de bien meilleurs résultats. Et encore une fois, tout est au sujet de votre créativité. Créons cette région de disponibilité. Donc c'est X, ça ressemble à ça. Donc je vais juste aller de l'avant et dupliquer ceci au cas où vous auriez manqué mes instructions sur la façon d'en parler. Ces deux options, lorsque vous survolez, comment activer cela. Vous allez à l'intérieur de ce programme une nouvelle préférences utilisateur et assurez-vous que les poignées d'édition est réglé sur yes. Alors sortons de ça et faites-le glisser ici. Maintenant, bien sûr, je vais le remplacer par qui vous prend juste copié sur la mise à jour de l'autre côté. Ensuite, nous voulons créer cette ligne unique dans la quatrième ligne. 25. Ajouter un formulaire: Donc la prochaine chose que nous voulons faire est de créer ce formulaire. Et comme vous pouvez le voir, nous avons deux colonnes. Une colonne qui contient le texte, et cette colonne qui contient le formulaire. Donc tout d'abord, c'est le côté nerveux, notre tableau de bord. Bien sûr, comme je l'ai mentionné, il y a beaucoup de plug-ins de formulaire là-bas, mais ceux que nous allons utiliser, celui que nous allons utiliser pour cette classe est formulator. Donc, faisons défiler vers le bas et cherchez formulateur et en cliquant sur la droite. Donc vous serez emmené à cette fenêtre juste ici. Et vous verrez cette option ici. Créer formulaire peut créer des sondages, mais bien sûr, cette classe n'est pas au-dessus la création de formulaire serait juste aller de l'avant et faire ce que nous voulons. Et on peut choisir n'importe quel préréglage ici. Donc je vais juste aller avec l'inscription ou on peut commencer par un blanc. Laissez-nous choisir vide et continuer. Appelons ça l'enregistrement. Et puis créons ou montons. Donc, c'est là. Nous pouvons aller de l'avant et commencer à ajouter des champs. Ces champs. Donc, je vais cliquer sur Insérer et vous pouvez ajouter n'importe quel champ que vous voulez. Alors choisissons deux champs, comme l' e-mail et le téléphone. Ensuite, nous allons insérer des champs. Et vous remarquerez qu'ils sont empilés en descendant. Mais ce que nous voulons atteindre, c'est une forme de ligne unique. Donc, en revenant ici, traînons ça et dépose-la dès que tu verras cette ligne bleue juste ici. Déposez-le là, puis appuyez sur Publier. Sera présenté avec ce code court. Il suffit de cliquer sur cette petite icône pour copier le code court. Tu auras ce petit message. Retournez à notre page ici. Et maintenant, alors que nous avons encore ce code court copié dans notre presse-papiers, eh bien, tout d'abord, créez une section à double colonne. Et de ce côté de la section double colonne, j'ajouterai un élément de code court. Donc, nous allons le faire glisser à la fin ici, nous pouvons maintenant coller le code court que nous venons de copier. Et s'il vous plaît observez ce nombre parce que nous l'utiliserons bientôt lorsque vous apprendrez à ajouter du CSS personnalisé, nous allons l'appliquer. Poussons vers le bas jusqu'à cette section. C'est vrai ? Notez que vous pouvez, pour l'instant vous ne pouvez rien voir parce que tout d'abord, donnons-lui ce fond bleu et ajoutons ces textes. Donc, en saisissant cette section, Modifier le style de section est aller ici. Et nous allons lui donner cette couleur de fond. Merci, vous étiez quelque part. Allons avec ces données. Donc, de ce côté-ci, nous voulons avoir ces textes. Alors je vais prendre ça. Ensuite, je viendrai ici et sélectionnez Titre. Collez ce texte là. Et disons cette couleur au blanc. Texte. Blanc. Bien sûr, nous allons faire le type sont la graphie Montserrat, c'est déjà Montserrat, donc nous sommes prêts à y aller. Bon, Donc si nous avons maintenant un aperçu des changements, faites défiler vers le bas et voyez ce que nous avons. Donc, c'est ce que nous avons actuellement, mais le bouton est en dessous des champs de saisie. Alors comment on l'amène ici ? Maintenant, il atteint un point où lorsque vous travaillez avec des plugins WordPress et WordPress, tous ces plug-ins sont incapables de vous aider à obtenir certaines apparences que vous voulez sur votre page. Donc, cela appelle pour CSS personnalisé. 26. Styler avec des CSS personnalisé: Alors que nous sommes toujours sur cette page d'aperçu, pas la page d'édition, ira à l'intérieur personnaliser et nous allons ajouter des CSS personnalisés. Wordpress vous fournit cette section ici. Si nous faisons défiler vers le bas, vous trouverez des CSS supplémentaires. Donc notre objectif est d'amener ce bouton sur le côté. Et notre plugin n'a pas cela par défaut. Alors comment on fait ça ? Nous allons entrer ici dans le CSS supplémentaire et je vais juste changer d'onglets rapidement. Tout d'abord, j'avais déjà préparé un extrait de code que nous allons ajouter dans le afin que ces extraits de code seront dans le dossier zip dans la description ci-dessous, alors assurez-vous de les saisir et de les ajouter sera très facile. Alors prenez le premier, alors prenez le premier extrait de code à leur copie il. Allons à l'intérieur de notre page et collez-la juste là. Et quand vous le collez, regardez ce qui se passe ici. Alors maintenant, le style a changé. Tout d'abord, publions ça. Rappelez-vous, nous avons utilisé pour le ministre pour créer ce formulaire. Et nous avons utilisé un code court. Laisse-moi cliquer dessus. Nous avons utilisé ce code court que nous avons fourni par formulator. Et ce formulaire a ce numéro ici, qui est le numéro de la forme. Si je pouvais retourner à l'intérieur pour le ministre en forme de clique. Vous remarquerez que nous avons le formulaire ici, le formulaire d'inscription. Et si vous cliquez sur ce COG avec ici, nous avons copier le code court. C' est le même code court que nous avons ici, et il a ce numéro 350 jusqu'à maintenant. Notre page ici est mal alignée car ce 570 est le numéro de l'autre formulaire que j'utilise pour créer ces extraits de code. Nous devons donc remplacer ces 570 par le numéro de votre formulaire, 352 dans tout maintenant est correctement aligné. Allons de l'avant et publions ça. Retournons ici. Cliquez sur Réviser. Et maintenant c'est ce que nous avons, mais nous voulions l'exécuter jusqu'à la fin. Donc, en revenant à l'intérieur de notre formulaire sous l'une ou forme, formulaire d'inscription, cliquez, Modifier. Donc, nous pouvons changer l'apparence dedans parce que comme je l'ai mentionné, ce formulaire n'est pas modifiable avec Elementor. Il est modifiable avec le plug-in qui l'a créé, qui est formulé. Maintenant que nous avons ouvert le formulaire d'inscription, allez à l'intérieur de l'apparence et nous pouvons y apporter des modifications. Donc, ce que nous voulons faire est d'abord aller aux couleurs, puis sous personnalisé, nous allons obtenir toutes ces options. Mais ce qui nous intéresse, c'est le bouton Soumettre. Alors cliquez dessus. Et changeons la couleur de fond en blanc. Donc je vais juste cliquer sur ce blanc. Et puis en vol stationnaire, ou on dirait qu'il a ce gris ? Donc, cependant, nous voulions avoir une couleur grise et vous pouvez la choisir ici. Et sur la mise au point, nous voulons qu'il ait la même couleur et qu'il mette à jour cela. Revenons donc dans cette page et disons Appliquer. Défilement vers le bas. C' est vrai ? Donc, nous allons cliquer sur l'aperçu. Voyez ce que nous avons maintenant. Donc, ce sont nos boutons jusqu'à présent, nous devons changer la couleur du texte en noir. Donc, pour ce faire, revenons ici et en dessous de la couleur de fond, nous avons la couleur du texte. Donnons-lui ce gris foncé qui est proche du noir. Et ce noir s'applique maintenant à l'état de mise au point. Assurez-vous qu'il s'applique au vol stationnaire et par défaut car ici, il reste noir dans tous les états. Donc je vais copier ce code. Et puis je viendrai côté de l'état de vol stationnaire, Cliquez dessus et collé là dedans. Et je vais entrer dans l'état par défaut, le copier, et le coller là dedans. Mettre à jour le formulaire ou le droit. Donc, si nous revenons ici et faisons défiler vers le bas, cliquez sur ce qui s'applique. Alors disons juste Aperçu. Faites défiler vers le bas. Et le bouton en ce moment devrait avoir cette couleur quand nous cependant, il est gris et le texte reste noir. Alors maintenant, il est temps de leur donner ce coin arrondi. Comme nous l'avons fait avec les autres boutons. Formulateur à l'intérieur. Faites défiler vers le bas, vous trouverez une section CSS personnalisée, activez CSS personnalisé. Et ici, vous pouvez ajouter plus de CSS personnalisé pour styliser spécifiquement votre formulaire. Ici, nous avons déjà des sélecteurs de base pour les différentes parties. Ne parlera pas de ce que sont les sélecteurs. Parce que rappelez-vous, il ne s'agit pas de CSS, il s'agit de comprendre que vous pouvez apporter ces modifications, ces modifications. Donc nous allons revenir à nos extraits de code et nous allons choisir ces deux extraits de code et retourner ici et les coller là dedans. Puis, jour levé. Donc, si nous mettons à jour cela, alors prévisualisez-le ici. Voyons à quoi ressemblent les formulaires maintenant ils ont ce coin arrondi et le bouton ici est invisible parce que l'arrière-plan est blanc. Mais fermons ça. Et allons à l'intérieur ici. Faites défiler vers le bas, cliquez à nouveau sur le formulaire et appliquez. Donc, si nous cliquons sur Aperçu maintenant, faites défiler vers le bas. Notre formulaire a maintenant ce bouton de coin arrondi et les coins juste ici, le rayon de la bordure est de 5, semble un peu mieux. 27. sections double colonne: Donc, en sautant sur cette page ici, ajoutons cela, Ajoutons cette colonne. Et maintenant, dans cette colonne, ce qu'il nous faut c'est la sécurité d'abord, comment se présenter comme un étranger. Rappelez-vous, en élémentaire, vous pouvez recycler des choses. Alors pourquoi ne pas les choisir d'abord, dupliquer ça. Et puis faisons-le glisser ici. Lâche-le là. Dupliquons ce texte ici aussi. Et faites-le glisser là-bas. Et puis attrapons ce qu'il fait. Nous avons encore ces petits textes juste là. Alors, dupliquons ça. Et faisons-le glisser vers le bas. Faisons-le glisser à l'endroit. Alors maintenant, prenons cette sécurité d'abord. Mets-le là-dedans. Allons-y et attrapons ça. Comment, comment se présenter comme un meilleur étranger. Cliquez dessus, puis collez-le dedans. Alors attrapons ça aussi bien à l'intérieur et collez-le là-dedans. Et comme vous pouvez déjà le deviner, nous avons déjà créé quelque chose comme ça plus tôt, donc nous n'aurons pas besoin de le recréer. Allons donc chercher là où nous l'avons conçu, là où il est. Alors dupliquons ça et faites-le glisser vers notre nouvel endroit. Laissons-le là-bas. Et maintenant, la marge ici semble être trop importante. Nous allons donc réduire la marge sur la section bouton. Mais si on le laisse à 15 ans, disons-le cinq. Et maintenant, disons juste 0. Ensuite, mettez à jour cela. Défilement vers le bas ou vers la droite. Alors ajoutons cette image qui est censée être ici. Cliquer sur l'élément d'image. Prenons une image maintenant. Imagerie comme capture. Attrape cette dame. Attrapons encore ce type. l'ai vu beaucoup, mais nous n'avons pas trop d'images. Alors mettez à jour ça. Prévisualisons-le ou RI. Mais maintenant, nous devons augmenter un peu l'espacement. Alors prenons cette section, éditez la section. Et puis, tout d'abord, retirez ce lien sur le rembourrage et ajoutons un rembourrage supérieur de peut-être 20. Et cela semble être le contraire de cela. Donc maintenant l'image vient de ce côté et le bloc de texte va de l'autre côté. Donc, ce que nous devons faire est de dupliquer cela et ensuite simplement glisser ces colonnes bien de côté. Et nous l'avons là. Et j'ai remarqué que nous n'avons pas assez d'espacement ici. Alors rendons l'espacement ici plus large. Donc les colonnes s'écartent, Voyons voir, plus large. Mettez à jour cela. Faisons la même chose pour cette mise en page. Colonnes écartées plus larges. Mais changeons d'abord cette image. Permettez-moi d'utiliser ça pour cette section. Alors ensuite, nous allons travailler sur ce domaine. Mais avant ça, j'ai remarqué que le bouton ici, il n'y a qu'un seul bouton ici. Alors supprimons ce supplément. En fait, supprimons cette colonne et laissons ce bouton juste là. Et nous pouvons changer ce que dit le texte. Apprenez-en davantage sur l'axe des vaccins. Cliquez sur le bouton lui-même. En savoir plus sur les lignes directrices communautaires. Cliquez sur ces lignes directrices et pensez que la chanson parlait d'apprendre sur la sécurité. En savoir plus sur la sécurité. Mettez à jour cela. Et nous allons prévisualiser les modifications. Faites défiler vers le bas. Faisons quelque chose à propos de ce bouton ici. Ça a l'air un peu pressé. Juste là. Mettez à jour cela. Donc, la prochaine chose que nous voulons faire maintenant, nous pouvons aller travailler sur cette zone inférieure. Et c'est une section pleine largeur à une seule colonne. 28. Section Plein largeur: Nous allons donc ajouter une section de colonne simple pleine largeur. Maintenant, tout d'abord, vous voyez que c'est du texte, mais c'est une image parce que c'est un peu sélectionnable. Ajoutons donc des éléments d'image là-dedans. Et puis nous allons cliquer là-dedans. Je vais choisir, je vais choisir ce logo que j'avais créé pour cette zone. Et comme vous pouvez le voir en taille, C'est très petit, 123 pixels par 54 pixels. Et c'est pour ça qu'il s'adapte bien là. Si vous choisissez une grande image, vous remplirez cette zone et vous ne voulez pas cela. Assurez-vous donc que votre image est de la bonne taille. Ensuite, créons ces. Nous vous aidons à déplacer votre. Donc, je vais aller de l'avant et prendre ce texte ici, dupliquer, et faire glisser ceci dans le coller là-dedans. Et puis mettons-le au milieu. Et puis pour ajouter ces textes animés ici, nous devrons installer un autre plugin qui ajoute plus de fonctionnalités à elementor. Et c'est ce qu'on appelle des add-ons essentiels pour élémentaire. 29. Ajouter un texte animé autoportrait: Revenons donc à l'intérieur de nos plugins de tableau de bord. Voyons si nous l'avons déjà. Non, nous ne le faisons pas. Alors ajoutons des add-ons essentiels pour Elementor. Spectacle. Le même spectacle. Et c'est le premier. Bien sûr. Allons l'installer. Bon, alors activons ça. Il s'agit donc d'un assistant d'installation. Allez-y et cliquez sur suivant. Et ce qui nous intéresse, c'est le texte de fantaisie, donc il est vérifié. On peut aller de l'avant et cliquer sur Suivant. Ne l'installez pas. Suivant. Terminer. Impressionnant. Avec cela installé maintenant, nous avons des add-ons essentiels et nous pouvons y accéder ici. Donc, tout d'abord, je vais mettre à jour cette page 4, on passe à autre chose. Ensuite, je vais rafraîchir la page afin que les ajouts essentiels soient chargés. Bon, alors faisons défiler vers le bas. Et maintenant, je vais taper du texte et vous remarquerez que nous avons différents éléments de texte, mais ce dont nous avons besoin, c'est le texte de fantaisie. Alors attrape ça et dépose-le juste en dessous de ce x juste là. Donc, ces éléments de texte fantaisie ici a le texte du préfixe et le texte du suffixe. Supprimons donc le préfixe et le suffixe. Maintenant, il nous reste avec cette zone animée dans ceci est une liste de tous les différents mots ou expressions que vous voulez animer. Donc, dans notre cas ici, nous avons des clients, des idées, des personnes interrogées, des visiteurs. Allons-y avec ça pour l'instant. Des idées sur ses élèves, patients. Je suis en train de les dupliquer et d'ajouter le plus. Ajoutons un de plus. Employés, entreprises, entreprises et employés. Alors mettons-le à jour. Et nous ne voulons pas qu'il soit tapé, veuille s'estomper vers le bas. Alors passons aux paramètres de texte fantaisie. Et maintenant, dans ces paramètres, allez à type d'animation, sélectionnez ce que vous voulez. Donc, dans ce cas, nous disons fondu vers le bas. Et donc il a senti que nous recherchions que nous pouvons changer le temps de retard. Combien de temps vous voulez qu'il reste juste là avant qu'il passe au mot ou à la phrase suivante. Cela semble se déplacer rapidement et aussi maniaque. Cela semble avoir cette transition lente. Ensuite, créons ceci. Copiez ça. Dupliquons ça. Ensuite, faites-le glisser juste en dessous du texte. Alors je vais juste le coller là-dedans. Je vais aller au style et l'aligner au centre. Mettez à jour cela. Ensuite, nous devons ajouter ce bouton. Tu es déjà deviné. On a juste besoin d'entrer, prendre ça ici. Mais nous n'attrapons pas la section intérieure, nous saisissons le bouton lui-même. Dupliquer ça. Laisse-le ici. Et mettons-le au milieu. Est trop de marge juste ici en dessous de cela. Donc, pendant que ce texte est sélectionné, je vais aller à Avancé, casser ça et ça, puis je réduirai la marge inférieure. Je pense que c'est le bon endroit. Et je vais sélectionner ce texte de fantaisie et faire de même. Alors cassons ça et réduisons la marge supérieure. Réduisons, Réduisons aussi la marge inférieure. Cette année-là, le bouton a l'air bien. Apprenez-en plus sur les feuilles. Il est sélectionné. Mettez à jour cela. Suivant. Créons ce logo. Créons cette zone de logo. 30. Ajouter un diapositive du logo client: Donc, on va aller de l'avant et on va attraper. Dupliquons cette section ici. Et enlevons tout. Supprimez tous ces autres éléments. Supprimons ce bouton. Et puis j'ajouterai le logo du client de journal dans le. Maintenant, rappelez-vous que nous avions déjà utilisé les éléments du logo client ici. Donc je vais cliquer n'importe où à l'intérieur. Et je vais copier. Et je vais faire défiler vers le bas et cliquer n'importe où à l'intérieur ici. Et je vais coller le style. Voir, tous les styles appliqués sont maintenant appliqués à l'autre. Et tout ce que nous avons à faire est maintenant remplacé les images par nos images. Et la somme utilisera ces logos ici. Donc je vais attraper ça, effondrer cette image Grab 2. Grab Logo arbre. Réduire qui développez l'image pour réduire cela, développez cela. Image 5. Réduisez ce dupliqué. Double six. Dupliquer ça. Et bien sûr, vous devez remplacer le nom. Vous pouvez lui donner un nom. L' ascension. Ensuite, nous allons le dupliquer une fois de plus et ajouter un logo de plus. Et mettons-le à jour. Bon, alors nous allons prévisualiser les changements. Défilons vers le bas et voyons ce que nous avons jusqu'à présent. Et puis remarquez qu'il y a des logos. Les logos semblent être plus petits et nous devons rendre le nôtre un peu plus petit. Alors réduisons les paramètres locaux. Allons voir deux diapositives. Faisons peut-être six. Faisons sept. Oui. Donc sept les rend un peu plus petits parce que l'espace est limité. Et nous allons prévisualiser les modifications. Très bien, je pense que ça me plaît comme ça, mais réduisons la marge. Marge supérieure juste ici. C' est un peu trop sur notre page de destination. Je vais donc cliquer sur les éléments du logo client avancés. Retirez cela, et je réduirai la marge supérieure. Disons jusqu'à ce point. Défilons et voyons ce que nous avons jusqu'à présent. Notre site Web est presque complet comme vous pouvez le voir. Donc la seule chose que nous n'avons pas conçue est un pied de page. Allons à la conception. 31. Conception du pied: Donc ce que je vais faire, donc ce que je vais faire en ce moment, c'est sortir de cette page parce que nous en avons fini pour l'instant. Nous allons aller de l'avant et concevoir le dossier. Dans. Une fois que nous avons terminé avec notre dossier, va ouvrir toute la page et le rendre réactif sur différents appareils et tailles d'écran. Et je vais cliquer dessus. Donc, pour créer un dossier, nous allons utiliser le même outil que nous utilisons pour créer l'en-tête et donc le générateur d'en-tête et de pied de page Elementor. Alors cliquez dessus. Et nous allons cliquer sur Nouveau, ajouter un nouveau. Et ici, nous allons lui donner un nom, mon dossier. Et bien sûr, c'est le pied de page. Nous voulons qu'il soit visible sur l'ensemble du site. Et nous voulons nous assurer que tout le monde y ait accès. Ensuite, appuyez sur Publier. Et avant d'éditer avec Elementor, assurez-vous que c'est Elementor plein, pleine largeur, pas de barre latérale, pleine largeur étirée. Désactivez ces trois et le pied de page car vous ne voulez pas afficher la valeur par défaut fournie avec Astra. Nous voulons créer le nôtre avec Elementor. Alors mettez à jour ça en premier. Désolé pour ça. Et puis nous pouvons éditer avec Elementor sera pris au frontend. Comme d'habitude. Nous allons le concevoir visuellement. Droit ? Donc nous y voilà. Qui va de l'avant et regardons à quoi ça ressemble. Donc ce sont nos quatre colonnes. Ceci est une section de 40 colonnes. Alors cliquez dessus, puis choisissons celui-ci ici. Maintenant, nous avons ces quatre colonnes. Donc, la première chose à faire ici est de cliquer sur ce bouton juste ici. Nous voulons ajouter ces textes, cette liste de textes. Donc, en tapant ici, listes. Et nous avons différents éléments de liste. Et ce qui nous intéresse, c'est la liste des pages par les éléments enfant. Donc, déposez-le là et nous pouvons ajouter le premier élément, qui deviendra un pilote. Les CD de gains aident conducteur de sécurité. Pas besoin de sous-titre pour l'instant. Ensuite, nous pouvons sélectionner la page à laquelle ce lien mènera. Parce que lorsque vous cliquez sur ce bouton, vous serez redirigé vers une page. Tout lien sur lequel vous cliquez est une page. Donc, nous allons juste choisir n'importe quelle page ou aller avec une page d'affaires. Et l'élément est répertorié immédiatement vous choisissez une page. Nous pouvons dupliquer ça. l'aide. Vous pouvez modifier cela. Je suis juste en train d'inventer ces mots. Donc les affaires. Alors nous allons dupliquer ça. Changeons ça pour rouler. L' effondrement moins compliqué que. Changeons ça pour nous. Et bien sûr qu'on peut faire la liste aussi longtemps que tu veux, mais je m'arrêterai là. Faisons deux autres listes. Donc je vais juste dupliquer ça. Et je le traînerai là-dedans. Je vais également le dupliquer à nouveau et le faire glisser là-dedans. Donc, tout d'abord, si je pouvais sélectionner cela, allez dans le texte de style. Vous pouvez changer la couleur du texte en noir. Quoi d'autre ? Et puis nous pouvons copier le style, coller, le style. Coller à nouveau le style. Mettez à jour cela. Maintenant, ajoutons ces sous-titres ici. Chauffeur, écrivain, ascenseur. Alors je vais cliquer dessus. Je vais prendre un titre de texte, H2. On doit le rendre un peu plus petit. Alors passons à la typographie. Essayons 18. Oui, je crois que j'aime ça, mais il doit être de couleur noire. Et bien sûr, changeons. Le texte dit « conducteur ». Et je peux dupliquer cette drogue avec là. C' est un écrivain cavalier. Dupliquez ça, essayez-le là-bas. Et celui-ci, c'est l'ascenseur. Alors créons nos boutons. Cliquez dessus, allez à Bouton, déposez-le là. Revenons ici dans le style. Changeons la couleur en blanc. Et puis donnons-lui une bordure solide d'un. Et donnons la bordure de la colonne noire override. Alors donnons-lui un rayon de frontière de 50. Donc, la couleur du texte en ce moment est nulle. Changons-le en noir. Et que dit le bouton ? Application pilote Lyft. Donc, tout en étant toujours sélectionné, faisons défiler vers le haut. Ascenseurs. Application Pilote, Salut. Et propre, cependant, il a ce gris, donc le style. Bien qu'il soit encore sélectionné, six couleurs doivent rester noires. Et la couleur de fond devrait être ce gris. Oui. Alors maintenant, nous allons simplement dupliquer cela deux fois. Et puis nous pouvons changer ce que dit le texte. Application Leaf writer, directement sur le web. Sur le web ou à droite. Donc, jusqu'à présent, j'aime ce que nous avons, mais je crois qu'ils doivent être un peu plus proches et laisser de la place sur les côtés. Donc, ce que nous devons faire est d'ajouter un peu de rembourrage sur la section qui les tient. Et nous devons d'abord briser ce lien. Puis la droite, le rembourrage gauche. Augmentons le rembourrage gauche à 50, peut-être 100. Et le bon rembourrage de la même façon. A 100. Ensuite, mettons-nous à jour ça. Prévisualisez la chaîne, prévisualisez les modifications. Pas encore, alors faisons-le. Donc disons 200 par 200. Ensuite, mettons-le à jour. Je crois que j'aime ça. Alors maintenant que nous avons le dossier prêt, sortons d'ici, Quittez cela au tableau de bord. Et puis allons à Pages. Et voici notre page. Donc, nous allons faire un clic droit et ouvrir le lien dans un nouvel onglet afin que nous puissions l'afficher en prévisualiser. Alors maintenant que tout le contenu est ajouté à la page et mis en page, allons-y et faisons la touche finale à tout le rembourrage et la marge et les alignements dont nous avons besoin sur la page, puis le rendre pleinement réactif avant de terminer. 32. Rendre la page réadaptative: Donc, ce que je vais faire est d'afficher les DevTools en appuyant sur Control Shift I. Chaque navigateur a DevTools. Si vous utilisez Chrome, vous pourrez toujours accéder aux DevTools. Et puis je vais frapper cette icône de mode de design réactif juste ici. Et cela fera apparaître ces différents paramètres pour différentes tailles d'écran. Ici vous pouvez voir que nous avons le Galaxy S9, l'iPad, l'iPhone, et nous pouvons passer à travers les différents appareils et voir à quoi ressemblera la page Web. Donc maintenant, comme vous pouvez le voir, le menu s'est effondré. La barre de recherche s'est déplacée vers la droite, et notre logo reste ici. Donc, nous avons encore les trois éléments sur tablette et sur iPhone. Les éléments se rapprochent, mais ils sont toujours là. Et bien sûr dans tous les autres téléphones, les trois articles seront toujours là. Alors laissez-moi sauter sur notre page et faisons le même décalage de contrôle, I et C, l'état actuel. Donc je vais frapper cette icône juste ici. Et voyons ce que nous avons. C' est donc ce que nous avons actuellement. C' est à quoi ressemble le logo, il semble que chaque élément est empilé au-dessus du précédent. Nous avons beaucoup de travail à faire ici. Donc, je vais aller de l'avant et je fermerai ça. Et juste ici, je vais frapper ça et ensuite fermer ça. 33. Navbar réactif: Pour revenir à notre page de destination, souris sur Modifier avec Elementor et cliquez sur la barre de navigation. Bon, alors nous y voilà. Donc ce que je veux faire est de frapper cette petite icône en mode réactif ici. Ça fera monter ce bar. Et comme vous le voyez, nous avons les différents appareils ici, et vous pouvez choisir le téléphone mobile. Commençons par ça. Allons au mode tablette. C' est à ça que ça ressemble. Je pense que sur le bureau on peut travailler avec ça. Donc, ce que je veux faire est de créer une barre de navigation différente pour chaque appareil afin que nous soyons en mesure de le personnaliser confortablement sans affecter son apparence sur d'autres zones. Donc je vais dupliquer ça. Et c'est ce que nous allons personnaliser pour la tablette. Et je le dupliquerai à nouveau. Et c'est ce que nous aurons pour nos smartphones. Donc, dans cette barre de navigation qui sera visible sur le bureau uniquement, je vais cliquer dessus, assurez-vous que c'est celui que je suis en train d'éditer et L aller à l'intérieur avancé. Faites défiler vers le bas dans vous trouverez responsive. Et ce qu'on veut faire, c'est se cacher sur la tablette et l'écran mobile et mettre à jour ça. Cela signifie que ce menu ne sera pas, cette barre de navigation ne sera pas visible sur les écrans mobiles. Et vous pouvez le dire par la couleur qu'il a quand on est sur un mode différent. Donc, si je clique pour aller à la tablette, remarquez que maintenant c'est des niveaux de gris, la couleur a changé. Je veux dire, ce n'est pas actif. En d'autres termes, en ce moment, ce n'est pas visible. Si vous le visualisez sur tablette et si nous allons à l'intérieur l'écran mobile et nous allons sélectionner la tablette napa, aller à l'intérieur avancé, faites défiler vers le bas, responsive. Et cachons-le sur le bureau et le mobile. Mettez à jour cela. Et allons à l'intérieur de la taille du mobile. Et maintenant, notez que ces deux sont en niveaux de gris donc ils ne sont pas actifs ou écran mobile. Et puis juste ici, Sélectionnons que avancé et cachons-le sur tablette et bureau afin qu'il soit seulement visible sur les smartphones. Maintenant que nous avons cela, je veux faire glisser ceci et le mettre en haut pour que nous puissions travailler avec elle confortablement et voir à quoi il ressemble quand il est là-haut. Ce que nous voulons faire, c'est atteindre ce résultat. Ramenons simplement la vue mobile. Et ce que nous voulons réaliser, ce sont ces trois colonnes actuellement, nous les avons empilées les unes sur les autres. Sélectionnez ici cette première colonne qui contient le logo. Nous voulons aller à l'intérieur de la mise en page. Et sur le point de largeur a fait le logo peut-être 10 pour cent, disons 20 pour cent, 30 pour cent. Je vais cliquer sur la colonne juste ici, tenant la barre de recherche, et on ira à l'intérieur, disons 60 pour cent. Donc 30 plus 60, c'est 90. Donnons à ce 10 pour cent la colonne là-bas que 10 pour cent, voila. Donc nous les avons dans une rangée. Prévisualisons les modifications et voyons à quoi elles ressemblent. Contrôle Shift, I. Cliquez sur cette icône ici. Nous devons ajouter une marge et faire quelques alignements sur les éléments. Alors revenons ici. Et ce qu'on veut faire, c'est sélectionner cette colonne. Et allons rompre ce lien et ce lien. Et puis nous voulons ajouter une marge supérieure quelque part là-bas. Faisons la même chose pour la colonne du logo Eddie. Allons casser ça et ça. Ensuite, ajoutons le petit peu marginal supérieur jusqu'à quelque part là-bas. Mettez à jour cela. Jetons un coup d'oeil à ce que ça ressemble ou RI. Donc, en ce moment, ils sont correctement alignés, mais nous devons quand même ajouter une marge ou un remplissage à la fois le côté gauche et le côté droit de l'écran. Donc, en sélectionnant cet élément lui-même ou aller à Avancé, il semble que c'est la marge. Diminons la marge quelque part là, négatif 20. Prévisualisons les modifications. Faisons aussi la même chose pour le logo. Sélectionnez le logo lui-même. Avancé. Essayons d' augmenter la marge de ce côté et de mettre à jour leur aperçu les modifications. Je pense qu'on va aller quelque part avec ça. Et bien sûr, on peut jouer avec ça jusqu'à ce que tu sois satisfait. Tant que vous savez comment utiliser les outils, vous pouvez jouer avec ces nombres et valeurs jusqu'à ce que vous obtenez l'apparence parfaite. Passons maintenant à la taille de la tablette. Pour l'instant, on en a fini avec ça. Et voici notre tablette Napa. Et bien sûr, ouvrons le paramètre iPad. Nous devons pousser le menu pour décider. Avec le menu sélectionné, le menu de navigation sélectionné cliquez sur Disposition. Allons ici à l'alignement, et mettons-le sur le côté droit. Alors, en ce moment, nous devons diviser cette largeur de 100 pour cent. Exactement je voulais. Donc, comme vous pouvez le voir, cette colonne est longue, va jusqu'ici, donc ça devrait être d'environ 55 pour cent. Ça ressemble à 45 pour cent. Donc, sélectionnons la colonne du logo. Excusez-moi, les 55 pour cent. Poussons le logo tout le chemin vers la gauche ou la droite. Donc, le menu a été poussé vers le bas parce que nous n'avons pas donné de valeurs pour ces colonnes, donc bon. Cela peut être un 30 pour cent. Et donnons au menu 15 pour cent. Maintenant, peut-être donnons-lui environ 10 pour cent. Alors obtenons ce 40 pour cent. Donnons à ça 50 % du droit. Donc, nous allons prévisualiser les changements en ce moment. Ouvrons l'iPad. Donc je pense qu'on peut travailler avec ça. Mais bien sûr, vous pouvez toujours continuer à travailler dessus jusqu'à ce que vous obteniez quelque chose qui vous plaît vraiment. Le but ici est d'apprendre à utiliser les outils. C' est ce que j'insiste. 34. Section de héros réactif: Passons à la partie suivante, qui est la section héros. Comme vous pouvez le voir maintenant, de ce côté, nous avons deux images. Et sur le côté, nous avons le texte et les boutons. Et quand nous contrôlons le décalage I, ce texte de titre s'effondre et vient au milieu, son centre aligner les boutons ici, notre central aligné. Maintenant, nous n'avons qu'une seule image. L' autre a disparu ou est caché. Alors rendons cette section de héros réactive parce que nous en avons fini avec cela. Alors fermons cette fenêtre. Revenons au tableau de bord et passons à l'intérieur des pages. Et notre première page est des affaires, si souvent avec Elementor. Alors allons de l'avant et cliquez sur cette icône en mode réactif. Voyons à quoi ça ressemble sur tablette. Donc, comme nous l'avons fait avec le menu juste ici, nous devons obtenir ces colonnes une nouvelle largeur pour la tablette. Et donc ce qu'on veut faire avec celui-ci. Donc, ce que nous voulons faire est de cliquer sur cette colonne juste ici et à l'intérieur de la colonne. Donnons-lui un 100 pour cent qu'on remplace. Juste comme ça. Mettons à jour ça. moment, tout est centré, alors centrons notre texte et nos boutons. Donc, en commençant cela, sélectionnez cela et appuyez sur cet alignement, écrivez le select this, faites de même. Et maintenant, maintenant que nous avons ces boutons juste ici, nous ne pouvons pas les faire empiler les uns sur les autres parce qu'ils sont dans des colonnes différentes. Donc, ce que nous allons faire est de dupliquer ceci et nous pouvons aller de l'avant et sélectionner ce top dans une section, aller à Advanced responsive. Et puis disons, bonjour Don comprimé. C' est ce qui sera visible quand on sera là. Mais quand nous entrons dans le mode tablette, c'est ce qui sera visible. Et ce qu'on veut faire, c'est faire glisser ça en dessous de ça comme ça. Et maintenant nous pouvons nous débarrasser de cette colonne. Cliquez sur ce bouton ici. Alignez-le au milieu. même cas s'applique à cela. Mettez à jour cela, et je veux faire glisser cela jusqu'à ce point juste là, mais comme vous pouvez le voir, je ne peux pas le faire glisser directement là, donc je vais juste le faire glisser jusqu'ici. Et quand je le relâcherai, il viendra juste en dessous de ça. Il suffit de trouver un moyen de le déposer juste en dessous de ces textes afin que vous puissiez travailler avec le plus confortablement et voir comment ils s'alignent. Alors maintenant, revenons en arrière et cachons ça sur tablette. Mettez à jour cela. Et réduisons cette taille de police parce qu'elle semble un peu trop grande. Typographie. Je pense que c'est un peu plus audacieux, alors donnons-lui un poids de police de 700. Je pense qu'il est un peu plus sombre, comme ça. Mise à jour. Alors passons aux images, sélectionnons la colonne de l'image, et donnons-lui une largeur de 100 pour cent, comme nous l'avons fait avec cette colonne juste ici. Donc un 100% et il prend déjà cette forme, cette forme juste ici. Donc, ce que je vais faire est de sélectionner cette image. Maintenant, accédez à la tablette Haydn réactive avancée. Donc en ce moment seulement cela sera visible sur tablette, juste comme ici. Donc, nous appuyez sur Sauvegarder et prévisualiser les modifications. C' est à ça que ça ressemble. Whoa, nous devons d'abord cacher ces deux boutons. Alors revenons ici vite. Sélectionnez ces deux boutons. Avancé, réactif, Salut Don, ordinateur de bureau et smartphones. Mettez à jour cela. Et si nous revenons à notre page, d' accord, donc nous avons nos boutons de bureau originaux, mais quand nous contrôlons l'oeil de mouton, maintenant nous avons ces deux boutons qui s'empilent ensemble sur la tablette. Voyons la distance juste ici. Nous devons augmenter la distance un peu ici. Donc, revenant à cette image, Sélectionnons la section interne. Allez à Avancé. Et augmentons la marge inférieure. Tout d'abord, nous supprimons ce lien. Il a augmenté la marge supérieure jusqu'à quelque part là-bas. Et la marge inférieure jusqu'à quelque part là-bas. Mise à jour. Prévisualisons les modifications. Droit ? Donc notre espacement ici semble un peu meilleur. Donc, cette image a besoin d'une correction. Mais notez que nous avons seulement cette image maintenant parce que cette autre est cachée sur tablette. Donc ce qu'il faut faire, c'est amener ça au centre. Alors je vais aller de l'avant et sélectionner cette colonne. Et je vais supprimer ces liens maintenant. Et puis en sélectionnant l'image elle-même, allez à Avancé. Vous déplacez aussi ces liens. Puis ramenez le rembourrage. Donnons-lui un rembourrage de 25. Et nous allons prévisualiser les changements ou à droite, penser comme ce que nous avons jusqu'à présent. Je pense que nous devons augmenter le rembourrage ici un peu plus loin, peut-être un 50, 70. Prévisualisons les modifications. Très bien, mais notez maintenant qu'à cause du rembourrage que nous avons ajouté l'image, cette distance est trop grande. Allons donc de l'avant et réduisons la marge. Le fait de la marge inférieure, supprimons cette marge inférieure et mettez-la à jour. Prévisualisation des modifications. C' est plus comme ça, mais nous pouvons aller un peu plus loin et le réduire à 30. Peut-être. Je vais aller de l'avant et prévisualiser à nouveau les changements. Ça a l'air bien. Pas exactement comme ça, mais on peut toujours travailler avec quelque chose. Rappelez-vous, prenez votre temps de travailler là-dessus et de le rendre parfait. Donc je suis satisfait de notre section héros pour l'instant. Tampon pour passer à la section principale du corps et le rendre réactif. 35. Section du corps réactif: Donc, en revenant à la page principale, la page réelle, pense que nous l'avions bien regardé, mais rappelez-vous que nous avons ajouté du rembourrage autour de cette image, pas de côtés, donc nous avons beaucoup de rembourrage ici. Réduisons la marge supérieure sur cette section. Donc, en sélectionnant cette section, je vais aller à Avancé dissocier cela. Et vous remarquerez qu'il a sauté après avoir supprimé les marges par défaut. Et maintenant, nous pouvons lui donner la marge que nous voulons. Utilisons nos yeux et voyons où nous voulons l'avoir. Je pense qu'on doit te donner 10, 10 marginal ou droit, donc j'aime ça jusqu'à présent. Section suivante, mais en ce moment ces icônes semblent un peu pressées. Et donc nous devons ajouter un peu d'espacement entre l'icône et les sous-titres comme s'y rendre et faire cela. Donc nous devons obtenir ces 10, 10% pour cent dans ce 90 pour cent. Faisons la même chose pour ce 10 pour cent et pour le calendrier flexible 90 pour cent. Et enfin, que 10, 90% mettre à jour ça. Prévisualisons les modifications. D' accord, ça a l'air bien aussi. C' est beaucoup mieux en regardant le bouton juste ici. Ça ressemble presque à un cercle. Voyons à quoi ça ressemble. Et ils semblent avoir centralisé cette sous-rubrique ici. Le nôtre n'est pas que je crois que j'aime le nôtre comme ça. Nous n'avons pas à copier exactement ce qu'ils ont. Mais si vous vouliez y parvenir, nous devrions choisir ça. Alors venez ici et dites au centre aligner en arrière. Dans le même cas avec ça. Bon, passons à ce bouton juste ici. A quoi ça ressemble ? Très bien, ils sont empilés les uns sur les autres. On peut faire la même chose que pour ces deux boutons ici. Ou on peut les laisser côte à côte. Voyons ce que nous pouvons faire avec cela. Alors allons de l'avant et dupliquons cela aussi. Donc on peut en cacher un sur le bureau. Cachons ça. Cachez-le sur le bureau. Et maintenant portons ceci et mettons-le juste en dessous de ça. Et débarrassons-nous de cette colonne juste ici. Mettez à jour cela. Donc, cela sera visible sur la tablette uniquement, et cela sera visible sur le bureau. Alors disons-le sur tablette. Réactif avancé. Salut Don, tablette. Mettez à jour cela. Et nous allons prévisualiser les modifications. On y va. Ça a l'air sympa, juste comme ça. Vous pouvez jouer avec la distance entre les deux. Faites-les le rendre plus étroit ou plus large, non ? Alors, en passant à la section des témoignages, quoi ça ressemble ? Donc en ce moment, ils n'en affichent qu'un et le nôtre joue aussi. Je veux te faire un exercice. Je veux que vous dupliquez cette section ici et que la copie du visible sur tablette ne soit visible qu'au lieu de celle sur tablette pour montrer qu'un seul témoignage à chaque instant donné. Et une fois que vous avez fait cela, passons à ce domaine maintenant, augmentons cette marge ici. Comme vous pouvez le voir en ce moment, c'est un peu minuscule. Donc, je vais sélectionner cette section, aller à Avancé, supprimer ce lien juste là et lui donner peut-être un 50. Oui, je crois que j'aime ça. Faisons la même chose pour cette section bleue ici, ou sélectionnez la section interne juste ici. Allons à Advanced. Retirez ce lien et donnez-lui une marge supérieure de 50. Ensuite, mettez à jour cela. Ici, Présentons un aperçu des modifications ou à droite ? Donc, il semble un peu plus présentable en ce moment. Et comme vous le remarquez en ce moment, cette colonne était en dessous de ce bouton. À présent, il a sauté de l'autre côté. Et sur le nôtre, il n'a pas sauté de l'autre côté. Et c'est à cause de la façon dont nous l'avons ajouté. Rappelez-vous, nous avions cette section à double colonne. Alors, comment on dit ça ? De l'autre côté ? Nous utilisons également la duplication. Donc, dupliquons ça comme nous l'avons fait. Allons traîner ça là-dedans. Et maintenant, nous voulons rendre cela visible sur tablette seulement. Alors passons à Avancé avec ce responsive sélectionné. Haut ne pas mettre à jour les ordinateurs de bureau et les smartphones. Et nous voulons cacher cela sur la tablette et les smartphones. Si avancé. Masquer sur les tablettes et les smartphones. Je pense que cela a l'air bon, mais nous allons prévisualiser les changements. Je crois que j'aime ce que ça a l'air. Mais on peut le mettre au milieu, comme ça. Me sélectionner juste là. Débarrassez-vous de cette colonne juste ici. Il ne joue vraiment aucun rôle. Et sélectionnons ça. Il a mis cela au milieu et cela aussi. Faites défiler jusqu'au style. Suivant. Voici nos témoignages, auto-défilement, penser à l'endroit où ils sont jusqu'à présent, alors nous avons cette disponibilité de vélos. Pensez que nous pouvons ajouter une marge ou un rembourrage et le pousser un peu vers la droite. Alors sélectionnons ce texte. Allez à Avancé. Augmentons simplement le rembourrage de 20. Mettez à jour cela. Prévisualisons les modifications. Et notez que notre formulaire ici s'est effondré, tandis que le formulaire ici est toujours en ligne. Et encore une fois, c'est à cause de la méthode que nous avons utilisée ajouter le formulaire ici en utilisant pour ministre, nous devrions ajouter quelques CSS personnalisés ici pour en faire un formulaire en ligne sur tablette. Mais ce n'est pas notre objectif pour cela. Notre objectif est de comprendre les outils élémentaires. Pour l'instant, nous allons juste aller avec les effondrés comme ça. Alors fermons ça. Ensuite, nous voulons passer à cette section. Voyons ce que nous avons jusqu'à présent. Je vais cliquer sur ce mode réactif. Faites défiler vers le bas, non ? Donc, je pense que nous pouvons faire cette colonne ici semble être plus longue que cette colonne et, et c'est pourquoi les boutons ici semblent correctement alignés. Mais le nôtre semble un peu pressé. Alors rendons cette colonne un peu plus longue. Défilement vers le bas. Je vais sélectionner cette colonne. Alors donnons ça un 30 et donnons-en un sept. D' accord, mettons-le à jour. Droit ? Alors faisons la même chose pour ça ici. Augmentons ça à 60, 40. Mettez à jour cela. On a presque fini. Voyons donc ce que nous avons pour cette section. Défilons vers le bas. Presque similaire. Mais maintenant, notez que nos logos ici. Tout d'abord, nous ne pouvons voir que deux logos et ils sont un peu gros. Mais voyons ce qu'on peut faire à ce sujet. Réduisons le logo puis accédez à Paramètres. Et voyons où est-ce que c'est diapositives à montrer. Disons quatre. Ouais, j'aime ça. Mettons à jour ça. Prévisualisons les modifications. Faites défiler tout le chemin vers le bas. Oui. 36. Section de pied réactif: Alors faisons défiler le pied de page vers le bas. Voyons ce que nous avons de notre côté. Donc le nôtre a l'air un peu foiré. On doit faire des améliorations ou Knauer, alors on va sauter ici. Et maintenant que nous avons fini avec le contenu de la page principale, nous pouvons aller de l'avant et fermer ceci et Quitter to Dashboard. Alors je vais cliquer dessus. Allons dans l'apparence, en-tête Elementor et le générateur de pied de page. Et modifions l'édition du pied de page avec Elementor. Bon, alors passons en mode réactif. Allons à l'intérieur de la tablette. Donc, ce que nous devons faire est de dupliquer cela comme nous l'avons fait avec l'en-tête ou avec la barre de navigation. Et nous rendrons cela visible seulement sur tablette. Réactif. Donc, nous voulons le cacher sur le bureau. Et les smartphones. Mettez à jour cela, et nous voulons rendre cela visible uniquement sur le bureau. Alors mettons à jour ça. Alors venons ici et sélectionnons la section. Supprimons ces liens ici. Et puis relions le rembourrage ensemble et donnons à cela un peu de rembourrage. Donnons-lui peut-être 50. Alors sélectionnons la première colonne ici. Allez à Mise en page. Donnons-lui peut-être 20, 20  % ou 20 %. Et donnons à cela une absorption de 30% là-bas. Présentons les modifications. Contrôle Shift. Je clique sur cette icône de mode responsive, et c'est ce que nous avons sur la tablette. Donc je pense que j'aime ce que ça a l'air. Donc, je vais quitter le tableau de bord et je vais à l'intérieur des pages. Voyons, cliquez avec le bouton droit de la souris ouvrir le lien dans un nouvel onglet, et nous allons voir la page maintenant. Alors j'irai à Control Shift. Je vais passer en mode responsive. Et regardons le de haut en bas sur un iPad ou n'importe quelle tablette. Voyons voir à quoi ça ressemble sur un Galaxy S9. Et donc vous remarquerez qu'en ce moment il n'a pas l'air mauvais, présentable ou écran mobile. Et c'est parce que j'ai délibérément oublié la partie mobile responsive. Maintenant que vous avez appris à rendre les différents éléments réactifs sur tablette, vous allez utiliser les mêmes principes exacts pour le rendre réactif sur l'écran mobile. 37. Conclusion: C' est ça les gars, ça marque la fin de la classe. J' espère que vous avez aimé regarder. Bien sûr, c'est le premier d'une série de cours où je vais vous montrer comment utiliser Elementor en construisant des pages de destination réelles qui ont été couronnées de succès, des pages de destination de marques de renommée mondiale. Dans cette classe, on a levé. La prochaine classe, nous allons regarder une autre marque célèbre et reproduire leur page de destination en utilisant Elementor jusqu'à la prochaine fois que je suis un garçon, peut bursa morceau.