Cours Elementor pour débutants : créer un site Web d'entreprise de toiture entièrement fonctionnel à partir de zéro

1. Introduction du cours: Eh bien, bonjour. Êtes-vous prêt à apprendre à créer vos propres sites Web avec Elementor à partir de zéro sans aucune compétence en matière de codage. Je veux te montrer comment faire exactement cela. Si vous restez avec moi jusqu'au bout, vous aurez les compétences nécessaires pour créer le type de site Web que vous souhaitez. Quand tu veux. m'appelle Ken et j'utilise Elementor depuis cinq ans. J'utilise WordPress depuis six ans. Et je crée des sites Web pour des clients payants depuis quatre ans et demi. Lorsque je ne crée pas de sites Web pour des clients, je crée des modèles élémentaires et je les vends sur Creative Market. Je gagne donc de l'argent en payant des clients et en vendant des produits numériques que j'ai créés avec Elementor. Et dans ce cours, je veux vous montrer exactement comment procéder. Lorsque nous aurons terminé, vous aurez compris comment travailler avec les sections, les colonnes, l'espacement, les textes, la topographie, les images et les couleurs. Et ces compétences vous permettront de créer tout type d'idée de site Web que vous avez à tout moment. Parce qu'en ce moment, vous avez peut-être une idée de site Web. La semaine prochaine, vous aurez peut-être une autre idée de site Web. Et vous ne pouvez pas continuer à payer des concepteurs de sites Web pour créer des sites Web pour vous chaque fois que vous avez une nouvelle idée. Je veux donc vous montrer comment être indépendant et créer des sites Web pour vous-même quand vous le souhaitez. J'ai pu créer mes propres sites Web et en tirer des revenus. J'ai créé des cours, en particulier pour les débutants, et ce cours n'est pas différent. Mon hypothèse est que vous n'avez jamais utilisé WordPress ou Elemental auparavant. Je veux donc vous tenir la main et m'assurer que vous comprenez exactement ce que vous devez faire dès la première étape, de l' WordPress à l'installation de thèmes WordPress, en passant l'installation de plugins WordPress, créer chaque élément de votre site Web du haut vers le bas, d'une page à l'autre, les reliant entre eux et tout ça. Nous travaillerons en fait sur un projet réel dans le cadre duquel nous créerons un site Web pour une entreprise de toiture. C'est donc une hypothétique entreprise de couverture qui nous a contactés et nous a demandé de créer un site Web pour elle. Nous avons tout le contenu et nous verrons comment aborder un tel projet. Ce type de site Web spécifique a en fait été demandé par l'un de mes étudiants, Alex Rodriguez. Et c'est un honneur et un plaisir de pouvoir enfin tenir mes promesses. Je livrerais. Alors Alex Rodriguez, je voudrais t'envoyer un message. Et n'oubliez pas que si vous avez d'autres idées pour un type de site Web spécifique que vous souhaitez que nous créions, déposez-les dans la discussion ci-dessous, et je ne manquerai pas de créer un tel cours. Je suis donc très heureuse de vous avoir ici et j'ai hâte de commencer. Alors, sans perdre plus de temps, je vous verrai dès la première leçon. 2. Le projet du cours: Et bienvenue. Comme je l'ai mentionné dans l'introduction, ce cours a été spécifiquement demandé par l'un de mes étudiants, Alex Rodriguez, l'ombre d'Alex Rodriguez. Et il voulait que nous créions un site Web pour une entreprise de toitures. Et il voulait spécifiquement qu'il dispose d' un formulaire de rendez-vous ou d'un assistant de prise de rendez-vous. Et comme vous pouvez le voir ici. Voici donc la section des héros. Nous avons quatre pages et lorsque nous commençons à faire défiler la page, comme vous pouvez le voir, l'en-tête reste collant en haut. Il ne disparaît pas avec le reste du contenu. Et cela permet à l' utilisateur d'avoir accès à la barre de navigation quel que soit l'endroit où il se trouve sur le site Web. Si vous consultez ce formulaire de prise de rendez-vous, il contient un menu déroulant contenant tous les différents types de services pour lesquels nous pouvons prendre rendez-vous. Par exemple, si vous voulez un toit solaire, nous pouvons vous le fournir. Indiquez ensuite notre nom, adresse e-mail, notre numéro de téléphone et les informations supplémentaires que nous voulons que l'entreprise connaisse lorsque nous prenons rendez-vous, puis nous pourrons envoyer le message. L'entreprise reçoit la demande rendez-vous et me recontacte. Bien sûr, maintenant que nous défilons vers le bas, nous avons cette jolie section bleue ici. Nous verrons comment procéder. Parce que c'est la page d'accueil et c'est une page de destination. Il possède plusieurs boutons d'appel à l'action comme celui-ci. En voici un autre. Il est toujours bon de dire aux utilisateurs ce que vous voulez qu'ils fassent. Donc, dans ce cas, nous voulons qu'ils nous parlent. Différents services sont présentés ici et nous pouvons cliquer pour en savoir plus. Nous avons cette belle image avant et après. C'est donc avant que le toit ne soit terminé, et c'est après l'achèvement du toit. Et ça ne fait que commencer à bouger. Dès que le curseur de la souris se trouve au-dessus de l'image. Nous verrons comment procéder. Ensuite, nous avons cette jolie petite section simple. Bonjour, la page d'accueil ou une page de destination doit toujours comporter une section de témoignages à ajouter comme preuve sociale. Ensuite, nous avons cette césarienne d'urgence. Puis ces magnifiques dossiers qui se trouvent dans la page à propos. Nous avons la page À propos de nous. Il a une belle section de héros, très simple, minimaliste. Nous avons notre vision, notre mission, notre histoire. Ensuite, nous avons ce que nous proposons. Une jolie section picturale ici avec un fond d'image. Ensuite, nous avons cette section de compte à rebours. Si je rafraîchis cette page parce que je fais défiler l'écran vers le bas, oui, nous avons ce joli compteur et nous verrons comment faire tout cela. Puis en sautant dans le blog. C'est ici que nous affichons les derniers articles que nous avons publiés sous forme de site Web. Et nous verrons comment le créer. Voici donc un aperçu de ce sur quoi nous allons travailler . En parcourant toutes ces pages, créant chaque élément que vous avez vu, vous acquerrez les compétences dont vous avez besoin pour créer votre futurs sites Web. Et encore une chose, j'aime encourager mes élèves à faire créativité autant que possible. Vous n'êtes pas obligé de le faire exactement comme je le fais. Vous avez la liberté d'idées la liberté de créativité nécessaires pour créer votre propre version du site Web sur les toitures. Une fois que vous aurez fait cela, nous aimerions voir ce que vous avez créé. Prenez donc une capture d'écran de vos pages Web préférées, celles que vous avez créées, et partagez-la avec nous juste en dessous de cette vidéo. Et obtenez des commentaires de la part de mes camarades de classe et de moi-même. Et maintenons les feux allumés. Passons à la leçon numéro un. Je te verrai bientôt. 3. Installation de WordPress dans cPanel: Bienvenue à nouveau. Maintenant que vous avez acheté un hébergement Web pour votre site Web, il est temps d'installer WordPress via le cPanel. Maintenant, je suis ici, sur ma page de connexion à cPanel. Je vais me connecter. Je vous suggère de faire de même. Et maintenant, nous sommes connectés. Maintenant, votre cPanel peut sembler un peu différent du mien, mais ces paramètres et fonctionnalités sont peu près les mêmes quel que soit l'hébergeur Web. Donc, ce que nous voulons rechercher, c'est un programme d'installation d'applications appelé Soft Calculus Apps Installer. Et comme vous pouvez le constater, l'une des applications que nous pouvons installer via Calculus est WordPress. Je vais donc cliquer sur Wordpress et je serai redirigé pour résoudre le calcul. Et c'est ici que nous allons installer WordPress. Comme vous pouvez le constater, nous avons une brève description de WordPress. Nous avons la possibilité d' installer WordPress dès maintenant. Et juste en dessous de cette zone, nous avons les installations actuelles. Donc, si vous avez plusieurs installations WordPress, elles seront répertoriées ici. Comme vous pouvez le constater, j'ai déjà une installation. Je vais donc continuer et appuyer sur Installer maintenant. Et cela ouvrira l'endroit où nous pourrons saisir les détails de notre site Web. Pour commencer, choisissons un préfixe ou un protocole pour notre URL. J'aime utiliser https, www.ourdomain.com. Je vais donc sélectionner HTTPS. Et vous ne pouvez utiliser le protocole HTTPS que si vous disposez d'un certificat SSL pour des raisons de sécurité. Donc, si je clique à l'extérieur, il recherchera mon certificat SSL et il confirmera maintenant que j'en ai un. Et nous sommes prêts à partir. Si vous n'avez pas de certificat SSL, il vous indiquera que vous n'avez pas certificat SSL valide et que vous ne pouvez pas utiliser le protocole HTTPS. Vous pouvez utiliser le protocole HTTP, mais cela n'est pas recommandé. Très bien, je veux donc supprimer ce répertoire. Nous ne voulons pas placer notre site Web dans un dossier appelé WP. Nous voulons qu'il se trouve dans le répertoire racine de notre serveur. Ensuite, choisissons notre version de WordPress. Je veux utiliser la dernière version, je vais donc la sélectionner. Donnons un nom à notre site Web. Dans ce contexte, le site Web s'appelle roof call, roof company et une brève description. Sur la planète. C' est ici que vous saisissez les informations de connexion de votre site Web WordPress. Lorsque vous vous déconnectez de WordPress. Pour vous reconnecter, vous devez utiliser ces informations. Passons donc d' admin à quelque chose comme votre nom d'utilisateur. Mon nom d'utilisateur, et mettons un mot de passe fort. Laissez simplement cet e-mail intact. Passons maintenant à la partie suivante. C'est ici que nous pouvons choisir préinstaller ces trois plugins, mais nous ne voulons pas qu'ils soient préinstallés car il existe de meilleures options pour ces types de plugins. Alors dirigez-le, et vous n' aurez pas besoin de changer quoi que ce soit d'autre. La prochaine étape consiste simplement à ajouter un e-mail comme votre Gmail. C'est ici qu'une notification sera envoyée une fois que votre WordPress aura été installé. Je vais donc procéder à l'installation maintenant. Faites défiler l'écran vers le haut et ne quittez pas cette page tant que la barre de progression n'atteint pas 100 %. Accordons-y donc quelques minutes. Très bien, nous l'avons donc installé avec succès. Voici l'URL du site Web, et voici l'URL du tableau de bord. Donc, ce que nous voulons faire, c'est cliquer dessus pour accéder au tableau de bord WordPress où nous pouvons commencer à créer notre site Web. Et nous l'avons ici. Laisse-moi faire un petit zoom arrière. Voici donc comment installer WordPress via le panneau C. Dans la prochaine leçon, nous allons installer un thème WordPress. Je te verrai bientôt. 4. Installation du thème Astra: Bienvenue à nouveau. Maintenant que nous avons installé WordPress via le cPanel, il est temps d'installer notre thème WordPress. Et sans perdre de temps, abordons les thèmes d' apparence. Et par défaut, le thème 2023 est installé car nous sommes actuellement en novembre 2022. Il ne reste donc qu'un mois avant 2023. Pendant la plus longue partie de 2022, le thème 2022 a été installé par défaut, mais nous n'utilisons aucun de ces thèmes par défaut. Vous voulez utiliser un objet spécial appelé Astra, qui est à mon avis le meilleur thème WordPress du marché. Nous y voilà donc. C'est presque en haut, mais si vous faites défiler l'écran vers le bas, nous avons des milliers de thèmes que vous pouvez utiliser. Je vais cliquer sur Installer sur Astra. Si vous ne le voyez pas, vous pouvez faire une recherche rapide ici. Et allons-y et activons. Cliquez donc sur Activer. Et voilà. Merci donc d'avoir installé Astros. Permettez-moi de fermer cette fenêtre contextuelle. Et maintenant, Astra est le thème actif, et c'est ainsi que vous pouvez installer un thème WordPress. Dans la prochaine leçon, nous voulons installer un plugin WordPress car nous utiliserons quelques plugins WordPress. Voyons comment en installer un. Et comme nous créons un site Web avec Elementor, installons Elementor. Je te verrai dans la prochaine leçon. 5. Installation d'un plug-in WordPress: Bienvenue à nouveau. Une fois le thème Astra installé, il est temps d'installer Elementor. Passons donc à l'intérieur des plugins. Ajoutez un nouveau. Mais avant de dire ajouter de nouveaux plugins, passons aux plugins installés. Très bien, nous avons donc des plug-ins préinstallés. Cela dépend de l'hébergeur de votre site Web. Il se peut que vous découvriez que vous avez des plug-ins préinstallés que vous ne souhaitez pas utiliser. Donc, dans ce cas, je ne veux utiliser aucun de ces plugins, je vais donc simplement les désactiver et les supprimer. Maintenant qu'ils sont tous désactivés, je peux tous les sélectionner en cochant cette case. Et puis supprimez. Dans ce menu déroulant, appliquez. D'accord ? Très bien, maintenant nous les avons tous supprimés. Si je rafraîchis cette page. Actuellement, aucun plug-in n' est disponible. Alors allons-y et cliquez sur Ajouter un nouveau ici, sinon vous serez redirigé vers le répertoire des plugins WordPress. C'est là qu'il existe des milliers de plugins que vous pouvez installer pour n'importe quel usage. C'est pourquoi nous sommes pressés, c'est génial. Je vais donc poursuivre la recherche d' Elementor ici. Elementor. Et nous y voilà. Comme vous pouvez le constater, il compte plus de 5 millions d'installations actives. Et il est créé par elements are.com. Cliquez sur Installer. À présent. Allons-y et cliquez sur Activer. Activez. Elementor est maintenant installé et activé. Auparavant, chaque fois que vous installiez Elementor, vous étiez dirigé vers un assistant de configuration où vous configuriez plusieurs paramètres avant pouvoir commencer à utiliser Elementor. Je n'ai pas vu cet assistant de configuration et juste au cas où vous auriez été redirigé vers cet assistant de configuration, j'ai une vidéo préenregistrée dans laquelle je vous montre comment tout configurer dans cet assistant de configuration. Alors laissez-moi y jouer pour vous dès maintenant, juste au cas où cet assistant de configuration vous aurait été présenté. Alors, on y va. Je vais donc appuyer sur « Installé », non ? Ainsi, lorsque je clique sur Activer, je suis redirigé vers l'assistant de configuration d' Elementor. Alors, cliquons sur Activer. Et voici le magicien ici. Alors laisse-moi faire un petit zoom arrière pour que tu puisses tout voir. Comme vous pouvez le voir en ce moment, nous avons environ cinq étapes pour tout configurer avant de pouvoir commencer à utiliser Elementor. Et la première étape consiste à créer un compte elementor.com si vous souhaitez profiter de ces avantages, mais vous n'avez pas besoin d'avoir un compte élémentaire pour utiliser Elementor. Je vais donc poursuivre et sauter cette partie. La deuxième étape consiste donc à décider si vous souhaitez utiliser le thème hello développé et maintenu par l'équipe élémentaire. Mais vous avez également la possibilité de sauter cette étape si vous avez autre chose que vous souhaitez utiliser, j'aime utiliser Astra. Le thème Astra est l'un des les plus légers, les plus rapides et les plus conviviaux du marché pour le référencement thèmes les plus légers, les plus rapides et les plus conviviaux du marché pour le référencement. Je vais donc poursuivre et sauter cette partie. La troisième étape consiste à donner un nom à votre site Web. Et par défaut, le nom qui apparaît dans ce champ est le nom que vous avez donné à votre site Web lors de l'installation de WordPress. C'est donc le nom que j'ai donné à mon site Web. Je ne vais pas le changer, donc je vais juste garder, je vais juste appuyer sur Escape. Ensuite, si vous avez un logo, vous avez la possibilité de le télécharger dès maintenant, mais vous pourrez toujours le faire plus tard pendant création de votre site Web afin que nous puissions aller de l'avant et sauter. Enfin, nous pouvons directement modifier un canevas vierge et commencer à un canevas vierge et commencer créer une page Web à partir de zéro. Ou nous pouvons parcourir des centaines de modèles créés par Elementor qui se trouvent dans l' espace de travail Elementor ou importer nos propres éléments de modèles que nous avons peut-être achetés ou créés nous-mêmes. précédemment. Mais je vais m'en aller et sauter ça. Et par défaut, lorsque vous chauffez, cela vous amène directement une toile vierge où vous pouvez commencer à créer votre page Web. Donc, pour quitter cet endroit, cliquez sur ce menu de hamburgers et quittez le tableau de bord. Nous sommes donc redirigés vers le back-end de l'éditeur pour le canevas vierge spécifique que nous venons de laisser. Mais ce que nous voulons faire, c'est cliquer dessus pour accéder au tableau de bord où se trouvent tous les paramètres de Wordpress. Et maintenant, si vous regardez dans le menu de gauche, vous remarquerez que nous avons Elementor et des modèles. Les deux apparaissent après l' installation d'Elementor. Et si nous cliquons sur Elementor, nous pouvons jouer avec tous les paramètres ici. Mais généralement, vous n' aurez pas besoin modifier les paramètres par défaut du plugin. vous suffira d'y aller directement pour commencer à créer vos pages Web. Et on y va. Voici donc comment terminer cet assistant de configuration, au cas où vous tomberiez vous-même sur un assistant de configuration. Et en gros, c'est comment installer un plugin WordPress. Maintenant, 99 % des plugins WordPress n'ont pas d' assistant de configuration, cela dit, c'est ainsi que vous pouvez installer Elementor sur votre site Web. À partir de la leçon suivante, nous allons voir comment commencer à créer un site Web dans le frontend. Je te verrai bientôt. 6. Créer l'en-tête - Installer le plug-in ElementsKit: Bienvenue à nouveau. Maintenant que Elementary est installé, nous sommes prêts à commencer à créer le site Web. Et comme je l'ai mentionné dans cette leçon, nous allons créer l'en-tête. L'en-tête se trouve dans cette zone. Il contient le logo et la barre de navigation ou la barre de navigation. Voyons donc comment construire. Ils retournent dans le tableau de bord. Et pour créer l'en-tête, vous utiliserez un autre plugin appelé elements keep light add-ons pour Elementor. Passons donc à la section Plugins, ajoutez-en de nouveaux. Cherchons Elementor. Et bien sûr, Elementor est actif, mais vous remarquerez que nous avons plusieurs autres plug-ins ici qui portent le nom Elementor. Et il s'agit de plug-ins tiers développés par développeurs indépendants pour être ajoutés à Elementor. Elementor, la version gratuite d'Elementor a des limites. Ces développeurs tiers ont donc décidé augmenter ou d'augmenter la puissance de la version gratuite d' Elementor en fournissant un module complémentaire gratuit à Elementor. Et je vais vous montrer comment cela fonctionne lorsque nous créons le site Web. Et donc, l'un de ces modules complémentaires est Elements hit Elementor pour adultes. Alors installons. Maintenant. Pendant l'installation, faisons défiler l'écran vers le bas. Et vous remarquerez que nous avons plusieurs effets de costume élémentaire, de skin et d'en-tête autocollant pour Elementor. C'est un autre plugin dont nous aurons besoin et je vais vous montrer quel rôle il va jouer. Vous avez plusieurs options pour créer type de site Web de votre choix avec la version gratuite d'Elementor en raison de tous ces modules complémentaires qui vous sont fournis gratuitement. Maintenant que le kit Elements est installé, nous allons l'activer. Je vais donc cliquer sur Activer. Et maintenant, il est installé. Mais pour l'utiliser, si je clique sur Elements get, cela nous redirigera vers un assistant de configuration afin que nous puissions terminer de tout préparer. Comme vous pouvez le constater, nous avons quelques étapes à suivre. Maintenant, voici les configurations que nous pouvons choisir pour les différentes fonctionnalités que nous voulons activer. Maintenant, par exemple , c'est la configuration de base qui est sélectionnée ici. Certains paramètres sont automatiquement désactivés. Nous devons les activer manuellement. Mais si nous cliquons sur Avancé, nous verrons certains de ces paramètres changer. Donc, si nous cliquons sur Avancé, comme vous pouvez le voir, nous avons activé le générateur. Et il en va de même certains de ces paramètres ici. Certains d'entre eux étaient absents quand c'était basique. Mais maintenant que nous avons sélectionné les options avancées, elles sont automatiquement propres. Et cela signifie que lorsque nous aurons besoin d' utiliser le plugin dans le front-end, il sera automatiquement disponible. Cliquons donc sur l'étape suivante. Étape suivante, suivante, suivante , puis enregistrez les modifications. Et nous y voilà. Elements Kid est donc maintenant installé, activé et prêt à être utilisé pour créer l'en-tête. Donc, dans la leçon suivante, commençons par la tête. Je te verrai bientôt. 7. Créer l'en-tête - Le logo: Bienvenue à nouveau. Maintenant que Elements Kit est installé, nous sommes prêts à commencer à créer l'en-tête. Tout d'abord, permettez-moi de me débarrasser de toutes ces publicités. Tu n'en as pas besoin. Et puis vous remarquerez que sur les éléments gardent, nous avons un pied de page d'en-tête. Cliquez donc sur En-tête et pied de page. Et comme aucun en-tête ou pied de page n'a été créé, rien n'est répertorié ici. Je vais donc cliquer sur Ajouter un nouveau, et cette fenêtre contextuelle apparaîtra. Conservons notre en-tête, un nom, notre en-tête croisé, donnons-lui un nom approprié. Et le type est en-tête. Lorsque nous avons créé le pied de page, nous lui avons attribué le type de pied de page et nous voulons qu'il soit visible sur l'ensemble du site. Activons cette option pour nous assurer qu'elle est active et visible sur le site Web. Et puis enregistrons les modifications. Très bien, comme vous pouvez le voir, nous avons commencé à créer une liste de différents en-têtes et pieds de page, et vous pouvez en créer autant que vous le souhaitez. Une fois cela créé, cliquons sur Modifier. La fenêtre contextuelle apparaîtra à nouveau. Et maintenant, cette fois , cliquons sur Modifier contenu sera dirigé vers le front-end où nous pourrons commencer à le créer visuellement avec les outils Elementor. Et nous y voilà. Maintenant, comme vous pouvez le voir, permettez-moi de revenir à cet endroit. Vous remarquerez que la section d'en-tête est divisée en deux colonnes, logo et la colonne de la barre de navigation. Alors allons-y et ajoutons notre logo. Pour en revenir à notre site Web, cliquez dessus pour ouvrir les différentes structures avec lesquelles nous pouvons commencer rapidement. Et nous voulons une double colonne. Cela contiendra le logo, et celui-ci abritera le Napa. Et nous pouvons le redimensionner en conséquence. Alors tirons-le vers la gauche. La prochaine chose que nous voulons faire est cliquer sur ce signe plus ici, et cela révélera les différents éléments que nous pouvons faire glisser sur la page et les utiliser pour créer leur page Web. Permettez-moi donc d'abord de réduire ces panneaux ici. Nous pouvons donc jeter un coup d'œil rapide aux différents panneaux que nous avons car nous avons installé des éléments. Conserve. Remarquez tout de suite que c'est répertorié ici. Avant de l'installer, il n'était pas répertorié ici. Nous n'avions que les panneaux WooCommerce, WordPress et Elementor par défaut . Mais chaque fois que nous installons un module complémentaire créé spécifiquement pour Elementor, il sera répertorié ici et nous aurons accès à ces différents éléments. N'oubliez pas que lorsque nous le sélectionnons avancé au lieu de basique, alors que nous configurions le kit d'éléments, nous activions ces éléments pour les mettre à notre disposition dès maintenant pendant la création du site Web. Permettez-moi donc de résumer cela car nous n'en utilisons aucun pour le moment. Qui souhaite accéder au panneau de base. Et bien sûr, comme je l'ai mentionné, il s' agit d'un panneau élémentaire. La version gratuite, si je pense que nous avons également la version pro, nous ne pouvons pas avoir accès à ces éléments. On ne peut pas les faire glisser si tu essaies. Cette fenêtre contextuelle vous invite à effectuer une mise à niveau. Permettez-moi donc de réduire cela, d'élargir l'onglet de base. Et maintenant, nous pouvons y faire glisser notre image. Et puis supprimez-le momentanément car ce sont les éléments actifs actuellement sur la page. Les paramètres ici ont automatiquement modifié les paramètres de l'image, comme vous pouvez le constater à l'aide du texte ci-dessus. Donc, si je veux à nouveau révéler ces éléments, je peux cliquer sur cette icône ici. Il révélera à nouveau ces éléments. Et si je fais glisser par exemple ce titre, ce sont les colonnes vers cette autre colonne. Notez que les paramètres ont été modifiés pour modifier titre car il s'agit de l' élément qui vient d'être supprimé. Cela signifie donc que c'est l'élément qui est actuellement actif. Si je sélectionne l'image, les paramètres sont modifiés pour modifier l'image. Si je sélectionne la section, les paramètres ont été modifiés pour modifier la section et sont les paramètres de cette section. Permettez-moi donc de supprimer ceci. Nous n'avons pas besoin de cette rubrique non plus, car c'est là que nous l'aurons à Napa. Et en sélectionnant l'image, elle se teinte pour modifier l'image. Et si je sélectionne cela, nous pouvons continuer et télécharger notre logo. Je vais donc télécharger des fichiers, sélectionner des fichiers. Et je veux entrer dans ce dossier que j'ai préparé. Vous le trouverez dans la description ci-dessous. Vous pouvez télécharger tous ces actifs, site Web sur les toitures, les acides. Voici le logo. Et dans ce dossier, vous trouverez également toutes les images que vous utiliserez pour le site Web. Nous avons donc également ces textes ReadMe. Si je l'ouvre, il contient les couleurs que j' ai utilisées , au cas où vous voudriez utiliser couleurs spécifiques que j'ai utilisées. Laisse-moi terminer. Donc, si je double-clique sur ce logo, nous savons qu'il a été téléchargé. Cliquez sur Insérer un média, et c'est parti. Notre logo a maintenant été téléchargé et il est prêt. Je vais cliquer sur Mettre à jour. Et nous pouvons prévisualiser les modifications. On y va. Voici comment ajouter le logo à votre site Web avec Elements Kids. Dans la prochaine leçon, je vais vous montrer comment ajouter la barre de navigation. Nous allons donc voir comment procéder sous peu. 8. 8 Créer l'en-tête Le menu Nav: Bienvenue à nouveau. Il est donc temps de créer la barre de navigation. La prochaine chose que nous devons faire est cliquer sur ce signe plus ici. Et cela révélera une fois de plus les éléments. Et ici, allons-y, saisissons navigation et V. Cela révélera les différents éléments de navigation. Comme vous pouvez le voir, nous avons un menu de navigation, qui comporte une petite icône de verrouillage ici. Ceci est disponible avec Elementor Pro. Mais comme nous n' avons pas Elementor Pro, nous utilisons la version gratuite d'Elementor. Nous pouvons utiliser le menu de navigation Elements Hit, qui est également aussi puissant que celui disponible avec Elementor Pro. Donc, tout d'abord, avant sélectionner cela, permettez-moi de terminer. Réduisez le panneau de base et agrandissez le panneau Pro. Comme vous pouvez le constater, c'est là que se trouve le menu de navigation sous le panneau Pro. Nous ne pouvons donc pas l'utiliser. Réduire cela et élargir les éléments d'en-tête pour enfants, pied de page. Comme vous pouvez le voir, nous avons le menu Elements Kidnap en bas de page. Mais bien sûr, pour obtenir rapidement des éléments trop spécifiques, vous pouvez simplement les saisir rapidement. est ainsi que nous en sommes arrivés là. faisant glisser ça là-dedans. Maintenant, nous avons laissé tomber le napa. Permettez-moi d'abord de cliquer sur Mettre à jour. Bien entendu, étant donné que le NAV est l'élément actif pour le moment, cela indique que les éléments d'édition conservent le menu de navigation. Et l'un des éléments de menu ici est un menu déroulant. Et ceci est censé être une liste de différents menus que nous avons créés dans le backend de WordPress avec des éléments de menu. Et quand je dis « éléments de menu », je veux dire « Accueil » à propos du contact avec le blog. Comme mentionné ci-dessus, ce menu déroulant est censé comporter un menu ou plusieurs menus contenant des éléments de menu. Et nous pouvons le sélectionner pour l'afficher. Nous devons donc revenir au backend de WordPress et créer un menu contenant les différents éléments de menu que nous voulons afficher. Maintenant que la page est enregistrée, je veux cliquer sur ce menu de hamburgers et cliquer sur Quitter. Et si c'est la première fois que vous cliquez dessus, ces options vous seront proposées. Par où voulez-vous sortir, vous aussi ? Je souhaite accéder au tableau de bord WP et l'appliquer. Avant de partir, je dois cliquer sur Mettre à jour. Maintenant, sortons. Très bien, passons maintenant aux menus d'apparence. Nous pouvons maintenant créer notre menu. Comme mentionné, il s'agit d'un menu. C'est ce que nous créons ici. Créez votre premier menu ci-dessous. Donnons-lui donc un nom. Mon menu. C'est bon. Cliquons sur le menu Créer. Et j'ai oublié de dire que c'est censé être le menu principal. Créez un menu. Et après avoir enregistré leur menu, cette zone devient active. Maintenant, remarquez ces textes qui disent Ajouter des éléments de menu dans la colonne de gauche, cette colonne juste ici. Nous devons donc créer des éléments de menu et ils seront affichés ici. Et les éléments de menu que nous voulons afficher sur nos pages. Les éléments du menu peuvent également être des articles de blog ou des articles WordPress. Il peut s'agir de liens personnalisés. Il peut s'agir de catégories que vous avez créées, mais nous souhaitons créer des pages Web en tant qu'éléments de menu. Donc, pour ajouter des éléments de menu à la liste de ces pages ici, nous devons créer des pages Web. Passons à l'intérieur des pages. Et par défaut, nous avons ces deux éléments de menu qui accompagnent chaque nouvelle installation de WordPress. Je vais les sélectionner tous les deux , puis les mettre dans la corbeille. Appliquer. Aucune page trouvée. Je souhaite donc créer une nouvelle page. Donnons-lui un nom. À propos de ceci, consultez notre page À propos. Ne vous inquiétez pas pour tous ces paramètres. Nous les configurerons tout en travaillant sur les différentes pages. heure actuelle, nous voulons publier, car nous créons simplement des éléments de menu qui sont publiés. Revenons en arrière. Il est maintenant répertorié ici. Ajoutons-en un autre. Bloguez, publiez. Retournons ici. Ajoutez-en un autre pour le contact. La page de contact. Retournez ici. Et enfin, tapons. Et enfin, ajoutons une page d'accueil. Home l'a donc publié. Retournons ici. Maintenant, si nous revenons dans les menus d'apparence, remarquerez que nous avons maintenant des éléments de menu que nous pouvons ajouter à notre menu principal. Donc, si je les sélectionne tous et que je les ajoute à l'engrenage du menu, ils le sont, nous pouvons les faire glisser pour les réorganiser. Je veux y déposer celui-ci et le contact devrait être le dernier. Et puis cliquez sur le menu Enregistrer. Notre menu a maintenant été mis à jour. Revenons maintenant à l'intérieur des éléments, chauffez, en-tête, pied de page, cliquez, modifiez, modifiez le contenu. N'oubliez pas que nous avions déposé les éléments du menu de navigation Elements pour enfants ici. Alors maintenant, si nous cliquons sur ce menu déroulant, mon menu apparaîtra, le menu que nous venons de créer. Et nous y voilà. Il affiche les différents éléments de menu que nous avons créés sous forme de pages. Maintenant, nous voulons pousser ces éléments vers la droite. Je vais donc cliquer sur la position horizontale du menu. C'est vrai. On y va. Cliquez ensuite sur Mettre à jour. Prévisualisons les modifications. Et nous y voilà. C'est notre en-tête. Et en gros, c'est ainsi que l'on crée un en-tête. Bien entendu, il s'agit d'un travail en cours. Nous n'avons pas fini de modifier l'en-tête. Nous l'affinerons une fois que nous aurons ajouté l'hétérosexuel. Dans la prochaine leçon, nous verrons comment créer la section des héros. Je te verrai bientôt. 9. 9 Créer la configuration de la page de la section du héros: Bienvenue à nouveau. Il est donc temps de créer la section des héros. Pour en revenir à notre référence, il s'agit d'une section consacrée aux héros qui contient l'image d'arrière-plan, le H1 et l'appel à l'action. Voyons donc comment le créer en revenant dans notre éditeur. Maintenant, c'est la partie où nous étions en train de modifier notre en-tête. Ce n'est pas le même endroit. Nous allons modifier notre section consacrée aux héros. Si je pouvais passer ici très rapidement. Nous avons créé cet en-tête à l'aide du plug-in Elements Keeps Light. Nous avons dû entrer dans le dossier d'en-tête du kit Elements et créer l'en-tête. Et nous allons le faire pour le pied de page. Mais maintenant, pour créer cette section de héros, nous n'allons pas utiliser les éléments. Il avait un plugin de dossier, utilisera simplement Elementor. Donc, pour en revenir ici, nous ne pouvons pas continuer à les modifier à partir d'ici. Donc, ce que nous devons faire, c'est sortir puis rentrer dans les pages intérieures. Et bien sûr, comme il s'agit de notre page d'accueil, nous allons modifier la page d'accueil. C'est là que nous allons créer notre section dédiée aux héros. Je vais donc cliquer sur Modifier. Maintenant, souvenez-vous que j'ai mentionné que nous parlerons de ces configurations ici. C'est donc le moment. C'est donc le moment de le faire. Dans la version précédente d'elemental, ce paramètre de modèle semblait différent. Donc, si vous utilisiez Elementor et que vous n'avez pas vu cette nouvelle version, voici à quoi elle ressemble. Je vais donc cliquer sur ce modèle par défaut et le passer à Elementor en pleine largeur. Parce que nous voulons que la section des héros s'étend du bord de l'écran à l' autre bord de l'écran. Et maintenant, avec Elementor sur toute la largeur sélectionnée. Fermons ça. La prochaine chose que nous voulons faire est d' entrer dans l'Astro Saving. Voici les paramètres de Wordpress. Allons à l'intérieur d'Astro. Si vous souhaitez sélectionner toute la largeur étirée sous la mise en page du contenu, nous avons un contenu encadré, un cadre, pleine largeur contenue et une valeur soulignée sur toute la largeur. Nous voulons que tout le poids soit étiré. Ensuite, pour la barre latérale, nous ne voulons pas que le site Web ou la page Web ait une barre latérale. Nous avons donc une barre latérale droite, barre latérale gauche et aucune barre latérale. Je ne sélectionnerai aucune barre latérale. Ensuite, pour ces éléments, désactivons l'en-tête et footer.com par défaut avec le thème Astra. Parce que nous créons le nôtre, n'oubliez pas que nous avons créé notre propre en-tête créerons également notre propre nourriture si la désactivation doit être mise à jour. Il est maintenant mis à jour. La prochaine chose que nous devons faire est cliquer sur Modifier avec Elementor, ce qui nous redirigera vers le front-end où nous pourrons créer une page. 10. 10 Créer la section du héros: Maintenant que nous sommes ici, notez que nous ne pouvons pas modifier l'en-tête car ce n'est pas la zone où nous pouvons modifier l'en-tête. Nous devons entrer dans la zone d'en-tête des éléments pour modifier l'en-tête. Bien entendu, la première chose à faire est de sélectionner une structure. Nous avons besoin d'une structure à double colonne comme celle-ci. Ensuite, pour cette image en arrière-plan, nous l'ajoutons comme arrière-plan de cette section. Je vais donc cliquer sur cette section. Cela changera pour modifier la section. Et avant de passer à autre chose, je viens de me souvenir d'un outil très pratique que j'ai oublié d'activer. Ainsi, lorsque vous passez la souris sur cette colonne ou sur les colonnes, nous sommes censés remarquer que quelques options supplémentaires apparaissent dans ce coin sous forme de raccourcis. Pour y parvenir, cliquons sur le menu des hamburgers, sur les préférences de l'utilisateur. Poignées d'édition. Activons cela. Et maintenant, lorsque nous survolons cette zone, c'est de cela que je parlais. Très bien, donc en cliquant sur cette section, passons au style, à l' arrière-plan, au type d'arrière-plan. Sélectionnez cela. Nous avons la possibilité de lui donner une couleur, mais nous ne lui donnons pas de couleur. Ce n'est donc qu'un exemple à annuler. Cliquons dessus. Nous voulons lui donner une image. Je vais donc cliquer à l'intérieur de cette image. Maintenant, allons-y et téléchargeons cette image d'arrière-plan. Donc, dans le dossier des actifs du site Web de toiture, cherchons cette image. Je pense que c'était ça. Ouvert. On y va. Insérez un média. Maintenant, vous remarquez que nous ne pouvons pas le voir. Et c'est parce qu'ils n'ont aucun contenu dans la section. La hauteur de la section est déterminée par le contenu qu'elle contient. Et laissez-moi vous montrer ce que je veux dire. Cliquez donc sur ce Plus. Mettons notre cap là-dedans. Ajoutons également quelques textes. Éditeur de texte. Comme vous pouvez le constater, la hauteur de la section augmente désormais au fur et à mesure que nous ajoutons de nouveaux éléments. Ajoutons également un bouton. Lâchez-le lorsque vous voyez cette ligne bleue. Très bien, comme vous pouvez le voir, la hauteur augmente. Mais ce que nous pouvons augmenter avec les paramètres de la section, c'est la marge en haut, en bas et sur les côtés. Donc, si vous allez dans les options avancées pendant que nous éditons cette section, ainsi que le rembourrage. Augmentons donc le rembourrage. Le rembourrage est l'espace entre le bord de section et le contenu à l'intérieur de la section. Dissocions donc ces valeurs afin de pouvoir modifier chaque sac individuellement. Si nous fabriquons le rembourrage supérieur ou 100. Comme vous pouvez le constater, l'écart entre le vieillissement et le contenu en haut de la page s'est accru. Faisons-le également en bas. 100. Nous avons donc maintenant 100 données. Mais faisons-en 200, 200. Et pour les 200 meilleures mises à jour disponibles, nous allons avoir un aperçu des modifications. Alors on y va. Mais nous voulons que cela ressemble à ceci. Alors, comment y parvenons-nous ? Donc, pour en revenir ici, tout d' abord, changeons la position de cette image. En sélectionnant à nouveau la section, entrez dans le style du poste. Donnons-le. Essayons centre, centre, et c'est parti. C'est donc là que c'est censé être. Pour la taille. Choisissons la couverture et voyons à quoi elle ressemble. Disons donc cette mise à jour. L'image couvre maintenant toute la section Ici. Donc, si nous revenons ici choisissons Par défaut et que nous le mettons à jour, laissez-moi vous montrer à quoi cela ressemble. Prévisualisons les modifications. Dans. C'est le problème que nous avons maintenant. Laissez un espace blanc, alors assurez-vous que nous avons cet ensemble à couvrir afin qu'il puisse couvrir tout l'arrière-plan. Mettez-le à jour. Encore une fois, prévisualisons les modifications. Et nous y voilà. Voici donc comment préparer l'image de fond des sections de héros. Dans la leçon suivante, nous allons continuer à travailler sur le bloc de texte et tout le reste. Je te verrai donc bientôt. 11. 11 Créer la section du héros: Je vais juste prendre ça, copier, ça. Allez ici, sélectionnez ce contenu. Je vais le coller ici. Mais bien sûr, vous devez maintenant taper vos propres textos. Ce sont des experts fiables en toiture. Ensuite, passons au style et changeons la couleur en jaune. Mettez-les à jour. Permettez-moi donc changer ce fichier ici et de prendre cette couleur jaune. Et ici, je vais coller le jaune dedans et mettre à jour la page. On y va. Mais vous remarquerez maintenant que cette rubrique ne ressemble pas à ce que nous avons ici. Cela semble avoir un gradient. Alors, comment y parvenir avec un autre plugin qui est une extension d'Elementor. Alors revenons ici. Et je ne veux pas quitter cette page. Permettez-moi donc de passer à un nouvel onglet et d'accéder au tableau de bord. Passons à Plugins, ajoutez-en de nouveaux. Et le plugin s'appelle pi out net add-ons for elementary. Ensuite, le rachat, les extensions nettes pour Elementor. C'est une extension de l'élémentaire, tout comme les éléments gardent la lumière. Nous allons l'activer. Ils ont des paramètres. Maintenant, comme vous pouvez le constater, il comporte également de nombreux éléments, tout comme les éléments, les enfants. Donc, si nous revenons ici et actualisons, c'est Control R, et sélectionnez ce texte. Si nous rentrons à l'intérieur. Tout d'abord, vous remarquerez que nous avons maintenant ces modules complémentaires PAF net pour Elementor. Cela signifie qu'il est désormais disponible. Et si nous sélectionnons cette option et réduisons tous ces panneaux, comme vous pouvez le voir ici. En sélectionnant ces textes, passons au style. Et vous remarquerez que nous avons un texte dégradé parfait. Nous pouvons donc l'activer. Et maintenant, nous pouvons sélectionner les deux couleurs que nous voulons utiliser comme couleurs par défaut. Permettez-moi donc de passer ici et choisir cette couleur comme l'une des couleurs, ce jaune. Laisse-moi le mettre là. Pour cela. Faisons en sorte qu'il soit de cette couleur. Comme vous pouvez le constater, nous commençons à ressentir ces effets. La seule chose que nous devons faire est de modifier ce texte. Et pour cela, examinons la typographie Tidal. Changeons la famille de polices pour surveiller maman Sarah. Et augmentons le poids à environ 900. On y va. Augmentons également la taille. experts en toiture fiables mettent cela à jour. Changeons la couleur de ce texte en le sélectionnant. Cela change pour modifier le texte, le style de l'éditeur, la couleur, le blanc. Mettez-le à jour. Prévisualisons les modifications. On y va. Cela commence donc déjà à prendre forme. La seule chose que nous devons faire est de travailler sur le bouton. Mais avant cela, voyons comment modifier cette famille de polices. en revenir ici, pendant que cela est toujours sélectionné, passons au type de style, à la typographie, à Montserrat. Montserrat. Mettez-le à jour. Voilà, nous y sommes. Et pour changer la couleur du bouton, sélectionnez d' abord le bouton. Ces modifications concernent le bouton Modifier. Nous pouvons modifier ce que le bouton nous dit. Et nous pouvons modifier l'URL. Ainsi, lorsqu'ils cliquent sur ce bouton, ils doivent être redirigés vers la page que nous indiquons ici. Donc, par exemple www.google.com. Alors tout d'abord, mettons-le à jour. Et voyons un aperçu des modifications. Très bien, donc lorsque nous les survolons, comme vous pouvez le voir en bas, l'URL est google.com. Et lorsque nous cliquons dessus, nous accédons à google.com, revenons en arrière. Si vous souhaitez l' ouvrir dans un nouvel onglet, vous pouvez cliquer sur cette roue dentée ici , puis ouvrir une nouvelle fenêtre. Cela ouvrira la page dans un nouvel onglet. Prévisualisez donc que si nous cliquons sur « Contactez-nous », cela s'ouvrira dans un nouvel onglet et nos pages seront intégrées. Maintenant, tant que le bouton est toujours sélectionné, passons au style. Comme vous pouvez le constater, c' est l' abaissement du bouton de couleur qui révèle que nous n'avons que deux options ici. Pour le type de fond de couleur. Nous pouvons le remplacer par. Nous pouvons le remplacer par ce jaune. Laisse-moi copier ce jaune. Cliquez n'importe où dans cette zone pour supprimer cette fenêtre contextuelle. On y va. Et en vol stationnaire, nous voulons qu'il soit blanc. Donc, dans son état normal, il est jaune. Sur la couleur du survol. Nous voulons qu'il soit blanc. Alors laissez-moi cliquer ici. En vol stationnaire, il est blanc. Mais tant qu'il est encore en dessous, le texte devrait passer au noir. Juste comme ça. Très bien, changeons donc également le rayon de la bordure à dix. Et cela le rend un peu plus rond dans les coins. Nous devrions également augmenter la taille du bouton en augmentant le rembourrage. Le rembourrage, réduisons ça, cela réduira le bouton. Mais maintenant, pour la gauche, donnons-en 50 pour le trajet, 50 pour le sommet. Donnons-lui peut-être 20, les 20 derniers. Cela rend le bouton beaucoup plus grand, Theta. Et voyons un aperçu des modifications. Alors on y va. Lorsque vous passez la souris, elle devient y. Et si nous cliquons dessus, l'URL et les fournisseurs s' ouvrent. Voici donc comment créer la section des héros. Dans la leçon suivante, nous verrons comment créer ces demandes et assistant de prise de rendez-vous. Je te verrai bientôt. 12. 12 Faire de l'en-tête collante: Bienvenue à nouveau. Il est donc temps de commencer à travailler sur ce livre, un assistant de prise de rendez-vous. Revenons donc à notre référence, cette demande, un assistant de prise de rendez-vous. Mais avant cela, je viens de me rappeler qu'il y a une chose importante que nous avons oublié de faire. Remarquez donc que lorsqu'il commence à ramper, comme je l'ai mentionné, l'en-tête reste en haut. C'est ce que nous appelons un en-tête autocollant. Il permet à l'utilisateur d'avoir accès au menu, quelle que soit la partie du site Web ou de la page Web où il se trouve. C'est donc très important pour l'expérience utilisateur, l'interface utilisateur et l'UX. Voyons donc comment rendre l'en-tête collant et ajouter ces effets de survol , car je pense que nous avons oublié de le faire. Oui, nous l'avons fait. Donc, en cliquant sur ce menu de hamburgers, quittez. Revenons au pied de page d'en-tête du kit Inside Elements. Cliquons sur Modifier avec Elementor pour le modifier directement dans le front-end. Et nous y voilà. Alors maintenant, tout d'abord, allons-y, cliquons sur ce menu de navigation pour entrer dans le style. Je souhaite réduire l'enveloppe du menu et ouvrir un style d'élément de menu. Et maintenant, vous remarquerez que sous la typographie l'état normal survole et est actif. Dans son état normal, il est censé être noir, mais en survol, il est gris et nous voulons qu'il soit jaune. Permettez-moi donc d'y revenir. Copiez cette couleur jaune. Sélectionnez des éléments comme Scholar, collez-les dedans. Maintenant, lorsque nous le survolons, il est jaune. Cela garantit la cohérence des couleurs de la marque. Et lorsqu'il est actif, nous voulons également qu'il soit jaune. Je vais donc le coller là-dedans. Mettez-le à jour. Passons en revue les modifications. On y va. Une autre chose que je souhaite faire est de faire de notre logo un lien vers la page d'accueil afin que lorsque quelqu'un clique sur le logo, il soit redirigé vers la page d'accueil. Permettez-moi donc de récupérer le lien de ma page d'accueil. Copiez ça. Sélectionnez l'image elle-même. Et ici, sous le lien du contenu, sélectionnez une URL personnalisée. Et je vais y coller le lien de ma page d'accueil parce que c'est mon URL. Donc, si je pouvais simplement faire glisser ce navigateur vers le bas comme ça. Le lien de ma page d'accueil est www.mydomain.com. Assurez-vous donc qu'il s'agit de votre domaine .com. Permettez-moi de le faire glisser à nouveau vers le haut, comme ça. Maintenant que c' est comme ça, mettons-le à jour. Prévisualisez les modifications. Maintenant, lorsque vous passez la souris sur l'image, comme vous pouvez le voir, elle se transforme en icône en forme de main pour indiquer que vous pouvez cliquer dessus. Donc, à l'heure actuelle, lorsque nous cliquons sur ce lien, nous ne serons pas redirigés vers la page d'accueil que nous avons sélectionnée comme page d'accueil. Nous serons redirigés vers la page d'accueil par défaut définie par WordPress car nous n'avons pas défini de page d'accueil spécifique comme page d'accueil et laissez-moi vous montrer ce que je veux dire. Donc, si je clique dessus, nous redirigés vers la page d'accueil par défaut de HelloWorld, mais nous voulons être redirigés vers cette page d'accueil. Laissez-moi cliquer sur cette page d'accueil. Nous voulons être emmenés ici. Alors, comment définir la page d'accueil ? Vous revenez dans notre tableau de bord ? Laisse-moi juste y aller. Les paramètres du tableau de bord, la lecture de la page d'accueil s'affichent. Donc, ce que nous voulons faire, c'est sélectionner une page statique, puis une page d'accueil, puis une page d'accueil. C'est notre page. Voici une liste de toutes les pages que nous avons. Enregistrez ensuite les modifications. Maintenant, si nous passons au front-end et disons que nous sommes dans la page À propos. Si nous cliquons, le logo sera retiré. La page d'accueil que vous avez sélectionnée car son URL y pointe. Mais comme vous pouvez le constater, notre en-tête n'est toujours pas collant. Alors, comment le rendre collant ? Comme sur notre page de référence ici. Maintenant, pour faire la tête de Sticky, nous allons devoir utiliser ce plugin que je vous ai montré un peu plus tôt, qui est également une extension d'Elementor et on appelle effets d'en-tête collants pour Elementor. Donc, en entrant dans notre tableau de bord nous cliquons simplement sur Tableau de bord. Passons aux plugins. Ajoutez Nouveau et saisissez un en-tête autocollant. Ce sont des effets d'en-tête collants pour Elementor installés. Maintenant, activons-la. Très bien, et maintenant c'est installé. Hein ? Revenons maintenant à l'endroit où nous étions en train de modifier l'en-tête. Si j'appuie sur Ctrl R pour actualiser la page, ou si je clique simplement avec le bouton droit de la souris et que je la recharge. Maintenant, si nous sélectionnons l'en-tête et que nous y accédons ou que nous y accédons en mode avancé, comme vous pouvez le voir, des effets d'en-tête rémanents apparaissent pour Elementor. Maintenant, développons et activons-les. Maintenant, bien sûr, cela révélera plusieurs paramètres ici, mais le seul paramètre dont nous avons besoin est de modifier l'arrière-plan de l'en-tête une fois que nous commençons à faire défiler l'écran. Alors avant de le faire, laissez-moi vous montrer ce que je veux dire. Mettons-le à jour avant d' activer cette couleur d'arrière-plan. Maintenant que c'est activé, laissez-moi simplement passer au front-end. Si nous commençons à faire défiler la page. Nous n'avons pas encore assez de contenu à faire défiler vers le bas pour que je puisse vous montrer ce que je veux vous montrer. Alors tout d'abord, permettez-moi de modifier rapidement cette page pour ajouter du contenu supplémentaire en dessous. Permettez-moi donc d'ajouter une section ici. Permettez-moi de lui donner une très grande marge au sommet, environ 200. Permettez-moi d'y ajouter peut-être quelques textes. Mettez-le à jour. En fait, vous pouvez déjà voir ce que je veux vous montrer. Prévisualisons donc cette page. À présent. Si nous faisons défiler la page, comme vous pouvez le voir, l'en-tête est désormais collant, mais il n'a pas d'arrière-plan. Et c'est ce que nous voulons régler, car vous ne pouvez pas voir le logo lorsque l' arrière-plan est transparent. Donc, ce que nous voulons faire, c'est revenir à l'endroit où nous éditons l' en-tête qui se trouve ici. Et tant que nous en sommes encore à effets d'en-tête adhésifs avancés, les effets des effets d'en-tête adhésifs avancés, les effets d'arrière-plan sont activés, ce qui permet de choisir la couleur de l' arrière-plan après le défilement. Et nous voulons qu'il soit blanc. Alors mettez-le à jour. Donnons-en un aperçu. À présent. S'il accède à la page d'accueil et fait défiler la page, comme vous pouvez le voir, l'arrière-plan est blanc et tout ce qui se trouve sur l'en-tête est visible. Donc, en gros, c'est ainsi que l'en-tête reste collé. Dans la prochaine leçon, nous verrons comment créer leur livre. Un rendez-vous avec, je te verrai bientôt. 13. 13 Créer l'assistant de rendez-vous Installer Formi: Bonjour, bon retour. Il est donc temps de créer la demande, un rendez-vous avec ce résultat ici même. Et pour cela, nous devrons installer un plugin de formulaire appelé Terminator. Il existe maintenant plusieurs autres plug-ins de formulaires sur le marché. Mais j'adore For Me non plus, car la plupart des fonctionnalités géniales qu'il propose gratuitement ou premium ou payantes avec d'autres plug-ins étrangers sans perdre de temps. Allons dans le tableau de bord. Je veux juste aller au Roof COE. Tableau de bord. Plugins, ajoutez-en de nouveaux. Cherchons à le former. Et on y va. C'est par WP MU dev. Il compte plus de 300 000 installations et, comme vous pouvez le constater, il a obtenu plus de 1 000 notes cinq étoiles. Installez. Maintenant, allons-y et activons. Et nous y voilà. J'ai retiré ce menu juste ici sur la gauche. Pour beaucoup, ils devraient se situer vers le bas. Nous y voilà donc. Donc, si je clique pour moi, aucun des deux ne sera redirigé vers cette partie où vous aurez un résumé de toutes vos soumissions de formulaires, de vos quiz sur les missions, etc. 14. 14 Créer l'assistant de rendez-vous Créer un formulaire: Et nous avons également ces raccourcis pour créer un formulaire ou créer un sondage. Mais ce qui nous intéresse pour le moment, c'est la création d'un formulaire. Je vais donc créer. Nous avons différents formulaires prédéfinis avec lesquels nous pouvons rapidement commencer. Mais comme le nôtre est personnalisé, cliquons sur Blank et continuons. Donnons-lui un nom. Rendez-vous. Créons. Et maintenant , nous pouvons commencer à insérer les différents champs que nous voulons avoir sur notre formulaire. Ce sont les différents domaines. Commençons donc par le service. De quel service avons-nous besoin ? De quel service le client a-t-il besoin ? Alors, bien sûr, il s'agit maintenant d'un menu déroulant. Je vais rentrer ici. Nous allons insérer un champ. Et l'option du menu déroulant s' appelle sélectionner, comme vous pouvez le voir ici. Je vais choisir d' insérer des champs et cela affichera les paramètres pour ce type de champ de formulaire spécifique. Bien sûr, cela ne s' appelle pas un verrou. Nous appellerons cela un service. Type de service C'est l'espace réservé, c'est l'étiquette ou le champ du formulaire, comme ce service ici pour étiqueter ces Brownfield. Il faut également aller ici et préparer les options. Donc, réparations de toitures, c'est la première option du menu déroulant. Remplacement du toit. Et je pense que pour l'instant, allons-y. Mais bien sûr, vous allez maintenant saisir les services spécifiques dont vous disposez. Ensuite, si vous souhaitez rendre ce champ obligatoire, nous pouvons accéder aux paramètres. Pour l'instant, c'est facultatif, mais nous pouvons le définir selon les besoins, puis définir le message que les utilisateurs verront s'ils ne le ressentent pas. type d'enquête est donc requis avec un point d'exclamation. Très bien, revenons aux étiquettes. Ajoutons un espace réservé. Le temps de service. Nous pouvons maintenant cliquer sur Appliquer. Maintenant, si nous le prévisualisons, il propose ce type de service dans un menu déroulant. Sélectionnez un type de service, puis la liste des options que nous avons préparées. Très bien, fermons ça. Ensuite, publions ce formulaire. Maintenant que nous l'avons publié, cette fenêtre contextuelle apparaîtra avec un code court. Et c'est le court code que nous allons coller sur notre page pour afficher le formulaire. Alors copiez-le. Nous avons enchéri avec succès. Et juste au cas où vous auriez fermé ce formulaire, vous pouvez toujours obtenir le code court à partir d'ici en y accédant tout en modifiant le formulaire. Demandez des rendez-vous, cliquez sur cette roue dentée, copiez le code court. Le shortcode a copié le succès pour moi. Maintenant, si je clique avec le bouton droit sur ce lien ouvert dans un nouvel onglet, puis que je passe à ce nouvel onglet. Nous pouvons donc ouvrir la page puis cliquer sur Modifier avec Elementor. Nous pouvons donc commencer à modifier la page avec Elementor. Si je fais défiler la page vers le bas, tout d' abord, laissez-moi m'en débarrasser. Je peux ajouter une nouvelle section à double colonne. Et dans cette partie, cliquez sur Plus. Et puis tapez ici un code court ou simplement court. Il affichera un code court. Faites glisser ce code court et déposez-le dedans. Et tant qu'il est toujours actif, cela se lit comme un edit trod code. Nous pouvons maintenant coller ici le code court que nous venons de copier depuis le formulateur. On y va. Ce code court y a été collé. Et comme vous pouvez le voir maintenant, il est affiché sur le front-end. ne nous reste plus qu'à créer ces autres champs pour l'instant . Et nous aurons notre formulaire, puis nous styliserons notre formulaire. Je vais rentrer ici. Mettons-le à jour. Prévisualisons les modifications. Donc, en faisant défiler l'écran vers le bas, on y est. Ne t'inquiète pas. Vous allez bientôt ressembler à ça. 15. 15 Créer l'assistant de rendez-vous Ajouter tout le F: Et bon retour. Maintenant que nous avons affiché notre formulaire dans le frontend, il est temps d'ajouter le reste des champs du formulaire. Revenons donc dans notre tableau de bord, cliquons sur Insérer un champ, et nous pouvons maintenant en sélectionner quelques-uns. Nous avons donc besoin du nom de l'utilisateur, de son adresse e-mail, de son téléphone, de sa zone de texte. Je pense que c'est suffisant. Alors, insérez le champ, et nous y sommes. Avant même de procéder à une quelconque personnalisation, nous allons la prévisualiser. Et nous y voilà. Voilà à quoi cela devrait ressembler. Ils choisiront le type de service dont ils ont besoin. Ils fourniront leur nom, leur adresse e-mail, leur numéro de téléphone afin que nous puissions les contacter et toute information supplémentaire qu'ils souhaiteraient que nous ayons en tête. Ensuite, une fois qu'ils ont demandé un rendez-vous avec tous ces détails, nous pouvons les contacter par téléphone ou par e-mail et fixer le rendez-vous. Dans cet esprit, fermons-le, puis mettons à jour pour fermons-le, puis mettons valider ces modifications. Très bien, maintenant c'est enregistré. Prévisualisons les modifications apportées au front-end. Si j'actualise cette page puis que je prévisualise les modifications. Oui, nous y voilà. La prochaine chose que nous voulons faire est donc de mettre à jour l'apparence du formulaire manière cohérente ou cohérente avec l'image de marque du site Web, les couleurs de la marque. heure actuelle, lorsque nous le survolons, il est bleu, et ce sont les couleurs par défaut qui seront utilisées lors du formage ultérieur. Nous devons également modifier certaines de ces informations ici, car vous souhaiterez peut-être utiliser votre propre code de pays pour le numéro de téléphone et tout le reste. Revenons donc à l'intérieur, dans le tableau de bord. Cliquons sur le nom. Nous pouvons donc le remplacer par votre nom, et ce pourrait être Alex Cross. Nous pouvons également en faire un champ obligatoire. Le nom est obligatoire. Ensuite, appliquons-le. Prévisualisons-le pour le moment. Ce champ est obligatoire. Ce champ est également obligatoire, mais il n'est pas obligatoire, comme vous pouvez aide de cet astérisque. Alors maintenant, si nous disons Envoyer un message, vous remarquerez que nous recevons ces messages personnalisés que nous avons saisis. Le nom est obligatoire, le type de services requis. Mais ceux-ci ne signalent aucun problème. Donc, pour que cela soit cohérent, changeons cela en apostrophe. L'adresse e-mail est également requise. Legs sur company.com. Cela le rend également obligatoire. Votre adresse e-mail est requise. Le numéro de téléphone peut être facultatif. Applique ça. Et puis pour la zone de texte. Tout d'abord, changeons. Il contient deux informations supplémentaires. Et pour l'espace réservé, rendez-vous. Très bien, alors laissez-nous un aperçu. Comme vous pouvez le constater, informations supplémentaires, que voudriez-vous que nous gardions à l'esprit alors que nous nous préparons à vous rencontrer ? Numéro de téléphone Tous ces détails sont personnalisés par nos soins. Très bien, alors mettons-le à jour. Et maintenant, les modifications ont été enregistrées. Revenons donc au front-end la page où nous l'éditons. Sélectionnez n'importe où dans l'élément de code court. Nous pouvons actualiser la page ou simplement cliquer sur Appliquer pour appliquer les modifications apportées au backend. Il est maintenant mis à jour. Prévisualisons les modifications. Très bien, et nous y voilà. Donc, en gros, voici comment ajouter tous les champs pour le formulaire de rendez-vous. Dans la prochaine leçon, nous verrons comment personnaliser son apparence, ses couleurs, afin qu'il soit cohérent avec le reste du site Web. Je te verrai donc bientôt. 16. 16 Créer l'assistant de rendez-vous L'application du formulaire: Bienvenue à nouveau. Comme vous pouvez le constater, lorsque je survole ces champs, ils sont bleus. Et ce n'est pas ce que nous voulons car cela ne correspond pas aux couleurs de notre marque. Donc, pour en revenir à l'intérieur, ce que nous voulons faire, c'est aller dans le champ Apparence pendant que nous sommes encore en train de modifier le formulaire de demande de rendez-vous . Et si je pouvais retourner aux champs, au terrain, si nous descendons ici, nous avons aussi ce bouton ici qui nous mènera à l'endroit suivant, savoir cette partie. Donc, si je clique sur Apparence, vous remarquerez maintenant que cette partie est surlignée. Si je fais défiler la page vers le bas, vous remarquerez que nous avons un comportement ici et qu'ici, nous avons également un comportement. Donc, en gros, nous suivons ces étapes pour terminer la configuration de notre formulaire. Maintenant que nous en sommes à l'apparence intérieure, nous voulons tout d'abord changer. Voici un aperçu de notre formulaire. Il s'agit d'un aperçu de la façon dont le formulaire apparaîtra. Donc, si je sélectionne des drapeaux qui éliminent les bordures du champ, si je sélectionne en gras, cette ligne est mise en gras. Le défaut de paiement est pénible. Audacieux. C'est celui que j'aime bien. En fait, nous avons aussi du matériel et aucun. Je vais donc opter pour le gras. Nous pouvons sélectionner celui que vous souhaitez. À présent. C'est pour le style de design. Juste ici. Nous avons également la possibilité de changer les couleurs. Donc, pour le moment, nous utilisons les couleurs par défaut fournies, pour moi non plus, mais je veux sélectionner un costume. Et cela révélera ici plus de paramètres avec lesquels nous pourrons jouer pour créer la formule exactement comme nous le souhaitons. Commençons donc par un bouton de soumission. Donc, à l'heure actuelle, avant de changer quoi que ce soit, le bouton d'envoi est de couleur bleue et la couleur du survol est également bleue. Clôturons donc ça. Attendez, si nous l'avons prévisualisé, notez que notre formulaire est désormais en gras. Il a des bordures aux couleurs vives. Passons donc au bouton d' envoi. Élargissez cela. Et la couleur de fond est le bleu. Donc, si je pouvais passer ici et choisir cette couleur jaune, cliquez dessus pour afficher cette partie, double-cliquez dessus et collez-la dedans. Si nous le prévisualisons. Maintenant, de couleur jaune, mais en survol, c'est bleu. Je veux donc changer cela. C'est la valeur par défaut plutôt que de vouloir être de cette couleur. Alors maintenant, si nous l'avons prévisualisé en survolant, mangeons une couleur foncée , ou mieux encore, , ou mieux encore, utilisons les couleurs réelles que nous voulions utiliser. Je vais donc en faire un bleu très foncé qui ressemble au noir. Mettez-le à jour. Nous n'avons pas vraiment besoin de changer la couleur de mise au point, mais pour des raisons de cohérence. Très bien, alors maintenant, nous allons y jeter un coup d'œil. Génial Donc j'aime bien son apparence. Fermons cela et mettons-le à jour car vous avez des modifications inédites. Maintenant, c'est enregistré. Très bien, la prochaine chose que nous voulons faire est de travailler sur la couleur de survol des champs. En fermant cela, souvenez-vous de ce menu déroulant, ce champ, le type de ce champ est un champ de sélection. Retourner dans les champs. N'oubliez pas que l' insertion a échoué et que le menu déroulant était un type de saisie sélectionné. Donc, pour en revenir ici, apparence, costume. Nous avons le type d'entrée sélectionné ici. Et la couleur de bordure par défaut est ce gris foncé. Donc, si j'ouvre ce gris foncé dans l'état par défaut lorsque je survole, il est bleu. Donc, ce que je veux, c'est le rendre plus léger. Alors cliquez dessus et rendons-le gris clair. Prévisualisez-le. Maintenant, comme vous pouvez le voir, le gris est plus clair que cet autre gris. Je veux toujours le rendre plus léger qu' il ne l'est actuellement. Permettez-moi donc de vous donner un aperçu de notre tableau, et j'ai aimé ce niveau de note. Très bien, maintenant, survolez. Changeons la couleur de la bordure en jaune. Collez-le dedans. Et nous allons en avoir un aperçu. À celui qui mangera ce jaune. ce qui concerne la mise au point, nous voulons également que ce soit jaune. Mais tu peux en faire la couleur de ton choix. Tu te souviens de ça ? Ensuite, pour la couleur de l'icône, nous voulons également la rendre jaune. Mais tu peux le faire, faisons-en cette couleur noir foncé. Ouaip. Comme ça. En vol stationnaire. Il faut que ce soit de cette couleur foncée. Même. Et également par défaut, c'est l'icône dont nous parlions. Mais allumée, elle est toujours noire. Je veux garder la même chronique. Très bien, alors quoi d'autre ? Couleur du texte, la couleur du texte semble correcte. Travaillons maintenant sur cette couleur du menu déroulant. avons donc terminé avec la liste déroulante de sélection. Le conteneur doit être une bordure de conteneur. Faisons en sorte qu'il fasse si sombre. légèrement plus foncé. Oui, c'est un gris légèrement plus foncé. Et je pense que tout le reste devrait rester tel quel. Clôturons donc ça. Tout d'abord, permettez-moi de mettre à jour cela afin que nous puissions enregistrer les modifications. C'est enregistré. Ensuite, travaillons sur le reste des champs. Je veux donc tout d'abord copier ce gris clair sur le reste des champs. Retournons ici. Sélectionnez à l'intérieur. C'était triple C, E. Au lieu de le copier. Passons à la zone de saisie et de texte. Ces autres types de champs sont des entrées. Et voici la zone de texte. Ces trois éléments sont des entrées. La couleur de la bordure par défaut doit donc être triple C, E, C, C, D, C, D, C, D. Laissez-moi la copier. Il n'est pas nécessaire de le copier. Maintenant, ils ont tous cette couleur, mais maintenant nous voulons les rendre jaunes en vol stationnaire. Je vais donc copier ces vêtements jaunes qui flottent. Concentrez-vous. Nous voulons également que ce soit le jaune correspondant à l'erreur. Laissons-la à la couleur par défaut car les messages d'erreur sont généralement de couleur rouge. Nous allons donc en donner un aperçu. À présent. C'est parti. Donc, concentrez-vous. de couleur dorée, de couleur jaune, sorte qu'il se distingue et que l'utilisateur est de couleur dorée, de couleur jaune, de sorte qu'il se distingue et que l'utilisateur puisse voir où il tape. Donc, une fois que nous l'aurons mise à jour, passons au front-end. Nous allons sélectionner le formulaire n'importe où dans le code court qui indique les conditions appliquées. Prévisualisons maintenant les modifications. Défilement vers la droite vers le bas. Comme vous pouvez le constater, l'apparence des formulaires est désormais mise à jour comme vous le souhaitez. Maintenant, voici comment créer et personnaliser le formulaire à l' aide du formulateur. Dans la leçon suivante, nous verrons comment modifier la mise en page et la pousser vers le haut pour qu'elle apparaisse de manière stylistique dans la section des héros. Et en même temps, nous travaillerons sur cette section de toiture redéfinie. éditons donc officiellement la section du corps. Je te verrai bientôt. 17. 17 Créer le toiture de la section du corps redéfini: Salut, bon retour. Maintenant que nous en avons terminé avec le formulaire de rendez-vous, il est temps de commencer à remplir la section du corps et nous allons commencer par cette zone ici, avec ce bloc de texte. Nous voulons créer quelque chose comme ça. Donc, ce que je veux faire, c'est juste prendre ça. Rentrons ici. C'est ici que nous éditons la page de destination. Et ici, bien sûr, il s'agit d'une section à double colonne. Nous avons donc cette chronique. Si je vais ici, je peux juste trouver un titre. Et maintenant, comme c'est l'élément actif ici, cela indique « Modifier le titre , et je peux sélectionner Supprimer, puis le coller dedans. Je veux aussi y retourner et récupérer ce texte. Maintenant, je copie cette taxe, mais bien sûr, vous devrez utiliser votre propre texte personnalisé. C'était juste un texte que j'ai trouvé lors la création du site Web de référence. Très bien, alors revenez ici et je voudrais cliquer sur cette icône ici pour ajouter un élément d'éditeur de texte. Déposez-le lorsque cette ligne bleue apparaît, puis cliquez à l'intérieur et collez ce texte dedans. Ou maintenant, pour votre cas, vous allez taper ce que vous voulez y taper. Maintenant, mettons-le à jour. Et avant de poursuivre, vous remarquerez que nous étions en train de modifier la famille de police de chaque élément de texte ou de typographie dans la section des héros. Et nous ne voulons pas continuer à modifier la topographie individuellement. Pour chaque élément, nous pouvons simplement définir une police globale que chaque nouveau texte adoptera chaque fois que nous ajouterons de nouveaux textes. Nous le faisons donc en accédant à ce menu de hamburgers, paramètres du site, à la police globale. Créons donc la police principale ou les polices de titre, Montserrat. Et maintenant, vous remarquerez que cela a changé pour Montserrat. Cliquez n'importe où ici pour vous débarrasser de ce moniteur secondaire AX. Cliquez n'importe où là-dedans. Pour les textes, That's the body text comme celui-ci, nous voulons également que ce soit Montserrat. Cela a changé un Montserrat et aussi pour l'accent. Mettez-le à jour. Nous pouvons également prédéterminer l'épaisseur de police que nous voulons appliquer à nos titres. J'ai donc voulu en ajouter 800. 800, c'est bien. Mettez-le à jour. Ainsi, chaque fois que nous ajoutons type de texte sur les pages Web, il y aura plus d' interactions par défaut. Donc si je ferme ça, revenez en arrière. Laisse-moi juste terminer. Donc maintenant, si je fais glisser un titre ici, c'est Montserrat par défaut. C'est ce que nous voulions. Nous n'avons donc plus besoin de revenir aux paramètres pour les modifier. Quel téléphone taquiner. Cela fait, augmentons tout d'abord le remplissage en haut du texte, l' espacement entre le texte et le bord de cette colonne en haut. Je vais donc sélectionner la colonne « rembourrage avancé ». Poussons-le vers le bas. Nous augmentons simplement l'espacement au-dessus. Réduisons-le un peu jusqu'à 90. Augmentons également le rembourrage gauche. Peut-être après ce moment. Très bien, comme ça. Maintenant, pousser cela vers le haut revient en fait à pousser la colonne vers le haut. Nous allons donc sélectionner cette colonne de manière avancée. Brisons la marge puis remontons. Poussons-le vers le haut comme ça. Jusqu'à présent, nous voulons. Passons donc à environ 20 ou deux tiers comme ça. Et puis, tant que nous sommes encore là, passons au style. Tant que cette colonne est toujours sélectionnée, style, arrière-plan, je souhaite la rendre blanche. On y va. Nous voulons également revenir à la version avancée. Et donnons-lui un rembourrage de 20 sur tout le pourtour. Disons 30 ou 40. Enfoncez tout à l'intérieur comme ça. Et ensuite, donnons-lui un rayon de bordure. Rayon de bordure de 20. Cela lui donne ce coin arrondi sur tout le pourtour. Ensuite, mettons à jour la page. Prévisualisez les modifications. Et nous y voilà. Voilà à quoi ça ressemble. Faisons quelque chose à ce sujet. Ou est-ce que ça a l'air ici ? Possède ces couleurs. Donc, pour revenir ici, sélectionnez ce style. Laisse-moi prendre cette couleur foncée. Tant que c'est toujours la couleur de texte de style sélectionnée, collez-la dedans. Et passons à la typographie, augmentons la taille. Je pense que je veux que ce soit 900, comme ça. Très bien, mets-ça à jour. Prévisualisons les modifications comme ça. Alors on y va. Voici donc comment créer la section redéfinie de la toiture. Je crois que j'aime bien son apparence. La prochaine chose que nous voulons faire est créer cette large section de choix. Nous verrons donc comment procéder dans la prochaine leçon. bientôt. 18. 18 Créer la section du corps Pourquoi nous choisir: Bienvenue à nouveau. Il est donc temps de créer la section y Choices. Cette section. Revenons donc dans notre éditeur. Et ajoutons une nouvelle section. Et bien sûr, il s'agit d'une section à colonne unique. Oui, il s'agit d'une section à colonne unique. Donc, colonne unique. Et maintenant, bien sûr, remarquez que le fond est noir foncé, bleu marine foncé. Donc je vais juste le prendre. Copie. Sélectionnez cette section, entrez style, le type d'arrière-plan, la couleur. Maintenant, collez-le dedans. Maintenant, c'est cette terre. N'oubliez pas que la hauteur d'une section est déterminée par son contenu . Ajoutons donc du contenu. Et vous remarquerez que nous avons ici cette intersection qui est de couleur blanche et qui comporte deux colonnes. Voyons donc d'abord comment ajouter une intersection. Donc, pour revenir ici, je vais cliquer sur Plus, puis nous aurons une intersection. Je vais donc le déposer là-dedans. Par défaut, il comporte deux colonnes. Et c'est exactement ce dont nous avons besoin, car il y a ce bloc de texte et il y a l'image. Mais avant de travailler sur cette partie, saisissons-la également. Pourquoi choisir d'aller plus vite ? Nous pouvons simplement dupliquer cette rubrique. Je vais donc passer la souris dessus, puis cliquer sur ces deux doublons. Ensuite, je vais le faire glisser et le déposer au-dessus de l'intersection. Parce que c'est de la même couleur que le fond. Tu peux le voir. Je vais donc le sélectionner. Tant qu'il est toujours sélectionné, comme vous pouvez le voir, il s'agit d'un titre d'édition. Laissez-moi prendre cette couleur jaune. Bobby, Let's go Inside Style. Collez-le dedans. Revenons à l'intérieur du contenu et alignons-le sur le plat principal. Alors, prends ce texte. Cela peut probablement aussi dupliquer cela, dupliquer ce corps de texte. Et puis double-cliquez dessus, collez-le dedans. Entrez le style, changez-le en blanc et alignez-le au centre. Maintenant, bien sûr, nous devons augmenter le remplissage en haut du texte. L'espacement entre le bord de la section et le contenu à l'intérieur de celle-ci en haut. Je vais donc sélectionner la section rembourrage avancé en haut. Poussons un peu les choses vers le bas. Et en bas également, en dessous de la partie intérieure, nous avons besoin d'un rembourrage. Faisons donc cela également. Je vais te donner les 50. Nous sommes toujours dans la section. Maintenant, nous allons sélectionner l'intersection. Changez, passez au style, à l'arrière-plan. Changez la couleur en blanc. Juste comme ça. Je viens de me rappeler que nous ne l'avions pas défini comme un H1. C'est censé être un H1. Chaque page de destination doit avoir un H1 et non deux ou trois. Juste un H1. Et H1 est une déclaration ou une phrase qui indique à l'utilisateur, en bref, en quoi consiste cette page. Il s'agit de la proposition de vente unique de cette page ou de votre entreprise. Et j'explique cela en détail dans mon cours de référencement, que vous pouvez consulter en consultant mon profil ici sur Skillshare. Très bien, maintenant c'est un H1. Nous pouvons avoir autant de H2, H3, H4, H5 que nous voulons. Il s'agit également d'un H2. Et ce n'est pas grave. Très bien, la prochaine chose que nous voulons faire est d'ajouter ce texte intérieur. Vos besoins nous tiennent donc à cœur. Copiez ça. Dupliquons cela également. Faites-le glisser et déposez-le dans cette colonne. Dupliquons cela. Glissez-le et déposez-le en dessous. Je vais donc sélectionner ceci. Et comme j'ai copié le texte, vous vous souciez de vos besoins, mais nous devons le réduire légèrement. Accédez donc à la vignette Insights. Et puis pour ces textes, j' ai saisi P qui sélectionne ça. Colle-le. Très bien, permettez-moi d'ajouter une image ici pour que je clique sur cette image. Image. Est-ce que c'est ça ? D'accord ? Ainsi, tant que l'image est réelle, nous avons ces paramètres. Laisse-moi le télécharger. Ça y est, ouvert. Insérez un média, et c'est parti. Nous pouvons donc le réduire. Nous pouvons également dupliquer le bouton. Faites-le glisser pendant que le bouton gauche de la souris est toujours sous pression avec vos doigts et faites-le défiler vers le bas à l'aide de la molette. Actionnez le bouton juste là. Et maintenant, nous avons une liste d'icônes. Alors revenons ici. Cliquez sur cette liste d'icônes. Faites glisser et déposez la liste des icônes à cet endroit. La marge juste en dessous du texte est trop grande, je vais donc sélectionner le texte. Marge avancée. Réduisez la marge en bas. Laisse-moi copier ça. Sélectionnez cette option. Et puis développons l'élément numéro un de la liste. Je vais double-cliquer dessus, le coller dedans. Retournez ici, prenez cette copie qui se réduit, agrandissez ce double-clic, collez-la dedans. Et enfin, copiez-le. C'est passé, agrandissez ce double-clic dedans, collez-le. À présent. Bien sûr, maintenant nous devons changer les icônes, nous pouvons les changer. Je souhaite également augmenter l'espace entre les deux afin de pouvoir sélectionner le bouton, avancé, marge, haut, puis appuyer légèrement dessus. Et puis en survolant, j'ai remarqué que c'était blanc. Je veux que ce soit bleu foncé. Alors tout d'abord, laissez-moi sélectionner cela. Entrez dans le style. Copiez-le depuis la section. Sélectionnez le bouton. En vol stationnaire. Il doit être de couleur noire et le texte doit être blanc. Ou on peut le rendre aussi jaune. Alors laisse-moi juste être aussi jaune comme ça. Revenons ici et changeons ces couleurs. Sous l'élément de liste des icônes. Passons à la couleur de l'icône. Faisons en sorte qu'il soit jaune. Et pas de survol. Faisons en sorte qu'il soit bleu foncé. Juste comme ça. Mettre à jour. Passons en revue les modifications. Donc, en faisant défiler vers le bas. On y va. Nous devons donc maintenant augmenter le rembourrage tout autour de la face intérieure de cette section à double colonne. Je vais donc y retourner, sélectionner la section à double colonne, rembourrage avancé. Et comme c'est lié, on peut en donner peut-être 30. Et puis entrez dans la bordure de style. Essayons-le. Je dois lui donner cet effet de coin arrondi. Nous allons également sélectionner le style de l'image, le rayon de la bordure. Réduisons la taille comme ça pour qu'elle soit équilibrée. Mettre à jour. Et voyons un aperçu des modifications. On y va. Alors maintenant, je viens remarquer que nous avons enfoncé celui-ci par la gauche. Nous n'aurions pas dû faire ça. Alors revenons ici. Sélectionnez cette option, puis laissez zéro. Mettez-le à jour. Passez en revue les modifications. Faites défiler l'écran vers le bas. Maintenant, il est correctement aligné sur le texte de la section pure. Bien entendu, vous devriez prendre votre temps pour peaufiner ce que nous avons pu créer jusqu' à présent. Ce n'est qu'un conseil, mais je pense que vous prendrez le temps de vous assurer que tout est parfait une fois que vous aurez acquis les compétences nécessaires. Donc, en gros, voici comment créer cette section. Dans la leçon suivante, nous verrons comment créer cette autre partie. Au fur et à mesure de notre progression. Je te verrai bientôt. 19. 19 Créer la section du corps Techniciens qualifiés: Bienvenue à nouveau. Passons maintenant à la création de la section des techniciens qualifiés. C'est donc ce que nous créons. Sans perdre de temps, allons-y. Allons-y et ajoutons une section à colonne unique. Comme ça. Allons-y et dupliquons ces rubriques. Je vais le glisser là-dedans. Et avant de continuer, sélectionnons d'abord cette section avancée. Passons à la marge et augmentons l'espacement entre cette section et la précédente. Donc, une marge dans le top 50, disons 100, comme ça. Alors maintenant, la prochaine chose que nous voulons faire est d'ajouter ce texte qui se trouve en dessous. Dupliquons cela. On va le coller là-dedans. Et maintenant, remarquez que ce texte ici est plus compact. Il y a suffisamment d'espace à droite et à gauche. Alors allons-y. Tant que cette option est toujours sélectionnée, je souhaite entrer dans la marge, à gauche. Limitons-en à 200 peut-être. Et sur la droite, 200. Et bien sûr, passons au style, centralisons-le comme ça. Très bien, donc la prochaine chose que nous voulons faire est de sélectionner ceci. Cliquez ensuite avec le bouton droit sur Copier Sélectionnez ce style de collage avec le bouton droit de la souris. C'est maintenant une façon de copier et coller les styles appliqués à un autre texte. Mais maintenant, bien entendu, cela reste aligné. C'est pourquoi ils ont été poussés vers la gauche. Nous devons le sélectionner et nous assurer qu'il est aligné au centre. Très bien, maintenant que, comme il s'agit d'une section à colonne unique, nous pouvons aller ici et faire glisser une intersection juste en dessous du texte. Il comporte maintenant deux colonnes car nous voulons créer ces trois colonnes. Et dans chaque colonne, nous aurons une boîte d'image. Il s'agit d'une boîte à images. Je vais donc cliquer dessus, revenir ici. De plus, et je taperai image box. Celui que nous voulons, c'est ce kit One by Elements. Nous allons donc le faire glisser et le déposer dedans. Et bien sûr, sélectionnons une image. J'avais déjà téléchargé ces images. Vous pouvez donc continuer et le faire pour éviter retourner sur l'ordinateur pour les télécharger, je vais simplement sélectionner l'une des images ici. Insérez un média. Et on y va. La prochaine chose que nous allons faire est d' entrer dans le style pour commencer à styliser les couleurs ici. Corps. Je pense que la couleur des marques corporelles est correcte. Mais pour le titre, changeons la couleur en jaune. Jaune, et en survolant, on peut lui donner cette couleur foncée. Ouaip. Très bien, pour le bouton, donnons-lui une couleur foncée. Contexte. Cette couleur foncée. Et en survolant, passons à l'arrière, en jaune. Juste comme ça. Très bien, nous pouvons donc également augmenter la taille de la rubrique. Tellement effondré que cela élargit le titre de la topographie, la typographie. Peut-être quelque part là-bas. Mettons-le à jour. Il faut également atteindre le rayon de bordure de l'image de 20, comme ça. Et maintenant, ce que nous devons faire, maintenant que nous sommes satisfaits de son apparence, c' est dupliquer cette colonne deux fois. Donc, terminé, au-dessus de ces colonnes 12. Et puis débarrassons-nous de cette dernière. Alors on y va. Et nous avons besoin d'un certain espacement entre ces textes et la section intérieure. Nous allons donc sélectionner la marge avancée de l'intersection en haut. Juste comme ça. Mettez-le à jour. Avant de continuer, changeons le texte ici. En sélectionnant ce corps de contenu, nous pouvons le remplacer par des réparations de toitures. Changez les deux. Fixation de jardin. Et changeons également l'image. Alors, sélectionnez-le. Je sélectionne simplement une image aléatoire ici. Insérez un média. Allons dedans, faisons en sorte que cette image soit un support d'insertion. Et changeons de titre. Remplacement du toit. Et mettons-le à jour. Une fois cela fait, prévisualisons les modifications. Donc, en faisant défiler vers le bas. On y va. Voici comment créer cette section. Dans la leçon suivante, nous verrons comment créer ces effets avant et après. Je te verrai donc bientôt. 20. 20 Créer la section du corps avant et après: Bienvenue à nouveau. Il est maintenant temps de créer ces sections avant et après, ce que je trouve très cool. Il donne à l'utilisateur un aperçu de l'avant et de l' après d'un projet. Donc avant, puis après. Sans perdre de temps. Revenons à notre éditeur. Et comme d'habitude, allons-y et ajoutons une section à double colonne car, comme vous pouvez le voir, nous avons ce bloc de texte, puis nous avons l'image avant et après. Je vais donc y retourner. Ajoutez une section à double colonne. Tant qu'il est toujours sélectionné. Dans cette section, accédez à Avancé. Donnons-lui un non, encore une marge maximale de mille ou 100. Vous pouvez lui donner n'importe quelle marge avec laquelle vous vous sentez à l'aise. Alors je vais le faire glisser ici. Et bien sûr, il s'agit de la zone de texte. Nous proposons donc des solutions durables. Copiez ça, retournez ici. Permettez-moi de le dupliquer. Et puis faites glisser ceci juste là. Et comme vous pouvez le voir, son centre est aligné, je veux qu'il soit aligné à gauche. Retournez ici, dupliquez-le, faites-le glisser et déposez-le dedans. Et il a toujours rembourrage que nous avons défini pour la gauche et la droite. Donc, tant que c'est toujours sélectionné, je vais passer à Avancé, puis supprimer ce rembourrage, cette marge comme ça. Entrez dans le style, aligné à gauche. Maintenant, pour ajouter cette image avant et après, je vais cliquer dessus. Et ici, je vais taper avant et après ou avant. Il s'agit d' extensions Pi ordinate pour Elementor. Je vais donc simplement le mettre là-dedans. On y va. Ajoutons donc la première image. C'est où ? Là-bas ? Nous l'avons. Dans l'image suivante. On y va. Maintenant, mettons-le à jour. Et commençons par avoir un aperçu des modifications. Donc, en faisant défiler vers le bas. Comme vous pouvez le voir, cela semble un peu différent de ce que nous avons ici, car ici, c'est juste au moment où le curseur de votre souris est sur l'image ce paramètre commence automatiquement à déplacer ce paramètre. C'est donc l'un des paramètres que l'on retrouve ici. Prévisualisons-en un aperçu. Nous devons d'abord le sélectionner , puis le faire glisser. Mais il ne bouge pas lorsque nous déplaçons le curseur de la souris comme c'est le cas ici. Donc, pour changer cela, retournez ici. Eh bien, c'est toujours sélectionné. Des options. Déplacez le curseur lorsque vous survolez la souris. Ainsi, lorsque nous sélectionnons cela, dès que la souris est au-dessus de l'image, cela se produit. Et j'aime ça comme ça. Mettons-le donc à jour. Et nous pouvons rendre l'image légèrement plus petite ou plus grande à notre guise. Mais en même temps, je souhaite pousser ces blocs de texte vers le bas souci d'uniformité. Laissez-moi sélectionner le rembourrage. Rembourrage sur le dessus. Je veux qu'il soit orienté verticalement vers le centre de l' image. Comme ça. Mettons-le à jour. Prévisualisons les modifications. Donc, en faisant défiler vers le bas. On y va. C'est donc notre image avant et après, ce que je trouve cool. Maintenant, c'est tout pour cette leçon. Dans la prochaine leçon, nous allons voir comment créer. Eh bien, c'est très facile à créer, mais nous allons le créer dans la prochaine leçon. Je te verrai donc bientôt. 21. 21 Créer la section du corps des toits expérimentés: Salut, bon retour. Il est donc temps de créer ces sections très simples. En fait, nous sommes presque au bas de la page. Et comme vous l'avez peut-être déjà deviné, il s'agit d'une section à double colonne. Donc, pour revenir ici dans notre éditeur, je vais simplement cliquer sur cette section plus une double colonne. Nous allons sélectionner la section avancée. Ajoutons une marge en haut. Il est toujours bon de conserver une marge uniforme en haut de chaque section. Je vais donc lui en donner 100. On y va. Bien sûr, il s'agit d'une image. Je veux cliquer et déposer l'image dedans. Et comme il est vertical, c'est pourquoi je l'ai rendu un peu étroit. Cliquez dessus. Cherchons cette image. C'est où ? Oui, c'est ça. Insérez un média. Et donnons-lui quelques coins arrondis. Alors, tant que c'est toujours sélectionné, passons au style. Rayon de bordure 20, juste comme ça. Et maintenant, bien sûr, dupliquons ce texte enfoui et mettons-le dedans. Et nous avons oublié de modifier ce texte. Permettez-moi donc de remplacer cela par des techniciens qualifiés. Permettez-moi de revenir en arrière et de copier ceci. Des solutions durables. Sélectionnez-le, collez-le dedans. Et maintenant, copiez-collez ça dedans. Dupliquons ce texte. 40 juste en dessous du titre. Et je veux pousser cette direction vers le bas, non ? Augmentons la hauteur de l'image. Poussons, sélectionnons cette colonne et poussons tout vers le bas en allant dans le rembourrage avancé, le rembourrage supérieur. Vous pouvez simplement saisir les chiffres. Disons donc 110. Et mettons-le à jour. Passons donc en revue les modifications. En faisant défiler l'écran vers le bas. heure actuelle, vous remarquerez que ces deux sont trop proches l'un de l'autre. Donc, pour y revenir l'une des raisons est que nous avons supprimé le rembourrage qui se trouvait ici par défaut. Mais nous pouvons également sélectionner la section elle-même. Et comme il est composé de deux colonnes, nous pouvons contrôler l'espacement entre les deux colonnes. Ainsi, pendant que cette option est sélectionnée, accédez à Disposition des colonnes (écart). Choisissons plus large. Maintenant, si nous prévisualisons cela, vous remarquerez que l' écart est beaucoup plus grand, alors faisons défiler la page vers l'extérieur. Et on y va. Voici comment créer cette section. Oh attendez, nous n'avons pas ajouté ce bouton. Dupliquons donc ce bouton. Et faisons-le glisser jusqu'à la section. Déposez-le là-bas. Cela signifie maintenant que nous devons réduire ce rembourrage. Sélectionnez donc la colonne, réduisez-la jusqu'à ce qu'elle soit équilibrée. Il suffit de le regarder. Mettez à jour ici. Je pense que je dois le réduire encore un peu. J'aime bien à ce moment-là. Très bien, prévisualisons les modifications. En faisant défiler l'écran vers le bas. Et nous y voilà. Voici donc comment créer cette section. Dans la leçon suivante, nous verrons encore une fois comment créer la section des témoignages. Je te verrai bientôt. 22. 22 Créer les témoignages de la section du corps: Et nous sommes de retour. Il est donc temps de créer la section des témoignages. Comme vous pouvez le constater, cela ressemble presque exactement à la section White Choose. Allons-y et dupliquons cette section. Je vais rentrer ici. Dupliquez-le, et c'est pourquoi Elementor est si cool à utiliser. avons donc essentiellement dupliqué. Je vais donc le faire glisser jusqu' en bas et le déposer dès que la ligne bleue apparaîtra. Et donnons-lui également une marge au sommet de 100. Ils ont une marge appropriée. Mais ne nous laissons pas berner. Laisse-moi voir. Donnons-lui un peu plus de rembourrage ici. Juste en dessous de la marge des obligations du formulaire. Donnons-lui un 80. Très bien, maintenant, revenons au bas de la page, sélectionnons ce que disent nos clients. Allez ici, sélectionnez-le, collez-le dedans. s'agisse d'une Ford, elle est là. Mais nous devons ajouter une marge à droite et à gauche. Ainsi, tant qu'il est toujours sélectionné, reste une marge avancée, deux dessus. Pour courir. Mettez-le à jour. Retournons ici. Voici donc les témoignages maintenant. Donc, pour revenir ici, nous devons nous débarrasser de cette intersection. Maintenant, sélectionnez-le et tapez un témoignage. Témoignage, nous avons le témoignage par défaut fourni avec Elementor, la version gratuite. Et nous avons Elements Kids. Celui que nous voulons est celui de One by Elements Kid. Glissez-le et déposez-le lorsque vous voyez cette ligne bleue. Et par défaut, nous avons ces différentes options ici. J'aime bien utiliser celui-ci ici, mais vous pouvez expérimenter avec le reste. Donc, pour le moment, nous ne présentons qu' un seul témoignage. Nous pouvons entrer dans les paramètres. Voyons les diapositives à montrer. On peut dire deux diapositives à faire défiler, bien sûr, c'est combien, par combien de diapositives ça doit défiler. Maintenant, allons-y et travaillons sur l'apparence. Revenez à la mise en page intérieure. Passons maintenant au témoignage. Voici la liste des trois témoignages. Témoignages numéro un, c'est de là que le nom du client est censé apparaître. Très bien, désignation, directeur du marketing. Dans quelle entreprise ? Nous avons donc maintenant besoin de quelques textes à réviser. Laissez-moi bien saisir, je ne peux pas saisir ce texto. Laisse-moi juste prendre ce texte. En gros, nous n' avons pas le temps d' essayer de rédiger un véritable témoignage. Très bien, c'est ce qu'a dit Alex Brandon. Allons-y et jouons avec les couleurs. Style. Si nous avons réduit la mise en page. Comme vous pouvez le constater, nous avons le style du contenu de l' emballage, la description, note, l'icône tirée et les clients. Commençons donc par un client. Couleur du nom du client. Gardons-le aussi jaune. Colle-le dedans et maintenant c'est jaune. En survol, on peut le rendre blanc comme ça. Nous pouvons également jouer avec la topographie ou la taille du nom. Je vais donc simplement revenir à la valeur par défaut. Très bien, puis désignation du client. Donnons-lui une couleur blanche. En survol, on peut lui donner la couleur jaune si claire. C'est comme l'inverse. Alors on y va. Image du client, vous pouvez jouer avec l'image du client. J'aime bien les paramètres par défaut de l'image. Passons à la description. La couleur est, évidemment, correcte. Mais vous pouvez le changer en la couleur de votre choix. Je vais donc le laisser au noir. Ensuite, nous avons également cette citation ici. Nous pouvons changer la couleur à la couleur de votre choix. Je l'aime juste sous forme de guillemets légèrement colorés. Et nous y voilà. Donc, pour en revenir au contenu, aux témoignages, Brandon, développons cela. Nous pouvons modifier l'avatar du client. Et j'avais fourni quelques images pour le témoignage. C'est parti. C'est Brandon. Je vais m'effondrer. Alex, développe ça. Lisa sourit. Nouveaux médias artistiques. Et peut-être, trouvons d' autres textes pour fournir là P qui me permettent de la mettre pour qu'elle dise. Juste là. Lisa Smiley. Oh, attends, ajoutons son avatar. C'est Lisa. Non, c'est Lisa. Souriez Et supprimons Lisa et ajoutons une troisième personne, Nord VPN. Alors, donnons leur témoignage ici. Nous y voilà, et leur avatar. Nous pouvons donc également déterminer la note qu'ils ont attribuée au site Web. Alors peut-être que ce type nous a donné une note de quatre sur cinq. Mettez-le à jour. Donc, comme vous pouvez le voir, c'est un quatre sur cinq. Revenons donc au style intérieur. Aménagement intérieur. Nous voulons lui donner un angle arrondi. Donc 20, juste comme ça. Mettez à jour cela. Prévisualisons les modifications. Défiler vers le bas jusqu'en bas. Et c'est ce que nous avons. Voici donc comment créer la section des témoignages. À la fin de cette page, nous allons créer cette section d'assistance téléphonique d'urgence avant de créer le dossier. Je te verrai donc dans la prochaine leçon. 23. 23 Créer le numéro d'urgence de la section du corps: Salut, bon retour. Il est donc temps de créer la section hotline juste en dessous des témoignages. Nous y voilà donc. Je vais rentrer ici. Créons une section, section à colonne unique, comme ça. Et maintenant, nous avons une colonne à l'intérieur de cette section. Changeons donc la couleur de la colonne elle-même en jaune. Je vais donc sélectionner le style de colonne. Laisse-moi juste aller chercher ce jaune. Tant que cela est toujours sélectionné, je vais passer au style, à arrière-plan, à la couleur comme ça. Maintenant, dupliquons ce texte. Je veux le dupliquer car je ne veux pas avoir à en changer la couleur. Alors copiez-le. Sélectionnez cela. Ici. Modifions cet alignement central. Ensuite, nous pouvons le dupliquer. Tant que cette option est toujours sélectionnée. Passons au style. Changez la couleur en blanc. Typographie, réduisez la taille de la police. Et nous allons sélectionner la colonne, puis les options avancées. Passons à la marge. Et il reste une marge, peut-être quelque chose comme 100. Marge droite. Cent Passons au style Border Radius. Travaillons sur le rembourrage. Top rembourré Faisons simplement pression pendant que nous le regardons. Peut-être 35, les 35 derniers aussi. Je pense que c'est bon. Copions donc ce texte ici. Collez-le tant que cette option est sélectionnée. Et maintenant, il est temps de pousser cette partie jaune vers le haut. Sélectionnez donc la colonne elle-même, marge supérieure doit être négative jusqu'à un point quelconque. Mettez-le à jour. Et voyons un aperçu des modifications. Donc, en faisant défiler vers le bas jusqu'en bas. Et nous y voilà. Voici donc comment créer cette section. Dans la leçon suivante, nous allons travailler sur ce dossier. Je te verrai donc bientôt. 24. 24 Créer la section de pied de page: Bienvenue à nouveau. Maintenant que nous en avons terminé avec la section corps, il est temps de travailler sur la section de bas de page. Et comme nous l'avons fait pour la section d'en-tête, nous allons créer le dossier séparément, pas ici où nous modifions le corps de la section. Il est donc temps de quitter cette partie. Je vais donc cliquer sur ce menu de hamburgers. Ensuite, la sortie sera redirigée vers le backend. Et à partir de là, nous pouvons accéder au dossier d'en-tête Elements Kids. Et maintenant, nous pouvons dire Ajouter un nouveau. N'oubliez pas que nous avons d'abord créé l'en-tête. Il est maintenant temps de créer la photo. Donnons-lui un nom. Et bien sûr, le type est maintenant le dossier dont nous avons besoin. Nous l'avons rendu visible sur l'ensemble du site. Et il doit être actif. Lorsque vous avez plusieurs dossiers ou en-têtes, vous pouvez en activer certains, ce qui signifie qu'ils ne seront pas visibles sur le site Web. Très bien, alors allons-y et enregistrons les modifications. Et on y va. Nous allons donc modifier. Et puis cliquez sur Modifier le contenu sera redirigé vers le front-end. Et à partir de là, nous pouvons le construire de la même manière que nous créons l'en-tête. Nous y voilà donc. Comme vous pouvez le voir sur notre site Web de référence, il comporte trois colonnes. Allons-y et ajoutons une section à trois colonnes. On y va. N'oubliez pas que vous pouvez toujours redimensionner ces colonnes. Ils ne sont pas rigides. Commençons donc par ajouter une image ici afin de pouvoir ajouter un logo. Sélectionnez cela, sélectionnez le logo, insérez une image. La prochaine chose que nous devons faire est d'ajouter ce texte, une courte description. Donc, pour entrer ici, maintenant, l'avantage d' Elementor, c'est que si, par exemple, je modifie cette page ici, sur la page d'édition, ou disons que je suis sur l'éditeur. Je peux copier un élément avec son contenu depuis une zone. Cliquez n'importe où dans cette copie de texte. Accédez à une autre page ou zone que vous utilisez Elementor sur ce même site Web. Cliquez puis collez. C'est aussi simple que ça. Je voulais juste te le montrer, mais laisse-moi le supprimer. Ajoutons un éditeur de texte. La prochaine chose que nous devons faire est de créer. Créons ces liens rapides. Je vais donc cliquer dessus, ajouter un titre de texte. Ensuite, allons-y ici et prenons cette couleur. Copie. Tant que cette option est sélectionnée, stylisez. Changez la couleur. Et puis des liens rapides. Alors cliquons dessus. Ajoutez une liste de pages. Liste des pages, faites-la glisser sous l'en-tête des liens rapides. Nous pouvons maintenant ajouter un élément. Donc, en gros, nous ajoutons des pages en tant qu'éléments de liste ici. Donc, pour le premier élément, développez-le. Disons que c'est notre maison. Domicile. Maintenant, dans ce menu déroulant, sélectionnez la page d'accueil. Cet objet a fait prolapsus. Tu peux appeler ça à propos de. Donc, en gros, vous pouvez ajouter n'importe quelle page en tant qu' élément de menu ici. Sélectionnez donc ceci, sélectionnez la page À propos. Ajoutons un contact supplémentaire, page de contact. Et voilà à quoi ça ressemble. Donc, pour ce qui est du style, si nous réduisons la liste elle-même, comme vous pouvez le voir, nous avons des icônes. Je n'ai pas besoin d'icônes. Nous avons le texte pour pouvoir le modifier. Couleur des textes. Donnons-lui ce bleu foncé. Et sur la pauvreté, sur le survol, donnons-lui ce jaune. Juste comme ça. Et l'espacement ici est assez petit. Permettez-moi donc de sélectionner la section elle-même. Écart entre les colonnes. Je veux qu'il soit plus large. Juste comme ça. Je veux augmenter ce montant parce qu'il y a trop d'espace ici que nous n'utilisons pas. Mettez-le à jour. Prévisualisons d'abord les modifications. Très bien, vous remarquerez maintenant qu'il y a beaucoup de rembourrage sur cette image sur le logo. Revenez donc ici, sélectionnez le logo, supprimez la marge et réduisez la marge de gauche jusqu'à ce point afin qu'il soit aligné sur le texte. Mettons-le à jour. Parfait. Maintenant, vous souhaiterez peut-être avoir deux colonnes de liens. Si vous avez de nombreux liens à partager. Vous pouvez donc entrer ici et choisir une intersection. Déposez-le là-dedans. Et comme il comporte deux colonnes, choisissez cet élément et déposez-le dedans. Et vous pouvez le dupliquer. J'ai supprimé le dernier. Et maintenant, ici, vous pouvez avoir plus de liens vers des pages. Ainsi, par exemple si vous avez une page de copyright, si vous avez une page de conditions générales , vous pouvez l'avoir dans cette colonne. Alors bien sûr, maintenant c'est sélectionné. Nous pouvons modifier ces deux termes et conditions. Licence, peut-être politique de confidentialité. Et vous pouvez le redimensionner en conséquence. Et maintenant, vous avez deux colonnes. Mettons-le donc à jour. Et voyons un aperçu des modifications. Et nous y voilà. La prochaine chose que nous devons faire est créer ce formulaire d'inscription. Laisse-moi juste copier ça. Dupliquez-le, glissez-le et déposez-le dedans. Sélectionnez-le, collez-le dedans. Accédez à la typographie stylistique, redimensionnez-la en conséquence. Allez ici, sélectionnez ce texte. Dupliquez ça. Faites-le glisser là-dedans. Je peux donc le faire glisser. Et puis bien sûr, enfin, nous devons ajouter ce formulaire. Et comme vous l'avez peut-être déjà deviné, il s'agit d'un formulaire de formulation. Nous passons donc au backend pour le créer. Alors tout d'abord, permettez-moi de dire cela. Prévisualisez les modifications. On y va. Allons donc dans notre tableau de bord. Nous en sommes encore à la formule plus tard. Cliquons sur Formulaires. Et maintenant, vous pouvez accéder à Créer. Je vais simplement utiliser ce formulaire d'inscription prédéfini à la newsletter. Continuez. Formulaire d'inscription, Créer. Et on y va. Il a donc besoin d'un prénom et d'une adresse e-mail. Nous allons donc en donner un aperçu. Et bien sûr, il a des couleurs et des paramètres par défaut . Fermez ça. Passons à l'apparence, au gras, au costume. Passons au bouton d'envoi. Bien sûr, nous en avons besoin. jaune. Copiez ça, collez-le dedans en survolant. Nous voulons que ce soit de cette couleur. Il est toujours bon d'avoir un ensemble cohérent de couleurs de marque. Prévisualisez-le. On y va. Travaillons maintenant sur le terrain. Entrée. La couleur de la bordure. Je veux que ce soit le cas, c'était triple CE, CE, ECE, comme ça. En vol stationnaire. Nous pouvons lui donner cette couleur jaune. Concentrez-vous. Il peut aussi s'agir de cette couleur jaune. Publier. Copions ce court code. Revenez à notre page ici, notre éditeur. Voici l'éditeur. Ajoutons un élément de code court. C'est parti. Glissez-le et déposez-le dedans. C'est parti. Je vais donc coller ce court code ici. Et on y va. Cette marge est donc un peu trop grande, je vais donc sélectionner la marge avancée du texte, en bas. Réduis-le un peu. Et ajoutons également quelques icônes de réseaux sociaux. Icônes des réseaux sociaux. Déposons-les là-dedans. Et cela apporte cet équilibre pour couvrir cet espace. Replaçons ces icônes de réseaux sociaux vers la gauche, comme pour cette mise à jour. Et voyons un aperçu des modifications. Alors on y va. Nous pouvons en faire un lien vers la page d'accueil. Faisons-le donc rapidement. Sélectionnez cette image comme d'habitude, accédez à Contenu, lien, URL personnalisée. Laissez-moi simplement choisir l' URL d'accueil. Juste comme ça. Mettre à jour. Aperçu. Maintenant, si je clique dessus, cela nous amènera à la page d'accueil. Et si nous faisons défiler l'écran jusqu'en bas, voyons si nous avons le dossier. On y va. Mais maintenant, nous avons besoin d' un certain espacement entre les deux. Permettez-moi donc de cliquer sur Modifier avec Elementor afin que nous puissions modifier la page elle-même, la section du corps, en faisant défiler la page jusqu'en bas. Il suffit de sélectionner la section qui contient l'urgence. Accédez à la marge avancée en bas. Donnons-lui 100. C'est moi qui l'ai payé. Aperçu. Les changements. Faites défiler l'écran jusqu'en bas. Et on y va. Nous avons donc un bel espacement ici. Vous pouvez l'augmenter ou le réduire si vous le souhaitez. Alors maintenant, voici comment créer la page de destination ou la page d'accueil. Dans la leçon suivante, nous allons voir comment créer le reste du site Web. Nous allons donc continuer sous peu. 25. 25 Construisez la page Qui sommes-nous La section du héros: Nous sommes de retour. Maintenant que nous en avons terminé avec la page d'accueil, il est temps de passer à la page À propos de nous ou à la page À propos. Et je suis ici, dans mon tableau de bord. Mais avant de commencer à le construire, jetons un coup d'œil au site Web de référence. Ou à droite, donc en faisant défiler vers le bas. On y va. C'est donc ce que nous construisons sans perdre de temps. Revenons à notre tableau de bord. Passons à l'intérieur des pages. N'oubliez pas que nous avons déjà créé les pages. Maintenant, il ne nous reste plus qu' à découvrir Eddie. Et nous y voilà. Allons-y et configurons la page comme nous l'avons fait pour la page d'accueil du modèle Choisissons la pleine largeur, Elementor, la pleine largeur. Allons dans les paramètres Astro. Choisissez une barre latérale étirée sur toute la largeur, pas de barre latérale. Désactivons ensuite l' en-tête et le pied de page. Mettez-le à jour. Et maintenant, il est mis à jour. Cliquons sur Modifier avec Elementor afin pouvoir accéder au front-end et commencer à le créer visuellement. Et nous y voilà. Bien entendu, oubliez pas que nous ne pouvons pas modifier cette photo ou cet en-tête à partir d'ici car ce n'est pas là que nous l'avons créée. Mais ils sont visibles car nous les avons déjà créés et ils sont visibles sur toutes les pages. Alors maintenant, la première chose dont nous avons besoin pour créer cette section de héros. Donc, pour en revenir ici, il s'agit d'une section à colonne unique. On y va. Et nous devons d'abord ajouter l'image de fond. Sélectionnez donc, tant que cette section est toujours sélectionnée, passons à l'arrière-plan du style. Nous allons sélectionner une image. Je pense que c'est l' image, insérez le média. Et bien sûr, ajoutons ces blocs de texte. Donc, ce que nous voulons faire, c'est cliquer sur cette icône ici, puis y faire glisser un bloc de texte. Revenez ici, faites glisser du texte là-bas. Ensuite, nous devons augmenter le rembourrage en haut et en bas de cette section. Nous pouvons donc avoir cette pièce ici et ici en bas. Alors revenons ici. Sélectionnez une section, rembourrage avancé en haut. Essayons 100, quelque chose comme ça. Tant qu'il est toujours sélectionné. Entrez le style, la position, le centre, le centre. Je crois que j'aime bien ça. Nous ne voulons pas que cela se répète d'un bout à l'autre. Et pour la taille, choisissez la couverture, comme d'habitude, cela signifie qu'elle s'étendra du bord de l'écran à l'autre bord de l'écran. y aura pas d'espace blanc sur les côtés comme nous l'avons fait avec la page d'accueil. Alors on y va. Permettez-moi de le copier une fois de plus. Et maintenant, il est temps de le coller ici. Mettons-le au milieu. N'oubliez pas que vous devez utiliser vos propres textes car c'est juste moi qui ai créé un texte d'espace réservé. Pousse-le vers le centre. Juste comme ça. Maintenant, en sélectionnant à nouveau cette section, ajoutons une superposition d'arrière-plan, puis nous avons une superposition d'arrière-plan. Et nous pouvons utiliser une couleur noire. Choisissons donc le noir. Cela permet de mieux faire ressortir le texte au-dessus de l'image. Comme vous pouvez le constater en ce moment, il se démarque. Nous allons sélectionner le texte. Entrez le style, puis donnons-lui un dégradé. J'y retournerai et choisirai cette couleur jaune. Copiez cela pour la couleur du bas. Et puis pour la couleur supérieure, bien sûr, il faut que ce soit une couleur blanchâtre. Tant que nous sommes encore là. Réduisez les dégradés, développez le titre. Passons à la typographie pour en apprendre un peu plus sur nous. Nous allons sélectionner cette option pour la changer en blanc. Mettez-le à jour. Prévisualisons les modifications. Ça y est, nous l'avons. La section consacrée aux héros est donc terminée dans la leçon suivante. Voyons comment créer notre histoire, cette section. Je te verrai donc bientôt. 26. 26 Construisez la page de notre histoire: Bonjour. Bienvenue à nouveau. Continuons à travailler sur la page À propos de nous. La prochaine chose que nous voulons faire est de créer cette partie ici, notre histoire. Et il y a ces deux arrière-plans sombres sur ces deux colonnes, mission et vision. Revenons donc ici, sélectionnons une section à double colonne, car comme vous pouvez le voir, s'agit d'une double colonne, d' une colonne de bloc de texte et de la colonne image. Et cette colonne de bloc de texte a une intersection avec une double colonne. Donc, pour en revenir ici, nous allons tout d' abord ajouter une image. Cliquez sur ce signe plus, puis faites glisser une image dedans. Et sélectionnons-le. Je pense donc que c'était l'image. Insérez un média. Bien entendu, nous pouvons le faire glisser pour réduire la taille de l'image et laisser de la place au texte. Cette icône permet de glisser-déposer un titre. J'ai oublié d'en faire un H1. Sélectionnez À propos de nous. Faites-en un H1. C'est un H2. C'est bon. Passons à notre histoire. Je vais rentrer ici. Tant que cette option est sélectionnée, collez-la dedans. Très bien, laisse-moi copier ça. Copiez ça. Cliquez sur cette icône. Faites glisser l'éditeur de texte jusqu'à ce point. Double-cliquez ici, collez ce texte dedans. Et vous remarquerez que le texte est très proche de l'image. Nous allons donc sélectionner la section. Et sous Écart entre les colonnes , Sélectionnez plus large pour augmenter cet espacement. Travaillons maintenant sur la couleur de notre histoire. Ça devrait être de cette couleur foncée. Copiez-le tant qu'il est encore sélectionné, style. Colle-y cette couleur. Cliquez n'importe où ici pour vous débarrasser de cette topographie. Augmentons la taille jusqu'à cet endroit. Donnez-lui un poids de 900. Juste comme ça. Maintenant, pour ajouter la double colonne, revenons ici. Intersection possède ces deux colonnes. Bien sûr, allons-y et saisissons notre vision. Copiez ça. Dupliquons cela. Faites-le glisser là-dedans. Laissez-le changer cela en fonction de notre vision. Réduisons la taille. Peut-être 35. Analyser le contenu du site et le placer au centre. Faisons en un H3. Parce que c'est un H2. H3, nous suivons la hiérarchie des en-têtes conformément aux directives HTML. La prochaine chose que nous voulons faire est de choisir la mission. Dupliquez ça, glissez-le en dessous de notre vision. Double-cliquez dessus et collez-le dedans. Le style se situerait au milieu. Très bien, maintenant, ce que nous voulons faire, c'est sélectionner cette colonne qui contient ces blocs de texte. Entrez dans le style. Nous devons lui donner un contexte. Donc couleur de fond. Alors laisse-moi choisir cette couleur, copier, la coller dedans. Nous avons maintenant besoin de ces copies jaunes qui sélectionnent le titre. Style. Colle-le dedans. Hein ? La prochaine chose que nous voulons faire est de faciliter la tâche pendant que la colonne est toujours sélectionnée, de cliquer avec le bouton droit de la souris et de la copier. Sélectionnez ensuite cette colonne. Cliquez avec le bouton droit pour coller le style Très bien, maintenant le style est collé. Dupliquons cela. Mets-le dedans. Dupliquez le texte. Faites-le glisser là-dedans. Maintenant, changeons ce corps de texte en blanc. Sélectionnez cette option, changez-la en blanc. Ensuite, bien sûr, sélectionnez cette colonne. Bordure. Donnons-lui un rayon de bordure de 20. même cas s'applique à ce cas. Sélectionnez l'entraînement aux bordures de style de colonne. Nous devons maintenant créer un espacement entre les deux colonnes. Ainsi, tant que cette colonne est toujours sélectionnée, entrez dans la marge avancée. Supprimez ce lien afin que nous puissions modifier des cellules individuelles. Et nous voulons augmenter la marge gauche, cette marge gauche à environ dix. Cela pousse cette marge vers l'intérieur depuis le côté gauche. Nous voulons faire de même pour cette colonne. Alors, pendant que c'est sélectionné, accédez à la marge. Enlève ça. Augmentez ensuite la marge de droite jusqu'à dix. Juste comme ça. Et maintenant, remarquez que nous avons besoin un rembourrage juste en haut. Donc, tant qu'il est toujours sélectionné, cassez-le. Et puis augmentons la marge supérieure en haut. Le rembourrage supérieur, environ 25 pour le côté. 2020. Et la marge sur la taxe laisse déjà de la place ici même. Comme vous pouvez le voir, cette boîte bleue pousse cette partie vers le bas. Mais nous pouvons sélectionner le texte, accéder à Marge avancée, en bas. Réduisez cette marge. Et puis, tant que cette colonne est toujours sélectionnée, augmentons le rembourrage inférieur à 25. Alors maintenant, le haut et le bas ont un rembourrage uniforme. Et répétons la même chose pour cette colonne. Donc rembourrage, 25, 25 et entraînement. Et maintenant, sélectionnons ce texte et réduisons sa marge inférieure. Juste comme ça. Mettre à jour. Ça change de mentionner Michelle. Hé, que nous avons oublié de prendre cette image ou les coins arrondis. Sélectionnez donc le rayon de bordure de ce style d'image. Juste comme ça. Ensuite, nous pouvons le faire glisser légèrement pour agrandir l'image. Mettez-le à jour. Prévisualisons les modifications. Très bien, nous y voilà. Mais remarquez maintenant que ce texte est trop proche de la section des héros, nous pouvons donc le pousser un peu vers le bas. Nous pouvons en fait abaisser toute la section. Revenez donc ici, sélectionnez la section. Marge avancée au sommet, peut-être 50. Mettez-le à jour. Prévisualisez les modifications. Oui, donc pour l'instant, j'aime bien où c'est. Et voici comment créer cette section. Dans la prochaine leçon, verrons comment créer ce que nous proposons. Et comme vous pouvez le constater, nous avons ce bel effet de survol. Voyons comment créer cette section sous peu. Je te verrai bientôt. 27. 27 Construisez la page de notre site Ce que nous offrons: Ce que nous proposons, allons-y et créons cette pièce. Pour en revenir à notre éditeur, je vais ajouter une seule colonne. Oui, c'est une section à colonne unique comme ça. Et cette section à colonne unique comporte une intersection avec trois colonnes, comme vous pouvez le voir ici. Nous ajoutons donc une intersection comme nous l'avons fait pour cette section. Donc, pour en revenir ici, tout d' abord, dupliquons cela. Glissez-le et déposez-le ici. C'est aussi un doublon. Et glissez-le et déposez-le sous le titre. Comme vous pouvez le constater, ils sont trop proches l'un de l'autre. Alors, abaissons cette section inférieure. Sélectionnez la section, faites coïncider au mieux. Supprimez ce lien. Et bien sûr, donnons-lui peut-être 100. Juste comme ça. Passons maintenant au centre sélectionné dans le centre de contenu. Et cet alignement central sous-stylé. Retournons ici. Je veux récupérer ce que nous avons proposé. Sélectionnez le visage que vous avez fait dans leur Trollope qui sélectionne ce contenu. Collez-le dedans. Il est maintenant temps d'ajouter notre section à trois colonnes. Cliquez donc sur cette icône, Insérez une intersection. heure actuelle, il comporte deux colonnes. Ne vous inquiétez pas, travaillons sur une seule colonne et dupliquons deux fois. Donc, je vais à l'intérieur d'ici. En fait, nous pouvons le dupliquer et le faire glisser juste en dessous de ces textes. Et nous pouvons modifier cela au lieu de travailler sur ces nouvelles intersections. Il est donc temps d'inverser les couleurs. Le fond doit être jaune. Laissez-moi donc sélectionner ce texte. Choisissez cette couleur. Sélectionnez ensuite la colonne elle-même, le style, l'arrière-plan. Donne-moi cette couleur jaune. Maintenant, passez à ce style de colonne, à cette couleur. Copiez-le, sélectionnez ce style de texte, la couleur de base à cet endroit. Maintenant, nous avons tout inversé. Le texte est noir, donc c'est bon, alors on y va. La prochaine chose que nous devons faire est de le dupliquer deux fois. Et je veux supprimer ce dernier. Tout comme cette mise à jour. Mais souvenez-vous maintenant que nous avons dupliqué cette colonne qui se trouvait sur la gauche et qui avait une marge droite. Cela signifie donc que tous ces éléments ont des marges droites et, comme vous pouvez le voir, ils ne touchent pas le bord. Nous devons avoir la marge pour celui-ci sur la gauche, pas sur la droite. Donc, en sélectionnant celui-ci et en entrant dans le menu avancé. Cette marge droite doit être nulle et respectée. Donc c'est zéro. Et pour la gauche, dix. Maintenant, cela s'applique à la gauche. Et maintenant, pour celui-ci, il y a déjà une marge sur la droite. Donnons-lui également une marge sur la gauche de dix. Maintenant, c'est équilibré. Choisissons certains de ces textes. 25 ans au service des clients. Choisissons ici le contenu des experts certifiés. Enfin, nous offrons une garantie. Très bien, il ne reste plus que les effets de survol. Donc, en sélectionnant l' une des colonnes comme nous voulons qu'elle soit de couleur blanche. Ouaip. N'oubliez pas que le texte était censé être noir ou gris foncé. Je vais donc copier ce style de texte. Sélectionnez ce texte. Style de collage. Sélectionnez ce texte, puis cliquez avec le bouton droit sur le style pour coller. Maintenant, lorsque vous passez le curseur, il passe au blanc et le texte est toujours visible. Nous devons faire de même pour cela. Sélectionnez donc ce style de colonne en survolant, en couleur, en blanc. Et enfin pour celui-ci, style sur survol, style de fond de couleur. Pourquoi ? Mettre à jour ça ? Et voyons un aperçu des modifications. vrai, donc en faisant défiler l'écran vers le bas. On y va. Voici donc comment créer cette section. Dans la leçon suivante, nous verrons comment créer cette section. Je te verrai bientôt. 28. 28 Construisez la page de notre site Nos clients: Et bon retour. Il est donc temps de créer cette section. Et comme vous l'avez peut-être deviné, nous allons simplement copier certains de ces éléments dans la section elle-même, car c'est l'un des principaux pouvoirs de l'élémentaire. Il vous permet de copier des éléments dans une autre section que vous créez. Alors cliquons sur plus. Il s'agit d'une section à double colonne. Tant que cette section est toujours sélectionnée, attribuons-lui une marge supérieure de 100. Juste comme ça. Maintenant, donnons-lui une image de fond. Oui, donnons-lui une image de fond. Tant qu'il est sélectionné. Style d'arrière-plan, cliquez sur le signe plus juste là. Et je vais choisir cette image. Bien sûr, nous devons maintenant ajouter une image dans cette colonne. Cette image. Cliquez sur cet avantage, déposez l'élément d'image dedans, et cela agrandit la section. Revenons donc à la section, passons à la position. Essayons le centre. Centre. Non, ce n'est pas ce que nous voulons. En bas au centre. Ouaip. C'est ce que nous voulons. Réduisez l' arrière-plan, donnez-lui une couche d'arrière-plan noire. Alors sélectionnez-le, puis noir. Cliquez n'importe où ici. Pour s'en débarrasser. Augmentons ensuite la puissance de cette superposition d'arrière-plan jusqu'à ce point. Nous allons donc sélectionner cette option pour modifier l'image. Voici donc l'image. Et donnons-lui un coin arrondi. Ainsi, même si le rayon de bordure de style sélectionné est toujours de 20, augmentons également le rembourrage en haut et en bas. Ainsi, lorsque cette section est sélectionnée, routage avancé, 50 en bas, 50 en haut. Dupliquons maintenant ce texte. Il y a de la sécheresse. Je pense que c'est de couleur jaune. Oui, c'est jaune. Donc je vais juste choisir ça sous forme de style. Copiez cette couleur. Sélectionnez ce style. Collez-le dedans. Dupliquons le bloc de texte. Déposez-le dedans, et il sera de couleur blanche. Alors, tant que c'est toujours sélectionné, passez au style, à la couleur du texte, au blanc. Jersey Tab est un appel à l'action. Oui, c'est le cas. Allons donc ici et disons « sélectionnez ce bouton ». Le bouton là-dedans. Et tant qu'il est toujours sélectionné, changeons le texte pour parler. Parle-nous. Bien entendu, vous fournirez le lien ici. Ensuite, si vous souhaitez l'ouvrir dans un nouvel onglet, cliquez sur cette roue dentée. Sélectionnez Ouvrir dans un nouvel onglet. Mettez donc un lien indiquant que vous voulez que ce bouton redirige les gens pour qu'ils écrivent ici en utilisant le style intérieur, voulez supprimer ce rembourrage, le rembourrage gauche. Donnons-lui un 50. À droite, 50 dans le top 20. Juste comme ça. Pour le rayon de la frontière, essayons 15. 15 c'est bien. Nous pouvons également avoir un bouton carré si vous le souhaitez. Vous pouvez également avoir un angle pointu si vous le souhaitez en supprimant tous ces angles. Maintenant, comme vous pouvez le voir, la couleur est verte. Nous allons donc sélectionner ce texte. Copiez ça. Sélectionnez le bouton. Collez-le ici. En vol stationnaire. Nous voulons qu'il soit blanc. Ainsi, la couleur de fond doit être blanche. Et les textes encore sous Hover devraient être noirs. Juste comme ça. Mettez-le à jour. Et voyons un aperçu des modifications. Très bien, nous y voilà. Voici comment créer cette section. En fait, nous avons presque terminé. Dans la leçon suivante, nous allons voir comment créer ces nombres. Ils sont animés. Donc, si je pouvais rafraîchir cette page, je voudrais l'actualiser pendant que nous sommes en haut. Et quand on fait défiler l'écran vers le bas, ces numéros sont censés être animés comme ça. Nous verrons donc comment le créer dans la prochaine leçon. Je te verrai bientôt. 29. 29 Construire la page Qui sommes-nous ? Parlons des numéros (mis à jour): Bon retour. Il s'agit de la dernière section de cette page. Voyons donc comment créer. Super retour à notre rédacteur en chef. Juste en dessous de cette section , nous avons une section à colonne unique. On y va. Donnons-lui une marge supérieure. En sélectionnant la marge supérieure de 100. C'est lui qui a fait ça à ma liste. Cliquez ensuite sur le signe plus et ajoutons une intersection. Il se trouve en fait au-dessus de l'intersection. Nous devons ajouter un titre. Donc cette couleur plus foncée. Je vais donc cliquer sur Dupliquer ceci, puis le faire glisser et le déposer dans la section de Bob. C'est donc dans cette section. Cette section. Très bien, alors que doit-il dire ? Parlons chiffres. Alors, sélectionnez-le. Vous vous rendez compte que le côté droit, ici, c'est le signe plus. Et choisissons un compteur rond. Nous allons donc le glisser-déposer là-dedans. Et comme vous le voyez, c'est déjà animé. Donc, la seule chose que nous devons faire, c'est qu'il fournit des noms spécifiques tels que nous avons dû utiliser. Sergents donc terminés. Donc, une fois que vous avez fait cela, alors que cette option est toujours sélectionnée, cliquez n'importe où. C'est alors, bien entendu, ce que nous voulons faire. Ils modifient la couleur d'arrière-plan en jaune. Sélectionnez donc la colonne elle-même, le style, la couleur d'arrière-plan. Je vais copier ce jaune. Collez-le dedans. Changeons les couleurs de ces chiffres. Donc ligue de toute façon, juste parce que cela sélectionne ensuite ce compteur, LMS. Maintenant, c'est le numéro de style du conseil. Appelons cela cette couleur sombre. Collez-le dedans. C' est aussi le titre de la même couleur foncée. C'est donc un peu plus visible. Et que ce que nous devons faire c'est le dupliquer deux ou trois fois, autant de fois que vous le souhaitez. Et mettons-le à jour. Je vais sélectionner cette colonne. Accédez à Avancé. À gauche, j'en veux cinq ou dix. Et sur la droite, je veux le sélectionner. Copie. Sélectionnez celui-ci. Style. Très bien, sélectionnons maintenant la plus petite hygiène. Sur la droite. Nous voulons l'utiliser sur le terrain, marge dix. Maintenant, cet espace est uniforme. La prochaine chose que nous voulons faire est de lui donner un coin arrondi. Comme d'habitude, sélectionnez la bordure de la colonne. C'est drôle. La bordure en forme de nœud en lactate. Donc, comme cette bordure. Le trimestre suivant, c'est fait. Maintenant, jouons le jeu. Le deuxième titre signifie donc avoir des clients. Donc, pendant que cela est sélectionné, les membres de l'équipe, comme ça , les membres, sont 53 clients satisfaits. Peut-être que nous avons sélectionné cela. Nous en avons 3 000 plus 8 000. Donnons-lui un suffixe de fil dentaire. Des milliers de clients qui échouent. Ou nous pouvons aussi dire, sélectionnez cette option, entrez dans les projets Concept 320. Enfin, le dernier, disons que des officiers bruns ou blancs choisissent le dernier. Alors, avant de prévisualiser les modifications, d'accord. Passons en revue les modifications. Il y a cependant quelque chose que je voudrais vous montrer , en faisant défiler la page vers le bas. Nous y voilà. Donc, ce que je voulais vous montrer, c'est que nous n'avons pas ajouté de marge en dessous, donc cela revient ici. Sélectionnez la section Excel. Marge, bas. Cent, j'ai payé, ça. Changements. S'étendant vers le bas. On y va, donc on a un bon espacement. Voilà comment créer cette page. Et en gros, comme vous l'avez remarqué, nous utilisons les mêmes principes que ceux que nous utilisons sur la page d'accueil. Cela signifie que si vous souhaitez voir plus de pages, peut-être que vous avez une page de services ou que vous souhaitez créer une page de destination spéciale vendant un produit particulier à prix réduit, suffit d' appliquer le même JC. Glisser-déposer. Voici une nouvelle page. Tu devrais faire du mentorat à la maison. Des pages. L'annonce sera affichée ici et vous pourrez y apporter des modifications. Ensuite, je vais commencer à peindre. Dans la leçon suivante. Leçon sur la création de la page. 30. 30A Créer la configuration de la page du blog: Et bon retour. Il est donc temps de travailler sur la page du blog. Donc, la page du blog fonctionne si je pouvais simplement cliquer avec le bouton droit de la souris sur Afficher le lien ouvert dans un nouvel onglet afin que nous puissions accéder au front-end et l'examiner. Voici donc la page du blog. La page de blog fonctionne en extrayant les articles de blog que vous avez publiés ou publiés et en les affichant ici. Ainsi, chaque fois que vous publiez un tout nouveau billet de blog, il sera automatiquement affiché ici. Nous devons donc dire à WordPress : « Hé, vous savez quoi », chaque fois que je publie un nouveau billet de blog affiché ici. Alors, comment s'y prendre ? Revenons à notre tableau de bord. Et cliquons sur Modifier. Donc, comme d'habitude, commençons par un modèle qui souhaite être plein format. Passons aux paramètres Astro ou à la largeur étirée. Barre latérale. Pas de barre latérale. Activons ces en-têtes et pieds de page pour nos données. Et bien que ce soit une mise à jour, elle l'est déjà. Mais permettez-moi de passer à cet autre onglet que nous venons d'examiner. Comme vous pouvez le constater, il s'agit de l' en-tête et du dossier que nous avons désactivés et fournis par Astra. Donc, si nous ne les désactivons pas, vos pages auront toujours cet en-tête et ce dossier. Et nous avons déjà créé un dossier ici. Nous n'en avons pas besoin. C'est pourquoi nous pouvons maintenant les afficher sur cette page, car avec ce tableau , ils ne seront plus visibles si je rafraîchis la page . C'est ce que nous voulons. Nous pouvons donc avoir de l'espace libre pour créer visuellement la page avec Elementor. Très bien, maintenant que c'est fait, je vais fermer cette page. Maintenant. Sur cette page, je vais cliquer sur Modifier avec Elementor afin que nous puissions commencer à travailler dessus avec Elementor. Et on y va. Alors maintenant, bien sûr, tout d'abord, ajoutons une section pleine largeur. Et tant que la section est toujours sélectionnée, entrez dans le style de fond. Bien sûr, nous avons besoin d'une image. Et je continuerai à utiliser ce média d'insertion. Et maintenant, parce que je veux qu' elle ressemble exactement à la section consacrée aux héros que nous avons utilisée sur la page à propos. Il existe un autre moyen de créer des modèles que vous souhaiterez peut-être réutiliser à chaque fois sur de nombreuses pages. Donc, si nous pouvions rapidement revenir au tableau de bord. Allez dans les pages intérieures. Sur la page à propos , cliquez sur Modifier avec Elementor. Maintenant que nous en sommes à l' éditeur de la page à propos, et qu'elle contient des éléments que nous souhaiterions peut-être utiliser sur d'autres pages. Tout ce que nous avons à faire, c'est d'accéder à ce menu. Enregistrer en tant que modèle. Et donnons-lui un nom. Page, modèle de page Web. Bien sûr, vous lui donneriez un nom précis qui vous plaira. Cliquez sur Enregistrer. Et maintenant, il est possible de l'utiliser ou de l'insérer. Maintenant, je vais sortir d'ici. Nous pouvons donc laisser cela sur le tableau de bord et je reviendrai à l' endroit où nous étions en train de modifier la page du blog. Laisse-moi supprimer ça. Et maintenant, si nous cliquons sur cette icône de dossier ici, Elemental, nous chargeons ses propres modèles, mais nous voulons mes modèles. Il s'agit des modèles que vous avez enregistrés. Il s'agit de modèles que vous avez créés précédemment. Et maintenant, nous avons le modèle de page Web que nous avons créé, cliquez, insérez et appliquez. Et nous y voilà. Comme vous pouvez le constater, nous avons exactement le même contenu et la même mise en page que ceux de la page À propos. Mais bien sûr, nous ne pouvons garder que ce que nous voulons. Je vais donc simplement me débarrasser de ces autres sections parce que cela ne nous intéresse que de les avoir. Ils le sont. Je vais donc cliquer sur Mettre à jour. Et modifions-le pour en faire un blog. Passons à notre référence. Laisse-moi simplement cliquer sur le blog. Lisez les derniers articles de notre équipe de rédaction, copiez-les, revenez ici, sélectionnez-le, collez-le dedans, mettez-le à jour. Et maintenant, affichons les blocs de cette façon. Comme vous pouvez le voir ici, nous avons quatre articles de blog. Ce sont des articles de blog que j'ai créés pour cet exemple de site Web. Et WordPress les extrait essentiellement du tableau de bord et les affiche ici. Alors revenons ici. Cliquez sur ce signe plus. Nous allons sélectionner une section à colonne unique. Tant qu'il est toujours sélectionné. Entrez dans le top 100 de la marge avancée. Et maintenant, ici, ajoutons un blog. blog par éléments permet de le glisser-déposer dedans. Et à l'heure actuelle, il affiche les articles de blog par défaut fournis avec WordPress. Et je vais te le montrer. Comme vous pouvez le voir, HelloWorld, bienvenue sur WordPress. C'est ton premier post. Mettez-le à jour. Et voyons un aperçu des modifications. N'oubliez donc pas que nous n'avons créé aucun article de blog sur cette page. Comme je l'ai mentionné, il extrait ce contenu du back-end. Maintenant, nous devons revenir au backend et créer quelques articles de blog, les publier, et ils commenceront à apparaître ici. 31. 30B Créer la page du blog: Revenons à l'intérieur du tableau de bord. Et ici, nous avons des posts. Nous avions des pages ici, ici nous avons des articles. Cliquez donc sur Publications. C'est ici que vous trouverez la liste de vos publications. Comme vous pouvez le voir, voici le post de Hello World. Si je le visualise rapidement dans un nouvel onglet. Voilà à quoi ça ressemble. Laisse-moi fermer ça. Je veux donc le sélectionner et le mettre dans la corbeille. Appliquer. Laisse-moi fermer ça. Maintenant. Je veux dire Ajouter un nouveau. Ajoutons donc un nouveau post. Donnons-lui un nom. Par exemple, des idées de toitures pour les propriétaires. C'est donc le titre de notre billet de blog. Choisissons un modèle par défaut. Elementor, pleine largeur. Maintenant, l'image que vous pouvez voir ici est une image vedette. Ainsi, tant que nous sommes toujours dans ces paramètres, nous avons l'image en vedette, sélectionnez l'image sélectionnée. Et sélectionnons cette image d'ensemble d' images en vedette. On y va. en revenir ici, passons aux paramètres astraux. Nous pouvons également l'étirer sur toute la largeur. Pas de barre latérale. Ce tableau, comme d'habitude, publie, publie. Maintenant, si nous revenons ici à notre page où nous étions en train de modifier la page du blog, les archives du blog, et que nous actualisions la page. Vous pouvez voir maintenant qu'il affiche le billet de blog que nous avons créé. Je retourne ici. Ce que nous voulons faire, comme vous pouvez le voir ici, nous avons quelques textes, un petit bout de texte. Donc, pour en revenir ici, nous devons remplir le billet de blog avec son contenu. Ce sont les articles de blog, souvenez-vous, alors modifiez-les avec Elementor. Ici, nous pouvons simplement ajouter une section de colonne unique. Ajoutons peut-être une image. Insérez le média, et juste en dessous. Ajoutons un bloc de texte. Bien sûr, ce serait maintenant le contenu de vos de blog. article serait l'endroit où vous parlez de ce sujet spécifique sur lequel porte l'article de blog. vais voir si je peux récupérer un texte du Lorem Ipsum. Alors laissez-moi cliquer, lire l'article, copier ce Lorem Ipsum, comme vous pouvez le voir, il s'agit d'un article de blog. Supposons que le visiteur soit venu sur le billet de blog, il pourra lire ce que vous vouliez qu'il lise. Revenez donc ici, sélectionnez le contenu de ce bloc de texte en fonction de celui qui s'y trouve. Et voilà, mettez-le à jour. Et voyons un aperçu des modifications. Alors on y va. Bien sûr, vous devrez ajouter une marge en bas. 100. Prévisualisez les modifications. Et maintenant, nous avons un bel espacement. Bien sûr, ce cours a maintenant pour but de vous donner des conseils sur la façon de faire les choses. Mais bien sûr, vous devriez prendre le temps de vous assurer que votre article de blog est très bien présenté. Et il a l'air génial lorsque les clients le pendant que leurs visiteurs le lisent. Maintenant que ce billet de blog a été publié, revenons au tableau de bord. Passons aux posts. Et maintenant, le voici, poids 0. Lorsque j'ai collé cet en-tête de cet autre site Web ici, certains paramètres ont été ajoutés. Je dois le supprimer et le saisir moi-même. Donc, ce qui s'est passé, c'est que lorsque j'ai copié ce titre ici, je suis revenu en arrière. Quand je l'ai copié d'ici et que je l'ai collé ici. Je l'ai collé avec sa mise en forme depuis l'autre site Web. C'est pourquoi vous pouvez voir ce code HTML. Donc maintenant, si je le mets à jour et que je reviens en arrière, il porte le nom approprié car il ne s'agit pas d'un texte préformaté que j'ai sélectionné sur un autre site Web. Donc, ce que je veux faire, c'est créer un deuxième billet de blog à midi. Comment nettoyer votre pièce, par exemple, juste ici, dans ces paramètres, Elementor sur toute la largeur. Définissons une image en vedette. Disons que cette image vedette de l'ensemble. Et passons en revue les paramètres Astro pour le blé étiré. Pas de barre latérale. Désactivez-les. Publier. Modifions avec Elementor. Très bien, ajoutons une section de colonne unique. Cliquez dessus pour ajouter une image. Réglez l'image. Et c'est possible. Donc. Insérez le média juste en dessous. Peut-être un titre. Mets-le au centre. Et cela doit être un H1. N'oubliez pas que chaque page doit avoir un H1. Faisons ensuite glisser ce texte en dessous de leur style. Pousse-le au milieu. Revenons ensuite à ce site de référence et copions le corps des textes de ce texte, ce texte du Lorem Ipsum. Copiez ça. Retournez ici. Sélectionnez ceci, collez-le dedans. Changeons la couleur de celui-ci. Cette couleur foncée. Ce style, lorsqu'il est sélectionné, est sélectionné. Collez-le dedans. Peut-être allons-y tant que c'est encore sélectionné. Donnons-lui une marge d'essai de 50. Mettez-le à jour. C'est de la prévisualisation. On y va. Alors maintenant, permettez-moi de terminer. Et juste ici, maintenant que nous avons fini de créer ces articles de blog, cliquez sur le menu des hamburgers pour quitter le second. Revenons maintenant à la page où nous étions modifier la page d'archive de notre blog. Nous y voilà donc. Si je le rafraîchis à nouveau. Et comme vous pouvez le voir maintenant, WordPress extrait une partie de ce texte du contenu des articles de blog pour faire office de sortie ou de courte introduction afin que quelqu'un ait une idée de ce qu'il va lire en savoir plus sur la date à laquelle ils ouvrent le billet de blog. Maintenant que cela ressemble à ceci dans la prochaine leçon, voyons comment le structurer. Juste comme ça. Juste comme ça en forme de grille. Je te verrai donc dans la prochaine leçon. 32. 31 Créer la page du blog Personnaliser l'apparence: Bonjour, bon retour. Il est donc temps de travailler sur l'apparence des articles de blog. Actuellement, ils ressemblent à ceci, mais nous voulons qu'ils soient dans une grille. Voyons donc comment procéder. Si vous sélectionnez n'importe où dans l'élément entier , ces paramètres s'affichent. Maintenant, la première chose à faire est de choisir ce menu déroulant et de sélectionner la race avec le pouce. On y va. Comme vous pouvez le constater, cela commence déjà à prendre forme, mais nous devons travailler sur les couleurs. Très bien, alors allons-y et changeons la couleur de fond. Je vais entrer dans le style. Et si nous réduisons cela un instant, nous avons ces six options. Nous avons ces six panneaux. Alors maintenant, ouvrez l'arrière-plan du wrapper. Choisissons une couleur blanche ou grisâtre. Je veux des couleurs légèrement grises pour qu'elles ressortent. Ensuite, choisissons Allons le réduire et entrons à l'intérieur. Marée. Je veux le rendre noir. Alors typographie, allons-y et choisissons cette couleur foncée. On va le coller dedans. En vol stationnaire. Nous voulons être aussi jaunes. Je vais donc le copier. Coloriez, collez-le dedans. Alors maintenant, il devient jaune lorsque nous le survolons. Nous pouvons également travailler sur la topographie. Famille de polices. Passons à Montserrat. Revenons ici et mettons-le au centre, comme cet alignement central. Nous pouvons également augmenter le poids de la police à environ 800. Comme ça. Passons au contenu. C'est ici que nous allons modifier ce texte. Donc, la couleur, nous voulons aussi que ce soit cette couleur foncée, comme ça. Et maintenant, remarquez que nous avons trop de textes ici. Nous voulons que cela se trouve jusqu'à quelque part ici, et non pas tous ces textes. Revenons donc au contenu. Et nous avons recadré le contenu mot par mot. Disons donc 20 mots. Nous voulons seulement afficher 20 mots comme extrait. Et je pense que c'est un bon chiffre. Revenons donc au style intérieur, augmentons l' espacement entre le bouton et ce texte. Donc, réduire l'emballage et passer au contenu. Nous pouvons augmenter la marge inférieure en commençant par Breaking Bad, puis en augmentant la marge inférieure. Et centralisons le texte. Juste comme ça. Allons à l'intérieur du bouton. Changeons la couleur. Les textes sont donc colorés, laissons-les sur fond blanc. Allons-y et choisissons cette couleur foncée. Colle-le là-dedans. Et pas de survol. Ou peut-être pouvons-nous le rendre jaune. Nous allons donc sélectionner cette couleur jaune. En vol stationnaire. Nous voulons que ce soit cette couleur foncée. Copiez ça, collez-le dedans. Juste comme ça. Très bien, alors remarquez maintenant que le bouton se trouve sur le côté gauche afin que nous puissions l'aligner au centre en revenant sous le contenu. Bouton En savoir plus. Mettons-le au centre comme ça et mettons-le à jour. Bien sûr, cet élément possède de nombreux autres paramètres avec lesquels vous pouvez jouer jusqu'à ce que vous aimiez les résultats. Donc, en gros, c'est ainsi que l'on crée la grille. Je vous suggère de continuer à expérimenter avec tous ces différents paramètres et de voir la meilleure façon de présenter votre article de blog. Prévisualisons donc les modifications. Et c'est notre page de blog ou notre poids. Nous devons donc ajouter une marge au bas de cet élément avant de terminer cette partie. Sélectionnez donc la section verte, côté avancé, marge inférieure, 100. Une mise à jour qui change vraiment. Défilons vers le bas et ça a l'air bien. Donc, en gros, voici comment créer la page d'archive du blog. Plus vous publiez d'articles de blog, plus vous les afficherez ici. Et encore une chose que je voulais mentionner, c'est que vous remarquerez que si nous revenons dans la mise en page condensée du contenu, nous avons la partie requête. C'est de là que nous sommes pressés, que nous extrayons les données. Wordpress affiche désormais les articles de blog qui se trouvent dans la catégorie Non classé. Mettez-le d'abord à jour. Si nous allons dans le tableau de bord, vous remarquerez que nous avons ces deux articles de blog et qu'ils se trouvent dans la catégorie Non classé. Nous pouvons créer différentes catégories et demander à WordPress de n'afficher que de blog de cette catégorie spécifique. Disons par exemple et un article, créons une catégorie. Je vais donc sélectionner la catégorie et je pourrai lui donner un nom. Réparations de toitures. Je vais juste appuyer sur Entrée. Cela créera automatiquement un slug pour nous. Donc, si nous disons modification rapide, c'est le slug, comme vous pouvez le voir. Vous pouvez également prendre cette étape ici si vous voulez qu'elle soit différente ou ici. D'accord ? Très bien, revenons maintenant à tous les articles. Et changeons l'une de ces catégories, par exemple celle-ci. Passons à, nous pouvons modifier la catégorie ici. Nous pouvons rapidement modifier et changer leur catégorie ici. Décochez cette case et cochez-la, puis mettez à jour. Et maintenant, elle fait partie de la catégorie des réparations de toitures. Nous pouvons également accéder à l'édition interne. Et ici, dans les paramètres de Wordpress, nous pouvons faire défiler l'écran vers le bas et trouver des catégories. heure actuelle, comme nous avons choisi la réparation du toit, comme vous pouvez le voir, c'est une réparation de toit. Donc, si nous avons plusieurs catégories, nous pouvons en sélectionner une d'ici. Et ce billet de blog sera dans cette catégorie. Revenons maintenant au front-end. Dans le contenu de cette requête, tant que c'est le cas, cet élément est sélectionné, entrez dans la requête. Fermons ces options et sélectionnons uniquement les réparations de toitures. Alors maintenant, comme vous pouvez le constater, WordPress affiche uniquement le billet de blog qui appartient à la catégorie des réparations de toitures. Nous pouvons également dire, si nous le supprimons et choisissons Non classé. Il affiche désormais les seuls articles de blog de la catégorie Non classé. N'oubliez pas qu'il ne s'agit que d'un seul article de blog dans la catégorie Non classé. Si vous souhaitez les afficher tous les deux, il suffit d'ajouter la catégorie Réparation de toitures ici également. Vous pouvez ajouter autant de catégories que vous souhaitez et elles seront affichées ici. Donc nos données. Et voyons un aperçu des modifications. Et on y va. Voilà comment embellir ou personnaliser la mise en page de la page d'archive du blog. Il est temps maintenant de rendre votre site Web réactif aux différentes tailles d'écran. Cela concerne les écrans mobiles, les tablettes, et cela s'affiche déjà bien sur les ordinateurs de bureau. Travaillons donc sur les deux autres. Je te verrai donc bientôt. 33. 32 Rendre le site Web sensible à l'en-tête (mis à jour): Salut, bon retour. avons donc presque terminé avec un site Web, mais nous devons le rendre réactif sur les écrans mobiles et les tablettes. Donc, avant de commencer à travailler là-dessus, voyons à quoi cela ressemble selon moi sur ces appareils. Clavier, Control Shift I. Et cela ouvrira les DevTools. Ne vous inquiétez pas pour tout ce code. Tu n'as pas besoin de toucher à ça. La seule chose qui nous intéresse ce sont ces appareils. Chaque navigateur permet d'imiter différentes tailles d'écran pour aider les développeurs à voir comment leur site Web sera prêt à utiliser les différentes options de taille d' appareil . Cliquez sur cette petite icône ici. Et maintenant, cela va exposer ces paramètres. À quoi ça ressemble sur un iPad Air. Si je vais sur Samsung Galaxy, le site Web s' appelle Samsung Galaxy. Certains éléments sont déjà bien alignés, mais nous devrons faire quelque chose au sujet de l'en-tête. Comme vous pouvez le voir, voici le menu, la barre de navigation, le pied de page. Nous ne travaillons pas. Voyons comment nous pouvons évoluer sur Surface Pro 7. Voilà à quoi ça ressemble. Maintenant que nous voyons à quoi cela ressemble sur différentes tailles d'écran. Enlevons-le et fermons le Neptune. Maintenant, refaites des modifications avec Elementor. Cliquez ensuite sur notre en-tête qui nous mènera à l'endroit. Et QBR, comme vous pouvez le voir, l'en-tête est modifiable. Je vais sélectionner cette section , puis cliquer sur ce mode réactif. Je peux écrire ici sous forme de dossier qui fera apparaître les paramètres qui nous intéressent Commençons par un écran mobile. Je vais cliquer dessus. Et bien sûr, comme vous pouvez déjà le constater, c'est un autre endroit où nous pouvons voir l'apparence de notre site Web que je voulais juste que nous voyions sans ces options d'édition. Donc, alors que le second est toujours sélectionné. Maintenant, la première chose que nous devons comprendre pourquoi nous les rendons réactifs est que si nous pouvons revenir au mode bureau, y a deux colonnes à l'intérieur. Un, tel que celui qui va de la gauche vers la droite. De gauche à droite , c'est 100 %. Cela représente donc un pourcentage. Marques de boutons Nice Now. Donc, pour y revenir, quand c'est petit, les colonnes sont des laboratoires et s'empilent les unes sur les autres. Et ils occupent 100 % de la semaine. Donc, à l'heure actuelle, cette colonne contenant le logo occupe 100 % de la largeur en partant de la gauche et de la droite. Nous pouvons atteindre 50 %. Alors, pendant qu'il est sélectionné, ajoutons-le à la colonne. 50 %. Juste comme ça. Maintenant, la barre de navigation est toujours à 100 %. C'est pourquoi il est empilé ci-dessous. Si nous le sélectionnons, nous pouvons également gagner 50 %. Et maintenant, ils achètent tous les deux 50 %. Il semblerait que vous deviez également appuyer sur le menu. Nicole est trop près du bord. Tout est sélectionné. Passons à la marge avancée. C'est super. Cette marge est en haut. Augmentez-le jusqu'à dix, puis margez à droite. Jusqu'à dix. Mettez-le à jour. Passons en revue le changement et voici à quoi il ressemble. Mais bien sûr, nous devons appuyer sur Control Shift I, puis accéder à cet élément, puis passer à l'un des petits appareils comme l'iPhone SE. Et voilà à quoi ça ressemble. Très bien, alors revenons ici, passons au mode tablette. Et il y a une petite bouteille d' Elementor qui touche les gens probablement de petits moyens, comme le mien. Le mien mesure environ 7 m. Et le petit bug, c'est que c'est pour voir le reflet des modifications que nous apportons pendant que nous travaillons sur le mode tablette. Il va falloir faire traîner les choses un peu, juste comme ça. Il a besoin de l'étendre un peu. Et je ne sais pas pourquoi cela se produit, mais si vous ne le faites pas glisser et ne l'élargissez pas, vous ne verrez pas les modifications que vous apportez. Maintenant. Comme vous pouvez le constater, nous pouvons voir les modifications que nous avons apportées. Eh bien, nous sommes en mode écran mobile. Et maintenant, revenons au mode tablette, comme vous pouvez le voir, c'est de cela que je parle. Donc, si, par exemple, je sélectionne cette option et choisis 50 %, vous ne verrez aucun changement. Mais si je le traîne un peu, vous pouvez maintenant voir qu'il occupe 50 %. Soyez donc conscient de cela. Si je sélectionne cette option et que je lui donne 50 %. Maintenant, bien sûr, nous devons le réduire beaucoup plus. Donc, en sélectionnant peut-être quelque chose comme 30 %. Maintenant, cela signifie occuper 75 %. Pour la droite. Maintenant, laissez-moi sélectionner le menu. Réduisez la marge. Et si vous ne voyez pas ces poignées ici, il suffit de les déplacer vers le haut pour augmenter la valeur jusqu'à dix. Ou utilisez les flèches haut et bas du clavier de votre ordinateur. Je vais également augmenter la marge droite. Mettez-le à jour. Prévisualisez donc les modifications. Si nous passons à l'iPad Air, ce sont nos jambes. Retourner ici. Si nous sélectionnons le menu, il affichera la barre de navigation réelle et nous pouvons l'ajouter ici. Donc, en revenant dans Contexte, Menu, Paramètres, logo du menu, comme ceci, insérez un média. Maintenant, si nous ouvrons le menu, ce sont nos fessiers, n'est-ce pas ? Une autre chose que vous avez peut-être remarquée est cet effet d'aperçu. Nous voulons changer cela. Voyons à quel point le menu s'affiche bien, mais revenons au style : réduisons l'enveloppe du menu. Nous pouvons travailler sur le style Little Hamburger. C'est le style hamburger. Ainsi, par exemple, pour la couleur de fond, vous pouvez lui donner la couleur de votre choix. Mais bien sûr, je veux parler de cette couleur jaune. Copiez ça. Collez-le dedans. Et maintenant, c'est de la couleur noire. Mettez-le à jour. Et bien sûr, même sur les écrans mobiles, ce jaune sera toujours aussi jaune car couleur affecte toutes les tailles d'écran. Voilà comment modifier l'en-tête. Il est désormais réactif sur toutes les tailles d'écran. Ça a l'air génial. Dans la leçon suivante, nous allons également voir comment créer des réponses dans un dossier. Je te verrai donc bientôt. 34. 33 Rendre le site Web sensible au pied de page: Et nous sommes de retour. Donc, pour rendre la photo réactive, nous allons suivre les mêmes principes que ceux que nous avons suivis ici sur l'en-tête. Alors tout d'abord, voyons un aperçu de ces changements. Et ce que je veux faire, c'est quitter les outils de développement. Et je veux sélectionner la page d'accueil. Passons maintenant le curseur dessus. Sélectionnez ensuite le dossier. Il s'agit d'un raccourci vers différents éditeurs. Très bien, nous y voilà. Nous allons sélectionner cette icône ici, en mode responsive. Passons en mode tablette. Et bien sûr, tirons-le un peu vers l'extérieur. Et maintenant, cela reflète fidèlement ce que nous avons actuellement. Nous devons apporter quelques modifications mineures ici. Réduisons par exemple la taille de cette police pour qu'elle figure une seule ligne. Jusque-là. Il est également mal réduit. Abonnez-vous à notre infolettre. Très bien, nous pouvons donc pousser ça un peu vers l'intérieur. Je vois que c'est beaucoup plus proche du bord que les textes. Donc, pendant que c'est sélectionné, avancé, cassez ça. Et puis, diminuons un peu jusqu'à ce point. Mettez-le à jour. Très bien, passons maintenant aux smartphones. Voilà à quoi cela ressemble sur les smartphones. La première chose que je veux faire est de sélectionner ce corps de texte. Alignez le centre, sélectionnez ces icônes sociales, alignez-les au centre. Sélectionnez ce texte. Je vais également l'aligner au centre. Tellement content. Maintenant, souvenez-vous que ces deux colonnes sont empilées l'une sur l'autre. Nous pouvons simplement les diviser en deux. Sélectionnez cette option et vous recevrez 50 % de blé. Identique à cette fonctionnalité présente. Et maintenant ils sont tous les deux côte à côte. Ensuite, mettons ça au centre. Alignez au centre et inscrivez-vous pour obtenir le formulaire. Ça a tout simplement l'air génial. Nous nous inquiétons de la facilité. Alors mettez-le à jour. Prévisualisons les modifications. Donc, si nous appuyons sur Control Shift I, voici à quoi cela ressemble sur une tablette. Et si nous passons peut-être au Samsung Galaxy S8, voici à quoi cela ressemble sur un Samsung Galaxy. Je crois que j'aime ça comme ça. Et c'est ainsi que la photo peut réactive aux différentes tailles d'écran. Dans la prochaine et dernière leçon, nous allons faire en sorte que les parties du corps des différentes pages soient réactives sur toutes les tailles d'écran. Je te verrai bientôt. 35. 34 Rendre le site Web sensible à la page d'accueil: Bienvenue à nouveau. Nous en avons maintenant terminé avec l' en-tête et le pied de page. Les deux sont réactifs. Travaillons sur les parties du corps des pages. Donc, pour rentrer chez moi, je vais sélectionner cela. Maintenant, nous sommes de retour à la maison. Commençons donc par la page d'accueil. Je vais donc sélectionner cela afin que nous puissions commencer directement à le modifier. Et nous y voilà. Alors bien sûr, la première chose à faire est de cliquer sur l'icône du mode réactif et cela révélera les paramètres. Passons en mode tablette. Et bien sûr, élargissons-la un peu. Si vous avez un écran large, je ne pense pas que ce sera un problème. Vous verrez simplement que tout fonctionne correctement. Maintenant, nous voulons pousser ce texte un peu vers l'intérieur. Comme vous pouvez le voir, notre en-tête est superbe, et si je fais défiler la page jusqu'en bas, notre photo est superbe. Il suffit donc d'apporter quelques modifications mineures au contenu du corps. En sélectionnant cette colonne, entrez dans la marge avancée sur la gauche. Augmentons-la un peu. Juste comme ça. Et je pense que c'est un endroit agréable. Et c'est lisible. Faites défiler l'écran vers le bas. J'aime toujours l'endroit où il se trouve, donc je n'y toucherai pas. Faisons de même pour cette colonne. Sélectionnez la colonne Rembourrage avancé. C'était 90. Mais sur la gauche, passons à l' entraînement comme ça. Nous allons sélectionner cette colonne. Rembourrage avancé sur la gauche. Donnons-lui 20 sur la droite. Juste comme ça. Ça a l'air génial. Répétons ce que nous avons fait. Sélectionnez cette option avancée. Il y en a 126 au sommet. Alors, nous allons juste vous en donner 120. Faisons en sorte que ce soit à 100 %. Alors oui, faisons-le à 100 %. Juste comme ça. Permettez-moi de supprimer ce rembourrage pour cette colonne contenant l'image. Faisons également en sorte qu'il soit à 100 %. Et maintenant, donnons-lui un rembourrage de 20 sur la droite. Donc n'importe lequel sur la gauche, 50 en haut. Il en va de même pour cette sérine. Et une astuce intéressante est de placer cette image avant ces textes sur les écrans des tablettes, tout avant ces textes sur les écrans des tablettes, conservant exactement là où elle se trouve sur l'onglet des écrans de bureau. Nous avons donc cette fonctionnalité dans Elemental où si je la sélectionne et que je vais à cet endroit, je peux sélectionner cette section contenant ces deux colonnes. Et en accédant à Advanced Responsive, nous pouvons inverser les colonnes sur tablette. Et cela amènera la colonne qui était en dessous, au-dessus de celle qui était la première. Alors on y va. Mettons également cela au centre. même cas s'applique. Mettons-le vers le centre. Et il semble y avoir une marge étrange en bas. Nous allons donc sélectionner ce texte. Avancée. Casse ça. Et maintenant, nous l'avons réinitialisé. Prévisualisons les modifications apportées jusqu'à présent. Avant de prévisualiser, cela change. Mettons-nous au travail. Agrandissons un peu cette image. Sélectionnez cette colonne, peut-être 35 %, pour que ce chiffre passe à 65 %. Et à l'heure actuelle, nous avons trop de marge au sommet. Donc je vais sélectionner ça, passer à l'étape avancée et casser ce qu'il avait eu AT, nous pouvons l'augmenter légèrement jusqu'à ce moment-là. Maintenant, c'est équilibré. Je trouve que la section des témoignages est bonne. Mais nous avions une certaine marge à gauche et à droite. Tellement avancé. Enlève ça. Et comme vous pouvez le constater, nous pouvons dire que cela ressemblera à cela sur cet appareil, mais pas sur d'autres appareils. Ce ne sont donc que les paramètres qui s'appliqueront à la tablette. Donc, en faisant défiler vers le bas. Il y en avait un peu, je pense, je trouve que cela a l'air bien, mais réduisons un peu ce texte car, comme il est trop près du bord, nous pouvons également réduire la taille de ce texte. Il y a quelqu'un là-bas, je trouve que ça a l'air mieux. Mettons-nous à jour. Prévisualisez les modifications. Control Shift. I. Passons au mode tablette, iPad Air. Et commençons à faire défiler la page. Très bien, nous avons donc ce problème. Je pense que nous devons modifier les paramètres par défaut que nous avions sur notre bureau. Donc je vais casser ça, je vais sélectionner cette colonne. Accédez à la section Avancé. Retirez-la, puis retirez-la. Maintenant, configurons-le à nouveau. Marge supérieure. J'appuie sur la flèche vers le bas de mon clavier. C'est un bon endroit pour le rembourrage. Donnons-lui environ 30. C'est bon. Mettez-le à jour. Et on y va. Alors maintenant, ça a l'air bien. Défilant vers le bas. On y va. La page a donc l'air géniale. Et c'est ainsi que la partie du corps réactive aux différentes tailles d'écran. Voyons comment procéder sur la page à propos. Avant de terminer. Je te verrai bientôt. 36. 35 Rendre le site mobile sensible à la question de la panie: En ce moment, nous sommes sur le point de travailler sur la page À propos de nous. Mais j'ai pensé que je devrais te donner un exercice à faire avant la fin du cours. Passons donc à la page À propos. Et comme vous pouvez le constater, voici à quoi cela ressemble sur les tablettes. Et si nous passons aux écrans mobiles, voici à quoi cela ressemble, non ? Je pense que c'est un bon exercice pour vous familiariser avec la création de pages réactives. Nous n'avons pas abordé la manière de rendre de telles sections réactives. Prenez donc un moment et donnez votre page une apparence géniale sur les écrans mobiles et les tablettes. Encore une fois, en passant à la page du blog, voyons à quoi elle ressemble. Donc, en faisant défiler vers le bas. Par défaut, la page du blog est géniale. Il n'y a donc pas beaucoup de travail ici. Mais si vous souhaitez apporter quelques modifications pour le rendre plus présentable sur différentes tailles d'écran. Vas-y, fais-le. Cela dit, vous aurez remarqué que nous n'avons pas abordé la page de contact, mais c'était délibéré. La page de contact fait donc également partie de votre exercice. À la fin de ce cours, créez une belle page de contact. Appliquez les mêmes principes que ceux que nous avons appliqués lors de la création de ce formulaire. Il suffit de créer le formulaire dans Terminator et afficher dans le front-end de la page de contact à l'aide d'un code court. Soyez créatif, consultez d'autres sites Web et voyez à quoi ressemblent leurs pages de contact et essayez de recréer quelque chose comme ça. Cela dit, j'ai encore quelques réflexions finales. Je vous verrai donc lors de la dernière leçon de ce cours. bientôt. 37. 36 Réflexions finales: Félicitations. Si vous êtes arrivé jusqu'ici, cela signifie que vous avez terminé. Beaucoup de gens sont capables de commencer quelque chose, mais tout le monde n'est pas capable de le terminer. Certaines personnes se laissent distraire, d'autres abandonnent simplement en cours de route. Mais tu es arrivée jusqu'ici. Cela en dit long sur le genre de personne que vous êtes. Du plus profond de mon cœur. Je voulais juste te remercier d' être venu jusqu'ici et te féliciter d' avoir terminé ce cours. Vous avez maintenant les compétences nécessaires pour créer tout type de site Web que vous souhaitez à partir de zéro en utilisant WordPress et Elementor. C'est toujours un plaisir de vous avoir ici. Et pour terminer, j'ai juste une petite faveur à vous demander. Pourriez-vous prendre juste 1 minute de votre temps et laisser une critique de ce cours juste en dessous de cette vidéo. Et si je demande une évaluation, c'est pour que vous aidiez d'autres étudiants à découvrir ce cours. Plus le cours aura de critiques, plus les autres étudiants qui recherchent ce type de cours pourront trouver, car l'algorithme Skillshare pousse la classe vers le haut et permet il est plus facile à découvrir par un plus grand nombre d'étudiants. prenez donc qu'une minute de votre temps et Ne prenez donc qu'une minute de votre temps et faites savoir aux autres étudiants ce que vous avez découvert à propos de ce cours. Comment te sens-tu ? Qu'est-ce que tu as aimé dans ce cours ? Est-ce que vous le recommanderiez aux débutants ou aux apprenants de niveau intermédiaire ? Et ce sera un excellent moyen de faire de Skillshare un meilleur endroit. Encore une fois, je tiens à vous féliciter d' avoir terminé le cours. Et c'est tout pour moi pour le moment. Jusqu'à la prochaine fois. Restez créatif, restez productif et n'oubliez pas de me suivre pour être prévenu lorsque je publie un nouveau cours. Je te verrai plus tard. Pièce.