Créer un site Web de marque personnelle avec Elementor et WordPress (plugins GRATUITS)

1. Intro: Et bienvenue dans un autre super cours d'Elementor avec moi, Ken Maintenant, dans ce cours, vous allez apprendre Elementor en créant site Web de marque personnelle d'une page pour promouvoir vos services professionnels auprès de clients potentiels L'objectif est de vous apprendre Elementor, mais nous allons le faire de manière pratique Nous allons partir d'une installation WordPress noire et la transformer progressivement en un site Web complet, entièrement fonctionnel et réactif. Maintenant, l'idée de ce cours est très simple. Plutôt que de vous enseigner widgets, des éléments et des fonctionnalités d'Elementor au hasard, nous allons utiliser Elementor pour créer pratiquement un véritable site Web que vous pourriez utiliser pour vous présenter, votre travail et vos services Cela signifie que nous allons créer la section latérale section par section, y compris une section dédiée aux héros, un en-tête de navigation qui reste en haut lorsque vous faites défiler une section de services, une section portfolio, des témoignages, un formulaire de contact et le pied Nous veillerons également à ce que tout soit esthétique et fonctionne correctement sur les ordinateurs de bureau, les tablettes et les appareils mobiles. Tout au long du cours, je vous expliquerai l'ensemble du processus étape par étape, y compris les petits détails qui aident à transformer une page WordPress de base en quelque chose de professionnel. À la fin de ce cours, vous aurez une meilleure compréhension de WordPress et d' Elementor et aurez un site Web complet que vous pourrez continuer à personnaliser Si vous êtes un indépendant, un designer, un professionnel de la création ou un fournisseur de services qui souhaite créer un site Web personnel pour vous-même, laissez-moi vous montrer comment le faire avec Elementor Donc, si vous avez hâte de commencer, allons-y. Rendez-vous dans la prochaine leçon. 2. Aperçu du projet: Bon retour. Je veux juste vous montrer exactement ce que vous allez créer dans ce cours. Il s'agit de votre projet de classe. Permettez-moi donc de rafraîchir la page. Comme vous pouvez le constater, nous avons une section consacrée aux héros avec cette jolie animation d'entrée. Nous allons voir comment procéder en défilant vers le bas. Nous avons cette contre-section. Nous avons une section consacrée aux services. Section des travaux précédents, dans laquelle vous présenterez certains de vos travaux antérieurs, et où quelqu'un pourra cliquer dessus pour ouvrir d'autres parties de votre travail. Comme vous pouvez le constater, lorsque vous cliquez dessus, votre portefeuille s'ouvre. Dans ce cas, cela ouvre mon portfolio sur les témoignages de clients de hands.net Vous pouvez définir la vitesse ou la lenteur à laquelle vous souhaitez qu' ils défilent. Le visiteur peut également naviguer ou défiler manuellement pour lire les différents témoignages Ensuite, nous avons une section réservée ou section contact où l' utilisateur peut choisir un service, peut-être même deux services, puis décrire le projet le plus clairement possible, puis fournir son nom et son adresse e-mail, puis demander un devis. Lorsque vous le recevrez, vous pourrez le lire puis y répondre ou leur envoyer un e-mail pour plus de détails. Et puis nous avons un pied de page. Le spectateur peut également cliquer dessus pour ouvrir à nouveau votre œuvre. Si nous revenons en haut de page, comme il s'agit d'un site Web d'une seule page, ces liens naviguent à l' intérieur de cette page, mais vers la bonne section Donc, si je clique sur Services, cela passe dans le portefeuille de la section des services. Il renvoie à la section de travail précédente. Contact, il passe dans la section contact. Je reviens au sommet. Nous avons également un bouton de services ici. Nous lançons simplement au visiteur autant d'appels à l'action que possible Notre objectif est de leur permettre de cliquer sur des boutons et d'effectuer l'action que nous voulons. Voici donc un bref aperçu de ce que vous allez créer dans ce cours. Nous sommes maintenant prêts à commencer à travailler dessus. Je vous verrai donc dans la prochaine leçon. 3. Installer WordPress: Il est temps d'installer WordPress. Et la façon de le faire est d'utiliser le panneau C. Chaque hébergeur WordPress vous fournira un panneau C pour installer WordPress, découvrez comment accéder à votre panneau C en fonction de votre hébergeur. Je vais donc cliquer sur Accéder au panneau C. Nous voici donc à l'intérieur du panneau C. Et l'un des onglets du panneau C sera le programme d' installation des applications Sof tacular, qui intègre WordPress Il suffit donc de cliquer sur WordPress. Et vous serez redirigé ici où vous pourrez installer WordPress. Je vais donc cliquer sur Installer maintenant ici, nous devons choisir une URL. Maintenant que vous avez acheté un nom de domaine, il sera répertorié ici. Si vous en avez plusieurs, ils figureront dans ce menu déroulant. Et autre chose, j'aime bien choisir ce préfixe, HTTPS www point sur votre nom de domaine Donc, lorsque je clique à l'extérieur, il vérifie si j' ai un certificat SSL. Si je n'ai pas de certificat SL, vais utiliser HTTP ou HDTP Assurez-vous donc d'avoir un certificat SSL pour indiquer aux visiteurs que votre site Web est sécurisé. N'ajoutez rien ici. Votre site Web sera donc www point, votre domaine point, votre extension. Donnons un nom au site Web. Je vais l'appeler Alex Dow. Designer visuel professionnel. C'est un site web de portfolio. Ce sont les identifiants vous aurez besoin pour vous connecter directement à WordPress au lieu de passer par le panneau C. Assurez-vous donc de les dire quelque part. Je vais juste les copier et ouvrir un bloc-notes, les coller juste là, copier le mot de passe Vous n'avez pas besoin de copier cet e-mail, mais je vais le copier de toute façon. Vous n' avez pas besoin de le copier. Et vous aurez des plugins présélectionnés qui seront installés avec Web Press en fonction de votre hébergeur. Certains hébergeurs ne les ont pas. Je n'ai donc pas besoin de tout cela pour les vérifier tous. Si vous optez pour Advance, vous souhaiterez peut-être modifier les sauvegardes de base conservées par votre hébergeur sur une base hebdomadaire. Maintenant, je ne change généralement pas cela, je le laisse juste par défaut. Ce sont donc les seuls paramètres que vous devez vraiment examiner. Ensuite, je vais lancer l'installation. Nous y voilà. WordPress est donc installé avec succès, et nous avons l'URL administrative. Si nous cliquons, cela sera redirigé vers le tableau de bord WordPress de votre site Web. Comme vous pouvez le voir, nous y voilà, le site web que nous avons créé était Alex Doe. Oui, alors félicitations. Vous avez installé WordPress. Maintenant, souvenez-vous des identifiants de connexion que nous venons de mettre dans ce bloc-notes Si nous nous déconnectons de ce site Web, de connexion nous seront demandées. C'est donc là que nous allons l'utiliser, le copier, coller le nom d'utilisateur et le mot de passe. Collez ça. Souviens-toi de moi. Alors connectons-nous. Et nous y voilà. Voilà comment installer WordPress. Nous sommes maintenant prêts à passer à l'étape suivante, qui consiste à installer une épingle WordPress. Je te verrai bientôt. 4. Installez un thème WordPress: Une fois WordPress installé, il est temps d'installer notre thème WordPress. Passons donc aux thèmes d' apparence. Et je vais aller sur Ajouter un nouveau. Ce sont les thèmes par défaut fournis avec chaque installation de Wordpress. Maintenant, nous sommes en 2026, mais la dernière fonctionnalité active fournie par défaut avec Wordpress est 2025 Il semble qu'ils n'en aient pas créé un nouveau en 2026. Je vais donc simplement dire Ajouter un élément parce que nous voulons utiliser un objet personnalisé appelé Astra C'est l'une des meilleures choses que vous puissiez utiliser dans WordPress. Je vais donc dire installer, activer. Et maintenant, Astra est active. Ce ne sont que des publicités de leur part. Fermez ça. Astra est donc désormais notre thème actif. Maintenant, dans la leçon suivante, installons un lamentor Je te verrai bientôt. 5. Installez Elementor: Il est maintenant temps d' installer Elementor , le plugin que nous allons utiliser comme générateur de pages par glisser-déposer Passons donc aux plugins. Tout d'abord, il suffit de cliquer sur les plugins pour voir la liste des plugins par défaut fournis avec chaque installation de WordPress. Et c'est ce chisme et Hello Dolly. Je vais juste les sélectionner toutes, puis les supprimer. Appliquer. Nous n'en avons pas besoin. Ensuite, je dirai ajouter un plugin. Ici, cherchons Elementor. Ce sera le premier choix avec plus de 10 millions d'installations actives. Je vais dire installer maintenant. Allons-y et activons-le. Et maintenant, Elementor est actif sur notre site Web. Une fois que vous l'avez installé, vous verrez cet Elementor ici Mais tu n'as pas besoin d'y aller et de changer quoi que ce soit. Nous n'avons pas besoin de nous en mêler. Passons maintenant aux pages. Nous avons quelques pages par défaut ici. Je vais les supprimer, alors sélectionnez-les tous et mettez-les dans la corbeille. Appliquez ça. À présent, dans la leçon suivante, décourageons l'indexation. Je vais vous dire ce que c'est sous peu. 6. Décourager l'indexation: Prêt à commencer à créer notre site Web. Mais il y a une chose que nous devons faire avant de poursuivre, c'est de décourager les moteurs de recherche d'indexer le site Web tel qu'il est Google, Bing et d'autres moteurs de recherche envoient leurs robots ou leurs robots pour rechercher de nouveaux sites Web et les ajouter à leur base de données pour les mettre à la disposition des internautes Vous ne voulez pas que Google rende votre site Web disponible pour l'instant parce que vous ne l'avez pas créé. Cela a donc un effet négatif sur votre référencement. Nous voulons donc dire aux moteurs de recherche de ne pas indexer ce site Web pour l'instant. Ce n'est pas prêt pour le public. Passons donc aux paramètres, à la lecture, décourageons les moteurs de recherche d'indexer ce site Et enregistrons les modifications. Nous y voilà. Dans la leçon suivante, commençons à créer notre site Web d'une seule page. Je te verrai bientôt. 7. Créez une page Web unique: Il est maintenant temps pour nous de créer notre page Web unique. Passons donc aux pages. Et n'oubliez pas que nous avons supprimé les deux pages par défaut fournies avec Webpress. Nous n'en avons pas besoin. Disons simplement, tout d'abord, débarrassons-nous de cela et ajoutons une page. Donnons-lui un nom. Je vais juste l'appeler chez moi. Commençons par définir ce modèle comme une page Web complète. Maintenant que nous en avons fini avec cela, allons-y. Au fait, ce paramètre de modèle est un paramètre élémentaire Ce n'est pas un paramètre WordPress, d'ailleurs. Passons maintenant aux paramètres Astro, et pour le conteneur, nous voulons un conteneur pleine largeur Barre latérale, nous ne voulons pas de barre latérale, donc pas de barre latérale. Et ces éléments, nous devons les désactiver. Avant de les désactiver, publions cette page Web et voyons de quoi il s'agit. Je dirais donc publier publier. Et maintenant, si nous voyons la page dans un nouvel onglet, c'est le moment de fermer ceci. C'est l'en-tête ici car il s' agit d'un thème Astra Il est livré avec un en-tête et un pied de page par défaut , et quel est cet autre élément, une zone de bannière. Il y a ici une zone de bannière qui est fournie par défaut. Nous ne voulons rien de tout cela car nous voulons créer cette page à partir de zéro en utilisant les fonctionnalités glisser-déposer d'Elementor Revenons donc ici désactivons-les tous , puis sauvegardons. Est-il sauvegardé ? Oui, voyons la page. Et maintenant, c'est une toile blanche. Alors fermons-les tous. Maintenant que notre page est créée, revenons à la liste des pages que nous avons. Et comme vous pouvez le voir, nous avons la page d'accueil ici. Une autre chose que nous voulons faire est lorsque vous visitez le domaine d'un site Web, il doit accéder à la page d'accueil. Donc, pour le moment, si nous prenons le domaine, copions, ouvrons un nouvel onglet et le collons, c' est l'équivalent de votre domaine .com ou .net, Si vous y allez maintenant, il y a une autre page. Ce n'est pas la page par défaut que nous voulons. Nous voulons que la page que nous venons de créer soit la destination de notre domaine. Nous devons donc indiquer à WordPress quelle page nous voulons faire de notre page d'accueil par défaut. Passons donc aux paramètres, à la lecture. La page d'accueil affiche vos derniers articles actuels. C'est pourquoi nous voyons cela. Mais nous voulons vous dire que non, choisissons une page statique comme page d'accueil. Quelle page d'accueil ? Voici notre page d'accueil. La page que nous venons de créer, Enregistrer les modifications. Et maintenant, si nous le rechargeons, le domaine racine pointe vers notre page blanche, que nous allons remplir avec notre design Je pense donc que nous allons nous arrêter là. Dans la leçon suivante, commençons à créer notre section héros. 8. Créer une section pour votre pro.: Nous voici maintenant sur le site de référence. Je veux juste que nous voyions la section des héros que nous allons créer. Voilà à quoi ça ressemble. Alors, comment s'y prendre ? Passons à notre projet. Passons maintenant aux pages, et nous avons installé Elementor, mais nous n'en avons pas fait une page Elementor Disons modifier. Et ici, nous avons modifié avec Elementor. Alors cliquez dessus. Cela transformera la page en une page modifiable par éléments Nous voici donc à l'intérieur d'Elementor. Donc, la première chose que vous remarquerez ici c'est que nous avons des éléments atomiques. Je vais tout détruire. Ce sont de nouveaux éléments créés dans la dernière version d'Elementor, mais ils sont très limités car fonctionnalités les plus importantes sont cachées derrière un paywall Par exemple, le bouton, si vous le déposez ici et que vous souhaitez ajouter des effets de survol, si je le survole, je veux qu'il change de couleur Si je veux créer une interaction, comme vous pouvez le constater, les effets de survol se cachent derrière un paywall Donc, on ne peut pas travailler comme ça. Si je n'ai pas accès aux effets de base tels que les effets de survol, je ne veux pas utiliser ce nouveau système Je voulais juste te montrer ça. Débarrassons-nous de ça. Nous n'allons donc pas du tout utiliser d'éléments atomiques. Nous voulons utiliser les éléments gratuits populaires et originaux que nous avons toujours utilisés. C'est le système de conteneurs au lieu du système d' éléments atomiques. Nous allons donc déposer un conteneur ici. Et comme vous pouvez le voir, ce conteneur comporte ici deux colonnes, le bloc de texte et le bloc d'image. Nous avons donc besoin de deux colonnes à l'intérieur. Je vais donc dire « en plus », ajoutez à nouveau un élément. Je vais y déposer un conteneur. Et dans ce conteneur, je vais déposer deux autres conteneurs. Ce conteneur sera celui nous définirons notre contenu en largeur. Comme vous pouvez le constater, ce contenu ne touche pas les bords. Il y a donc un conteneur unique invisible qui contient deux autres conteneurs, un conteneur et un autre conteneur. Alors, comment s'y prendre ? Nous y avons donc placé notre conteneur. Maintenant, nous revenons en arrière, ajoutons des éléments, déposons un autre conteneur ici. Et je vais cliquer avec le bouton droit de la souris et dupliquer ce conteneur. Nous avons maintenant deux conteneurs à l'intérieur de ce conteneur extérieur. Je vais sélectionner ce conteneur extérieur, passer à la mise en page. Sous la direction. Je vais dire que nous voulons que ce soit une ligne plutôt que cette verticale. Nous allons donc dire horizontal, et cela va tout arranger d'affilée. C'est vrai. Alors maintenant, comme vous pouvez le constater, nous y sommes presque, mais nous voulons définir une largeur spécifique qui nous plaît. Donc, tout d'abord, je vais sélectionner le conteneur le plus externe et dire que nous voulons passer au pourcentage en termes de largeur Et nous voulons que vous occupiez 100 % de l'écran sur lequel vous consultez le site Web. Maintenant, je voudrais passer à cet autre conteneur qui contient les deux colonnes. Et je tiens à dire que je veux que cela occupe 80 % de ce conteneur extérieur parce que ce conteneur extérieur occupe 100 % si nous changeons d'endroit, il occupe 100 %. Mais à l'intérieur, souvenez-vous que nous avons cet autre conteneur qui contient les deux colonnes. Nous voulons que ce soit 80 % du conteneur le plus externe. Donc, avec cet élu et avec ce pourcentage, 80 %. Maintenant, remarquez que tout a été poussé de droite à gauche. Je vais donc sélectionner ce conteneur le plus externe. Et ici, nous allons dire de tout aligner au centre. Cela va pousser le contenant qui est maintenu à l'intérieur par celui-ci vers le centre. Et maintenant, nous sommes prêts à dire « publiez-le ». Si je choisis Ajouter un élément, un titre de texte et que je le dépose dedans, reviens pour ajouter un élément. L'éditeur de texte est un paragraphe. Laisse-le tomber. Maintenant, nous voulons le déposer ici, juste en dessous du titre et revenir en arrière pour ajouter élément et ajouter un bouton. Déposez-le juste en dessous. Retournez ici et dites « image fixe » sous la mise en page. Publiez ça. Prévisualisez ce que nous venons de créer. Et maintenant, comme vous pouvez le constater, tout est structurellement correct Nous allons tout embellir pour qu'il soit superbe. Alors maintenant, nous allons terminer cette leçon ici. Dans la leçon suivante, définissons maintenant le style de cette section consacrée aux héros. 9. Section de héros de style: Il est maintenant temps de styliser notre page. Mais une chose que vous remarquerez sur le site Web de référence est que nous avons ce fond dégradé du bleu foncé au bleu vif. Alors, comment régler cela ? Revenons donc à Elementor. Ajoutons une couleur de fond. Je vais donc passer à ce menu déroulant, dans les paramètres latéraux. Passons à l'arrière-plan, et c'est ici que nous l'avons défini. Choisissons le dégradé. Nous avons maintenant ces deux couleurs. Je vais ouvrir mon explorateur. Je vais fournir ce dossier de ressources de téléchargement qui contiendra tout ce dont vous avez besoin pour recréer ce site Web exactement tel qu'il est Cela inclut donc également les couleurs que j'ai utilisées. Nous avons donc cette section sur les couleurs de fond. Je vais donc sélectionner cette couleur, la copier. Retournons ici. La première couleur sera ce bleu. Et la deuxième couleur sera ce bleu clair. Mais vous pouvez choisir les autres couleurs que vous souhaitez. Donc, pour la deuxième couleur, basons-la comme ça. Enregistrez les modifications. Et quittons cette zone. Maintenant, la prochaine étape est de les aligner verticalement rapport au centre de cette colonne qui les contient. Je vais donc sélectionner ce conteneur, et ici, justifier le contenu. Disons le centre, juste comme ça. Je vais sélectionner ce clic droit et dupliquer car nous avons besoin de ce texte. Vous devrez taper, mais je vais juste copier-coller. Je vais le sélectionner ici et le contenu coller comme Alex le fera. Je vais donc sélectionner ceci. Collez ça. Copiez, sélectionnez ce corps de texte. Control A, Control Shift V si vous collez depuis endroit pour vous assurer de ne coller aucun style depuis l' endroit où vous l'avez copié Donc Control Shift V. Et voilà. Alors publiez ça. Tout d' abord, jetons-y un coup d'œil. C'est beaucoup mieux maintenant. Alors maintenant, sélectionnez-le, et je vais sélectionner cette couleur jaune dans les textes, le carnet, le bloc-notes, copiez ce jaune Lorsque cette option est sélectionnée, je vais passer au style de couleur du texte. Jaune. Maintenant, vous remarquerez que cela a deux couleurs, et je vais vous montrer comment faire. Ceci est une gracieuseté d'un kit Plug-in Cold Elements Light. Tout d'abord, publions-le. Et je veux que nous accédions au tableau de bord. Passons aux plugins, ajoutons un plugin. Nous voulons ajouter un plugin appelé Elements kit Light, que nous allons utiliser sur l' ensemble du site Web. Alors ici, je vais taper elements Kit. Kit d'éléments Elementor Add One. Cela nous fournit juste plus d'éléments intéressants qu'Elementor ne nous fournit pas ou qu'Elementor possède dans la version pro payante Maintenant que le kit Elements est actif, si nous cliquons sur Elements Kit, nous allons devoir l'activer. J'aime choisir Avancé ici juste pour m'assurer que plus d'options sont sélectionnées par défaut, donc avancées. Ce ne sont que des éléments qui apparaîtront ici comme ceux-ci. Tellement avancé. Ensuite, ensuite, ne sélectionnez aucune de ces options. Tu n'en as pas besoin. Étape suivante, terminer la configuration. Maintenant, si je reviens ici et que je m'assure que vous avez déjà publié la page, contrôlez R pour actualiser la page. Maintenant, si je réduis Atomic, tous ces panneaux, lien général dans la biographie, vous allez voir les éléments du kit Elements. Ce sont des modules complémentaires supplémentaires dont nous avons besoin pour créer ce que nous voulons créer. Fermons donc ceci maintenant, cet en-tête appartient nativement à l'élément, mais nous voulons utiliser l'en-tête du kit d' éléments. Je vais taper le titre. Et comme vous pouvez le voir, nous avons le titre par défaut que nous avons, et nous avons également un titre issu du kit d'éléments. C'est donc celui-ci que nous voulons. Déposez-le là-dedans, et supprimez-le avec le bouton droit de la souris sur Supprimer. Donc, une fois cette option sélectionnée, je vais taper Alex et entre crochets , fais-le. Et maintenant c'est une question de style. Passez au style. Nous avons le titre, qui est Alex, et le titre principal est «   Do the one » entre crochets. Alors, tout d'abord, passons au titre et à la typographie, augmentons la taille à la taille que nous voulons Choisissons une police noire d'une épaisseur de 900 pour la rendre beaucoup plus audacieuse Et donnons-lui de quelle couleur ? blanc. Donc titre, couleur, blanc. Effacez ça. Passons au titre ciblé. Passons à la couleur. Nous le voulons de cette couleur orange. Copiez donc cette orange. Collez cette orange. Lorsque vous placez le pointeur de la souris, il prend la couleur jaune. Nous voulons donc copier ce jaune. Et au survol, collez-le. Donc, au survol, ce sera jaune comme ça. Mais remarquez qu'il n'est toujours pas épais. En fait, passons à la typographie. Poids de la police : noir. Et en fait, ici même sur le contenu : Oui, nous avons de l'espacement. Alors qu'il est toujours sélectionné, revenons à Style, Style et typographie Nous voulons que ce soit discret, nous voulons que ce soit en italique, juste comme ça Et remarquez que nous avons ce séparateur, alors réduisez le titre, le séparateur. Passons au contenu, réduisons le titre, séparons et désactivons cela. Sélectionnez ce texte. Faisons-le blanc. Et nous voulons éviter que cela ne soit trop long. Alors qu'il est toujours sélectionné, passons à Avancé avec personnalisation. Et donnons-lui peut-être 75 %. Publiez ça. Et voyons un aperçu de ce que nous avons. C'est une belle amélioration, mais nous voulons réduire l'espacement entre eux. Ce sont les marges. Une fois cette option sélectionnée, améliorez votre communication. Passons à la marge avancée. Rompez ce lien car si vous modifiez quoi que ce soit ici, cela affectera le haut, la droite, le bas et la gauche. Nous voulons simplement réduire la marge inférieure. Sélectionnons également cet Alex Doug, marge avancée, réduisons la marge inférieure Publiez ça. Allons voir ce que nous avons. Grande amélioration. Nous allons donc nous arrêter là. Dans la leçon suivante, nous allons voir comment créer ces boutons. Je te verrai bientôt. 10. Boutons CTA de Style Hero: Il est maintenant temps de survoler notre bouton pour qu'il ressemble à nos boutons de référence Alors, comment s'y prendre ? Revenir en arrière. Allons ici. Maintenant, bien sûr, nous avons deux boutons, et si nous voulons les placer côte à côte, nous devons faire ce que nous avons fait avec ces deux colonnes ici. Nous voulons donc ajouter un conteneur en dessous de ce texte. Ajoutez un élément. Passons à l'essentiel. Il s'agit d'une mise en page. C'est ici que se trouve le conteneur. Déposons-le juste en dessous de ce paragraphe, faisons glisser notre bouton dedans et cliquons avec le bouton droit sur Dupliquer, sélectionnons le conteneur qui les contient, changeons la direction en horizontale. Maintenant, vous remarquerez une chose si je publie ceci, c'est que ces boutons ne sont pas alignés avec le texte ici raison du rembourrage par défaut fourni avec chaque conteneur Comme vous pouvez le constater, nous avons du rembourrage tout autour. Nous voulons retirer ce rembourrage. Alors que le conteneur est sélectionné, passons au mode avancé. Passons au rembourrage et retirons-le. Nous pouvons maintenant ajouter un peu de rembourrage en haut, peut-être dix et en bas, mais laisser le rembourrage de gauche intact Publiez ça. Maintenant, comme vous pouvez le constater, ils sont correctement alignés. Une autre chose que nous voulons faire est maintenant sélectionner il y a trop d'espace. Nous pouvons donc sélectionner ce texte, marge avancée en bas. Réduisons-le peut-être à cet endroit. Publiez ça. Sélectionnez le bouton, passez au style. Tout d'abord, nous pouvons changer ce qu'il dit. Services et l'autre dit portfolio Ou regardez mon travail. Visionnez mon travail. Maintenant, en sélectionnant ce bouton ici, passez au style. Et je veux que nous modifiions le rembourrage. Alors cassez ça. J'aime lui donner un rembourrage gauche de 40 ou 50, rembourrage droit de 50 supérieur et inférieur de 15 15 même cas s'applique à ce style, rembourrage 40 à gauche, 40 à droite , puis 15, 15 OK. Pour cela, donnons-lui une couleur de fond grise et une couleur de texte noire. En sélectionnant cette option, nous voulons lui donner un dégradé de couleur car notre dégradé se joue toujours entre ces deux couleurs, le jaune et l'orange. Alors, pendant qu'il est sélectionné, passons au dégradé de type d'arrière-plan. Je vais copier nos couleurs ici. Jaune, recopiez ça. Utilisez-le comme deuxième couleur. Mais copiez l'orange, collez-la. Ensuite, pour l'angle, nous voulons le faire pivoter. Au lieu de 180 degrés, il devrait être de 90 degrés. Faisons en sorte que le texte soit noir. Au survol de ce bouton, survolez le pointeur, car nous étions en train de passer à l'état normal Au survol, nous voulons qu'il ait la même couleur dégradée. Je vais donc sélectionner ça. Et revenons ici, copions cette orange. Collez-le là. Copiez le jaune. Collez ça, juste comme ça. Mais nous voulons changer cela à 90 degrés, l'angle, juste comme ça. Et ceci au survol, sélectionné. Au survol, nous voulons qu'il ait un fond gris, pas un dégradé, mais juste un fond gris classique de couleur avec des textes noirs Je ne vais pas essayer de rester cohérent. Attendez, pourquoi les pourboires ne fonctionnent-ils pas ? Publiez ça. Allons-y ici. Je ne sais pas S'agit-il d'un bug ? En mode normal, c'est un dégradé, mais en mode normal. Je ne sais pas pourquoi nous avons ce bogue. Elemental doit donc se pencher sur cette question, mais allons-y. Prévisualisez ça. Maintenant que l'effet de survol ne fonctionne pas pour cela, nous pouvons ajouter une animation, je vais donc la sélectionner Au survol, nous voulons une animation de survol. Peut-être grandir. Oui, comme ça. Faisons de même pour cela au survol, il devrait également augmenter Alors publiez-le, voyons ce que nous avons, oui. Nous y voilà donc. Dans la leçon suivante, ajoutons maintenant cette image avec l'arrière-plan. Si je charge cette page, comme vous pouvez le voir, il y a deux 11. Image de héros: Il est donc temps de travailler sur l'image de la section héros. Donc, parce que vous avez déjà ajouté l'élément image. Tout d'abord, avant d'aller plus loin, il y a quelque chose que vous m'avez remarqué faire tout le temps. Lorsque je veux dupliquer quelque chose, je dois cliquer avec le bouton droit de la souris et dupliquer. Ce sont deux étapes que je dois suivre à chaque fois. Donc, pour éviter cela, j'aime toujours accéder à ce menu déroulant, préférences utilisateur et aux options d'édition rapide. Cela me permet simplement de passer la souris dessus et de cliquer dessus pour dupliquer ce que je veux dupliquer Donc, avec l' élément d'image sélectionné, je vais sélectionner celui qui télécharge les images. Et comme je l' ai promis, je vais fournir ce dossier ici. Ce dossier de téléchargement de ressources contiendra donc tout ce dont vous avez besoin. Donc, la première chose que nous allons saisir est cette image avec ce bord inférieur qui s'estompe, l'image zéro d'un professionnel ou votre propre image Maintenant, c'est mon hébergeur qui se plaint de mon serveur, donc je vais juste l'enregistrer et actualiser cette page. Fermez ça. Donc, en sélectionnant ceci et cela, passez au téléchargement. Si je double-clique dessus, cela fonctionnera maintenant. Donc, avec l'image sélectionnée, je vais dire sélectionner, et c'est parti. Maintenant, pour cette image, cette image jaune juste ici, nous allons l'ajouter à la colonne comme arrière-plan de colonne. Donc, cette colonne contenant l'image, passons au style, au type d'arrière-plan. Sélectionnons l'image, puis téléchargeons les fichiers. Et dans notre dossier, nous avons le pinceau d'arrière-plan du héros qui va l'ouvrir. Et sélectionnez. Maintenant, c'est là, mais nous devons faire certaines choses. Tout d'abord, disons que la position doit être au centre du centre. Nous voulons dire que nous ne voulons pas que cela se reproduise. Ensuite, pour la taille d'affichage, nous voulons dire contenir. Et ce qui va nous permettre de le positionner correctement, c' est cette image réelle de cet homme. Une fois l'image sélectionnée, passons à W. Et jouons avec elle comme ça. Je trouve que c'est une bonne taille. Et disons publier. Et prévisualisons-le. Nous arrivons à quelque chose. Voyons donc si nous pouvons améliorer quelque chose maintenant. Tout d'abord, nous pouvons sélectionner cette colonne de texte. Et pour ce qui est de la largeur, nous voulons qu'elle occupe, souvenez-vous que cette colonne et cette colonne sont à l'intérieur de ce conteneur ici. Alors, quelle quantité de ce conteneur doit occuper chaque colonne ? Sélectionnons-le. Nous voulons qu'il occupe 40 %. Pourcentage, pas pixels. Maintenant, c'est la hauteur et fais-le. 40 %. Et nous voulons que cela occupe 60 %. Donc mise en page à 60 %. Publiez ça. Et voyons voir. Oui, c'est une bien plus grande amélioration. Je pense donc que nous pouvons maintenant commencer par cela. Nous apporterons d'autres améliorations au fur et à mesure. Que reste-t-il donc ? ne reste donc que ce motif de fond avec ces formes géométriques. Allons-y donc et ajoutons-le. Et que nous allons ajouter à l' ensemble du conteneur de la section des héros contenant tout le reste. Donc, ce contenant rose ici, passez au style du type d'arrière-plan. Choisissons que nous avons ces modèles de fond de section de héros. Ouvrez-le et sélectionnez-le, et c'est parti. J'ai donc préparé ces images à l'aide d'Adobe Illustrator Vous allez donc devoir préparer les modèles que vous souhaitez utiliser. Maintenant, comme nous l'avons fait, nous voulons aller ici et dire «   centre de position ». Nous voulons dire qu'il n'y a pas de répétition. Et pour la taille d'affichage, contenez publiez, et voyons ce que nous avons. Nous y voilà. Qu'en est-il de la couverture ? Oui, la couverture est meilleure pour ça. Allons-y parce que je veux qu'il couvre jusqu'aux bords. Alors voilà. Nous en avons terminé avec la section des héros. Le reste des sections sera une répétition de ce que nous venons de faire dans la section des héros. Mais bien sûr, il y a des choses uniques que nous allons faire. Je vous verrai donc dans la prochaine leçon. 12. Créer un en-tête: Il est maintenant temps de créer un en-tête pour notre site Web, car moment, comme vous pouvez le constater, nous n'avons pas d'en-tête et nous voulons quelque chose qui ressemble à ceci. Alors, comment pouvons-nous créer cela ? Je reviens ici. Passons à notre tableau de bord. Je souhaite accéder au tableau de bord. Et n'oubliez pas que nous avons ajouté des éléments au kit light. Donc, sous Elements Kit, nous avons une option d'en-tête et de pied de page Alors, cliquons dessus. Nous allons ajouter un nouveau modèle, que nous allons appeler header. C'est notre en-tête. Et nous voulons qu'il soit affiché sur l'ensemble du site. Si vous aviez plusieurs pages Web, vous voudriez qu'elles soient affichées sur toutes les pages Web Ensuite, nous voulons qu'il soit actif. Passons ensuite à Modifier le contenu. Nous serons redirigés vers Elementor pour créer un en-tête. Maintenant, ici, nous voulons dire : ajoutons un conteneur, tous ces panneaux dont nous n'avons jamais besoin. Passons à la mise en page et ajoutons un conteneur ici. Et comme nous l'avons fait auparavant, nous voulons pouvoir contenir notre en-tête sur 80 % de l'écran. Ce récipient extérieur doit donc avoir une largeur de 100 %. Et celui-ci intérieur devrait représenter 80% de l'extérieur. Et avec cela, nous voulons passer à l'extérieur et pousser l'intérieur, l' aligner au centre comme ça. Et maintenant, ici, nous voulons trois colonnes. En fait, nous n'avons pas besoin de trois colonnes. Nous avons juste besoin de trois articles. Nous avons besoin d'une image et de l'image de base. Nous avons également besoin d'un culot. Je vais donc taper Nerve. Maintenant, nous avons des nerfs différents ici, mais celui que nous voulons, c'est Elements Kids Nerve Menu. Nous le plaçons en dessous de l'image, mais toujours dans ce contenant intérieur. Et nous voulons également ajouter un bouton toujours sous éléments de base, jamais atomiques sauf si vous avez la version pro d'Elementor Et plaçons le bouton juste en dessous. Maintenant, sélectionnons le conteneur lui-même et passons à la ligne. Maintenant, il s'agit de trois éléments disposés en ligne. Je souhaite sélectionner l'image. Nous allons sélectionner le logo. J'ai créé ce logo fictif. Il n'appartient pas à une vraie personne. Alors double-cliquez dessus et sélectionnons-le. Maintenant, sa taille est déjà assez petite, mais je veux m'assurer que nous sommes très précis quant à sa largeur. Donc, avec Advanced, passons à la personnalisation et disons peut-être 20 ou 25 % de ce conteneur qui l' accueille Sélectionnons le nerf. Maintenant, lorsque nous sélectionnons l'élément nerveux, il nous demandera un menu. Si nous avons un menu, il sera listé ici, mais nous n'avons pas encore créé de menu WordPress. Donc, tout d'abord, permettez-moi de le publier. Et revenons à Je veux avoir un tableau de bord toujours disponible ici. Donc, à l'intérieur, passons au menu des apparences. Et nous voulons créer un menu. Alors laissez-moi simplement l'appeler mon menu, et faisons-en le menu principal, puis créons un menu. Maintenant que nous avons déjà la page d'accueil, sélectionnons-la et ajoutons-la au menu. Il sera listé ici. Et nous voulons créer des éléments supplémentaires, des éléments menu supplémentaires, des services, un contact avec le portefeuille. Passons donc aux liens personnalisés. Mettons simplement un hachage, appelons-le services ajoutés au menu Nous reviendrons plus tard et ferons en sorte que ces liens mènent réellement quelque part. Ajoutons donc une autre bière hachée, portfolio au menu et enfin des contacts Contacter, ajouter au menu. Disons ensuite enregistrer le menu. Nous avons donc créé mon menu WordPress avec quatre éléments de menu. Pour y revenir, c'est la page. Revenons à l'éditeur d'en-têtes. Et comme elle est publiée, actualisons cette page. Et maintenant, si je dors, où est ce culot ? D'accord, laisse-moi. Où est le culot ? Si j'appuie sur Control E, nous pouvons voir un aperçu de tout ce que nous avons sur l'éditeur. Nerf. Il s'est donc effondré en un tout petit élément. Mais ici, nous pouvons sélectionner le menu que nous venons de créer. Donc, en le sélectionnant maintenant, comme vous pouvez le voir, c'est visible. Maintenant, nous disons déjà que cela devrait représenter 20 % de la largeur. Faisons également en sorte que le bouton occupe 20 % du contenant. Et alignons-le sur la droite. Et maintenant, pour ce qui est de l'élément nerveux, assurons-nous qu'il occupe les 80 % restants. Oh, 60 % parce que nous sommes en 2020, 40, donc 60 %. Et tant qu'il est toujours sélectionné, passons au centre d' alignement du contenu, juste comme ça. Publiez ça. Et nous voulons les changer en blanc. Bien qu'il soit toujours sélectionné, passons à l'élément du menu Style. Dans des circonstances normales, rendons-le blanc sur Hover. Faisons en sorte qu'il soit orange. L'article prend de la couleur au survol, en orange. Et lorsque nous sommes sur une page spécifique, lorsqu'elle est active, rendons-la orange. Cela signifie que lorsque nous sommes sur cette page ou section spécifique à laquelle l'élément renvoie, rendons-le jaune. Publier. Maintenant, prévisualisons-le. Maintenant, comme vous pouvez le constater, il n'est pas correctement aligné. Ce bouton est trop élevé par rapport à tout le reste. Alors revenons ici. Et avec ce conteneur sélectionné ici, assurons-nous que les éléments sont alignés verticalement au centre comme ça. Fermons ça. Et passons à cet éditeur ici et sélectionnons ce bouton, copiez-le avec la bonne fuite, revenons à notre éditeur ici, sélectionnez le bouton, cliquez sur le bon style de collage. Nous n'avons donc pas à le répéter, sauf que maintenant c'est fait. Nous devons maintenant réinitialiser ce fouet à 20 % . C'est parti Maintenant, pour en revenir à notre éditeur, je vais contrôler R pour recharger la page Et maintenant, notre page Web a un en-tête. Prévisualisons donc l'en-tête avec tout le reste. Allons-y. Ça a déjà l'air bien. Mais pour une raison ou une autre, cet espacement ici est plus grand que celui-ci. Je ne sais pas pourquoi. Nous allons examiner cela plus tard. Mais pour l'instant, permettez-moi de le fermer, y compris cela. Maintenant, j'aime réduire cette marge en haut. Donc, en fait, si vous souhaitez modifier votre en-tête, vous pouvez survoler cette partie ici et cliquer sur en-tête, mais je veux l'ouvrir dans un nouvel onglet Je vais donc utiliser la molette de ma souris, appuyer sur la molette de la souris pour l' ouvrir dans un nouvel onglet Maintenant, comme je l'ai mentionné plus tôt, chaque conteneur est livré avec un rembourrage par défaut Je vais donc sélectionner ce conteneur contenant tout, passer à Avancé et casser le rembourrage par défaut comme ça Et le conteneur extérieur possède également son propre rembourrage par défaut. Comme vous pouvez le constater, nous avons considérablement réduit la marge au sommet. Et maintenant, si nous rechargeons cette page, observez l'en-tête. Maintenant, tout est beaucoup plus proche du sommet. Allons-y. C'est bon. Maintenant, je comprends quel était le problème. En sélectionnant ce bouton, lorsque nous avons collé les styles de ce bouton ici, nous avons remplacé les paramètres que nous avions définis ici pour le bouton, à savoir aligner, écrire, publier En dessous. Allons-y. Maintenant, notre en-tête est superbe, sauf que nous devons encore sélectionner le bouton, accéder au contenu, et le modifier pour me réserver, le publier. Alors fermons-le. Nous pouvons recharger l'éditeur ici. Nous pouvons maintenant le prévisualiser une fois de plus. Ouais Alors maintenant, c'est la fin de l'en-tête. Dans la leçon suivante, voyons comment créer les sections restantes. Je te verrai bientôt. 13. Section de compteur: Nous voulons maintenant ajouter cette contre-section ici. Voyons donc comment procéder. En entrant ici, je veux dire ajouter un élément, et je veux tout réduire. Et en faisant défiler l'écran vers le bas, nous voulons ajouter un conteneur de mise en page ici Maintenant, ce conteneur de mise en page devrait avoir un autre conteneur pour contenir le contenu réel, donc je vais y revenir, et celui-ci devrait occuper 100 % de la largeur, alors qu'il devrait occuper 80 % du conteneur extérieur. Revenons au contenant extérieur et alignons les articles au centre. Maintenant, ici, nous voulons dupliquer ce texte afin de pouvoir le réutiliser. C'est un en-tête. Et en fait, j'ai oublié de sélectionner que ce chien Alex est censé être un H. C'est un H deux. Oui, c'est déjà un H deux. Et en fait, parce que nous venons de le dupliquer à partir d'ici, il contient ce paramètre de marge, nous l'avons supprimé Et remarquez une chose ici, c'est en fait une colonne, et ceci en est une autre. Nous avons donc besoin d'un conteneur. Et mettez-le dans le contenant qui se trouve à l'intérieur de cet autre contenant. Et en dessous, nous voulons également placer un bouton. Je vais donc dupliquer ce bouton et placer sous le texte. Ensuite, je vais dupliquer ce conteneur sélectionner le conteneur extérieur et passer au rouleau. Nous avons donc deux colonnes. Et ici, je veux supprimer ces deux. D'accord, ce n'est pas amovible, ce n'est pas amovible, donc je peux le supprimer à juste titre Et je voudrais ajouter un compteur. Alors, glissez et déposez le compteur dedans. Sélectionnez le compteur, dupliquez-le deux fois. Sélectionnez le conteneur qui les contient, passez à la ligne. Nous voulons y aller pour justifier le contenu au centre et l'espace entre les éléments. Publiez ça. Prévisualisons les modifications. Prévisualisez les modifications. Exactement, comme ça. Mais maintenant, chacun d'entre eux devrait avoir un contexte. Passons à la section Avancé. Sélectionnez l'un de ces compteurs. Avancé. Tout d'abord, donnons-lui un peu de rembourrage, peut-être 20 Passons ensuite à son arrière-plan. Couleur de fond Je vais sélectionner ce bleu foncé ou la couleur que vous souhaitez utiliser. Collez-le là. Passons au numéro de style. Donnons-lui la couleur blanche, et le titre White également pour le moment. Pour le numéro, vous pouvez choisir une police plus lourde, donc le poids de la police, le noir. Vous pouvez même dire une police différente, peut-être monserat Yeah, quelque chose de lourd comme ça Passons ensuite au rayon de bordure avancé de 20. Ensuite, écrivons leak, copyright leak, face style, right leak, collons le style, publions ça. Ici, je vais copier ce texte. va falloir le taper, le sélectionner, passer au contenu. Je vais le coller dedans et remplacer par White Publish. Je vais ici. Juste comme ça. Maintenant, comme vous pouvez le voir ici, l'espacement est génial à ce sujet Mais le nôtre ici n'est pas très bon. Il ne faut donc pas laisser d'espace entre les deux. Alignons-les simplement au centre et publions , nous pouvons donner à chacun d'eux une certaine largeur. Tout d'abord, donnons à cette colonne une largeur d' environ 40  % et à celle-ci de 60 %. Personnalisé, 33 %. Copiez, collez le style, collez le style, copiez-collez le style, publiez-le. Allons-y. Maintenant, changeons les détails. Ici, 55 clients pourraient être servis. Alors, quel est le titre ? Clients servis. Cela pourrait être ici. Qu'avons-nous ici ? Projets achevés. 329 projets achevés. Et cela pourrait être 100 %, donc le suffixe pour cent agit comme faction, garantie Alors, si nous l' excluons exactement. Contactez-nous, publiez-le C'est parti. Voilà comment créer cette section, et elle est trop proche de la section des héros. Ce que je veux faire, c'est retourner ici, sélectionner le conteneur contenant toute la section du héros, monter à la hauteur et le changer en VH C'est la hauteur de vue, et nous voulons lui donner 100. Nous voulons dire, faites en sorte qu'il occupe tout l'écran. La section des héros doit occuper tout l'écran, publiez-la. Juste comme ça. Nous voulons également sélectionner ce conteneur et peut-être ce conteneur contenant cette section, lui donnant une marge supérieure de 50 pour le séparer du haut. C'est bon. Maintenant, nous ne voulons pas qu'il touche la partie inférieure. Peut-être pourrions-nous réduire la largeur de cette image. Publiez ça. Juste comme ça. Oui, ils sont bien séparés. C'est donc ce que nous allons aborder dans cette leçon. Dans la leçon suivante, voyons comment créer cette section ici, mes services. Je te verrai donc bientôt. 14. Effets d'en-tête attaché: Maintenant, avant de passer à cette section, vous remarquerez que lorsque nous commençons à faire défiler l'écran, l'en-tête est collant, et lorsque nous ne le faisons pas, les motifs d'arrière-plan remontent jusqu'en haut Il s'agit du site Web de référence, mais sur le site Web sur lequel nous travaillons actuellement, si nous commençons à faire défiler l'écran, l'en-tête disparaît et ce modèle n'est pas tout en haut Nous devons donc résoudre ce problème Et pour ce faire, pour rendre l'en-tête collant, nous devons utiliser un plugin appelé sticky header effects for element. Passons au tableau de bord. Plugins, ajoutez un plugin. Ajoutons du stick. Tapez simplement un en-tête d'en-tête autocollant. Donc, des effets d'en-tête collants pour l'installation d'Elementor maintenant. Alors activons-le. Et maintenant, c'est ici. Donc, pour y revenir, il suffit de passer la souris dessus et de dire lien droit, ouvrir le lien dans un nouvel onglet Nous devons donc sélectionner le conteneur contenant l'intégralité de l' en-tête, passer à la mise en page de réduction avancée, passer aux effets d'en-tête persistants et l'activer. Fermez cette publicité professionnelle. Pour le moment, c'est déjà collant. Nous l'avons activé, il va donc rester collant en haut. Mais ce que nous voulons, c'est avoir un en-tête transparent, qui signifie que maintenant, si nous allons ici et actualisons cet éditeur, examinons le schéma qui sous-tend la section des héros. Maintenant, comme vous pouvez le voir, les motifs vont jusqu'au sommet. Si je prévisualise cela, comme vous pouvez le voir, ils sont tout en haut. Mais maintenant, un problème que vous remarquerez est que lorsque nous commençons à faire défiler l'écran, il n'y a pas d'arrière-plan sur l'en-tête Tout devient encombré. Donc, en revenant ici, juste en dessous de l'en-tête transparent, nous pouvons choisir une couleur d'arrière-plan à changer également après le défilement Nous allons donc revenir ici et sélectionner ce bleu foncé, revenir ici, la couleur d' arrière-plan, le sélectionner, puis le coller dedans et le publier. Fermez-les, accédez à l'éditeur et actualisez cet aperçu. Maintenant, lorsque nous commençons à faire défiler la page, elle passe au bleu, ce qui permet de tout voir Lorsque nous faisons défiler la page vers le haut, l' arrière-plan disparaît. Voici donc comment procéder. Dans la leçon suivante, voyons maintenant comment créer la section des services. 15. Section des services: Il est maintenant temps de créer la section des services. Voyons donc ce que nous avons ici. Nous avons ces quatre boîtes et ce type. Alors revenons ici. Nous allons réutiliser certaines des choses que nous avons déjà créées. Je vais donc simplement dupliquer cette section. Et oui, nous les avons déjà deux. Parce que remarquez ici, il s'agit d'une colonne et d'une autre. Ajoutons donc simplement un titre et du texte au-dessus. Donc, au-dessus de ce contenant, nous allons dupliquer cette poupée Alex. Et je veux le placer juste au-dessus de cette section. Et je souhaite également choisir de dupliquer ce texte. Il s'agit de réutiliser des objets que vous avez déjà stylisés juste en dessous d'Alex Dow. Passons ensuite au style. Alignez au centre, sélectionnez cette option. Nous voulons changer cela à l'âge de deux ans et passer au style Title. La typographie permet de réduire la taille, peut-être à la taille du dos C'est raisonnable. Et remarquez ici qu'il y a ce séparateur. Passons donc à l'activation du séparateur de contenu. Mais maintenant, nous devons nous débarrasser de cette marge inférieure comme ça. Et je veux copier ce texte. Sélectionnez cette option, accédez au contenu de Control Shift VL. Notez ici que cela a une largeur limitée. Donc, pendant qu'il est sélectionné, je souhaite passer à la largeur personnalisée avancée. Je voulais occuper 60 % de la largeur disponible du conteneur qui le contient. Changez le séparateur, sélectionnez ces textes. Le séparateur doit être blanc. Et ils devraient être mes services. Mes services. Maintenant, je veux que ce soit le ras, les couleurs devraient être jaunes en temps normal. Copiez cela, allez ici, sélectionnez ici, espacez-le, collez-le dedans, coupez ceci, supprimez cet espace, allez ici en survolant, comme ça Maintenant, à l'intérieur de ces deux colonnes, nous avons déjà créé. Tout d'abord, je voudrais sélectionner cette colonne et dire qu'elle devrait occuper 40 % et ces 60 %. Je veux tout supprimer d'ici. Et à partir d'ici. C'est bon. Il y a un bug. Cela ne fonctionne pas, alors cliquez avec le bouton droit sur Supprimer. Nous avons donc publié ces deux chroniques. Disons que oui, c'est 60 40 rien qu'en le regardant. Ou nous pourrions simplement le faire 50 50 ou 45 55. Maintenant, ici, nous devons également ajouter quelques conteneurs, un conteneur au-dessus et un autre en dessous. Ensuite, dans chacune de ces deux rangées, nous aurons encore une autre paire de conteneurs. Alors dupliquez ça. Mais maintenant, en sélectionnant ceci, nous allons passer à la ligne, donc un, deux. Donc, en fait, permettez-moi simplement de le supprimer, sélectionner et de le dupliquer pour qu'il soit un, deux, trois, quatre. Dupliquez-le et déposez-le ici. Accédez au style, au titre, typographie et réduisez la taille Passons au contenu. Attendez, coiffez, alignez le centre. Et le séparateur doit être au-dessus. Voyons voir. Séparateur B. Disons que c'est le cas. Je vais le dupliquer. Placez-le dedans, dupliquez-le à nouveau. Placez-le là-dedans. Je vais également dupliquer, je peux simplement dupliquer ceci ou cela et le déposer juste dessous du centre Aline. Il a une largeur. Disons donc simplement par défaut. Et je veux le copier. Sélectionnez-le, allez au contenu, collez-le dedans. C'est le même texte, donc je vais juste le dupliquer. Non, juste en dessous. Ce que nous avons ici est un conteneur qui comporte deux colonnes. Il s'agit de cette colonne et de cette colonne. Et dans cette colonne, nous avons un conteneur contenant deux colonnes de deux conteneurs. Maintenant, ce que nous voulons faire, c'est le styliser. Donnez-lui simplement cette couleur bleu foncé. Je vais le sélectionner pour copier sa couleur, passer à son arrière-plan. Copiez ça. Sélectionnez ce conteneur, accédez à la section Contexte avancé. Couleur, goûte-ça là-bas. Passons au rembourrage. Donnons-lui un rembourrage de 20. Passons à son style de bordure, la bordure 20. Sélectionnez ceci. Très bien, sélectionnons pendant que c'est encore sélectionné, cliquez avec le bouton droit de la souris sur Copier Sélectionnez ce style de collage de lien droit. Sélectionnez ce style de collage de lien droit. Style de collage. Maintenant, vous remarquerez qu'il y a trop d'espace ici, et cela est dû au rembourrage par défaut du conteneur qui contient les deux Passons donc à l'étape avancée, cassons le rembourrage qui s'y trouve Sélectionnons également celui-ci. Ce contenant. Avancé, supprimez ce rembourrage, publiez-le Et maintenant je n'aime pas la façon dont c' est presque le haut de Nous pourrions sélectionner ce titre, passer dans les dix premiers de la marge avancée, à droite, manquer de copie. Sélectionnez-le, cliquez avec le bouton droit sur le style de collage, sélectionnez-le, cliquez avec le bouton droit sur le style de collage, collez le style, publiez-le ici. Maintenant, vous remarquerez également que nous avons ces décorations ici. Si vous en avez besoin, nous pouvons simplement accéder à l'un d'entre eux, passer au style, à la superposition d'arrière-plan et lui donner un dégradé Et le dégradé utilisera ce bleu clair et le bleu foncé pour la deuxième couleur. Et nous voulons passer à la radio. Donc, en fait, ce bleu devrait être Ce bleu ici devrait être la deuxième couleur. Et le bleu foncé ici devrait être la première couleur. Disons ensuite Opacité en bas à gauche. Repoussons l'emplacement à 80 %. Alors fais ce que je viens de faire. Radio, type radiant, position en bas à gauche. Vous pouvez modifier l'opacité si vous le souhaitez et l'emplacement à 80 %. Il ne me reste plus qu'à sélectionner cette copie. Style de collage. Collez le style et collez le style. Maintenant, il a également une frontière. Passons donc au style. Bordure solide. Et faisons en sorte que la couleur de la bordure soit bleue. Donnons-lui un peu de bleu comme ça. Couleur de bordure d'un. Non, disons deux, bordez avec Oui, donc copiez-collez le style, sélectionnez, le bon style de fuite, sélectionnez le bon style de fuite, collez le style, publiez-le. Maintenant, si nous prévisualisons cela, nous y voilà. Donc, dans la leçon suivante, ajoutons cette image. Je te verrai bientôt. 16. Service Image: Il est donc temps de créer l'image des services. Mais avant cela, je viens de remarquer que j'ai oublié de donner à cette section un fond bleu foncé. Allons-y, sélectionnons le fond bleu foncé, copiez-le et revenons dans notre éditeur, sélectionnez la section, passez au style. Est-ce que c'est sélectionné ? C'est bon, style. Fond serré. Donnons-lui ce bleu foncé. Maintenant, ici, ce que nous voulons faire c'est donner la couleur bleu clair. Je vais donc sélectionner ceci. Sélectionnez cette colonne, passez au style. Fond bleu. Donnons-lui également un rayon de bordure de 20. En fait, le fond ne doit pas être bleu. Je devrais avoir un dégradé. Revenons donc au dégradé de couleur d'arrière-plan. Et donnons-lui le même bleu clair mais rendons-le plus foncé. Et puis changez ça en radio. Nous pouvons déplacer légèrement l'emplacement ou réduire ce bleu comme ça. Alors maintenant, ce que nous voulons faire ici, c'est simplement ajouter une image et l'image de base. Sélectionnez-le. Allons télécharger l'image que nous voulons. C'est celui que j'ai utilisé. En fin de compte , nous apprenons simplement à utiliser Elementor Vous devez vous sentir libre de créer le type de site Web que vous souhaitez. Maintenant, ajoutons un séparateur juste en dessous. Alors, ajoutez. Toujours à la base, nous avons l'élément diviseur Déposons-le juste en dessous de l'image. Très bien, il semble que cette colonne soit définie sur une ligne par défaut. Oui, nous devrions passer à la colonne verticale. Et maintenant, ajoutons ce diviseur. Juste comme ça. Une fois le diviseur sélectionné, je vais passer à la largeur et la réduire à 50 % , puis l'aligner au centre, puis passer à la marge avancée en haut Jusque-là, puis le style. Tout d'abord, remplacons-les par des barres obliques, mais vous pouvez les modifier comme bon vous semble Si cela ne ressemble pas à des barres obliques, allez simplement ici pour Le vôtre pourrait apparaître. Voyons voir. C'est bon. Augmentons le poids de chaque barre oblique Augmentez cette taille comme ça. Réduisez légèrement le poids. Jouez donc avec ces paramètres jusqu'à ce que vous ayez la bonne barre oblique ou choisissez simplement l'autre option que vous souhaitez ici Vous pouvez également opter pour le curly, qui, non, est incurvé. J'aime bien celui-ci aussi. En fait, laissez-moi le garder et ensuite attendre. Taille. Oh, c'est la hauteur, la quantité. Et je veux choisir cette couleur jaune. Et donnez-lui cette couleur jaune. Si vous passez aux barres obliques, jouons avec l'écart, réduisons à nouveau la largeur, puis publions Cette image est légèrement plus haute que les zones de texte. Ce n'est pas mal, mais nous voulons nous assurer que tout soit un peu plus compact. Cette section est également trop large. Je veux donc sélectionner l'ensemble du conteneur qui les contient et le modifier à 70 %. Publiez ça. Et voyons ce que nous avons à faire ensuite. Oui, c'est un peu plus équilibré. Il vous suffit donc de jouer avec ces paramètres et voir comment vous pouvez les rendre plus créatifs. Je n'ai pas encore mis à jour ces services. Par exemple, cela pourrait être passons au contenu. Supprimons ce M. Ensuite, passons des services à la conception d'espace graphique, sélectionnons-le, supprimons la modélisation de conception d' espace Web M. modélisation de conception d' espace Publiez ça. Vous pouvez également jouer avec le type de séparateur si vous optez pour le séparateur. Où modifiez-vous cela ? Je pense que c'est sous le séparateur de contenu. Cela peut devenir peut-être solide avec une étoile. Oui, jouez avec ça et voyez les meilleurs résultats que vous pouvez obtenir. Je vais utiliser un pointillé par défaut. Publier. Encore une fois. Oui, je pense que ça a l'air bien maintenant. Cela devrait être plus concis. Sélectionnons le texte. Passez à l'état avancé avec, je dirais 50 %. Publiez, et allons-y. Oui, tu peux même aller jusqu'à 40 % de la largeur. 40 % de ce montant. C'est donc ici que nous allons terminer cette leçon. Maintenant, encore une chose. Nous avons besoin d'un peu de rembourrage en dessous et au-dessus du contenu du contenant Le rembourrage doit donc se trouver sur le conteneur lui-même, conteneur sélectionné, avancé, le casser, puis la marge supérieure de 50, le rembourrage inférieur de 60, rembourrage inférieur de 60 Juste comme ça. Je vous verrai donc dans la prochaine leçon. 17. Section portfolio: Hey, bon retour. Il est donc temps de créer la section précédente du travail ou du portfolio. Alors, comment créez-vous cela ? Revenons-en à cela. Allons voir notre rédacteur en chef. Je vais juste le dupliquer. Comme ça maintenant, nous en avons deux. En sélectionnant le conteneur lui-même, passez au style et supprimez la couleur. Sélectionnez l'arrière-plan, puis supprimez-le. De quoi d'autre avons-nous besoin ? Nous devons tous retirer ces conteneurs. En fait, créons simplement un conteneur. Ajoutons simplement un conteneur juste en dessous. Ouais. Et sélectionnons le conteneur lui-même, et faisons-le 60 % de sa largeur. En fait, 50 ou 40 %. 50 %. Maintenant, ce que nous voulons faire, c'est ajouter une boîte d'image ici. Donc, boîte à images. Et nous voulons utiliser « ne pas utiliser la boîte d'image d' Elementor elle-même Utilisez la boîte à images d'Elements Kid. Je vais le déposer là-dedans. Et je vais le dupliquer deux fois, un, deux, puis sélectionner le conteneur lui-même et passer à la ligne. Nous avons maintenant trois boîtes d'images. Maintenant, je veux copier le nom de ce projet, sélectionner la première zone d'image. Allons déplacer ça. Passons au corps, changeons de titre. Passons à la description, collons-la dedans, et le bouton devrait enregistrer le projet de vue. Effacez ça. Passons à l'image. Je souhaite sélectionner une image, télécharger des fichiers. Je vais sélectionner cette image comme première image. Sélectionnez-le. Maintenant que le contenu est terminé, passons au style. Passons à l'image et donnons-lui un rayon de bordure. Du top 20. C'est donc en haut à gauche. Allons vers la droite, 20. Ouais. Passons au corps. Rayon de bordure, brisez les 20 derniers. Très bien, donnons-lui d'abord un historique. Type d'arrière-plan. Donnons-lui une. Donnons-lui cette couleur pour le moment. Alors maintenant, lorsque nous lui avons donné un rayon de 20 à la bouteille, elle l'a donnée de ce côté. Passons donc à la 20 gauche. Passons au bouton. C'est bon. Donnons-lui cette couleur foncée. Donc, tapez cette couleur foncée comme ça en arrière-plan. Et au survol, nous voulons qu'il ait une couleur dégradée. Choisissons donc notre jaune et notre orange. Il doit être jaune. Parlons orange comme première couleur. Et maintenant, passons-les à 90 degrés, comme ça. Nous pouvons également modifier cette couleur sous le corps du titre, de la typographie, de la couleur Privilégions la typographie du titre à la couleur Devrait être d'un gris plus clair. Oui, gris clair stabilisé. Copiez ceci, sélectionnez ce style de pastetyle, sélectionnez ce Sélectionnez cette option pour choisir une image de projet d'image. C'est ce que je vais sélectionner. Maintenant, essayez de vous assurer que toutes les images du projet d' images sont de la même taille. Parce que c'est la taille de l'image qui déterminera. Comme vous pouvez le constater en ce moment, elles ont l'air un peu bizarres, mais je n'ai tout simplement pas eu le temps de les préparer différemment pour préparer toutes les images du projet, mais j'ai essayé de les faire de la même taille, des mêmes dimensions pour qu'elles soient toutes identiques comme ça. Comme vous pouvez le constater, ils sont plus présentables que d'en avoir un grand un petit, mais c'est à vous de les publier Permettez-moi donc de copier cette description, de la sélectionner, aller au contenu, de la coller dans le corps. Copiez ceci, allez ici, corps, collez le Z Culture Magazine en est le titre. Barton devrait lire Afficher les projets. Publiez cette vue. Faire défiler la page vers le bas. Nous y voilà. Une belle section de mon portfolio. Mon portfolio. Je vais le coller là-dedans. Et je pense que nous sommes maintenant prêts à passer à la section suivante, celle des témoignages de clients Que disent les gens à propos de votre entreprise ? Je te verrai bientôt. 18. Témoignages clients: Il est maintenant temps de créer cette section de témoignages de clients, et c'est ce que nous voulons réaliser Passons donc à notre éditeur. Juste ici. Je vais juste dupliquer cette section. Alors dupliquez ça. Et maintenant nous l'avons ici. Et je vais simplement supprimer tout ce qui se trouve dans ce conteneur car il contient déjà les paramètres dont nous avons besoin. Maintenant, je vais vous dire d'ajouter des éléments, des témoignages. Et comme vous pouvez le constater, nous avons un témoignage gratuit avec Elementor et un autre gratuit avec le kit Elements C'est le kit d'éléments dont nous avons besoin. Je vais donc le déposer là. Et comme vous pouvez le constater, il existe plusieurs styles. Celui que j'ai choisi comme référence est celui-ci. Je vais donc choisir le style 5. Alors voilà. Et je vais entrer dans les paramètres, et nous voulons montrer deux diapositives à tout moment, donc une ou deux. Une fois cette option sélectionnée, je vais réduire les paramètres, développer le témoignage. Voici les espaces réservés aux témoignages par défaut Je vais donc développer le premier témoignage. Je vais donc juste choisir quelques textes, peut-être que ce n'est qu' un texte d'espace réservé parce que je ne veux pas le taper, le coller ici C'est ce qu'a dit le premier client. Et je vais donner le nom de ce client Clark Kent. La désignation est peut-être plus limitée. Métro Goldwine. Le second, peut-être tomber Clark Kent et passer au témoignage 2 Imaginons Jennifer Anniston avec titre E CFO Green Goblin Je vais juste chercher un texto ici. Peut-être ceci. Et collez-le dans la critique du témoignage, développez les troisièmes. Nous avons donc au moins une section de témoignages de base, mais nous pouvons faire mieux Alors, tout d'abord, allons-y et changeons le portfolio en témoignages Commençons par les témoignages de nos clients. Nous y voilà. En réduisant à nouveau le titre et en le sélectionnant pour le témoignage ici, nous pouvons choisir de donner une note Peut-être que ce type nous a donné quatre étoiles et que les autres nous en ont donné deux. Je vais donc simplement le publier. Optez pour le style intérieur , car maintenant nous voulons le styliser. Nous pouvons également revenir dans ce témoignage, développer chaque témoignage et ajouter un avatar client Je vais donc le sélectionner et aller au téléchargement Disons que c'est une horloge. Sélectionnez. Et maintenant, nous y voilà. Je vais donc faire de même pour les deux autres. Publiez-le et prévisualisons les modifications. Faire défiler la page vers le bas. Nous y voilà. Alors maintenant, nous pouvons leur donner des coins arrondis si vous préférez. Donc, tant que c'est toujours sélectionné, je vais passer au style, à la mise en page, au rayon de bordure. Voyons voir, 20, juste comme ça. Publier. Nous n'avons pas besoin d'aller plus loin, mais comme vous pouvez le constater, nous pouvons modifier différentes parties des témoignages Par exemple, ces guillemets, icône de citation, nous pouvons changer sa couleur. Comme vous pouvez le constater, nous pouvons lui donner la couleur que nous voulons. Pour le moment, c'est rouge, mais cela n'a aucun sens. Je vais donc simplement le laisser en bleu, disons juste là, mais nous pouvons réduire l'opacité pour le rendre moins visible, peut-être jusqu'à cet endroit et le publier Prévisualisez les modifications. Et nous y voilà. Vous pouvez également revenir ici aux paramètres de contenu et régler la vitesse. Si vous voulez qu'il reste plus longtemps avant de le faire défiler, vous pouvez peut-être dire que nous voulons prendre 2 000 Ça fait 2 secondes. Vous pouvez également décider d'afficher des points, par exemple. Je vais donc montrer des points ici pour pouvoir cliquer sur les boutons pour naviguer. Et vous pouvez modifier la couleur des points. Je pense que c'est du type d'arrière-plan. Tu peux lui donner cette couleur jaune. Bien, donnons-lui du blanc et quand il est actif, nous pouvons lui donner cette couleur jaune. Lorsqu'il est actif, permettez-moi de sélectionner ce style, d' y accéder, de focaliser le titre, de le copier, y revenir, passer au point, de passer à l' arrière-plan actif, de lui donner cette couleur. Alors maintenant, l'actif est le jaune. Publiez ça. Prévisualisez les modifications. Nous y voilà. Voici donc comment créer la section des témoignages. 19. Effets de mouvement: Il est maintenant temps de travailler sur les effets de mouvement. Si j'actualise la page, vous remarquerez que les éléments se déplacent sans problème. Permettez-moi donc de rafraîchir cette page comme ça. Motion Ces effets améliorent réellement l'expérience utilisateur. Quand je fais défiler la page, nous avons cette entrée juste là. Nous l'avons également. Alors, comment pouvons-nous créer cela ? Nous allons voir notre éditeur . Revenons ici. Je vais juste fermer ça. Parce que nous avons l' en-tête ici, et que la section héros contient des colonnes qui vont maintenant jusqu'en haut car il s'agit d'un en-tête autocollant. La sélection de ces colonnes dans la section des héros est un peu délicate. Je vais donc appuyer sur Ctrl I pour faire apparaître la structure. Maintenant, nous pouvons entrer dans ces conteneurs. Maintenant, sélectionnons ce conteneur avec tout ce qu' il contient, et passons à la mise en page réduite avancée, aux défauts de mouvement. Passons à l'animation d'entrée. J'adore Fading Left. Cela va le faire entrer par la gauche. Et bien sûr, je vais sélectionner celui-ci, celui qui contient l'image. Passez à la mise en page de réduction avancée, aux effets de mouvement, l'animation d'entrée, au fondu à droite, juste comme ça. Mais maintenant, cette image est séparée de l'arrière-plan. Nous voulons donc un bref délai sur cette image du gars. Donc, en développant cela, en fait, je peux simplement sélectionner l'élément gars, puis passer à la mise en page avancée, aux effets de mouvement. Animation d'entrée, décoloration correcte, mais nous voulons retarder l'animation, le délai animation peut-être de 300 millisecondes Cela signifie donc que, comme la colonne elle-même s' estompe correctement sans délai, elle apparaîtra en premier, puis l'image aura un délai de 300 millisecondes Ça arrivera un peu plus tard. Publions-le donc et prévisualisons les modifications. Passez en revue ça. Exactement comme ça. Mais maintenant, nous devons faire de même pour ce bloc de texte. Actualisons simplement cette page et voyons. Ils arrivent tous parce que nous avons uniquement animé le conteneur qui les contenait. Si nous examinons d'abord les éléments individuels tels que ce texte, nous pouvons leur donner le même traitement, chaque élément, le même traitement. Donc, en fait, cela peut arriver par défaut avec le conteneur, alors c'est là que commence notre délai. Alex, cependant, passez à la version avancée, mettez en page les effets de mouvement, en s'estompant vers la gauche avec un délai de 200 millisecondes Ensuite, cette mise en page réduite produit des effets de mouvement, estompant vers la gauche, 300 millisecondes Peut-être que nous allons sélectionner l' ensemble du conteneur contenant ces deux éléments, créer effets de mouvement, faire disparaître en 400 millisecondes gauches Vous pouvez être aussi créatif que vous le souhaitez. Comme vous l'avez remarqué ici, nous avons plusieurs autres types d'animations. Vous n'avez pas besoin de vous fondre dans l'écran. Vous pouvez également zoomer ou rebondir comme vous le souhaitez. Prévisualisons donc les modifications maintenant. Exactement comme ça. Actualisons à nouveau la page. Allons-y. J'adore ça. Alors maintenant, c'est la même chose que nous allons répéter partout où nous le voulons. Nous allons le faire maintenant, et je vous laisse le soin de le faire en tant que mission. Le même cas s'applique donc à cela. Je vais sélectionner ceci. Réduisez ces effets de mouvement en les estompant vers la gauche. Sélectionnez cette option, organisez les effets de mouvement en s'estompant vers la droite. Je vais sélectionner celui-ci, le bouton, le retarder. S'estompe vers la gauche avec un délai de 300 millisecondes. Je vais également le donner par défaut, ce conteneur apporte tout en même temps. Je veux que vous l' apportiez d'abord, puis celui-ci aura un retard de 200 et ce 300. Donc, une fois cette option sélectionnée, passons ici à droite, délai de 200 et à ce délai de 300 OK. Fade dans la droite. OK. Allons-y. Alors prévisualisez-le. Exactement. Donc, si je passe à notre référence, si je l'actualise. Regardez comment ils entrent. Réfléchissez donc à la manière d'obtenir un résultat similaire à celui que j'ai obtenu. C'est votre mission. J'espère que vous avez compris ce que nous avons fait ici. C'est une mission intéressante qui, je pense, vous plaira. 20. Liens: Il est maintenant temps de vous assurer que notre site Web est navigable. Lorsque les gens cliquent sur le lien, ils doivent être emmenés quelque part. Sur notre site Web de référence, lorsque vous cliquez sur Services, vous accédez à la section Mes services. Si vous cliquez sur portfolio, il fera défiler la page vers le bas pour accéder à mes travaux précédents Si nous allons au contact, il passe à la section contact. Comment ajoutons-nous des liens et comment pouvons-nous nous assurer que chaque clic sur un lien vous amène au bon endroit ? Voyons comment procéder. Nous voici dans notre espace de travail. Si je clique, passons à l'éditeur. Si je sélectionne le bouton des services, comme vous le voyez, nous avons un espace réservé ici Mais ce que nous voulons faire, c'est nous assurer que lorsque vous cliquez dessus, il défile vers le bas jusqu'à cette zone de mes services. Nous voulons donc utiliser un lien d'ancrage. Je vais donc dire Ajouter un élément, une ancre, une ancre de menu. Et ce que cela fait, c'est que vous le placez exactement là où vous souhaitez que le clic sur le bouton vous amène. Nous voulons donc que cela nous amène ici. Je vais donc faire glisser cet élément d'ancrage ici. Et ce n'est pas le bon endroit, mais je veux expliquer pourquoi ce n'est pas le bon endroit. Nous l'avons donc placé juste là, et maintenant c'est l'élément sélectionné. Nous voulons donc lui donner un nom, quel que soit le nom que nous allons utiliser dans le champ de lien du bouton. Ce sont donc des services. Ça peut être n'importe quel nom. Donc, parce que nous lui avons donné le nom de services, c'est la destination. Ainsi, lorsque nous cliquons sur le bouton situé dans le champ du lien, nous voulons lui donner le nom de destination. Donc des services. Et cela signifie que lorsque nous cliquons dessus, cela nous prendra. Je vais faire défiler la page jusqu'à la section des services. Mais maintenant, le problème, c'est que ça va nous mener ici. Ce qu'il fait, c'est qu'il défile et place cet élément d'ancrage tout en haut Donc, si je publie ceci et que je prévisualise les modifications. Si nous cliquons sur ces services, comme vous pouvez le constater, cela masque le titre de l'endroit où nous voulons être, alors que nous ne voulons pas y figurer. C'est pourquoi j'ai dit qu'il n'était pas correct de le mettre là. Il s'agit simplement d'un bogue lié à la conception du logiciel. Nous voulons donc le placer un peu plus haut, de sorte que lorsque vous cliquez sur le bouton « Services », le titre soit légèrement plus bas Nous voulons donc le faire glisser et le placer peut-être juste là dans la section précédente. Peu importe la section dans laquelle il se trouve. quoi nous voulons penser, c'est cet élément d'ancrage sera placé tout en haut. Et si le titre que vous voulez en est trop proche, il sera masqué par cet en-tête flottant. Nous voulons donc qu'il soit plus éloigné de l'en-tête de notre section cible. Maintenant que c'est le cas, publions et prévisualisons les modifications. Maintenant, lorsque nous cliquons dessus, il est placé tout en haut. Et comme il y a un écart juste entre celui-ci et le titre, cela a au moins poussé le titre vers le bas. C'est donc l'essentiel de ce que nous voulons réaliser. La prochaine chose que nous voulons faire est de voir mon travail. Donc, comme nous connaissons maintenant le nom de la destination, nous pouvons simplement lui donner le portfolio sous forme de nom, portfolio. Je vais donc dupliquer cette ancre. Et faites-le glisser vers le bas, je ne parviens pas à continuer à le faire défiler, alors laissez-moi simplement le supprimer et aller ici, puis tapez anchor Je veux le déposer ici même dans cette section précédente. Bien qu'il soit encore sélectionné, donnons-lui ce portefeuille de noms. Et comme le portfolio de hachage a déjà été publié sur notre bouton , nous allons ici Cliquez ici pour accéder à la section de mon portfolio Maintenant, la grande question est est-il de ceux qui sont au sommet. Si je clique sur Services, cela ne mène nulle part. Comment avons-nous créé ce menu ? Nous sommes entrés dans le tableau de bord. Passons donc aux menus d'apparence. Et n'oubliez pas comment nous avons créé ces liens personnalisés. Donc, si je développe ce lien personnalisé, n'oubliez pas qu'il contient une URL. Nous avons utilisé du hachage. Pendant que nous le créions, nous avons ajouté un hachage. C'est ça. Ce sont donc des services. Réduisez ça, et voici le portfolio. Effondre-toi là-bas. Ensuite, bien sûr, disons qu'il s'agit du menu de contact et de sauvegarde. Nous allons maintenant revenir ici et actualiser cet éditeur pour qu'il prenne en compte les modifications que nous avons apportées au tableau de bord. Prévisualisons maintenant les modifications. Maintenant, si vous cliquez sur Services, leur portfolio s'affichera directement. Et contactez, nous n'avons pas ajouté d'élément d'ancrage. Laisse-moi juste fermer ça et redescendre. Si nous faisons défiler la page vers le bas, nous n'avons que des témoignages Permettez-moi de le dupliquer maintenant que nous l'avons. Nous pouvons dire, supprimons ce client, disons l'espace de contact, M. Et maintenant nous pouvons dire ajouter une ancre, et placons-le directement dans cette section précédente. Contactez, publiez. Et comme nous lui avons déjà donné ce contact de hachage, si nous allons ici et que nous cliquons sur contact, nous serons redirigés ici Nous allons maintenant travailler sur ce formulaire de contact. Si nous allons sur le site de référence, nous avons un formulaire de contact à créer, et c'est pour une leçon ultérieure. Ne vous inquiétez donc pas pour ça. Nous voulions simplement établir les bons liens. Maintenant, nous avons aussi ce livre pour moi. Donc, bien sûr, nous allons passer à Elementor, à droite, lien, Openlink in New tap Je veux éditer ce livre moi-même. C'est superflu, mais c'est juste pour vous montrer que vous pouvez avoir un bouton ici, mais cela nous mènera également au formulaire de contact, car si quelqu'un veut vous réserver, il ira sur le formulaire de contact Le livre M est donc le bouton. Alors contactez, publiez. Très bien, alors revenez à l'éditeur, actualisez. Et actualisez également cette page ici et dites « Réservez-moi ». Cela nous mènera à la page Contactez-moi. Je pense donc que c'est la fin de cette leçon. Je te verrai dans le prochain. 21. Section de pied de page: Il est maintenant temps de créer la peur. Allons voir notre rédacteur en chef ici. Donc maintenant, nous n'allons pas créer le pied de page ici. Ceci est désormais réservé au formulaire de contact. Nous allons quitter cet éditeur. Nous n'allons pas non plus travailler dans la section d'en-tête. Nous allons entrer dans le tableau de bord et nous rappeler comment nous avons créé l'en-tête à l'aide du kit d' éléments, de l'en-tête et du pied Revenons donc au kit d'éléments du tableau de bord, en-tête et pied de page. Nous avons maintenant un en-tête. Supposons ajouter de nouveaux modèles de bas de page, choisissez le pied de page ici. Rendons-le visible sur tout le côté, et disons modifions-le. Nous y voilà. Maintenant, cela nous permet également apprendre autre chose sur Elementor, que vous pouvez utiliser des modèles prédéfinis Vous n'êtes pas obligé de tout créer vous-même. Il s'agit de modèles Elementor et de modèles de kits d'éléments Je vais donc cliquer dessus, et cela va ouvrir cette fenêtre contextuelle. Comme vous pouvez le constater, nous avons toutes les pages. Page complète, vous pouvez simplement cliquer et installer au lieu de passer des heures à créer la page vous-même. Mais bien sûr, vous vouliez apprendre à créer des pages Web à partir de zéro avant de commencer à utiliser des modèles. Passons maintenant à la catégorie et choisissons le pied de page. Oui, passons au pied de page ici. Et celui que j'ai choisi est celui-ci. Je vais donc simplement dire insérer et c'est inséré. Maintenant, n'oubliez pas que notre site Web occupe 100 % du contenant principal et 80 % du contenant contenant le contenu du contenant extérieur. Assurons-nous donc que c'est le cas avec ce modèle. Si je sélectionne ceci, comme vous pouvez le voir, c'est Fitzels, nous voulons nous assurer que pourcentage et qu'il est de 100 % Et ce contrôle interne me permet de sélectionner ce conteneur contenant le contenu. Je veux que ce soit 80 % du contenant extérieur, et maintenant, en sélectionnant le contenant extérieur, alignons le tout au centre. Publiez-le et examinons les modifications. revue ça. Nous y voilà. Maintenant, nous pouvons cliquer dessus pour ajouter un logo. Pour sélectionner notre logo, sélectionnez. Je vais aller sur le site Web de référence et sélectionner Copier le message photo ici. Collez ça dedans. Non, c'est le titre. W la description du titre. Control Shift. Pour en revenir à la référence, créer des supports de communication intemporels, et passer à la description du titre, A, Control Shift Et sélectionnez ce bouton. Visionnez mon travail. Et je veux en faire un lien externe. Disons donc, en fait, que si nous allons sur mon site Web de référence ici, c' est la référence. Si je clique dessus, un nouvel onglet s'ouvrira et j'accèderai à mon portfolio B Hands. C'est mon travail. Alors, visualisez mon travail, ouvre mon travail dans un nouvel onglet. Alors, comment s'y prendre ? y revenir, permettez-moi simplement de copier ceci à partir de la référence. Maintenant, en revenant ici, le bouton est sélectionné. Je vais le coller dans le champ URL, et pour l'ouvrir dans un nouvel onglet, je vais cliquer dessus et dire «  ouvrir dans une nouvelle fenêtre ». Alors publiez-le. revue ça. Maintenant, si je clique dessus, mon portfolio Behans s'ouvrira Comme vous pouvez le voir, tous droits réservés et la barre N nécessite quelques modifications. Nous voulons que le contenant qui les contient représente également 80 % du contenant extérieur. Cela ne correspond pas à notre palette de couleurs. Je veux donc aller dans notre page ici et sélectionner l'un des éléments avec la couleur. Copions ce jaune, revenons à l'éditeur de pied de page, sélectionnons cet élément, passons au style, au titre ciblé Il s'agit du même élément d'en-tête. Publiez ça. Si je le sélectionne, comme vous pouvez le constater, la palette de couleurs n'est pas non plus la même. Il s'agit d'une liste d'icônes. Donc, en passant au texte de style, survolez, collez cette couleur juste là Au survol, ce devrait être cette marque jaune. Le même cas s'applique à ce style de bouton. La couleur du texte sur H doit être la couleur de notre marque. Publier. Allons y jeter un œil. Nous y voilà. Mais maintenant, nous devons mettre à jour les boutons car ils ne mènent nulle part. Ils sont venus avec le modèle. Nous ne les avons pas définis. Donc, en sélectionnant le contenu des éléments, passons au point B. A devrait simplement accéder à l'URL, la page d'accueil, réduire en haut, aller au portfolio. Le portefeuille doit aller à HH, portefeuille N'oubliez pas l'ancre, services doivent aller aux services de hachage Les services et le contact doivent être envoyés à hash Contact. Publiez-le, et prévisualisons les modifications. En fait, cela devrait se trouver sur cette page. Permettez-moi de rafraîchir la page pour que le pied de page le reflète. Maintenant, si je clique sur portfolio, il y ira. Si je vais au contact, je vais là-bas, si je vais ici, les services, ça défilera vers le haut. Très bien Vous pouvez également cliquer dessus pour aller en haut, comme ça. Je pense que le pied de page est maintenant couvert. Maintenant, il y a cet élément d'icônes sociales, qui est probablement maintenant facile à faire pour vous , compte tenu de tout ce que nous avons pu faire jusqu'à présent. Donc, tout d'abord, si nous agrandissons l'icône Facebook, nous pouvons accéder à la couleur, dire « personnalisé et la remplacer par la couleur que nous voulons. Je ne l'ai pas dans mon bloc-notes. Mais c'est quelque chose que tu peux faire. Si vous souhaitez remplacer la couleur de la la marque afin que, lorsque vous survolez la souris, elle prenne la couleur orange ou jaune, c'est à vous de le faire Mais sinon, tout le reste est désormais couvert. Nous pouvons également le sélectionner et modifier ce contenu 2027. Et changez cette épinglette avec photo en Alex Doe. Ton nom maintenant. Publiez ça. Réserve Alex Doe Ras. 22. Section de contact: Il est temps de créer un formulaire de contact pour notre site Web à page unique. Donc, en allant chez notre éditeur ici, nous avions déjà créé une section de contact. Ce qui manque ici, c'est un formulaire de contact. Donc, comme je l'ai mentionné plus tôt, pour créer un formulaire, nous aurons besoin d'un plugin, un plugin de formulaire. Il existe de nombreux types de plugins de formulaires. Mon préféré et celui que j'utilise est le forminateur. Passons donc à notre tableau de bord. Je vais juste le faire parce que nous en avons fini avec le FUTA, passez à Wordpress Cela nous mènera au tableau de bord. Je vais aller aux plugins, ajouter un plugin. Et je vais taper ici. Permettez-moi simplement de rejeter tout cela. Ici, je vais taper Ominator. Voici FormatorFMS installé maintenant Activate. Il apparaîtra juste ici. Je peux simplement accéder directement aux formulaires. Ou laissez-moi simplement cliquer sur le tableau de bord pour accéder à la page d'accueil du plugin. Voici la page d'accueil. Ici, je veux choisir la demande de devis car nous voulons essentiellement que quelqu'un demande un devis. Si vous regardez le site Web de référence que j'ai créé, où se trouve le site Web de référence ? Ici, nous voulons que quelqu'un puisse choisir un service de modélisation de cartes de conception Web, peut-être choisir le montage vidéo, puis saisir quelques détails du projet, puis son prénom et son adresse e-mail et demander un devis pour le projet qu'il vient de décrire. Alors, comment s'y prendre ? y revenir, nous pouvons créer un formulaire à partir de zéro, mais c'est une leçon pour un futur cours. Pour le moment, nous pouvons simplement utiliser un modèle. Créez donc un formulaire. Voici donc les champs, les services, les nœuds supplémentaires, le prénom, l'adresse e-mail, le numéro de téléphone. Si vous ne voulez pas le numéro de téléphone, vous pouvez simplement supprimer ce champ. Si vous souhaitez renommer un champ, suffit de cliquer dessus et de le modifier Décrivez donc votre projet. Le projet s'applique. Il s'agit maintenant de décrire votre projet. Pour le prénom ici, vous pouvez le développer pour désactiver le préfixe, le deuxième prénom et le nom de famille, car nous voulons juste le prénom Nous ne voulons pas plusieurs champs. Et pour ce qui est de l'e-mail, ça a l'air bien. Je vais donc simplement dire publier et nous allons obtenir ce code court, que nous allons coller devant et le formulaire apparaîtra partout où nous collerons ce code court. Je vais donc copier le code court. Fermez ceci, allez dans notre éditeur, ajoutez un élément, un élément de code court. Il s'agit simplement d'un espace réservé pour coller n'importe quel code court que vous avez Alors déposez-le là. Et maintenant, nous collons le code court. Nous le copions simplement depuis le tableau de bord qui s'y trouve. Et le formulaire devrait apparaître ici, publier. OK. Appliquons simplement pour actualiser l'éditeur et voir le formulaire. Faire défiler la page vers le bas. Voici le formulaire. Maintenant, ces services sont une sélection. Non, il s'agit d'un élément de type case à cocher, et ce n'est pas ce que nous voulons Mais avant de changer cela, permettez-moi de revenir ici et de prévisualiser les modifications. Accédez au contact, et voici à quoi cela ressemble en ce moment. Maintenant, je veux les fermer parce que nous ne les utilisons plus. Voyons comment le styliser. Pour en revenir à notre formulaire dans la zone du forminateur, j'ai tout d' abord mentionné qu'il s'agit d'un champ de case à cocher Nous ne voulons pas de case à cocher. Nous voulons utiliser un champ déroulant. Je vais donc le supprimer et dire « insérer des champs de formulaire ». Ce que nous venons de supprimer est un champ de type case à cocher. Ce que nous voulons, c'est un champ d'insertion sélectionné. Nous avons maintenant besoin d'options ici. Quels sont les services que nous proposons ? Conception graphique, conception Web, ajout d'une option, montage vidéo, ajout d'une option, modélisation de cartes. Si vous voulez que quelqu'un puisse sélectionner plusieurs choix, comme je vous l'ai montré, vous pouvez sélectionner ce multiple. Si vous voulez que quelqu'un puisse sélectionner un seul service et décrire ce qu'il veut, vous pouvez simplement le laisser à single. Voyons quoi d'autre ? Sélectionnez le type de service. Appliquer. Nous pouvons maintenant le faire glisser et le placer au-dessus. C'est la première fois que vous publiez les modifications. Maintenant, si nous allons dans notre éditeur et que nous sélectionnons l'élément, l' élément de code abrégé et que nous l'appliquons, cela reflétera les modifications que nous venons dans le backend du tableau de bord. Prévisualisez les modifications et voyons qui nous sommes en contact. Maintenant, nous avons une liste déroulante, et quelqu'un ne peut choisir qu'un seul type de service. Nous verrons comment styliser ce formulaire dans la prochaine leçon, car vous ne voulez pas que cette leçon soit trop longue bientôt. 23. Styliser la forme: Il est maintenant temps de surfer sur notre formulaire. Permettez-moi donc tout d'abord de cliquer sur Aperçu pour que nous puissions voir ce que nous avons ou d'accéder au contact. Nous avons remarqué qu'il avait rétréci et poussé vers la gauche. Donc, pour revenir ici, nous voulons sélectionner le formulaire lui-même, passer à Avancé, et pour la largeur, nous voulons dire pleine largeur afin qu' il occupe toute la largeur du conteneur qui le contient. Publiez-le donc et prévisualisons les modifications. Entrez en contact. Il occupe maintenant toute la largeur, mais nous voulons que cette largeur soit de 50 %. J'aime que ce soit étroit. Je vais en bas. Je pense que c'est une meilleure taille de formulaire. Maintenant, la prochaine chose que nous voulons faire est de modifier ce champ de sélection. Maintenant, n'oubliez pas que nous avons différents types de champs ici. Il s'agit d'un champ de nom. Il s'agit d'un champ de courrier électronique. C'est ce qu'est ce champ de zone de texte. Et il existe différents types de champs ici, et le formulateur nous fournit un moyen de modifier chaque type de champ que vous avez utilisé Cela se produit donc dans cette apparence de panneau. Donc, tout d'abord, nous pouvons passer au style. Vous pouvez choisir de le laisser comme valeur par défaut. Comme vous pouvez le constater, nos frontières sont étroites. C'est ce que nous avons. On peut dire plat, et cela supprimera les bordures si nous publions le et si nous passons ici, pendant que cela est sélectionné, appliquons et prévisualisons, passons au contact. Vous remarquerez maintenant qu' il n'y a pas de frontières. Vous pouvez également le mettre en gras. Cela signifie des bordures audacieuses. Et comme vous pouvez le deviner, si je vais ici et rafraîchis simplement cette page, elle aura des bordures. C'est donc ça. Permettez-moi donc dire que nous voulons qu'il reste par défaut. Et ce qui nous intéresse vraiment, ce sont les couleurs. Nous voulons utiliser des couleurs personnalisées. Cela élargit tous ces types de domaines. Il s'agit d'un champ de sélection, afin que nous puissions styliser la sélection. Par exemple, nous pouvons dire que nous voulons que la couleur de la bordure soit blanche et que la couleur de la bordure soit blanche. Donc, si je dis publier les modifications et aller ici pour actualiser, cette bordure sera blanche. Donc, comme vous pouvez le voir, c'est blanc maintenant. Donc, ce que je veux, c'est lui donner une teinte parce que nous travaillons avec ce bleu clair, nous voulons lui donner une teinte de bleu foncé, mais légèrement différente pour qu'il soit stable. Nous voulons donc sélectionner ce bleu. Je vais passer aux réglages latéraux. N'oubliez pas que nous utilisons ce bleu clair dans le cadre d'un dégradé. Donc, si vous passez à l'arrière-plan, c'était la deuxième couleur. La couleur supérieure était bleu foncé. Je veux donc sélectionner ce bleu clair. Revenez ici et dites que la couleur de la bordure doit être bleu foncé, mais légèrement plus claire. Peut-être cette couleur, publiez-la. Mais maintenant, n'hésitez pas à jouer avec les couleurs que vous voulez. Et dans le même temps, c'est pour vous montrer la polyvalence de ce plugin. Si je rafraîchis cette page, maintenant, comme vous pouvez le voir, nous avons ce bleu clair. Il ne s'agit pas de rendre les choses très belles en ce moment. Maintenant, nous pouvons également modifier cette icône et le texte. Ainsi, par exemple, nous pouvons rendre ce texte blanc. Donc, couleur du texte. C'est la couleur du texte du champ. C'est cette couleur, mais nous voulons la couleur de l'étiquette. Publions-le et prévisualisons l'actualisation des modifications. Oui, c'est donc cette couleur. Je recherche les bases du champ Let's go to field and change the label. Donc, l'étiquette de tous les champs, nous voulons qu'elle soit peut-être gris foncé, publiez-la. Maintenant, si nous allons ici et que nous l'actualisons, oui, nous voulions que les étiquettes soient de couleur blanche. Maintenant, si nous descendons, vous pouvez également modifier la couleur de la bordure de l'élément actif. Principes de base du champ Collapse. Passons à l'intérieur de la sélection. N'oubliez pas qu'il y a Select et que le menu de sélection contient un autre menu appelé Liste déroulante ici Bordure de conteneur. Oui Ceci ici peut devenir cette publication grise, et passons en revue les modifications. Rafraîchir Non, ce n'est pas la couleur. Je veux que nous changions ce bleu marine. Est-ce que c'est une liste déroulante avec le pointeur de la souris ? Couleur du contour. Concentrez-vous. Oui, ça. Quel que soit l'élément sur lequel nous nous concentrons, disons, il devrait avoir cette couleur. Maintenant, mettons cela à jour. Oui, comme vous pouvez le voir, vous pouvez modifier tous les aspects de ce formulaire. Maintenant, nous voulons également que ce soit maintenant la couleur d' arrière-plan sélectionnée, car il s'agit de la couleur d'arrière-plan actuellement sélectionnée. Si nous le sélectionnons et que nous l' agrandissons, il est maintenant bleu. Le champ sélectionné devrait donc être peut-être gris. Rafraîchissez ça. Allons-y. Donc, comme vous pouvez le voir, vous pouvez jouer avec ça. Je veux que nous changions cela. Sélectionné, concentrez-vous avec le pointeur. Couleur de l'option. Donnons-lui ce gris au lieu de ce noir foncé. Donc, l'option ici est cette couleur, je pense. OK, ce n'est pas ça. Oh, ces options, je pense que c'est ce que nous avons changé. Il doit être de couleur foncée. Survolez. Nous pouvons également modifier la couleur de cette icône. Lorsqu'il est par défaut, nous voulons qu'il soit blanc. Publier les modifications. Cette icône juste ici, actualisez-la. Oui, c'est blanc et au survol, c'est bleu. Blanc et en survol. Bleue. D'accord, donc oui, donc je veux que vous changiez de couleur Vous voyez cette horrible bordure bleue juste ici. Je pense que c'est ici que nous le changeons. Je veux qu'il soit blanc ou gris clair, violacé. Et actualisons-le. Ouais Je voulais juste vous montrer comment modifier chaque champ. Maintenant, il ne s'agissait que d'un domaine sélectionné sur lequel nous nous concentrions. Nous pouvons le réduire et accéder à la zone de saisie et de texte. Il s'agit d'une zone de texte, et ce sont des champs de saisie. Parce que si nous revenons au champ de formulaire, si je le sélectionne, il s'agit d'un champ de nom et d'un champ de saisie. Fermez ça. Il s'agit d'un champ de zone de texte. Il s'agit donc de champs de saisie, et il s'agit d'une zone de texte. Il s'agit d'une sélection. Pour en revenir à l'apparence et aux couleurs, nous voulons passer à la zone de saisie et à la zone de texte, et c'est là que nous pouvons affecter ces trois éléments. Telles sont donc vos missions. Prenez le temps de jouer avec la zone de saisie et de texte de ce formulaire. Vous pouvez également travailler sur le bouton de soumission, qui est le bouton de demande de devis. Vous pouvez lui donner une couleur de fond peut-être cette couleur de fond sombre, et le tour est joué. Mais oui, donnons-lui cette couleur jaune. Je veux que nous allions ici, que nous sélectionnions ceci pour sortir d'ici dans les paramètres latéraux, que nous sélectionnions ce style de pâte, que nous focalisions sur le titre, sélectionnions ce jaune, que nous le copions, que revenions ici, que nous le donnions. Par défaut, donnons-lui cette couleur jaune. Et au survol, nous voulons lui donner la couleur orange. Copiez ça. Au survol, nous voulons lui donner cette couleur orange comme ça. Publiez les modifications et prévisualisons-les. En fait, allons-y. Cliquez sur Sélectionner le formulaire appliquez toutes les modifications apportées et prévisualisez les modifications. Maintenant, c'est à vous d' aller sur YouTube et de regarder d'autres vidéos sur forminator pour comprendre comment utiliser ce superbe plugin de formulaire C'est un plugin de formulaire très puissant. Découvrez comment démarrer votre formulaire exactement comme vous le souhaitez. Nous ne voulons pas prolonger cette leçon trop longtemps. Alors contactez le webdesign. Donc, les options sont là, puis demandez un devis. Maintenant, une mise à jour rapide sur quelque chose dont je me suis souvenu lors de la modification de cette leçon. Je ne vous ai pas montré que vous pouvez également changer la couleur de fond de ce conteneur ici. Je vais donc sélectionner ce conteneur ici. Accédez à Style, copiez cette couleur. Sélectionnez ce type d'arrière-plan de style de conteneur et collez-le à cet endroit. Passez ensuite au rayon de la frontière de 20. Publiez ça. En fait, nous pouvons également passer à Advanced et lui donner un rembourrage de 20 Publiez-le, et prévisualisons les modifications. Accédez au contact. Allons-y. JE 24. En-tête réactif: Il est maintenant temps de terminer en beauté en rendant la page réactive sur différents appareils. Comme vous pouvez le voir ici, nous avons la vue portrait sur tablette et nous avons une vue mobile. Notre travail consiste donc à aller vers bas, en rendant tout réactif Mais la première chose que nous voulons faire est de commencer par l'en-tête. Et n'oubliez pas que nous avons créé l'en-tête séparément. Passons donc à l'édition avec Elementor, puis à l'en-tête. Et en fait, je vais fermer cet éditeur parce que nous y reviendrons lors de la prochaine leçon. Pour le moment, nous nous concentrons sur l'en-tête. Voici donc l'éditeur d'en-têtes. Je vais fermer ça. Passons donc au portrait sur tablette, et il héritera des paramètres que nous avions définis pour le bureau Comme vous pouvez le voir, ce contenant intérieur contenant les trois colonnes représente 80 % du contenant rose extérieur. Nous voulons donc atteindre ce chiffre à 90 %. La plus éloignée est de 100 %. Si nous passons au mode bureau, nous avons ceci. Dupliquons donc cela pour avoir deux en-têtes, et je vais appuyer sur Ctrl pour y réduire Nous avons maintenant deux en-têtes. Nous avons l'en-tête d'origine et celui où nous le dupliquons. Maintenant, je veux masquer l' original et travailler sur le dupliqué, c' est-à-dire double-cliquer dessus et l' appeler tablette Double-cliquez sur l'en-tête de cette tablette. Double-cliquez dessus. Il s' agit de l'en-tête du bureau. C'est caché pour le moment. Nous y travaillons donc. Et ce que nous voulons faire, c'est supprimer ce bouton et l'étendre, étendre ce conteneur. En fait, sélectionnez un contenant qui les contient. Et disons que nous voulons un espace entre eux. Cela va tout séparer à l'intérieur du conteneur. Donc, espace entre l'élément local et l'élément de menu. Et la raison pour laquelle nous avons dupliqué l'en-tête est que si nous supprimions le bouton, si nous avions simplement conservé un en-tête et supprimé le bouton, il serait supprimé sur tous les appareils, y compris le bureau Nous voulons donc avoir un en-tête séparé sans le bouton. Maintenant que nous l'avons nous pouvons cliquer dessus et le développer. Comme vous pouvez le voir, nous avons un menu latéral ici. Et ce que nous voulons faire, c'est accéder aux paramètres du menu mobile et aller ici au logo du menu mobile, et nous voulons ajouter ce logo, sélectionnez-le. Maintenant, si nous l' agrandissons, le logo est là, mais le fond est blanc. Passons donc au style, à l'emballage du menu, à l'arrière-plan de l' emballage mobile Nous voulons lui donner ce fond bleu foncé. En fait, voyons voir. Je veux que nous passions aux réglages secondaires assez rapidement. Nous voulons battre ce bleu foncé. le fond latéral, ce bleu, copiez-le, sortez d'ici. Cachons ça pendant une seconde. Retournez à l' en-tête de la tablette, puis au style. En fait, allons-y. Cliquez sur le menu Burger, allez ici et collez-le là. Réduisez l'emballage du menu, passez à l'élément de menu Donnons-lui une couleur blanche pour le texte de l'élément. Sur Hover, nous pouvons lui donner cette couleur jaune. Mais sur Hover, il a déjà une belle couleur de survol. Nous pouvons également accéder à l'emballage du menu et déterminer la largeur souhaitée Disons le pourcentage ici. Et nous voulons qu'il soit juste étroit, pas trop large, juste là. Maintenant, remarquez que cette icône de Togo est trop sombre. Alors, écroulez ça. Je veux aller au menu des hamburgers. Hamburger Il y a le togo à hamburger et il y a aussi ce togo fermé C'est le togo fermé. Nous voulons passer au type d'arrière-plan. Où est le type d'arrière-plan ? Et donnez-lui une couleur blanche, juste comme ça. Ensuite, il y a l'icône. Nous pouvons lui donner la couleur que nous voulons. Pour le moment, je viens de lui donner un jaune aléatoire, et je pense que c'est suffisant. Maintenant, pour en revenir, pendant que cette option est sélectionnée, nous voulons également passer au Togo pour hamburger, et nous voulons passer au type d'arrière-plan et lui donner une couleur blanche Type d'arrière-plan. Publiez ça. Tu peux lui donner la couleur que tu veux. Maintenant, si nous le prévisualisons, prévisualisons en ce moment Et nous avons oublié de donner un lien à ce logo. Sélectionnez donc le logo, le lien, l'URL personnalisée, et donnons-lui l'URL du domaine, publiez. Revenez ici pour que lorsque nous sélectionnons cette option, nous puissions accéder à la page d'accueil. Et si j'appuie sur Control Shift I, nous pouvons maintenant passer à cette étape pour activer les outils réactifs, et nous voulons les passer aux tablettes. iPad mini, par exemple, et maintenant voici à quoi il ressemble. Notez maintenant que nous avons les deux en-têtes, l'en-tête original du bureau et l'en-tête de la tablette Nous voulons masquer l'en-tête de la tablette. Nous voulons masquer l' en-tête du bureau lorsque nous consultons le site Web sur une tablette. Alors, comment s'y prendre ? revenir ici, nous voulons sélectionner ceci et passer à Advance. Sélectionnez l'en-tête du bureau, accédez à Advance, réduisez la mise en page, accédez à Responsive et masquez-le sur tablette et mobile. Il ne sera donc visible que sur le bureau. Ensuite, sélectionnons cet en-tête de tablette, passons à Avancé, faisons le contraire. Responsive, masquez sur le bureau, l'en-tête de la tablette, car nous allons également le réutiliser pour les téléphones portables. Il ne sera donc visible sur mobile et tablette. Publiez ça. Vous savez, si nous revenons ici et cliquons sur Accueil. Maintenant que nous sommes en mode tablette, nous ne pouvons voir que l'en-tête de la tablette. Maintenant, si nous cliquons dessus, voici notre menu. Je pense donc que ça a déjà l'air bien. Pour en revenir, passons au téléphone portable. Et ça marche aussi bien sur téléphone portable, mais il faut y aller un peu plus loin. Sélectionnez donc un conteneur qui les contient, passez à Avancé, et je veux casser ce rembourrage, puis ajouter un rembourrage à gauche de 20 Maintenant, disons dix et ajoutons à droite de dix Publier. Maintenant, passons en revue cela. Disons maison, disons HL ten. Oui, donc c'est à ça que ça ressemble. Et maintenant, nous voulons le modifier sur téléphone portable. Donc, comme vous pouvez le constater sur mobile, cette option est trop large. Donc, avec le mobile, nous voulons qu'il soit plus large, peut-être à la hauteur de la publication. revenir ici, à la page d'accueil, sélectionnez-le. Maintenant, ça a l'air bien. Ne t'inquiète pas pour ça. Bien entendu, cela ne s'affichera pas. C'est WordPress. Ce sont des outils Wordpress. Donc, en gros, nous en avons terminé avec les en-têtes. C'est ainsi qu' ils peuvent être réactifs. 25. Corp. réactif: Il est maintenant temps de rendre le corps réactif. Alors allons-y et faisons-le. Je vais juste quitter les outils réactifs et fermer ça. Et comme nous en avons fini avec l'en-tête, je vais également le fermer. Maintenant, allons-y et cliquons sur Modifier avec Elementor pour modifier la page, et passons à la tablette Et maintenant, comme vous pouvez le voir, il y a déjà un gros problème ici, nous voulons sélectionner le conteneur supérieur. Développez-le, sélectionnez le conteneur à l'intérieur. Et passons à la marge avancée. En fait, cassons également le rembourrage. Et tout d'abord, passons à la largeur, et faisons-en 100 % ou 95 % de la largeur du contenant rose le plus extérieur Donnons-lui simplement une marge supérieure de 50. Disons 60 ou 70. Et maintenant, même si c'est toujours sélectionné, souvenez-vous qu'il s'agit toujours de deux colonnes, une colonne, deux colonnes. Nous pouvons passer d' une configuration en lignes à une configuration verticale où les deux colonnes ne sont plus des colonnes. Ils ne font que commencer. Passons donc à non, nous sommes censés sélectionner ceci. Accédez à la mise en page et passez à celle-ci. Et maintenant, sélectionnons ce premier conteneur, et donnons-lui 100 % de largeur, 100 % de largeur à l'intérieur de ce conteneur. Sélectionnons-le également et donnons-lui une largeur de 100 %. Maintenant, il occupe 100 %. Et comme c'est 100 %, centralisons tout. Donc, ici comme ça, sélectionnons également ceci et organisons au centre tout ce qui justifie un tel centre. Publiez ça. Si nous le prévisualisons, contrôlez le shift I pour afficher les outils de développement. Allons-y et passons à la tablette, à l' iPad Mini. Oui, c'est ce à quoi ça ressemble. Augmentons à nouveau la marge supérieure de ce conteneur, en les maintenant à 100 pour le publier. Je pense que c'est une meilleure position pour faire défiler la page vers le bas. Très bien Maintenant, en descendant, nous pouvons faire de même ici. Nous pouvons sélectionner ce conteneur contenant tout et passer à une colonne. Ensuite, sélectionnez-le, faites-en une largeur de 100 % et alignez le tout au centre. Sélectionnez ce texte, accédez au style, au centre d'alignement. Sélectionnez ceci, faites-le à 100 %. Et en fait, je veux le sélectionner et le faire en sorte qu'il soit également 100% comme ça pour que tout soit parfaitement ajusté. Publiez ça. Prévisualisons-le. Juste comme ça. Nous pouvons faire de même ici. Je vais sélectionner ceci, passer à Avancé. Tant que cette option est sélectionnée, je vais passer à la section Avancé et je la donne. Non, je veux un pourcentage de 80 % de largeur. Sélectionnez ce contenant contenant tous ces conteneurs, donnez-lui 100 % de largeur. Mais avancé. Donnons-lui un peu de rembourrage de 20 sur tout le pourtour pour lui donner de l'espace sur les côtés En fait, je pense que nous pouvons également faire la même chose que nous avons fait ici. Je le préfère empilé. Nous l'avons donc. Ensuite, nous avons ce conteneur. Tout tenir. Passez donc à la mise en page, et empilons le tout. Sélectionnez le contenant contenant ces quatre et faites-le ainsi 100 % de large. Sélectionnez celui-ci en maintenant l'image, et faisons-la à 100 % ou disons 60 %, 80 %. Et assurons-nous que le conteneur lui-même qui les contient a tout aligné au centre comme ça. À présent, vous avez déjà compris l'essentiel. En sélectionnant cette option, passons à largeur avancée en pourcentage, disons 80 %, sélectionnons ce conteneur ici, sélectionnons ce conteneur ici, et faisons-le simplement 100 %, mais passons à Avancé et donnons-lui un rembourrage de 20 La même chose s'applique ici. 80 %. Sélectionnez ce conteneur. Allons-y à 90 %. Je pense que c'est une bonne largeur. Publiez ça. Et puis section contactez-moi. Avancé, avancé à 80 %. Nous allons sélectionner ce conteneur contenant le formulaire. Je vais peut-être lui donner 90 %. Il n'y en avait pas vraiment besoin. Publiez-le ici. Passons tout en revue. Faire défiler la page vers le bas. J'adore ça. Il ne reste donc plus qu'à passer à l'affichage mobile. OK. Et répétez le même travail, mais maintenant pour mobile. La seule chose supplémentaire que vous allez faire est donc de réduire la taille des différents éléments sur mobile. Par exemple, pour ce titre, passons au style, au titre. Comme vous pouvez le constater, chaque fois que nous sommes en mode réactif, il y a toujours des éléments qui peuvent être modifiés pour différents appareils. Nous aurons toujours ces icônes. Si nous passons à la tablette, cela passera à la tablette et à l'ordinateur de bureau. Donc, puisque nous avons déjà fait de la tablette, nous passons maintenant au mobile. Nous pouvons définir une taille de typographie. Nous pouvons définir une taille pour les appareils mobiles, peut-être jusqu'à cet endroit. Et en fait, nous avons même oublié le régler pour l'aligner au centre. Une fois que nous l'aurons fait comme ça, la vue mobile en héritera. Pour celui-ci sur mobile, nous devons passer au démarrage de la conception et sélectionner chacune d'entre elles, passer à l'option Avancé avec 100 %. Je peux écrire ceci, copier, écrire ceci, coller le style, écrire ceci, coller le style. Je peux copier. Non, il y a l'en-tête principal. Sélectionnez ceci, allez dans Style, titre, typographie, réduisez la taille. Quoi d'autre ? Maintenant, je peux le copier. Style de collage. Cliquez avec le bouton droit sur le style de collage. C'est encore trop long, mais on peut l'aligner au centre comme ça. Cliquez avec le bouton droit sur le style de collage. Et je pense que nous en avons terminé. ne reste donc que le pied de page, mais c'est une tâche que vous pouvez accomplir en vous basant sur tout ce que nous avons appris Donc, en faisant défiler l'écran jusqu'en bas, je trouve que tout va bien . Si nous passons au Pixel P. Je pense que tout va bien mieux maintenant. Vous pouvez prendre votre temps pour tout mettre à jour pour qu'il soit impeccable Je pense donc que nous allons nous arrêter ici pour le moment. Dans la prochaine leçon, nous verrons ce qu'il reste à faire. Je te verrai donc bientôt. 26. Réflexions finales !: Et félicitations pour avoir atteint la toute fin de ce cours. Vous avez non seulement appris comment fonctionnent certaines des fonctionnalités gratuites d' Elementor les plus populaires, mais vous vous êtes également retrouvé avec un site Web de marque personnelle entièrement fonctionnel et réactif J'espère que vous comprenez maintenant mieux comment ces outils individuels peuvent être utilisés pour créer un site Web ayant un objectif réel. Maintenant, un petit rappel. Comme toujours, n'oubliez pas de partager votre projet de classe. Une fois que vous avez terminé de créer votre site Web d'une seule page, prenez une capture d'écran complète du site fini et téléchargez-la dans la galerie de projets J'adorerais voir ce que vous avez pu trouver, et votre projet pourrait également inspirer d'autres élèves de la classe. Si vous avez apprécié ce cours et que vous l'avez trouvé utile, la meilleure façon de soutenir mon travail est de prendre le temps de laisser une note et un commentaire. Vos commentaires contribuent à rendre ce cours plus accessible aux autres étudiants qui souhaitent apprendre la conception de sites Web Prenez donc un moment pour accéder à l'onglet de révision situé sous ce lecteur vidéo et faites-moi savoir, ainsi qu'à toute la communauté s'il s'agit d'un cours que vous recommanderiez à tous ceux qui souhaitent apprendre un lamentateur qui serait vraiment utile, et je vous en remercie Maintenant, merci beaucoup d'avoir appris avec moi, et jusqu'à la prochaine fois, continuez à créer. À bientôt.