Apprendre Elementor et WordPress en concevant une page d'atterrissage

1. Introduction du cours: Bienvenue à un autre cours élémentaire génial avec moi peut Besser, vous savez, comme d'habitude, mon travail est de vous montrer comment concevoir de belles pages de destination. Et ils viennent tous avec une classe très spéciale appelée design, une page de destination de podcast avec Elementor. Donc, si vous avez un podcast ou que vous envisagez de lancer un podcast et que vous souhaitez savoir comment concevoir de belles pages de destination pour celui-ci. Ce cours est fait pour vous. Même si vous ne souhaitez pas démarrer un podcast ou que vous ne possédez pas de podcast, mais que vous souhaitez quand même apprendre à concevoir de belles pages de destination avec Elementor. Ce cours est fait pour vous. Maintenant, il n'y a pas de conditions préalables à cette classe. Donc, si vous n'avez jamais utilisé Elementor, c'est bon. Je vais vous montrer tout ce que vous devez savoir en tant que débutant et lorsque vous vous habituez à utiliser Elementor, vous apprendrez à utiliser le reste des outils. instant, nous nous efforçons de vous aider à comprendre que les outils et fonctionnalités les plus importants Elementor sont quelques-uns des sujets que nous aborderons dans cette classe, notamment la façon d'ajouter et de styliser des titres, des paragraphes, des boutons et des images. , et d'autres effets spéciaux via vos pages de destination. Comment créer des formulaires d'inscription pour collecter des données utilisateur. Comment créer des menus collants qui, lorsque les utilisateurs défilent, le Menu principal reste en haut de la page. Les charges se pencheront sur un design réactif. Nous travaillerons pour rendre une page de destination incroyable sur les smartphones, les tablettes et les ordinateurs de bureau. En regardant comment étendre les fonctionnalités élémentaires avec d'incroyables plugins tiers. Ainsi, certaines des fonctionnalités manquantes dans Elementary pourront étendre Elementor en utilisant des plugins tiers. Donc, si vous êtes prêt et enthousiaste à l'idée de commencer à apprendre à concevoir de belles pages de destination avec Elementor. Je suis très enthousiaste à l'idée de vous le montrer sans le temps de Western. Allons-y tout de suite. C'est vrai. 2. Aperçu de la page atterrissage: Alors que nous nous préparons à commencer, je pense qu'il serait crucial pour nous d'examiner rapidement les résultats que nous devrions attendre. J'ai donc déjà ouvert la page de destination ou la conception aujourd'hui. Et voilà, nous avons un joli bar de navigation ici. C'est assez simple. Le logo à gauche et le menu à droite. Et ce menu comporte un bouton, et je vais vous montrer comment ajouter ce bouton à votre barre de navigation au cas où vous voudriez qu'il se démarque. Je vais vous montrer comment faire ça. Ensuite, nous verrons comment créer ces lignes de pinceau ondulées, effets spéciaux il y a eu une page de destination. Ensuite, nous avons la section des héros. C'est assez simple. Deux colonnes. La colonne qui contient l'image du héros et la colonne contenant un bloc de texte et ces logos partenaires ici. Ensuite, nous avons une autre double colonne, un élément image et ce bloc de texte avec un bouton juste ici. Et nous verrons comment le faire. Ensuite, nous avons ici la section des épisodes. s'agit essentiellement de post et je vais vous montrer comment créer les épisodes en tant que post. Et quand quelqu'un clique, écoutez, il sera maintenant redirigé vers la page qui contient cet épisode. Et ils y trouveront un joueur. Et ils peuvent cliquer ici et charger d'autres épisodes. Il sera redirigé vers la page contenant tous les autres épisodes ou plusieurs épisodes. Ensuite, nous avons une autre section à double colonne avec une zone d'image et un bloc de texte à droite. Ensuite, nous avons ici cette section qui comporte un formulaire de capture de données. Certains des principaux éléments dont vous avez besoin pour ajouter votre page de destination pour la rendre plus efficace incluent des éléments tels que les formulaires. Les formulaires sont importants car ils vous aident à capturer données des clients ou des données utilisateur et leurs données qui sont importantes pour vous, car ils vous aident à comprendre les performances de votre site Web et vous permettent rester en contact avec le les personnes qui vous ont envoyé leurs e-mails. Et nous avons un pied de page très simple avec un logo, la barre de navigation juste au milieu, un texte de copyright. Ensuite, nous avons ces icônes de médias sociaux. C'est essentiellement ce que nous construisons. chose la plus importante ici à comprendre est savoir comment utiliser ces outils gratuits fournis par Elementor et d'autres plugins liés aux éléments créer une belle page de destination moderne pour votre podcast. Et ces compétences, vous pouvez également concevoir plus de sites Web, plus de pages de destination à d'autres fins, pas seulement des podcasts. Allons-y et commençons à concevoir. Et bien sûr, nous allons commencer par la barre de navigation, cette section ici. Passons donc au tableau de bord et je vous verrai dans la prochaine leçon. 3. Mise à jour rapide - l'assistant de configuration d'élément: Bon retour parmi nous. Maintenant, cette leçon est une brève remarque ou une mise à jour rapide du processus d'installation d' Elementor. Si vous suivez ce cours en mai 2022 et au-delà, vous remarquerez que l'activation d' Elementor dispose désormais d' un assistant de configuration composé de plusieurs étapes que vous devez suivre pour configurer les éléments de base de votre site Web. Alors que je créais ce cours il y a plusieurs mois, Elementor ne disposait pas de cet assistant de configuration. Je veux juste que nous utilisions cet assistant de configuration. Mais tout ce que tu apprends dans ce cours ne change pas. C'est toujours le même processus. Le seul ajout est l'assistant de configuration. Comme vous pouvez le voir en ce moment, j'ai une toute nouvelle installation de WordPress et nous en sommes à la version 6. Et ce que je veux faire, c'est aller dans Plugins, Ajouter un nouveau. Nous pouvons donc ajouter Elementor et suivre ce processus. Je vais maintenant rechercher l'installation d'Elementor. Et maintenant, lorsque je clique sur Activer je suis redirigé vers cet assistant de configuration. Et nous pouvons le faire ensemble. sommes donc là. Je vais juste effectuer un petit zoom arrière afin que nous puissions voir plus de détails. accord, vous remarquerez maintenant que la première chose qu' Elemental veut que nous fassions maintenant est de créer un compte pour tirer le meilleur parti d'Elementor. Voici donc quelques-uns des avantages de la création d'un compte chez Elementor. Mais le fait est que vous n' avez pas besoin d'un compte Elementor pour utiliser Elementor. Je vais donc simplement sauter cette partie. La deuxième étape est d'accepter, de continuer avec le thème sacré qu' Elementor a créé pour nous. Ceci est fait par Elementor, mais nous utilisons le thème Astra, donc nous allons de l'avant et sautons. Astra est un thème plus puissant. La troisième étape consiste à donner un nom à notre site Web. Pendant que vous installiez votre WordPress. Vous avez donné un nom au site Web. C'est le nom qui apparaîtra ici. Mais cela nous donne la possibilité de changer le nom pour n'importe quel autre nom que nous voulons. Mon site Web, puis cliquez sur Suivant. Et si vous avez un logo pour votre site Web et que vous souhaitez l' ajouter dès maintenant à l'avance. Vous pouvez simplement ouvrir la médiathèque et la sélectionner dans la médiathèque ou la télécharger depuis votre ordinateur. Mais nous n'allons pas le faire pour l'instant. Je vais donc simplement continuer cette étape. Et bien sûr, nous pouvons ajouter le logo plus tard et je vais vous montrer comment procéder. Cliquez sur Ignorer. Et maintenant, nous arrivons à la toute dernière étape où nous avons deux options. Nous pouvons commencer à modifier notre page d'accueil à partir d'une toile vierge avec l'éditeur Elementor. Nous pouvons également parcourir des centaines de modèles ou importer nos propres modèles si nous en avons. Mais je vais y aller et sauter. Ça. Sera redirigé vers le canevas où nous pouvons maintenant commencer à créer un site Web. Et on y va. En gros, c'est tout ce que je voulais vous montrer. C'est une nouvelle mise à jour. Elle n'y était pas il y a quelques mois. Maintenant, c'est là. Mais tout le reste dans les leçons à venir reste le même. Le processus reste le même pour créer une landing page. Donc, sans perdre plus de temps, passons à la leçon suivante. Je vais accéder au menu de ce burger et cliquer sur Quitter le tableau de bord. Quittons cette page. Nous sommes maintenant dans le tableau de bord et nous sommes prêts à commencer à créer le site Web. 4. Installer les plugins nécessaires: Bienvenue de retour. Nous voici donc sur le tableau de bord WordPress. Il s'agit maintenant d'une toute nouvelle installation de WordPress que j'ai préparée spécifiquement pour ce cours. Je n'ai donc aucun plugin installé pour le moment. Donc, si je pouvais simplement cliquer sur les plugins, vous remarquerez que nous n'avons pas de plugins installés. La première chose que nous devons faire pour créer la barre de navigation, pour installer quelques-uns des plug-ins, nous utiliserons des plugins pour créer quelques-unes des choses à l'intérieur ici. C'est une bonne chose à propos de WordPress. Il vous permet d'étendre ses fonctionnalités et fonctionnalités en installant des plugins qui peuvent faire bien plus que WordPress. Wordpress lui-même dispose déjà d'outils pour créer toutes ces choses. Mais les plug-ins facilitent beaucoup plus le travail de création de pages de destination car ils fournissent des outils spécifiques faciles à utiliser. La première chose à faire est donc d'installer elementor et tous les autres plug-ins utiliseront lors de la création d'une page. Revenons donc au tableau de bord et à l'intérieur des plugins, je dirai Add New, ou vous pouvez également cliquer sur Plugins, Add New. Je vais donc passer à Ajouter un nouveau. Et dans la barre de recherche, je vais chercher Elementor. Nous l'avons là. Je vais installer Elementor Website Builder par Elementor.com. Et je vais faire défiler vers le bas et rechercher générateur d'en-tête et de pied de page Elementor, puis cliquez sur Installer. Maintenant, il s'agit d'un plugin créé. Étendez donc les fonctionnalités et fonctionnalités d'Elementor. Et vous remarquerez que de nombreux autres plug-ins ici, lorsque vous recherchez Elementor, partagent le nom d'élément ou quelque chose d'Elementor. Cela signifie qu'il s'agit de plugins créés pour étendre les fonctionnalités fournies avec Elementor Website Builder. Avant d'activer ces générateur de pieds de page d'en-tête Elementor et Elementor, nous avons également besoin d'un autre plugin appelé effets d'en-tête collants pour Elementor. Alors installez-le aussi. Ce sont donc les trois plugins que vous utiliserez pour créer notre barre de navigation Elementor. Maintenant qu'ils sont installés, passons à l'intérieur de la liste des plugins d'installation et activez-les tous ensemble. Nous sommes donc ici en cliquant sur les plugins installés. Je vais tous les sélectionner. Et je vais entrer dans ce menu déroulant et sélectionner Activer, puis postuler. Nous avons donc maintenant les trois plugins installés. Nous sommes maintenant prêts à créer notre barre de navigation. Nous allons donc le faire dans la prochaine leçon. 5. Installer le thème Astra WordPress: Et bon retour. Donc, la prochaine chose que nous voulons faire maintenant que nous avons des plugins installés est d'installer un thème. instant, ce que nous devons faire, c'est entrer dans les thèmes de l'apparence. Et comme il s'agit d'une toute nouvelle installation de WordPress, par défaut, le thème 2021 est actif. Ensuite, nous avons les thèmes 2019 en 2020 qui sont facultatifs et vous pouvez activer n'importe lequel d'entre eux. Mais j'aimerais ajouter un thème tiers appelé Astra. Astra est l'un des thèmes gratuits les plus puissants du marché. Et c'est un thème polyvalent que vous pouvez utiliser pour créer n'importe quel type de site Web que vous pouvez imaginer. Imaginons que vous souhaitiez créer un site Web de dentiste, créer un site Web d'école, créer un site Web pour un avocat. Astro vous aidera à le faire car il est doté fonctionnalités et d'outils qui vous aideront à créer des sites Web sans faille. Alors, saisissons Astra dans la barre de recherche juste ici. Et c'est un premier résultat qui arrive ici. Disons donc d'installer. Très bien, maintenant, activons-le. Et maintenant, vous pouvez voir que c'est le thème actif en ce moment. Maintenant que nous avons installé le thème et que nos plugins sont prêts, avons un aperçu rapide de l'espace de travail, de l'espace de travail Elementor, pendant que vous allez regarder lorsque vous concevez votre site Web. Et nous le ferons dans la prochaine leçon. 6. Aperçu de l'espace de travail elementor: Bienvenue de retour. Continuons. Nous avons donc déjà notre thème et quelques-uns des plug-ins seront déjà installés. Voyons donc un aperçu rapide de l'espace de travail lors de la création de la barre de navigation. Donc, à l'intérieur de l'apparence, je vais passer au générateur d'en-tête et de pied de page Elementor. Et bien sûr, car il s'agit d'une toute nouvelle installation du générateur d'en-tête et de pied de page. Nous n'avons pas d'en-têtes ou de pieds de page listés ici, mais une fois que nous commencerons à créer les nôtres, ils seront répertoriés ici. Disons donc Add New. Donnons-lui un nom, barre de navigation. Et vous remarquerez que nous avons toutes ces options ici. Donc, sur le côté droit, nous avons ce paramètre de modèle sous les attributs posts. Changez-le donc en Elementor pleine largeur. Et puis un réglage astro. Ce sont les paramètres fournis avec le thème. Nous voulons définir la barre latérale pour qu'elle connaisse la barre latérale, car nous ne voulons pas de barre latérale, pas de barres latérales. Et nous voulons que la mise en page du contenu soit étirée sur toute la largeur. Nous voulons ensuite désactiver quelques-unes de ces sections. Nous ne voulons pas que l'en-tête principal par défaut fourni avec Astra. Nous ne voulons pas non plus qu'un en-tête mobile fourni avec Astra. Nous ne voulons pas non plus le titre ni le pied de page. Nous allons donc publier ça pour l'instant. Très bien, maintenant vous remarquerez que nous avons ce type, type d'option de modèle ici, et qu'il a un menu déroulant. Sélectionnez donc en-tête dans le menu déroulant, ce qui affichera d'autres options. Affichez sur tout le site Web si vous souhaitez qu'il soit affiché sur des parties particulières du site Web ou sur l'ensemble du site Web, ou même sur une seule page, nous avons toutes les options offertes avec ce plugin. L'un d'eux est donc visible sur l'ensemble du site Web et sur les rôles des utilisateurs. Donc, qui peut l'utiliser, qui peut avoir accès à la barre de navigation et qui peut la modifier juste au cas où d'autres personnes travaillent sur votre site Web et que vous êtes l'administrateur principal de Wordpress. Vous pouvez autoriser, vous pouvez définir qui peut modifier cet en-tête et ce pied de page. Par conséquent, sélectionnez tout. Et rendons-le disponible pour le modèle Canvas. Et Canvas est l'une des options sous les attributs de publication. N'oubliez pas que nous avons dit ces deux Elementor pleine largeur. Nous avons également des toiles élémentor. Et à mesure que vous vous habituez à utiliser l'élémentaire, vous comprendrez ce que sont les modèles. Mais pour l'instant, sachez simplement que si nous voulons obtenir ces résultats sur notre page, nous devons travailler avec Elementor en pleine largeur, et c'est à peu près le modèle que j'utilise pour presque toutes les pages Web que j'ai créées. Maintenant, avec ces options, continuons et cliquez sur Mettre à jour. Et maintenant, nous sommes prêts à éditer avec Elementor. Ce que nous faisions en ce moment, c'était de créer si je pouvais simplement revenir à Apparence, Elementor, header and footer Builder. Ce que nous venons de créer, c'est que la barre de navigation ici créera également un dossier, mais nous le ferons plus tard. En ce moment, nous avons le Napa. Et si nous cliquons sur Modifier, nous retournerons ici là où nous pouvons configurer tous les paramètres. Mais pour le construire visuellement, pour ressembler à ceci, dans le front-end, il faudra maintenant aller et éditer avec Elementor sera redirigé vers le front end d'où nous pourrons maintenant commencer à assembler le tout. Et maintenant, cela nous offre une excellente occasion d'avoir une vue d'ensemble de l'espace de travail Elementor. Nous voici donc sur l'espace de travail Elementor. C'est ici que nous ferons tous nos montages en front end. En gros, ce que nous allons faire est de faire glisser n'importe quel élément dont nous avons besoin de ces panneaux ici. Laissez-moi simplement effondrer ceci, cela et cela, et tous les autres. Toutes ces peintures contiennent donc des éléments et ces éléments peuvent être glissés et déposés ici en fonction de ce que vous souhaitez ajouter. Par exemple, si nous voulons ajouter, par exemple, que nous choisissons cette triple colonne, vous voyez qu' elle a été générée. Donc, si nous voulions ajouter quelque chose à l'intérieur, nous cliquerions sur ce Plus. Et ces éléments apparaîtront ici et nous pouvons faire glisser tout ce que nous voulons à l'intérieur. Si nous voulons ajouter quelque chose ici, cliquons sur le Plus et faites-y glisser une image. Et même si l'image est toujours sélectionnée, nous pouvons modifier des éléments ici. Nous pouvons ajouter cette image. Insérez un support. Nous pouvons faire glisser et redimensionner les colonnes. Fondamentalement, dans Elementor, nous travaillons avec des colonnes. La zone bleue qui comporte trois colonnes s'appelle une section. Et la section est une triple colonne. Et il existe différents types de sections ici. Et vous pouvez également créer le vôtre. Par exemple, si nous créons une seule section de colonne qui comporte une seule colonne ici, nous pouvons dupliquer cette colonne comme cela. Au cas où vous survolez des éléments, menu contextuel ne s'affiche pas comme celui-ci. Accédez à ces préférences et entrez dans les préférences de l' utilisateur et assurez-vous que les poignées de modification sont définies sur Oui. Laissez-moi y retourner. Donc, en gros, vous faites simplement glisser des éléments dans des colonnes. Et ensuite, lorsque l'élément que vous venez de faire glisser est actif, vous pouvez y apporter des modifications car vous remarquerez que lorsque cette option est sélectionnée, elle indique Modifier le diviseur car il s'agit d'un élément de diviseur lorsque vous cliquez sur le texte ici, remarquez qu'il change en Modifier le titre. Si nous cliquons sur l'image, elle changera pour modifier l'image pour nous indiquer qu' il s'agit de l'élément actuel que nous modifions actuellement. Nous pouvons donc apporter tous les types de changements que nous voulons. Configurez cette image pour qu'elle soit plus grande, opaque, ajoutez-y des ombres portées et tout cela et nous verrons comment faire tout cela. Je voulais juste vous donner un aperçu rapide de ce que vous devriez attendre de votre espace de travail élémentaire. Donc, vous vous y habituez au fur et à mesure. N'oubliez pas que si vous ouvrez ces autres volets ici ou ces panneaux, vous remarquerez que nous avons le panneau Pro qui contient des éléments auxquels vous n'avez accès que si vous êtes membre d'Elementor Pro. Si vous possédez Elementor Pro, nous utilisons actuellement la version gratuite d'Elementor. Mais n'oubliez pas que nous avons également installé des plugins d'outils pour Elementor. C'était le générateur d'en-tête et de pied de page Elementor. Et les effets d'en-tête collants, c'est quelque part ici. Mais en gros, chaque fois que nous installons un plugin créé pour étendre Elementor, vous le trouverez ici et il est livré avec ses propres éléments pour étendre la puissance d'Elementor. C'est donc quelque chose dont vous devez vous souvenir. Je ne veux donc pas vous ennuyer à mort. Jetons un coup d'œil et commençons à construire ce site Web dès maintenant. Laissez-moi juste me débarrasser de tout maintenant. Mettons à jour cette page. Et j'ai oublié de vous dire ce que nous avons ici. est donc là que nous allons mettre à jour nos progrès. Si nous voulons prévisualiser les modifications, c'est ici que nous allons cliquer et je vous montrerai quand nous le ferons. Ensuite, c'est ici que nous cliquons lorsque nous sommes prêts à rendre la page réactive, lorsque nous voulons la concevoir pour qu'elle soit réactive sur mobile et tablette. La prochaine chose ici, c'est l'histoire. Si nous cliquons dessus, vous verrez une liste de tous les mouvements que nous avons effectués depuis que nous avons commencé à modifier la page. Et si, par exemple, nous cliquons sur ce point dans le temps. Comme vous pouvez le voir, cette icône ressemble à une horloge qui se déplace dans le sens inverse des aiguilles d'une montre. Cela montre que c'est comme un rembobinage et un retour dans le temps. Donc, si nous cliquons dessus, cela nous ramènera à l'état dans lequel se trouvait la page pendant ce moment. Donc, si nous revenons à la section ajoutée, c'était une fois que nous avons ajouté une section. donc ça l'histoire. Ensuite, nous avons le navigateur juste au cas où vous auriez tellement de choses ici même dans votre page que vous ne savez même pas où vous êtes lorsque vous modifiez des choses. Vous pouvez cliquer sur ce navigateur et vous pourrez désormais voir une ventilation de tout ce que vous avez sur votre page sous forme de plan. Et ici, nous avons d'autres changements, plus de paramètres que nous aurons à apprendre au fur et à mesure que nous progressons. Et juste ici en haut, juste au cas où vous voudriez en ajouter un, un élément d'ici et peut-être que vous êtes à l'intérieur. Par exemple, permettez-moi d'ajouter quelque chose ici rapidement. Il y a le titre. Et maintenant, comme c'est ce qui est actif, modifiez le titre de la page, si nous voulons ajouter quelque chose ici, nous n'avons pas forcément à cliquer sur ce bouton, et nous pouvons simplement cliquer directement sur cette icône ici. Et je révèle les peintures, toutes les douleurs. Par exemple, si vous ne l'êtes pas, vous pouvez voir les peintures et ajouter quelque chose. Cliquez dessus et cela révélera les problèmes et vous pourrez sélectionner l'élément que vous souhaitez faire glisser. Très bien, donc c'est suffisant pour l'espace de travail pour l'instant. Le reste apprendra à savoir au fur et à mesure que nous progressons avec notre Western, passons tout de suite et commençons à concevoir visuellement l'en-tête. Au cours de la prochaine leçon. 7. Ajouter le logo de l'entreprise: Bienvenue dans cette leçon. Maintenant que nous avons eu une vue d'ensemble de l'espace de travail élémentaire, il est temps de commencer à ajouter ces éléments. La première chose que nous voulons faire est d'ajouter le logo de l'entreprise. Pour revenir à l'intérieur de la barre de navigation, il faut sélectionner une double colonne. Et cette section à double colonne est divisée comme ça. Bien sûr, nous pourrons le redimensionner au fur et à mesure que nous progressons pour lui donner la bonne taille. Et je vous suggère de faire la même chose maintenant, ce qui va ajouter de ce côté, c'est cette barre de navigation, menu de navigation. Et sur le côté gauche, le logo sera ajouté. Et le logo est un élément d'image. Cliquez donc sur ce signe plus juste là. Et sous le panneau de base, permettez-moi de réduire cela sous le panneau de base, qui contient les éléments de base de tout site Web. Choisissons l'élément d'image et déposons-le là-dedans. Sans cliquer ailleurs. L'élément actif à modifier est désormais l'image. Pour confirmer, il suffit de cliquer dessus, et cela apparaîtra ici. Alors choisissons un clic d'image à l'intérieur. Nous n'avons pas d'éléments pour le moment, alors permettez-moi de télécharger un fichier. Et j'ai déjà préparé ce dossier pour vous. C'est ce qu'on appelle la classe de page de destination des Podcasts, et je vais fournir dans la description ci-dessous, assurez-vous de le télécharger. Il contient tous les éléments que nous avons utilisés sur le site Web. Ainsi, dans ce dossier, nous avons des ressources de projet et toutes les images, y compris les logos. Je vais donc double-cliquer dessus et importer les logos ou le RI. Vous remarquerez donc que nous avons deux grands logos et deux petits logos. Nous utiliserons les petits logos pour l'image de marque du site Web. Et j'ai ajouté ces deux-là juste au cas où vous auriez besoin ajouter le logo ailleurs et de faire preuve de créativité. Je vais donc y aller avec celui qui a le casting en blanc. Je vais donc le sélectionner. Insérez ensuite un support. Et vous remarquerez que la partie blanche n'est pas visible car l'arrière-plan lui-même est blanc. Donc, ce que nous voulons faire, c'est changer l'arrière-plan en bleu. Allons donc à l'intérieur. Et nous allons sélectionner cette section entière, la section bleue qui comporte les deux colonnes. Et juste pour vous assurer que vous modifiez cela, il faut indiquer la section Modifier ici. Et donc, en entrant dans le style, passons à l'intérieur du style. Sous Arrière-plan. Cliquez sur la première icône de pinceau juste ici, puis cliquez ici juste à côté de la couleur. Et donnons-lui ce bleu. Et au lieu de deviner ces codes de couleur, j'avais déjà créé cette couleur bleue et je l'ai dit assez. Dans ce fichier, les ressources du projet. Je vais fournir ce guide de projet README dans le dossier de classe de la page de destination de podcast dont je viens de parler. Laissez-moi ouvrir ça. Et comme vous pouvez le voir, nous avons des couleurs différentes ici, le bleu, le vert clair et le gris foncé. Mais bien sûr, vous pouvez utiliser vos propres couleurs. Je vais donc copier ce joli bleu. Copiez ça. Permettez-moi de réduire cela, de fermer ce dossier. Et ici, fond, couleur normale. Je vais le coller là-dedans. Et maintenant, nous avons ce fond et le logo est visible. Mettons-le à jour. Et prévisualisons les modifications. Nous l'avons donc. Notre logo est prêt à paraître bien. La prochaine chose que nous voulons faire est d'ajouter le menu de navigation. Allons-y et faisons-le dans la prochaine leçon. 8. Ajouter le menu nav: Bienvenue de retour. Continuons maintenant pour ajouter le menu de navigation ici. Et comme vous pouvez le voir, nous avons quatre éléments de menu, page d' accueil Accueil À propos de nous contacter. Et il s'agit essentiellement de pages Web. Lorsque vous cliquez sur n'importe quel élément ici, il devrait vous guider vers la page. Par exemple, À propos de nous vous mènera vers une page À propos de nous. La première chose à faire est donc essentiellement de créer ces quatre pages. Pour revenir à l'intérieur de l'espace de travail élémentaire, cliquons sur ce signe plus près de ce signe plus ici. Et ici, tapez Nav, Nav. Et rappelez-vous que l'un des plugins que nous avons installés était le générateur de pieds de page d'en-tête pour Elementor. Ainsi, l'un des éléments du menu de navigation ici sera le menu de navigation avec ce HF dans le coin. C'est donc celui dont nous avons besoin. Glissons-le et déposons-le là-dedans. Et une fois que nous avons fait cela, le menu n'apparaît pas encore. Alors pourquoi faut-il apparaître ? Parce qu'il n'y a pas de menus sur votre site Web et cela indique clairement qu'il n'y a pas de menus sur notre site Web. Nous devons donc créer un menu WordPress, que nous utiliserons cet élément, cet élément de menu de navigation pour afficher. Nous allons l'afficher ici. façon dont nous faisons cela est, tout d' abord, permettez-moi de le mettre à jour. Mettons-le à jour. Je vais donc sauter dans le tableau de bord sans fermer cet espace de travail maintenant. Donc ici, nous devons entrer dans les menus d'apparence. Il sera donc redirigé vers cette page. Et c'est ici que nous pouvons créer des menus pour notre site Web, nous sommes des menus de presse et vous remarquerez que sous les menus, vous pouvez créer votre premier menu ci-dessous. Et puis on peut donner un nom au menu. Donc, peut-être quelque chose comme un nouveau menu. Et nous allons en faire notre menu principal. Créons-le donc. Maintenant, le menu a été créé, mais nous n'avons pas d'éléments. Voir à droite ici, il est écrit Ajouter des éléments de menu dans la colonne de gauche. Et la colonne de gauche à droite a ajouté nombreux éléments et l'un des éléments de menu ici peut être une page Web, peut être des pages Web, et nous pouvons ajouter des pages Web, ce qui va faire maintenant. Mais, mais les éléments de menu peuvent également être des publications. Par exemple, vous pouvez avoir des articles de blog, un article de blog et un autre article de blog, puis un autre article de blog. C'est également possible. Vous pouvez également créer vos propres liens personnalisés. Vous pouvez donc créer un lien ici, hé, HTTP, WW point quelque chose, puis le texte du lien, peut-être voulez-vous dire calculatrice, puis ajouter cet élément de calculatrice ici de sorte que lorsque quelqu'un clique dessus, il soit redirigé vers cette URL. Vous pouvez également avoir des catégories comme éléments de menu. Ce que nous voulons faire, c'est créer les quatre pages Web vers lesquelles le menu de navigation mène. Allons donc à l'intérieur des pages. Et évidemment, je n'ai aucune page car il s'agit d'une nouvelle installation de WordPress. Je vais donc dire « Ajouter un nouveau ». Et je vais y aller et je fermerai ça. Et nous avons cet espace de travail ici. Il s'agit de l'éditeur backend fourni avec WordPress et s'appelle Gutenberg. Et c'est l'équivalent d'Elementor, ce que nous avons ici, nous avons un éditeur que nous pouvons utiliser dans l'éditeur par défaut WordPress frontal s' appelle Gutenberg et il fonctionne dans le back-end ici. Mais ce que nous voulons faire, c'est simplement donner un nom à cette page et la modifier avec Elementor. Donnons un nom à ce nom. Et puis sur le côté droit ici, avant de cliquer sur Publish, passons au modèle et définissons Elementor pleine largeur. Et juste ici en dessous des attributs de page, des paramètres Astra, disons pas de barre latérale et de mise en page de contenu, étiré sur toute la largeur. Ensuite, allons de l'avant et désactivons ces trois comme d'habitude, désactivons également le pied de page. Publiez ensuite. Maintenant qu'il est publié, revenons au moins aux pages. Et maintenant, il est listé ici. Je veux créer trois autres pages pour que nous ayons quatre pages. Je vais donc accélérer cette partie et créer d'autres pages. Ensuite, nous continuerons à partir de là. Très bien, donc maintenant, nous sommes de retour. Nous avons créé quatre pages. J'espère que vous avez fait de même. Vous pouvez créer autant de pages que vous le souhaitez, tant qu'elles peuvent être alimentées ici. Maintenant que nos pages sont prêtes, nous pouvons les utiliser comme éléments de menu. Passons donc à l'intérieur des menus d'apparence. Et maintenant, vous remarquerez que sous les pages, nous avons les quatre pages que nous venons de créer. Et cette partie du nouveau menu que nous avons créé nous indique que nous pouvons ajouter des éléments à partir de la colonne de gauche. Alors, nous allons tous les vérifier. Ensuite, ajoutez un menu. Regardez ce qui se passe ou roulez. Ils ont donc tous été apportés ici et nous pouvons les utiliser comme éléments de menu, la même manière qu'ils sont empilés de haut en bas. Il sera affiché de gauche à droite dans le même ordre. Donc, générer un devis sera le premier élément ici. Je vais donc faire glisser la maison ici pour être le premier objet qui l'apportera ici. Faites glisser vers la maison pour être le premier élément à gauche, puis le blog, puis la boutique. Et puis je dirai le menu Enregistrer. Aujourd'hui, notre menu WordPress est prêt à être affiché avec le pied de page de l'en-tête. Construisez un plug-in que nous avons placé dans le frontal à l'aide d'Elementor. allant au recto de cette page dans l'espace de travail élémentaire et après avoir enregistré nos modifications, j'appuierai sur Contrôle R pour actualiser la page. Et maintenant, vous remarquerez que le menu s'affiche maintenant. Je vais donc le sélectionner. Cliquez n'importe où dans la ligne bleue, à l'intérieur de la bordure bleue. Et vous remarquerez que le message qui était ici a changé car nous avons maintenant une fin de menu. C'est le menu que nous avons créé, le nouveau menu. nouveau menu et les éléments que nous avons créés ces pages Web que nous avons ajoutés en tant qu' éléments de menu au nouveau menu sont maintenant affichés ici en première ligne. Nous allons maintenant vouloir que ce menu soit du bon côté. Alors qu'il est toujours sélectionné sous le menu Contenu, vous remarquerez que nous avons le dernier menu. Tout d'abord, mettons ça comme un bouton. Générer un devis se transforme en un bouton comme celui-ci. Ensuite, ouvrons Layout. Sous alignement. Allons à droite. Et nous voulons que le menu soit de couleur blanche. Donc, tout d'abord réduit cette disposition et entrez dans le style. Ensuite, sous le menu principal, nous avons de nombreuses options et si je réduit le menu principal, nous avons quatre peintures. Laissez-moi d'abord ouvrir le menu principal. Nous pouvons donc aller ici, là où il est dit pornographie. Je clique sur Topographie et passons à Montserrat. Permettez-moi de faire défiler juste là. J'ai donc cliqué sur la typographie, la famille. Et puis, dans la boîte ici, tapez des mois. Ainsi, une police qui a l'air géniale, mais vous pouvez choisir n'importe quelle police que vous aimez. Cliquez n'importe où en dehors de cette zone. Ensuite, effectuez la couleur du texte. Cliquons sur cette couleur juste là, et passons à blanc. Et vous remarquerez qu'il change trop largement en temps réel. Mettons-le à jour. Nous voulons maintenant travailler avec cette nuance de vert qui rime avec le logo. Laissez-moi traîner ça un peu. Je vais donc sauter là où nous avions nos couleurs et choisir ce vert clair. Copiez ça, puis revenez d'où nous travaillons. Et sous la topographie, nous avons changé la couleur du texte en blanc ou en état normal. Mais en vol stationnaire, il a actuellement cette nuance de vert, mais nous voulons la nuance de vert. Donc, en survol, vous voudrez cliquer dessus et coller ce beau vert juste là. Non, laissez-moi choisir ça. Copiez-le et collez-le là-dedans. Collez-le là-dedans. Et quand on le survole maintenant qu'il a cette nuance de vert, changeons ces boutons de teinte de vert. Donc, en cliquant n'importe où en dehors de cette boîte pour m'en débarrasser, je vais réduire le menu principal et j'ouvrirai le bouton. Et sous Type d'arrière-plan, je clique sur cette icône de pinceau. Il va révéler ce vert actuel. Je vais cliquer dessus. Ensuite, je vais m'en débarrasser et coller le vert à partir duquel nous avons copié, à partir du document texte. Et maintenant, il a cette nuance de vert, mais maintenant, ce texte est en train de disparaître, donc nous voulions rester blancs. En cliquant à l'extérieur pour voir la couleur du texte en survol, nous voulons que la couleur du texte reste blanche. Donc, en survol, il reste blanc ou on peut le changer en bleu. Tout d'abord, mettons à jour cela. Et prévisualisons les modifications. Ou RI. Notre barre de navigation prend donc forme. J'aime bien ce que je vois, mais bien sûr, nous devrons faire plus de travail pour équilibrer ces marges ici. Mais nous allons le faire, ne vous inquiétez pas. Donc, ici, ce que nous devons faire, c'est en survol, que le texte change de couleur. Alors que l'ensemble de l'élément est toujours sélectionné en cliquant n'importe où dans la bordure bleue, je vais passer à ce document texte et copier le joli bleu. Copiez ça. Et puis ici, je veux y aller, alors que nous sommes encore en train de modifier le menu de navigation. Les textes sur le vol stationnaire devraient changer pour Lou. Maintenant, quand on le survole, il devient bleu. Passons donc en revue les changements. Ou RI, génial, j'aime bien ça. Donc, nous l'avons là. La prochaine chose que nous voulons faire est de travailler sur ce coup de pinceau juste ici avant de passer à la section des héros. Et c'est ce que nous allons faire. Eh bien, nous faisons la section héros parce que ce pinceau fait partie de cette section, pas de la barre de navigation. Nous en avons donc fini avec la barre de navigation. Je vous verrai pendant que nous travaillons sur la section des héros dans la prochaine leçon. voit sous peu. 9. Ajouter l'image de héros: Bienvenue à une autre leçon. Nous sommes maintenant prêts à construire une section de héros. Maintenant que notre barre de navigation est prête, il est temps de construire la section héros. Et cette section de héros est divisée en deux colonnes. La colonne qui contient l'image et la colonne contenant le texte du héros et ces icônes ici. La première chose que nous voulons faire est d'ajouter l'image du héros. Allons-y et faisons-le. Ici, je veux fermer cette page car nous n'utilisons plus cet espace de travail. Rappelez-vous, nous construisions le bar de navigation. Maintenant que nous avons fini de modifier la barre de navigation, nous pouvons tout d'abord nous assurer que nous sauvegardons nos modifications. Par conséquent, si vous êtes vert, assurez-vous de cliquer sur Mettre à jour. Et puis oui, quittons le tableau de bord. Nous pouvons donc maintenant créer la page de destination elle-même. Nous voici donc dans le back-end qui va entrer dans les pages car notre page de destination est définitivement une page. Et nous pouvons choisir l'une de ces pages comme page de destination. Et par défaut, je voulais juste être la page d'accueil. Donc, cliquez sur Modifier sous Accueil. Et bien sûr, vous serez pris ici, car nous sommes pressés que vous voulez le modifier ici même dans le back-end à l'aide de Gutenberg. Mais nous voulons cliquer sur Modifier avec Elementor pour pouvoir commencer à le créer visuellement. Très bien, donc nous y voilà. Maintenant. Tout d'abord, une fois que vous ouvrez l'espace que vous remarquerez, c' est que cette barre de navigation n'est plus modifiable. ne s'agit pas de l'espace de travail pour modifier la barre de navigation. Pour ce faire, nous devrions revenir à l'intérieur du tableau de bord sous Apparence Elementor, en-tête et pied de page. Ensuite, sous la barre de navigation, nous cliquerions sur Modifier et/ou modifier avec Elementor. Et nous allions au front end et nous pourrions le modifier. Mais maintenant, je vais fermer ça. Et maintenant, nous modifions la page de destination elle-même, le contenu principal de la page de destination en dehors de l'en-tête et du pied de page. Allons de l'avant et ajoutons, allons-y et ajoutons notre image de héros. Je vais donc cliquer dessus pour ajouter une double colonne. Parce que vous pouvez déjà dire qu'il s'agit d'une double colonne. Je vais faire glisser le bord juste un peu parce que l'image n'est pas aussi grande que le TextContent. Et ici, je vais ajouter un élément image comme ça. Ensuite, je cliquerai là-dedans. Et parce que je n'ai pas cette image ici, nous devrons aller à l'intérieur. Permettez-moi de télécharger ces images depuis notre dossier. Rappelez-vous que j'ai mentionné que vous pouvez l'obtenir, vous pouvez le télécharger à partir de la description ci-dessous. Je vais donc entrer dans l'image du modèle et je vais télécharger celle-ci. Certains médias. Et c'est là que nous l'avons. Ensuite, nous voulons ajouter les textes hébraïques avec ces icônes ici. Nous allons donc le faire dans la prochaine leçon. 10. Ajouter le bloc de texte d'héros: Il est donc temps d'ajouter ce bloc de texte de héros. Une chose que je dois mentionner est qu'il est important que vous ayez un H1 sur votre page de destination ou sur n'importe quelle page d'ailleurs. Au cas où vous ne connaissiez pas les en-têtes HTML. Html comporte six niveaux d'en-têtes. Le plus grand est H1 et le plus petit est H6. H1 est le plus important et c'est ce qui indique aux navigateurs et moteurs de recherche ce qu'est votre page Web en termes simples en une courte phrase. Gardez cela à l'esprit. Vous ne pouvez pas avoir plus d'un H1 sur votre page, mais vous pouvez avoir plusieurs H2, H3, H4, H5 et H6. Et allons-y et sautons à l'intérieur de l'espace de travail. Ensuite, la première chose que nous devons faire est de cliquer sur ce signe plus pour faire apparaître ces éléments, puis de faire glisser l'en-tête du texte juste là. Et vous remarquerez qu'il est dit ajouter vos textes de titre ici et nous pouvons le faire ici. Je pense donc qu'il est dit : Bienvenue dans les podcasts. Des podcasts, non ? Comme ça, et en faire une phrase comme ça. Et maintenant, alors qu'il est toujours sélectionné, passons à l'intérieur du style, couleur du texte et passons à 40, 40, 40. C'est donc un gris foncé, pas noir, c'est un gris foncé. Et disons qu'on clique n'importe où, cliquons n'importe où en dehors de la boîte pour s'en débarrasser. Mettons-le à jour. Et pendant la mise à jour, passons à l'intérieur de la topographie. Et changeons la famille dans deux mois. Prenons ce bouton de taille juste ici et tirez-le pour augmenter la taille. Laissons-le quelque part là pour l'instant. Bien sûr, nous allons le modifier jusqu'à ce que nous obtenions les résultats que nous recherchons. Je voulais juste prendre son bas pour que vous compreniez ce que nous faisons. Cliquez donc à l'extérieur n'importe où. Et la prochaine chose que nous voulons faire est de créer cette description ici. Je vais donc copier ça. Et je vais cliquer sur cette petite icône juste ici pour faire apparaître ces éléments. Ensuite, je vais faire glisser cet éditeur de texte. Et quand cette ligne bleue apparaît sous l'élément h one, je la déposerai là. Maintenant qu'il est toujours actif, je vais sélectionner tous ces textes supprimés et coller ce que nous venons de copier ici. Ensuite, mettez-le à jour. Maintenant, avant d'aller plus loin, je viens de me rappeler que si nous sélectionnons le H1 ici, c'est en fait, nous ne l'avons pas défini comme un H1 sous le contenu, alors que celui-ci est sélectionné sous l'onglet Contenu, ici, HTML devrait Changez-le pour bonjour, un. Et comme vous pouvez le voir dans le menu déroulant, nous avons H un tout le chemin pour haïr cherche alors ces autres éléments. Mais nous voulons qu'il en soit un. Et mettons à jour cela. Très bien, nous allons donc prévisualiser les modifications. C'est donc ce que nous avons actuellement. La première chose que vous remarquerez, c'est que nous devons repousser ces objets vers le bas. Alors, faisons-le. Augmentons la marge en haut. Et nous le faisons en sélectionnant toute la section, toute cette section, ici, cliquez avec le bouton droit de la souris et modifiez la section. Et maintenant, c'est l'élément actif ici. Allons à l'intérieur avancé. Et supprimons ce lien et donnons une marge supérieure de 100. Faisons 80 ans, et mettons à jour ça. Et prévisualisons les modifications. Ou bien, c'est ce que nous avons. La prochaine chose que nous voulons faire est d'ajouter ces coups de pinceau ici. Allons donc à l'intérieur. Laissez-moi fermer cet aperçu et passons à l'intérieur de notre espace de travail. Et je vais cliquer sur la section elle-même. Donc, pour augmenter la marge en haut ici, faisons cela à l'intérieur des colonnes elles-mêmes. Allons à l'intérieur de cette colonne, sélectionnez-le, et maintenant c'est un élément actif, nous sommes en train de modifier. Et passons à l'intérieur avancé, brisons ce lien. Et ensuite, pour la marge supérieure, donnons-lui quelque chose comme 70. Maintenant, c'est 770 pour le modèle également. Allons de l'avant et cliquez sur sa colonne. Et puis passons à l'intérieur avancé. Brisez ce lien. Gardons cette colonne 50. Oui, 50, marge supérieure. Mettons à jour leurs propres droits, alors passons en revue les modifications. génial, donc c'est ce que nous avons en ce moment. 11. Ajouter un effet de coup de pinceau d'héros: La prochaine chose que nous voulons faire est d'ajouter ces coups de pinceau ici. Nous voulons donc ajouter cet effet pinceau. Et nous le faisons là-dessus, en haut de la section. Comme vous pouvez le constater, cette section se croise actuellement avec la barre de navigation supérieure. Et nous pouvons donc ajouter ce coup de pinceau ici. Nous allons donc sélectionner la section elle-même en cliquant sur cette zone ou en cliquant avec le bouton droit de la souris et en modifiant la section. Et puis passons à l'intérieur du diviseur en forme de style. Et puis nous voulons dire que pour le diviseur de forme supérieure, nous voulons une brosse à vagues dans ce menu déroulant, vous pouvez choisir n'importe quelle option de votre choix. Mais dans ce cas, nous voulons aller avec des vagues, brosser, puis nous voulons lui donner une hauteur. Et maintenant, vous ne pouvez plus le voir car par défaut, il n'a aucune couleur. Donc, ce que nous voulons faire, c'est copier ce bleu, cette couleur bleue ici. Je vais donc tabuler, donc cette page ici, vous les avez déjà dans la description ci-dessous. Je vais copier ce beau bleu. Ensuite, je retournerai ici. Et pendant que notre diviseur de forme de tuile sélectionné sexuellement et nous sommes insights ira à l'intérieur de la zone supérieure et changera la couleur en bleu. Maintenant, il prend déjà forme. Essayons de lui donner une hauteur de 60. Et mettons à jour cela. Et prévisualisons les changements ou roulons. Alors j'aime bien comment allons-nous ? Mais maintenant, notez que cette courbe a maintenant réduit la marge ici. Nous devons augmenter la marge sur cette colonne. allons donc sélectionner cette colonne lorsque nous la survolerons. Allons à l'intérieur avancé. Allons l'augmenter à, nous allons utiliser notre œil quelque part là-bas. Pour moi, c'est 110. Mettez à jour cela. Maintenant. Maintenant, vous vous demandez peut-être, attendez encore une minute, ces podcasts, podcasts sur notre page de référence sont un peu plus épais que les bienvenus dans le. Alors, que se passe-t-il juste là ? Il existe maintenant deux méthodes que nous pouvons utiliser pour obtenir ces résultats ici. Donc, si nous revenons à l'intérieur de notre espace de travail, la première méthode que nous pouvons utiliser est de supprimer cela, donc je vais le souligner. Ensuite. Permettez-moi de le souligner, puis de Contrôler X pour le couper. Et maintenant qu'il nous reste avec cela, nous pouvons dupliquer cela. Ensuite, pendant que cette option est sélectionnée, nous pouvons coller ce texte là-dedans. Ensuite, nous pouvons modifier chacun d'entre eux individuellement. Je peux donc venir dire, pour que je puisse le rendre légèrement plus petit, peut-être quelque chose comme 44. Et puis sélectionnez cette typographie de style latéral. Je peux lui donner un poids de 800. Et maintenant, il est plus épais que l'autre. Je peux donner à cela un poids de, bien qu'il soit encore sélectionné sous typographie de style, lui donner un poids de 300. Comme ça, puis mettez à jour les modifications. Nous l'avons donc. Donc, si nous prévisualisons les modifications sur la page elle-même, c'est ce que nous avons. Et ça ressemble à ça. Mais maintenant, il y a un bourbier ici. Bien que nous ayons séparé les deux, nous les avons séparés. Maintenant. Nous avons maintenant deux H 1 et nous ne voulons pas qu'ils aient 20 ans. Lequel se trouve sur cette page de destination, nous n'avons besoin que d'un seul H1. Nous ne pouvons donc pas les avoir tous les deux comme H 1. Si faible, ce que nous pouvons faire, c'est de sélectionner cela et sous contenu, les remplacer par H2. Disons cela et prévisualisons les modifications. Prévisualisons les modifications. Et nous avons quelque chose de proche de ce que nous avons sur la dernière page. Mais bien sûr, comme vous le remarquerez, notre description ici est un peu plus longue que celle de notre référence. Et c'est parce que tout d' abord, nous devons d'abord rendre cette colonne un peu plus étroite. Alors, prenons ça et remontons probablement à ce point. Cela signifie donc que nous devons réduire la taille du podcast jusqu'à ce moment-là. Mettez ensuite à jour cela et prévisualisez les modifications Très bien, génial. C'est donc ici que se déroulera notre section vedette et nous voulons ajouter ces icônes ici. Voyons donc comment le faire dans notre prochaine leçon. 12. Ajouter des icônes des héros: Très bien, il est donc temps de créer ces fonctionnalités dans la section. Pour revenir à notre espace de travail ici, la première chose que nous voulons faire est d'ajouter ces fonctionnalités. Je vais donc aller de l'avant et prendre ça, copier ça. Ensuite, je viendrai ici et cliquez sur cette icône, faites glisser un en-tête. Lorsque la ligne bleue apparaît là, déposez-la là. Et maintenant, parce que c'est l'élément actif ici, je peux coller la vedette sur les textes juste là. Et pour l'instant c'est un peu gros, alors passons tout d'abord sa couleur à 40, 40, 40. Et puis passons à Roboto. C'est un monstre. Ok. Et réduisons sa taille à 18 ans. Poids de police 700. Et mettons à jour cela. Ou bien, la prochaine chose que nous voulons faire est de créer ces icônes ici. Et ces icônes sont conservées à l'intérieur des colonnes. Il s'agit donc d'une intersection et d'une autre intersection avec des colonnes à l'intérieur. La première chose que nous voulons faire est d'entrer ici et de sélectionner une intersection. Il s'agit essentiellement d'une section qui peut être déposée à l'intérieur d'une autre section ou à l'intérieur d'une colonne. Je ne peux donc pas déposer toute cette section dans une autre section, mais je peux porter une intersection et la déposer à l'intérieur d'une colonne ou d'une autre section. Donc, nous qui nous souvenons que nous pouvons dupliquer des colonnes, donc je vais également dupliquer cela. Nous avons donc maintenant trois colonnes. Et comme vous pouvez le constater, il commence déjà à prendre forme. Non, c'est vous qui l'avez deviné ici. Nous ajouterons des éléments d'image. Ce que je veux faire, c'est simplement coiffer l'un des éléments et ensuite nous pouvons simplement les dupliquer et les ajouter dans le reste des colonnes. Donc, pour cette image, allons-y et ouvrons des fichiers. Sélectionnez des fichiers. Et je veux naviguer à l'intérieur des logos du partenaire de podcast, des partenaires de podcast. Et je les sélectionnerai tous parce que nous voulons tous les utiliser. Maintenant que cela est déjà chargé, laissez-moi le sélectionner et insérer un support. C'est le premier. Cliquez donc avec le bouton droit de la souris sur Modifier la colonne, puis passez à l'intérieur du style, puis passez à Bordure. L'ombre de zone suivante se trouve sur l'icône Modifier, alors cliquez dessus. Et dès que vous le faites, vous remarquerez que l'ombre de la boîte apparaît et nous pourrons commencer à le coiffer. Donc, la seule chose que je veux faire pour l'instant, c'est réduire l'opacité de sorte que l'ombre de la boîte soit moins visible comme ça à ce degré, peut-être un 22. Et puis je cliquerai quelque part à l'intérieur, il y a un peu plus flou et ensuite étalé un peu plus. Disons jusqu'à ce moment-là. Je veux aussi réduire, réduisons un peu cette opacité. Et avec cela, cliquons en dehors de cette zone et faisons en sorte que le rayon de la frontière ressemble à 10. Et mettons à jour cela. Cela lui donne un coin arrondi comme ça. Voyons donc ce que nous avons. Prévisualisons les modifications. C'est donc ce que nous avons en ce moment, vous remarquerez que ce logo semble très petit. Voyons ce que nous pouvons faire à ce sujet. Cliquez sur pendant que la colonne est toujours active. Juste pour confirmer, je veux venir ici et briser ce lien. Maintenant, cela dit réinitialise tout le rembourrage autour du logo. Et laissons-le comme ça pour l'instant, j'aime la taille. Ce que nous voulons faire ensuite, c'est sélectionner l'image elle-même, survoler l'image. Ce n'est pas la colonne, puis c'est l'image. Je veux dupliquer cela. Et encore une fois dupliquez-le, déposez-le là-dedans, faites-le glisser et déposez-le là-dedans. Ensuite, je vais sélectionner cette colonne ici, cliquez avec le bouton droit de la souris sur Copier. Et je dirai un clic droit. Style de collage. Et maintenant, ceux-ci héritent de cela maintenant, cette colonne obtient également le style de la première colonne. Et je ferai de même pour ce style de collage par clic droit. Maintenant, les trois colonnes ont le même style, mais remarquez qu'il y a toujours des touches sur les côtés. Nous voulons augmenter la marge. Alors que cette option est toujours sélectionnée, Modifier la colonne a avancé, Allons-y et cassons ce lien. Et ensuite, pour la marge de gauche, donnons-lui cinq. Et pour la bonne marge, cinq autres. Très bien, alors cliquons avec le bouton droit de la souris sur Copier et collons ce nouveau style, collons le style. Faisons la même chose ici. Collez le style et maintenant nous avons assez d'espacement autour d'eux. Mettez à jour cela. Et prévisualisons les changements ou justement. La prochaine chose que nous voulons faire est de cliquer ici, et cela sélectionnera l'image elle-même, pas la colonne. Et pendant que l'image est sélectionnée, choisissons un deuxième itinéraire de bus avec logo. Faisons la même chose ici. Nous allons sélectionner le troisième logo, Google Play. Et maintenant que nous avons ces trois, allons dupliquer cette section comme ça. Et répétons la même chose ici. Podcasts Apple. Nous allons choisir un logo Ford, puis le cinquième logo, puis le tout dernier logo, ou à droite. Mais maintenant, remarquez qu'ils touchent en haut et en bas. Nous devons donc augmenter la marge supérieure sur cette section. Ce que nous devons donc faire, c'est sélectionner l'intersection de section elle-même, aller dans Avancé, supprimer ce lien juste là. Et ensuite, pour la marge supérieure, utilisons notre œil pour positionner en conséquence. Je pense que c'est le bon endroit. Mettons-le à jour. Mais maintenant, je pense que ces ombres sont un peu sombres. Je souhaite donc sélectionner l'une des colonnes ici. Et à l'intérieur du style, j'irai à l'intérieur de la frontière. Ombre de boîte. Cliquez donc sur ce MRN, vous voulez réduire cette opacité quelque part, peut-être 11. Ensuite, je copierai, copierai le style. Cliquez avec le bouton droit de la souris sur le style de collage et répétez cela pour tous. Style de collage, style de collage. Et enfin, collez le style. Mettons cela à jour et prévisualisons les modifications ou la variété. J'aime que les résultats arrivent jusqu'ici. Je pense que vous vivriez mieux que régional. Génial. Vous remarquerez donc que lorsque nous survolons ces icônes ici, il y a des liens qui mènent à un autre site Web lorsque vous cliquez dessus. Nous devons donc créer ces liens. façon dont nous procédons est de sélectionner l'image elle-même et l'une des options et le contenu ici sera un lien. Vous pouvez indiquer une URL personnalisée et entrer n'importe quelle URL vers laquelle vous souhaitez diriger les utilisateurs. Donc, par exemple, si c'est Apple Podcasts, quelque chose comme www dot apple podcasts.com, slash listen. Et si vous souhaitez que le lien s'ouvre dans un nouvel onglet lorsque quelqu'un clique dessus, vous pouvez cliquer sur cette roue dentée et dire ouvrir une nouvelle fenêtre, mettre à jour cela. Et passons en revue les changements ou roulons. Et donc quand quelqu'un clique dessus, sachant que je le survole, c' est un lien et quand quelqu'un clique, il a été dirigé vers une nouvelle page et nos pages restent intactes. Permettez-moi donc de fermer cette page. Continuons donc et répétons la même chose pour le reste des images. Je vais donc cliquer sur cette image là-dedans. Je vais juste ajouter un signe de hachage pour l'instant. Allez-y et ajoutez les liens que vous souhaitez. Pour votre cas, parce que c'est le vôtre, c'est un vrai site Web. Allons de l'avant et disons ouvrir dans une nouvelle fenêtre. Comme ça. N'oubliez pas d'ouvrir dans un nouvel onglet. Et enfin, Spotify ou à droite. Allez-y et prévisualisez les modifications. Et maintenant, quand on survole l'un d'entre eux, c'est un lien. Et lorsque vous cliquez dessus, vous accédez à une toute nouvelle page. Maintenant que nous en avons fini avec la section héros, passons à la section principale de la page de destination qui commence à partir de l'épisode présenté. Ainsi, la liste des épisodes de la galerie d'épisodes, tout en bas à droite avant le pied de page. Alors, allons-y et créons cet épisode vedette dans la prochaine leçon. 13. Ajouter la section d'épisode en vedette: Bienvenue à une autre leçon. Nous voulons donc créer cette section d'épisodes en vedette. Et une chose que j'aime chez Elementor, c'est le fait que vous ayez pu réutiliser des éléments. Vous remarquerez que nous avons une similitude entre ce bloc de texte et ce bloc de texte ici. Ainsi, ici, dans notre espace de travail, nous pouvons créer une double colonne. Et cette double colonne contient ce bloc de textes avec un bouton et cette image. Nous allons donc tout d'abord ajouter des éléments d'image ici. Je cliquerai sur le signe plus et j'y dépose une image. Mais notez que nous n'avons pas de marge juste ici en haut. Donc, avec la section sélectionnée, je vais passer à l'intérieur avancé. Brisez ce lien. Et ensuite, pour le marginal supérieur, donnez-lui peut-être 90. Donnons-lui 100. C'est vrai ? C'est donc la position. Et ensuite, ce que nous pouvons faire, c'est dupliquer ces éléments ici. Je vais donc simplement dupliquer cela et le faire glisser à l'intérieur et le déposer lorsque la ligne bleue apparaît. Je vais répéter pour cette autre rubrique. Déposez-le juste là, puis dupliquez-le et déposez-le juste en dessous du H1. Mais maintenant sur notre page de référence, il ne s'agit pas d'un H1. Nous ne pouvons pas avoir plus d'une page 1. Alors, ajoutons, nous allons changer cela. Nous allons nous assurer que ce n'est pas un. Faisons un HA2 et réduisons sa taille. Et réduisons également le poids de la police, le poids de la police à quelque chose comme 700. Et maintenant, enchaînons, prenons ça. Prenons ça d'abord. Je vais juste copier ça. Inutile de retaper tout ça. Je clique à l'intérieur, puis ici, je collerai ce que nous venons de copier. Copiez ça. Et ensuite, je vais le sélectionner. Et à l'intérieur du contenu, je vais dessiner, je vais coller cette autre formulation juste là. Vous remarquerez donc qu'il a pris trop de place. Tout d'abord, l'image de ce côté est un peu petite, alors redimensionnez-la en conséquence. Ensuite, réduisons la taille de ce H2 jusqu'à quelque part. Vous remarquerez que l'espacement ici est presque touchant. Je vais donc sélectionner la section Modifier. Et puis à l'intérieur de la disposition, sous l'écart Colonnes, je vais aller à, je vais choisir large. Et cela augmentera un peu l'espacement entre les deux colonnes. Nous allons donc mettre à jour cela. Et prévisualisons les modifications. Très bien, j'aime bien ce que nous allons obtenir jusqu'ici. En revenant ici, je vais sélectionner l'image. Et allons-y ici. Et téléchargeons l'image du modèle que nous avons ici. Ces images de podcaster sont géniales, alors insérez des médias. Et là, nous l'avons, mais c'est un peu gros, alors réduisons la taille comme ça. Et puis disons la mise à jour. Prévisualisons les modifications. Très bien, alors allons maintenant ajouter ce bouton. Je vais donc rentrer ici. Et je vais sélectionner les éléments du bouton et le déposer juste en dessous. Et par défaut, il a ce vert que notre barre de navigation avait à un moment donné. Nous devrons donc remplacer ce vert par cet écran. Alors, tapez une traversée, saisissez ça. Je vais prendre ce vert. Copiez cela et revenez ici, sélectionnez le bouton n'importe où dans cette bordure bleue. Et bien qu'il soit encore sélectionné, je vais passer à la couleur de style. Et puis je vais coller ça ici, coller là-dedans et maintenant cliquer n'importe où là-dedans. Maintenant, le vert est la teinte que nous voulons. Mais nous voulons qu'elle ait ces polices bleues et qu'en survol, chacune sera blanche. Nous voulons donc avoir cette couleur bleue à l'état normal et en vol stationnaire voulait être blanche. Alors, faisons-le. Tout d'abord, qu'est-ce que ça dit ? Écoutez cet épisode. Alors, bien qu'il soit encore sélectionné, passons au contenu. Allons à l'icône, à la bibliothèque d'icônes. Faisons quelque chose comme un casque, peut-être quelque chose comme ça. Insérer. Et maintenant, nous avons une icône et nous pouvons choisir de la placer avant ou après le texte et de modifier les textes tout en étant encore sous le contenu. Allons au texte et disons, puis mettons à jour cela. Et bien sûr, nous pouvons spécifier où nous voulons que le bouton redirige les utilisateurs, afin que nous puissions entrer notre URL ici, https, www.dot_com. Et si vous voulez qu'il s'ouvre dans un nouvel onglet, lorsque quelqu'un clique sur le bouton, cliquez sur cette roue COG et, bien sûr, sélectionnez cette nouvelle fenêtre qui s'ouvre. Allez-y, essayez-le et voyez ce qu'il fait. Mais maintenant, encore une fois, remarquez qu'il y a un rembourrage approprié sur les côtés. Allons de l'avant et ajoutons un bon rembourrage à ce bouton. Tout d'abord, modifions cette couleur de police. Laissez-moi taper ici et obtenir ces bleus. Je vais copier ça. Et bien qu'il soit toujours sélectionné sous le bouton Style, je vais passer à la couleur du texte. Aucun état normal ne doit être aussi bleu. Et la maison sur la couleur du texte doit être blanche. Ensuite, mettons à jour cela. Et pendant la mise à jour, je souhaite également que nous ajoutions ce rembourrage. Défilons donc vers le bas et cherchons le rembourrage. Le voilà. Je vais donc casser ce lien et cela déformera complètement le bouton. Mais ce que nous voulons faire, c'est tout d'abord, pour la droite et la gauche, donnons un rembourrage de 50. 50, 50 m pour le haut et le bas. Donnons 20, 20, 20 et 20. Il a donc maintenant un rembourrage approprié et il semble beaucoup plus présentable. Je pense que nous pouvons aussi les fabriquer, détestez utiliser le même bleu que ceux-ci. Allons donc chercher cette copie bleue. Nous allons le sélectionner. Bien qu'il soit encore sélectionné, je vais entrer dans la couleur sexuelle et lui donner ce bleu. Même étui pour cela ou pour le trajet. Je l'aime bien. Nous allons donc prévisualiser les modifications. Et faisons défiler vers le bas et voyons ce que nous avons. Génial. La prochaine chose que nous voulons faire est de créer ces galeries d'épisodes ici, et nous le ferons dans la prochaine leçon. Je vous verrai bientôt. 14. Ajouter le titre de la grille des épisodes podcast: Bienvenue de retour. J'espère que vous avez pris un verre d'eau. Il est maintenant temps de reprendre les affaires. Donc, maintenant, nous créons cette galerie d'épisodes ici. Commençons donc par créer ces rubriques. Ensuite, nous commencerons à créer la galerie elle-même. Donc, si nous pouvions sauter directement à l'intérieur de l'espace de travail, créons une seule section de colonne. Le premier ici. Et maintenant à l'intérieur, nous pouvons déposer cette galerie. Mais avant cela, créons cette rubrique. Je vais juste copier ça. Et puis ici, je vais juste dupliquer ça et le déposer dans la section d'une seule colonne. Ensuite, je vais le sélectionner. Et alors qu'il est toujours sélectionné, je vais coller le texte que je viens de copier d'ici. Ce texte. Très bien, donc la prochaine chose que nous voulons faire est de l'amener au centre. Alignez-le au centre. Et donnons-lui ce fond bleu. Je veux lui donner ce coussin bleu. Alors, prenons le bleu de cette police ici. Eh bien, cette police est sélectionnée. Je clique dessus et je copierai le bleu. Ensuite, j'irai dans cette section, Modifier la section, style du type de collage d'arrière-plan, ce code couleur ici. Et maintenant, il a ce bleu. Maintenant, cette police, cette rubrique est bleue. Passons donc à l'écran. Je vais donc copier ceci, je vais sélectionner ce bouton. Et puis je le ferai, parce qu'il est maintenant surligné sous Style, je vais copier ces verts. Ou si ce document est toujours ouvert, c'est l'écran. Je vais sélectionner cette rubrique. Et bien qu'il soit toujours sélectionné sous la couleur du texte de style, je vais coller ce vert là-dedans. Et maintenant, il a ce vert. Cliquez n'importe où à l'intérieur pour vous en débarrasser. Ensuite, je mettrai à jour les modifications. La prochaine chose que nous voulons faire est d'ajouter cet effet de pinceau ici, comme nous l'avons fait pour la section supérieure. La façon de l'ajouter ici juste au-dessus de cette section, car maintenant, comme vous pouvez le voir, nous avons une ligne droite. Nous ne pouvons pas ajouter que le haut de brush1 est ajouté dans cette section ici, cette section d'épisode en vedette. Allons donc à l'intérieur de la section elle-même, éditons la section, puis sous diviseur en forme de style, en bas, car maintenant nous voulons que la curation ici, en bas. Choisissons un pinceau à vagues, et maintenant la couleur est invisible. Je vais donc copier ça. Joli bleu. Et alors qu'il est toujours sélectionné. Et pendant que nous sommes encore ici, sous diviseur en forme, sous style, couleur, collez ça là-dedans. Et c'est trop gros. Réduisons donc la hauteur à quelque chose de 60. Je le veux à 60 ans. Mettez à jour cela. Et prévisualisons les modifications. Défilement vers le bas. C'est génial, mais maintenant ce type touche le coup de pinceau. Allons donc ajouter un peu de rembourrage sous ce type. Nous allons donc sélectionner l'image de ce type. Et à l'intérieur de Advanced, nous irons rompre ce lien juste là. Et ensuite, pour le rembourrage inférieur, poussons-le vers le bas jusqu'à ce que nous soyons satisfaits de la distance. Pour moi, je pense que c'est un bon endroit. En fait, c'est 100. Vous pouvez donc simplement entrer un 100 pour le rembourrage inférieur. Mettez à jour cela, puis prévisualisez les modifications. Très bien. C'est super génial. Nous ne pouvons pas aller au-delà parce que nous n'avons rien en dessous. Ci-dessous, ici. Ajoutons la galerie maintenant. La façon d'ajouter ces galeries est maintenant simple. Ces articles de galerie ici, nos publications, ce sont des publications WordPress. Vous pouvez créer un article de blog. Vous pouvez créer un épisode est un post. Vous pouvez créer un produit par opposition. Vous pouvez créer différents types de contenu sous forme de publications. Nous allons donc créer quelques publications, créerons peut-être environ six, afin que nous puissions les afficher ici. Pour ce faire, nous allons donc dans le tableau de bord. Allons à l'intérieur des poteaux. Rappelez-vous qu'il s'agit d'une nouvelle installation de WordPress, donc je n'ai aucun post. Je vais donc devoir ajouter ces six messages. 15. Créer les épisodes comme publications WordPress: Allons de l'avant et ajoutons quelques articles. Je vais dire « Ajouter un nouveau ». Et quel est le nom de ce premier ici ? Épisode 6, réseautage pour podcasting. Donc, copiez ça. Ils sont assis juste là. Ensuite, pour le modèle, définissez-le sur la barre latérale pleine largeur Elementor, définissez-le sur aucune barre latérale. S'étire sur toute la largeur, juste là sous la disposition du contenu. Désactivons ensuite ces quatre éléments et publions les. Ou bien, donc c'est là que nous avons ça. Donc, pour afficher cet extrait ici, il faut aussi que les œufs soient quelque part. Le but de ce cours n'est pas de vous montrer comment concevoir les épisodes individuels. Lorsque nous cliquons ici, la page vers laquelle vous serez redirigé doit être bien conçue et c'est l'espace que nous créons. Donc, pour le créer, nous allons bien sûr entrer dans l'édition avec Elementor. Et bien sûr, nous allons maintenant y ajouter quelque chose comme une double colonne. Et de ce côté, nous aurions peut-être une image. Ensuite, nous aurions peut-être un en-tête. Permettez-moi d'ajouter un en-tête. Et l'en-tête serait cet en-tête particulier. Je vais donc coller ça là-dedans. Et peut-être que cet extrait serait le contenu de l'épisode. Brève description de l'épisode. Ajoutons un peu de marge au sommet. Je veux juste vous le montrer rapidement pour que vous puissiez voir la relation entre les deux AD juste là. Supposons donc que cela soit un peu plus présentable, même si c'est à des fins d'illustration . Disons donc que l'épisode, et puis nous l'avons fait, passons à Montserrat. Et nous allons le mettre à jour. Prévisualisons ensuite les modifications. Il s'agit maintenant d'un seul épisode que nous créons, juste pour que lorsque nous cliquons dessus, nous puissions accéder à une page un peu plus présentable. Nous ne sommes pas redirigés vers une page blanche. Mais c'est à quoi ressemblerait peut-être un épisode quand quelqu'un s'ouvre à la visionnage pour l'écouter. Changeons donc cette image. Allons ici et téléchargeons une image chaque semaine. Peut-être cette dame juste là. Elle ressemble à un podcaster. Insérons des supports. Et mettons à jour cela. Prévisualisez ensuite les modifications. Alors peut-être que je pourrais même emprunter ce que notre bouton ici juste cliquez avec le bouton droit de la souris copier parce que nous éditons le même site Web, nous sommes en mesure de copier des éléments d'une page à une autre pour qu'il puisse entrer, coller ce bouton ici. Juste comme ça. Ensuite, mettons à jour cela. Je n'aime pas non plus l'espacement ici, alors permettez-moi de sélectionner la section elle-même. Et sous Disposition, écart des colonnes, permettez-moi de l'élargir. Disons alors de mettre à jour cela. Très bien, puis prévisualisons les modifications. C'est donc un exemple de ce que pourrait ressembler un épisode de podcast. Donc, ce que nous voulons faire, c'est retourner à l'intérieur de notre tableau de bord. Quittons sur le tableau de bord. Et passons à la liste de tous les épisodes que nous avons. Maintenant, vous remarquerez que nous en avons 1 parce que nous venons d'en créer un, mais nous en avons besoin de cinq autres. Passons donc à l'intérieur du tableau de bord et créons les cinq autres. Je vais donc en ajouter un nouveau. Copions ça. Et bien sûr, je le fais manuellement, mais il y a des plugins qui peuvent vous aider. Ils peuvent vous aider à dupliquer des publications, des pages ou des éléments sur WordPress en un seul clic. Laissez-moi juste coller ça là-dedans. C'est l'épisode 5. Sous les modèles, Supposons Elementor pleine largeur, pas de barre latérale, étirement pleine largeur. Ensuite, je désactiverai ces quatre éléments, puis je les publierai. Allons de l'avant et créons le reste. Et je vais avancer rapidement cette section et vous permettre de créer les quatre autres. Alors, parlons après ça. Nous y voilà. Permettez-moi de rafraîchir cette page de réussi à créer les six épisodes. Maintenant que nous avons tous les épisodes dont nous avons besoin, nous avons besoin d'un moyen de les afficher comme convenu, comme cette cupidité. Nous avons donc besoin d'un plugin tiers pour cela. Un plugin qui étend la puissance d'Elementor. 16. Utiliser le plugin EA pour ajouter la grille d'épisode: Rappelez-vous que nous avons vu que nous avons beaucoup de plugins liés aux éléments dans les référentiels de plugins. Donc, à l'intérieur des plugins, ajoutez midi. Je vais chercher des modules complémentaires essentiels. Il devrait s'agir du premier résultat, des add-ons essentiels pour elementor. Très bien, activons ça. Nous y voilà. Il est maintenant dans la liste de tous nos plugins installés. Nous allons donc passer à l'intérieur des paramètres, et passons à l'intérieur des éléments. Par défaut, certains éléments ne sont pas vérifiés dont nous aurons besoin. L'élément dont nous avons besoin en ce moment est la post-cupidité. Parce que nous voulons afficher une grille comme celle-ci. Donc, avec Post Greed, maintenant Chet, faisons défiler vers le bas et sauvegardons les paramètres. Il s'agit de fonctionnalités et d'éléments que vous pouvez ajouter à votre Elementor. Et certains d'entre eux sont très cool. Et la plupart d'entre eux sont gratuits, tandis que d'autres sont premium, vous devez payer pour y accéder. Revenons maintenant à la page où nous modifions la page de destination. Et mettons à jour la page avant de l'actualiser. Contrôlons maintenant R ou Commande R. Actualisez la page afin que nous puissions charger le plug-in que nous venons d'installer. Très bien, donc en venant ici à gauche, nous allons effondrer ce panneau. Et ce panneau. Nous allons réduire tous les panneaux pour voir s'ils ont été chargés. Et maintenant, on y va. Les modules complémentaires essentiels pour Elementor et tous ces sont les éléments que nous avons vus dans le back-end. Maintenant, nous sommes à la recherche de la cupidité post-cupidité. Et c'est ce que nous recherchons avec cette étiquette EA pour les modules complémentaires essentiels. Donc, faites défiler vers le bas ci-dessous. Glissons ce module complémentaire essentiel de la cupidité de pause et déposons-le juste en dessous des textes. Et vous remarquerez que nous avons maintenant quatre épisodes. Nous allons donc le modifier pour ressembler à ceci. La prochaine chose que nous voulons faire, c'est d'ajouter cet effet de pinceau ici. Ce que nous voulons faire, c'est ajouter une autre section pleine largeur comme celle-ci. Et pour cette section pleine largeur, nous allons sélectionner la section. Allez à l'intérieur du diviseur en forme de style, en haut. Parce qu'il s'agit maintenant du haut de cette section, pas du bas. Brosse Waves. Et donnons-lui une hauteur de 16. Mais maintenant, nous devons lui donner ce fond bleu. Nous allons donc sélectionner la section car elle a déjà ce fond bleu à l'intérieur du style. Cliquons là-dedans et copions cela. Cliquez ensuite sur la section. Assurez-vous qu'il indique la section Modifier ici. Séparateur de forme, M pour la couleur du diviseur de forme. Collons-le ici. Génial. Très bien. Nous allons maintenant prévisualiser les modifications pour voir ce que nous avons. Jusqu'à présent. Voici notre première partie. Défilons vers le bas. Maintenant, vendons cette cupidité. Donc, en sélectionnant la cupidité. Décidons tout d'abord d'où nous voulons obtenir nos épisodes. Et nous pouvons obtenir les épisodes par auteur. Nous pouvons obtenir des épisodes par catégories. Nous pouvons obtenir les auteurs par balises, formats, ou nous pouvons décider ce que vous souhaitez exclure de ce que nous affichons ici. Et vous voyez que nous avons de nombreuses options, mais elles dépassent le cadre de cette leçon. Pour en savoir plus sur les catégories ou les balises de fin, cliquez sur Google. Alors que cela est sélectionné et que nous avons ces options ici, disons tout d'abord que nous voulons obtenir, voyons d'où nous venons nos messages. Examinons les catégories d'articles. Par conséquent, sous les catégories de postes, nous n'avons qu'une seule catégorie. Par défaut. Nous ne pouvons pas supprimer ces catégories. Il est livré avec WordPress par défaut de sorte que toute publication ou page qui n'est pas classée tombe automatiquement dans la section Non classé, catégorie Non classé. instant, nous voulons dire que tous les épisodes sont non classés. Je vais donc taper sur catégorisation. Je vais donc sélectionner et classer. Et parce que nous n'avons classé aucun de nos éléments, ils sont automatiquement non classés. Cela signifie donc que nous les affichons tous les six. Vous pouvez ajouter autant de catégories que vous le souhaitez. Vous pouvez donc ajouter d'autres catégories ici. Productivité, appuyez sur Entrée. Et maintenant, nous avons deux catégories. Donc, si j'enregistre tout d'abord cela, puis tapez ici, veuillez entrer trois caractères ou plus. Tellement fier. Affiche déjà la productivité et affiche également des publications de cette catégorie. Donc, là encore, nous voulons dire des messages par page. Nous voulons afficher six messages. Et maintenant, remarquez que nous avons quatre colonnes et deux rangées. Nous voulons deux colonnes et trois rangées. Cela se trouve donc sous le paramètre de mise en page. Nous allons donc réduire la requête et ouvrons les paramètres de mise en page. Sous la colonne. Nous en sélectionnons deux. Et nous allons le mettre à jour. Et prévisualisons les modifications. Et là, nous l'avons. Rafraîchissons donc ce contrôle de page. Est-ce que nous actualisons la page pour refléter les modifications apportées à ces derniers. Super, donc nous y voilà. La prochaine chose que nous voulons faire est de se débarrasser de cette image ici, l'image de l'auteur, nous ne voulons pas voir ça. Ainsi, en sélectionnant n'importe où dans cette grille, nous pouvons aller ici et dire requête réduite, puis développer les paramètres de mise en page, puis faire défiler vers le bas. Et maintenant, nous avons ces cases à cocher ici. Nous pouvons donc dire que nous ne voulons pas montrer que nous ne voulons pas montrer que les œufs sont. Et c'est l'extrait. Nous pouvons donc également dire que nous ne voulons pas afficher le nom de l'auteur ou que nous ne voulons pas afficher l'avatar de l'auteur. C'est cette image. Mettons-le à jour. Désolé les gars, mon Internet est un peu lent. C'est pourquoi ils semblent s'estomper en ce moment. Je vais devoir actualiser la page pour refléter les changements. Très bien, juste comme ça. Nous nous sommes donc débarrassés de l'avatar, cette image de l'auteur. Nous pouvons également décider de la position de ces métadonnées de ces métadonnées. Disons donc, par exemple, l'en-tête d'entrée. Juste comme ça. C'est exactement ce que nous avons ici. Et maintenant, vous remarquerez que nous avons écouté ici, c'est essentiellement ces derniers en savoir plus. Nous allons donc aller de l'avant et le style qui en savoir plus. Nous allons donc mettre à jour cela pour l'instant. Et passons à l'intérieur du style pour coiffer le bouton à l'intérieur de la cupidité. Passons donc à l'intérieur du style, défilons vers le bas et trouvons, le style de bouton Lire la suite. Élargissons cela. Et ce que nous voulons faire, c'est lui donner une couleur d'arrière-plan. Donc, pour l'instant, il n'est réglé sur rien. Nous voulons lui donner ce bleu. Donc, c'est définitivement ces bleus. Je vais donc sélectionner l'une de ces sections avec un fond bleu et saisir ce clic bleu n'importe où à l'intérieur. Et sinon je choisirai n'importe où dans la grille, c'est pour m'assurer que nous allons dans le style Postgres. Et passons au style de bouton Lire la suite. Et encore une fois au type d'arrière-plan. Changeons ce bleu. Maintenant, il a ce bleu. Mais maintenant, nous devons ajouter un peu de rembourrage pour que le texte ne touche pas les bords de l'arrière-plan. Donc, tout d'abord, relâchons ce lien. Alors, pour le bon, essayons 20. Et pour la gauche, essayons 20 ans. Bon, très bien, pour le haut et le bas, donnons 55. Ensuite, pour la marge, l'espace entre le bouton et les autres éléments qui l'entourent, augmentons l'espacement ici. Donc, la marge supérieure. Donnons 20. Et mettons à jour cela. Puisque nous ne désactivons pas l'extrait. Laissez-moi donc revenir à l'intérieur du contenu. Paramètres de disposition à l'intérieur. Nous montrons un extrait. Et maintenant, vous remarquerez que nous n'avons pas d'extrait et que nous pouvons ajouter cette pose intérieure. Allons à l'intérieur de tous les poteaux. Et si nous entrons dans l'un des messages et disons Modifier, par exemple. Pour ajouter l'extrait, nous devrions entrer dans Elementor et créer à partir de là. Mais pour l'instant, nous allons utiliser le back-end. Je vais donc copier ça. Et j'irai ici et je vais coller ça ici. Ensuite, je vais le mettre à jour. Et maintenant, si nous entrons dans cet espace de travail et que nous mettons à jour cela. Avant de l'actualiser, je souhaite actualiser cette page Control R pour refléter les modifications que nous avons apportées ici dans le back-end pour les refléter dans Elementor. Si nous faisons défiler vers le bas, vous remarquerez que nous avons maintenant un extrait, mais il ne montre que quelques mots. Donc, en sélectionnant n'importe où à l'intérieur, à l'intérieur de la grille, nous pouvons venir, réduisons la requête et développons les paramètres de mise en page. Et ici, nous pouvons décider du nombre de mots d'extraits dont nous avons besoin. Alors montrez un extrait puis un extrait de mots, disons 30 mots. Et maintenant, il y a plus de mots. Je vais donc continuer et répéter la même chose pour le reste de l'épisode. Ils ont donc tous des extraits. Nous allons donc mettre à jour cela. Ensuite, pendant la mise à jour, j'irai à la sortie du backend à partir de là. Alors maintenant, c'est le prochain. Ouvrons ça. Permettez-moi d'ouvrir cela dans un nouvel onglet et de coller ça là-dedans. Je vais donc rentrer ici, m' assurer que c'est copié. Et puis ici, épisode 2, je vais coller ça là-dedans et mettre à jour l'épisode trois. Collez cela là et un épisode de données pour coller ça là-dedans et mettre à jour cet épisode 5. Collez cela là-dedans et mettez-le à jour correctement. Laissez-moi maintenant actualiser cette page, notre espace de travail et voir si le changement se reflète ici. Et pendant ce temps, laissez-moi fermer ces onglets supplémentaires. Très bien, alors jetons un coup d'œil à ce que nous avons. C'est donc ce que nous avons. Il commence déjà à prendre la forme de notre page de référence. Allez-y et prévisualisez les modifications à la maison. Donc, ça a déjà l'air bien. Mais bien sûr, nous pouvons faire beaucoup plus. Tout d'abord, vous remarquez qu'il y a des coins arrondis et qu'il a une ombre de boîte qui fait que l'épisode se démarque du fond bleu, les fait vraiment éclater. Allons-y et faisons-le. Donc, pendant que nous sommes sélectionnés, pendant que cette option est sélectionnée, cliquez n'importe où sur le côté. Allons à l'intérieur du style, du style post-grille. Passons au rayon de bordure et donnez-le bien, le lien est toujours actif. Donnons-lui peut-être 10 ans d'avocat et ça prend déjà forme. La prochaine chose que nous voulons faire est de donner au bouton lui-même un coin arrondi. Donc, comme ça. Alors réduisons cette cupidité et passons au style de bouton Read More. Pour le rayon de bordure alors que la liaison est toujours active, donnons-lui cinq. Et maintenant, il a ce coin arrondi. Mettons-le à jour. Allons de l'avant et nous effondrons. Style de bouton Lire la suite. Et revenons au style post grids. Donnons-lui cette ombre de boîte en cliquant sur l'icône Modifier juste là. Et vous remarquerez qu'il est déjà en train de surgir. Mais je veux réduire cette opacité à quelque part. Quelque part là pour que ce n'est pas si évident. C'est juste là, mais ce n'est pas si évident. Allons de l'avant et ouvrons un aperçu. Voyez ce que nous avons. Nous l'avons donc. C'est ce que nous avons jusqu'ici. Maintenant, cet épisode semble être un peu plus grand car c'est le premier, si vous vous en souvenez, il s'agit d'un premier épisode que nous avons créé et que nous l'avons créé avec Elementor. Donc, si nous cliquons sur Lire la suite, c'est prendre tout ce texte d'ici, à partir de l'épisode 6, jusqu'à ici. Si nous y retournons, vous remarquerez qu'il y a tout ce sexe ici alors que ces autres commencent par comment puis-je grandir ? C'est pourquoi il semble un peu plus grand, mais cela ne devrait pas vous inquiéter. La prochaine chose que nous voulons faire est d'ajouter ce bouton ici. Et pour ce faire, rappelez-vous, un Elementor, nous pouvons toujours recycler des choses. Nous allons donc copier ceci, copions cette fin. Eh bien, ce gourmand est toujours sélectionné. Si vous souhaitez coller quoi que ce soit, sélectionnez toujours l'élément sous lequel vous souhaitez coller l'élément que vous souhaitez calmer. Donc, parce que nous voulons coller le bouton sous la note, nous devons sélectionner la grille et la coller juste là. Le bouton va donc passer sous l'élémentaire, cliqué avec le bouton droit et le coller. Cliquons donc sur le bouton juste ici, puis centrons-le. Et passons à l'intérieur avancé pendant que nous sommes encore sélectionnés. Et donnons-lui une marge supérieure. Supprimons ce lien et donnons une marge supérieure ou 50. Dans une marge inférieure de 50 ou à droite. Nous allons donc mettre à jour cela. Prévisualisons les modifications. Et commençons à faire défiler pour voir ce que nous avons jusqu'ici. Nous aurons besoin d'une certaine marge ici. Mais j'aime bien ce que nous avons actuellement. Ça a déjà l'air génial. C'est presque semblable à ce que nous avons ici. Compte tenu de la somme mod, nous pouvons trouver quelque chose de mieux. Ajoutons donc cette marge ici en haut. Nous allons donc sélectionner cette section. Et passons dans l'onglet Avancé. Et relâchons ça. Et puis donnons-lui un rembourrage supérieur de 50. Comme ça. Alors disons « adoption ». Passons en revue les changements. J'aime bien. Ou c'est vrai ? La prochaine chose que nous voulons faire est de créer cette section ici, qui devrait être très facile car nous allons simplement recycler les blocs de texte que nous avons déjà dans le bouton de l'image. Nous allons donc le faire dans la prochaine leçon. 17. Ajouter la section à propos: Bienvenue à une autre leçon avec moi peut Besser. Nous terminons cette section de notes d'épisode. Ensuite, nous voulons créer la section sur Alex. Et cela devrait être assez simple car nous allons dupliquer les éléments que nous avons déjà sur notre page Web. Pour ce faire, je vais tout d'abord créer une double colonne ici. Une section à deux colonnes comme ça. Et vous remarquerez que nous avons une marge en haut et en bas. Donnons-lui cette marge à l'avance. Donc, en sélectionnant la section à double colonne et en passant à l'intérieur avancé, supprimons ce lien. Et donnons-lui une marge supérieure de 100 et une marge inférieure supérieure à 100. Très bien, donc maintenant quel que soit le contenu que nous ajoutons, cette pièce sera en haut et en bas. Ce que nous devons faire ensuite, c'est cliquer sur Plus et sélectionner Image. Je veux laisser tomber cette image d'Alex là-dedans. Insérez ça. Bien sûr, vous auriez de belles images de vous-même aux États-Unis ou, si vous créez la page de destination pour un client, vous lui conseillerez de vous fournir de belles images. Allons de l'avant et dupliquons cette rubrique. Et faisons-le glisser à l'intérieur. Glissons-le et déposons-le à l'intérieur. Et parlons de notre prochain exemplaire qui le sélectionne, collez-le là-dedans. Nous allons également dupliquer cela. Faites glisser, faites-le glisser vers le bas, déposez-le là-dedans. Maintenant, copiez ça. Va à l'intérieur ici. Tandis que cette option est sélectionnée, je vais sélectionner tout cela, supprimer et coller cela là-dedans. Et qu'est-ce que nous avons ensuite ? Un bouton se fait toucher. Nous irons donc à l'intérieur ici. Je vais copier ça. Et je clique avec le bouton droit de la souris à l'intérieur de ces éléments, ces éléments de texte et collerai pour que le bouton passe en dessous. Ensuite, nous allons les modifier tant que cette option est sélectionnée. Entrez, entrez en contact. Ensuite, nous allons changer cette icône en un téléphone et l'insérer. Et disons que nous le voulions avant d'avoir une telle mise à jour. Passons en revue les changements. Défilons vers le bas. Je l'aime bien jusqu'à présent. Augmentons donc la marge sur cette colonne pour que le texte se déplace un peu plus bas que là où il se trouve actuellement. En sélectionnant cette colonne, cliquez avec le bouton droit sur Modifier la colonne, avancé. Brisez ce lien. Et donnons-lui une marge supérieure de 50. Et donnons-lui 150. Disons maintenant 100. Et augmentons la taille d'Alex. Et disons qu'il faut mettre à jour ça. Soyons vraiment des changements. Super génial. J'aime bien ce que nous avons jusqu'ici. Maintenant, la prochaine chose que nous voulons créer est cette zone d'appel à l'action ici. Et c'est un élément très important dans n'importe quelle page de destination. Il y a des éléments que la page de destination doit avoir pour qu'elle soit une page de destination efficace dans l'une d'elles constitue un moyen de collecter les données des clients ou des utilisateurs. Nous avons également besoin de boutons visibles. Et vous remarquerez que nous avons utilisé des boutons très visibles, faciles à voir car une page de destination est destinée à faire passer les gens à l'action. C'est pourquoi nous devons faire appel à des actions. Il s'agit d'un appel à l'action. Écoutez cet épisode. Nous allons donc créer ces formulaires dans la prochaine leçon. voit sous peu. 18. Installer le plugin de formulaire nécessaire: Bienvenue à une autre leçon géniale avec moi peut Besser. Nous sommes donc arrivés à un point où nous avons créé toutes ces sections. Et nous n'avons que deux autres sections à parcourir. Nous avons cette section d'appel à l'action qui comporte un formulaire et nous avons la section pied de page. Alors maintenant, allons maintenant créer ce formulaire. Et pour créer le formulaire sera à l'aide d'un plugin formé par un tiers génial appelé formulator. Passons donc au backend et installons pour le ministre afin que nous puissions créer ces forums. Donc, à l'intérieur du tableau de bord, je vais aller dans Plugins, Add New. Donc ici, je vais taper le formulateur. Et ceux-ci par WPA AMU dev, installez-le. Maintenant. Nous allons être inactivés. Et maintenant, nous avons quatre minutes répertoriées sous plugins installés. Vous le trouverez donc presque en bas de votre menu de gauche, juste ici. Survolez le ministre des Affaires étrangères et entrez dans les formulaires. Maintenant, si vous souhaitez en savoir plus sur la façon de créer des formulaires WordPress pour votre site Web, n'hésitez pas à rechercher comment créer des formulaires dans WordPress sur YouTube. Et vous trouverez de nombreux tutoriels qui vous montrent comment procéder. Mais en ce moment, nous utilisons pour Monitor, qui est mon plugin de formulaire préféré. Nous allons donc créer un formulaire avec le formulateur. Dans la prochaine leçon, je vous verrai bientôt. 19. Créer un formulaire avec Forminator: Je vais donc dire Create. Maintenant, dans notre but, nous voulons inscrire des personnes à notre newsletter afin qu'ils puissent recevoir nos e-mails de temps à autre. Disons donc que nous vous inscrivons à la newsletter et continuons. Donnons-lui un formulaire d'inscription à un nom, et créons-le. L'objectif ici est donc de créer un formulaire avec un formulateur, puis nous l'afficherons au début de cette page à l'aide d'un code court et nous verrons comment procéder. Maintenant que le formulaire a été créé, comme vous pouvez le voir par le nom du formulaire d'inscription. Et nous avons les champs qui viennent par défaut car c'était un modèle que nous avons sélectionné. Il porte le prénom, e-mail et le bouton S'abonner. Et si nous le prévisualisons, c' est à quoi ça ressemble. Prénom, e-mail s'abonner, prénom, e-mail s'abonner. Et si je clique sur FirstName, il se développe et affiche les détails de l'espace réservé que nous venons de voir FirstName et tous ces éléments, mais ceci, mais cette classe ne concerne pas la façon de créer des formulaires. Sachez donc que vous pouvez modifier ce formulaire pour obtenir les détails que vous souhaitez. Vous pouvez modifier ce détenteur de place pour savoir où .com applique cela. Et si nous prévisualisons cela, l'espace réservé pour la saisie de l'e-mail sera Kim sur Nowhere.com. Et nous pouvons modifier ces détails et ajouter d'autres champs. Mais je vais aller de l'avant et publier ce formulaire exactement comme il est. Et lorsque je le publierai, vous remarquerez que nous avons ces fenêtres contextuelles qui présentent cette option Copier. Nous pouvons copier ce code court. Nous allons donc copier ce code court et vous recevrez ce message. Le code court a été copié avec succès. Et si nous entrons dans notre espace de travail, et juste en dessous de cette section À propos, ouvrons. Créons une nouvelle section et il devrait s'agir d'une double colonne. Laissez-moi fermer cette fenêtre. Nous avons donc besoin d'une double colonne. Et à l'intérieur de cette double colonne, nous voulons ajouter un code court à l'intérieur de la colonne de droite. Code court. Faites donc glisser et déposez-le là-dedans et avant de cliquer sur autre chose pendant que cette option est sélectionnée. Nous pouvons maintenant coller ce code court ici. Je parle de ce code court que nous venons de copier depuis le formulateur. Collez-le là-dedans, puis cliquez sur Appliquer. Disons ensuite mettre à jour et prévisualiser les modifications. Défilons donc vers le bas et voyons ce que nous avons actuellement. C'est donc à ça qu'il ressemble en ce moment. Nous devrons y faire un peu de style. Mais avant tout, nous devons avoir ces antécédents. Nous commencerons par ces pinceaux supérieurs ici. Et pour ce faire, nous devons sélectionner cette section qui contient les détails à propos d'ALEKS. Sélectionnez la section elle-même. Et retirons la marge inférieure pour qu'elles soient toutes les deux attachées l'une à l'autre. Et puis à l'intérieur de cette section d'édition, passons à diviseur en forme de style, puis en bas. Sélectionnons le pinceau des vagues, et laissez-moi tabuter et attraper ce vert ici. Copiez ça. Revenons ici. Et bien que nous soyons encore sous Edit section, style, diviseur en forme , bas, passons la couleur à ce vert. Collez-le là. C'est le pinceau stop ici. Il y en a donc deux, séparez-le de cette image ici. Allons de l'avant et ajoutons un peu de rembourrage à cette image. Donc, en sélectionnant l'image elle-même. Avancé. Libérons ce rembourrage, puis rembourrons le bas. Allons le faire jusqu'à ce que nous soyons satisfaits. Je vais lui donner 100. Nous allons vous donner 110. Maintenant, donnez-vous 120. Et puis revenons à l'intérieur du diviseur de forme de style. Laissez-moi choisir maintenant, allons à l'intérieur. Modifier la section, diviseur en forme, bas. Je veux lui donner une hauteur de 60. Année. Comme ça. Recopions l'écran. Sélectionnons cette section, Modifier le style de section, l'arrière-plan et donnons ce vert. Mettez à jour la couleur. Ensuite, créons une autre section ici. Nous pouvons créer une autre section pour créer ces pinceaux inférieurs. Ou nous pouvons simplement les dupliquer. Rappelez-vous cela, nous allons dupliquer ça. Et faisons-le glisser là bas. Alors, bien qu'il soit encore sélectionné, passons au diviseur en forme de style. J'ai toujours sélectionné ce vert, alors je vais le coller ici. Et puis mettez-le à jour. Prévisualisons les modifications. Remplacer. C'est super génial. Maintenant, passons sur le côté et saisissons ce texte. Copiez ça. Allons à l'intérieur ici. Et ici, nous pouvons ajouter ces rubriques. Et je vais coller, coller le texte juste là. Maintenant, saisissez cette description ici, copiez-la. Je vais prendre cet éditeur de texte. Et ici, je vais tout sélectionner, supprimer, puis coller ce que j'ai copié de l'autre côté. Mettez à jour cela. Et maintenant, vous remarquerez que la couleur de la police ici est bleue. Laissez-moi juste prendre ce bleu du côté vendeur. Copiez ça. Et entrons ici. Bien que cette option soit toujours sélectionnée, je vais styler la couleur du texte et la coller là-dedans. Maintenant, allez sélectionner cette couleur de sexe de style, collez ça là-dedans. Et je veux changer cela pour Montserrat. Alors que la topographie est encore sélectionnée, Montserrat. Et puis je veux juste lui donner un poids de police de 800. Augmentons également la taille de ces polices, voulues être plus grandes, plus visibles. Et nous allons aussi les transformer en typographie de Montserrat. Faisons en sorte que la taille 16. Mettez à jour cela. Prévisualisons ensuite les modifications. Faites défiler vers le bas et voyez ce que nous avons là-bas. Super génial. J'aime bien ce que nous avons jusqu'ici. Maintenant, augmentons la marge ici. Rendez-le donc un peu plus présentable. Et nous le faisons en sélectionnant cette section. Allons à l'intérieur à Vaste. Peut augmenter le rembourrage, rembourrage supérieur et voir votre satisfaction. Je pense que c'est une bonne taille. Faisons 45 et mettons à jour ça. Prévisualisons ensuite les modifications. Super génial. Augmentons donc l'espacement entre ces deux colonnes. Parce que, comme vous pouvez le voir ici, il y a un bel espacement entre eux. Je vais donc sélectionner cette section qui contient les deux colonnes et je vais entrer dans la disposition. Espace des colonnes. Disons plus larges. Et puis nous allons juste tirer ce petit peu vers le centre et mettre à jour cela. Prévisualisons ensuite les modifications. J'aime bien ça. présent, c'est génial. Je n'aime pas les bordures autour des champs de saisie. Ils ont l'air mal placés. Je veux qu'il soit plat. Et à plat, je veux dire pas de bordures, juste un fond simple et uni. Revenons donc à l'intérieur de notre ministre des Affaires étrangères et apportons ces changements juste là, car nous n'avons pas créé ces formulaires à l'aide d'Elementor. Nous avons créé l'un ou l'autre dans le back-end ici, dans le formulateur. 20. Styliser le formulaire Forminator: Nous apportons donc les modifications à son apparence en entrant dans l'onglet Apparence des formulaires du formulateur. Cliquons donc à l'intérieur de l'apparence de notre formulaire. Et une fois que vous cliquez sur Apparence, nous avons ici différentes options avec lesquelles nous pouvons jouer et affecter la façon dont le formulaire se boucle. Par exemple, vous remarquerez que si nous cliquons à plat ici, cet écran supprime les bordures. Si nous cliquons sur Gras, il ajoute des bordures très audacieuses, du matériel et aucune. Je veux donc aller à plat, puis mettre à jour ça. Donc, si nous prévisualisons les modifications, vous remarquez maintenant nos champs de saisie n'ont pas de bordures. Et c'est bien. La prochaine chose que nous voulons faire est donc de modifier les couleurs de nos polices. Comme ici, notre police est blanche. Nous voudrions peut-être lui donner une couleur plus foncée comme cette couleur. Donc, ce que nous voulons faire, c'est aller dans les couleurs juste en dessous du style de design. Deuxième section, Couleurs, Personnalisé. Ensuite, nous avons les différents champs de formulaire de saisie. Nous avons tous les champs que vous pourriez avoir sur votre formulaire peuvent être modifiés ici. Ce qui nous intéresse pour l'instant, ce sont les bases du terrain. Et à l'intérieur du champ, il y a des éléments comme l'étiquette, le prénom et les étiquettes d'adresse e-mail. Vous pouvez modifier les couleurs à l'intérieur ici. Nous pouvons donc dire que nous voulons qu'il soit aussi bleu. Copiez ce bleu collé là-dedans. Entrez. Cliquez donc sur Mettre à jour. Et si vous le prévisualisez, les étiquettes sont désormais bleues. Allons de l'avant et voyons ce que nous pouvons changer d'autre. Allons dans notre page Elementor ici, et sélectionnons l'élément de code court qui contient notre formulaire. Et cliquez sur Appliquer ou à droite. Cliquez ensuite sur Aperçu des modifications pour que nous puissions y jeter un coup d'œil. Défilons vers le bas et voyons ce que nous avons jusqu'ici. C'est donc notre enjeu de forme sous une forme différente jusqu'à présent. Et maintenant, vous remarquerez que ce formulaire, notre page de référence, a des coins arrondis et que le bouton lui-même a des coins arrondis. Mais le nôtre n'a pas cela. Ouvrons-le. Le nôtre a des coins très pointus. Alors, comment atteindre ces coins arrondis ? Donc, quatre minutes ou nous fournit un moyen d' ajouter du CSS supplémentaire et d'ajouter du CSS signifie des feuilles de style en cascade. Ainsi, chaque page Web que vous visualisez sur Internet a été coiffée et donnée à cette apparence par CSS. Nous pouvons donc ajouter des CSS supplémentaires en vérifiant cela. Et ils nous ont déjà fourni des sélecteurs de base ici. Maintenant, au cas où vous ne connaissez pas CSS, vous n'avez vraiment pas besoin de comprendre quoi que ce soit ici, car c'est quelque chose que vous pourrez apprendre plus tard. C'est juste pour nous aider à réaliser quelque chose que le plug-in de formulateur ne fournit pas immédiatement. Ils ne le font pas, ils ont de nombreuses options ici à modifier en cliquant sur des éléments, mais nous ne pouvons pas cliquer quelque part et arrondir ces coins. Nous devons utiliser du code. Et c'est l'une des bonnes choses de WordPress. Vous pouvez aller au-delà de ce qu'un branchement vous donne et ajouter votre propre code. Et les plug-ins vous fournissent même un endroit où ajouter votre code et ils se combineront avec leur code et vous fourniront tous les deux, que vous recherchez vraiment. Donc, dans notre cas en ce moment, je souhaite sélectionner nos champs de saisie. Et nous avons ici un sélecteur appelé entrée. Donc, si je clique dessus, il sélectionnera toutes les entrées, tous ces champs de saisie. Et quelle que soit la règle que je lui donne à l'intérieur ces deux crochets bouclés s'appliquera au champ de saisie. Je veux donc lui donner un rayon de bordure un peu arrondi. Donc, rayon de bordure 50 pixels. Donc, si je le prévisualise maintenant, vous remarquerez que nos champs de saisie ont un coin arrondi car nous les avons sélectionnés avec notre entrée sélecteur ici et nous lui avons donné une règle qui est censée s'y appliquer. allons donc mettre à jour cela pour voir ce que nous avons en front end. Mettez à jour cela. Passons ensuite au front end. Faites défiler vers le bas, sélectionnez le formulaire et appliquez ce remplacement. Allez-y et cliquez sur Aperçu des modifications. Et les coins sont maintenant arrondis, mais notre bouton n'est toujours pas arrondi. Maintenant, pour le moment, nous n'avons pas de sélecteur pour le bouton d'envoi à l'intérieur de ce plug-in, il existe un autre moyen de localiser ce sélecteur et c'est en utilisant les outils de développement. Mais je ne veux pas approfondir cela. instant, nous pouvons simplement laisser le bouton comme ça. Nous pouvons laisser le bouton comme ça parce que je ne veux pas commencer à entrer dans les DevTools ici et à parler de la façon de trouver le sélecteur que vous recherchez , car cela dépasse le cadre de cette leçon. Laissons simplement le bouton comme ça. Je l'aime bien jusqu'à présent. Mais je veux le rapprocher un peu plus près juste pour augmenter sa hauteur. Voyons ce qui se passera lorsque nous actualiserons la page. Défilons vers le bas. Oui. Non, revenons à l'original. Augmentons la taille de cette rubrique pour qu'elle soit plus accrocheuse. Et mettons à jour cela. Prévisualisons ensuite les modifications. Ou roulez. Je l'aime bien jusqu'à présent. Nous avons maintenant terminé cette section d'appel à l'action. Vous pouvez collecter des données utilisateur. Vous êtes en mesure d'inscrire des personnes à votre liste de diffusion rester en contact avec eux et de les commercialiser. La prochaine chose que nous voulons faire, lorsque vous finalisez la version de bureau de la page de destination, c'est le pied de page. Nous allons donc créer le pied de page dans la prochaine leçon. Et après cela, nous allons aller de l'avant et rendre l'ensemble du site Web réactif sur mobile, ordinateur de bureau et tablette. Créons donc le pied de page dans la prochaine leçon. voit bientôt. 21. Créer le pied de pied: Nous en avons presque fini avec la version de bureau de cette page de destination. La seule partie restante est que la nourriture est donc allons-y et sautons dans le tableau de bord et créons le pied de page. Je vais entrer dans l'apparence, Elementor, header and footer Builder. Et vous vous souvenez que nous avons créé un bar de navigation. Cette fois-ci, nous créons un dossier. Cliquez donc sur Ajouter un nouveau. Et nous pouvons aller de l'avant et lui donner un nom. Donc, pied de page. Comme d'habitude, les modèles doivent être Elementor pleine largeur, pas de barre latérale pour l'étirement de la largeur pour la mise en page du contenu, désactiver le pied de page désactivé intitulé En-tête mobile, en-tête principal. Et publions ça. La prochaine chose que nous voulons faire est de définir le type de modèle doit être un pied de page, doit être disponible sur l'ensemble du site Web, doit être modifiable par tout le monde. Et allons y aller de l'avant et y arriver. J'aime simplement les activer parce que parfois je voudrais utiliser le Canvas au lieu de l'option étirée pleine largeur. Et mettons à jour cela. Modifions ensuite avec Elementor. Très bien, donc nous y voilà. Nous travaillons sur le pied de page. Et vous remarquerez que nous avons quatre éléments de base. Un logo, qui est un élément d'image, un élément de menu déjà créé. Ensuite, nous avons un élément de paragraphe et ces icônes ici. Allons de l'avant et créons une section à trois colonnes. Nous y voilà. Je vais sélectionner cette triple colonne. Et au milieu ici, nous allons y ajouter une navigation. Rappelez-vous que nous avions une navigation par HF être Header Footer Builder, Nav Menu. Désormais, par défaut, il va vers la gauche. Donc, ce que je voulais faciliter, allez dans Disposition et alignement. Mettez-le, mettez-le au centre. Ici. Ajoutons un élément d'image. Allons de l'avant et saisissons ça. L'un des logos que nous avons créés pour le dossier. Je pense qu'il devrait s'agir de celle-ci, la petite version. Insérez un support. Allons de l'avant et insérons des icônes de médias sociaux ici. Allons déposer ça là-dedans. Et élargissons-le un peu. Donc, à l'intérieur du style, bien que ce soit encore sélectionné, réduisons un peu la taille. Et nous allons les aligner sur la droite. Mettons-le à jour et prévisualisons les modifications. Donc c'est la nourriture qui, c'est comme ça que ça ressemble. Nous devons les pousser vers le bas, comme je l'ai mentionné. Donc, ils sont toujours sélectionnés pour un rembourrage avancé. Top. On va le pousser quelque part là. Ensuite, mettez-le à jour. Maintenant, la prochaine chose que nous voulons faire est de cliquer sur cette icône ici pour pouvoir ajouter un éditeur de texte et y déposer ce texte. Ensuite, sous style, alors que cela est toujours actif, alignez-le sur le centre. Allons de l'avant et copions ce texte de copyright juste là. Copiez ça. Et bien que cette option soit toujours sélectionnée, passons au contenu, sélectionnez-le et supprimez-le, puis collez-les là-dedans. Mise à jour. Entrez dans style de cette topographie, et faisons cette taille 12. Nous allons maintenant sélectionner le menu de navigation. Et passons à l'intérieur du style. Dans la typographie du menu principal. Changeons la typographie Montserrat et mettons à jour cela. Maintenant, en survol, il s'agit du vert qui provient par défaut d'Elementor. Ce n'est pas le vert que nous voulons. Je vais donc simplement appuyer sur ce document et copier ce vert. Et revenez au menu. Sélectionnez-le. Et puis la typographie de style à l'intérieur survole. Je vais changer cette couleur par celle que nous venons de copier. Et maintenant, il y a cette belle mise à jour verte qui prévisualisons le pied de page ou vendredi. Maintenant que le dossier est prêt, je ne pense plus vouloir modifier ces icônes. Je pense qu'ils sont géniaux, mais vous pouvez jouer avec eux en les sélectionnant. Et ici, effectuez toutes les modifications que vous souhaitez sous Modifier les icônes sociales. Ce que je veux faire, c'est quitter le tableau de bord. Parce que toutes mes modifications sont sauvegardées. Ensuite, je vais passer à l'intérieur des pages. N. La page d'accueil était une page de destination, bien sûr. Je veux donc le voir. Changeons donc les onglets sur cette page. Nous voici donc, de haut en bas, faisons défiler vers le bas. Nos 40 ont donc l'air génial, mais nous avons besoin d'une marge entre les deux. Nous pouvons donc ajouter une marge inférieure à cette section de pinceau ou ajouter une marge supérieure au dossier. Donc pour modifier cela, je retournerai dans la liste toutes les pages, et je dirai Modifier avec Elementor, mais je veux cliquer dessus avec le bouton droit de la souris et ouvrir le lien dans un nouvel onglet et passer à cet onglet. Nous pouvons donc apporter les changements à partir de là. Défilons donc tout le chemin vers le bas. Et ce que nous remarquerons, c'est que nous avons besoin d'une marge juste ici en bas. Mais la marge nous a besoin de 0 sur cette brosse inférieure. Nous allons donc sélectionner cette section de modification. Passons à Advanced, puis relâchons cette liaison. Ajoutons la marge inférieure à 50. Disons maintenant 100. Mettez à jour cela. Et prévisualisons les modifications. Défilement jusqu'au bas. Nous avons maintenant une belle marge entre les deux. Super génial. Je viens de me rappeler que nous devions faire quelque chose propos de la barre de navigation pour que lorsque nous défilons, elle ne disparaisse jamais, reste toujours en haut. Allons-y et faisons-le dans la prochaine leçon. Je vous verrai bientôt. 22. Fabriquez la collation navbar: Bienvenue de retour. Il est temps maintenant de rendre l'en-tête collant. Commençons. Sautons donc directement dans le tableau de bord. Allons à l'intérieur apparaît pied de page d'en-tête, constructeur. Et modifions la barre de navigation avec Elementor. Je vais donc cliquer avec le bouton droit de la souris et modifier la barre de navigation avec Elementor et passer à cet onglet. Nous voici donc sur l'espace de travail de la barre de navigation. Et ce que nous voulons faire, c'est laisser la section modifier la section et passer à l'intérieur avancé. Et rappelez-vous l'un des plugins que nous avons installés dans le backend, permettez-moi de passer au backend et d'entrer dans les plugins, les plugins installés. L'un des plugins était des effets d'en-tête collants pour Elementor. Donc, à l'intérieur, alors que cette option est toujours sélectionnée et que la section Modifier est avancée, vous remarquerez que nous avons des effets d'en-tête collants ici. Développez ça. Vous avez cette option pour l'activer, et cela présente d'autres options ici. Donc, ce que nous voulons faire, c'est d'abord changer la distance de Skoll en une seule. C'est la quantité de défilement que vous voulez avant la tête ou devenir collante. Donc, ce que je dois faire ici, c'est de changer la distance de défilement en une. Et alors, voyons ce que nous avons d'autre ici ? En-tête transparent. Non, nous ne voulons pas qu'il devienne transparent. Nous voulons donc conserver la couleur bleue même quand elle est collante. Ce que je veux faire, c'est allumer ça. Et pour la couleur, je veux tabuter ici et choisir cette couleur bleue. Encore une fois, copiez cet onglet ici et collez-le là-dedans. Et mettez-le à jour. Je ne veux pas réduire l'en-tête ou le logo sur le défilement. Je veux juste qu'ils restent de la même taille. Nous allons donc prévisualiser ce que nous avons. Mais bien sûr, nous ne pourrons pas voir l'adhérence car nous prévisualisons la barre de navigation elle-même. Nous aurions donc besoin d'une page qui soit défilable. Voyons donc, voyons cela dans une nouvelle page d'onglets qui est défilable. Nous pouvons donc voir cet effet Tiki. Commençons maintenant à faire défiler et remarquez ce qui se passe avec l'en-tête. Il reste donc collant. Peu importe combien nous le faisons défiler, il sera toujours visible pour l'utilisateur et il pourra naviguer rapidement sur le site Web. C'est donc ça, qui marque la fin de cette section de bureau. La prochaine chose que nous voulons simplifier maintenant rend l'ensemble de la page de destination réactive sur ordinateur de bureau, mobile et tablette. Je vous verrai bientôt. 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. Aperçu des conception réactive: Nous en avons donc presque fini avec notre page maintenant. Nous l'avons déjà conçu pour ordinateur de bureau et il est génial sur ordinateur de bureau. quoi ressemble-t-il sur les tablettes et les appareils mobiles ? Donc pour voir à quoi il ressemble sur d'autres appareils, nous avons deux options. Nous allons utiliser. Il construit dans la visionneuse de périphériques élémentaire, une fonctionnalité de conception réactive. Et je vais vous montrer comment faire ça. Ou nous pouvons également utiliser les DevTools du navigateur. Et je veux vous le montrer rapidement avant que nous ne sautions dans Elementor. Alors que nous sommes toujours sur leur page de destination, je veux cliquer sur Control Shift. Je vais faire apparaître les DevTools. Tous les navigateurs disposent de ces DevTools. Et juste au cas où le vôtre est en bas ici, ne vous inquiétez pas à ce sujet. Vous pouvez toujours modifier l'emplacement de leurs outils en cliquant sur ce menu ici et en choisissant n'importe quelle option ici. Donc, si je choisis ça, ça ira vers le bas. Je vais juste le laisser là pour l'instant. Maintenant, mettons-le du bon côté. Et puis pour voir à quoi ressemblera la page de destination sur différentes tailles d'appareils, nous pouvons passer en mode réactif. Basculer la barre d'outils de l'appareil. Vous devriez voir cette icône. Si vous cliquez dessus. Nous avons maintenant toutes ces options ici pour nous aider à imiter différentes tailles d'appareils. Donc, si nous cliquons ici sur ce menu déroulant qui a responsive, nous avons le mode responsive et responsive signifie que nous pouvons faire glisser l'écran manuellement pour l'augmenter en taille. Et vous verrez les dimensions changer ici en temps réel. Nous avons également des préréglages de différents appareils. Cliquez sur Galaxy S cinq pour voir à quoi ressemblera la page de destination sur cet appareil. Continuons et cliquons sur un iPad et voyons à quoi il ressemblera sur un iPad. Et nous pouvons augmenter le zoom ici juste pour le rapprocher. Voici donc à quoi ça ressemble sur un iPad. Que diriez-vous d'un iPhone X ? C'est ce que ça devrait ressembler à un iPhone X. Et vous remarquerez que nous avons ce menu de hamburgers ici. Et lorsque nous cliquons, il y a ces options, la barre de navigation. Mais nous devons faire quelque chose à ce sujet parce que cela n'a pas l'air bien. Actuellement. Faites défiler jusqu'au bas et voyez à quoi ressemble le pied de page. C'est donc à ça que ressemble la photo. Nous devons également faire quelque chose à ce sujet. En gros, je pense que le site est déjà en bonne forme, seulement quelques astuces, et nous aurons l'air bien sur les appareils mobiles. Allons en avoir 100 pour cent. Maintenant, pour quitter le mode de conception réactive, cliquez à nouveau sur cette même icône ici, et sur les péages de mort, puis fermez les outils de développement. Et maintenant, nous voulons entrer dans le mode d'édition ou l'espace de travail d'Elementor. Alors que nous sommes encore sur cette page, j'irai ici et si je clique, cela ouvrira cet espace de travail. Et si nous survolons ici et que nous cliquons plutôt sur la barre de navigation, nous ouvrirons l'espace de travail d'édition de la barre de navigation. même cas s'applique au pied de page. Si nous cliquons, cela sera redirigé vers l'endroit où nous commencerons à modifier le pied de page. Commençons donc par la barre de navigation. Je vous verrai bientôt. 25. Barre mobile réactive: Bienvenue dans la partie design réactif de cette classe. Maintenant, pour commencer à utiliser les élémentaux fonctionnalités et les outils de conception réactive devront passer en mode d'édition. Je vais donc planer ici. Et si je clique sur Modifier avec Elementor, il sera directement dirigé vers l'édition de la page elle-même, du contenu principal, de la section héros et du contenu du corps principal. Mais si nous survolons ici et que nous cliquons sur la barre de navigation sera déplacée à l'endroit où nous allons modifier cela. Maintenant, Bar, seulement. même cas s'applique au pied de page. La première chose que nous voulons faire est d'éditer la barre de navigation parce que nous voulons commencer par rendre la barre de navigation réactive ou correcte. Nous y voilà. Nous sommes en mesure de modifier la barre de navigation et de la rendre passive. Donc, pour commencer, la première chose que nous voulons faire est d'aller ici et de cliquer sur cette icône du mode réactif pour activer le mode responsive. Et une nouvelle remarque qu'il y a une barre contextuelle juste en haut avec toutes ces options. Et comme vous pouvez le constater, nous disposons d'une tablette, d'une tablette et d'une taille mobile. Nous voulons commencer par examiner l'apparence de la barre de navigation sur les écrans mobiles. Donc, dans une clique qui, c'est à quoi ça ressemble. Il n'a pas l'air très présentable. La première chose que nous voulons faire est de pousser le logo vers la gauche et ce menu vers la droite. Maintenant, il faut garder à l'esprit qu'il s'agit deux colonnes hébergées dans cette section. Changeons le mode bureau pendant une seconde. N'oubliez pas qu'il s'agit ici d'une section à deux colonnes. Il comporte une colonne, deux colonnes. Il occupe donc 100 % de l'écran. Ces deux colonnes sont donc essentiellement divisées en pourcentages de ces 100 %. Cela pourrait donc être de 20 % dans ces cas, soit 80 pour cent. Ainsi, lorsque vous passez à un appareil mobile amener ce logo à gauche et le menu à droite, nous devons diviser cette largeur de 100 % par deux, soit 50 %, 50% pour cent. Je vais cliquer sur cette colonne ici. La colonne qui contient le logo. Et sous les mises en page, largeur de colonne, je vais taper 50 pour cent. Juste 50 comme ça. Et maintenant, il occupe 50 %. Vous pouvez le dire par la frontière ici. Je vais donc également sélectionner la colonne de menu. Et je ferai de même sous Disposition, largeur de colonne 50 pour cent, et maintenant les deux sont sur la même ligne. La prochaine chose que nous voulons faire est de rendre ces menus visibles. En ce moment, c'est noir. Ce n'est pas facile à voir par défaut. Dans la leçon suivante, ajoutons un peu de style au menu mobile. Je vous verrai bientôt. 26. Styliser le menu mobile: Et bon retour. Il est temps de rendre la boucle du menu mobile plus présentable. Commençons donc. Je vais donc sélectionner le menu lui-même. Et maintenant, sous le contenu, je vais passer à l'intérieur de la mise en page. Et sous alignement réactif. Poussons ça vers la droite, comme ça. Et maintenant, faisons-le blanc et couleur. Passons donc à l'intérieur du style et réduisons les paramètres du menu principal. Nous devons entrer dans le déclencheur de menu et fermer l'icône. Nous pouvons définir le contexte. Mettons-le en blanc pour l'instant pour qu'il soit visible. Et mettez-le à jour. Et lorsque nous cliquons sur le menu lui-même, remarquez ce qui se passe ici. Par défaut, la police est blanche et en survol est verte. Donc, ce que nous voulons tout d'abord, c'est lui donner un arrière-plan. Donnons-lui ce fond vert. Et je veux juste me rendre à l'endroit où nous avons ce vert. Je vais copier ça et revenir ici et réduire le déclencheur principal et fermer l'icône. Parce que ce menu déroulant nous intéresse. Allez dans le menu déroulant. Et pour la couleur de fond, je veux la changer. Je veux coller le code que nous venons de copier de l'autre côté. Maintenant, c'est vert. Et comme vous pouvez le constater en ce moment, en vol stationnaire, car il devient vert, il est invisible. Nous devons donc changer l'état de survol de la couleur du texte, donnons-lui cette couleur. 40, 40, 40. Dans notre propre survol, il change de couleur. Mais maintenant, il cache le logo. Nous devons donc pousser l'ensemble du menu déroulant vers le bas. Alors que nous sommes encore sous le menu déroulant. Défilons vers le bas et cherchons la distance maximale. Et augmentons cela manuellement. Poussez-le vers le bas. Et j'aime bien où il est en ce moment. Mettons-le à jour. Et pour le séparateur, n'en disons pas. Pour qu'on se débarrasse de ces lignes. Et maintenant, pas de frontière, mettez-le à jour. Nous allons donc en avant-première. Si nous cliquons sur Control Shift I pour révéler les DevTools, puis cliquez sur cette icône ici que nous venons de voir. C'est comme ça que ça ressemble en ce moment sur les tablettes. Voici donc à quoi ça ressemble sur un iPad. Nous arriverons bientôt à la taille de la tablette, mais passons à une vue téléphonique et c'est ce à quoi elle ressemble sur le téléphone. Je pense que j'aime bien où nous entrons, mais nous pouvons nous débarrasser de cette ligne blanche en la poussant un peu vers le haut. Revenons ici, distance maximale et réduisons-la peut-être à 25. Mettez à jour cela. Et prévisualisons les modifications. Alors, cliquons dessus. Oui, donc j'aime bien cette position. Mais pour l'instant, remarquez que le logo est bien plus indenté que, bien plus que les objets de navigation. Alors positionnons correctement le logo ou les écrans mobiles. Dans la prochaine leçon, je vous verrai bientôt. 27. Positionner le logo mobile: Bienvenue de retour. Il est maintenant temps de positionner correctement ce logo sur les écrans mobiles. Commençons donc. Revenons ici. Sélectionnez le logo. Et alors que la colonne du logo. Et pendant que la colonne du logo est sélectionnée, modifions la colonne, passons à l'intérieur avancé et supprimons ce lien et ceci également. Et maintenant, pour le pousser vers la gauche, il suffit de réduire la marge à gauche, comme cela jusqu'à ce point. Et augmentons la marge en haut, juste pour que nous puissions créer de la place en haut. Donnons-lui quelque chose comme 20. Et maintenant, vous remarquerez que le logo touche presque la bordure inférieure de la section. Alors, faisons quelque chose à propos de ces rembourrages ici. La première chose que nous devons faire est de pousser tout le menu déroulant vers le bas. Tout d'abord, en veillant à ce que nous le soyons, nous avons sélectionné le menu des hamburgers et sélectionné n'importe où dans cette bordure bleue. Et maintenant, c'est l'article que nous sommes en train de modifier ici. Ensuite, passons à l'intérieur du style, défilons vers le bas et cherchons le menu déroulant. Et puis passons à la distance maximale et augmentons. Ou bien. Ensuite, nous allons sélectionner cette section supérieure qui contient le logo et le menu. J'avais déjà supprimé ce lien ici. Permettez-moi également de supprimer cela. Augmentons le rembourrage inférieur. Un peu comme ça. Et mettons à jour. Prévisualisons les modifications. Contrôlez I pour ouvrir les DevTools. Et c'est à ça que ça ressemble. Allons donc basculer le hamburger pour voir ce que nous avons. Et maintenant, ça a l'air génial. Mais maintenant, ce menu lui-même, l'icône Menu, doit être correctement aligné, comme le logo. Nous allons donc revenir en arrière et faire ça. Bien qu'il soit encore sélectionné. En allant à l'intérieur ici et rompre ces liens aussi. Et augmentons un peu la marge droite jusqu'à 10. Et aussi la marge supérieure. Allons l'augmenter jusqu'à ce point. Il suffit d'utiliser votre œil pour voir si vous pouvez le positionner correctement. Mettons-nous ensuite à jour et prévisualiserons les modifications. C'est vrai ? Nous devons maintenant pousser un peu le menu déroulant vers le haut pour nous débarrasser de cet espace. Alors, tant qu'il est encore sélectionné, je vais entrer dans le style. Vous avez réduit le menu principal, ouvrez le menu, le menu déroulant. Et pour la distance maximale, réduisons-la jusqu'à ce point. Mise à jour. Et prévisualisons les modifications. Génial. Nous avons donc fini avec le menu réactif. Il fonctionne correctement. La prochaine chose que nous voulons faire est de travailler sur une section de héros réactive et le reste du corps. Allons-y et faisons-le dans la prochaine leçon. 28. Section de héros réactif: Continuons là où nous nous sommes arrêtés. Nous disposons déjà d'un menu réactif pour appareils mobiles. Et c'est là. La prochaine chose que nous voulons faire est de rendre le reste de la page réactif, et nous commencerons par la section héros. ce faire, sautons dans le tableau de bord et passer à l'intérieur des pages. Ensuite, modifions notre page de destination avec Elementor. Je vais ouvrir cela dans un nouvel onglet et passer à cet onglet. Nous y voilà. Nous voulons donc passer en mode réactif pour commencer. Passons donc au mobile. Donc, en regardant cela, vous pouvez déjà voir un déséquilibre. La marge ici est minuscule, marge ici est B. Et ces coups de pinceau semblent un peu raides, il faut donc les aplatir un peu. Mais lorsque nous faisons défiler vers le bas, c'est ce que nous avons actuellement. Faites défiler vers le bas. Je ne pense pas que nous ayons beaucoup de travail car tout le contenu semble s'être correctement aligné lorsque nous passons en mode responsive, mais nous devons modifier certains éléments un peu comme ce bouton, juste pour qu'il soit correctement aligné. Revenons ici en haut. Et la première chose que nous voulons faire est d'aplatir ce coup de pinceau. Nous allons donc sélectionner la section qui le contient. Et passons à l'intérieur du diviseur en forme de style. Et réduisons la hauteur à 30 %. C'est la moitié de ce que nous avons actuellement. Oui, donc j'aime bien ça. C'est ça. Passons à cette colonne ici et faisons quelque chose à propos de cette marge. La première chose que je veux faire est donc de sélectionner la colonne qui contient tous ces blocs de texte et ces icônes. Et ce que nous voulons faire, c'est cliquer avec le bouton droit et modifier la colonne. Et pendant que nous sommes encore là, allons à l'intérieur avancé. Et supprimons ce lien, le remplissage et la marge par défaut. Et cela réinitialisera tout pour que nous puissions commencer à ajouter nos propres marges et rembourrages. Et maintenant, je voulais les relier ensemble une fois de plus. Je vais donc le faire. Et donnons un rembourrage de 15 ou à droite. Donc de tous les côtés, du haut, de la droite, du bas et de la gauche. Dans cette colonne, tous les textes auront un remplissage de 15. C'est vrai ? C'est donc ça. Nous allons le sélectionner. Bienvenue sur. Et nous allons l'aligner sur le centre. Et je pense que nous devons réduire un peu la taille parce que c'est sur les écrans mobiles, juste pour qu'il s'agisse d'une seule ligne. Faisons de même pour les podcasts. Podcast. Alignons cela au centre et réduisons un peu la taille. Ils peuvent le faire apparaître un peu. Tout simplement parce qu'il s'agit de notre H1 et qu'il s'agit d'un résumé du contenu de notre page de destination. Ensuite, faisons de même pour le paragraphe ici. Allez à l'intérieur tant qu'il est encore sélectionné. Allons à l'intérieur du style et alignons sur le centre. Et mettons à jour cela. Prochaine. Sélectionnez la vedette sur. Cela ne me dérange pas de l'avoir là, mais nous allons nous débarrasser de cette colonne et l'aligner sur le centre qui semble plus présentable. Prévisualisons les modifications apportées jusqu'à présent. Appuyez sur Control Shift I ou Commande Shift I sur Mac. Ça commence déjà à paraître génial. Faisons donc quelque chose à propos de ces icônes en vedette. N'oubliez pas que nous avons ajouté les marges gauche et droite sur ces colonnes individuelles, mais nous n'avons pas ajouté de marge supérieure ou inférieure. Nous avons ajouté les marges supérieure et inférieure sur la section qui la maintient. C'est pourquoi il y a cet espace continu jusqu'au bout. Mais pour les colonnes individuelles, nous n'avons pas ajouté de marges supérieures ou inférieures. C'est pourquoi, lorsque nous passons à la vue mobile, ils n'ont aucune marge. Alors choisissons le premier ici, en allant à l'intérieur avancé. Et pour la marge, je vais tout d'abord rompre ça. Et ensuite, j'augmenterai la marge supérieure de cinq. Disons cinq. Et puis je copierai ce style. Et si je colle le même style sur la deuxième colonne, il aura une marge supérieure de cinq. Et le même cas s'applique aux autres. Je vais donc sélectionner que chaque colonne est avancée. Faisons en sorte que ça soit 10. C'est plutôt comme ça. Faisons en sorte que ça soit un 10 aussi. Le premier ne compte pas vraiment parce qu'il n'a aucun objet au-dessus. Mais copions ce style et collons le style à l'intérieur de ces autres. Maintenant, supprimons la marge supérieure sur celle-ci. Parce que, comme vous pouvez le constater, c'est sur cette nouvelle section qu'est une intersection qui retient ces trois points et une autre intersection qui retient ces trois points. Les sections elles-mêmes ont donc leur propre marge. Et ces marges ne sont pas égales aux marges que nous avons pour la colonne. Nous devons donc les traiter un peu pour les rendre cohérents. Donc, réduisons un peu cela. Donnons une dizaine. Mettez à jour cela. Et prévisualisons les modifications. Défilement vers le bas. Génial. Nos icônes ont fière allure. Passons à la section épisode en vedette et rendons-la réactive. Nous allons le faire dans la prochaine leçon. Je vous verrai bientôt. 29. Section de contenu principal réactif: Bon retour. Continuons à rendre notre section de contenu principale réactive sur mobile. Donc, la prochaine chose que nous voulons faire ici est de sélectionner ce sous-titre. Et réduisons sa taille. Bien sûr, vous êtes libre de lui donner la taille que vous voulez. Serrano l'a en une seule ligne. Et veillons à ce qu'il soit aligné sur le centre. Donc, sous Content Center, faisons de même pour cela. Et je veux juste réduire la taille un peu comme ça. Nous allons sélectionner cette police, cette description également. Allons à l'intérieur du style, alignons, centrons. Sélectionnez le bouton, alignez-le au centre, mettez-le à jour. Et passons en revue les changements. Très bien, continuons donc à faire défiler. J'aime la position et la taille de l'image. Faisons quelque chose à propos de ce coup de pinceau. Je vais donc sélectionner cette section qui tient ce coup de pinceau. Vous vous souvenez si je pouvais passer en mode bureau ? Ce coup de pinceau se trouve ici à l'intérieur de cette section, pas sur la section bleue. Revenons ici, revenons ici, faites défiler là-dedans. Sélectionnez cette section. Et bien qu'il soit encore sélectionné, passons à l'intérieur du diviseur en forme de style, en bas. Et gardons ça à 30 ans. Mettez à jour cela. Je pense que ça a l'air bien. Pour ce qui est de cette section, je pense à l'endroit où tout est positionné. Mais une chose que nous pouvons faire est de sélectionner cette colonne en avançant le site. Et donnons un rembourrage de 15. Très bien, nous avons poussé ces cartes un peu vers l'intérieur. Prévisualisons les modifications. Super génial. J'aime déjà la position de ces images, mais faisons quelque chose à propos de ce coup de pinceau. Revenons donc ici. Sélectionnez cette section. Allons à l'intérieur du séparateur de feuilles de style. Et c'est en haut car il s'agit d'une petite section que nous avons ajoutée juste pour ajouter les coups de pinceau. Donnons-lui une mise à jour 30 qui continue à faire défiler pour voir ce qui doit être amélioré ou à droite, alors sélectionnons cette colonne qui contient la description textuelle avancée. Supprimez ce lien juste là. Et supprimez ces liens juste là. Et maintenant, nous pouvons choisir cela, donner un 15. 15. C'est comme ça que ça ressemble. Réduisons cette marge juste en dessous de l'image. Donc, la sélection de l'image a été avancée. Enlevons, supprimons cette marge juste là. Et pour la marge inférieure, utilisons notre œil et réduisons-le au bon endroit. Je pense que je vais aller avec les 75. Et nous allons choisir Alex. Aligner le centre. Sélectionnez ce texte. Aligner le centre. Sélectionnez le bouton. Aligner le centre. C'est vrai. La prochaine chose que nous devons faire est de pousser cette section verte vers le bas et de la séparer de ce bloc de texte. Nous allons donc sélectionner le bouton. Et allons à l'intérieur avancé. Brisez le lien ici et augmentez le rembourrage inférieur. Voyons donc voir. Utilisons notre œil jusqu'à ce moment-là. Et maintenant, nous voulons faire quelque chose à propos ce coup de pinceau comme dans le coup de pinceau précédent ici. Voyons où il se trouve en basculant sur notre vue de bureau. Et vous remarquerez qu'il se trouve à l'intérieur de cette section, la section qui contient l'image et le bloc de texte. Donc, pour modifier le coup de pinceau, nous avons besoin de cette section d'édition sélectionnée. Un passage à la vue mobile. Toujours sélectionné. Séparateur en forme de style. 30 en bas. Oui, donc maintenant, c'est beaucoup mieux. Nous allons sélectionner cette police. Mettez-le au milieu. La même police ici. Poussez ça au milieu. Comme l'endroit où se trouve le formulaire. Mais bien sûr, vous pouvez jouer avec le positionnement jusqu'à ce que vous soyez satisfait. Et faisons quelque chose à ce sujet aussi. Alors, en choisissant cela, passez à l'intérieur du diviseur en forme de style 30. Mettons cela à jour et prévisualisons les modifications. Ils ont raison. Nous en avons donc presque fini avec la conception réactive mobile. La seule partie restante est le pied de page. Faisons donc en sorte que la nourriture soit réactive. Dans la leçon suivante, avant que nous ne finissions. Je vous verrai bientôt. 30. pied de page mobile réactif: Continuons donc. Nous voulons rendre le pied de page réactif. Pour le moment, nous avons notre logo ici. Ensuite, nous avons notre menu de navigation qui, si vous cliquez, s'ouvre comme ça. Et nous disposons de ces informations sur les droits d'auteur et nos icônes de médias sociaux semblent mal alignées. Allons à l'intérieur de notre tableau de bord. Allons à l'intérieur du générateur de pieds de page d'en-tête d'apparence. Et modifions notre photo avec Elementor, ouvrons le lien dans un nouvel onglet et passons à cet onglet. Super génial. Maintenant, le pied de page est modifiable. Passons au mode réactif. Et cliquons sur l'icône mobile. avons donc ici. Je pense donc maintenant que nous allons sélectionner les icônes et les aligner au milieu. Mettez à jour cela. Et voyons ce que nous avons. Contrôlez l'œil de mouton pour faire apparaître les DevTools et passer à la vue de la conception. Et c'est à quoi ressemble notre pied de page. J'aime déjà son apparence, mais vous pouvez toujours faire exactement la même chose que nous avons fait si vous voulez que votre logo sur le pied soit sur le côté gauche et que le menu sur le côté droit les divise simplement en pourcentages de la, une largeur de 100 %. En revenant ici, passons à la vue du bureau. Comme je l'ai mentionné, lorsque nous rendions la barre de navigation réactive, la section qui contient tous ces éléments a une largeur de 100 % et elle est divisée en pourcentages de ce 100%. Donc ici, en bas de page, si nous voulons ramener ce logo à gauche et le menu à droite, ou nous devons le faire, sélectionnez cela. N'oubliez pas que nous avons trois colonnes, contrairement à la barre de navigation qui comporte deux colonnes. Cette fois, nous divisons les 100 % en trois pourcentages différents. Alors, cliquons dessus. Nous pouvons sélectionner la colonne du logo, qui s'étend maintenant jusqu'à gauche. Par défaut, chaque colonne s'exécute de gauche à droite sur les appareils mobiles. Ce que nous devons donc faire, c'est sélectionner la première colonne et lui donner quelque chose de 20 % ou 55 %. Et donnons au menu 45 pour cent. Très bien, donc ça aligne ces deux-là. Mais rappelez-vous que nous avions un troisième article. Laissons-le à 100 pour cent par défaut pour qu'il soit en bas. C'est une autre façon de le faire. Mais je préfère ce que nous avions un peu plus tôt. Je voulais juste vous montrer comment structurer le pied de la même manière que nous avons structuré le menu de navigation en pourcentages. Mettez à jour cela. Prévisualisons les modifications. Donc, en ce moment, tout semble éparpillé partout. Et le but était de vous montrer que vous pouvez déplacer des éléments autour des différentes colonnes et redimensionner des éléments. Je préfère les éléments sur le pied de page empilés les uns sur les autres comme nous les avions initialement. Revenons donc à ce que nous avions à l'origine. Je vais donc donner ça à 100 %. Je vais également donner le menu à 100 % de largeur. Et bien sûr, les icônes sociales sont une mise à jour à 100% qui nous permet de prévisualiser les modifications. Oui, c'est ce que nous avons. Donc, cliquer pour afficher le menu déroulant, mais le menu déroulant n'est pas stylisé. Alors, que pouvons-nous faire à ce sujet ? Nous pouvons donc le coiffer de la même manière que nous avions coiffé la barre de navigation supérieure. Donc, revenons ici, l'agrandir. Et passons à l'intérieur du style. Ce n'est pas le menu principal. Nous voulons avoir le menu déroulant pour la couleur d'arrière-plan. Permettez-moi de prendre ce vert très rapidement. Copiez ça. Retournez ici. Allons-y en face. Et pour la couleur du texte, nous voulons qu'elle soit blanche et qu'elle soit propre. Nous voulons que ce soit aussi bleu. Ce bleu. Et quand il est actif, nous voulons qu'il soit aussi bleu. Débarrassez-vous de ces lignes. Alors, faites défiler tout le chemin vers le bas sous le menu déroulant. Faites défiler vers le bas jusqu'à diviseur, style de bordure, aucun. Et cliquons sur Mettre à jour. Prévisualisons les modifications. Ou vendredi, j'aime bien ce que nous avons. Maintenant, notre page est entièrement réactive. Nous avons une barre de navigation réactive, corps réactif et un pied de page réactif. Jetons donc un coup d'œil à la page pour le moment. Allons donc à l'intérieur des pages. Et je clique avec le bouton droit de la souris sur Afficher, ouvrir le lien dans un nouvel onglet et passons à cet onglet. C'est donc le résultat final que nous avons pour la vue de bureau. Et si je clique sur Control Shift I ou sur Commande Shift I, voyons à quoi cela ressemble sur les écrans mobiles. vais faire quelque chose à ce sujet, ne vous inquiétez pas. C'est donc ce que nous avons. Débarrassez-vous de cet espace vide ici. Dans la prochaine leçon, je vous verrai bientôt. 31. Régler la position de navbar réactif: Allons faire quelque chose à ce sujet. Laissez-moi juste quitter les DevTools, fermez ça. Ensuite, je les survole et je cliquerai sur la barre de navigation pour que nous puissions les modifier. Donc, ici, ce que nous voulons faire est de passer en mode réactif, à moins qu'il ne s'agisse d'une vue mobile. Ce que nous voulons faire, c'est pousser toute la section vers le haut en réduisant cette marge supérieure ici. Allons de l'avant et sélectionnons toute la section et disons Modifier. Allons de l'avant et supprimons ces liens ici. Et puis pour la marge supérieure, tout d'abord, augmentons le rembourrage supérieur à quelque chose de 40. Et réduisons la marge supérieure du même montant, mais dans la direction opposée. C'est donc un 40 négatif. Et ce que cela fait, c'est qu'il pousse cette section bleue que nous venons d'ajouter vers le haut. Alors réduisons-le à, disons négatif 40. Et maintenant, la zone bleue supplémentaire que nous avons obtenue lorsque nous augmentons le rembourrage, laissez-moi simplement enlever la marge. Cette zone bleue supplémentaire a été poussée vers le haut et elle couvrira cette zone. Revenons donc ce 40 négatif. Et mettons à jour cela. Je pense que nous devrions également augmenter le rembourrage inférieur à environ 15. Oups, connexion perdue. Permettez-moi de le mettre à jour. Et prévisualisons les modifications. Contrôlez Shift I, afin que nous puissions le voir sur mobile et commençons à faire défiler. Nous ne pouvons pas faire défiler cela car nous ne modifions que la barre de navigation. Nous devons aller à l'intérieur de la page de destination. Permettez-moi de passer à cela. Permettez-moi de le rafraîchir. Au moins, nous n'avons pas cet espace vide ici. Et juste pour que nous n'ayons pas trop d'espace ici, ce que nous pouvons faire est de réduire la marge supérieure sur ces éléments. Donc, en sélectionnant les colonnes individuelles et en allant à l'intérieur avancé pour la marge supérieure, disons quelque chose comme 10. Nous n'avons pas défini de marge pour la colonne de logo. Nous l'avons dit directement sur l'élément logo. Disons donc 0. Mettez à jour cela. Et passons à l'intérieur de notre page de destination et rafraîchissons cette page et voyons ce que nous avons. C'est vrai. Nous avons donc réduit tout cet espacement qui se trouvait au sommet. Je pense qu'en ce moment, nous avons une page de destination qui fonctionne et qui a l'air super génial. Bien sûr, si vous avez plus de temps, vous devez vous entraîner davantage et jouer avec tous les outils et fonctionnalités fournis par Elementor. J'espère que vous avez compris jusqu'à présent comment utiliser certains des outils et fonctionnalités fournis par Elementor pour créer une page de destination de classe mondiale. Laissez-moi juste arrêter ça. Prévisualisons maintenant toute la page avec toutes les modifications que nous avons apportées ou à droite, alors commençons à faire défiler jusqu'au bas. Et passons à la vue mobile. Commençons à faire défiler. Et notre page de destination fonctionne correctement et nous pouvons passer à travers différents appareils et voir à quoi elle ressemblera. C'est ainsi que cela ressemblera sur un iPhone X, sur un Galaxy S5, et ainsi de suite. Maintenant, vous vous demandez peut-être, Hey, pouvons-nous ne pas avoir fait de conception réactive sur tablette ? Donc, si je clique sur le mode responsive, nous avons toujours le mode tablette. Et nous ne l'avons pas fait. Je l'ai délibérément laissé pour que vous puissiez faire de l'exercice avant la fin du cours. Alors allez-y et essayez de rendre cette page réactive sur tablette en utilisant les mêmes principes que ceux que nous avons utilisés pour la rendre réactive sur mobile. Rappelez-vous ce que nous avons fait pour mettre ces deux éléments côte à côte sur la barre de navigation, fait la même chose que vous ferez pour la tablette. Et comme vous pouvez le constater en ce moment, c'est ce que nous avons, mais il faut le toucher. Ce sera donc un bon moyen pour vous d'exercer un design réactif. Vous comprenez déjà comment le faire sur mobile. mêmes principes exacts s'appliquent ici sur tablette. Alors allez-y et faites-le, et voyons ce que vous allez finir. Et cela marque la fin de notre cours. J'espère que vous avez eu autant de plaisir à le regarder et à le suivre que je l'ai créé. Et j'espère surtout que vous avez appris à créer une belle page de destination pour un podcast. Je m'appelle Ken Visa. C'est toujours un plaisir de vous apprendre à créer de belles pages Web. Je travaille déjà sur le prochain cours, ce que j'espère que vous trouverez utile. Et j'espère vous voir bientôt jusqu'à la prochaine fois. Prenez soin de vous, restez au frais.