Un guide pour débutants de l'élémentor : concepter votre première page d'atterrissage

1. Introduction: Dans le monde en évolution rapide d'aujourd'hui, l'un des changements les plus importants concerne l' endroit et la façon dont nous faisons nos achats et passons notre temps. Avec la montée en flèche de la pénétration mondiale d' Internet au cours de la dernière décennie, de plus en plus de personnes consacrent une partie importante de leur vie à Cela représente une énorme opportunité pour vous d'étendre la portée de votre entreprise et d'acquérir nouveaux clients auparavant hors de votre portée. Par exemple, si votre entreprise possède un site Web, vous pouvez vendre vos produits à des personnes du monde entier. Vous n'êtes pas obligé de vendre à des clients dans le cadre de vos commandes. Ou si vous avez des compétences en conception de sites Web, vous pouvez gagner votre vie en créant des sites Web pour d'autres entreprises ou en créant modèles de sites Web et en les vendant en ligne. Mais la question est de savoir comment créer un site Web ? Avez-vous besoin de compétences en programmation ou en codage ? Eh bien, pour développer un site Web, vous avez deux choix. Vous pouvez soit payer un concepteur Web pour le faire à votre place, soit apprendre à le créer vous-même. Dans ce cours, je veux vous montrer comment créer vous-même des sites Web à l'aide d'Elementor Et à la fin du cours, vous aurez un flux de travail solide pour créer des sites Web sans écrire une seule ligne de code. A wait a mini, qu'est-ce qu'Elementor ? Elementor est un incroyable générateur de pages par glisser-déposer pour W press Il est puissant, intuitif et vous permet de concevoir et de personnaliser visuellement vos sites Web. Il vous suffit de glisser-déposer divers éléments de page comme un graphiste pour créer vos mises en page Maintenant, je suppose que vous n'avez jamais utilisé Elementor auparavant, vous êtes donc un débutant complet Si c'est votre cas, ce cours est pour vous. En tant qu'entrepreneur prolifique, vous avez probablement des idées commerciales qui nécessitent un site Web de temps à autre, mais vous n'avez pas les moyens de payer un concepteur Web chaque fois que vous souhaitez créer un prototype de site Web Ce cours vous permettra de transformer vos idées de sites Web en sites Web dynamiques. En partant de zéro, nous allons créer ensemble une page de destination réelle en maîtrisant les outils Elementor les plus couramment utilisés Nous allons commencer par apprendre comment installer Weer Press en ligne et hors ligne. Nous verrons comment installer Elementor et d'autres plugins en local et en ligne Nous verrons comment installer un thème WordPress à la fois en ligne et hors ligne. Ensuite, nous allons nous familiariser avec l' interface utilisateur d'Elementas En d'autres termes, je vais vous faire visiter l'éditeur Elementa afin que vous puissiez vous familiariser avec les outils, les fonctionnalités et les paramètres que vous devez connaître Une fois que vous aurez découvert rapidement l'éditeur Elementa, nous passerons à la création de votre page de destination, commençant par la barre de navigation en haut jusqu' au pied de page en Nous expliquerons également comment rendre votre page réactive, afin qu'elle s'affiche parfaitement sur tous les appareils. Si c'est la première fois que vous me voyez, je m'appelle Ken, et j'utilise un L lamentor pour créer des sites Web pour mes clients et moi-même depuis six ans, et je partage cette passion avec étudiants ici même sur Skillshare Et j'espère vous voir dans ce cours. Maintenant, je suis prêt à commencer. J'espère que tu l'es aussi. Dans la leçon suivante, examinons une démonstration de la page de destination que vous allez créer tout au long du cours. Commençons. 2. Projet du cours: R, bon retour. Alors maintenant, comme vous le savez peut-être déjà, la meilleure façon d'acquérir une compétence technique est de travailler sur un projet pratique. Et maintenant, dans ce cours, nous allons travailler sur une page de destination pour apprendre à utiliser les outils élémentaires Voici donc une page de destination, et je veux que nous y jetions un coup d'œil du haut vers le bas. Voici donc notre en-tête avec un logo, un menu. Et un bouton d'appel à l'action rapide ici. Ensuite, nous avons cette section consacrée aux héros. Cette zone s'appelle la section des héros. Il est composé d'un bloc de texte avec des boutons d'appel à l'action et l'image du héros. Ensuite, nous avons ce bouton d'ancrage ici. Lorsque nous cliquons dessus, cela nous pousse à la section suivante, ici même sur la page Et vous remarquerez que cette section contient un joli fond de particules animé. C'est un système de particules, et nous verrons comment le créer. Nous avons également des titres de couleurs différentes, des titres bicolores Nous verrons comment définir la couleur d' un mot spécifique dans une phrase ou dans un bloc de texte. Passons à autre chose, nous avons quelque chose de similaire ici, mais sa mise en œuvre est différente de la façon dont cela a été mis en œuvre. Cette image est ajoutée en tant qu'élément d'image, alors qu'elle est ajoutée en tant qu' arrière-plan de section, et nous verrons comment faire tout cela. Passons au fourrage, ici, nous avons un pied de page qui ressemble à cette autre section Vous remarquerez qu'il s'agit également d'un pied de page très simple avec un logo, description ici, des listes d' icônes ici et des boutons d'appel à l'action C'est très simple, pas compliqué. Je voulais un projet qui soit facile à réaliser pour vous parce que vous êtes débutant, mais qui vous donne également la possibilité d' interagir avec les outils élémentaires les plus couramment utilisés Ainsi, au fur et à mesure que nous créerons cette page de destination , nous pourrons interagir avec ces outils, et une fois que nous aurons terminé, vous aurez la confiance nécessaire pour commencer à travailler vous-même sur une nouvelle page de destination. C'est donc le projet sur lequel nous travaillerons tout au long de la classe. J'espère que tu es aussi enthousiaste que moi. Si tu l'es. Pourquoi ne pas passer à la leçon suivante où nous verrons comment installer une presse W. Je te verrai bientôt. 3. Installation hors ligne de WordPress: R, bon retour. Maintenant que vous avez vu la page d'accueil du projet de création, il est temps d'installer Wpress Maintenant, il existe deux manières ou deux endroits où vous pouvez installer une presse W. C'est en ligne et hors ligne. Dans cette leçon, nous allons nous concentrer sur une installation hors ligne, et dans la leçon suivante, nous allons nous concentrer sur l'installation en ligne. Un autre nom couramment utilisé pour une installation hors ligne de Wpress est l'installation locale car elle est locale sur votre machine Vous n'avez pas besoin d'une connexion Internet pour continuer à travailler sur votre site Web Wpress et à naviguer de page en page Et pour configurer W press localement sur notre machine, nous devrons télécharger deux choses. Premièrement, nous devons télécharger Shap. Deuxièmement, nous devons télécharger W Press. Alors allons-y et téléchargeons Shamp dès maintenant. Je vais donc ajouter un nouvel onglet, et je vais taper Sham. Je vais simplement cliquer sur Télécharger et nous serons redirigés vers cette page, Apache Friends.org Slash Vous serez redirigé directement ici, et nous pourrons télécharger la dernière version que nous utilisons sur notre machine. Comme vous pouvez le constater, nous avons 8,2 0,12. Il s'agit de la dernière version car il s'agit de la version 8.0. Je pense que je vais accepter, mais tu peux choisir n'importe quoi si tu veux. Et il devrait démarrer automatiquement. Pourquoi ça ne démarre pas ? Permettez-moi de cliquer ici. C'est bon. Je n'accepte pas. Je ne sais pas pourquoi il ne se télécharge pas, mais laissez-moi simplement cliquer dessus. Et c'est parti. Alors maintenant, c'est en cours de téléchargement. Et c'est terminé. Shap est maintenant téléchargé. Permettez-moi de cliquer sur Afficher dans le dossier et de faire glisser cette fenêtre ici. C'est ici. Je vais juste double-cliquer dessus pour l'installer. Maintenant, ne vous inquiétez pas à propos de cet avertissement ici. Allez-y et cliquez sur OK, et voici notre setuiz Je vais donc cliquer sur Suivant. Cliquez sur Suivant et installez-le dans C Sham. Je vais donc simplement cliquer sur Suivant. Faisons en sorte que nous puissions simplement l' autoriser sur les réseaux privés, et nous pouvons commencer le panneau C dès maintenant. Alors, continuez cette discussion. Et c'est ouvert dans l'autre fenêtre. Alors voilà. Et comme vous pouvez le constater, Shamp nous fournit plusieurs outils et fonctionnalités Donc, ce que nous devons faire maintenant, maintenant que nous avons installé shamp, c'est démarrer le serveur Apache car votre site web workpas doit fonctionner sur un C'est le serveur qui vous permettra de naviguer d'une page à l' autre pour naviguer d' une partie du tableau de bord à l'autre. Ensuite, activons également la base de données SQL. Voulez-vous l'autoriser ? Oui. Je vais donc simplement aller de l'avant et autoriser cela. Maintenant, comme vous pouvez le voir, Apache est en cours d'exécution mon statut SQL a changé, et il est en cours d'exécution. Et maintenant, la prochaine chose que nous devons faire est de créer une base de données, car lors configuration de notre site Web Wpress, on nous demandera le nom de notre base de Nous devons donc le préparer à l'avance. Je vais donc cliquer sur mon administrateur SQL. Je vais simplement cliquer sur Admin. Maintenant, il est ouvert dans l'autre fenêtre. Je vais juste le faire glisser et le placer ici, et je devrais passer à cette autre fenêtre. Mais voici ce que vous devriez avoir après avoir cliqué sur mon administrateur SQL. Allons ici et sous bases de données. Créons une base de données. Permettez-moi simplement de l'appeler mon underscore DB. Cela n'a pas vraiment d' importance. Vous pouvez simplement dire ma base de données. Ça va. Laissez le reste intact et cliquez sur Créer. Alors maintenant, nous avons cette nouvelle base de données répertoriée ci-dessous. Je vais donc simplement y aller et fermer ça. Maintenant que nous avons une base de données, la prochaine étape que nous devons faire vous rappeler que j'ai dit que nous devions télécharger deux choses. Le premier que nous avons téléchargé était shap. La deuxième chose que nous devons télécharger est Wordpress. Je vais donc aller sur wordpress.org. Et nous y voilà. Je vais juste cliquer sur Get WordPress, et je vais télécharger Wordpress 6.61, et maintenant c'est en cours de téléchargement Nous avons terminé. Maintenant, laissez-moi simplement ouvrir le dossier. Nous y voilà. Je vais cliquer avec le bouton droit de la souris et accéder à WR Et ici. Nous y voilà. Nous l'avons maintenant extrait ici. Au moment où nous ouvrons le dossier, nous devons avoir directement ce contenu. Ce contenu ne doit pas se trouver dans un autre dossier. Ce contenu ne doit pas être extrait de cette façon. Ne cliquez pas avec le bouton droit de la souris pour extraire vers ce dossier. Parce que si vous double-cliquez dessus, il contiendra désormais le dossier Wordpress, qui contient le contenu. Nous voulons ce dossier lui-même, et non le dossier qui a été extrait. Gardez cela à l'esprit. Je vais simplement copier ce Wordpress, cliquer sur Contrôle C. Maintenant, je vais entrer dans C. Laisse-moi entrer dans ce PC, double-cliquer sur mon lecteur C, et nous trouverons ce dossier shap N'oubliez pas que c'est ici que nous l'avons installé. Double-cliquez dessus, allez dans HT Docs. Maintenant, ici, nous collons notre dossier de presse professionnelle, Control V pour le coller, et le voici. Nous pouvons maintenant lui donner le nom de notre site Web, car il s'agit essentiellement d'un site Web. Alors appelons-le peut-être boutique en ligne. C'est donc le nom de notre site Web. Chaque fois que nous voulons créer un nouveau site Web Wpress localement, il suffit de venir ici et de coller un autre Wordpress téléchargé depuis wpress.org, de venir ici et de le Nous y voilà. Nous pouvons appeler ce site Web deux. C'est le site Web 2. Maintenant, si nous nous souvenons de ce nom, Boutique en ligne. Copiez ça. Si nous allons ici et que nous tapons la boutique en ligne de l'hôte local. Allons-y. Cela lancera la configuration de Wordpress. Maintenant, si cela a fonctionné jusqu'à présent, c'est parce que ces deux-là fonctionnent. N'oubliez pas que si vous ne l' avez pas sur votre écran pour le moment, c'est parce que vous n'en avez probablement pas un en cours d'exécution. Donc, pour en revenir ici, ma langue est l'anglais. Bienvenue sur Wordpress. Allons-y et commençons. Allons-y. Nom de la base de données. Souvenez-vous que nous lui avons donné un nom. Si j'ouvre simplement un nouvel onglet et que j'y accède ou que je ferme et que je l'ouvre , allez dans Admin. N'oubliez pas que nous avions ma base de données. Je vais venir ici et utiliser ce nom. Ma base de données. Le nom d'utilisateur est root et laissez le mot de passe vide. Laissez tout le reste intact. Je vais cliquer sur Soumettre. Et nous y voilà. Très bien, Sparky, tu t' en es sortie. Lancez l'installation. C'est ici que nous donnons un nom, un titre à notre site de presse spécialisée. N'oubliez pas que c'était une boutique en ligne. Ce sont les informations d'identification que nous utiliserons pour nous connecter à notre tableau de bord WordPress, afin que nous puissions mettre à jour le contenu. Je vais donc simplement utiliser mon nom d'utilisateur. Je vais utiliser ce mot de passe. Je vais fournir un e-mail ici, et je vais décourager de tels moteurs d' indexer ce site, et allons-y et installons et je vais décourager tels moteurs d' indexer ce site, et allons-y et installons Alors, mémorisez vos informations d'identification, mon nom d'utilisateur, copiez-le et mettez-le quelque part. Permettez-moi de taper t x t ici pour ouvrir un bloc-notes et y mettre ce mot de passe pendant une seconde. Alors vas-y. Permettez-moi également de mettre ici mon nom d'utilisateur. Allons-y et installons ps. Et c'est un succès, nous avons maintenant installé notre presse de travail localement. Donc, si je dis « connectez-vous », je peux venir ici et dire que mon nom d'utilisateur et mon mot de passe sont les suivants. Copiez-le, collez-le dedans et connectez-vous. Je peux l'enregistrer dans mon gestionnaire de mots de passe, et nous y voilà. Nous avons donc maintenant une presse W installée localement. Nous n'avons pas besoin d'une connexion Internet pour continuer à travailler sur notre projet. Félicitations. Vous disposez désormais d'une installation Wpress locale Dans la leçon suivante, nous allons voir comment installer ou configurer les WPS en ligne Pour cela, vous aurez besoin d'une connexion Internet, mais nous verrons cela dans la prochaine leçon. Je te verrai donc bientôt. 4. Acheter un hébergement Web et un nom de domaine: Maintenant que vous avez appris à installer Wordpress localement, vous vous demandez peut-être comment faire la même chose mais en ligne ? Parce qu'en fin de compte, votre site Web doit être mis en ligne. Il doit exister quelque part en ligne. Maintenant, si vous avez suivi l'un de mes derniers cours élémentaires, vous devez avoir lu la leçon où nous avons expliqué comment acheter un nom de domaine, où acheter un hébergement, comment l'acheter, comment configurer Wordpress une fois que vous avez acheté un hébergement et un nom de domaine Nous avons couvert tout cela. Et comme je pense que nous avons fait un excellent travail en expliquant l'ensemble de ce processus, je vais vous emprunter cette leçon et Slotty Teen ici pour que vous puissiez suivre ce processus Alors, on y va. Il est temps de discuter de comment et où obtenir votre hébergement Web et un nom de domaine. Désormais, chaque site Web que vous visitez est stocké quelque part en ligne sur un serveur toujours disponible sur Internet. C'est pourquoi vous pouvez accéder à un site Web situé aux Pays-Bas, aux États-Unis ou au Mexique, car il est stocké sur un serveur toujours connecté à Internet. Cela signifie donc chaque fois que vous cliquez sur un lien qui vous mène à un site Web spécifique, par exemple, free Peck, disons, freepik.com Le navigateur a envoyé une demande pour cette page spécifique, et cette page spécifique est accessible via cette adresse ou cette URL. Ainsi, lorsqu'il a envoyé la demande, cette demande a été reçue par le serveur qui stocke le site Web gratuit Pick, et le site Web Free Pick est composé de nombreuses pages Web. Mais comme cette page Web est représentée par ce nom de domaine spécifique, ce serveur renverra une réponse contenant la page que vous avez demandée. Ce serveur est donc ce qu'un hébergeur vous fournit. Votre hébergeur met à votre disposition un espace de stockage pour votre site Web et veille à ce que soit accessible celui-ci soit accessible à tous ceux qui souhaitent le visiter. Maintenant, l'autre chose dont vous aurez besoin est un nom de domaine, freepik.com est un nom de domaine, et ce nom de domaine spécifique est unique à free peek, donc personne d'autre ne peut avoir le même peak.com gratuit, de la même manière que personne d'autre ne Votre numéro de téléphone est unique et il est utilisé uniquement pour vous joindre, personne d'autre. Votre site Web doit donc avoir un nom de domaine unique, et les utilisateurs utiliseront ce nom de domaine pour accéder à votre site Web. Alors maintenant, pour y revenir, je suis sur wpress.org. Ceci est le site officiel de WordPress. C'est ici que vous pouvez télécharger Wire Press. Si vous souhaitez développer votre site Web hors ligne, vous pouvez installer Wire Press dans votre système travailler sans Internet et créer votre site Web. Mais ce qui nous intéresse, c'est la page d'hébergement. Wire Press propose une liste d'hébergeurs Web recommandés, et je vous recommande de prendre un moment pour lire cette page. Vous pouvez voir qu'ils ont trois principaux hébergeurs recommandés, Bluehost, dream host et wordpress.com Mais cela ne signifie pas que ce sont les seuls hébergeurs que vous pouvez utiliser pour votre site Web Wordpress. Il existe d'autres hébergeurs qui sont tout aussi bons, sinon meilleurs que ces trois. Ce ne sont donc que des recommandations WordPress, mais vous découvrirez ici en lisant ceci qu'il existe des centaines de milliers de sites Web, dont la grande majorité répondent aux exigences minimales de WordPress W Press a décidé de simplement vous faciliter le travail et a décidé de vous donner les trois meilleurs qu' ils recommandent. Maintenant, personnellement, j' ai utilisé Blue Host. Et il y a longtemps, quand j'ai commencé à utiliser Wpress, j'ai essayé wpress.com, et il ne faut pas confondre workpress.com avec workpress.org WPress.org est la plateforme gérée par Work Press Foundation car n'oubliez pas que Wpress est open source Et wpress.org existe pour vous fournir des informations mémorables le téléchargement de W Press et tout ce que vous devez savoir sur W Mais maintenant, en matière d'hébergement, il existe un service dédié appelé wpress.com. Laisse-moi juste l'ouvrir. Il s'agit d'une plateforme qui vous fournit des outils et un hébergement pour créer votre site Web. C'est comme des semaines. Si vous avez vu des semaines, vous savez que lorsque vous créez un site Web pendant des semaines, vous n'avez pas besoin de vous demander où trouver hébergement, car ils hébergent le site Web pour vous. Ils vous donnent simplement les outils nécessaires pour commencer à créer votre site Web immédiatement. Mais bien sûr, il a ses limites, la même manière que Weeks a ses limites lorsque vous comparez à l'installation de Wordpress vous-même sur un serveur. Lorsque vous installez W press sur un serveur quelque part, vous avez plus de contrôle pour faire bien d'autres choses sur lesquelles vous n'avez aucun contrôle lorsque vous utilisez un service hébergé tel que wordpress.com Mais bien sûr, c'est un bel endroit que vous pouvez essayer si vous le souhaitez. Maintenant, sur le plan personnel, j'utilise une puce nominative. Surtout lorsque je ne fais qu' expérimenter quelques idées avant de m' engager à acheter un hébergement Web dédié pour cette idée spécifique Name chip propose donc plusieurs services ici. L'un d'eux est cet hébergement Wordpress géré et cette migration vers Wordpress. Mais un autre service s' appelle l'hébergement mutualisé. Si je l'ouvre, nous avons ce plan Stela Stela Plus ici, et je vais vous expliquer pourquoi j'aime l'utiliser Premièrement, regardez ce nombre illimité de sites Web. Cela signifie que si j'ai dix idées pour différents sites Web, j'en ai dix. Peut-être que je n'ouvrirai pas de boutique en ligne. Je n'ouvrirai pas de boutique de cosmétiques. Je n'ouvrirai pas de blog personnel. Peut-être que je n'ouvrirai pas de communauté sociale. Je voudrais peut-être créer un forum. Ce sont cinq idées différentes. Je peux héberger tous ces sites Web dans le cadre de ce plan sans avoir à acheter un hébergement séparé pour chaque site Web. Je peux héberger un nombre illimité de sites Web dans le cadre de ce plan, et je ne peux payer ces frais que par mois. Bien sûr, c'est la première année qu'il y a une réduction, mais la deuxième année, vous paierez 68,88€ par Mais pensez-y. Si vous avez trois ou quatre idées pour différents sites Web et que vous voulez voir laquelle fonctionnera avant de vous engager pleinement à obtenir un plan d'hébergement Web dédié. Vous pouvez créer le site Web dans le cadre de ce plan. Créez les quatre sites Web. Il y aura du direct sur Internet. Vous pouvez commencer à envoyer des personnes vers ce site Web via des liens sur les réseaux sociaux, simplement liés aux quatre sites Web. Et si l'un des sites Web prend vraiment de l'ampleur et commence à attirer beaucoup de trafic, vous pouvez maintenant décider si ce site Web semble gagner en popularité. Laissez-moi donc obtenir un plan d'hébergement Web dédié séparément. Ensuite, vous pouvez simplement le migrer vers l'hébergement dédié, car c'est maintenant une idée qui a été lancée. Les autres peuvent rester des sites expérimentaux, mais ils sont toujours en ligne. Mais la bonne chose est que vous ne payez que pour un seul plan d'hébergement. Vous ne payez pas différents plans d'hébergement pour les différents sites Web. Et, bien sûr, grâce à ces avantages, je suis capable de créer un site Web comme celui-ci. Voici le site que je viens de vous montrer. Permettez-moi de passer au front end. Il s'agit du site Web de référence que j'ai créé lors de la préparation de ce cours, et je l'ai créé, bien sûr, afin que nous puissions avoir un site Web à consulter pendant que nous travaillons sur le cours. dit, c' Cela dit, c'est l'un des sites Web que j' ai hébergés dans le cadre de ce plan. Et c'est sous ce domaine pour. Maintenant, dans ce cours, nous allons créer notre site Web, et je vais utiliser un nom de domaine différent, qui sera wordpress everything.com, et il sera également inclus dans ce plan J'aurai donc ces deux sites Web, sites de démonstration, sous le même hébergement. C'est pourquoi je l'utilise. Mais maintenant j'ai mis trop de temps à en parler. Je n'essaie pas de te convaincre de comprendre. C'est juste moi qui explique la raison d'être de ce que j' utilise et de mon fonctionnement , car vous le trouverez peut-être utile, mais n'oubliez pas que vous pouvez toujours vous rendre ici et essayer ces autres hébergeurs Web. Ils sont également bons. Va les essayer, choisis celui que tu veux. Et une fois que tu l'as fait, revenons ici. Comme vous pouvez le voir ici, nous avons des domaines. Name Chip est l'un des meilleurs vendeurs de noms de domaine de la planète. Vous avez vu les publicités partout sur YouTube et sur différents sites Web Vous pouvez rechercher votre site Web. Disons charity today.com. Voyons ce que c'est. C'est bon. Charity today.com est le domaine premium C'est 1 700 dollars. Mais nous avons également d'autres domaines moins chers, Charity today dot today. C'est à vous de faire preuve de créativité et d' acheter un nom de domaine avec lequel vous pouvez vivre, un nom de domaine qui a du sens. Bien entendu, vous souhaitez utiliser le nom de vos organisations caritatives ou de votre start-up. Si vous recherchez des fonds pour des projets technologiques et non pour des œuvres caritatives, vous pouvez également simplement utiliser le nom de votre entreprise. Mon entreprise today.com. Et comme vous pouvez le voir, y. Alors jouez avec ça et une fois que vous serez prêt, vous pourrez l'ajouter à la carte. Mais n'oubliez pas que lorsque nous revenons à l'hébergement mutualisé, lorsque vous achetez ce plan, vous obtenez un nom de domaine gratuit. Cela signifie donc que vous avez possibilité d'obtenir un nom de domaine gratuit pour la première année sans avoir à dépenser l'argent que nous venons d'examiner. Vous n'aurez pas besoin d'acheter un nom de domaine la première année, mais vous devrez bien entendu payer pour le nom de domaine à partir de la deuxième année. 5. Installation de WordPress en ligne: Maintenant que vous avez acheté un hébergement Web et un nom de domaine W Press , vous pouvez installer WPs en ligne car nous avons accès à ce que nous appelons le panneau C. C'est le panneau C qui nous fournit l'environnement doté tous les outils et fonctionnalités dont nous avons besoin pour installer un site Web Wpress en ligne Alors allons-y et faisons-le maintenant. Je suis donc sur ma page de connexion par puce nominative, et je vais juste me connecter immédiatement. Je vais donc cliquer sur Se connecter. Nom de la puce, nous voulons vérifier. Très bien, je dois donc vérifier cela. Permettez-moi donc de regarder mon e-mail très rapidement. Et nous y voilà. Et maintenant on y est. Donc, si vous avez acheté un hébergement Web à puce pour accéder à la liste C Panel Go to Hosting, c'est là que vous trouverez tous vos plans d'hébergement Web. Et n'oubliez pas que j'ai acheté Stela plus. Allons-y et cliquons sur Accéder au panneau C. Et nous serons redirigés vers le panneau C. Et nous y voilà. Maintenant, quel que soit l'hébergeur que vous avez choisi, votre panneau C devrait ressembler à ceci. Il se peut que certains paramètres soient manquants, ou que vous en ayez plus que moi, mais la plupart des paramètres sont les mêmes. L'un des principaux outils que vous y trouverez s'appelle sttaculs Et c'est Softaculs qui nous permet d' installer différents types de CMS W Press est un exemple de CMS Vous pouvez donc cliquer sur W press directement ici ou sur le programme d'installation des applications Sptaculs. Je vais donc simplement cliquer sur W Press. Nous allons maintenant accéder à la page où nous pouvons gérer tous les sites Web Wpress que nous avons installés ou en installer de nouveaux. Si je fais défiler la page vers le bas, vous remarquerez qu' un site Web de W press est déjà installé. Et n'oubliez pas que, comme nous utilisons le Stella plus, nous pouvons installer un nombre illimité de sites Web sous le Stella plus. Nous pouvons donc installer une toute nouvelle instance de WordPress. Je vais cliquer sur Installer maintenant, et nous serons redirigés vers cette page pour fournir tous les détails de notre site Web. Commencez par un protocole. J'aime utiliser HTTPS, assurez-vous qu'il y a ce S à la fin pour la sécurité, www website.com, mais vous pouvez également utiliser HTTPS website.com Maintenant, si vous n'avez pas de certificat SSL, vous n'aurez pas de protocole HTTPS, vous n'aurez que du protocole HTTP, mais ce n'est pas recommandé Assurez-vous d'avoir un certificat SSL. Maintenant, lorsque je le choisis et que je clique à l'extérieur, il vérifie rapidement si un certificat SSL est installé, et si c'est le cas, tout va bien. Si je ne le fais pas, il me dira que je ne peux pas choisir HTPS. Ensuite, je vais choisir le domaine sous lequel je vais installer cette instance de wor Press Parce que mon site de référence se trouve dans worpress everything.com Je ne vais rien choisir pour fX pod.com. N'ajoutez rien ici. Sinon, votre page d'accueil devra être WWW, votre nom de domaine slash, quoi que vous y mettiez Ce sera votre page d'accueil. Généralement, vous souhaitez simplement que votre page d'accueil soit wbsite.com. N'ajoutez donc rien ici. Ensuite, je donnerai un nom à notre site Web. Donc boutique en ligne. Achetez n'importe quoi chez nous. C'est une description de notre site Web. Voici les informations d'identification que vous utiliserez pour vous connecter à votre tableau de bord Wpress Si vous ne souhaitez pas passer par le panneau C pour accéder à votre tableau de bord, vous pouvez simplement vous rendre sur la page de connexion de votre site Web Wpress et vous connecter à votre tableau de bord Assurez-vous donc d'avoir un mot de passe et un nom d'utilisateur forts. Je vais juste le laisser par défaut. Et voici quelques plugins préinstallés avec W press. Si vous les vérifiez, je vais juste supprimer ceci et cela. Je n'ai donc rien de tout cela ici. Vous pouvez également choisir d'avoir des sauvegardes pour votre site Web. Laissez-le par défaut. Vous pouvez choisir de sauvegarder votre site Web une fois par semaine ou une fois par mois, comme vous le souhaitez. Je vais donc choisir une fois par semaine. Rotation peut-être deux. Il y aura toujours deux copies de sauvegarde, l'une plus ancienne que l'autre, à tout moment. Et vous pouvez également fournir ici un e-mail auquel une alerte sera envoyée une fois l' installation prête. Je n'ai pas besoin de le faire, alors je vais simplement cliquer sur Installer. Et ne quittez pas cette page tant que la barre de progression n'atteint pas 100 %. Et voilà. Alors maintenant, Wordpress est installé et prêt. Voici l'URL de notre page d'accueil, et voici l'URL de notre tableau de bord. Passons à la page d'accueil. Et c'est le thème par défaut fourni avec Wordpress, et c'est à cela que ressemble notre site Web. Voici notre nom de domaine. Pour en revenir, passons au tableau de bord. Cliquez ici pour ouvrir le lien dans un nouvel onglet, et nous voici dans le tableau de bord de nos sites Web Wpress Nous avons donc installé avec succès W press sur un serveur en ligne fourni par notre hébergeur Maintenant que notre site Web Wpress est prêt, voyons comment installer un plugin Wpress hors ligne. À bientôt. 6. Installer un plugin hors ligne: Maintenant que nous avons installé Wor Press en local et en ligne, il est temps d'avoir un bref aperçu d'Elementor Maintenant, pour cette leçon, nous allons utiliser l'installation locale, et c'est parce que je veux également vous montrer comment installer des plug-ins localement. Maintenant que nous avons cette installation locale de Wor Press, il est temps d'installer l'élément Je vais donc passer aux plugins, en ajouter de nouveaux. Allons-y. Et comme je suis connecté à Internet, ces plugins qui se trouvent dans le répertoire WordPress seront listés ici. Mais comme je l'ai mentionné, c'est parce que je suis en ligne. Si vous êtes hors ligne, vous ne pouvez pas cliquer sur Installer maintenant. En fait, je ne pense pas que vous puissiez voir plugins ici parce que vous n'avez pas Internet. Vous devrez donc venir ici pour télécharger un plugin, puis vous devrez choisir un fichier. Cela signifie que le fichier que vous choisissez est un fichier que vous avez téléchargé au préalable lorsque vous étiez connecté à Internet. Alors, téléchargeons le fichier que nous allons télécharger ici. Téléchargeons Elementor. Plug-in Elemento. Une fois que nous avons cliqué sur Elemento Plug in, n'allez pas sur le site Web d' Elemento, allez sur wpress.org slash C'est ici que vous pouvez le télécharger. Je vais cliquer dessus. Nous serons redirigés vers wpress.org Encore une fois, n'oubliez pas que c'est ici que nous avons téléchargé Wpress. Mais maintenant, cette fois, nous sommes sous contrat de prolongation. Attendons juste que le chargement soit terminé. En ce moment, nous sommes sous extension de plug-ins. Elément enfichable. Donc, ici, je vais juste cliquer sur Télécharger. Vous pouvez en savoir plus sur Lamenta ici si vous le souhaitez. Nous sommes en train de le télécharger, et maintenant il est là. Maintenant, pour y revenir, je vais dire « choisissez le fichier », et je veux dire « téléchargements secondaires », comme vous pouvez le voir, c'est Lamenta 3.232, puis ouvrez Cliquez ensuite sur Installer maintenant. Activez ensuite le plugin. Nous allons maintenant passer en revue cet assistant de configuration. Vous n'avez pas besoin de créer un compte pour utiliser Elementor, je vais donc sauter Vous pouvez continuer avec le thème hello créé et maintenu par Elementor ou l'équipe d'Elementor, ou vous pouvez utiliser votre propre thème préféré Nous allons utiliser un thème appelé Astra, nous allons donc sauter cette partie Maintenant, nous n'avons pas besoin de ces fonctionnalités professionnelles car nous utilisons Elementor Free, alors ignorez-la Et maintenant, nous pouvons modifier un canevas vierge ou choisir un modèle conçu par des professionnels ou un modèle que nous avons déjà créé. Mais maintenant, quelle que soit l' option que nous choisissons ici, y compris Skip, elemento générera automatiquement un exemple de page Elementor, une page modifiable avec Elementor Permettez-moi donc de cliquer sur Ignorer. Et maintenant, Elementa a généré automatiquement cette page, car elle doit nous amener à l'éditeur afin que nous puissions avoir un aperçu rapide de ce qu'est Elemento. Ici, ils nous parlent des fonctionnalités de l' IA auxquelles nous pouvons avoir accès si nous le voulons, mais cela signifie que vous devez avoir un compte Elemento. Alors, saute ça. Et maintenant, voici la page d'exemple s'appelle Elementor numéro huit Et permettez-moi de le publier très rapidement. Nous y voilà. Nous l'avons publié. Maintenant, avant de jeter un coup d'œil à cet éditeur, si nous voulons accéder au tableau de bord, il suffit de cliquer dessus et de passer à WordPress. Une fois que nous serons passés à W, la presse sera redirigée vers l'éditeur Gutenberg pour la page C'est ici que vous pouvez effectuer certaines configurations de base de la page dans le back-end. Nous verrons comment faire tout cela. Maintenant, pour en revenir aux paramètres de Wordpress, comme vous pouvez le voir, il s'agit de la page qui a été automatiquement générée par Elementor Mais ce sont deux pages supplémentaires fournies avec la nouvelle installation de W press. Nous n'avons pas besoin de ces deux-là pour le moment. Sélectionnez-les, puis déplacez-les vers la corbeille et appliquez-les. Nous avons donc maintenant cet Elementor numéro huit. Maintenant, je peux cliquer sur Modifier avec Elementor. Et nous reviendrons à la page élémentaire l'éditeur étant maintenant prêt à être examiné. Je pense donc que pour le moment, nous allons arrêter cette leçon ici. Au moins, je voulais que nous voyions comment nous connecter à une installation hors ligne de W press. C'est un bon endroit pour s'arrêter. Dans la leçon suivante, voyons un aperçu de la signification de toutes ces parties. C'est quoi tout ça ? Quels sont tous ces paramètres lorsque vous créez votre site Web ? Nous verrons cela dans la prochaine leçon. 7. Visite de l'éditeur d'éléments: Il est donc temps de jeter un coup d'œil rapide à l'éditeur. Laisse-moi juste fermer ça. Maintenant, dès le départ, comme vous pouvez le voir ici, nous avons ce qu'on appelle la structure. Maintenant, c'est le nouveau nom. Dans les versions précédentes d'Elementor, cela s'appelait Navigator car il s'agit d'un widget qui nous donne une vue aérienne de l'ensemble de la page, tous les éléments que nous avons sur la page, et nous pouvons rapidement passer d'une partie à l' autre de la Il nous montre également la structure. Permettez-moi de vous le montrer très rapidement. Pendant que nous sommes encore là, si, par exemple, j' ajoute un conteneur. Glissez-déposez un conteneur à cet endroit. Dans le conteneur, en cliquant sur ce signe plus, je fais glisser un élément d'image et je peux peut-être ajouter autre chose. Permettez-moi d'ajouter un autre conteneur juste en dessous de ce conteneur. Maintenant, c'est ce que nous avons. Laisse-moi y mettre une vidéo. Ceci n'est qu'un exemple de « Ajoutons également un autre conteneur juste en dessous », laissez-moi ajouter un titre. Comme vous pouvez le voir, notre structure ici nous montre la structure de la page, d'où son nom. Mais le navigateur de noms était également très pertinent car vous pouvez accéder à n'importe quelle partie de la page Web Donc, si je réduis ceci, cela et cela, comme vous pouvez le voir, nous n'avons qu'un seul conteneur. Ce conteneur, je le survole, comme vous pouvez le voir, c'est le conteneur qui englobe tous ces autres Maintenant, si je l'agrandis, nous avons une image, et cette image est donc à l'intérieur du conteneur. Mais ce conteneur contient également cet autre contenant, nous avons ajouté par la suite. Souvenez-vous de ce contenant, il se trouve à l'intérieur de ce contenant extérieur. C'est pourquoi, lorsque nous le réduisons, nous cachons tout ce qu' il contient. Mais maintenant, à l'intérieur de ce conteneur, il y a un élément vidéo que nous avons ajouté. Si nous développons cela, nous avons cette vidéo et à l'intérieur, nous avons également ajouté un autre conteneur, et maintenant ce conteneur contient ce titre. C'est comme une hiérarchie ou, comme son nom l' indique, une structure. C'est le numéro un. Ici sur la gauche, comme vous l'avez remarqué, j'ajoute des éléments en cliquant sur le signe plus. Si je veux ajouter autre chose, je clique sur ce plus, et je peux ajouter n'importe quel élément à partir d'ici. Ici, nous avons des paramètres supplémentaires. Si je souhaite publier la page, il suffit de cliquer sur Publier. Je peux également cliquer sur ce menu déroulant pour enregistrer cette page en cours en tant que modèle que je pourrai réutiliser ultérieurement. Si je souhaite prévisualiser ce que j'ai créé, je souhaite prévisualiser cette page. Je peux cliquer sur cette icône, mais tout d'abord, publions-la, puis cliquons sur Aperçu des modifications. Cela ouvrira un nouvel onglet, et c'est là que nous verrons notre page telle qu'elle apparaît actuellement. Ici, nous avons quelques autres choses supplémentaires que je n'utilise pas. Ensuite, nous avons ici le responsive design ou le mode responsive, les icônes. Une fois que vous avez cliqué dessus, il passe en mode tablette et vous pouvez optimiser votre page Web pour qu'elle soit belle sur les tablettes. Vous pouvez également cliquer sur cet écran mobile pour passer à la taille de l'écran mobile, et nous pouvons ajuster chaque élément pour qu'il et nous pouvons ajuster soit beau sur les appareils mobiles. Lorsque nous sommes dans un certain mode, par exemple en mode portrait mobile, en mode portrait mobile modifications que nous apportons aux éléments ne s'appliquent pas à la tablette ou à l'ordinateur de bureau. Ils s'appliqueront uniquement au mode mobile. Et nous verrons comment procéder lorsque nous optimiserons notre projet de classe de page de destination vers la fin du cours. Nous allons donc apprendre à utiliser ces outils réactifs. L'autre chose que tu dois savoir, c'est si je réduis ces panneaux ici. Tous ces panneaux contiennent des éléments que nous pouvons faire glisser dans notre espace de travail jusqu'à notre page. Si on ouvre, laisse-moi aller, laisse-moi fermer ça. Si nous passons à la mise en page, nous avons deux éléments principaux, le conteneur et la grille. J'aime bien utiliser le contenant. Cela peut contenir tous les autres types d'éléments que nous trouvons ici. Le conteneur contient essentiellement d'autres éléments de votre page Web. Si nous passons au mode de base et que nous le développons, que nous réduisons la mise en page , dans le mode de base, nous avons les éléments les plus couramment utilisés, tels que le titre, et vous pouvez le modifier ici ou en allant directement ici et en le modifiant directement dans votre travail. Qu'est-ce qu'on a d'autre ? Si nous disons ajouter, nous avons également un paragraphe, appelé éditeur de texte par Elementor Allons-y. Vous pouvez modifier ce texte. Et chaque fois que vous ajoutez un élément à votre espace de travail, dans votre éditeur. En d'autres termes, chaque fois que vous faites glisser un élément et que vous le déposez dans votre page. Dès que vous le déposez et qu'il s'agit toujours de l'élément actif, il sera entouré de ce type de contour, et les paramètres seront définis ici pour cet élément spécifique. heure actuelle, comme vous pouvez le voir, il est écrit « bouton d' édition » parce que je viens de le laisser tomber. Le contenu est le contenu de l'élément. Par exemple, le contenu du texte, en savoir plus. C'est un contenu. Maintenant, le style consiste à modifier l' apparence de l'élément. Il s'agit d'ajouter du contenu à l'élément. S'il s'agit d'un élément d'image, ajout de contenu, par exemple, ajout d'une image. S'il s'agit d'un bouton, ajoutez du contenu , par exemple le t de l'élément. Ensuite, nous avons le style qui change l'apparence de l'élément. Nous pouvons changer la couleur et le bouton. Couleur normale. On peut dire que cela devrait être noir, et en survol. C'est normal au survol. Nous voulons qu'il soit rouge, disons. Au survol, c'est rouge et en mode normal, c'est noir. Nous pouvons également faire de même pour les textes. En mode normal, c'est la couleur par défaut, qui est le blanc, et en survolant, nous pouvons dire que nous voulons que la couleur du texte soit, disons, bleu clair Donc, juste comme ça. La prochaine chose à faire s'effondrer. Maintenant, dans le panneau pro, comme vous pouvez le voir, il est écrit « mise à niveau », et vous remarquerez que chaque élément comporte une petite icône en forme de cadenas, ce qui signifie que si vous cliquez dessus, vous ne pouvez pas le faire glisser dans votre travail car vous devez effectuer une mise à niveau. Tout le reste ici est donc similaire aux deux autres que nous avons examinés. Maintenant, il y a un autre paramètre dont j' aime m' assurer qu'il est activé. Si vous cliquez ici sur les préférences utilisateur, il existe ce paramètre appelé Afficher les options de modification rapide. Laissez-moi vous montrer ce qu'il fait. heure actuelle, si je survole ce coin, si je veux dupliquer, par exemple, ce texte, je dois aller ici, je dois aller ici cliquer avec le bouton droit de la souris, puis dupliquer Allez ici, cliquez avec le bouton droit sur Dupliquer. Ce sont deux étapes que je dois suivre pour dupliquer un élément. Mais si, par exemple, j' avais activé les préférences utilisateur, les options d'édition rapide, si je passe la souris dessus, comme vous pouvez le voir, nous avons maintenant des actions rapides ici Par exemple, il s'agit d'un doublon. Donc, tout ce que j'ai à faire c'est de passer la souris ici et de dupliquer. Ces icônes d'action rapide ici vous aident donc vraiment à faire votre travail beaucoup plus rapidement. Je pense qu'en ce moment, nous avons eu un bon aperçu de l'éditeur. Tout ce qui reste est quelque chose que nous pouvons apprendre au fur et à mesure que nous créons notre page de destination. Mais c'était juste une façon de vous présenter les différentes parties d'Elementor Dans la leçon suivante, commençons à créer l'en-tête. L' en-tête est composé de ce bouton, du menu et du logo. Voyons donc comment créer cela dans la leçon suivante. À bientôt. 8. Installer un thème WordPress: Voilà, bon retour. Il est donc temps de commencer à travailler sur la page de destination, et la première place est l'en-tête. Nous devons le créer. Mais avant cela, nous devons tout d'abord installer un thème wordpress car c'est le thème wordpress qui détermine l' apparence de votre site Web ou de vos pages Web. Donc, en entrant dans un Wordpress, laissez-moi voir. Maintenant, nous en avons terminé avec l'éditeur élémentaire. Je vais donc simplement ne pas être publié, alors laissez-moi simplement cliquer sur publier, puis passer à Wordpress. C'est l'élément 8, Exit complètement. C'est donc là que vous devriez être maintenant, car nous allons installer un thème Wordpress tout de suite. Il s'agit maintenant de la version hors ligne de notre site Web. Je vais vous montrer comment installer un thème Wordpress hors ligne, puis nous allons passer en ligne car à partir de là, nous allons continuer avec la version en ligne. Maintenant, nous sommes hors ligne. Comme vous pouvez le voir, hôte local. Donc, des thèmes d'apparence, et bien sûr, ce sont les thèmes par défaut fournis avec chaque nouvelle installation de Work Press en fonction de l'année. Comme nous sommes en 2024, le thème actif par défaut s'appelle 2024. L'année dernière, c'était 2023, et l'année précédente, c'était ça. Donc évidemment, l'année prochaine, le thème par défaut sera 2025. Mais comme notre thème n' est pas répertorié ici, nous pouvons dire ajouter un nouveau thème. Et notre W Press va ouvrir le répertoire des thèmes W press. Nous allons suivre un processus similaire à du téléchargement ou de l'installation du plug-in. Comme nous allons parler de thème de téléchargement, je choisis un fichier que vous avez déjà téléchargé, un thème que vous avez déjà acheté et téléchargé. Je n'avais donc pas téléchargé le thème. Je vais retourner sur workpres.org. Mais maintenant, cette fois, passez aux thèmes étendus. Ici, je vais chercher Astra, mais c'est généralement l'une des trois premières Le voici, mais vous pouvez également rechercher Astra, entrer et le voici Je vais le sélectionner, puis le télécharger. Nous y voilà. Il est en cours de téléchargement. Et maintenant, Astra est téléchargée. y revenir, je vais choisir un fichier, télécharger Astra, ouvrir et installer maintenant Emballez le colis, puis allons-y et activons-le. Et maintenant Astro est le thème actif. Voici donc comment procéder hors ligne. Maintenant, je vais passer à ma version en ligne du site Web. Ici, je suis sur un autre nom de domaine vor. Et à partir de maintenant, nous allons créer la page de destination sur celui-ci. Mais maintenant, au moins, vous savez comment travailler hors ligne. Passons maintenant aux thèmes d' apparence, c'est la même situation ici. Par défaut, thème actif 2024, mais nous voulons dire ajouter un nouveau thème. Mais cette fois, au lieu de dire thème à haute voix, parce que vous êtes connecté à Internet, nous pouvons l' installer directement depuis le répertoire des thèmes Wordpress Je vais vous dire d'installer Astra. Et puis activez. Allons-y. Le thème actif est donc Astra Permettez-moi de clore ceci en même temps. Maintenant, vous avez un thème actif et vous êtes prêt à commencer à créer la page de destination. Dans la leçon suivante, voyons comment commencer avec l'en-tête. Je te verrai donc bientôt. 9. Installer ElementsKit: Commençons donc par l'en-tête. Mais avant cela, je voudrais fermer tous ces onglets. Juste comme ça. Il nous reste donc cette page comme page de destination de référence. Nous reviendrons pour examiner la section que nous construisons, juste pour avoir une idée mentale de ce que nous construisons. Maintenant, pour créer l'en-tête, nous devons utiliser un plug-in tiers. Allons donc dans notre espace de travail. Je veux passer aux plugins. Ajoutez-en un nouveau. Tout d'abord, permettez-moi de cliquer sur les plug-ins, afin que nous puissions voir ceux qui sont installés. Acis met et Hello Dolly sont livrés avec une installation de presse partout. Je vais donc sélectionner les deux, puis les supprimer et les appliquer. OK. Et il semblerait que j'installe également Loginizer tout en installant Work Press dans Je vais donc également le supprimer. À l'heure actuelle, aucun plugin n'est installé. Je vais dire ajouter Nouveau, et je vais taper Elementor Parce que souvenez-vous, je vous ai montré comment installer Elementor hors ligne Maintenant, nous utilisons le site Web en ligne, et je dois installer Elementor ici Je vais dire installer maintenant. Et il est installé. Avant de cliquer sur Activer, jetez un œil à ces autres modules complémentaires liés à Elementor. Comme vous pouvez le constater, elementor est créé par elementor.com, mais ces autres sont développés par des développeurs tiers Celui que nous allons utiliser pour créer notre en-tête est le kit d'éléments de WP Meet. Je vais juste dire installer maintenant. Nous y voilà. Alors maintenant, permettez-moi d'abord d'activer Elementa Je pense que nous allons passer par nous n'avons pas besoin de passer par cet assistant de configuration, mais vous serez peut-être invité à le parcourir. Nous y voilà donc. Je vais également activer Lamentski Light. Nous y voilà. Maintenant, si je passe le curseur sur Elements Kit Light, vous remarquerez que nous avons un pied de page d'en-tête, et c'est ici que nous allons créer notre Mais avant cela, permettez-moi de cliquer sur Elements kit afin que nous puissions passer par l' assistant de configuration pour le préparer. Il s'agit maintenant de paramètres de base pour déterminer ce qui sera automatiquement préactivé pendant que nous travaillons sur notre page. Par exemple, ce sont les différents widgets qui apparaîtront sur notre page au fur et à mesure que nous la modifierons. Par exemple, je clique avec le bouton droit sur ce lien ouvert dans un nouvel onglet, ouvre et j'ouvre cet exemple de page pour le modifier. Et moi de fermer tout ça et de modifier avec Elementor. Laisse-moi fermer ça. Alors maintenant, si je le réduis, comme vous pouvez le voir, lorsque nous avons installé le kit d'éléments, il a été automatiquement ajouté à cette liste de panneaux dans l'éditeur d'éléments. Donc, le kit d'éléments et le kit d'éléments en tête de page. Maintenant, ce sont des éléments qui sont déjà préactivés grâce à l' installation du plug-in. Mais maintenant, si nous venons ici et disons que nous voulons des éléments avancés, d'autres éléments seront activés ici, et ils nous seront accessibles ici même. Si nous choisissons simplement le mode de base, certains de ces widgets seront désactivés et nous ne pourrons pas les voir ici pour les utiliser dans le cadre de notre travail. Ainsi, par exemple, si je sélectionne Avancé, regardez ces widgets ici. Voilà, comme vous pouvez le voir, wi get Builder est désormais activé par défaut. Étape suivante, suivante, suivante, enregistrement des modifications. Et maintenant c'est terminé. Nous en avons donc fini avec ce magicien. Et je pense que nous sommes prêts à commencer avec un en-tête. Donc, si je clique sur le pied de page d'en-tête, comme vous pouvez le voir maintenant, nous n'avons ni en-tête ni pied Donc, ce que nous devons faire, c'est dire « ajouter un nouveau ». Mais c'est quelque chose que nous allons faire dans la prochaine leçon. Je te verrai bientôt. 10. Créer un logo d'en-tête et un button: Et nous sommes prêts à créer un nouvel en-tête. Alors allons-y et disons ajouter un nouveau, et maintenant, bien sûr, nous allons lui donner le nom d'en-tête, et c'est un en-tête. Lorsqu'il sera temps de créer un pied de page, nous viendrons également ici et sélectionnerons le pied de Mais passons maintenant à l'en-tête, et bien sûr, nous voulons qu'il soit visible sur l'ensemble du site. Si vous souhaitez qu'il soit disponible de manière conditionnelle ou visible uniquement sur des pages ou des parties spécifiques, vous devez utiliser la version pro du branchement Alors activons-le également. Cela signifie qu' il faut le rendre visible dès maintenant. Lorsque nous effectuons une maintenance et nous ne voulons pas que les utilisateurs le voient, nous pouvons le désactiver, mais nous ne l' aurons pas supprimé Maintenant que nous l'avons pratiquement prêt, nous pouvons dire « modifier le contenu » et nous allons être redirigés vers le front-end où nous pouvons maintenant le modifier visuellement. Mais pour le moment, nous pouvons simplement enregistrer les modifications. Même si nous cliquons sur Modifier le contenu, les modifications seront également enregistrées. Pas de soucis. Je veux juste enregistrer les modifications afin que vous puissiez les voir répertoriées ici. Mais maintenant, nous pouvons cliquer sur Modifier, et maintenant revenir ici et dire « modifier le contenu ». Nous allons maintenant passer au front-end où nous pouvons commencer à travailler dessus visuellement. Nous y voilà. N'oubliez pas que nous sommes en train de créer cette section, ici même. Tout d'abord, il est divisé en un, deux, trois. Entrez dans les structures, vous pouvez commencer par un conteneur Flexbox ou un conteneur convenu J'aime utiliser les conteneurs Flexbox. Je vais donc cliquer sur Flexbox, et ici nous allons voir différentes structures créées gratuitement que nous pouvons rapidement commencer à utiliser Comme nous l'avons vu, nous avons une, deux ou trois colonnes. Ils vont bien tous les trois. Le menu apparaîtra au milieu, le logo ici. En fait, nous pouvons cliquer sur ce signe plus et ajouter une image. Déposez-le ici, et ce sera notre logo. Alors laisse-moi aller de l'avant et sélectionner ça. D. Nous n'avons rien dans notre médiathèque. Alors téléchargez des fichiers depuis l' appareil, sélectionnez des fichiers. Et j'avais préparé ici un dossier appelé assets, ce dossier. Il contient toutes les images que j'ai utilisées sur le site de référence, juste au cas où vous voudriez suivre ces images. Vous allez donc trouver un dossier appelé assets juste dessous de ce lecteur vidéo dans l'onglet projets et ressources. Vous pouvez le télécharger pour suivre. Je vais donc télécharger toutes les images car nous les utiliserons éventuellement. Et c'est parti. J'ai besoin du logo. Je vais sélectionner le logo et c'est parti. C'est bon. Maintenant, je viens de m'en souvenir. Comment ai-je pu oublier ? Il faut que ce fond soit noir ? Alors permettez-moi de revenir ici et tout d'abord, publions la page exactement telle qu'elle est. Passons maintenant aux paramètres latéraux. Arrière-plan, et donnons-lui un arrière-plan sombre en sélectionnant le type d'arrière-plan, puis la couleur. Je veux le faire glisser vers la section bleue ici, puis le faire glisser quelque part là-bas. Je ne veux pas que ce soit d' un noir pur comme ça. Je veux qu'il y ait une touche de bleu foncé. Enregistrez les modifications. Et maintenant, les modifications ont été mises à jour dans l'éditeur. Revenons donc à l'éditeur, et nous y voilà. Maintenant, la prochaine chose que nous voulons ajouter est un bouton. Je vais cliquer ici pour ajouter un bouton, et c'est parti. Bien sûr, il est aligné vers la gauche. Nous pouvons l'aligner vers la droite en allant dans Style. Positionnez-vous à droite. Et nous pouvons également modifier le contenu. N'oubliez pas que le contenu est une question de contenu lui-même. Alors, qu'est-ce que nous avons ici ? Commencez. Commencez. Et n'oubliez pas que style consiste à changer l'apparence d'une chose. Maintenant, je veux un vert qui ressemble à ceci. Donc, pour en revenir ici, pendant que le bouton est toujours sélectionné, je vais sélectionner le bouton de sous-style, couleur normale Donnons-le. Laisse-moi tirer ce vert. Je veux qu'il y ait cette nuance de vert quelque part. Et je veux que ce texte ait ce fond bleu foncé. Pour revenir ici et en arrière-plan, copiez ce bleu. Fermez-le, sélectionnez le bouton, passez à la couleur du texte en mode normal. Vous devez avoir cette couleur foncée, je contrôle juste Vd, et au survol, elle peut être blanche, juste comme ça Publiez, et examinons les modifications. Cliquez sur ce I. Voilà à quoi ça ressemble actuellement. Comme vous pouvez le constater, cela semble être plus élevé que cela. Cela semble mal aligné, en y retournant. Tout d'abord, je veux le réduire, sélectionnez ce bouton ici. Passez à l'état avancé. Laisse-moi casser le rembourrage. Marge. Permettez-moi également de sélectionner le contenant qui le contient. Chaque conteneur est livré avec des marges et un rembourrage par défaut. En sélectionnant ce conteneur, en avançant, en le retirant, comme vous pouvez le voir, il s'est déplacé vers les coins du conteneur. Je vais faire de même pour ce contenant. Avancé. Casse ça. Sélectionnez ce conteneur également en mode avancé. Casse ça. Publiez, passez en revue les modifications. C'est bon. Alors maintenant, au moins, nous arrivons à quelque chose avec ça. Ils semblent être correctement alignés. Et maintenant, il ne reste que ce menu. Et nous allons ajouter cela dans la prochaine leçon, puis équilibrer le tout au fur et à mesure de notre progression. Mais pour le moment, je pense que c'est bon endroit pour terminer cette leçon. La leçon suivante, allons-y et ajoutons le menu. Alors je te verrai. 11. Ajouter un menu de navigation: Maintenant que nous avons déjà ajouté un bouton et un logo, il est temps d'ajouter notre menu de navigation. Donc, pour en revenir à notre zone de travail, où en sommes-nous ? Sois perplexe, nous y voilà. Alors maintenant, revenons ici, laisse-moi faire glisser ça. Peut-être que d'ici là, publions et voyons ce que nous avons. C'est bon. Il s'agit simplement de tout mettre de côté. Alors maintenant, en cliquant sur ce signe plus ici, les éléments s'afficheront, et je peux taper NV Vous remarquerez que nous avons des éléments dans le menu Kit NV, et nous avons un autre menu NV Et cela vient d'Elemento Pro. C'est pourquoi il a ce verrou et nous ne pouvons pas l'utiliser. Donc, faire glisser les éléments dans le menu NV. Et en le déposant là-dedans, il devient l'élément actif ici. Et comme il s'agit de l'élément actif, nous pouvons sélectionner un menu à afficher ici. Si je passe ici, il s' agit d'un menu composé de quatre éléments de menu. Et ces quatre éléments de menu sont des pages. Ce sont des pages Web. Il peut s'agir d'autres types de contenu, mais il peut également s'agir de pages Web. En revenant ici, ce menu déroulant devrait afficher une liste de tous les menus que nous avons créés, mais nous n'en avons encore créé aucun Nous devons accéder au backend de War Press et créer un menu qui contiendra des éléments de menu, puis nous le trouverons répertorié ici. Permettez-moi de publier ceci. Retournez ensuite à la sortie de War Press, et nous y voilà. Je veux aller à l'apparence, au menu. Et voilà, créez votre premier menu ci-dessous, afin que nous puissions donner un nom au menu. Donnons-le, allons-y avec mon menu. Notez ici que nous avons ajouté des éléments de menu. Ce sont des éléments de menu. Ainsi, les éléments de menu peuvent être des pages Web, blog ou des articles. Il peut s'agir de liens personnalisés que vous avez créés. Il peut s'agir de catégories et, dans d'autres cas, d'autres types de contenu différents, selon le thème que vous utilisez. Mais maintenant, parce que nous avons donné un nom à notre menu et que nous voulons en faire le menu principal, si nous disons créer un menu. Maintenant, cette zone devient active. Il a été effacé, mais il est maintenant actif. Et n'oubliez pas que nous avons quelques pages qui ont été générées automatiquement par W press lorsque nous installons W press. L'un d'eux était un exemple de page. Si je dis VO, nous avons une page d' accueil et un exemple de page. Maintenant, cela signifie que nous devons créer quelques éléments de menu, et je veux ajouter cette maison, je veux dire, oui, ajoutons ces deux éléments à titre d'exemple. Ajouter au menu. Et nous y voilà. C'est le menu principal, sauvegardez le menu. Allons-y. Maintenant, si je passe au kit d'éléments, à en-tête et au pied de page et que je fais une fuite de droite, j'ouvre un nouvel onglet de liaison, nous pouvons donc le laisser intact Voici le nouvel onglet. Disons ici, disons, avec Elementor. Nous y voilà. N'oubliez pas que nous avons ce menu de navigation du kit d' éléments de navigation. Maintenant, si nous allons ici pour sélectionner le menu, nous avons le menu M que nous avons créé, et il contient ces deux éléments, Accueil et exemple de page. Publions-le. Bien qu'il soit toujours sélectionné, définissons-le en gros, afin que nous puissions voir que le style des éléments réduit l' emballage du menu, le style des éléments de menu Passons à l'absence de typographie, à la couleur du texte de l'article. Pour le moment, c'est noir, nous voulons que ce soit blanc. O hover, nous voulons que ce soit aussi vert. Permettez-moi de sélectionner ce style de bouton. Va ici. Contrôlez C pour copier cette couleur. Sélectionnez cette option, cela passe au menu du kit d'éléments. Lorsque vous sélectionnez le bouton, il devient bouton, lorsque vous sélectionnez cette section, il se transforme en conteneur, en image. Donc, vous êtes un élément actif. Donc, avec ce style sélectionné, style d'élément de menu. Au survol, nous voulons que ce soit la couleur verte que nous venons de copier Donc, au survol, il est maintenant vert. Et lorsqu'il est actif, nous voulons également qu'il soit de couleur verte. Alors publiez Passons en revue les modifications. Allons-y. Maintenant, il faut les pousser du bon côté. Allez ici, sélectionnez le contenu de ce menu nerveux, position du menu horizontal. Nous le voulons sur la droite. Juste comme ça. Avant d'aller trop loin, publiez un aperçu. Maintenant, nous y voilà. Mais maintenant, vous remarquerez qu'ils sont toujours mal alignés Nous devons faire quelque chose à ce sujet. En revenant ici, alors que le menu est toujours sélectionné, passez à Avancé. Disparons de ça et de la marge. Pour la marge inférieure, réduisons-la complètement à 40. Le sommet également, moins 40. C'est bon. Nous allons maintenant sélectionner le conteneur qui contient le menu. Il est sélectionné. Maintenant, vous remarquerez ici nous avons la mise en page, que nous avons un contenu justifié, et que nous pouvons le justifier au centre, à la verticale. Nous pouvons le justifier dès le départ, c'est en haut, comme vous pouvez le voir par cette ligne plus longue en haut, ou en bas, ou par ces autres. Mais celui qui nous intéresse, c'est celui-ci. Cliquez dessus pour l'aligner verticalement au centre. Sélectionnons-le également. Ce contenant. Faisons de même ici. Et celui-ci aussi. Publiez, et passons en revue les modifications. Alors maintenant, tout semble être correctement aligné. Mais vous remarquerez qu' ici, c'est large. Il atteint presque le bord, et nous verrons comment procéder car nôtre est trop proche de l'intérieur. Mais pour l'instant, nous allons en rester là. Nous le redimensionnerons lorsque nous commencerons à créer la section des héros Donc, pour l'instant, je veux que nous changions ces éléments de menu. Retournez au menu. En fait, revenons aux pages, et voici les deux pages que nous avons. Rliik, ajouter un nouveau lien ouvert dans un nouvel onglet, Rliik, ouvrir le lien Nous avons maintenant ces deux pages. Je veux le nommer à propos de. Cliquez sur Publier très rapidement. Bibliothèque de modèles Guten Kit. Je ne sais pas ce que c'est, mais je ne pense pas que ce soit un problème. Fermez ça. J'appellerai ce contact Publish, publish. C'est bon. Rafraîchissez cette page, et maintenant nous les avons. Je souhaite sélectionner ces deux options et passer à la corbeille. Passons aux menus d'apparence. Vous remarquerez maintenant que la page d'exemple n' est pas valide car nous venons de la supprimer. Alors enlevez-le. Cette page d'accueil est un lien personnalisé. Je vais juste le retirer. Ce n'est pas une page. Il s'agit d'un lien personnalisé. Passons ici aux pages et disons «  voir à propos du contact ». Ajouter au menu. Enregistrer le menu. En fait, je vais maintenant ajouter une page. Je vais dire ajouter Laisse-moi appeler cette page d'accueil, pousser, publier. Je reviens ici et je me rafraîchis. Nous avons également une page d'accueil, ajouter au menu. Permettez-moi de le faire glisser jusqu'à là, enregistrer le menu. Nous avons maintenant ces trois éléments de menu. Retournez ici et rafraîchissez-vous. Nous avons maintenant ces trois pages. Je voulais juste vous montrer comment vous pouvez modifier les éléments du menu si vous le souhaitez. Prévisualisez ça. Allons-y. Je pense donc que c'est suffisant pour le moment. Dans la leçon suivante, nous allons voir comment créer cette section consacrée aux héros. Je te verrai donc bientôt. 12. Définir une icône de faveur: Maintenant que nous avons créé notre en-tête, il est temps de créer la section des héros, et voici la section des héros, ce que vous pouvez voir lorsque vous arrivez sur la page, cette section supérieure. Mais maintenant, avant d'aller trop loin, je veux que nous examinions quelque chose. Par exemple, si vous regardez une puce de nom ou des spectacles, vous remarquerez qu'ils ont une petite icône juste en haut qui vous indique rapidement de quel site Web il s'agit si vous avez trop d'onglets ouverts C'est ce qu'on appelle un favicon. Certaines personnes le prononcent comme une icône préférée, peu importe Tout dépend de la façon dont tu aimes le prononcer. Mais maintenant, le plus important est de savoir comment l'ajouter. Et pour l'ajouter, il suffit de personnaliser pendant que nous sommes encore en train de modifier n'importe quelle partie du site Web, de personnaliser. Nous y voilà, et nous allons passer à l'identité du site, à icône du site, au chargement. En fait, je n'ai pas de favicon, d'ailleurs. Je vais juste utiliser ces deux-là. Je n'en ai pas. Sélectionnez-le. Laissez-moi choisir cette image recadrée. Maintenant, comme vous pouvez le voir ici, nous avons cette petite icône. Publions-le. Maintenant, c'est l'un des onglets que nous avons ouverts pour la page. Si je l'actualise, il l'a également si je l' actualise également. Ainsi, lorsque nous sommes dans l'éditeur Elementor, nous ne pouvons pas voir le favicon, ou lorsque nous sommes dans le tableau de bord, je pense Si je l'actualise, dans le tableau de bord, nous pouvons le voir. Mais lorsque nous modifions la page dans Elementor, nous pouvons voir le favicon Donc oui, en gros, c'est comme ça qu'on ajoute le favicon. Dans la leçon suivante, voyons comment créer ce bloc. Je te verrai bientôt. 13. Texte de héros: Il est maintenant temps de travailler sur la section des héros. Commençons par ce texte d'en-tête ici. Je souhaite passer à cet espace. Fermez ça. En fait, permettez-moi de fermer tout ce dont je n'ai pas besoin. Je pense que je vais fermer tout ça. ne nous reste plus qu' à l'intérieur de l'en-tête, où nous les modifiions. Mais je pense que pour l'instant nous pouvons quitter cet espace, donc je vais cliquer sur cette icône Sortir sur Wordpress. Il ne nous reste plus que le tableau de bord. Retourner aux pages. Voici les trois pages que nous avons actuellement. Nous pouvons en avoir autant que nous le voulons, mais ce sont les trois que nous avons actuellement. Et ce sera notre page d'accueil. Il s'agit de la page qui devrait s'afficher lorsque quelqu'un tape notre domaine.com Par exemple, votre domaine WW domain.com. Donc, si je copie ceci, ouvre un nouvel onglet et je le saisis ici, cela devrait nous mener à la page d'accueil. Mais nous avons un problème. Cela nous amène au post de Hello World au lieu de nous amener à la page d'accueil. Alors, comment régler ce problème ? En revenant ici, nous passons aux paramètres, à la lecture. Maintenant, votre page d'accueil affiche une page statique, pas nos derniers articles. Nous ne voulons pas les derniers articles. Nous voulons une page statique, et la page doit être la page d'accueil. Voici les trois pages que nous avons actuellement. Définissons la page d'accueil comme page d'accueil. Enregistrez les modifications. Allons-y. Maintenant, en revenant ici et en actualisant cette page, nous arrivons à la page d'accueil. Maintenant, revenons ici. Voici la page d'accueil. Si je dis « modifier ». Comme vous pouvez le constater, ce sont des pages que nous avons rapidement créées pour les ajouter en tant qu'éléments de menu. Mais nous n'avons pas effectué les configurations de base nécessaires pour créer la page dans le front-end avec Elementor C'est donc ce que nous faisons en ce moment. Donc, dans la page d'accueil, allez dans le modèle, changez ce modèle par défaut pleine largeur car nous voulons que le contenu occupe toute la largeur. Retournez ici. Donc, modèle Elementor sur toute la largeur Il s'agit des paramètres Word Press et Elementor. Alors n'oubliez pas que nous avons aussi Astra. C'est le thème que nous utilisons. Nous devons également mettre en place quelques configurations ici et là. Donc, dans les paramètres d'Astra, définissons-en une largeur complète, et nous ne devons pas nous inquiéter à ce sujet car cela ne s'appliquera que parce que le style du conteneur ne s'appliquera que lorsque la mise en page est définie sur normale ou étroite Le nôtre est réglé sur toute la largeur, donc ne vous inquiétez pas. Repliez le contenant, agrandissez la barre latérale. Nous voulons dire qu'il n'y a pas de barre latérale. Nous n'avons pas besoin de barres latérales. Le même cas s'applique à ces paramètres ici. Ne les changez pas. Effacez ça. Ensuite, nous devons désactiver ces zones. Actuellement, lorsque nous l' ouvrons, comme vous pouvez le voir, nous avons un pied de page par défaut d'Astra Nous pouvons dire désactiver le pied de page. Et gardez-le. Retournez ici et rafraîchissez-vous. Maintenant, cette astrophoto par défaut a disparu car nous allons créer la nôtre avec Nous devrions également désactiver ces deux autres. Sauvegardez ça. Rafraîchissez cette page. Allons-y. Ce sont les paramètres ou configurations de base que vous devez configurer lorsque vous vous préparez à créer une page avec Elementor Maintenant que nous l'avons prêt, nous pouvons passer à l'édition avec Elementor, afin de pouvoir le créer dans le front-end Nous y voilà. Maintenant, l'en-tête n'est pas modifiable ici car ce n' est pas là que nous l'avons créé N'oubliez pas. Donc, pour commencer, jetons un coup d'œil à l'anatomie de cette section consacrée aux héros Il y a un côté et un côté qui porte l'image. C'est donc une boîte flexible avec une double colonne comme ça. Ici, nous pouvons cliquer sur ce plus et ajouter un titre, qui sera essentiellement le texte de ce titre. Copiez ça. Tant qu'il est encore sélectionné, je vais aller ici et le coller. Cliquez sur ce signe plus pour ajouter un éditeur de paragraphe ou de texte. Déposez-le juste là. Maintenant, je veux le changer en blanc. Le texte sélectionné est blanc, ainsi que le texte blanc pendant que les paramètres sont sélectionnés. Bien que cette option soit toujours sélectionnée, je souhaite revenir au contenu et la remplacer par une valeur H. Maintenant que cette option est sélectionnée, je vais passer à la typographie stylistique, et je veux changer l'épaisseur noir pour qu' elle soit très épaisse, et je veux augmenter la taille Peut-être jusqu'à ce point et réduire la hauteur de la ligne, peut-être jusqu'à ce point, publier. Donnons-en un aperçu . Allons-y. De toute évidence, nous devons le réduire. Comme vous pouvez le voir, je ne peux pas sélectionner cette partie supérieure de la section car il y a l'en-tête. Je vais appuyer sur Ctrl I pour faire apparaître la structure ou l'alligator, et cela devrait nous montrer tout ce que nous avons Voici le contenant. J'essaie de sélectionner. Et il contient deux conteneurs, celui qui contient le texte et celui qui contiendra l'image. En sélectionnant ceci, cela change pour modifier le conteneur, je vais passer au rembourrage avancé, supprimer le rembourrage qui s'y trouve, puis le rembourrage supérieur, nous pouvons lui donner peut-être 50 ou le rembourrage inférieur 50 Disons peut-être 90 et top 90. Publiez ça. Donnons-en un aperçu. Allons-y. Je pense donc que nous allons ajouter les boutons, puis les styliser dans la prochaine leçon. Alors maintenant, allons-y et ajoutons les boutons. Alors, sélectionnez-le. Le bouton doit se trouver sous Basic. Déposez-le juste là. En fait, vous savez quoi, nous allons travailler sur les boutons dans la prochaine leçon. Alors arrêtons-nous là. Je te verrai bientôt. 14. Buttons héros: C'est là que nous nous sommes arrêtés, et je n'avais même pas cliqué pour publier Laissez-moi simplement le publier . C'est ça. Maintenant, nous avons ce bouton ici. Tout d'abord, que doit-il dire ? Téléchargez pour IOS. En sélectionnant cette option sur le contenu, téléchargez-la sur le système d'exploitation. Et nous en avons un autre ici en téléchargement sur Android. Je vais donc passer la souris dessus. 08. Sur cette version en ligne, je n'avais pas activé les options rapides des préférences utilisateur. C'est bon. Maintenant, permettez-moi de dupliquer ce bouton. Téléchargez sur Android. Permettez-moi simplement de dire Android. Publier. Si nous passons à la page, nous remarquerons que les boutons sont maintenant empilés les uns sur les autres, et ce n'est pas ce que nous voulons Ce que nous voulons, c'est côte à côte, ce qui nous amène à un sujet très important que je voulais que nous gardions à l'esprit, les conteneurs. Maintenant, tout ce que nous créons ici sera placé dans un conteneur. Et les conteneurs ont des propriétés avec lesquelles nous pouvons jouer. Par exemple, si je sélectionne ce conteneur le plus externe ici, si nous passons à la section de mise en page et au conteneur, nous trouverons ce que l' on appelle la direction. Et n'oubliez pas que nous avons utilisé un contenu justifié pour aligner les différents éléments du conteneur. Outre le contenu justifié, nous avons également une direction, qui détermine dans quelle direction les éléments sont disposés dans le conteneur. Nous pouvons avoir de haut en bas, bas en haut, gauche à droite et de droite à gauche. Donc, si vous accédez à ce conteneur ici, comme vous pouvez le voir, il s'agit d'un seul conteneur contenant ce texte d'en-tête, ce texte et ces deux boutons. Si nous sélectionnons le conteneur et changeons le sens en sens inverse, tout commencera du bas vers le haut. Le contraire est une colonne. De même, si nous disons que nous voulons que tout aille de gauche à droite, ce sera le titre, le texte, puis les boutons, et le contraire, les boutons, le texte, etc. Maintenant, en revenant de haut en bas, cela signifie que si nous voulons que ces boutons soient côte à côte, nous devons également les placer dans un conteneur et les disposer de gauche à droite. Ajoutons donc un conteneur juste en dessous de ce texte. Maintenant, glissez et déposez le bouton juste là, faites glisser cet autre bouton et déposez-le juste en dessous de cet autre dans ce conteneur. Maintenant, ils sont tous les deux dans ce conteneur. Et puisqu'il est maintenant sélectionné, nous pouvons dire de les disposer horizontalement de gauche à droite. Nous pouvons les inverser comme ça. Mais gardons-les comme ça. Publier. Passons en revue les modifications, et c'est parti. Maintenant, vous remarquerez que ce bouton semble légèrement en retrait par rapport à ce bloc de texte N'oubliez donc pas que j'ai mentionné que chaque conteneur est livré avec un rembourrage et des marges par défaut Donc, si je sélectionne ce conteneur et que je passe en mode avancé, je peux supprimer le rembourrage par défaut, qui poussera tout pour toucher les coins et les bords du conteneur Si je le publie et que je passe ici, il sera poussé vers le bord de ce conteneur. Maintenant, une autre chose que je veux que nous examinions est que si je sélectionne le bouton IOS, nous pouvons passer au style. Changeons le rayon de la bordure à 20, c'est trop. Qu'en est-il de dix ? Je pense que dix, c'est bien. Sélectionnez ce style (rayon de bordure : dix). Maintenant, nous pouvons augmenter le rembourrage car vous remarquerez que mes boutons sont plus gros Donc, une fois cette option sélectionnée, je vais passer au rembourrage et le casser, cela supprimera tout À gauche, on peut lui donner peut-être 50 à droite, 50, aux 20 en haut et 20 en bas. Comme vous pouvez le voir, il s'agit d'un bouton plus gros. En fait, donnons-lui 4040. Permettez-moi de sélectionner cette copie avec le bouton droit de la souris, sélectionnez-la, cliquez avec le bouton droit de la souris pour coller le style. Il a maintenant hérité de tous les styles que nous lui appliquons. Changeons la couleur. C'est vert. Je dois utiliser ce vert, mais je n'y ai pas accès car je ne peux pas le modifier. vais voir si je peux utiliser mon sélecteur de couleur. Laisse-moi choisir ça. Tant que cette option sera sélectionnée, je vais aller ici. Non Où est cette couleur ? Couleur copiée. Allons-y. Maintenant, c'est le même vert. Pour la couleur du texte, je veux qu'il ait cet arrière-plan. Je devrais également sélectionner la couleur pi. Code couleur sélectionné. Sélectionnez ceci. Oh, attendez, revenons ici. Nous voulons que la couleur du texte soit la même. Au survol, nous voulons qu'il soit blanc. Juste comme ça. Maintenant, en sélectionnant cette option, nous pouvons changer la couleur d'arrière-plan en blanc et la couleur du texte cette couleur foncée que nous venons de choisir ici. Prévisualisons les modifications, et maintenant nos boutons sont superbes. Dans la leçon suivante, nous verrons comment ajouter cette image de héros. Mais avant cela, remarquez que nous avons ce texte, et il est vert. De retour ici, ce que nous pouvons faire, c'est qu'une fois cette option sélectionnée, nous pouvons accéder au contenu et envelopper cette gestion avec une balise span. Je vais donc simplement dire support ouvert, travée, support fermé, support ouvert, travée oblique, support fermé Maintenant que cette plage englobe la gestion des mots, nous voulons dire à Elementor que nous voulons appliquer ces styles à ce texte spécifique que nous avons surligné avec les balises span Le style équivaut donc à des guillemets d'ouverture et de fermeture. Supposons que l'attribut que nous voulons modifier soit la couleur et que nous voulions que la couleur soit verte. Je pense donc que je m'étais laissé simplement sélectionner ceci. Contrôlez C pour le copier. Revenez à la sélectionner, et en revenant ici, Span style color, nous voulons que la couleur soit cette colonne, puis fermons avec une demi-colonne. Juste comme ça. Maintenant, si nous voulons que l'eye shop soit également écologique, il suffit de prendre un autre span tag. Je vais copier l'intégralité du tag d'ouverture juste avant de le gérer, le copier, d'aller dans Eye Shop, juste avant de le coller là. Et ferme-le. Ouvre le support, entaille, enfonce, ferme le support. Publier un aperçu. Allons-y. Maintenant, il s'agit essentiellement d'une personnalisation avancée, et je veux juste vous montrer que vous pouvez appliquer un style CSS et HTML à vos éléments Elementa Vous n'avez pas à vous limiter à ce qu' Elementor vous offre Alors, on y va. Je pense que nous sommes maintenant prêts à ajouter l'image du héros, et nous le ferons dans la prochaine leçon. À bientôt. 15. Image de héros: Il est donc temps d'ajouter notre image de héros et, bien sûr, ajuster la largeur de notre page Web. Pour en revenir à notre éditeur, je vais cliquer sur Plus, et j' ajouterai un élément d'image. Allons-y. Et ici, je vais cliquer dessus et ajouter, je pense que c'est ça. Ajoutez cela et publiez, revue les modifications, et c'est parti. Maintenant, bien sûr, souvenez-vous que nous devons ajuster la largeur. Retournez ici, ce que je veux faire, c'est sélectionner le conteneur qui contient tous les autres. Comme vous pouvez le constater, c'est ce qui est mis en évidence ici. Lorsque je sélectionne un élément dans la structure, il est également sélectionné sur la page. Sélectionnez le conteneur ici. Je veux lui donner une largeur de 100 %. Changez les pixels en pourcentage et donnez-leur 100 %. Juste comme ça, publiez et prévisualisez les modifications. Maintenant, il y a un problème. Nous avons tout poussé à bout de souffle et ce n'est pas ce que nous voulons. Alors, comment régler ce problème ? C'est très simple, des conteneurs. Donc, pour en revenir ici, ajoutons un conteneur. Maintenant, avant de l'ajouter, n'oubliez pas qu'il s'agit d'un conteneur qui comporte deux conteneurs. Ce contenant en contient un et deux. Maintenant, ce que nous voulons, c'est n'avoir qu'un seul conteneur à l'intérieur de ce conteneur. N'oubliez pas que nous avons fabriqué ce contenant à 100 %. Nous voulons donc un autre conteneur à l'intérieur, occupant 80 % de ces 100 %, puis y mettre tout le reste. Nous pouvons donc dupliquer cela. Et maintenant, nous avons trois conteneurs. Nous pouvons supprimer tout le contenu du premier conteneur, supprimer cela et cela. Et aussi ce contenant. Maintenant, c'est un conteneur vide. Nous pouvons le déposer là-dedans et aussi cela juste en dessous. Allons-y. Nous avons maintenant ces deux conteneurs dans l'autre conteneur que nous venons de dupliquer. Maintenant, en sélectionnant le conteneur extérieur, nous pouvons tout d'abord changer la direction de gauche à droite. Maintenant, tout est côte à côte. Mais n'oubliez pas que nous voulons qu'il occupe 80 % de l'espace disponible, 80 %. Mais maintenant, il est aligné vers la gauche. Ce que nous devons faire, c'est sélectionner le conteneur qui le contient , c'est-à-dire ceci. Cliquez ici pour justifier le contenu et le placer au centre, juste comme ça. Publiez, prévisualisez les modifications. Allons-y. Nous allons donc maintenant faire exactement la même chose pour le menu ou pour l'en-tête. Maintenant, une fois que vous avez modifié une page ou une partie de votre page Web avec Elementor, vous pouvez toujours accéder à l'éditeur d'ici Donc, comme nous avons déjà créé l'en-tête avec Elementor, nous pouvons le modifier à partir d'ici Nous pouvons accéder à son éditeur d'ici. Je vais donc cliquer sur En-tête. Allons-y. Je vais maintenant sélectionner le conteneur qui contient tout. Et n'oubliez pas qu'il s'agit trois récipients à l'intérieur de ce contenant extérieur. Passons donc à ce conteneur en pourcentage, et faisons en sorte qu'il occupe 100 % de l'écran sur lequel vous le visualisez. Alors maintenant c'est 100 %. Mais maintenant, tout est mis de côté, publication, prévisualisation. Mais ce que nous voulons, c'est un conteneur à l'intérieur de ce conteneur qui occupe 80 %. En sélectionnant ceci. Tout d'abord, appuyons sur le contrôle I pour ouvrir la structure, en l'étendant, comme vous pouvez le voir, un, deux, trois. Ce que nous pouvons faire, c'est dupliquer peut-être premier, le dupliquer. Supprimons maintenant le contenu de ce conteneur. Et maintenant, mettons ces autres choses dans ce contenant. Juste en dessous, cela peut être difficile, mais continuons. Trois. Il s'agit maintenant de trois conteneurs à l'intérieur conteneur unique qui se trouve à l'intérieur du conteneur de 100 % de large. Nous voulons que ce conteneur occupe 80 %. Mais maintenant, nous voulons également que les conteneurs qu'il contient soient disposés de gauche à droite de cette manière. Et en même temps, nous voulons sélectionner le contenant extérieur et pousser ce récipient intérieur vers le centre. Il semble que j'ai mis le bouton dans le conteneur du menu. Il doit être à l'extérieur. Laisse-moi le mettre juste là. Il peut être difficile de le placer, mais continuez d'essayer jusqu'à ce que vous l'obteniez. Publiez, et prévisualisons les modifications. Maintenant, il touche presque les bords. Maintenant, si nous allons à la page d'accueil, entrez, C'est parti. J'aime bien, mais cela semble être repoussé vers l'intérieur. Je ne sais pas ce qui se passe là-bas. C'est bon. Lorsque cette option est sélectionnée, au lieu de tout placer au centre, disons un espace entre les éléments, afin que nous puissions placer des espaces entre les éléments, mais les pousser vers le bord. Je vais sélectionner un espace entre les deux et publier. Maintenant, jetons un coup d'œil à ça. Si je vais à la page d'accueil, en fait, revenons ici, sélectionnons l'image, donnez-lui un lien URL personnalisé et donnons-lui votre domain.com Donc, copiez-le, placez-le là, publiez un aperçu. Maintenant, si nous cliquons sur l'icône, c'est le logo, cela nous amènera à la page d'accueil. Maintenant, tout est correctement aligné et occupe désormais un espace plus large. Je pense que c'est le bon endroit pour terminer cette leçon. Dans la leçon suivante, commençons par le reste de la page. Je te verrai dans quelques minutes. 16. Ajouter une section de corps: Il est maintenant temps de commencer à travailler sur cette partie du corps. Et pour en revenir à notre éditeur, je viens de remarquer une chose que nous avons oublié de faire. Vous remarquerez sur notre site de référence ici que tout semble être aligné verticalement les uns par rapport aux autres. Ainsi, par exemple, ce bloc de texte est aligné verticalement par rapport à celui-ci. Alors laissez-moi juste vous montrer ce que je veux dire. En revenant ici, en sélectionnant ce conteneur qui contient le texte. Je peux me rendre ici pour justifier le contenu et l'aligner verticalement au centre. Retournez ici dans ce conteneur. Je peux faire de même, mais cela ne bougera pas car l'image occupe tout l'espace. Mais si je dis cela et que je prévisualise les modifications, vous remarquerez maintenant que cela a été reporté vers le bas. À l'origine, c'était ici et il y avait beaucoup d'espace Annulons cela très rapidement. C'était là-haut. J'ai publié ça. Passons en revue les modifications. C'est là que c'était. Mais maintenant, nous l'avons poussé verticalement vers le centre, juste pour l'aligner proportionnellement à cela Maintenant que c'est fait, nous voulons ajouter une nouvelle section, afin que nous soyons toujours sur la page d'accueil. Et je vais juste dire plus flex box, et je vais reprendre cette section à double colonne. Et avant d'aller trop loin, tout d'abord, je veux sélectionner pendant que cette option est encore sélectionnée, passer à la touche avancée, marge supérieure, je veux lui donner 100, afin que nous puissions l'espacer par rapport à la section des héros. Maintenant, ici, nous pouvons sélectionner une image, la déposer dedans. Va ici. Je pense que c'est ça. Oui, c'est ça. C'est notre favicon, et c'est l'image que nous voulons utiliser. Allons-y. Au moment où nous publions la première image ici. Elementor fait de la publicité rapide ici, optimisez votre image pour améliorer les performances du site en utilisant un optimiseur d'image Je vais juste y aller et fermer ça. Maintenant que cette option est toujours sélectionnée, nous voulons voir ce que nous avons ici. C'est bon. Il suffit de prendre ce texte. Ce que nous devons faire, c'est dupliquer ce titre comme ça. Ensuite, glissez-le et déposez-le ici. Je vais également dupliquer ces textes. glisser et déposez-le juste là, et je vais dupliquer combien de boutons avons-nous ici ? Juste une. Je vais le dupliquer et le glisser-déposer juste là. Maintenant, avec cette option sélectionnée, je veux venir ici et supprimer ce style, puisque je ne vais pas le faire. Avons-nous un style ici ? Oh, oui. Téléchargez l'application Téléchargez-la depuis votre boutique. Donc, entre les deux travées, au lieu d'un magasin. Et n'oubliez pas que cela devrait être H deux. C'est bon. Maintenant, en descendant ici, je veux sélectionner ce conteneur, passer à la mise en page, et je veux lui donner un écart de 40 afin qu'il y ait un écart entre l'image et le bloc de texte. Et je souhaite également ajouter une liste d'icônes. Donc, pour en revenir, comme vous pouvez le voir, nous avons cette liste ici, et c'est ce que nous voulons ajouter. Donc, tapez icon et c'est la liste des icônes. Laisse-moi m'en débarrasser une fois de plus. Vous remarquerez ici qu'il y a un énorme écart entre la liste d' icônes et le paragraphe, et cela est dû à cette marge par défaut. Donc, avec le texte sélectionné marge avancée en bas, comme ça. Maintenant, sélectionnons cette liste d'icônes avec marge avancée en bas. Nous pouvons l'augmenter jusqu'à peut-être 20. C'est bon. Ceci étant toujours sélectionné, passez au style, passez au texte. La couleur du texte doit être blanche au survol. Nous voulons que ce soit aussi vert. Permettez-moi de sélectionner ce texte et de choisir ce code couleur, y compris la copie de hachage Sélectionnez les textes ici. Texte O survolez, nous voulons qu'il soit vert. Juste comme ça. Travaillons maintenant sur l'icône. L'icône doit être verte dans des circonstances normales. Ensuite, au survol, il doit être blanc. Juste comme ça. Retournez au contenu. Maintenant, en élargissant le premier, nous pouvons savoir ce que nous avons ici. Recherche puissante dans toutes les fonctionnalités. Résultats de recherche filtrables puissants. résultats filtrables, des rapports de téléchargement, des ajouts réguliers d'éléments, réguliers et enfin, des résultats sûrs et sécurisés Vous pouvez également dupliquer cette inst d'ajout d'élément. Sécurisé en double sec. Disons sûr et sécurisé, cela peut être composé de deux mots. Nous pouvons également entrer à l' intérieur avec style, nous pouvons utiliser le moins d' espace entre les deux pour augmenter l'espacement, comme ce contenu Nous pouvons revenir à des fonctionnalités puissantes et changer l'icône comme bon nous semble. Disons peut-être cet encart, Ws that tick. C'est bon. Vérifiez. Je pense que c'est ça, insérer. Vérifiez et enfin, vérifiez. Publiez, prévisualisons les modifications. Faire défiler la page vers le bas. Allons-y. Mais maintenant que nous sommes sur la page d'accueil, cela doit être repoussé vers le bas car nous pouvons le voir. Donc, en revenant ici, nous pouvons aller plus loin. La marge maximale peut être de 150. Publiez, prévisualisons les modifications, et c'est parti. En gros, c'est ainsi que vous créez cette section. Mais avant d'aller plus loin, nous avons également ce fond de particules animé, et je pense que c'est quelque chose que nous pouvons faire à partir de la leçon suivante. Je te verrai bientôt. 17. Particles animés: Nous avons donc presque terminé cette section, mais nous devons ajouter ce système de particules animé. Revenons donc à notre éditeur. C'est où ? Nous y voilà. Et nous devons installer un autre plugin lié à Elementor ou basé sur Elementor, appelé Royal Adds ons for Donc, revenez ici, branchez, ajoutez-en de nouveaux. Maintenant, allons-y et disons les modules complémentaires de Royal Elemental. Je pense que ce sont les addons Royal Elementor WP Royal qui sont installés Et il existe différents addons élémentaires qui possèdent également ce système de particules. Ce n'est pas le seul. Alors activons-le. Allons-y et sautons Voici donc quelques-uns des modèles et fonctionnalités fournis avec ce plugin. Mais ce que nous cherchons maintenant, c'est de retourner à la page d'accueil et rafraîchir cette page. Cet éditeur. Faire défiler la page vers le bas. Allons-y et sélectionnons cette section. Maintenant, tout d'abord, ajoutons un peu de rembourrage en haut et en bas pour séparer le contenu du contenant du bord du récipient Lorsque le conteneur est sélectionné avec un rembourrage avancé en haut, disons AD, c'est en bas et AD en haut est OK Tant que c'est encore sélectionné, je vais passer au style. Maintenant que nous avons des extensions Royal Element, Understyle, nous avons accès aux particules Nous pouvons ajouter des particules dans n'importe quel contenant. Par exemple, maintenant que cette option est sélectionnée, nous pouvons l'ajouter. Je vais donc dire activer l'arrière-plan des particules. Et comme vous pouvez le voir, ils apparaissent déjà , mais nous devons modifier la couleur car ils sont actuellement noirs, comme vous pouvez le voir. Donc, tout d'abord, disons publier. Ensuite, pour modifier les différentes propriétés des particules, nous pouvons cliquer ici. Allons-y. C'est ce que nous avons actuellement. Je veux passer aux particules elles-mêmes, à la couleur. À l'heure actuelle, ils sont blancs dans les paramètres. En fait, disons télécharger la configuration actuelle au format JSON. Cette configuration actuelle, nous pouvons donc y jeter un œil. Ouvre-le. Maintenant, il est ouvert sur une autre page, donc je vais juste le mettre ici et je vais tout sélectionner. Contrôle A, copie. Fermez ça. Retournez à la page d'accueil. Sélectionnez ce contrôle A, supprimez le contrôle V pour coller ce que vous venez de télécharger. Maintenant, vous remarquerez que c'est blanc comme ici, ce qui signifie que nous pouvons maintenant revenir ici et modifier quelques éléments Par exemple, je voulais que cette couleur soit légèrement foncée, donc je vais passer au bleu. C'est la couleur des particules, et je veux que ce soit quelque chose qui soit visible sur ce fond. Sur ce fond sombre. Donc je pense que cette couleur est correcte. Contrôle C. Je veux aller dans les files d'attente. Où est liée la ligne ? Entrez. C'est bon. C'est la couleur que j'ai en ce moment. Si je dis de télécharger la configuration actuelle et de l'ouvrir, ils s'ouvriront dans l'onglet note, le bloc-notes, le contrôle A, la copie, la modification de la page d'accueil, en sélectionnant ici, la commande A, commande V pour coller ce que j'ai maintenant. Je pense que c'est une meilleure couleur. Mais sur notre site de référence, il s'agit en fait d'un arrière-plan encore plus clair. Pendant que ce conteneur est toujours sélectionné, passez au style, au type d' arrière-plan, à la couleur, puis au bleu. Je veux le faire légèrement, disons cette couleur. Vous pouvez simplement taper ce code exact si vous aimez l'apparence du mien. Publiez, et passons en revue les modifications. Faire défiler la page vers le bas. Allons-y. Maintenant, si vous pensez qu'ils sont trop foncés, trop prononcés, vous pouvez toujours revenir ici et jouer avec l'opacité Jouez avec tous ces paramètres pour voir ce que vous pourrez obtenir. Alors publiez et prévisualisons ce que nous avons. Je pense que ça a déjà l'air professionnel. Maintenant, je pense que c'est ici que nous allons terminer cette leçon, mais dans la leçon suivante, verrons comment ajouter ce lien d'ancrage. Donc, si je clique dessus, nous nous concentrerons sur cette section. Je vais vous montrer comment procéder dans la prochaine leçon. N'allez nulle part. 18. Élément d'ancrage: Notre page de destination prend maintenant forme, il est maintenant temps d'ajouter cet élément d'ancrage. Allons voir notre éditeur. Je pense que c'est ça. Nous y voilà. Je reviens ici. Laisse-moi clore ça. Qu'est-ce que c'est ? Fermons tous les autres onglets. Et va ici. Je veux donc cliquer sur ce signe plus ici pour ajouter l'élément ou la section que nous voulons ici, plus flex, et je vais ajouter ce conteneur à colonne unique. Et ici, je vais ajouter une icône. Je vais donc simplement glisser-déposer une icône ici. Je peux changer l'icône pour qu'elle pointe vers le bas et vers le bas. Disons celui-ci. Parce que je veux montrer aux gens qu'ils cliquent pour descendre ou quelque chose comme ça. Je souhaite également sélectionner ce contrôle de copie de style vert C, car nous essayons de conserver cette identité de marque, couleur de marque, 08. Une fois cette option sélectionnée, nous allons passer au style, vert normal au survol, il faut que ce soit de couleur blanche, juste comme ça Maintenant, lorsque nous cliquons dessus, revenons au contenu. Mais avant de passer au contenu, devons-nous le baisser légèrement ? Nous verrons. Publiez, prévisualisez les modifications. Je pense qu'il est dans une bonne position. L'espace est bien équilibré. Maintenant, en revenant ici, pendant que cette option est toujours sélectionnée, revenez au lien du contenu. C'est bon. Cliquez sur le signe plus ici et tapez ancre. Nous laisserons cette ancre là où nous voulons être redirigés lorsque nous cliquons sur le lien. Alors, par exemple, placons-le quelque part ici. Pourquoi ne puis-je pas le placer quelque part ? Permettez-moi de le placer ici, par exemple. Pourquoi ne puis-je pas le placer ici ? Oh, je pense que je sais pourquoi. Ces particules sont au-dessus de notre contenu et affectent d'une manière ou d'une autre notre capacité à y jeter l'ancre. Quoi qu'il en soit, si je le duplique et que je reviens ici dis ancre et que j' essaie de le déposer ici. Oui. Pour une raison ou une autre, quelle que soit la section contenant ces particules, permettez-moi de les désactiver à partir d'ici. Les particules désactivent cela. Maintenant, revenons ici, ancre. Oui. Ces particules nous empêchent de faire glisser et déposer l'élément d'ancrage du point d'ancrage à l'intérieur de la section, mais ça va Maintenant, si je le dépose ici et que j'ajoute un identifiant. Par exemple, allez ici, laissez-moi simplement dire allez ici. C'est l'ID de cet élément d'ancrage. Et maintenant, lorsque nous accédons à un lien, par exemple, vers ce lien, nous pouvons dire à Elementor nous emmener directement à l' endroit où se trouve un élément d'ancrage portant cet identifiant Parce que cela a un D pour go here, laissez-moi le copier ici. Si nous revenons à ce lien, nous pouvons coller l'URL, puis dire « slash hash », puis l'identifiant du point d'ancrage vers lequel vous souhaitez que ce lien vous dirige Publier. Prévisualisons les modifications ici. Si je clique dessus, cela nous mènera directement à cette partie. Je voulais vous montrer cela à titre d'exemple. Maintenant, ce que nous voulons, c'est passer à celui-ci qui se trouve juste en dessous de cet exemple. Permettez-moi de clore ça. Ce que je veux faire, c'est sélectionner un point d'ancrage. Et glissez-le et déposez-le juste en dessous de lui-même, allons-y. Maintenant, n'oubliez pas que nous venons de supprimer l'autre section qui contenait l'autre point d' ancrage, l'élément d'ancrage, chaque élément d'ancrage doit avoir un identifiant unique. Donc je réutilise Go here parce que nous n' avons plus l'autre Mais maintenant, si nous cliquons dessus , souvenez-vous qu'il avait déjà reçu ce sh go here, donc cela fonctionnera pour ce nouvel élément d'ancrage. Donc, si je dis publier et prévisualiser les modifications. Si nous cliquons dessus, cela nous amènera à cet élément d'ancrage qui se trouve ici. Lorsque vous cliquez sur un élément d'ancrage, il est placé tout en haut de la page sur laquelle vous vous trouvez actuellement. C'est pourquoi nous l'avons maintenant ici, car l'élément d'ancrage est là de manière invisible Donc, si nous voulons pousser cela vers le haut, nous devons placer l'élément d'ancrage plus haut. Donc, nous devons réduire la marge en haut de cette section. Nous allons sélectionner la section. Avancé. Marge supérieure, disons 100 publications. Prévisualisons les modifications. Si je clique dessus, nous arrivons à quelque chose. Pourquoi ne pas se débarrasser de 50 pour le rapprocher de l'ancre invisible. Très bien maintenant, cliquez dessus. Maintenant, cela nous amène à ce point. Je pense que c'est un bon endroit, mais au moins vous comprenez maintenant comment fonctionnent les éléments d'ancrage car vous pouvez avoir quelque chose de spécifique sur une page spécifique que vous avez créée avec Elementor, et vous voulez que quelqu'un clique sur un lien et soit redirigé directement vers cette partie de la page Voici comment procéder avec les éléments d'ancrage. Je pense donc que nous allons nous arrêter là. Dans la leçon suivante. Voyons comment ajouter cette autre section. Je te verrai donc dans un instant. 19. Une autre section: Nous en sommes à cette section sur la structure des particules. Il est maintenant temps de travailler sur cette section dbo riche en fonctionnalités pour ordinateur de bureau en revenir à notre éditeur, il me suffit de dupliquer ceci , de dupliquer ce conteneur. Maintenant, n'oubliez pas que, bien qu'il soit encore sélectionné en mode avancé, souvenez-vous que nous avons réduit la marge en haut de celui-ci. En fait, je veux le réduire encore pour ne pas publier d'aperçu. Si je clique dessus, cela met l'accent sur ce point. Mais je veux rejeter cette autre version telle qu'elle a été conçue et publiée à l'origine. Et maintenant, si je prévisualise les modifications, clique dessus pour attendre. Donnons peut-être une mise à jour de 30 publications. J'aime bien ça. Quoi qu'il en soit, en descendant ici, tant que cette option est toujours sélectionnée, je voudrais passer aux particules de style et le dire. En fait, je veux aussi me débarrasser de l'arrière-plan. Passons à l'arrière-plan. Sélectionnez-le et cliquez dessus pour effacer. Cela reviendra aux paramètres d'arrière-plan d'origine qu'il avait lorsque nous l'avons ajouté Et lorsque vous ajoutez un conteneur, il n'a pas d'arrière-plan. Nous l'annulons donc. Maintenant, je veux faire glisser ce conteneur et le placer sur la gauche. Maintenant c'est un peu compliqué. Alors laisse-moi voir si je peux le faire glisser , tu dois essayer de le forcer. Donc, remets-le là. Parce que mon objectif est là. Alors, déposez-le là. Mon objectif est d' inverser le texte et le mettre de ce côté et l' image de l'autre côté. Quelle image avons-nous ici ? Oh, je viens de me rappeler c'est en arrière-plan, pas sur le côté droit. Cela doit donc disparaître, et cela doit être occupé, laissons-le à 50 %. Ensuite, en entrant ici, je veux sélectionner l'arrière-plan, et cette fois nous allons ajouter une image. Sélectionnez cet ordinateur portable, et mettons-le en arrière-plan comme ça. Maintenant, disons qu'il n'y a pas de répétition, positionnons-nous, disons au centre droit ou au centre droit, comme ça. Nous pouvons le laisser à cette taille ou nous pouvons dire couverture de la taille de l'écran, non, contenir, je pense que contenir, c'est bien. Publiez, et passons en revue les modifications. Faire défiler la page vers le bas. Allons-y. Maintenant, je pense que nous avons besoin d'une certaine marge au bas de l'échelle. Parce que n'oubliez pas que si nous regardons la référence, c' est la référence. Comme vous pouvez le constater, nous avons une belle marge qui le sépare du pied de page Donc, pour en revenir, pendant que cette option est toujours sélectionnée, passons à l'option avancée, et je parlais de rembourrage, pas de marge La marge inférieure est de 100. Mettons également à jour cette fonctionnalité, copiez-la sur le bureau, sélectionnez-la. Incluez un tableau de bord de bureau à l'intérieur de la travée. Tableau de bord de bureau. Je publie. Prévisualisez les modifications. C'est à vous de mettre à jour le contenu et d'utiliser le vôtre. En faisant défiler l'écran vers le bas, c'est parti. Donc, en gros, c'est ainsi que vous pouvez ajouter une autre section à votre page de destination. Et il s'agit de répéter ce que vous avez fait en dupliquant éléments sans avoir à recréer et à relooker Je pense donc que c'est le bon endroit pour terminer cette leçon. Dans la leçon suivante, passons à la photo. Je te verrai bientôt. 20. Logo de pied de page: Notre page de destination s' avère donc être quelque chose dont nous pouvons être fiers, mais nous avons encore la photo à créer. Il est donc temps de travailler là-dessus. Pour en revenir à notre éditeur, où est-il donc ici ? Bien sûr, souvenez-vous de la façon dont nous avons créé notre en-tête. C'est de la même manière que nous allons créer notre pied de page. Retournez ici. En fait, nous en avons terminé avec cet espace, il suffit de dire «   exit » pour Word Press. Nous aurions pu aller ici, mais nous également fini avec cette autre partie, donc nous n'en avons pas besoin. Nous allons sortir complètement. Passons maintenant au kit d'éléments, au d'en-tête, et ajoutons-en de nouveaux Pied de page. En fait, restons cohérents. Tout le site est allumé et modifions-le le contenu. Il a été automatiquement enregistré et ajouté à la liste des en-têtes et pieds de page ci-dessous. Et nous y voilà une fois de plus. Alors, n'oubliez pas, le foret. Si nous cliquons dessus et ouvrons la boîte flexible, nous pouvons utiliser cette section à quatre colonnes. N'oubliez pas. Notre site Web de référence contient ces quatre colonnes, donc c'est bien. Mais je dois mentionner que même si vous ajoutez ceci, par exemple, vous pouvez toujours en faire ce que vous voulez. Si je dis « plus » et « ajouter un conteneur », je peux dupliquer ce conteneur, dupliquer, le dupliquer quatre fois, et maintenant sélectionner le conteneur qui les contient. Allez dans la direction de mise en page de gauche à droite, et c'est une section à quatre colonnes. En entrant ici, flex box, en l'ajoutant, comme vous pouvez le voir, ils sont identiques. Maintenant, sur celui-ci, ajoutons une image. Élément. Sélectionnez-le. Accédez au logo, sélectionnez. Nous y voilà. Nous pouvons également lui donner une URL personnalisée vers la page d'accueil. Parce que si quelqu'un appuie dessus ou clique dessus, vous voulez qu'il soit redirigé vers la page d'accueil. Ensuite, ajoutons quelques textes. Je vais juste ajouter un éditeur de texte. Nous y voilà. On peut dire style, blanc. Publier. Nous pouvons entrer ici et dire liste d'icônes. Parce que ce sont essentiellement des listes d'icônes. Liens rapides. Je vais revenir ici et dire titre, déposer dedans, et le remplacer par des liens rapides. Vous pouvez le changer pour qu' soit vert ou blanc. Je veux qu'ils soient aussi verts. Retournez ici et levez mon collyre ou deux. Copiez ça. Vous pouvez l'installer si vous souhaitez pouvoir échantillonner les couleurs actuellement présentes sur votre navigateur. C'est ce qu'on appelle le sélecteur de couleurs RGB. Vous pouvez le télécharger sous forme d' extension pour votre navigateur. Pour y retourner, je vais coller ma couleur verte. Je veux également m' assurer que la typographie est de 600 et sélectionner avant d'aller plus loin, sélectionnons la liste d'icônes pour pouvoir la styliser Retournez ici, modifiez ceci pour cocher Insérer, réduisez-le. Je ne veux pas avoir à changer à nouveau cette icône, je vais donc la dupliquer. Maintenant, il a la même icône. Il suffit de changer la couleur de l'icône. Non. Passons à la couleur verte de l'icône au survol. Allons-y. Pour le texte, faisons-le au survol. Faisons en sorte que ce soit vert. Pour les listes, augmentons légèrement l'espacement. Nous pouvons maintenant dupliquer, dupliquer et peut-être une fois de plus. Ça peut être la maison. H. Confidentialité du blog. Des conditions. Enfin, cela peut être notre boutique. Nous y voilà. La prochaine chose que je veux faire est de dupliquer cela et de m'en débarrasser car il n'est pas nécessaire de refaire ce que nous venons de faire Mais je veux aussi sélectionner ce conteneur qui contient le et tant qu'il est encore sélectionné, je vais passer à la marge avancée vers la gauche. Allons-y. En fait, revenons à zéro et publions d'abord un aperçu des modifications. Je viens de me souvenir de quelque chose. Nous y voilà. Donc, tout d'abord, je veux ajouter des boutons ici. Comme vous le remarquez, nous avons ces deux boutons. Je vais donc aller ici et me laisser l'ajouter ici, l' ajouter avec Elementor Je sélectionne ce contrôle C, G ici. Sélectionnez ici, Control V. Maintenant, il a été collé à l'extérieur, je vais donc simplement le glisser-déposer à cet endroit C, sélectionnez ce bon collage. Maintenant, il passe en bas. Publié. Passons en revue les modifications, et c'est parti. Mais maintenant, le problème est que nous cliquons dessus pour rentrer chez nous, car souvenez-vous que nous lui avons donné un lien. Si nous sommes rentrés chez nous, si nous faisons défiler la page jusqu'en bas. Vous remarquerez qu'il est poussé vers l'extérieur alors qu'il est poussé vers l'intérieur Ces autres devraient également être poussés vers l'extérieur. Tout d'abord, éliminons le fo lui-même. Sélection du contenant contenant tout. Passons à une largeur de 100 % . Maintenant, ayons un conteneur qui contient tout. Mais ce conteneur occupera 80 % de ce contenant extérieur d'une largeur de 100 %. Nous pouvons donc simplement le dupliquer, tout supprimer de l'intérieur, puis glisser-déposer ces autres éléments à l'intérieur. Je veux le mettre juste en dessous. Ouais. Prends-le, mets-le juste en dessous, et enfin, mets-le juste en dessous. Maintenant, en sélectionnant ce conteneur, arrangez la direction de gauche à droite, mais maintenant nous voulons qu'il occupe 80 %. Cela doit être de 100%, celui extérieur est de 100%, et celui-ci intérieur est de 80%, l'extérieur a besoin que l'intérieur soit au centre. Nous devrions également augmenter le rembourrage au-dessus et en dessous du pied de contenu Accédez au rembourrage avancé. En haut, disons 100, les 100 en bas publient. Maintenant, vous remarquerez que ces liens rapides sont au-dessus de tout le reste. Il semble que je sache que c'est conforme à ce bouton. Cela peut être poussé vers le haut, en sélectionnant l'image elle-même, marge, le haut. N'oubliez pas que c' est également trop proche de celle-ci. fois que ce conteneur est sélectionné, passons au remplissage à gauche et poussons-le jusqu'à la publication, examinons les modifications, et je pense que nous avons maintenant un beau pied de page gauche et poussons-le jusqu'à la publication, examinons les modifications, et je pense que nous avons maintenant un beau pied Si nous rentrons chez nous et défiler la page jusqu'en bas, nous y voilà. Il ne reste plus qu'à publier ces textes ici même . Je veux donc aller à la page d'accueil. Sélectionnez le conteneur qui le contient. Je veux que cela occupe 80 % parce que cela occupe , disons, 100 %, 100 %. Cela devrait occuper 80 % des publications. Maintenant, je pense que je sais quel est le problème. Ouais. Attendez, nous ne l'avons même pas poussée alors qu' elle était encore sélectionnée, la version externe, allons-y pour justifier la publication du contenu. Passez en revue les modifications, faites défiler l'écran vers le bas. Mais maintenant, cela va jusqu'à l'image, ce qui signifie dupliquons-la. Maintenant, faisons en sorte qu'elle occupe 40 % et cette autre moitié en occupera 40 % à 40 %, et les deux en représenteront 80 %. Mais maintenant celui-ci sera vide, enlevez ceci et cela. Et ça défile. Passons en revue les modifications. Descendez. Nous y voilà. Alors maintenant, il est correctement aligné sur cela, et il occupe 40 %, 40 %. Donc oui, je pense que nous en avons terminé avec la page de destination, mais je sais que vous vous demandez encore une chose, comment la rendre belle sur tous les appareils. Téléphone portable, tablette, ça fait déjà du bien sur un ordinateur de bureau. Voyons donc comment procéder dans la prochaine leçon. Je te verrai bientôt. 21. Finaliser le pied de page: R, bon retour. Nous avons donc presque terminé notre page de destination, mais nous avons quelques retouches finales. Maintenant, tout d'abord, changeons la couleur ou la couleur de fond des pieds de page pour refléter ce que nous avons sur le site Web de référence C'est où ? Oui, voici notre site Web de référence, et il a le même style que cette autre section. Mais celui sur lequel nous travaillons en ce moment n'a pas cette couleur. Je vais donc chez le rédacteur en chef. Je souhaite sélectionner ce conteneur, passer au style. Couleur. Copiez ça. Retournez ici à l' éditeur du pied de page. Sélectionnez la couleur du type d'arrière-plan du style du conteneur. Donnons-lui cette couleur. Particle Royals Royal ajoute. Activons cela. En fait, revenons ici dans cet éditeur. Particules ouvertes. Cliquez n'importe où dans le code, le code JSON, puis cliquez sur Contrôler une copie. Revenons à notre éditeur. Sélectionnez dans l'éditeur JS, contrôlez A, supprimez, collez. Allons-y. Donc, disons simplement appliquer. Publier Je reviens ici, il y a notre pied de page. Maintenant, si je clique dessus pour rentrer chez moi, c'est parti. C'est donc notre potier. C'est ça. L'autre chose que nous devons faire est cette page une belle apparence sur les tablettes et les smartphones. Dans cette leçon, essayons de lui donner une belle apparence sur les tablettes. Commençons donc par la page. En fait, permettez-moi de tout fermer ici. Nous reviendrons travailler sur le reste. Mais pour l'instant, passons à droite Lak Open Linking New Tab pour ouvrir la page de destination. Allons-y. Maintenant, commençons par l'en-tête. Il s'agit de l'éditeur d'en-têtes. Passons maintenant au mode adaptatif pour tablette, et voici à quoi cela ressemble sur les tablettes. Contrôle I pour faire apparaître la structure. Je souhaite sélectionner le conteneur qui contient tout ce qui se trouve à l'intérieur de ce conteneur extérieur. Ce contenant doit être à 100 %. 100 % de l'espace disponible. Cela doit être peut-être de 20 %. Laissez-moi sélectionner ceci. Le contenant des boutons doit être de 20 %. Le logo doit être de 20 %. conteneur du menu doit donc être composé de 60 % et non de 60 % de cellules. Publier. Maintenant, comme vous pouvez le voir, lorsque je survole le menu, voici où il se trouve Laissez-moi simplement le sélectionner. Je l'ai sélectionné, mais au cas où vous ne pourriez pas le sélectionner, entrez dans le conteneur qui le contient, puis sélectionnez Elements knave fois cette option sélectionnée, passez à l'option avancée supprimez tous les paramètres par défaut que nous avions définis dans la version de bureau. Parce que si nous revenons à la version de bureau, regardez la marge, elle redeviendra ce qu'elle était. En mode tablette, nous l'avons réinitialisé. Mais pour ce qui est de l'ordinateur de bureau, il reste ce que nous avions à l'origine. Tout ce que nous définirons pour la tablette sera défini par défaut pour le mobile. Je souhaite réinitialiser la marge et le rembourrage pour tous ces éléments en mode tablette. Je souhaite appuyer sur ce menu. En sélectionnant le menu lui-même, la marge, supprimez cette marge inférieure du menu, et maintenant c'est parti. Publiez, passez en revue les modifications. Maintenant, je veux appuyer sur Control Shift I pour afficher outils de développement dans mon navigateur Chrome. Cela me permet de regarder les émulateurs pour différents appareils. Si je clique sur ce Togo réactif, nous avons différents émulateurs d'appareils ici Par exemple, pour l'iPad mini, c'est à cela que nous ressemblons sur un iPad mini, iPad er et un iPad P. Passons simplement à l'iPad mini. Et je ne vois pas O voici le menu. En fait, je pense que cette leçon va être trop longue. Voyons comment procéder à partir d' ici dans la leçon suivante. Je te verrai bientôt. 22. En-tête réactif de l'écran: Reprenons là où nous nous sommes arrêtés. Comme vous pouvez le voir, le menu est juste ici, l'icône du menu, mais nous ne pouvons pas le voir. La première chose que nous voulons faire est de changer de couleur. Tant que c'est encore sélectionné, je vais passer au style. Emballage du menu. Nous voulons maintenant passer au style Hamburger. Pour le style du hamburger, couleur icône du hamburger. Voyons voir. Nous voulons le rendre blanc. Faisons en sorte que ce soit vert. Permettez-moi de sélectionner ce bouton. Copiez ça. Sélectionnez le kit d'éléments de style Hamburger. Va ici et fais en sorte que ce soit vert. C'est la couleur de l'icône. En fait, nous changeons la mauvaise chose. Ce n'est pas la couleur de l'icône du hamburger. Nous voulons que cela reste le cas. Revenons à la normale. Nous voulons que ce soit cette couleur foncée. Revenons donc au sélecteur de couleur et je veux choisir cette couleur Maintenant, pour cette couleur d'icône de hamburger, ce sont ces lignes Je veux qu'ils soient de cette couleur de fond sombre. Mais maintenant c'est là. Pour le type d'arrière-plan, c'est là que nous voulons avoir la couleur verte. Si je sélectionne cette option, c'est exactement ce que je recherchais. Permettez-moi de sélectionner ce bouton. Copie couleur. Sélectionnez cet élément, le style. Style hamburger. OK. Passons au type d'arrière-plan, et non à la couleur de l'icône, type d' arrière-plan, au vert et au survol. Lorsque vous utilisez une tablette, vous ne survolez généralement pas Mais peut-être que vous utilisez un stylet. Alors, ne présume pas. type Bground au survol doit être de couleur blanche, comme ça Maintenant, c'est l'icône du hamburger. Lorsque nous cliquons dessus et que nous exposons le menu, nous avons également ce bouton pour fermer, et c'est ce que nous avons ici. Près du Togo. En fait, créons ce menu. Revenons ici et faisons de ce menu un arrière-plan de menu en couleur . Retournez ici, je veux aller sur les pages d'accueil. Page d'accueil ouverte à droite reliant Nouvel onglet à modifier avec Elementor Maintenant, en descendant ici, je veux sélectionner ce conteneur. Donc, en sélectionnant son style. Copie couleur. Revenons ici et maintenant à cet emballage de menu. Nous voulons lui donner un type de fond de cette couleur. Style des éléments de menu. Nous voulons lui donner une couleur blanche au survol. Nous voulons que ce soit vert en sélectionnant cette copie. En cliquant sur le menu. Nous voulons être en mesure de le voir. En fait, il est déjà configuré pour se comporter comme ça, mais ce n'est pas grave. Je pense que cela hérite des paramètres du bureau. Restons-en là. Maintenant, changeons cela en mode fermé. Encore une fois, menu de hamburgers. Type d'arrière-plan fermé au Togo. Faisons en sorte qu'il soit blanc. Type de bordure, aucun. Vous ne devriez pas avoir de bordure, et je pense que cela semble bien. Maintenant, ajoutons également un menu mobile. Retour au contenu, aux paramètres du menu mobile, au logo du menu mobile. Sélectionnons-le, sélectionnons. Non, si on clique sur le menu, voilà à quoi ça ressemble. Nous pouvons maintenant réduire la largeur de ce wrapper, en allant dans Style Menu Wrapper Pour les tablettes, je pense, disons 30 %. Non, c'est trop petit parce que maintenant le togo fermé est en train de s'effondrer , comme ça Passons au hamburger une fois de plus. Passons à la clôture. Pour ce qui est de la marge, cassons cette marge. Développez cela une fois de plus. Et pour la marge supérieure, appuyez dessus. Juste comme ça. En fait, passons également au logo du menu mobile. Pour ce qui est de la marge, cassons ça. Marge gauche, enfoncez-la légèrement, et je pense que tout va bien maintenant. Publiez, et passons en revue les modifications. Il semble que nous devions changer la couleur de l'emballage du menu Laissez-moi sélectionner la couleur de l' emballage du menu, puis ça. Et je veux vous donner ce contexte ici. Permettez-moi d'utiliser mon sélecteur de couleur car je l'avais déjà choisi Et collez-le ici, où est cette couleur ? Publier. Passons en revue les modifications. Control Shift I, d'accord. Maintenant, au moins, nous avons fait des progrès. Mais maintenant, mettons les choses du bon côté. En sélectionnant ceci, en fait , sélectionner ce conteneur qui contient le menu, tout doit être au centre, mais ici, ils doivent être sur le côté droit, publier, et c'est parti. Maintenant, nous devons les replier un peu vers l'intérieur. Prenons le contenant qui les contient tous les trois. Ce conteneur, et faisons en sorte qu'il occupe 95 % de l'espace. Juste comme ça. Nous pouvons également le pousser vers le bas. Passez à l'étape suivante, brisez la marge et donnez-lui une marge supérieure de dix, publiez l'en-tête. Allons-y. Génial Maintenant, vous avez également la possibilité de ne pas inclure ce bouton. Vous n'avez pas nécessairement besoin de l'avoir ici. La façon de le masquer sans le supprimer de la version de bureau car vous en aurez toujours besoin dans la version de bureau. Si vous revenez à la tablette. Nous pouvons simplement dire que nous créons un en-tête distinct pour les tablettes uniquement. Si je sélectionne cette option, laissez-moi simplement sélectionner le conteneur qui contient tout, et je le dupliquerai. C'est bon. Nous avons maintenant deux en-têtes, mais nous pouvons dire que l'un ne devrait être visible que sur les tablettes, et un autre ne devrait être visible que sur le bureau Par exemple, pour le premier, nous pouvons dire, lorsqu'il est sélectionné, passer en mode avancé, réduire la mise en page, passer en mode réactif, masquer, masquer sur les tablettes et les téléphones. Publier. Pour le second, si je le sélectionne, nous pouvons passer en mode avancé et dire responsive, c'est-à-dire sur ordinateur de bureau. Modifiez uniquement sur ordinateur, mais affichez-le sur tablette et mobile. Les utilisateurs de tablettes et de téléphones portables ne verront que ce menu, cet en-tête. Les personnes utilisant un ordinateur de bureau ne verront que cela. Mais si nous passons à la tablette, notez que la partie supérieure est estompée, ce qui signifie que nous ne pouvons pas la modifier dans ce mode, mais elle peut être modifiée Nous pouvons maintenant nous débarrasser de ce conteneur, et il ne nous reste plus que deux conteneurs à publier. Passons en revue les modifications, et maintenant nous n'avons plus que le menu. Si nous passons en mode bureau, nous pouvons voir celui qui avait le bouton. Si nous passons en mode tablette, nous ne pouvons voir que celle qui n'avait pas le bouton. N'oubliez pas que nous avons dit que cela devrait être visible sur les tablettes et les téléphones portables. Si nous passons à un téléphone portable, il a aussi quoi ? Ceci sans cet autre bouton. En gros, c'est ainsi que vous pouvez rendre la page réactive sur les écrans de tablette. J'ai une mission pour vous, et la mission est de rendre cette page réactive sur les téléphones portables, les téléphones intelligents. Vous allez utiliser les mêmes principes que nous avons utilisés pour le rendre réactif. Mais dans la leçon suivante, je vais vous donner quelques conseils et astuces pour terminer cette tâche et une belle page réactive. Je te verrai donc bientôt. 23. Section héros réactif à l'écran: Maintenant que nous avons un en-tête adapté à l'écran sur les tablettes. Il est temps de voir comment le rendre responsive sur les smartphones. Et maintenant, je veux vous donner quelques conseils pour rendre le reste de la page responsive. Commençons par la réactivité de l'en-tête sur les téléphones portables réactivité de l'en-tête sur les téléphones Donc, si nous nous contentons des téléphones portables, bien sûr, cela n'est pas modifiable C'est ce que nous sommes en train de modifier, et nous avons deux conteneurs à l'intérieur de ce conteneur extérieur. Il est donc logique de le faire peut-être à 50 %, Il est donc logique de le faire car il occupe actuellement 100 % de la largeur. En choisissant le conteneur lui-même, nous pouvons donc dire que nous voulions en occuper environ 40 %. Cet autre contenant contenant le menu des hamburgers devrait également occuper, disons, 40 %. Maintenant, comme vous pouvez le voir, il y a 20 % d'espace entre les deux. En fait, disons qu'ils devraient occuper 46 %, et que cet autre devrait également occuper 46 %. Nous y voilà. Maintenant, ce que nous pouvons faire, c'est sélectionner le conteneur qui contient ces deux conteneurs, et bien sûr, c'est ce conteneur. Je pense donc que c'est tout, et nous pouvons dire occupons 98 %. En fait, disons neuf à 5% de l'espace disponible. Passons en revue les modifications, et voici à quoi cela ressemble sur les téléphones portables. iPhone Pro Max, iPad Mini, Surface Pro Samsung, il s'adapte donc bien à différents appareils mobiles. Maintenant, c'est l'en-tête. Passons maintenant rapidement à la vitesse supérieure et travaillons sur la section des héros Cela vous permettra de travailler sur le reste des sections, car vous savez déjà comment rendre différents éléments réactifs en fonction de ce que nous avons fait avec l'en-tête. Mais je veux que nous travaillions très rapidement sur cette section consacrée aux héros. Passez donc en mode tablette. Comme vous pouvez le constater, voici à quoi ressemble la section des héros en mode tablette, et c'est ce que je veux. Je veux que cette image apparaisse avant le texte. Donc, ce que je peux faire, c'est sélectionner ceci, passer à l'état avancé, en fait, à la mise en page, et je peux dire de haut en bas, juste comme ça, puis en fait, l'inverser. Nous avons donc ce conteneur qui contient le texte, et maintenant nous avons le conteneur qui contient l'image. Ce conteneur, en fait, le conteneur extérieur peut occuper 100%. Ce conteneur ici peut occuper 95 % et non des cellules de 95 pi, et cet autre peut occuper 95 %. Ex, juste comme ça. Pourquoi est-ce 95. Maintenant, avec cette option sélectionnée, la partie extérieure, nous pouvons tout aligner au centre. Nous pouvons réduire certains de ces textes. Nous pouvons réduire l' espacement ici, le rembourrage en haut peut en donner 50, en bas 50 Venons-en également à cela et mettons-le au centre, alignons-le au centre, cela aussi. Et ce contenant qui contient tous les boutons. Mettons tout au centre, juste comme ça. Publiez, et examinons les modifications. Nous y voilà. Contrôlez Shift I pour afficher les outils réactifs. Passons à l'iPad mini. Voilà à quoi ça ressemble sur un iPad mini. Si nous faisons défiler la page, vous avez maintenant le reste sur lequel vous pouvez essayer de travailler, y compris le pied de page N'oubliez pas d'optimiser le pied de la même manière que nous avons optimisé la tête. Maintenant, dans mes cours précédents, je vous ai montré étape par étape comment rendre chaque pièce réactive. Mais dans ce cours, je voudrais vous confier un devoir que vous pourrez accomplir en vous basant sur les informations issues des conseils que j'ai partagés lorsque nous travaillions sur la section héros et l'en-tête. Je pense que vous pouvez vous occuper du reste, et je suis très curieuse et impatiente de voir ce que vous allez proposer, en particulier pour cette partie. Vous pouvez même décider de vous débarrasser de cette image de fond. Sur les tablettes, parce que pour le moment, ce n'est pas beau, mais sur ordinateur, c'est beau. On ne peut pas s'en débarrasser sur Desto. Alors, comment allez-vous gérer le en prendre soin sur des tablettes ? C'est une bonne tâche à accomplir, et je sais que vous allez apprendre beaucoup de choses en essayant de déboguer et de résoudre des problèmes Et cela semble être un bon endroit pour terminer le cours. Mais avant que tu ne partes, j'ai encore quelques remarques finales. Je veux partager avec vous, donc je vous verrai dans la prochaine et dernière leçon. 24. Réflexions finales: Félicitations. Tu es arrivée jusqu'au bout, et je tiens à te remercier d'être restée avec moi jusqu'à présent. Fais-moi confiance. Je sais qu'il peut être difficile de suivre un cours en ligne , car nous avons tous des horaires chargés. Donc, le fait que vous ayez atteint la dernière leçon signifie que vous voulez vraiment apprendre la conception Web d' Elementor Vous devriez donc être fier d' avoir terminé le cours. N'oubliez pas que vous avez désormais les compétences nécessaires pour créer une page de destination à partir de zéro à l'aide d'Elementor Mais ce n'est que le début. Vous pouvez utiliser ces nouvelles compétences pour créer un site Web complet pour votre entreprise ou nos clients. Si vous souhaitez améliorer vos compétences élémentaires et apprendre à créer des sites Web entièrement fonctionnels, et créer des sites Web entièrement fonctionnels, pas seulement des pages de destination, hésitez pas à consulter mon profil pour des cours plus complets Maintenant que vous avez terminé de travailler sur votre page de destination, n'oubliez pas d'en faire une capture d'écran et partager avec nous au sein de la communauté. Nous adorons partager nos projets pour recueillir commentaires des autres étudiants et de nos professeurs. Et vous pouvez prendre une capture d'écran de l'intégralité de votre page de destination à l'aide d'une extension de navigateur appelée G Full page. Il suffit donc d'aller dans votre navigateur et de rechercher l'extension G pleine page. Donc, si vous utilisez Firefox, remplacez Chrome par Firefox. Je vais cliquer dessus. Ensuite, allez-y et installez-le. Comme vous pouvez le voir, le mien est installé. Passons maintenant à votre page de destination, nous y voilà. Vous aurez cette icône ici, indique la page G F, suffit de cliquer dessus et une capture d'écran de l' ensemble de la page de destination sera prise. Téléchargez-le au format PNG. Maintenant, tu peux retourner en classe. Il s'agit d'un cours précédent que j'ai publié le mois dernier. Et sous l'onglet Projets et ressources, vous pouvez continuer et cliquer sur Soumettre le projet. Comme vous pouvez le constater, les étudiants ont pu télécharger les projets sur lesquels ils ont travaillé dans ce cours. Alors allez-y, cliquez sur Soumettre le projet sous l'onglet Projets et ressources ce cours actuel et soyez fier de montrer à la communauté ce que vous avez pu créer. Encore une chose, avant que nous ne nous séparions, j'ai une petite question préférée à vous poser. Si vous avez trouvé ce cours utile et agréable, pourriez-vous prendre un moment pour en rédiger une critique ? Vos commentaires ne prendront que quelques secondes, mais ils peuvent être déterminants pour le parcours d' apprentissage d'une autre personne. Lorsque les étudiants découvriront votre évaluation, cela les aidera à savoir si ce cours leur convient. Prenez donc un moment, ouvrez l'onglet de révision situé sous ce lecteur vidéo et partagez vos réflexions sur le cours. Au moment où nous concluons, je tiens à vous souhaiter bonne chance dans votre parcours élémentaire. Continuez à apprendre, à créer et à tirer parti de ces outils gratuits pour donner vie à votre imagination. Et j'ai hâte de voir ce que tu vas proposer ensuite. ici là, restez géniaux, et j'ai hâte de vous voir dans le prochain cours, heureuse de concevoir tout le monde.