Créer un blog WordPress avec Elementor

1. Introduction du cours: À l'ère numérique en évolution rapide d'aujourd'hui, avoir une forte présence en ligne n'est plus une option, c'est essentiel. Parce qu'un blog convivial bien conçu peut être un outil puissant pour entrer en contact avec le public sur le marché mondial. Bonjour, je m'appelle Ken et j'enseigne aux gens comment créer sites Web Wpress depuis 5,5 ans Et dans ce cours, je vais vous montrer comment créer votre propre blog magnifique et professionnel avec Wpress et Elementor Nous allons le faire à partir de zéro. Et lorsque nous aurons terminé, vous aurez un blog prêt à être lancé lequel vous pourrez commencer à diriger les internautes depuis vos comptes de réseaux sociaux ou vos profils de réseaux sociaux. Vous pouvez commencer à écrire et à publier des articles de blog sur votre blog, puis à partager ces liens sur vos comptes de réseaux sociaux pour attirer les internautes vers votre blog. Et tout au long du cours, je vais vous montrer tous les éléments essentiels dont vous avez besoin pour comprendre le flux de travail Wordpress Elementor Vous comprendrez comment utiliser les différents éléments proposés par Elementor et vous saurez pourquoi nous les utilisons. Juste pour vous donner un bref aperçu de certains des concepts que nous allons apprendre, ce cours expliquera comment configurer Wordpress à partir de zéro. Cela signifie que nous allons commencer par savoir comment acheter un hébergement Wpress, comment installer Wpress une fois que vous avez acheté un hébergement, afin que vous puissiez commencer à l'utiliser Comment installer et utiliser les thèmes et plugins Wpress. Nous verrons comment créer des pages Web et des articles de blog. Je vais vous montrer comment créer des articles et les publier sur votre blog. Je vais vous montrer comment classer ces articles ou articles blog afin que vous puissiez organiser correctement votre blog. Je vais vous montrer comment créer de belles mises en page fonctionnelles avec générateur glisser-déposer d' Elementors, afin que vous ayez un site Web magnifique Vous comprendrez comment personnaliser vos blogs, votre typographie, couleurs, vos images et tous les autres éléments que nous utiliserons dans le cours Et ce n'est qu'une partie de l'iceberg des concepts que nous allons aborder. Et à la fin de ce cours, vous aurez les compétences nécessaires pour créer tout autre type de site Web que vous souhaitez avec Wordpress, Elementor et d'autres plugins Comme vous pouvez le constater, ce sera un cours très pratique. Cela vous donnera l' expérience dont vous avez besoin pour passer du statut de débutant à celui de concepteur Web confiant en un rien de temps. Et si vous vous demandez si ce cours vous convient, ce cours est destiné aux entrepreneurs qui souhaitent apprendre à créer un site Web pour leur entreprise. Donc, si vous êtes un homme d'affaires qui souhaite partager son expertise par le biais d'articles ou de billets de blog sur votre propre plateforme, et non sur une plateforme tierce, vous verrez comment créer un blog avec lequel vous pouvez le faire. Ce cours est également créé pour tous ceux qui souhaitent apprendre à créer sites Web et des articles de blog avec we press et gagner de l'argent en le faisant. Si vous voulez que les gens vous paient pour créer des sites Web ou des articles de blog pour eux et gagner leur vie en faisant cela, ce cours vous donnera les bases et bien plus encore. Vous pouvez donc vous préparer à le faire. Donc, si cela ressemble à une compétence, vous seriez intéressé à apprendre. Si vous souhaitez apprendre à créer des blogs et des sites Web pour vous-même ou pour vos clients. Je vous encourage à me rejoindre dès maintenant, et je vous promets que lorsque nous aurons terminé, vous n'aurez pas un foutu site Web, mais un blog réel prêt à servir les visiteurs ou les clients Donc, sans perdre de temps, je veux vous montrer le projet sur lequel nous allons travailler. Dans la prochaine leçon, je vais donc vous faire visiter le blog que nous sommes en train de créer. Je te verrai bientôt. 2. Projet de classe: Moi. Et comme je te le rappelle toujours à chaque cours. La meilleure façon d'apprendre conception de sites Web ou toute autre compétence technique est de travailler sur un projet réel ou simplement sur un projet. Voici donc le projet sur lequel nous allons travailler. C'est le blog que nous allons créer, et je voulais vous faire un rapide tour d'horizon de l'ensemble du blog. agit donc tout d'abord de la page d'accueil ou de la page d'accueil. Comme vous pouvez le voir, nous avons cette page de héros avec du texte d'en-tête, une description. Ensuite, voici les articles de blog. Si vous cliquez sur un blog, vous serez redirigé pour lire ce blog. Mais nous verrons cela sous peu. Comme vous pouvez le voir sur la gauche, nous avons un profil ou la biographie de l'auteur. C'est votre biographie, si c'est vous qui gérez le blog. Ici, nous avons des articles récents, et vous pouvez cliquer sur n'importe lequel d'entre eux pour lire En bas sur la photo, nous avons trois colonnes. Nous avons quelques liens rapides. Nous avons un formulaire d'inscription au cas où le lecteur souhaiterait s'inscrire à votre liste de diffusion, et nous en avons une brève description ici. est très simple, mais la chose la plus importante à retenir de cette classe est de savoir comment utiliser Wpress et Elementor pour créer toutes ces différentes sections Passons à la page des articles, c'est ici que nous avons approuvé tous les articles de blog que vous avez publiés Comme vous pouvez le constater, ils sont très bien agencés avec un espacement uniforme, quelle que soit la hauteur de chaque élément ici, comme vous pouvez le voir, il est Donc, celui en dessous est légèrement abaissé pour maintenir cet espacement. Et si vous ouvrez un article de blog pour le lire, par exemple celui-ci, voici à quoi ressemble le billet de blog. Nous avons toujours cette liste d'articles récents, et vous avez un contrôle total sur ce que vous souhaitez afficher ici. Donc, en ce moment, nous affichons les articles récents. Mais en utilisant les catégories Wpress, vous pouvez définir la catégorie que vous souhaitez afficher ici, et je vais vous montrer comment procéder J'ai mentionné que nous allons apprendre à classer les articles de votre blog Nous allons donc voir comment procéder. Maintenant, l'utilisateur peut venir lire. Comme vous pouvez le constater, il s'agit de la catégorie productivité et sa date de publication était le 7 mars 2024. Vous pouvez continuer à lire la conclusion de l'article et vous avez ici une courte biographie de la personne qui a publié ce billet de blog spécifique. Ensuite, nous avons le pied de page. Si vous avez des vidéos, vous pouvez les publier sur cette page. Nous y voilà. Et si nous diffusons l'une des vidéos ici, il vous suffit d'un lien vers votre vidéo sur YouTube. Ils passent à la page de contact. Page de contact très simple avec un beau formulaire de contact, nous verrons comment utiliser un joli plugin de formulaire dans un forminateur à froid pour créer cette page de contact Et nous avons également cette barre latérale d'articles récents. Maintenant, vous remarquerez que nous avons toujours cette barre latérale, et c'est parce qu' il est toujours bon avoir des appels à l'action sur votre site Web, vous voulez garder les clients ou les visiteurs sur votre site Web ou votre blog le plus longtemps possible. Et en leur donnant des liens sur lesquels cliquer pour les rediriger vers une autre partie de votre site Web, vous les conservez plus longtemps sur votre site Web, ce qui est bon pour votre référencement. Maintenant, s'ils cliquent sur ce bouton populaire, ils verront cette barre latérale hors toile avec plus de contenu, et vous aurez un contrôle total sur ce que vous souhaitez afficher sur cette barre latérale Donc, comme je l'ai mentionné, le point le plus important à retenir de ce cours sera avoir l'état d'esprit d'un concepteur de site Web, d'un concepteur Web Wpress Mon objectif avec ce cours est donc de vous montrer comment utiliser une combinaison de différents outils au sein de l'écosystème Wpress pour créer un blog ou un site Web Et cet exemple de blog sera un bon projet pour nous permettre de comprendre le fonctionnement de tous ces différents outils. Elementor étant au centre des préoccupations car c'est Elementor qui nous permettra d'avoir cette Toutes ces mises en page que nous avons vues dans les différentes pages seront Elementor Donc, en gros, il ne s'agit que d'un bref aperçu de ce sur quoi nous allons travailler. Il s'agit du projet de classe. Dans la leçon suivante, voyons où et comment acheter un hébergement WordPress et un nom de domaine. Je te verrai donc bientôt. 3. Acheter un hébergement WordPress et un nom de domaine: R, bon retour. Maintenant, j'ai récemment publié un tutoriel complet sur la façon d'acheter un hébergement Web WPress lorsque vous souhaitez créer un site Web élémentaire Maintenant, le tutoriel portait sur un cours élémentaire différent. Mais comme le processus d'achat WPressHsting reste le même, j'ai décidé de l'inclure dans cette classe cas où vous ne sauriez pas comment acheter Alors sans perdre plus de temps, voici le processus pour acheter WPressHsting et un Maintenant que vous avez vu le site Web nous allons créer tout au long de ce cours, il est temps de parler 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 dirige vers un site Web spécifique. Par exemple, free pk, disons, free pick.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 Free Pick, et le site Web Freepk 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, free pick.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 peek.com gratuit De la même manière, personne d'autre ne peut avoir votre numéro de téléphone. Votre numéro de téléphone est unique et il est utilisé pour vous joindre uniquement, 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 chez wordpress ou. Ceci est le site officiel de WordPress. C'est ici que vous pouvez télécharger Wpress si vous souhaitez développer votre site Web hors ligne, vous pouvez installer Wpress dans votre système travailler sans Internet et créer votre Mais ce qui nous intéresse, c'est la page d'hébergement. WordPress dispose d'une liste d'hébergeurs Web recommandés. Et je vous recommande de prendre un moment pour lire cette page. Comme vous pouvez le constater, 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 Wpress Il existe d'autres hébergeurs qui sont tout aussi bons, sinon meilleurs que ces trois. Ce ne sont donc que des recommandations de la presse, mais vous découvrirez ici qu' il existe des centaines de milliers d'hébergeurs Web, dont la grande majorité répondent aux exigences minimales de presse. Wpress a décidé de simplement vous faciliter le travail et a décidé de vous donner les trois meilleurs qu' ils recommandent Personnellement, j' ai utilisé Blue Host, et il y a longtemps, lorsque j'ai commencé à utiliser Wpress, j'ai essayé wpress.com, et il ne faut pas confondre wpress.com avec wpress.org WordPress.org est la plateforme gérée par la WPressFoundation, car remember Wpress est open source, et wpress.org existe pour vous fournir le téléchargement de W Press et tout ce que vous devez savoir sur WPress et tout ce 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, elle a ses limites. la même manière, les semaines ont leurs limites lorsque vous les comparez à l'installation de Wpress vous-même sur un serveur Lorsque vous installez Wpress sur un serveur quelque part, vous avez plus de contrôle pour faire bien d'autres choses que vous ne pouvez pas contrôler lorsque vous utilisez un service hébergé tel que wpress.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, en particulier lorsque je ne fais qu' expérimenter quelques idées avant de m' engager à acheter un hébergement Web dédié à cette idée spécifique Name tip 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 veux ouvrir une 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. Il s'agit de 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é pour celui-ci. 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 attire vraiment l'attention et commence à attirer beaucoup de trafic. Vous pouvez maintenant décider ce site Web semble prendre de l'ampleur. Laissez-moi donc obtenir un plan d'hébergement Web dédié séparément, puis vous pourrez simplement migrer vers l'hébergement dédié, car maintenant c'est une idée qui a été lancée. Le reste peut rester sous forme de sites expérimentaux, mais ils sont toujours en ligne. Mais ce qui est bien, c'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. C'est le site que je viens de vous montrer. Laisse-moi juste 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 nom de domaine, vi com. Et maintenant, dans ce cours, nous allons créer notre site Web, et je vais utiliser un nom de domaine différent, qui sera wordpress com et qui sera également inclus dans ce plan. Je vais donc avoir 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 le raisonnement qui sous-tend ce que j' utilise et comment je travaille, car cela pourrait peut-être vous être utile. Mais n'oubliez pas que vous pouvez toujours vous rendre ici et essayer ces autres hébergeurs. 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. Bien, charity today.com est le domaine premium. C'est 1 700 dollars. Mais nous avons également d'autres domaines moins chers, caritatifs au quotidien. C'est à vous de faire preuve de créativité et d'acheter un nom de domaine qui vous permettra vivre avec un nom de domaine qui ait 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 constater. Ouais. Alors jouez avec ça, et une fois que vous serez prêt, vous pourrez l'ajouter au panier. 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. Bien entendu, je vais laisser un lien dans la description ci-dessous de ce lecteur vidéo pour que vous puissiez acheter l'un de ces hébergeurs dont nous avons parlé, y compris Name Chip. Et certains d'entre eux peuvent être des liens d'affiliation. Si vous souhaitez me soutenir et soutenir le travail que je fais, la meilleure façon de me soutenir est cliquer sur mes liens d'affiliation, car vous achèterez toujours le service au prix indiqué sur leur site Web. Mais si vous utilisez les liens que j'ai fournis, je toucherai une petite commission sur votre achat, ce qui m'aidera à payer les factures et à me motiver pour continuer à créer de nouveaux cours. Cela dit, tout tourne autour de l'hébergement Web et de la manière d'obtenir un nom de domaine. Dans la leçon suivante, voyons comment installer WordPress une fois que vous aurez accès à votre panneau C après avoir acheté un hébergement. Je vous verrai donc dans la prochaine leçon. 4. Installer WordPress: Maintenant que vous vous êtes acheté un nom de domaine et un hébergement, il est temps d'accéder au panneau C afin que nous puissions installer WordPress. Alors allons-y et faisons-le. Désormais, les différents hébergeurs auront différentes manières d' accéder au panneau C. C'est ainsi que je vais le faire en utilisant une puce nominative. Mais le plus important est que vous accédiez au panneau C car c'est par le biais du panneau C que nous pourrons installer WordPress. Alors laissez-moi simplement me connecter. Ensuite, je passerai directement à la liste d'hébergement. C'est là que tous mes plans d'hébergement sont répertoriés. Je vais passer au panneau C. Comme je l'ai mentionné, vos hébergeurs Web peuvent vous proposer un autre moyen d'accéder au panneau C. Nous voici donc dans le panneau C, et ce que nous voulons, c'est la section Softaul App Installer, car elle nous fournit différents CMS et services que nous pourrions avoir envie d'utiliser, et nous voulons utiliser WordPress Permettez-moi donc de cliquer sur WordPress sous Soft App Installer. Et n'oubliez pas que j'ai mentionné que ce plan, le plan Seo plus par puce nominative, vous permet d' avoir plusieurs sites Web sous un seul plan d'hébergement. Donc, ici, nous avons Install Now. Je vais cliquer sur Installer maintenant, et nous serons redirigés vers le formulaire d'installation de WPress Il suffit de remplir ces champs. Et la première chose à faire ici est de sélectionner le protocole ou le préfixe Et j'aime mon site web qui commence par WWW puis par mon nom de domaine. Mais là encore, vous remarquerez que nous avons le HTP et le HTTPS. Si votre site Web, si votre nom de domaine possède un certificat SSL, vous devez utiliser le protocole HTTPS. Lorsque vous cliquez à l'extérieur, il effectue une vérification rapide, et si vous n'avez pas le certificat nécessaire, il vous avertit que vous n'avez pas le certificat nécessaire et que vous ne pouvez utiliser que le protocole HTTP. Mais il est essentiel que vous disposiez d' un certificat SSL pour votre site Web. En 2024, c'est un must. La prochaine étape, bien sûr, est ici, car vifxpo.com possède déjà le Je vais utiliser wpress com. Et ici, nous pouvons ajouter un dossier dans lequel stocker notre site Web WordPress. Mais cela signifiera que notre page d'accueil sera wpresst com slash Mais si vous souhaitez que la page d'accueil de votre site Web soit www.domainname.com, n'ajoutez aucun dossier ici Je vais donc laisser les choses comme ça. Ensuite, vous pouvez sélectionner ici la version de Wpress que vous souhaitez utiliser Je souhaite utiliser la dernière version. Donc, mon site web sera www press slash anything. Deuxième chose, nous pouvons donner un nom à notre site Web. Si nous ouvrons CNN cnn.com. Comme vous pouvez le constater, le nom qu'ils ont donné à leur page d'accueil est « dernières nouvelles », dernières nouvelles » et tout ça. C'est donc le nom qui apparaîtra sur vos onglets. Par exemple, le blog de Ken, transforme des vies par le biais de billets de blog ou d'articles. Cette section vous fournit ensuite les informations de connexion pour votre tableau de bord de presse professionnelle. Juste au cas où vous ne voudriez pas vous connecter à votre tableau de bord Wpress via le panneau C, vous devez passer par votre nom de domaine WP login Vous pouvez utiliser ces informations d'identification. Je vais donc laisser le mien par défaut. Cet e-mail a été généré automatiquement pour vous lorsque vous avez eu accès au panneau C, lorsque vous avez acheté votre hébergement et avez eu accès à votre panneau C. Ce sont des plugins que vous pouvez installer avec WordPress. Ils sont fournis avec Wordpress, mais selon votre hébergeur, vous n'avez peut-être pas cette liste, mais vous n'avez pas besoin d'en installer aucune car le répertoire des plugins WordPress contient de nombreuses options, et elles peuvent probablement faire un meilleur travail que celles-ci. Ensuite, si vous souhaitez effectuer des sauvegardes automatiques, vous pouvez entrer ici, laisser l'emplacement de sauvegarde par défaut. Sélectionnez, peut-être si vous souhaitez effectuer une sauvegarde une fois par jour, une fois par semaine, une fois par mois. Laisse-moi choisir une fois par semaine. Puis rotation. s'agit du nombre de copies de sauvegarde dont vous disposez à un moment donné. Et ici, vous pouvez saisir votre e-mail Gmail pour recevoir une notification une fois que Work Press a été installé. Mais tu n'as pas besoin de faire ça. Permettez-moi de cliquer sur Installer. Et il est dit que cela prendra 3 minutes, mais cela prend moins d'une minute en fait. Et nous y voilà. Il s' agit maintenant de votre nom de domaine. Il s'agit de l'URL de votre page d'accueil et de l'URL de votre tableau de bord. Maintenant que nous sommes ici dans le panneau C, nous pouvons simplement cliquer dessus et nous serons redirigés directement vers notre tableau de bord. Alors laissez-moi simplement cliquer dessus. Et comme vous pouvez le constater, voici le tableau de bord. Et comme je l'ai mentionné, comme vous pouvez le voir ici, nous avons le blog de Ken. C'est le nom que nous avons donné à notre blog ou site Web. Maintenant, si je clique sur le blog de Ken, cela nous amènera à la page par défaut, que nous allons bien sûr modifier. Et comme vous pouvez le voir, voici le nom du site. Cela devrait indiquer votre nom ou le nom que vous avez donné à votre site Web et le slogan ou le slogan que vous avez mis sous le nom. Il s'agit maintenant du thème par défaut. Nous verrons comment changer le thème WordPress au fur et à mesure, mais c'est comme cela qu'il faut installer WordPress, et maintenant nous sommes prêts à passer à l'étape suivante, qui consiste à installer Elementor Alors je te verrai dans une minute. 5. Installer Elementor: Maintenant que nous avons appuyé sur Install, il est temps d'installer Elementor car, bien sûr, nous construisons le site Web de War Press avec Element Passons donc aux plugins. Et tout d'abord, je vais simplement cliquer sur plugins pour accéder à la liste des plugins préinstallés. Et ce sont les plugins qui toujours fournis avec War Press. Je vais donc simplement sélectionner les deux, sélectionner Supprimer dans ce menu déroulant et appliquer OK. C'est bon. Donc maintenant, nous n' avons aucun plug-in. Permettez-moi de rafraîchir cette page. Aucun plug-in n'est actuellement disponible. Donc, si je clique sur Ajouter un nouveau plug-in, serai redirigé vers le répertoire we press plug in. Et ici, nous avons plus de 50 000 plugins gratuits que vous pouvez installer et utiliser. Alors, bien sûr, cherchons Elementor. Et nous y voilà. Elementor est donc la première option ici. Je vais donc cliquer sur Installer maintenant. Et maintenant, il est installé. Il ne reste plus qu'à l'activer. Mais avant de l'activer, vous remarquerez ici que nous avons d'autres ajouts ou plugins liés à Elementor ajouts ou plugins liés à Elementor Et ce sont des produits créés par plug-ins tiers développeurs de plug-ins tiers qui ne sont pas affiliés à element, l'équipe d'Elementor Ce sont des développeurs indépendants qui ont créé des modules complémentaires, des éléments supplémentaires que nous pouvons utiliser gratuitement avec la version gratuite d'Elementor Maintenant, Elementor a une version pro que vous devez payer et une version gratuite Et la version gratuite contient déjà plusieurs éléments que nous allons voir. Mais les éléments gratuits fournis avec Elementor ne sont pas suffisants pour créer un beau site Web de presse Vous pouvez créer un site Web de base avec eux, mais pas un très beau site Web avec. Mais maintenant, ces éléments supplémentaires que nous obtenons de ces modules complémentaires liés aux éléments nous offrent plus d'options, et bien sûr, nous en utiliserons un certain nombre Vous comprendrez donc exactement de quoi je parle Mais pour l'instant, permettez-moi de continuer et de cliquer sur Activer. Et maintenant, je vais être redirigé vers cet assistant de configuration élémentaire pour effectuer quelques configurations La première étape consiste donc à créer un compte avec Elementor pour accéder à tous ces avantages, mais vous n'avez pas besoin d' un compte élémentaire pour utiliser Elementor Je peux donc aller de l'avant et sauter cette partie. Ensuite, ici, vous pouvez choisir le thème que vous souhaitez utiliser. Vous pouvez choisir d'utiliser le thème Hello. Il s'agit du thème we press créé par l'équipe Elementa pour fonctionner spécifiquement avec Elementor Mais nous n'allons pas utiliser ce thème Hello car nous utiliserons le thème Astro, qui est également un autre thème incroyable créé par des professionnels et fonctionne parfaitement avec Elementor Je vais donc simplement sauter cette partie. Et ici, nous pouvons choisir un nom pour notre blog ou notre site Web. Il s'agit du nom que vous avez donné à votre site Web. Maintenant, c'est le langage de code pour une apostrophe. Comme ça, n'oubliez pas que c'est le nom que nous avons donné à mon site Web. Mais en fait, permettez-moi simplement de l'appeler blog. Je vais cliquer sur Suivant. Mais si vous êtes satisfait du nom que vous lui avez donné lors de l'installation de were press, vous n'avez pas besoin de le changer. C'est juste que je le change parce que je ne veux pas que cette apostrophe affecte ce nom Je l'ai donc modifié ici. Je vais cliquer sur Suivant. Ici, vous pouvez télécharger le logo de votre site Web. Mais c'est ce que nous allons faire lors de la création du site Web. Nous n'avons donc pas besoin de l' ajouter ici, alors sautez. Enfin, cinquième étape, modifiez un canevas vierge avec l'éditeur Elemental, choisissez un modèle conçu par des professionnels ou importez un modèle que vous avez déjà créé Mais nous n'allons rien faire de tout cela. Mais si nous cliquons sur Ignorer ou fermer ici ou sur l'un de ces boutons, Elemento générera une page élémentaire juste pour nous montrer l'éditeur élémentaire Je vais donc simplement appuyer sur Skip. Et maintenant, Elementor a généré un exemple de page Web, que nous allons supprimer, mais elle est générée juste pour rediriger vers le générateur afin que nous puissions y jeter un œil dès le départ Maintenant, nous avons débloqué le pouvoir d'Elementor AI. Nous vivons à l'ère de l'IA, donc on peut facilement s'y attendre. Vous pouvez continuer et lire toutes ces informations. Mais pour utiliser Elementar AI sur votre site Web pour modifier votre texte et générer des images lors de sa création, vous devrez créer un compte Elementor N'oubliez pas que la première étape de l'assistant était de créer un compte. La création d'un compte est gratuite, vous n'avez donc pas à vous inquiéter. Tu peux aller de l'avant et le faire. Je vais cliquer sur Continuer. Et maintenant, voici la page. Il est étiqueté Elementor numéro huit. Mais comme je l'ai dit, nous allons supprimer cette page. Mais avant de le supprimer, nous allons l'utiliser pour avoir une vue d'ensemble de l'espace de travail d' Elementor, afin que vous puissiez vous familiariser avec toutes les parties de l'éditeur C'est ce que nous allons faire dans la prochaine leçon. Mais avant cela, permettez-moi de cliquer sur Publier. Maintenant, il est publié, et je veux que nous quittions le tableau de bord WordPress. Ainsi, lorsque nous cliquons dessus pour la première fois, quittons, nous obtenons cette option. Choisissez l'endroit où vous voulez sortir chaque fois que vous appuyez sur le bouton de sortie. Vous ne le configurerez qu'une seule fois, et chaque fois que vous le cliquerez, vous serez redirigé vers la partie de votre site Web que vous avez choisie. J'ai donc choisi le tableau de bord. Et postulez. Ainsi, chaque fois que je clique dessus, je suis toujours redirigé vers le tableau de bord. Permettez-moi de cliquer sur Quitter car nous n' essayons pas d'enregistrer les modifications. Maintenant, nous voici dans le tableau de bord. Et comme je l'ai mentionné, dans la prochaine leçon, nous allons avoir un bref aperçu, une visite rapide de l'espace de travail d' Elementor Je te verrai donc bientôt. 6. Visite de l'espace de travail Elementor: Il est donc temps d'avoir un aperçu rapide de l'espace de travail d' Elementor N'oubliez donc pas que nous avions une page prégénérée. Je vais donc simplement passer aux pages. Et lorsque nous avons installé Elementor, bien sûr, cela a généré Elementor numéro huit Mais lorsque nous avons installé WordPress, il était livré avec ces deux pages pré-générées. Je vais sélectionner ces deux. Dans ce menu déroulant, je vais passer à la corbeille, puis appliquer. Il ne nous reste donc plus que cette page. Maintenant, pour modifier avec Elementor, je peux cliquer sur Modifier avec Elementor, ou je peux aller Et ici, nous avons modifié avec Elementor. C'est toujours pareil. Alors laisse-moi cliquer dessus . Et nous y voilà. Voici donc, sur le côté gauche, la boîte à outils. C'est ce que j'appelle la boîte à outils. Et si j'appuie sur Control Eye, nous avons le navigateur. Ce navigateur ressemble à une carte ou une vue aérienne de la page que nous avons ici Donc, à titre d'exemple rapide, parce que nous allons examiner cela, mais parlons du navigateur Si je clique dessus pour ajouter une grille, ajoutons-la peut-être. Nous avons maintenant une grille. Si je duplique cette grille en la sélectionnant et en la dupliquant avec le bouton droit, nous avons maintenant deux grilles. Et maintenant, si on l'agrandit, cette grille est vide car on n' y a rien mis. Si je monte sur cette icône pour révéler les éléments et que je fais glisser ce titre là-dedans, vous remarquerez maintenant que nous avons un titre là-dedans. Ici, si je clique sur ce plus et que j'ajoute un élément d'image, nous avons maintenant un élément d'image. Si je sélectionne cette grille, vous remarquerez qu'elle est également sélectionnée. Laissez-moi le sélectionner. Maintenant, il est sélectionné, et comme vous pouvez le voir, il est sélectionné. Et cela change pour modifier la grille. Voici donc les paramètres de la grille. Si je sélectionne cette image comme ça, cela change pour modifier l'image. Voici donc les paramètres de l'image. Si je sélectionne ce texte, cela devient un titre de modification car il s' agit d'un élément de titre. Si je le sélectionne, cela devient une grille d' édition car il s'agit d'une grille que nous avons dupliquée à partir de celle-ci, et elle est surlignée ici Il s'agit donc d'une vue aérienne ou d'une carte de l'endroit où nous nous trouvons. Imaginez donc que vous ayez plusieurs éléments, 20 éléments alignés jusqu' en bas, et que vous souhaitiez sélectionner rapidement l'un d'entre eux. Pour une raison ou une autre, vous ne pouvez pas le sélectionner ici. Vous pouvez venir ici et le sélectionner, et maintenant il sera sélectionné dans votre espace de travail. Maintenant, pour en revenir, comme je l'ai mentionné, chaque fois que nous voulons ajouter un élément, suffit de cliquer sur cette icône, elle révèle les éléments, et je peux peut-être y faire glisser un élément vidéo. Et c'est la raison pour laquelle on l'appelle élément. Cela nous donne des éléments à ajouter à notre site Web. Et chaque fois que nous sélectionnons un élément ici et que nous le glissons et déposons dans une colonne ou une section, dès que nous le déposons, c'est l'élément actif. Et les modifications apportées à cet élément pour vous indiquer que vous apportez maintenant des modifications à cet élément spécifique. Auparavant, dans mon dernier cours, nous avions un système légèrement différent. Maintenant, je remarque que nous avons cet élément de la grille. Il n'était pas disponible dans les cours précédents que j'ai publiés, il doit donc être nouveau. Permettez-moi de les fermer dans les cours précédents où j' utilisais des conteneurs, et c'est ce que nous allons utiliser. Nous pouvons simplement faire glisser des éléments à partir d'ici et les déposer également dans les conteneurs. Retourner ici. Laisse-moi juste fermer ça. Si je réduis tous ces panneaux, ces panneaux contiennent les différents éléments qu'Elemental nous fournit Maintenant, comme vous pouvez le voir, nous avons les éléments de la version pro. Ils ne sont accessibles que si vous avez payé pour Elemental Pro Mais dans les panneaux Wpress de base et généraux, nous avons des éléments libres Donc, si je développe Wpress, nous avons des éléments que nous pouvons glisser-déposer ici Maintenant que je l'ai supprimé, cela change maintenant pour modifier des pages car il s'agit d'un élément de page. Si je réduis tout ça et que je passe au général. Si je dépose une zone d'image juste dessous du moment où cette ligne rose apparaît, si je la dépose là, cela devient une zone d'édition d'image car il s'agit d'un élément de boîte d'image. Et ce sont les paramètres des éléments de la boîte à images. Maintenant, une chose que vous remarquerez à propos de chaque élément nous déposons ici, c'est qu' il comporte trois onglets. Un onglet de contenu, un onglet de style et un onglet avancé. Donc, dans l'onglet de contenu, c'est là que nous fournirons le contenu qui doit être affiché par l'élément. Ainsi, par exemple, s'il s'agit d'une image, s'il s'agit d'une boîte d'image, bien sûr, elle a besoin d'un contenu de type image. Nous pouvons donc fournir ici l'image. Par exemple, permettez-moi accéder à mon ordinateur et de le sélectionner. Sélectionnez ensuite. C'est un contenu que nous avons ajouté. Mais maintenant, à l'intérieur et bien sûr, contenu peut aussi être du texte, et voici le texte. Voici le titre, voici le titre. Il s'agit donc de la fourniture de contenu. Maintenant, une fois que nous avons fourni le contenu, nous pouvons le styliser, c' est-à-dire lui donner son apparence, sa couleur, sa taille, la façon dont nous voulons qu'il apparaisse. Nous pouvons le styliser dans cet onglet. Dans les onglets avancés, nous avons des éléments tels que la marge et le rembourrage et là où nous voulons qu'ils soient affichés, nous avons des effets de mouvement Il s'agit donc de l'onglet avancé, et presque tous les éléments que nous ajoutons à la page comporteront le contenu, le style et les paramètres avancés de ces paramètres. Maintenant, si je reviens à la liste et que je réduis les éléments généraux, bien sûr, si je développe P, sont verrouillés et nous ne pouvons pas y accéder. Mais maintenant, souvenez-vous que lorsque nous installions Elementor, lorsque nous recherchions Elementor dans le répertoire du plugin Wpres, nous avons vu d'autres addons liés aux éléments Ce sont des plugins tiers créés pour ajouter d' autres addons élémentaires à cette liste Ainsi, chaque fois que nous installerons l'un de ces plugins, il sera répertorié ici, et il apportera ses propres éléments que nous pourrons faire glisser dans notre page élémentaire. Et continuez à construire. Et certains de ces éléments que nous obtiendrons gratuitement avec ces autres addons tiers sont les mêmes éléments qui ne sont disponibles qu' avec Elementor Pro En d'autres termes, bien que nous ne puissions pas obtenir certains d' comme le carrousel en boucle ou le formulaire avec Elementor, entre eux, comme le carrousel en boucle ou le formulaire avec Elementor, nous pouvons les obtenir en installant ces addons tiers liés à Elementor, et nous pourrons les utiliser gratuitement, et vous verrez comment procéder La prochaine chose que nous voulons regarder est ici, nous avons l'icône de prévisualisation. Donc, si je mets à jour cette page, une fois que vous avez apporté des modifications, vous pouvez cliquer sur Mettre à jour, puis prévisualiser les modifications. Cela ouvrira un nouvel onglet, et voici à quoi ressemble notre page. Ici, nous avons le mode réactif. Lorsque nous avons créé la page et que nous sommes prêts à la rendre réactive sur différentes tailles d' appareils, ordinateurs de bureau, tablettes et téléphones portables, nous pouvons cliquer dessus. Et maintenant, nous aurons ces trois options. Nous pouvons passer à l' affichage tablette et à l'affichage mobile, et nous pouvons apporter des ajustements à cette taille d'écran spécifique, et cela n'affectera que cette taille d'écran. Nous serons donc en mesure d'ajuster la taille de chaque écran afin que, quel que soit l'endroit où vous consultez le site Web, celui-ci soit impressionnant. Maintenant, ici. Maintenant, permettez-moi cliquer dessus pour me débarrasser du mode réactif. Le troisième point concerne l'histoire. Et c'est comme une capsule temporelle. Cela nous permet de revenir à un moment donné. Voici donc une liste de toutes les mesures que nous avons prises depuis l'ouverture de cette page. N'oubliez pas que nous avons commencé le montage. Si nous voulons nous débarrasser de toutes les modifications que nous avons apportées après l'ajout et de l'icône que nous avons ajoutée, nous pouvons cliquer sur l'icône ajoutée. N'oubliez pas qu'il y a un moment où nous avons ajouté cette icône. Toutes les modifications apportées par la suite sont désormais annulées. Si vous souhaitez le refaire, nous pouvons peut-être revenir à l'heure à laquelle nous pouvons peut-être revenir à l'heure à nous avons supprimé ce conteneur, peut-être à l'heure à laquelle nous avons ajouté la zone d'image, ou nous pouvons revenir à l'édition commencée C'est à ce moment-là que la page était blanche. C'est donc comme une capsule temporelle qui vous permet revenir en arrière et en avant sur votre projet Si vous n'aimez pas les six modifications que vous avez apportées, nous pouvons revenir à l'époque antérieure à ces modifications. Maintenant, c'est l'icône qui fait apparaître le navigateur. Enfin, ici, nous pouvons apporter des modifications à la page. Ainsi, comme le nom de la page, nous pouvons le modifier. Mon post. Nous pouvons modifier la mise en page, peut-être en pleine largeur élémentaire. Et maintenant, il fonctionne sur toute la largeur, d' bord à l'autre et bien plus encore. Nous verrons comment faire toutes ces choses au fur et à mesure. Enfin, je veux que nous passions à ce menu de hamburgers. Nous avons plusieurs paramètres ici. Je ne touche jamais vraiment à ces paramètres ici, sauf dans les préférences utilisateur, et il y a ce que nous appelons les poignées d'édition. C'est un outil très pratique à avoir en tant qu'utilisateur élémentaire régulier. Laissez-moi juste vous montrer ce que je veux dire. Si nous revenons ici et disons « basique », laissez-moi y faire glisser un conteneur et le déposer dedans . Maintenant, nous avons un conteneur, permettez-moi d'y retourner, de faire glisser un titre. Maintenant, si je veux dupliquer ce titre, je dois le survoler avec le bouton droit de la souris sur Dupliquer Ce sont trois choses que j'ai dû faire. Cliquez avec le bouton droit de la souris sur Dupliquer. Mais maintenant, si nous allons dans ce menu, préférences de l'utilisateur et les poignées d'édition activées. Avec ces poignées d'édition activées, il me suffit de passer la souris dessus et de dupliquer Passez la souris dessus, supprimez. Si je vais ici, ce n' était pas là avant. Si je vais dans les préférences utilisateur, désactivez-les, nous ne les avons pas ici. Donc, si je veux dupliquer ce conteneur, je dois cliquer avec le bouton droit de la souris sur Dupliquer. Mais si les poignées d' édition sont activées. Nous avons maintenant cette icône supplémentaire ici, et je peux simplement dupliquer rapidement ces sections. C'est donc le seul paramètre avec lequel je joue habituellement ici. L'autre, nous allons examiner les paramètres du site au fur et à mesure de notre progression, car il y a une section dans laquelle nous allons en parler brièvement. Mais dans l'ensemble, c'est tout ce que je voulais vous montrer à propos de l'espace de travail élémentaire Nous en apprendrons davantage sur l'espace de travail au fur et à mesure que nous progresserons dans la création de notre blog. Donc, dans la leçon suivante, allons-y et installons le thème astra Je te verrai donc bientôt. 7. Installer un thème: Maintenant que nous avons eu un bref aperçu de l'espace de travail élémentaire, il est temps d'installer le thème wordpress que nous allons utiliser Désormais, chaque site WordPress doit avoir un thème car le thème et le constructeur déterminent l'apparence du site Web. Donc, pour installer un thème WordPress, je vais entrer dans les thèmes d' apparence. Et par défaut, chaque fois que vous installez WordPress, il y a toujours un thème par défaut déjà installé, et c'est généralement le thème de cette année. Nous sommes donc en 2024, et le thème est donc 2024, et c'est le thème actif. L'année dernière, c'était en 2023. L'année précédente, c'était en 2022. Donc, tout d'abord, permettez-moi simplement de supprimer ceci. Ensuite, je supprimerai également 2023. Il ne nous reste plus qu'à 2024. Mais nous voulons utiliser Astra. Je vais donc les ajouter. Ensuite, j'irai sur Astra et je l'installerai. Nous y voilà. Permettez-moi donc de cliquer sur Activer. Et nous y voilà. Astra est donc désormais le thème actif de notre site Web, et 2024 est le thème de secours Donc, au cas où, pour une raison quelconque, Astra se casserait, elle cesserait de fonctionner comme prévu Le site Web reprendra le thème 2024. C'est donc toujours une bonne idée de laisser un thème de secours par défaut sur votre site Web Et en gros, c'est comment installer un thème Were Press. Dans la leçon suivante, allons-y et commençons par la création proprement dite du site Web. Alors je te verrai dans quelques minutes. N'allez pas trop loin. 8. Ajouter le logo: R. Et bon retour. Il est donc temps de créer la barre de navigation ou ce que nous appelons la section d'en-tête Permettez-moi simplement de passer au site Web de référence. Voici l'en-tête du site Web. La première chose que nous allons faire est d'ajouter le logo. Mais pour créer l'en-tête lui-même, nous allons utiliser un plugin spécial qui est un ajout à Elementor et qui s'appelle Elements Kit Elementor add Elementor et qui s'appelle Elements Kit Elementor Alors allons-y. Passons aux plugins, ajoutons-en de nouveaux. Et dans le champ de recherche, cherchons Elementor Et nous y voilà. Où se trouve le kit Elements. Oui, juste ici. Alors installez-le maintenant. Et allons-y et activons-le. Nous y voilà. Alors maintenant, il est installé. Alors maintenant, pour créer un en-tête, passons le curseur sur le kit d'éléments et choisissons le pied de page d'en-tête Nous allons maintenant devoir passer par cet assistant pour les kits d'éléments, juste pour nous assurer que certains de ces widgets sont disponibles dans le front-end de notre éditeur par défaut, car si nous optons pour les paramètres de base, certains des widgets ne seront pas activés par défaut, ils ne seront donc pas disponibles dans l'éditeur. J'aime donc utiliser le mode avancé. Et si je le réactive, je pense que l'un d'entre eux s'est allumé. Permettez-moi de revenir à l'essentiel. Regardez le générateur de widgets. Maintenant, il est activé, tout comme beaucoup d'autres qui étaient désactivés dans le réglage de base. Étape suivante. Prochaine étape, prochaine étape. Enfin, le kit Now Elements est configuré et prêt à être utilisé dans le front-end. Passons donc au début du pied de page. C'est ici que nous sommes censés voir une liste de tous les en-têtes et pieds que nous avons créés pour notre Débarrassons-nous simplement de ces publicités. Disons maintenant en ajouter un nouveau. Donnons-lui un nom. En-tête et le type est en-tête. Lors de la création, le poder sélectionnera le pied de page, et nous voulons qu'il soit disponible sur l'ensemble du site Web Ces autres ne sont disponibles qu'avec la version pro du plugin. Maintenant, activons-le. Vous pouvez désactiver votre tête l'ensemble de votre section d' en-tête lorsque vous effectuez une maintenance sur l'en-tête et que vous ne voulez pas que les gens puissent le voir Mais maintenant, nous voulons qu'il soit actif. Maintenant, nous pouvons enregistrer les modifications et elles seront répertoriées ici, mais nous pouvons également accéder directement à la modification du contenu, et Elementor l'enregistrera automatiquement Nous le trouverons ici la prochaine fois. Mais maintenant, en cliquant sur Modifier le contenu, vous serez redirigé vers le front-end où nous pouvons commencer à créer l'en-tête. Si je réduis tout ici, tous ces panneaux, comme je l'ai mentionné lors de la visite élémentaire, chaque fois que nous ajouterons un module lié aux éléments , il sera répertorié Nous voici donc en bas de page d'en-tête du kit Elements et du kit Elements Nous pouvons donc obtenir ici tous les éléments dont nous avons besoin pour créer cette section d'en-tête. Donc, l'un des éléments que nous allons obtenir avec cela, et je l'ai mentionné, nous allons être en mesure d' obtenir des éléments pour lesquels nous aurions autrement besoin de payer pour être utilisés dans Elementor Pro est le menu de navigation du kit Elements, car si nous tapons ici, NV Vous verrez que nous avons le menu NAV. C'est ce que nous obtenons avec Elementor Pro. Ce n'est donc pas disponible pour nous avec une version gratuite d'Elementor, mais le kit Elements NAV est disponible Commençons donc par le logo. Je vais donc cliquer sur Plus. Et n'oubliez pas que nous l'avons mentionné précédemment, Elementor n'avait pas cette option de grille, mais maintenant c'est le cas Et c'est une bonne chose, car chaque plug-in doit être continuellement mis à jour et amélioré. Et Elementor est l'un des plugins les plus récents et les plus améliorés du marché C'est pourquoi il est si populaire. Chaque nouvelle semaine, ils ont quelque chose de nouveau, quelque chose de génial à ajouter à Elementor Grid est donc la nouveauté. Les mois précédents, nous utilisions Flexbox. Donc, si je clique sur Flexbox, nous aurons ces options Si vous avez suivi mon cours précédent, vous connaissez déjà ces structures de conteneurs. Vous pouvez donc revenir en arrière et sélectionner la grille. Et maintenant, nous avons ces nouvelles structures avec lesquelles je n'ai jamais joué. Je vais probablement aborder les grilles dans le prochain cours que je publierai, mais dans ce cours, nous n' utiliserons que les structures flexbox Gardez donc cela à l'esprit. Et maintenant, pour commencer, parce que notre en-tête comporte trois sections. Trois colonnes, une, deux, trois. Ce sont trois conteneurs. Allons-y avec cette structure. Je vais donc cliquer dessus, et nous avons maintenant ces trois conteneurs. Dans le premier conteneur, allons-y et cliquons sur le signe plus. Et ici, je vais juste chercher, en fait, laissez-moi résumer ces choses et ouvrir Basic. Et maintenant, allons-y sélectionnons l'image et déposez-la là. C'est un élément d'image. Et maintenant, nous pouvons continuer et sélectionner notre logo. Maintenant, je n'ai pas encore d'images car il s'agit d'une nouvelle installation. Je peux donc sélectionner des fichiers. Et j'avais préparé ce dossier qui contient toutes les images que j'ai utilisées sur le site de référence, et je vais le mettre à disposition sous ce lecteur vidéo. Vérifiez donc sous l'onglet projets et ressources. Vous trouverez le lien de téléchargement ici. Si tu veux utiliser mes images, mais tu peux aussi utiliser les tiennes. Je vais donc sélectionner le logo. Et voilà, cliquez sur Sélectionner, et maintenant nous avons notre logo. Mets-le à jour. Et prévisualisons les modifications, et voici comment ajouter le logo. Donc, dans la leçon suivante, allons-y et ajoutons un élément NV Cet élément est composé d' objets. À bientôt. 9. Ajouter un élément de navigation: R, bon retour. Maintenant que nous avons ajouté le logo de notre site Web, il est temps d'ajouter le menu NAV. Pour en revenir, passons à notre éditeur, et bien sûr, maintenant, je vais taper NV et nous allons faire glisser l'élément de menu Elements Kit NAV sur cette étape Et une fois que nous l'avons déposé là, c'est maintenant l'élément actif. Alors maintenant, la première option dans les paramètres du menu de contenu est de sélectionner le menu. Lorsque nous cliquons sur ce menu déroulant, nous sommes censés voir une liste des menus que nous avons créés dans le tableau de bord. Mais maintenant, nous n'avons plus de menu, ce qui signifie que nous devons le créer. Donc, commençons par le mettre à jour. Et je voudrais fermer le name chip et l'onglet Softacular. Il ne nous reste donc plus qu'à ça. Et je veux cliquer sur ce menu de hamburgers, puis accéder au tableau de bord. Et nous y voilà. Laisse-moi juste fermer ces choses. Même ça. Nous voulons maintenant créer un menu. Passons donc au menu d'apparence. Et nous voilà, comme vous pouvez le constater, créer votre premier menu ci-dessous. Nous pouvons donc aller de l'avant et donner un nom à notre menu. Ou disons simplement le menu principal. Et maintenant, une chose que vous remarquerez ici est de donner un nom à votre menu, puis de cliquer sur Créer un menu. Nous allons donc cliquer sur Créer un menu. Mais avant cela, remarquez que nous avons maintenant ajouté des éléments de menu, et que cette section est graduée, et c'est parce que nous devons créer le menu Permettez-moi donc de cliquer sur Menu principal pour créer le menu principal, notre menu principal, puis créer un menu. Et maintenant, cette zone est active, qui signifie que nous pouvons désormais ajouter des éléments de menu à notre menu, comme indiqué, ajouter des éléments de menu depuis la colonne de gauche, cette colonne. Donc, si je le réduis, un élément de menu peut être une page Web, un article de blog, un lien personnalisé, une catégorie, tout ce que vous voulez. Mais dans ce cas, nous allons utiliser les pages, les pages que nous avons créées. Mais nous n'avons pas encore de pages. Cela signifie donc que nous devons créer un tas de pages, car si nous passons à notre site Web de référence, ce sont des pages Web. Si nous cliquons sur des articles, nous serons redirigés vers la page des articles. Laisse-moi juste cliquer dessus. Nous y voilà. Voici donc la page d'archive des articles. Nous voulons donc essentiellement créer des pages Web. Maintenant que nous avons créé notre menu et qu'il est enregistré, nous pouvons accéder aux pages en toute sécurité, survoler les pages avec le pointeur de la souris Cliquez avec le bouton droit sur Ajouter un nouveau. Ouvrez le lien dans les pages Nouvel onglet, cliquez avec le bouton droit sur Ouvrir le lien dans un nouvel onglet. Pages, un nouveau stylo Lien dans un nouvel onglet. Nous avons donc maintenant le Laissez-moi clore cela. Nous avons maintenant ces trois pages que nous sommes sur le point de créer. Créons les articles, les vidéos et les contacts de la page d'accueil. Je vais juste publier. Et maintenant c'est publié. Créons-en un autre, cliquez avec le bouton droit de la souris sur Ajouter nouveau. C'est facultatif. Si vous n'avez pas de vidéos à partager. C'est bon. Maintenant, si nous revenons ici et que nous cliquons sur les pages ou sur toutes les pages, nous allons maintenant voir toutes les pages que nous avons créées. Maintenant, n'oubliez pas que lorsque nous avons installé WordPress, il était livré avec quelques pages préinstallées, comme la page d'exemple et la page de projet de politique de confidentialité. Il s'agit alors de la page de l'élément qui a été générée lors de l'installation de l'élément. Je vais donc sélectionner ça. Ces trois personnes modifient ce menu déroulant, le mettent dans la corbeille, puis l'appliquent. Voici les quatre pages que nous avons créées. Maintenant que nous pouvons revenir au menu d'apparence, puisque nous avons déjà créé notre menu, nous pouvons maintenant ajouter ces éléments au menu. Sélectionnez-les tous, puis ajoutez-les au menu. Allons-y. Nous pouvons maintenant les faire glisser pour les réorganiser. La vidéo vient après le contact. Non. Le contact est le dernier élément. Enregistrez ensuite le menu. Nous pouvons maintenant procéder et fermer tout cela maintenant, revenant au pied de page d'en-tête du kit Elements Voici notre en-tête. Nous pouvons cliquer sur Modifier avec Elementor, mais je souhaite ouvrir le lien dans un nouvel onglet afin que nous puissions laisser le tableau de bord intact Passons donc à l'éditeur d'en-têtes. Et nous y voilà. C' est là que nous nous sommes arrêtés. Je vais sélectionner l'élément NAV. Et maintenant, dans ce menu déroulant, voici le menu principal. Sélectionnons-le, et maintenant il affiche les éléments du menu. Alignons-le comme ça sur la droite. Et voici comment ajouter un menu NV. Maintenant, nous allons le styliser. Ne t'inquiète pas. Comme vous pouvez le constater, notre site de référence possède une belle zone nV bien alignée Mais ça a l'air un peu bizarre. Nous allons nous occuper de ça. Mais c'est ainsi que l'on peut ajouter l'élément n à notre site Web. Dans la leçon suivante, ajoutons ce bouton ici même qui fait apparaître cette barre latérale avec du contenu supplémentaire sur le côté. C'est ce qu'on appelle l' élément off Canvas. À bientôt. 10. Button hors toile: Il est donc temps d'ajouter ce bouton ici qui fait apparaître cette barre latérale ou cette barre latérale hors Canvas contenant des articles supplémentaires. Revenons donc à notre poste de travail. Voilà, nous allons utiliser un autre plugin lié à Elementor Revenons donc ici, les plugins en ajoutent de nouveaux. Supposons que Elementor Royal ajoute des ajouts et des modèles élémentaires. Je vais donc l'installer maintenant. Il compte 300 000 installations actives, très populaires. Et je vais l'activer. Donc, ignorons cela. Et maintenant, nous y voilà. Il s'agit de modèles. Passons donc au front-end et mettons à jour cet éditeur. Maintenant, actualisons cette page. C'est bon. Donc, en écrasant tout ici, Here we are Royal ajoute et Royal ajoute des salaires majorés. Ils sont premium. Nous ne pouvons pas les avoir. Mais je voulais au moins vous montrer que nous y sommes. Nous avons tellement d' éléments gratuits à utiliser ici, et l'un d'eux est le off Canvas. Maintenant, pour accélérer votre travail, tapez simplement du contenu Canvas, nous y sommes. Je vais le glisser-déposer ici. Et nous y voilà. Alors maintenant, qu'est-ce que cela signifie ? Article populaire. Ainsi, même s'il est toujours sélectionné, c'est l'élément actif ici. Nous pouvons lui donner un nom différent juste sous le titre du bouton de contenu. Disons les articles en vedette. Je le mets à jour, et nous pouvons l' aligner sur la droite. Donc, juste en dessous, nous avons une ligne, à droite, et maintenant elle sera poussée jusqu'à cette fin. Nous y voilà. Voici comment ajouter le hors-canevas. Bien sûr, maintenant, lorsque nous cliquons dessus, une barre latérale vide apparaît, et nous allons la remplir avec le contenu que nous voulons Mais nous le ferons dans une leçon ultérieure lorsque nous aurons des articles à afficher. Mais vous pouvez afficher tout ce que vous voulez, pas seulement des articles. Donc, pour l'instant, nous voulions uniquement afficher ce bouton afin d'avoir un en-tête complet. Dans la leçon suivante, passons au style de l'en-tête. Je te verrai donc bientôt. 11. Style de l'en-tête: Il est donc temps de styliser la section d'en-tête, car à l'heure actuelle, chaque élément semble un peu étrange. Ainsi, lorsque nous ajoutons un conteneur, une section ou une colonne, il est livré avec un rembourrage et des marges par défaut Chaque élément est doté d'un rembourrage et de marges par défaut, et nous pouvons les ajuster Donc tout d'abord, si nous sélectionnons le kit élément par élément, comme vous pouvez le voir ci-dessous, il y a une marge énorme et là-haut. Donc, si nous passons à Avancé après avoir sélectionné cette option avancée, séparons cela et cela. Et maintenant, réduisons la marge inférieure jusqu'à ce point, et réduisons également la marge supérieure jusqu'à ce point. Disons peut-être 4040, comme ça. Maintenant, une chose à propos des conteneurs est que vous pouvez aligner les éléments qui se trouvent à l'intérieur. Donc, si nous sélectionnons ce conteneur et sa mise en page, nous pouvons justifier le contenu et lui donner une orientation. Je vais vous montrer où elles s'appliquent. Mais pour l'instant, examinons la justification du contenu. Comme vous pouvez le voir ici, nous avons cette icône dont la ligne supérieure est plus longue pour indiquer que l'élément est aligné en haut ou justifié en haut. Sur cette troisième icône, la ligne la plus longue est en bas pour indiquer que les éléments à l'intérieur de ce conteneur, le conteneur sélectionné se trouveront en bas. Donc, si je le sélectionne, tout ce qui se trouve à l'intérieur sera poussé vers le bas, et nous avons celui-ci qui montre le centre. Donc, si nous cliquons dessus, tout sera aligné au centre de l'axe vertical. C'est donc ce que nous voulions. Faisons de même pour cela, sélectionnez ce conteneur contenant cet élément de canevas. Allons le justifier et l' aligner au milieu. Faisons de même pour le logo, signez-le au milieu, mais vous ne remarquerez aucun changement car il occupe 100 % de la hauteur et de la largeur Alors, on y va. Si je dis mettre à jour et prévisualiser les modifications. Maintenant, tout est correctement aligné. Maintenant, alors que nous passons à la section des héros et aux autres sections, nous allons apporter des modifications à cette section d'en-tête, car n'oubliez pas que sur notre site Web de référence, lorsque nous commençons à faire cette section d'en-tête, car n'oubliez pas que sur notre site Web de référence, défiler la page, elle doit être réduite Tout d'abord, comme vous l'avez remarqué, il rétrécit et doit également rester collant sur le dessus. Nous verrons donc comment procéder dans les prochaines leçons. Pour l'instant, nous voulions simplement nous assurer que tout était correctement aligné. Donc c'est tout pour le moment. Mais avant de partir, vous remarquerez que nous n' avons pas un espace aussi grand que sur notre site Web actuel Supprimons donc cela. Je veux donc sélectionner ce conteneur qui contient tout, et je veux passer au mode avancé et supprimer le rembourrage par défaut, et maintenant il réduit tout. Parce que, comme je l'ai dit, chaque élément que vous ajoutez est assorti d'un rembourrage et d'une marge par défaut Mettons-le donc à jour. Et passons en revue les modifications. Allons-y. C'est donc ce que nous voulions. Voici donc comment ajouter l'en-tête. Dans la leçon suivante, allons-y et commençons à travailler sur la section des héros. Donc, si nous rentrons chez nous, voici la section des héros. Voyons comment créer cette pièce. Je te verrai donc bientôt. N'allez pas loin. 12. Définir la page d'accueil WP: Il est maintenant temps de travailler sur la page d'accueil, et nous allons commencer par cette section consacrée aux héros ici. Il y a de jolis motifs en arrière-plan, puis du texte d'en-tête et une courte description. Maintenant, alors que nous sommes toujours sur le site de référence, si nous cliquons sur le blog d'action ou sur le logo de notre site Web, nous sommes redirigés vers la page d'accueil. Et voici le domaine de notre page d'accueil, votre site Web. Maintenant, chaque fois que des personnes entrent dans votre domaine .com, elles doivent être redirigées vers la page d'accueil que vous avez sélectionnée Mais lorsque nous revenons sur notre site Web en ce moment, nous n'avons pas notre propre page d'accueil définie. Il existe une page d'accueil par défaut définie par WordPress lorsque vous l'installez. Laisse-moi te montrer. Donc, si je retourne dans notre éditeur, sélectionne ce logo, nous pouvons en faire un lien. Je vais donc sélectionner une URL personnalisée et nous pouvons saisir l'URL de notre page d'accueil. Ce sera donc wordpress evthing.com. Et dans votre cas, il s' agira d'un site web.com. Mettez-le à jour et prévisualisons les modifications. Maintenant, lorsque nous passons le curseur dessus, remarquez que notre main change pour indiquer que vous pouvez cliquer dessus Et si nous cliquons dessus, cela nous mènera à la page d'accueil par défaut de Hello World générée par W press lorsque vous l'installez. Mais ce n'est pas ce que nous voulons. Nous travaillons sur une page d'accueil différente que nous allons créer avec Elementor, nous devons donc la configurer en revenir à notre tableau de bord, passons aux pages. N'oubliez pas que nous avons créé notre propre page d'accueil, et c'est la page d'accueil que nous voulons définir comme page d'accueil réelle pointée par ce nom de domaine. Donc, en revenant ici pour le configurer, nous passons à la lecture des paramètres, supprimons ceci. Et dans les paramètres de lecture, votre page d'accueil affiche une page statique, et nous pouvons la sélectionner ici, page d'accueil. Changements de vente. Maintenant, si je reviens ici et que je rafraîchis cette page, nous allons prévisualiser les modifications. Si je clique sur le logo ici, serai redirigé vers la page d' accueil que nous avons créée. Il s'agit de la page d'accueil précédente, et nous ne l'utilisons plus. Maintenant que nous avons notre propre page d'accueil, nous pouvons maintenant la créer avec Elementor et c'est ce que nous allons faire dans les prochaines leçons Je te verrai donc bientôt. N'allez pas trop loin. 13. Paramètres de base de page Astra: R, bon retour. Maintenant que nous avons défini notre page d'accueil, notre nom de domaine pointe désormais vers la page que nous allons créer avec Elementor Il est temps de le modifier et de le créer avec Elementor Mais avant cela, nous devons effectuer quelques configurations dans le back-end et ce seront paramètres Astra car le thème est Astra et quelques paramètres Wpress Donc, pour accéder à l'éditeur principal, nous pouvons accéder à la page d'édition. Cliquez dessus. Et maintenant, nous y voilà. Ou alors que nous sommes dans le tableau de bord, nous pouvons accéder aux pages publiées. Vous pouvez cliquer sur publier ou simplement cliquer sur les pages pour voir les pages publiées Voici la page d'accueil, cliquez sur Modifier. Et nous sommes au même endroit. Alors permettez-moi de cliquer sur retour, et maintenant nous nous occupons de celui-ci ici. Maintenant, avant de continuer, passons à cet éditeur d'en-têtes. Maintenant, nous en avons terminé avec l'en-tête pour le moment, nous n'avons donc pas besoin de cet éditeur car ce n'est pas là que nous allons créer la page d'accueil. C'était juste l'éditeur pour l'en-tête uniquement. Je peux donc simplement fermer ceci et cela. Alors maintenant, il ne nous reste plus qu'à ça. N'oubliez donc pas que nous avons installé Astra parce que c'est notre thème. Il comporte quelques configurations que nous devons définir. Donc, en entrant ici, vous verrez que nous avons cette icône. Si je le sélectionne, sous le conteneur, nous devons sélectionner la pleine largeur. Cela signifie que notre site Web ou page Web s'étendra d'un bord à l'autre, comme vous pouvez le voir sur le motif d'arrière-plan. Effacez ça. Passons à la barre latérale. Nous ne voulons pas qu'il y ait de barres latérales car nous allons construire notre propre barre latérale. Nous n'allons pas utiliser les barres latérales par défaut. Donc, aucune barre latérale ne l'écrase. Et ne vous inquiétez pas pour ces paramètres ici. Le style de conteneur ne s'applique que lorsque la mise en page est définie normale ou étroite, étroite ou normale, mais que nous avons sélectionné la pleine largeur. Nous n'avons donc pas besoin de nous en mêler. Le même cas s'applique à la barre latérale. Comme nous n'avons sélectionné aucune barre latérale, nous n'avons pas à nous inquiéter à ce sujet. Effacez ça. Ensuite, nous devons désactiver ces trois éléments. Maintenant, avant de les désactiver, permettez-moi de le mettre à jour. Et voyons la page, cliquez avec le bouton droit de la souris pour ouvrir le lien dans un nouvel onglet. Maintenant que nous avons fait en sorte que la page soit pleine largeur sous le conteneur, pleine largeur, remarquez que le titre de la page d'accueil a été déplacé vers le bord. Une autre chose que vous remarquerez ici, c'est que cet Astrag est de retour ici, nous devons tous les désactiver car nous allons créer nos propres en-têtes et toutes ces Donc, si je désactive cette mise à jour, reviens ici et je rafraîchis la page. Maintenant, il n'y a plus de pied. Il s'agit de l'en-tête. Allons-y et désactivons-le. Mets-le à jour. Retournez ici, rafraîchissez-vous. Oh, attendez. Il s'agit de la zone des bannières. Permettez-moi de désactiver cette mise à jour. Rafraîchissez ça. Nous y voilà. Nous avons donc maintenant une toile blanche sur laquelle travailler pendant que nous construisons notre page. Pour en revenir, voyons ce que nous devons définir d'autre. Je pense que nous avons tout prévu, mais nous devons également définir un autre paramètre ici, à savoir le modèle. Mais il s'agit d'un paramètre WordPress, pas d'un paramètre Astra, mais il est crucial Donc, modèle, nous devons utiliser l'élément en pleine largeur. Mettez à jour que cette option est disponible lorsque vous installez Elementor Si vous n'avez pas installé Elementor, vous n'aurez pas cette option de modèle. Nous y voilà. Maintenant, revenez ici, contrôlez R pour rafraîchir la page, et nous avons maintenant toutes les configurations de base de l'ensemble de thèmes. Nous sommes maintenant prêts à commencer à le construire avec Elementor, et nous allons faire de même lorsque nous travaillerons sur toutes ces autres pages Dans la leçon suivante, nous allons voir comment créer cette section consacrée aux héros. Je te verrai bientôt. 14. Page d'accueil Section des héros: Il est donc temps de commencer à travailler sur la section des héros. Revenons donc à notre poste de travail. Laisse-moi juste fermer ça. Et pendant que nous sommes encore dans l'éditeur principal de la page d'accueil, je vais cliquer sur Modifier avec Elementor. Et nous y voilà. Voici l'éditeur. Et bien sûr, nous ne pouvons plus modifier l' en-tête car ce n'est pas l'éditeur que nous avons utilisé pour créer l'en-tête. Nous avons construit l'en-tête séparément. Nous sommes donc en train de créer la page. Je vais donc cliquer dessus pour ajouter une boîte flexible et nous allons suivre cette direction de structure vers le bas. Je vais donc sélectionner cela parce que, comme vous pouvez le voir ici, tout va mal. Nous avons une icône, puis en dessous, nous avons l'en-tête, et en dessous, nous l'avons. Je vais donc sélectionner ça. Maintenant, à l'intérieur, je vais cliquer sur le signe plus. Ensuite, je vais taper icône, faire glisser cet élément d'icône ici, et lorsque nous le déposerons, c'est toujours l'élément actif ici. Nous pouvons le changer. Je voulais taper read. Vous pouvez peut-être sélectionner quelque chose comme ça, mais je veux que le texte représente les articles. Je vais donc sélectionner ça. Insérez, et c'est parti. Ensuite, sélectionnons un titre. Donc, pour ramener des éléments, souvenez-vous que nous disons que vous pouvez les sélectionner, et maintenant je vais cliquer sur un titre. Je vais également revenir en arrière et sélectionner un éditeur de texte, c'est-à-dire un paragraphe. Nous y voilà. Tout d'abord, je vais sélectionner « aller au style », Allige » au centre Sélectionnez-le, passez au style, alignez-le au centre. Maintenant, pour en revenir à ce contenu, nous voulons le remplacer par un H car chaque page doit avoir un élément H. Un élément H un est bon pour le référencement, car un élément H un sur chaque page indique moteurs de recherche le sujet de cette page. C'est comme un résumé de toute cette page. Quel est le sujet de cette page ? Ainsi, si vous avez plusieurs pages Web, chaque page ayant son propre titre en H, spécifiant le sujet de chaque page, les moteurs de recherche peuvent avoir une idée précise de ce qu' est votre site Web et recommander votre site Web dans les résultats de recherche. En d'autres termes, avoir un H sur chaque page est bon pour le référencement de votre site Web. Donc, pendant que cette option est sélectionnée, je vais aller ici et sélectionner cette copie. Entrez dans cette boîte et collez-la ici. Je ne le collerai pas ici parce que lorsque je le collerai ici, il sera livré avec toutes ses préformations. Donc, si je le colle ici, comme vous pouvez le voir, il est préformé et c'est ce que je fais C'est donc toujours une bonne idée de coller vos informations ici. Mais si vous souhaitez le modifier, vous pouvez cliquer dessus et le taper dans l'élément lui-même. Revenez donc au style, alignez-le au centre. Je souhaite sélectionner ce texte. Carpe. Sélectionnez le contenu de cet élément de texte. Sélectionnez toutes ces suppressions. Ensuite, Control Shift V, pas Control V. Control Shift V, nous allons le coller sans aucune déformation Maintenant, revenons à cela et passons à la couleur du texte. Maintenant, souvenez-vous que nous avions ce dossier. Je vous ai dit que vous pouvez trouver ci-dessous ce lecteur vidéo dans l'onglet projets et ressources. Je vais l'ouvrir. Et à l'intérieur, vous trouverez ces codes couleurs que j'ai utilisés pour le site web original. Je vais choisir cet exemplaire bleu marine. Et pour cette couleur, souvenez-vous que je l'ai sélectionnée, suis passée au style, au titre, à la couleur du texte. Je vais le coller ici, et maintenant c'est de cette couleur. Maintenant, je veux aussi remplacer cette police de typographie Mont Monat, mais je veux augmenter le poids à 900, ce qui est noir, et je veux aussi augmenter la taille pour peut-être y aller quelque part Mettez ça à jour. Passons en revue les modifications. Et nous y voilà. Mais maintenant, bien sûr, nous devons ajouter une marge de manœuvre ici. Laissez-moi donc sélectionner le conteneur qui contient tout. Et maintenant, nous voulons passer à la version avancée et lui donner un peu de rembourrage en haut et en bas N'oubliez pas qu'il possède un rembourrage par défaut. Donc, quand je le casserai, le rembourrage sera retiré sur les côtés et sur le dessus Mais ce que nous voulons faire, c'est aller en haut et dire 50 ou disons 100. Et pour le bas, pas de problème. Nous pouvons simplement laisser ça. En fait, disons huit jusqu'ici. Maintenant que cette option est toujours sélectionnée, je veux que nous ajoutions ce motif d'arrière-plan. Donc, une fois sélectionné, je vais passer au style du type d'arrière-plan. Je vais sélectionner ce classique. Cela révélera plus de paramètres. Et ici, nous pouvons ajouter une image. Je vais donc télécharger des fichiers, sélectionner les fichiers à l'intérieur ici. J'ai oublié de le mettre ici. Alors laissez-moi passer aux actifs, FreeP. Où l'ai-je mis ? Nous y voilà donc. Je l'ai trouvée. Retournez aux actifs, aux actifs finaux, collez-les dedans, et maintenant c'est l'arrière-plan de la section des héros. Je vais donc double-cliquer dessus, sélectionner, et maintenant il apparaît. Maintenant, laissez-moi fermer ceci. Nous voulons passer à la position. Je veux qu'il soit au centre comme ça. J'ai envie de répéter, de ne pas répéter. Et pour la taille de l'écran, essayons la couverture. couverture semble bonne. Qu'en est-il de Contain ? Non, c'est censé être une couverture. Mettez ça à jour. Et permettez-moi d'augmenter légèrement le rembourrage sur le bas Disons donc 50 comme ça, mettons à jour et prévisualisons les modifications. Nous y voilà. Notre section de héros est donc prête. Ça a l'air génial. En fait, je l'aime plus que le site de référence. Oui, ça a l'air génial. Voilà comment ajouter la section des héros. Dans la leçon suivante, commençons à travailler sur cette barre latérale, la barre latérale de l'auteur Je te verrai bientôt. 15. Barre d'accueil - À propos de moi: Il est donc temps de créer cette barre latérale. Pour en revenir à notre éditeur, nous y voilà. Retournons ici. Maintenant, vous remarquerez que nous avons deux conteneurs contenant ces deux ensembles de contenu. Donc, le premier conteneur est celui-ci, et c'est l'autre conteneur. Il s'agit donc d'un conteneur à double colonne. Laissez-moi juste vous montrer comment entrer ici, sélectionnons Flexbox. Cette structure est comme ça. Maintenant, ce site peut occuper peut-être 40 %. Assurez-vous qu'il s'agit d'un pourcentage, non de ces autres unités, 40 %, et cela devrait occuper 60 % pour faire 100 %. Juste comme ça. Alors maintenant, ici, nous pouvons ajouter un conteneur. Il s'agit donc d'un contenant dans un autre contenant, mais celui-ci est vide. C'est ici que nous allons placer cette grille de publication. Donc, en revenant ici, nous pouvons tout d'abord donner au conteneur une colonne de fond, de cette couleur. Et cette couleur est là, copie d'arrière-plan de la barre latérale parce que c'est la barre latérale. Ainsi, tant que cette option est toujours sélectionnée, le conteneur intérieur passe au style, au type d'arrière-plan et à la couleur. Passons à cela, et maintenant il a changé de couleur. Nous allons également sélectionner le bord de la barre latérale. Copiez-le car, comme vous pouvez le voir, il a une couleur de bordure. Donc, pour y revenir, je vais passer au type de bordure par défaut, solide, et maintenant cela révélera la couleur de la bordure Je vais donc le coller là-dedans. Bien sûr, si nous mettons à jour et examinons les modifications, la bordure est trop épaisse. Alors allons-y et disons que nous devions être un. Mettez-le à jour, et prévisualisons les modifications, comme ça. Mais vous pouvez le rendre aussi épais que vous le souhaitez. Une autre chose, c'est qu'il a ces angles vifs. Nous voulons les rendre fluides, comme ici. Donc, pour en revenir à notre éditeur, border radius, donnons-lui 20. Mettez-le à jour et prévisualisons les modifications. Allons-y. Maintenant, si nous ajoutons simplement un titre ici. Laisse-moi le déposer là-dedans. Ajoutons également quelques textes. Laisse-moi juste prendre ce texte. Copie. Sélectionnez les textes, cliquez avec le bouton droit de la souris sur Coller, mettez à jour. Prévisualisez les modifications. Il a ce coin arrondi. Mais la prochaine chose que nous voulons faire est d'aller sur le site Web de référence. Tout d'abord, permettez-moi de copier ce texte. Sélectionnez ceci. Supprimez-le, puis Control Shift V, collez-le dedans. Mais maintenant, pour ce qui est du style, je veux qu'il soit aligné sur la gauche. Revenons également ici à mon sujet. Laissez-moi le copier. Sélectionnez-le alors ici chez moi. Qu'est-ce qu'on a d'autre ? Nous avons cette image de l'auteur son nom et son titre. Donc, ci-dessous, ce que nous voulons faire, c'est ajouter un conteneur. Je vais donc déposer un conteneur ici. Et maintenant, souvenez-vous qu' une chose à propos des conteneurs, c'est qu'ils peuvent contenir d'autres conteneurs, celui-ci se trouve à l'intérieur de celui-ci, qui est à l'intérieur de celui-ci. Donc, ici, nous pouvons avoir deux autres conteneurs. Une pour l'image et une autre pour le texte, le nom. OK. Je vais le déposer juste en dessous. Nous avons donc maintenant ces deux conteneurs à l'intérieur. Maintenant, si je sélectionne le conteneur extérieur qui contient ces deux nouveaux conteneurs, ce conteneur, et que nous passons au sens de la mise en page. N'oubliez pas que j'ai dit que nous en parlerons. Nous avons déjà vu ce que fait la justification. direction signifie que vous pouvez passer de gauche à droite de haut en bas, de gauche à droite ou à l'horizontale. Cela signifie qu'ils sont désormais côte à côte. Nous pouvons également les faire passer à la verticale. C'est vers le bas. Ce que nous voulons, c'est côte à côte. Juste comme ça. Maintenant, nous pouvons le faire glisser pour le réduire ici, nous pouvons mettre une image, juste comme ça. Ici, tout d'abord, permettez-moi de sélectionner ce texte pour le styliser. Laisse-moi choisir cette couleur bleu marine. Copiez ce style de texte, coloriez-le. Ensuite, je voudrais également aborder la typographie et dire, avec 900, mais il faut que ce soit Montserrat Juste comme ça. Mais maintenant, faisons-en peut-être de cette taille. Voyons voir. Oui, il n'est pas si grand. Peut-être taille 20. Maintenant, vous remarquerez que tout est trop près du bord. Mets-le à jour. Prévisualisez les modifications. Tout est trop près du bord. Ce que nous voulons faire, c'est sélectionner le conteneur qui les contient, la barre latérale maintenant, le rembourrage avancé Ne rompons pas ce lien. Donc, tout ce que nous tapons dans une cellule est appliqué au reste, et donnons-lui un rembourrage de 3030 Mets-le à jour. En fait, cela doit occuper Passons au conteneur le plus extérieur qui contient le conteneur à barre latérale, et faisons-en et faisons-en Cela signifie qu'ils devraient être de 70 %. Mets-le à jour. Et maintenant, cela ressemble plus à une barre latérale, juste comme ça. Alors maintenant, allons-y et ajoutons une image ici. Sélection de l'élément d'image. Je vais sélectionner cela pour accéder à AppLodFiles. Sélectionnez des images. Maintenant, je dois aller à Donc j'ai trouvé mon image. Allons-y. Sélectionnez, et maintenant c'est mon image. Permettez-moi de le dupliquer. Maintenant, vous remarquerez ici je n'ai pas les poignées d' édition que j'ai mentionnées lors de la visite guidée de l'espace de travail. Je veux les activer. Donc, en allant ici, dans les préférences de l'utilisateur, activez les poignées d'édition. Sélectionnez-le. Maintenant, je peux le dupliquer, glisser-déposer dedans, et cela deviendra mon nom. Copiez ça. Collez-le dedans, puis expert en productivité. C'est ton titre. Je veux le dupliquer et le coller dedans, mais je veux le rendre très petit, donc typographie Maintenant, vous remarquerez que l'espacement entre les deux est trop grand. Donc, si je le sélectionne et que je passe aux espaces et à la mise en page, ce conteneur contenant les deux espaces de mise en page ci-dessous le justifie, nous pouvons supprimer cet écart par défaut de 20. Alors faisons en sorte que ce soit peut-être cinq ou peut-être zéro. Nous n'avons donc pas tout cet écart. Bien que cette option soit sélectionnée, je souhaite également la réduire. Donc, juste comme ça, sélectionnez ceci. Maintenant, sélectionnez le conteneur qui les contient, et nous voulons justifier tout ce qui se trouve au centre verticalement de cette façon. Sélectionnez donc ceci. Allons trop loin et réduisons la marge inférieure. Nous les rapprochons donc. Mets-le à jour. Je souhaite sélectionner le conteneur qui les contient. Je veux passer en mode avancé et supprimer ce rembourrage pour rapprocher l'image de cette ligne invisible Permettez-moi maintenant de sélectionner ce conteneur avancé. Passons à la marge de gauche. Réduisons-le jusqu'à ce point. Mettez cela à jour. Passons en revue les modifications. Allons-y. Je pense que nous avons créé la barre latérale, mais créons cette police. Modifions légèrement la police. Je vais donc y retourner, sélectionner cette police, aller dans le style, Typographie, changer cela en Montserrat Permettez-moi également de sélectionner ceci. Changez-le en Montserrat. Entrez. Mais maintenant, vous remarquerez sur le site de référence c'est plus foncé et que c'est du bleu marine. Alors laisse-moi choisir cet exemplaire bleu marine. Retournez ici. Lorsque cette option est sélectionnée, je vais passer à la couleur du texte, coller, mais je veux y aller et la mettre à 600, semi-gras. Mets-le à jour. Je vais faire de même pour cela, sélectionnez ceci. Maintenant, je peux répéter les mêmes étapes ou je peux sélectionner ce texte en cliquant avec le bouton droit de la souris sur une copie. Sélectionnez, cliquez avec le bouton droit sur le style de collage. En gros, c'est ainsi que l'on crée la barre latérale. Dans la leçon suivante, nous allons voir comment créer les publications récentes. Barre latérale. Parce que nous devons ajouter ces articles récents, et il y a quelques points techniques que nous devons examiner. Je te verrai donc bientôt. 16. Barre latérale de la page d'accueil - Articles récents: Il est donc temps de travailler sur cette barre latérale des articles récents. En revenant ici, j'ai oublié de sélectionner ce texte et d'accéder à la marge avancée, supprimer ou de réduire la marge inférieure comme ça. Juste pour que nous ayons cet espace plus petit ici. Augmentons-le légèrement jusqu' à ce point, mettons-le à jour. Prévisualisez les modifications. Maintenant, l' espacement est uniforme par rapport au sommet. Nous y voilà. Ce que je dois faire, c'est le dupliquer juste en dessous, juste comme ça parce que ce que nous voulons faire, c'est le créer. Je vais sélectionner ces articles récents, les copier. Sélectionnez-le ici, collez-le et je le supprimerai. ne nous reste plus qu'à cela. Permettez-moi le supprimer également. Mettez ça à jour. Et maintenant, souvenez-vous que nous avons parlé des modules complémentaires élémentaires. N'oubliez pas que nous avons ajouté un kit d'éléments. Nous allons utiliser un élément du kit d' éléments pour ajouter ces articles récents. Donc, en revenant ici, je vais chercher une liste. Je vais juste taper liste, et nous y voilà. Liste des publications. Je vais donc le faire glisser et le déposer juste en dessous des articles récents. Permettez-moi de le forcer ci-dessous les articles récents. Très bien, laissez-moi juste le déposer ci-dessus. C'est un peu difficile de le déposer là-dedans. Ensuite, je vais le faire glisser et le mettre au-dessus comme ça. Maintenant que cette option est sélectionnée, je vais sélectionner les publications. Article de catégorie. Nous pouvons maintenant sélectionner les différentes catégories de publications que nous voulons afficher ici. Maintenant, nous n'avons pas encore de posts, pas encore d'articles. Nous allons donc laisser les choses comme ça parce que nous le ferons dans la section suivante. Mais pour l'instant, au moins nous l'avons ajouté, nous allons faire quelque chose à ce sujet prochainement. Donc, en gros, nous avons maintenant préparé l'emplacement qui contiendra le récent message dans la barre latérale. Dans la leçon suivante, allons-y et créons notre premier article de blog, alias, un article. À bientôt. 17. Créer un post: Il est donc temps de créer notre premier article. Et bien sûr, si nous revenons à notre site Web de référence, il s'agit d'un article unique. Ceci est un autre article, et ceci est un autre article. Alors laisse-moi voir. Laisse-moi ouvrir ça. Si nous l'ouvrons pour le lire, c'est parti. Voilà donc à quoi ça ressemble. Il contient cette image vedette. Ensuite, nous avons des barres latérales que nous avons empruntées à l'autre page. Nous allons nous en débarrasser. Nous avons le titre. Nous avons la date de publication et la catégorie à laquelle il appartient. Ensuite, nous avons son contenu. Ci-dessous, nous avons le nom de l' auteur et notre nourriture. Voyons donc comment créer cet article unique. C'est ce que nous appelons une image vedette, et nous allons voir comment la configurer tout de suite. Pour en revenir, revenons à notre tableau de bord. Et de la même manière que nous avons pu créer nos pages, nous pouvons également faire de même pour notre publication. Mais avant de créer une publication, allons voir toutes les publications que nous avons en cliquant dessus. Nous avons le post Hello World. Alors laisse-moi juste jeter ça. Nous n'en avons pas besoin. Maintenant, disons en ajouter un nouveau. De la même manière que nous avons créé une page, nous pouvons créer un article. Je vais donc lui donner le prénom. Permettez-moi d'emprunter ce nom, le pouvoir de prioriser. Nous y voilà. Nous devons définir le modèle par défaut sur l' élément ou sur toute la largeur. Ensuite, nous devons également accéder aux paramètres Astra pour définir la barre latérale complète, pas de barre latérale Et pour les éléments présents, nous devons tous les désactiver. Publiez-le et c'est parti. Maintenant, il est publié. Mais avant de quitter cet espace, nous devons revenir aux paramètres de la presse W et définir une image vedette. N'oubliez pas qu'il s'agit de notre image vedette et que si nous ne la définissons pas, vos publications n'auront pas d'image sur la page. Cette image n'apparaîtra pas. Définissez donc l'image en vedette. Je vais voir quelle image utiliser. Réveillez-vous. Je vais donc consulter notre dossier ici. Réveillez-vous et dites « définir l'image en vedette ». Nous y voilà. Maintenant, pour en revenir à notre site Web de référence, ce texte est ce que nous appelons un extrait. Si vous êtes écrivain ou si vous avez écrit, vous savez ce qu'est un extrait, et nous devons le fournir si nous voulons le voir affiché ici même à cet endroit. En fait, laissez-moi simplement le copier. Revenez ici, juste en dessous de l'image vedette. Allons-y et collons notre extrait. Mets-le à jour. Nous y voilà. Maintenant, voici comment créer un post ou un article sur we press et ajouter une image en vedette avec un extrait. Dans la leçon suivante, voyons comment l' afficher sur la page d'accueil ici. Je te verrai donc bientôt. 18. Afficher le message - Partie 1: Il est donc temps d'afficher notre article de blog sur la page d'accueil. Et bien sûr, si nous passons ici, nous voulons l'afficher comme ceci. Nous allons donc le faire avec un autre plugin génial lié à Elementor appelé Premium Adds for Elementor Revenons donc à notre presse de travail. Retournez au tableau de bord. Rentrons chez nous. Passons aux plugins, ajoutons-en de nouveaux. Et ici, je vais chercher Elementor. Allons-y. Nous voulons donc ajouter des modules complémentaires premium pour Elementor Alors installez maintenant, activez maintenant c'est activé. Donc, pour en revenir au front-end, si j'actualise ce poids, avant de l'actualiser, mettons-le à jour. Maintenant, actualisons la page. Et maintenant, si je réduis ces panneaux, nous y voilà. Nous avons des modules complémentaires premium. Donc, pour ce que nous voulons, je vais simplement taper blog. Et ce que nous voulons, c'est ce blog de PA Premium Adds Ons. Je vais donc le glisser-déposer dans cet espace. Et maintenant, bien sûr, nous n'avons qu'un seul article de blog dans notre liste d'articles. C'est juste ça, et c'est pourquoi c'est seulement ça qui est affiché. Mais plus nous ajouterons d'articles de blog, plus nous devrons en afficher ici, et nous nous retrouverons avec quelque chose comme ça. Donc, pour le moment, ce que nous voulons faire, c'est le styliser de telle sorte que lorsque nous ajoutons de nouveaux articles de blog, ils aient automatiquement le même style. Pour en revenir ici, la première chose que nous voulons faire est de changer l'orientation car, comme vous pouvez le voir, le texte doit se trouver de ce côté, comme sur notre site de référence. Donc, tant que cette option est toujours sélectionnée, je vais passer au classique, puis je vais changer le skin pour le mettre sur le côté. OK. Comme ça. Et bien sûr, nous voulons lui donner une colonne pour qu'il ne s'agisse que d'une colonne de gauche à droite comme ça. Mets-le à jour. Revenons ici. Comme vous pouvez le voir, le fond est blanc comme l'arrière-plan de notre site Web. Supprimons donc cette couleur grise. Laisse-moi résumer ça. Passons au style. Passons à la zone de contenu, couleur du texte. Bien sûr, tout d'abord, la couleur du texte doit être ce bleu marine. Laisse-moi juste le copier. Testez la couleur dans la zone de contenu, collez-la, et maintenant c'est le bleu marine comme ça. Nous devrions également passer à la typographie et en faire 600, juste comme ça La prochaine chose que nous voulons faire est de nous débarrasser de ce fond gris. À l'intérieur de la boîte de contenu, passons ici à la couleur d'arrière-plan, faisons en sorte que ce soit blanc, et maintenant c'est blanc. Mets-le à jour. Passons en revue les modifications. Nous y voilà. La prochaine chose que nous voulons faire est, bien sûr, de changer ce texte en bleu marine. Je vais donc revenir ici, copier ça. Va ici. Une fois cette option sélectionnée, je vais passer au titre. Couleur Faisons en sorte que ce soit bleu marine au survol, nous voulons que ce soit cette couleur rosâtre-rougeâtre. Copiez ça. Sur Hover, nous voulons que ce soit cette couleur rosâtre-rougeâtre. Et bien sûr, il va sans dire que nous avons besoin que la police soit Monerat Mont Center. Donnons-lui une certaine épaisseur, 900. Nous voulons qu'il soit noir, et nous pouvons augmenter légèrement la taille. C'est peut-être trop gros. Peut-être de cette taille. Oui, comme cette taille. Et réduisons la hauteur verticale ou l' espacement des lignes jusqu'à ce point, mettons cela à jour Augmentez également légèrement l'espacement en bas du titre, ici même, pour l' espacer légèrement par rapport aux métadonnées Dans les métadonnées, il s' agit du nom d'utilisateur. Ce serait donc votre nom, et je vais vous montrer comment le changer. Il s'agit de la date à laquelle le message a été publié et s'il y a des commentaires. Donc, tout d'abord, mettons à jour que je souhaite accéder aux articles pour vous montrer où vous pouvez changer ce nom. Passons aux paramètres. Non, en fait, passons aux utilisateurs ou aux utilisateurs. Et bien entendu, il s' agit de votre nom d'utilisateur. Il s'agit du même nom d'utilisateur que vous avez reçu lors installation de WordPress dans Spectaculars Nous pouvons donc dire modifier. Et en défilant vers le bas, nous avons ici le prénom. Vous pouvez donner votre prénom, nom de famille, et voici le nom. Pseudonyme. Tu peux donner ton vrai nom. Et Bessa Vous pouvez donc prononcer le nom d'affichage publiquement comme le nom que vous voulez que les gens voient, mettez à jour le profil. Retournons ici. Si j'ai activé le contrôle de rafraîchissement R, c'est parti. Maintenant, il est écrit le nom que j'ai spécifié dans le backend. Encore une fois, pendant que cette option est toujours sélectionnée, modifions l'image. Donc, en revenant au contenu interne, à l'image générale, l'image en vedette, nous pouvons augmenter la largeur jusqu'à ce que nous voulons. Peut-être que 35 ans c'est bien pour moi. Je ne jouerai pas avec la hauteur. C'est bon. Alors maintenant, je pense qu'en ce moment, ce que nous avons est suffisant. Bien entendu, comme vous pouvez le voir sur notre site Web de référence, nous avons également cet article en savoir plus. Nous allons voir comment ajouter ce bouton dans la prochaine leçon au fur et à mesure que nous apporterons d'autres ajustements à l'affichage de notre publication. Nous devrons donc également apporter quelques modifications à cela. Voyons donc comment procéder dans la prochaine leçon. À bientôt. 19. Ajouter du contenu d'Elementor: Donc, avant de terminer le style de cet article, créons le contenu du message dans le front-end avec Elementor Retournez ici, nous voulons le construire dès maintenant. Revenons donc à notre éditeur dans notre tableau de bord, et passons aux publications. Et maintenant, nous y voilà. Nous pouvons aller modifier, mais je veux cliquer avec le bouton droit de la souris et ouvrir le lien dans un nouvel onglet. Nous laissons donc le tableau de bord intact, et disons maintenant le modifier avec Elementor. Et nous y voilà. Alors maintenant, je vais cliquer sur ce signe plus, puis sur Flex Box, et nous voulons une section à double colonne ou un conteneur à double colonne. Je vais donc cliquer dessus. Et la raison est que nous avons également cette barre latérale et l'article principal. Cela devrait donc être de 30 %. Et ils devraient être de 70 %. Mets-le à jour. C'est bon. Alors maintenant, bien sûr, ajoutons notre image pour commencer. Déposons donc une image dedans, et je vais sélectionner cette même image que celle que nous avons utilisée comme image vedette. Et bien sûr, il a des angles vifs. Allons-y et choisissons le style. En ce qui concerne le rayon de la frontière, donnons-lui 2020. Mets-le à jour. C'est bon. Nous y voilà. Permettez-moi de recopier ce titre une fois de plus en dessous, tout en restant dans ce conteneur, qui contient l'image. Nous voulons cliquer dessus et sélectionner le titre. Déposez-le dans le même contenant. Double-cliquez sur Coller dedans. Bien sûr, je veux en faire un style H one. Mets ça au centre. Bien sûr, sélectionnons cette couleur ici, le bleu marine. Copiez, collez dans cette typographie. Faisons en sorte que ce soit Mont. Entrez. Passons également à 900, juste comme ça, et réduisons la hauteur de la ligne quelque part. Mets-le à jour. Faisons défiler la page. Ça me plaît. Ensuite, allons-y et créons le premier paragraphe. Je vais donc cliquer dessus, ajouter un paragraphe, déposer dans le même conteneur, et ici, contrôler Shift V pour le coller sans aucun style. Mets-le à jour. Maintenant, vous remarquerez que nous avons cette catégorie de productivité, et nous parlerons des catégories plus tard, et nous avons également la date. Allons donc ici dans notre éditeur et recherchons des métadonnées. Sujet de publication. Je vais donc simplement le déposer là-dedans. Et comme vous pouvez le voir, ça ressemble déjà à ça. Maintenant, par défaut, notre article indique qu'il se trouve dans la catégorie Non classé, et c'est parce que nous n'avons créé aucune catégorie et que nous n'avons placé aucun article dans une catégorie spécifique. Nous n'avons qu'un seul article. Nous verrons comment changer cela. Mets-le à jour. Et nous pouvons l'espacer tant qu'il est toujours sélectionné en mode avancé , le décomposer et augmenter les marges supérieure et inférieure. En fait, nous sommes censés l'augmenter à 20 et plus, juste comme ça. Passons en revue les modifications. Nous y voilà. Ajoutons cette rubrique. Copiez-le ici. En fait, permettez-moi de dupliquer ceci, le dupliquer comme ça. Déposez-le juste en dessous de ce paragraphe. Bien sûr, c'est ce que je vais sélectionner. Tout d'abord, définissons-en un H deux parce que nous essayons de créer une hiérarchie Les moteurs de recherche recherchent une hiérarchie sur une page Web, commençant par le H résumer la page, puis pour les principaux titres, nous utilisons H deux Pour les titres mineurs, nous utilisons H trois et ainsi de suite. Donc, bien que ce soit sélectionné, il s'agit maintenant d'un style H deux. Mettons-le sur la gauche. Et puisque je l'ai copié, laissez-moi le coller comme ça. Il nous faut maintenant une image. Le même cas s'applique donc à cela. Je le duplique et je le fais glisser. Déposez-le juste en dessous de ce texte. Tant qu'elle est sélectionnée, je vais aller ici, sélectionner une image à partir d'ici. Disons peut-être cette image. Double-cliquez dessus. Sélectionnez, et c'est parti. Permettez-moi de dupliquer ce texte. Nous supposons donc qu'il s'agit d'une histoire composée d'images. Voici donc l'image principale, puis nous avons un titre, puis le point numéro un, une image pour résumer ce point. Ensuite, nous avons ces textes. Nous pouvons sélectionner ces textes, passer au mode avancé, le supprimer, puis augmenter la mise à jour de la marge supérieure. Passons en revue les modifications. En faisant défiler l'écran vers le bas, c'est parti. Alors maintenant, bien sûr, je pense que nous n'avons pas assez d'espace ici. Je vais donc sélectionner cette option avancée. Sélectionnez cela, augmentez la marge supérieure. Juste comme ça. Maintenant, la création du reste de ces sections est la même histoire. Et maintenant, pour créer le reste des sections jusqu'à la troisième, vous pouvez répéter le même processus. Mais peut-être que votre article n'a pas besoin de toutes ces images. Peut-être que vous voulez que ce soit de la prose sans casser le texte. Nous pouvons donc supprimer cette image. Et sélectionnez ce texte, réduisez cette marge supérieure jusqu'à peut-être là. Maintenant, nous pouvons dupliquer cet endroit juste en dessous. Dupliquez-le, placez-le juste en dessous. Remplacez cela par le numéro deux. Copiez-le, sélectionnez-le, collez le numéro deux peut-être très long, alors mettez-le à jour, alors mettez-le à jour revue les modifications en faisant défiler la Nous y voilà. Je vais donc simplement sélectionner ce texte et y ajouter d'autres paragraphes. En fait, je devrais l'ajouter ici, pas directement là. Collez-le là-dedans. Si vous tapez, vous pouvez taper directement dedans, mais s'il s'agit de coller ici avec la commande Shift V. Je vais répéter la même chose Maintenant, nous pouvons le dupliquer, le mettre en dessous. Disons que c'est une conclusion. Copiez-le pendant qu'il est sélectionné, collez-le là. Alors copions-le. Dupliquez-le, placez-le là. Sélectionnez tout ce qui est supprimé, Control Shift v. Mettez-le à jour. Cette marge est trop importante. Voyons voir, prévisualisons-le. Nous y voilà. J'aime bien le billet de blog. Ça a déjà l'air bien. Mais maintenant, espacons-le en haut. Comme vous pouvez le voir ici, nous avons un bel espacement, ici Sélectionnez le contenant qui contient tout. Avancé, arrête ça. Donnons-lui peut-être 50. Mettez à jour et prévisualisez les modifications. Comme ça. Alors maintenant, bien sûr, nous devrons ajouter la barre latérale ici comme nous l'avons fait sur le site Web de référence. Et bien sûr, il s'agit d'une liste d'articles récents, et nous ne l'avons pas créée. Nous allons donc le créer un peu plus tard. Quelques leçons à tirer d'ici. Mais dans la leçon suivante, allons-y et reprenons le stylisme. Laisse-moi rentrer chez moi , car c'est chez moi. Allons-y et reprenons le style de cette maintenant que nous avons créé cette page. Je te verrai donc bientôt. 20. Afficher le post partie 2: Revenons maintenant à notre poste de travail. Je pense que c'est le bon endroit. Si nous revenons ici, maintenant que nous en avons fini avec cela pour le moment, nous reviendrons pour ajouter la barre latérale. Permettez-moi donc de terminer et nous y voilà. C'est ici que nous modifiions la page d'accueil. Donc, si j'appuie sur Control R pour lire. Allons-y. Alors maintenant, nous voulons également afficher ce bouton de lecture de l'article. Voyons donc comment procéder. Tant que cette option est toujours sélectionnée, réduisons-la. Cherchons maintenant cette option ici. Options de publication, type d'extrait, en savoir plus. OK. Exactement. C'est donc là que vous devez configurer cette mise à jour. Maintenant, nous pouvons styliser ce bouton « En savoir plus ». Donc, au départ, comme vous pouvez le voir ici, nous avons des métadonnées différentes. Vous pouvez choisir d'en afficher certaines et d'en masquer d'autres. Ainsi, par exemple, nous pouvons masquer les commentaires, alors masquez-les. Cela n'affichera donc pas les métadonnées des commentaires. Passons donc au style intérieur. Et cherchons le bouton. Donnons-lui une couleur de fond. Oh, c'est donc la couleur du texte. Nous voulons donc lui donner une couleur de fond. La couleur du texte doit être blanche. Maintenant, bien sûr, il a disparu. Mais lorsque nous ajoutons une couleur de fond, ce bleu marine, c'est censé être une copie rose rougeâtre Couleur de fond, collez-la , et maintenant c'est parti. Au survol, nous voulons remplacer la couleur d'arrière-plan par le bleu marine, donc la couleur d'arrière-plan doit être rose lorsque vous survolez le bleu marine comme ça, et au survol, elles doivent être roses Maintenant, bien sûr, nous n'avons pas de rembourrage sur le bouton, mais ici nous pouvons définir le rembourrage. Alors cassez ça. Sur la gauche, on peut en donner peut-être 50. Non, peut-être 40. Sur la droite, 40 sur les dix du haut sur les dix du bas. Je pense que 15, c'est bien. 15 15. Nous y voilà. Maintenant, l'espacement en haut du bouton, je pense que c'est une bonne position. Dis ça. Revenons à l'image vedette du contenu et augmentons légèrement la largeur. Nous voulons qu'il soit plus carré que rectangulaire. Nous y voilà. Revenons également au style, et nous avons les métadonnées. Non, passons aux catégories parce que nous voulons les modifier, et nous pouvons supprimer ce rembourrage, comme ça Maintenant, à gauche, donnons-en 20 et à droite 20. Passons maintenant au point 1. Je vais sélectionner ce rayon de bordure. Donnons-lui dix. Maintenant, il a ce coin incurvé. En fait, donnons-en cinq, juste comme ça. Mettez-le à jour et examinons les modifications. Ça me plaît. Donc, pour en revenir à notre site Web de référence, c'est ce que nous avons. En fait, je l'avais supprimé de notre site Web de référence, mais je vais le laisser sur ce site en particulier que nous sommes en train de créer. Donc, en gros, c'est ainsi que vous présentez le message sur votre page de destination, sur votre page d'accueil. Je pense que maintenant il a l'air présentable et de style professionnel Maintenant que nous avons un style agréable pour notre élément de blog, ne nous reste plus qu'à créer d'autres articles de blog, et ils seront affichés ici avec le même style. Ils hériteront du même style, et la seule chose qui sera différente est l'image vedette, le titre, la catégorie et tous ces détails, mais le style restera le même Et nous verrons comment procéder dans les prochaines leçons. Mais maintenant, je veux terminer cette leçon ici parce que nous avons obtenu ce que nous voulions. Nous voulions styliser le billet de blog. Maintenant, dans la leçon suivante, rendons cet en-tête car lorsque nous commençons à le faire défiler, il disparaît, et nous voulons qu'il reste collant comme ici, comme ce que nous avons sur notre site Web de référence C'est ce que nous allons faire dans la prochaine leçon. À voir prochainement. 21. En-tête collant: Maintenant que notre article de blog est stylisé comme ça, nous voulons rendre cet en-tête collant, comme sur notre site Web de référence Donc, pour en revenir ici, je voudrais tout d' abord les fermer parce que nous en avons fini avec eux. Et maintenant, pour en revenir ici, souvenez-vous que nous sommes allés dans le pied de page d'en-tête d'Elements Kit et que nous avons créé un en-tête C'est donc ici que nous allons aller pour rendre l'en-tête collant. Cliquez donc avec le bouton droit sur le lien dans un nouvel onglet, et nous y irons. Mais tout d'abord, permettez-moi de terminer ceci et cela. Je vais donc voir notre éditeur ici. Nous y voilà. Donc, avant d'aller plus loin, je voudrais que ce bouton soit rose comme ça, et qu' au survol, il soit censé être bleu marine Nous essayons de maintenir la cohésion de la marque. Nous essayons de maintenir cette cohérence de marque. Nous utilisons donc les mêmes couleurs partout. Copiez donc correctement cette couleur rosâtre-rougeâtre. En revenant ici, sélectionnez cet élément, style, cette couleur d'arrière-plan, collez-les là. Puis survolez. Copiez cela à juste titre. En survol. Nous voulons que la couleur de fond soit le bleu marine, juste comme ça. Mettez ça à jour. Maintenant, nous voulons que cet en-tête reste collant au défilement. Et pour ce faire, nous allons en ajouter un autre lié à Elementor, appelé effets d'en-tête adhésifs pour Elementor Donc, en revenant ici, les plugins en ajoutent de nouveaux. Oh, tapons simplement Elementor. Et nous y voilà. Effets d'en-tête persistants pour Elementor avec 200 000 installations actives. Installez-le maintenant. Activons. Et nous y voilà. Donc, pour y revenir, je vais actualiser cette page. Et cela signifie qu'il est maintenant répertorié ici. Donc, si je les réduis tous, où sont les effets d'en-tête collants ? Oh, il ne sera pas répertorié, je vais simplement sélectionner ce conteneur, puis passer à la mise en page de réduction avancée, et maintenant nous avons des effets d' en-tête collants. Je vais donc activer cela. Cela révèle maintenant tous ces paramètres. Mais nous n'allons pas les embêter tous. Nous voulons changer la couleur d'arrière-plan en blanc lorsque quelqu'un commence à faire défiler en revenir ici, au moment où nous commençons à faire défiler la page, cela devient collant Il change de couleur pour prendre ce gris très clair parce que s'il est transparent, nous ne pourrons pas voir le texte lorsqu'il est au-dessus d'autres textes, laissez-moi vous montrer ce que je veux dire Donc, pour le moment, ne lui donnons pas de couleur de fond. Nous avons juste activé le caractère collant. Rentrons chez nous. Si je commence à faire défiler la page, couleur ne passe pas au blanc ou à une autre Cela signifie que nous ne pouvons pas voir ces éléments. Mais maintenant, si nous changeons la couleur de fond, nous allons simplement en faire un gris très clair proche du blanc Mettez ça à jour. Passons en revue les modifications. Passons à la page d'accueil. Commencez à faire défiler la page. Oui, c'est un beau gris, mais je veux quand même qu'il soit un peu plus gris. F7f7f7. Je pense que c'est un bon endroit. Oui, c'est un bon gris. Alors maintenant, mais vous remarquerez que lorsque nous commençons à faire défiler la page, elle ne rétrécit pas Sur notre site Web de référence, il semble rétrécir. Et c'est ce que nous voulons. Alors revenons ici. Tant que cette option est toujours sélectionnée et que nous sommes encore sous des effets d'en-tête persistants. Passons à la réduction de l'en-tête. Nous pouvons dire de le réduire à peut-être 60 %. Nous pouvons également réduire le logo car il se trouve à l'intérieur d'un en-tête rétrécissant Nous pouvons donc le faire peut-être à 60 % également. Mettez ça à jour. On peut y voir. Je vais donc passer à cet autre onglet où nous sommes chez nous, et c'est parti. Juste comme ça. En gros, c'est ainsi que l'en-tête reste collant. Dans la leçon suivante, nous allons parler des fonds mondiaux. Je te verrai bientôt. 22. Définir des polices globales: Il est donc temps de parler très rapidement des phonts mondiaux Et avant de passer aux phontes globales, je remarque que nous n'avons pas modifié les effets de survol ni la couleur de ces éléments de menu Revenons donc ici et sélectionnons les éléments en appuyant sur N élément de menu. Passez au style. Réduisez l'emballage du menu, passez au style des éléments de menu. Maintenant, couleur du texte de l'élément de menu. Faisons en sorte qu'il soit bleu marine. Copiez ça. Sélectionnez-le, collez-le dedans. Maintenant, c'est ce bleu marine, mais au survol, je veux que ce soit cette couleur rouge rosâtre. Alors sélectionnez-le, collez-le. Maintenant, au survol, c'est cette couleur, et lorsqu'elle est active, doit également être rosée Lorsqu'il est actif, nous voulons dire lorsque nous sommes sur une page spécifique. Si nous sommes sur la page des articles, elle devrait être de cette couleur pour montrer très rapidement à quelqu'un que nous sommes sur la page des articles. Donnons-en un aperçu. Si nous allons sur la page d'accueil, ils devraient rester roses. Si nous allons sur la page de contact, elle devrait rester rose, comme ça. Alors maintenant, parlons très rapidement des téléphones mondiaux. Vous avez remarqué que pendant que nous construisions tout ici, nous avons dû continuer à modifier le texte manuellement. Si nous avons ajouté cet éditeur de texte, nous avons dû modifier manuellement cette police spécifique. Nous avons dû venir ici et le remplacer par Monert. Ce n'est même pas encore Monert. Et si nous voulons créer d'autres articles à afficher ici, comme celui-ci. Nous devrons tout le temps régler manuellement les téléphones. Si nous voulons utiliser Monert, nous devrons constamment passer de Roboto à Montserrat C'est pourquoi nous aurions besoin d'un moyen de le définir une seule fois, puis chaque fois que vous ajoutez du texte par la suite, il apparaît automatiquement sous le nom de Mont. Voyons donc comment procéder. Pour en revenir, je voudrais dire « modifier avec Elementor » parce que nous éditons cette page Maintenant, nous en avons terminé avec cette rubrique. Permettez-moi donc de terminer cela et de dire que nous sommes en train de charger l'éditeur d'accueil. Si nous passons ici à ce menu de hamburgers, paramètres du site, aux fonds mondiaux, nous pouvons définir tous les fonds comme appartenant à Montserrat Je veux donc sélectionner cela. Changez ça pour Montserrat. Mois. Cliquez n'importe où ici. Sélectionnez ce Montserrat. Cliquez n'importe où ici. Faisons de même pour chacun d'entre eux. Oh, attendez. Montserrat. Nous y voilà. Maintenant, permettez-moi de le mettre à jour. Et revenons à l'éditeur. Maintenant, si je sélectionne ceci, laissez-moi simplement le sélectionner et appliquer, voir si ces modifications s' appliqueront également. Ils n'ont pas postulé à ce sujet. Mais si j'ajoute un nouvel éditeur de texte. Par exemple, si j'y dépose des textos, maintenant c'est Montserrat, ce n'est plus Si je reviens ici et que j'ajoute un titre, c'est une typographie de style Monst This is style Typography Monct Donc, par défaut, tous les textes seront désormais Monert. Et je l'ai fait parce que nous allons créer davantage d'articles de blog pour remplir cet espace, et nous ne voulons pas continuer à modifier ces paramètres tout le temps. Mais maintenant, je vois que cela n' a pas changé pour Monert. Je vais donc le modifier manuellement , car une fois que vous l'aurez modifié une fois, tous les articles de blog qui apparaîtront en dessous hériteront également de tous ces paramètres, y compris le paramètre de police Donc, en ce qui concerne le style, la boîte de contenu , la typographie, la famille, choisissons Montserrat Family est l'abréviation de famille de polices. Et oui, je veux qu'il y en ait 600. Augmentons peut-être un peu l'interligne. Jusqu'à ce point. Mettez ça à jour. Passez en revue les modifications. Nous y voilà. Maintenant, l'ensemble du site Web est composé de la police Mont. Tout tourne donc autour des polices globales. Dans la leçon suivante, voyons comment ajouter des liens à votre article de blog, car les liens sont bons pour le référencement. Voyons comment procéder dans la leçon suivante. À voir prochainement. 23. Ajouter des liens à votre publication: Il est temps de créer des liens pour votre article de blog. Et je veux juste ouvrir ce billet de blog. Alors, lisez la suite. Et nous y voilà. Nous voudrions donc peut-être lier un texte ici à un autre article de blog que vous avez écrit, ou peut-être à Wikipédia. Peut-être que vous créez un lien vers une définition d' un terme sur lequel vous souhaitez que les gens puissent en savoir plus sur Wikipédia. Alors, comment ajouter un lien dans votre texte ? Je vais donc continuer et dire modifier avec Elementor. Et nous y voilà. Donc, pour ajouter un lien, il suffit, par exemple, de sélectionner le texte que nous voulons sélectionner. Par exemple, si vous souhaitez créer un lien vers la signification du burnout. Soulignez cela, puis ce menu apparaîtra. Vous pouvez cliquer sur ce lien, puis fournir un lien. Je vais prendre un lien de Wikipedia et le coller ici. Épuisement professionnel, puis appuyez sur Entrée. Maintenant, cela se transforme en lien. Donc, si nous le mettons à jour et que nous prévisualisons les nouvelles modifications. Si nous faisons défiler la page, nous y voilà, vous pouvez cliquer sur ce burnout, et cela ouvrira le terme épuisement professionnel Revenons en arrière. Le problème est qu'il s' ouvre maintenant sur la même page, et vous voudrez peut-être que les gens continuent à lire sans interruption. Vous voulez donc qu'il s' ouvre dans un nouvel onglet. Alors, retournez ici. Pendant que ce bloc de texte est sélectionné. Allons ici et cherchons ce lien. Ça devrait être quelque part ici, nous y sommes. Burn-out. Je vais sélectionner ça. Cela fera apparaître cette option d'édition. Cliquez dessus. Cliquez ensuite sur cette roue dentée Cela ouvrira cette fenêtre contextuelle. Vous pouvez dire « ouvrir le lien » dans un nouvel onglet. Mettez ça à jour. Passons maintenant en revue les modifications. Nous y voilà. Maintenant, si je clique dessus, il s'ouvre dans un nouvel onglet. Notre article est toujours intact. Maintenant, un autre problème que vous avez peut-être remarqué est que cela n'est pas cohérent ou cohérent avec les couleurs de notre marque. Nous voulons que ces liens soient peut-être de ce rose rougeâtre, et ce sont les couleurs définies par le Rappelez-vous que je vous ai dit que le thème est ce qui détermine l' apparence par défaut de votre site Web. Ce sont donc des couleurs astra, et pour les changer, nous pouvons passer à la personnalisation Cela s'ouvrira et nous appuierons sur les paramètres généraux. Nous y voilà. Et maintenant, bien sûr, nous avons toujours l'article ouvert ici pour un aperçu. Si nous passons au global, pouvons passer aux couleurs et changer ces couleurs ici. Par exemple, des liens. Si je vais ici et que je sélectionne cette copie rose rougeâtre, je peux la sélectionner, faire défiler la page vers le bas, et ici, si nous collons cette publication, sélectionnons-la également Rythme de publication. Cela ne change pas. Pourquoi ? Permettez-moi d'actualiser ce qui est censé prendre effet instantanément. C'est bon. Nous avons dû actualiser cela pour constater ce changement. En fait, je voudrais également le sélectionner à nouveau et le mettre à jour avec audace. Prévisualisez ça. S'épuiser comme ça. Maintenant, je viens de me rappeler que pour cela, nous l'avons défini manuellement avec Elementor Ce n'est donc pas défini par Astra. y revenir, souvenez-vous qu' il s'agissait d'un élément post méta. Vous pouvez accéder aux catégories de style. Passons à la couleur, collage et à la transformation en rose rougeâtre Maintenant, pour que cela prenne effet dans l'éditeur, nous pouvons rafraîchir la page. Et maintenant, allons-y. Donc, en gros, c'est ainsi que vous pouvez ajouter des liens vers votre article de blog au cas où vous souhaiteriez créer un lien vers d'autres articles votre site Web ou d'un autre site Web tiers. Dans la leçon suivante, comment ajouter la section auteur. Revenons donc à notre site Web de référence, voyons comment le créer. Je te verrai donc bientôt. 24. Section auteur: Il est donc temps de créer cette autre section. Cela devrait être très simple car nous avons déjà créé quelque chose comme ça. Pour en revenir à notre poste de travail, où est-il ? Nous y voilà. Pour créer cela, nous devons copier cette section depuis la page d' accueil, et nous pouvons le faire. Maintenant, c'est l'éditeur de page d' accueil. Je peux donc sélectionner cette copie avec le bouton droit de la souris. Maintenant, j'ai copié ce conteneur. en revenir à notre éditeur, permettez-moi de clore ceci et Wikipedia. Sélectionnez ce conteneur. Coller. Maintenant, nous l'avons collé dans le conteneur Sélectionnez donc cette ligne ou montez simplement ici, cliquez avec le bouton droit de la souris sur Coller. faisant défiler l'écran vers le bas, il se trouve toujours à l'intérieur de ce conteneur, car nous voulons les garder à l'intérieur Prenez ce texte, placez-le en dessous. Qu'avons-nous d'autre ici ? Nous n'en avons rien sur moi. Supprimons donc cela. Nous pouvons modifier ce texte, peut-être l'agrandir légèrement. Et en fait, cela devrait être un H trois. entraînement doit avoir lieu à quatre ans, et c'est un âge de trois ans. Nous essayons de maintenir cette hiérarchie. C'est un âge de deux ans. Ce sont des titres mineurs, et celui-ci est plus mineur que cela. Hiérarchie. Gardez cela à l'esprit. Qu'avons-nous d'autre ici ? Agrandissez légèrement cette typographie, elle devrait peut-être avoir une épaisseur de 15, mais peut-être 700 Augmentons peut-être légèrement la marge supérieure et changeons la couleur du texte. Est-ce que j'ai ce rose ? Non, je ne sais pas. Allons ici et sélectionnons ce copier-coller là, mettre à jour. Tout d'abord, laissez-moi sélectionner ceci et le réduire à zéro. Oh, c'est top. Hé, laisse-moi juste te le rendre. Pour le bas, je veux le réduire légèrement. Sélectionnons ce texte, augmentons la marge inférieure. C'est bon. Mettons-le à zéro. Je vais sélectionner ce conteneur avec marge avancée en haut, donnons-lui cette séparation. Mettez ça à jour. Passons en revue les modifications. Faire défiler la page vers le bas. Conclusion, nous avons donc l'auteur. Génial. J'aime donc ce que nous avons jusqu'à présent. Dans la leçon suivante, nous allons maintenant mettre en forme cet article , car il s'agit de l'un des articles les plus récents. Mais bien sûr, c'est le seul article que nous avons ajouté jusqu'à présent. Il est affiché ici. Voyons comment le styliser pour qu'il ressemble à ceci. Alors je te verrai dans une minute. 25. Styliser la barre latérale Articles récents: Il est donc temps de styliser cette barre latérale composée de publications récentes. Revenons donc à notre rédacteur en chef, et nous y voilà. Il s'agit donc d'une liste de publications. Rentre ici, content. Passons aux paramètres. Supposons de ne pas afficher l'icône. Juste comme ça, mettez à jour. Ensuite, nous pouvons dire image d'arrière-plan en vedette, non. Afficher l'image en vedette. Cela affichera donc l'image en vedette sur le côté. Maintenant, réduisons également la taille du téléphone ici. Donc du texte, de la typographie. C'est bon. Faisons-le manuellement comme ça, et réduisons la hauteur. Augmentons-le également légèrement. Le poids lui donne 600. Mais je veux lui donner cette couleur. Ce bleu marine. Retournez ici, sélectionnez ici, couleur du texte. Collez maintenant c'est ce bleu marine. Mais au survol, ça devrait être de cette couleur rosâtre-rougeâtre. Copiez-le, collez-le dedans, juste comme ça. Maintenant, il reste du rembourrage, réduisons-le. Pour l'image en vedette, donnons-lui un rayon de bordure de cinq pour lui donner ce coin arrondi. En fait, revenons également ici pour la typographie. Peut-être que nous allons donner ce 800 700, c'est bien. Oui, c'est mieux. Réduisons également cette hauteur de ligne. Jusque-là, mettez-le à jour. Passons en revue les modifications maintenant. Faire défiler la page vers le bas. Nous y voilà. Maintenant, c'est quoi ça ? Nous devons nous en débarrasser. Je ne sais pas ce que c'est. Espace séparateur de liste entre les contenus. nous aurons d'autres articles, nous verrons comment ils seront listés Lorsque nous aurons d'autres articles, nous verrons comment ils seront listés et comment ils seront listés Revenons au contenu ici. Réglages. Je ne sais pas ce que c'est, mais je vais le découvrir, laissez-moi découvrir ce que c'est très rapidement. C'est bon. J'ai donc réalisé que c'était le problème. La raison pour laquelle nous avions ce point ici était ce paramètre , la mise en page. Comme vous pouvez le constater, à l'heure actuelle, nous avons une sorte de balle, et ce n'est pas ce que nous voulons Nous voulons que cela se fasse sans puces car si nous revenons aux puces et que nous prévisualisons les modifications, comme vous pouvez le constater, nous avons une puce, mais si elle est configurée sur cette disposition horizontale, prévisualisez-la Maintenant c'est fini. C'est donc ce que nous voulons. Donc, en gros, c'est ainsi que vous pouvez styliser les articles récents de la barre latérale. Dans la leçon suivante, nous allons voir comment ajouter cette barre de progression défilante. Comme vous pouvez le constater, nous avons donc cette barre supérieure qui vous indique jusqu'où vous en êtes et combien il vous reste, jusqu'en bas de l'article de blog Je pense que cela donne de la vie à vos articles de blog et les rend uniques. J'ai vu cela sur quelques sites Web, et je me suis toujours demandé comment le faire jusqu'à récemment. Voyons donc comment procéder dans la prochaine leçon. 26. Ajouter la barre de progression: Il est donc temps d'ajouter cette barre de progression, quelque chose comme ça. Donc, revenons à notre éditeur. Maintenant, nous voulons l'ajouter aux articles de blog uniquement. Passons à notre article de blog. En savoir plus Laissez-moi les fermer. Nous voulons l'ajouter ici afin que lorsque quelqu'un fait défiler notre article de blog et le lit, il puisse le voir Mais avant cela, je veux que nous ajoutions cette barre latérale maintenant. Retournez au bloc de publication et ajoutez-le avec Elementor, car mon objectif est de sauvegarder ce bloc de publication que nous avons créé en tant que modèle que nous pourrons réutiliser lorsque nous créerons le reste des articles de blog. Tu vas voir ce que je veux dire. Et je ne veux pas enregistrer le modèle sans tout ce qui constitue un bloc de publication. Je vais venir ici, cliquez avec le bouton droit de la souris sur Copier. Entrez ici, sélectionnez ce lien droit pour coller. Il y sera collé En fait, ce que je voulais, c'était le suivant, cliquez avec le bouton droit de la souris sur une copie, venez ici. Maintenant, sélectionnez le conteneur qui les contient à nouveau, cliquez avec le bouton droit sur Coller, et c'est ce que nous voulons. Je pense donc que je vais en rester là. Lorsque nous créerons d'autres articles, ils apparaîtront dans une liste ici. Donc, ne t'inquiète pas pour ça. Mais pour l'instant, je tiens à le dire. En fait, permettez-moi de limiter cela à cinq articles. Je vais donc sélectionner ça. Si c'est déjà limité à cinq posts, en fait. Nous ne voulons pas que 50 articles soient répertoriés ici. Nous n'en voulons que cinq. Je vais donc cliquer sur Mettre à jour. Passons en revue les modifications. Allons-y. faisant défiler l'écran vers le bas, je veux un peu espacement entre Je vais donc passer au conteneur qui contient les deux conteneurs. Et maintenant, pour ce qui est de l'écart, donnons-le comme ça, actualisons-le. Passez en revue les modifications. Oui, nous avons besoin de cet espacement comme ça. Il ne reste plus qu' à ajouter cette barre de progression. Je vais donc cliquer dessus et taper progress. N'oubliez pas que l'un des plugins que nous avons ajoutés était Royal Elementor Adds ons. En fait, je veux juste vous montrer rapidement quelque chose ici. Ceci est le site officiel de Royal Elementa Adoms. Et si vous souhaitez tester l' un de leurs éléments, vous pouvez venir ici Royal element addos.com et y jeter un œil Je veux donc passer à la barre de progression de lecture. Donc, si je clique dessus, faites défiler l'écran vers le bas pour voir les progrès en action. Alors, on y va. J'ai oublié de vous montrer ce site Web et de vous expliquer comment vous pouvez simplement vérifier certains éléments avant de les utiliser. Par exemple, la boîte à rabat, nous n'allons pas utiliser de boîte à rabat, mais je veux juste vous la montrer. Quelque chose comme ça. Je rentre chez moi. Donc, en gros, il suffit de visiter ces sites Web et de voir les éléments qu'ils vous apportent. Voici le site Web des modules complémentaires premium pour Elementor. N'oubliez pas qu'il s'agit d'un autre ajout que nous avons ajouté. Et si vous accédez à tous les widgets, vous pouvez voir une liste de toutes ces choses ici. Nous avons utilisé un blog. Voyons voir. Si nous faisons défiler l'écran vers le bas, voici les différentes manières dont vous pouvez présenter votre article de blog Et si nous passons à la toute dernière étape ici, voici comment nous avons fait les nôtres. Retournons ici. C'est ainsi que nous avons procédé. Je voulais donc juste le mettre en évidence au cas où vous voudriez voir comment déterminer si un élément que vous souhaitez utiliser convient à votre site Web. Vous pouvez en avoir un aperçu sur le site officiel du créateur. Alors permettez-moi de clore ceci et cela. Si nous arrivons ici, nous avions saisi progression et nous lisions maintenant la barre de progression. Nous pouvons simplement le déposer ici. Il ne sera pas visible au-dessus de l'image. Nous le plaçons simplement dans cette mise à jour de billet de blog. En fait, déposez-le juste en dessous de l'image. En fait, ce titre est trop proche de l'image. Laissez-moi sélectionner ce top avancé. Mettons-le là. Maintenant, laissez-moi simplement le déposer au-dessus de la mise à jour du texte. Passez en revue les modifications. Maintenant, c'est bien espacé, et lorsque nous commençons à faire défiler la page, notre barre de progression fonctionne maintenant parce que nous l'avons déposée n' importe où sur la Nous pouvons le déposer n' importe où sur la page, et c'est tout ce qui compte. En revenant ici, nous pouvons changer la couleur du champ. Je veux lui donner cette copie en couleur rosée. Sélectionnez-le, collez-le dans la mise à jour, prévisualisez les modifications. Défilement. Maintenant, nous y voilà. La couleur de notre marque fonctionne. Voici donc comment ajouter la barre de progression de lecture. Dans la leçon suivante, nous allons parler de l' enregistrement des modèles. Je te verrai bientôt. 27. Modèle de blog de sauvegarde: Maintenant que nous sommes satisfaits de l'apparence de notre article de blog, nous pouvons l'utiliser comme modèle d'article de blog afin qu'à l'avenir, lorsque nous souhaiterons créer un nouvel article de blog, nous n'ayons pas à tout recommencer à le concevoir. Et nous pouvons le faire en allant à l' endroit où nous l'avons édité. Cliquez ensuite sur ce menu déroulant. Enregistrer en tant que modèle. Disons maintenant un modèle de billet de blog. Cliquez sur Enregistrer. Maintenant, nous y voilà, modèle de billet de blog. Ainsi, la prochaine fois que nous voudrons créer un article de blog, nous pourrons venir ici et l' insérer. Nous pourrons simplement modifier le texte du nouveau billet de blog, mais la structure sera la même. Et nous verrons cela à partir de la prochaine leçon, car c'est ce que nous faisons. Nous créons d'autres articles de blog pour alimenter notre page d'accueil avec le reste des articles de blog Alors je te verrai dans une minute. 28. Créer plus de messages de blog: Nous avons maintenant enregistré notre modèle de billet de blog. Il est temps de l'utiliser pour créer le reste de nos articles de blog. Alors laisse-moi juste fermer ça. Et en fait, comme nous en avons terminé avec cette page, je vais la fermer. Fermez ça aussi, même ça et ça. Maintenant, revenons aux posts. Dans la liste des articles, nous n'avons qu'un seul article. Maintenant, je vais simplement dire de cliquer avec le bouton droit de la souris sur Ouvrir le lien dans un nouvel onglet sur Ajouter un nouveau message. Maintenant, un moyen rapide de cliquer avec le bouton droit de la souris et de l'ouvrir dans un nouvel onglet consiste simplement à utiliser la molette de la souris. Si vous cliquez dessus, un nouvel onglet s'ouvrira. Pour ce faire, ouvrez-le dans un nouvel onglet. Je vais en créer un, deux, trois, quatre, cinq. Disons six. Maintenant, pour y revenir, permettez-moi de lui donner un titre. Je vais juste le copier. Permettez-moi de passer à la page d'accueil. Permettez-moi de copier cette copie. Je vais le coller dedans. Page par défaut. Elément de modèle par défaut ou pleine largeur. Définissons une image vedette. Retournez ici. Disons peut-être ce chiot. Définissez l'image en vedette. Ajoutons également un extrait, je vais donc faire défiler la page ici. Copiez-le, collez-le dedans, publiez-le. Maintenant, c'est publié. Mais n'oubliez pas que nous ne faisons que définir les configurations de base du modèle, de l'image vedette et de l'extrait. Nous n'avons pas défini les paramètres d'Astra. Mais si nous voulons créer le bloc de publication dans le front-end en utilisant le modèle que nous venons d'enregistrer, nous devrons également les définir. Ça, laisse-moi juste les régler. Je voulais d' abord les créer rapidement, puis y revenir plus tard, mais nous pouvons le faire maintenant. Barre latérale, pas de barre latérale. Désactivons ces trois éléments. Mettez ça à jour. Notre page Web est maintenant prête à être modifiée avec Elementor. En fait, ce n'est pas notre page Web, c'est un article de blog. Je vais fermer ça. Je vais revenir ici. Choisissons cette copie, collons-la là. En fait, permettez-moi de définir l'image vedette. Sélectionnez. Sélectionnez ceci. Non, permettez-moi de sélectionner cette image sélectionnée en mode ouvert. Prenons cette page, les œufs qui s'y trouvent. Publier. C'est donc ça. Laisse-moi fermer ça. Maintenant, pour en revenir, si je rafraîchis cette page, nous avons maintenant trois articles de blog. Si nous le survolons, il n'y a aucune option de modification avec Elementor Mais maintenant, cela peut être modifié avec Elementor car nous l'avons déjà construit avec Elementor, nous pouvons donc le modifier avec element Maintenant, en passant à celui-ci que nous avons déjà configuré avec Elementor pleine largeur et à tous ces autres paramètres, nous pouvons le modifier avec Elementor Et bien sûr, c'est une page blanche. Mais maintenant, avant même d'aller loin, maintenons cette pensée là. Retournez ici, si je rentre chez moi et que je vais à la page d'accueil en cliquant dessus, cela sera redirigé vers la page d'accueil. Comme vous pouvez le constater, trois articles de blog ont déjà été ajoutés à notre liste d'articles de blog récemment ajoutés, et ils sont tous non classés. Et regardez les articles récents. Cela apparaît également dans les articles récents. Maintenant, nous pouvons modifier et déterminer quel article de blog sera affiché sur cette liste. Ce n'est ni rigide ni fixe, et ce n'est pas quelque chose que nous devrions simplement accepter tel quel. Nous pouvons déterminer précisément quels articles de blog nous voulons afficher sur ces différentes parties, car ici, nous voulons les plus récents. Mais ici, nous pourrions vouloir une catégorie spécifique d'articles de blog. Nous verrons bientôt les catégories. Alors maintenant, pour en revenir à ici, souvenez-vous que nous étions sur le point de créer notre article de blog. Nous pouvons accéder aux modèles. Et dans la liste de mes modèles, nous avons un modèle de billet de blog. Je peux dire « insérez », « appliquez ». Voici maintenant le modèle que nous avons enregistré. Il me suffit donc de modifier le contenu de ce modèle pour avoir le contenu du nouveau billet de blog que je souhaite publier. Mais bien sûr, je ne vais pas le faire parce que mon objectif est de vous montrer comment utiliser ces choses, mais je vais changer cette image pour qu'elle reflète cette nouveauté. Je pense que c'était ce chiot. Sélectionnez Mettre à jour. Je pense que nous devrions également changer de sujet. J'étais le signe de Focus Copy. Oui, ça indique les signes de concentration. Donc, si je le sélectionne, peux venir ici et lui donner ce titre, mettre à jour. Mais maintenant, le contenu devrait porter sur ces nouveaux articles de blog. Modifiez donc tout jusqu'en bas, puis mettez à jour et prévisualisez les modifications. Nous y voilà. Alors maintenant, si nous ouvrons cet article de blog original, nous y voilà, et si nous ouvrons ce nouveau billet, il est propre à cet article de blog en particulier, et il contiendra le contenu du nouveau billet de blog. Alors maintenant, c'est le moment avancer rapidement dans cette partie parce que je vais essentiellement répéter le même processus pour le reste des articles de blog, et cela va prendre trop de temps, donc ce sera un laps de temps Et une fois que j'ai terminé, nous pouvons passer à la session suivante. Permettez-moi donc d' avancer rapidement dans cette section. Donc, en revenant ici, je vais créer un autre article de blog. Et nous y voilà. J'ai fini de créer le reste du billet de blog dont j'ai besoin. Et comme vous pouvez le constater, nous devons apporter quelques ajustements par rapport à notre site Web de référence ici. Nous devons ajouter un peu d'espacement. Peut-être aimeriez-vous cela avec ce type d'espacement. Mais je veux vous montrer comment ajouter légèrement cet espacement. Voici comment procéder Dans la leçon suivante, voyons comment ajouter cet espacement et passer à la page d'archive des articles Il s'agit d'une page qui affiche tous les articles de votre blog. Donc, revenons ici, articles. Nous y voilà. Voici les archives du blog, une liste de tous les articles que j'ai publiés au fil du temps, et les lecteurs peuvent venir ici et lire tout ce que vous avez publié. C'est ce que nous allons faire dans la prochaine leçon. À bientôt. 29. Page d'archive des publications: Il est donc temps de créer la page d'archive du blog ou la page d'archive des articles. Pour en revenir à notre éditeur, ici, passons au tableau de bord, fermez-le. Ou nous avons déjà créé une page. Passons aux pages. Et ça s'appelle un article. Je vais donc dire modifier. En fait, permettez-moi d'ouvrir le lien directement dans un nouvel onglet. Allons-y. Terminons donc les configurations de base. Passons aux paramètres d'Astra, Elementor complet sans barre latérale. Désactivons-les également. Allons-y. Passons à l'édition avec Elementor Et nous y voilà. Alors maintenant, laissez-moi regarder ça. Voici notre page d'accueil. Je voudrais choisir cette section sur les héros ici parce que vous remarquerez que sur notre site Web de référence, nous avons quelque chose de similaire à la section des héros sur la page d'accueil. Nous n'avons pas besoin de réinventer la roue. Nous n'avons pas besoin de recréer ou de répéter ce que nous avons déjà fait. Modifiez donc avec Elementor sur la page d'accueil. Tout ce que nous avons à faire est de sélectionner ce conteneur qui contient la section héros, de le copier correctement. Retournez ici, cliquez directement dans cette boîte, collez. Cela le collera en haut. Cela indique une archive de blog. Copiez-le, sélectionnez-le, double-cliquez ici, collez. Une liste de tous les articles que j'ai publiés au fil du temps. En sélectionnant cette option, supprimez. En fait, il suffit de le coller là-dedans. Contrôlez Shift V pour coller comme ça. Le centre de style aligne cette mise à jour. Et maintenant, nous devons ajouter une boîte flexible, cette structure ici, un conteneur unique. Maintenant, pour afficher nos articles de blog de cette façon, nous allons utiliser un élément supplémentaire appelé essential addons for element. Revenons donc à l'ajout de nos tableaux de bord. Addons essentiels pour Elementor. Nous y voilà, ou nous aurions pu simplement taper Elementor. Et voici des addons essentiels. Installez-le dès maintenant. Installé, activons-le. Et maintenant, nous pouvons passer par cet assistant de configuration, choisir « Avancé », puis « Suivant ». Nous pouvons activer les modèles, mais je n'ai pas besoin des modèles ou de les ignorer. Ensuite, comptez sur moi ou non, merci. Je vais juste dire non merci car il ne s'agit pas d'un site Web permanent. C'est bon. Maintenant, nous sommes actifs. y revenir, je dirais rafraîchir. C'est bon. Donc, en regroupant tous ces éléments, nous verrons des ajouts essentiels Je vais donc taper grid post grid by essential addons EA. Permettez-moi donc de le glisser-déposer dans ce conteneur, et c'est ce que nous recherchions. Donc, pendant que cette option est sélectionnée, je vais la remplacer par Tout d'abord, disons que nous voulons six articles par page. Mais pour la mise en page, nous voulons avoir trois colonnes, pas quatre ou trois colonnes. Mets-le à jour. Et permettez-moi de rafraîchir la page. Nous avons donc maintenant trois colonnes. Permettez-moi de rafraîchir cette page. Cela se reflète donc dans l'éditeur. Il s'agit de l'aperçu. Mais bien entendu, nous devons faire bien davantage pour que cela ressemble à cela. Donc, en allant ici, pendant que cette option est toujours sélectionnée, passons d'abord à la mise en page. Nous voulons désactiver certaines de ces fonctionnalités. Descendez, n'affichez pas la date. Ou vous pouvez indiquer la date. Il n'est pas nécessaire d'afficher le nom de l'auteur sauf si vous avez plusieurs autres auteurs sur votre blog. Ne montre pas l' avatar, ni l'image. Oui, comme ça. Passons maintenant au style intérieur pour les styliser . Style de grille de poteaux. Donnons-lui un rayon de bordure de 20, comme ça, jusqu'au sommet. Maintenant, si nous passons à la miniature et que nous lui donnons également un 20, tout est arrondi, mais nous ne voulons pas de ces Revenons donc au style de grille de publication, type de bordure. Maintenant c'est non. Passons au méta-style, centralisons-les comme ça. Passons à la typographie et à l'espacement. Maintenant, nous pouvons avoir le style du titre et le style de l'extrait. Donc le titre, on peut le mettre au centre et l' extrait au centre. Passons à la section En savoir plus, connectez-vous également au centre C'est le bouton. Nous pouvons revenir à la typographie et à l' espacement des couleurs et changer la couleur du texte du titre Laissez-moi sélectionner ce bleu marine. Collé dedans et au survol, nous voulons qu'il soit rougeâtre au survol, de cette couleur rosâtre rougeâtre cette couleur rosâtre Nous voulons également passer au titre de la typographie. Nous voulons lui donner cette épaisseur de 900 comme ça. Je pense que cette taille est correcte, mais nous pouvons 25, c'est bien, mais la hauteur de la ligne est un bon endroit. OK. Maintenant, vous remarquerez que extrait contient très peu de texte. Passons donc à la mise en page du contenu. Pour les extraits de mots, passons à 20. Cela signifierait que 20 mots sont indiqués dans l'extrait. Revenez à l'intérieur avec style. Passons au bouton «   En savoir plus ». La couleur du texte doit être blanche. Mais maintenant, donnons à l' arrière-plan cette couleur rougeâtre. Donc, en revenant ici, en savoir plus sur le type d'arrière-plan. Donnons-lui cette couleur. Brisons ce rembourrage. Et pour le top, donnons-en 15. En fait, donnons-en dix, pour le bas, je veux dire le haut. Donnons-lui dix. Pour la marge supérieure, poussons-la vers le bas. Je pense que 30 ans, c'est bien. Donnons-lui également un rayon de frontière de cinq, disons dix. Mets-le à jour. Passons en revue les modifications. Allons-y. Mais maintenant, faisons quelque chose à propos de cette date. Paramètres de mise en page. Je pense que je vais me débarrasser de cette date car elle détruit la mise en page. Je vais donc simplement le mettre à jour. Passons en revue les modifications. Mais tu peux le garder là si tu veux. Allons-y. Évidemment, allons-y maintenant et ajoutons cette ombre pour faire ressortir chaque bloc de publication. Retournez ici, style, c'est l'ombre d'une boîte à lettres de style grille, juste comme ça. Mais maintenant, il fait trop sombre. Nous pouvons le rendre plus léger, peut-être jusqu'à 20 quelque part. Étalons-le également légèrement. Flouse-le En fait, je veux le rendre plus faible, juste comme ça Mettre à jour. Passons en revue les modifications. Allons-y. Désormais, par défaut, il est défini sur Masonry. La mise en page est définie sur Maçonnerie. Mise en page du contenu. La maçonnerie, et c'est pourquoi si elle est courte, celle située en dessous sera repoussée vers haut pour maintenir cet espacement uniforme Donc, même si c'était beaucoup plus court jusqu'à présent, cela serait augmenté pour conserver le même espacement, et je pense que cela le rend plus présentable que prévu Je pense donc que nous avons réussi. Je pense que nous l'avons fait. Il vous suffit donc d' ajouter d'autres articles de blog, et ils seront ajoutés à cette liste. Et vous pouvez également limiter le nombre d'articles de blog qui seront affichés. Actuellement, j'en ai cinq, mais cette page pourra en afficher six. Si vous voulez en afficher 12, vous pouvez en afficher 12 ici et il y en aura 12 si vous en avez 12. Je pense donc qu'à ce moment-là, nous pouvons appeler cela un wrap. C'est la fin de cette leçon. Voici comment créer la page d'archive du blog. Dans la leçon suivante, parlons des catégories. Et je viens de me rendre compte que nous n'avons rien fait à propos de ce texte. Cela peut être votre devoir, mais nous pouvons revenir à la couleur, aux extraits, à la typographie, à Montserrat Nous pouvons augmenter la taille, mais je vais m'en tenir là. Mais ce que je veux faire, c'est augmenter légèrement la marge supérieure. Pour le séparer du titre. Allons-y. Juste comme ça. Dans la leçon suivante, nous allons donc parler des catégories de publications. Je te verrai bientôt. 30. Catégories d'articles: Il est donc temps de parler des catégories de publications. Vous remarquerez donc ici que nous affichons tous les articles de blog que nous avons sur le blog. Si nous allons sur la page d'accueil, nous affichons sans discernement tous les articles de blog que nous avons sur la Mais il se peut que nous souhaitions afficher des articles de blog spécifiques une section et différents articles de blog dans une autre section. Et c'est là que les catégories sont utiles. Pour en revenir à notre tableau de bord, je souhaite accéder aux catégories de publications. Laisse-moi clore ça. Non, merci. Et permettez-moi de clore ça. Et maintenant, comme vous pouvez le constater, nous n'avons qu'une seule catégorie appelée « Non classé ». Et c'est parce que par défaut, nous appuyons sur Toujours avoir cette catégorie par défaut lorsque vous l'installez. Il n'a pas la possibilité de le supprimer. Nous pouvons maintenant créer nos propres catégories. Mais maintenant, si nous revenons à la liste de tous les articles, parce que nous n'avions aucune catégorie, chaque article que nous créons est automatiquement placé dans la catégorie Non classé. Il existe maintenant deux manières de créer une catégorie de blog. Si nous allons, par exemple, ici, je vais cliquer avec le bouton droit de la souris et ouvrir le lien dans un nouvel onglet ici, et je voudrais fermer les autres. Maintenant, nous voici dans ce post. Supposons que nous soyons en train de créer le message. Nous pouvons venir ici et ouvrir le panneau ou l'onglet des catégories. Nous pouvons décocher cette option, et maintenant nous pouvons dire « ajouter une nouvelle catégorie » et « taper un nom Qu'est-ce que c'est, par exemple ? Priorisation. Gestion du temps Gestion du temps, accueil, T, appuyez sur Entrée. Maintenant, cet article de blog entre dans cette catégorie particulière de gestion du temps d' appel. Il peut également appartenir à deux catégories ou à plusieurs catégories. Il peut également s'agir d'une question de productivité. Si je participe, il appartient désormais à deux catégories. Si je le mets à jour, maintenant c'est fait, revenons ici et actualisons cette page. Maintenant, comme vous pouvez le constater, c'est dans ces deux catégories. Nous pouvons faire de même pour ceux-ci. Maintenant, une autre chose que vous remarquerez , c'est qu'une fois que nous avons créé ces deux catégories, si nous passons aux catégories ici, elles sont également incluses ici. C'est donc une façon de créer des catégories en le faisant dans un article tel que vous l'avez créé. Une autre façon est de venir ici et d'en ajouter d'autres. Par exemple, la santé. Si j'entre, tu peux me fournir la limace. Mais si vous appuyez sur Entrée, wPress utilisera le nom que vous avez donné à la catégorie comme slug, et c'est ainsi que cela devrait être Si j'appuie sur Entrée, Wpress a créé une nouvelle catégorie Cold Health et si vous dites Quick Edit, le slug est Si nous parlons de productivité, le problème, c'est la productivité Maintenant, permettez-moi de créer deux autres catégories. Disons des publications récentes, peut-être récentes. Rejette ça. Annulez ça. Peut-être pouvons-nous également créer une autre catégorie appelée Featured, Enter. Allons-y. Maintenant, si on passe à tous les articles et qu'on ouvre, peut-être celui-ci. Permettez-moi d'appuyer sur la souris pour l'ouvrir dans un nouvel onglet. Nous y voilà. Si nous passons aux catégories, nous avons maintenant une liste de toutes les catégories que nous avons créées, et bien sûr, elles ont été répertoriées par catégories. Mais maintenant, nous pouvons le placer dans n'importe quelle catégorie. Disons santé. Mets-le à jour. Retournons ici. Modifions-le. Passons aux catégories. Supprimez ce qui est classé. Disons que c'est un article récent, et c'est aussi pour la productivité, la mise à jour. Allons-y ici. Je vais ouvrir ceci et cela. Permettez-moi de clore les autres. Il ne nous reste donc plus que ces deux-là. Passons aux catégories. Supprime ça. Je dirais en vedette et récent. Et c'est aussi une question de productivité. Mets-le à jour. Maintenant, c'est à vous de créer des catégories créatives. Allons-y, retirons-le. C'est ainsi que vous pouvez transformer votre vie. Nous pouvons peut-être en ajouter une ici appelée transformation. Non, je n'aime pas ça. Nous ne l'avons pas orthographié correctement, mais je vais m'en tenir là. Et disons que Health met cela à jour. Allons-y. Alors maintenant, si nous fermons cela et actualisons cette page. Chaque article de blog appartient désormais à une catégorie. Parfois, deux articles de blog peuvent appartenir à la même catégorie. Maintenant, voici pourquoi les catégories sont bonnes. Donc, si nous passons au front-end, je vais cliquer avec la souris pour ouvrir un nouvel onglet. Ici, nous sommes chez nous. Regardez les catégories dès maintenant. Maintenant, si je dis modifier avec Elementor, aucun article n'a été trouvé ici Donc, si je dis modifier avec Elementor, la raison pour laquelle aucun article n' trouvé ici est parce que n'oubliez pas que cet élément extrayait les articles de blog à afficher de la catégorie Non classé Si je clique dessus et que je regarde les catégories. Si nous le sélectionnons et que nous voulons pouvoir cliquer dessus. OK, oublions ça une seconde. Maintenant, revenons à celui-ci. Si nous réduisons les termes généraux, nous pouvons passer à la requête, et c'est là que nous déterminons ce que nous allons afficher. Par exemple, ici, nous pouvons dire « oui, nous allons afficher les publications, les règles des catégories ». Nous allons faire correspondre le filtre des catégories. Nous pouvons dire quelles catégories nous voulons afficher. Peut-être voulons-nous afficher les articles de blog qui se situent uniquement dans la catégorie productivité. Désormais, tous les articles de blog appartenant à la catégorie seront affichés. Si un article de blog ne contient pas de catégorie «   productivité », il ne sera pas affiché. Fermons ça. Supprimons cela et choisissons peut-être la santé. Je pense que nous en avons eu un ou deux. Oui, nous en avons deux. Mais maintenant, vous devrez styliser chaque catégorie individuellement, ce qui n'a aucun sens. Cela devrait hériter du style des catégories que nous avons déjà stylisées Donc je vais juste m'en débarrasser. C'était où ? Les catégories d'options de publication importantes. Ne montrez pas ça. Mets-le à jour. Mais maintenant, comme vous pouvez le constater, nous pouvons utiliser les catégories que nous voulons afficher pour afficher des types spécifiques d'articles de blog que nous voulons sur une page ou une section spécifique. Maintenant, je ne sais toujours pas pourquoi ça se comporte mal comme ça Je pense qu'il y a un problème avec cet élément car il est censé faire exactement ce qu'il a fait ici. Dans les requêtes, nous sommes censés être en mesure de sélectionner des catégories spécifiques. donc falloir que je trouve une solution avant la fin de ce cours. Mais pour l'instant, je pense que nous allons terminer la leçon ici, la mettre à jour. Nous pouvons faire de même pour la page d'archive des articles. Permettez-moi d'aller ici et de modifier avec Elementor. Si nous le sélectionnons. Maintenant, il s'agit d'un élément différent. s'agit de la grille de publication d'Essential Adds, et elle permet également classer vos requêtes par catégories. Supposons que nous voulions simplement afficher la santé. Sélectionnez-le. Maintenant, nous n'allons voir que deux articles, car nous n'avons que deux articles de blog avec la catégorie santé. J'espère donc que vous comprenez maintenant les catégories pour vous aider à afficher ce que vous voulez sur votre page Web. Dans la leçon suivante, voyons comment ajouter cette fonctionnalité hors Canvas pour les afficher. Et bien sûr, comme vous l'avez peut-être deviné, nous allons utiliser des catégories Voyons comment procéder sous peu. 31. Barre latérale hors toile: Il est donc temps d'afficher quelques articles de blog sur notre wget off Canvas Revenons donc à notre éditeur ici. Je vais ajouter cette productivité. Maintenant, nous en avons d'autres. Mettons-le à jour. Passons en revue les modifications afin que nous puissions réellement accéder à cette page pour pouvoir dire en-tête. Modifiez l'en-tête avec Elementor. Et nous y voilà. Nous sommes donc en train de modifier l'en-tête. Si je clique dessus, c'est censé afficher quelques articles de blog ici. Donc, pour afficher le contenu ici, nous sommes censés utiliser un modèle. N'oubliez pas, comme le modèle que nous avons enregistré pour les articles de blog. Nous pouvons également créer un modèle que nous pouvons afficher ici. Donc, si nous entrons dans le modèle sélectionné, alors que celui-ci est sélectionné, comme vous pouvez le voir, nous n' avons qu'un seul modèle, et c'est le modèle de billet de blog. Allons-y et créons un modèle à utiliser ici. Je vais rentrer chez moi. Permettez-moi de tout fermer ici. Et je vais juste venir ici pour les posts. Oui, nous pouvons créer un nouveau message. Donc, pendant que nous sommes ici, nous pouvons peut-être appeler cela du contenu Canvas. C'est bon. Donc, bien sûr, les configurations de base se trouvent dans la barre latérale. Publions-le. Passons ensuite au front-end et modifions-le directement ou créons-le là. Et nous y voilà. Nous n'avons donc besoin que d'une chose. Donc, si je clique dessus, nous allons sur Flexbox et nous n'avons besoin que d'une colonne comme celle-ci Et si nous revenons en arrière en fait, je veux aller sur les pages, et je veux copier les articles édités avec Elementor Je souhaite copier la grille des articles. N'oubliez pas que nous l'avons toujours ouvert. Je veux donc copier cette grille de publications. Je veux donc cliquer dessus, cliquer avec le bouton droit de la souris sur copier. Accédez à ce contenu hors Canvas. En fait, laissez-moi simplement le supprimer et ici, cliquez avec le bouton droit sur Coller. Maintenant, avec cette option sélectionnée, je veux tout d'abord sélectionner uniquement la catégorie appelée récente. Récent. Nous avons deux articles de blog. Et je veux aussi en faire des publications par page , disons trois, et pour la mise en page, disons que nous voulons une seule colonne. Mettez ça à jour. Passons en revue les modifications. Faire défiler la page vers le bas. C'est donc ce que nous avons. Maintenant, permettez-moi d'actualiser les éditeurs pour qu'ils reflètent les changements ici, juste comme ça. Alors maintenant, ce que je veux faire, c'est sélectionner ce clic droit pour enregistrer en tant que modèles, et je veux l'appeler Of Canvas content or posts. Sauvegardez ça, et voilà. Fermons ça. Retournons ici. Nous sommes maintenant dans l'éditeur en chef, et c'est ici que nous sommes censés rechercher des modèles. Si nous cliquons dessus, c' est maintenant que nous avons également des publications hors Canvas. Si nous le sélectionnons. Maintenant, si nous cliquons dessus, cela affiche les publications hors Canvas. Bien entendu, nous pouvons jouer avec ces paramètres. Nous n'allons pas approfondir cela, mais voici comment ajouter la barre latérale hors Canvas Permettez-moi de le mettre à jour et de passer en revue les modifications. Nous cliquons dessus. Nous y voilà. Permettez-moi donc de passer à la page d'accueil. C'est ce que nous avons présenté jusqu'à présent. C'est bon. Donc, en gros, tout tourne autour de la barre latérale hors Canvas. Dans la leçon suivante, nous allons créer le pied de page, car, comme vous pouvez le voir pour le moment, nous ne pouvons faire défiler la page que dans une certaine mesure Nous n'avons pas de pied de page ici pour avoir tout le contenu censé s'y trouver Voyons donc comment procéder dans la prochaine leçon. Je te verrai bientôt. 32. Le pied de page: Il est donc temps de créer le pied de page. Maintenant, comme vous pouvez le voir, sur notre site de référence, nous avons un joli pied de page simple Pour en revenir à notre poste de travail, permettez-moi de clore celui-ci et tout cela parce que nous en avons fini avec eux. Maintenant, ce que nous devons faire est d'aller dans le pied de page d' en-tête de l'élément skit comme d'habitude Parce que n'oubliez pas que c'est ici que nous avons créé l'en-tête. Disons donc en ajouter un nouveau. Le pied de page, qui devrait devenir le pied de page, l'ensemble du site, permet de modifier le contenu Nous irons directement à l'avant pour commencer à le construire. Et nous y voilà. De la même manière que nous avons créé l'en-tête, nous allons créer une photo. Je vais cliquer dessus. Puis Flex Box. Je pense que cela comporte trois colonnes sur le site Web de référence. Où se trouve notre site Web de référence ? Oui, trois colonnes. Choisissons ceci. Allons-y. Sélectionnez-le. Bien entendu, pour ajouter un logo, nous déposons un élément d'image. Cliquez dessus. Sélectionnez le logo, sélectionnez-le, et c'est parti. Ensuite, un paragraphe. Alors allons-y, éditeur de texte. Déposons-le juste là. Ensuite, Control Shift V. Bien sûr, nous voulons lui donner cette couleur gris bleu marine. Copiez ça. Collez-le dedans pour la couleur, Typography, 600, juste comme ça Mets-le à jour. Le maximum que nous voulons créer, ce sont ces liens. Allons-y et choisissons les liens. Nous voulons dire liste. Et c'est une liste d'icônes. Je vais donc glisser-déposer la liste des icônes juste là, comme vous pouvez le voir, et au-dessus, les liens rapides. Donc, rubrique Liens rapides. Ils devraient être du style pour les enfants de trois ans. Passons à la couleur du texte. Je pense que j'ai toujours ce non. Copie. Changez-le comme ça. Passons à la typographie. Faisons en sorte que ce soit 900 comme ça. Maintenant, ce que nous devons faire, c'est créer ce formulaire d'inscription. Et nous le faisons avec un autre plugin le meilleur plugin pour créer des formulaires WordPress, appelé forminator J'adore ce plug-in, et je vais revenir à notre tableau de bord. Tout d'abord, permettez-moi de le mettre à jour. Avant de le faire, pourquoi ne pas en finir avec ça ? Passons donc à la confidentialité de tous les articles. Je vais donc sélectionner ça. Vous pouvez le modifier ici. À propos de moi, confidentialité des articles. Vous pouvez également le modifier ici. Des articles. Conditions d'utilisation relatives à la confidentialité. Je vais donc dupliquer ces conditions d'utilisation. C'est bon. Ce n'est pas nous qui avons apporté les changements ici, alors pour moi. Allons-y. C'est bon. Alors laisse-moi juste taper ça ici à propos de moi. Allons-y. Et bien sûr, maintenant, donnons-lui un style. Passons à l'icône. Nous voulons lui donner cette couleur rougeâtre. Copiez-le, collez-le ici. Mais en vol stationnaire, nous voulons que ce soit bleu marine. Au survol, coloriez. Juste comme ça. Passons ensuite au texte, passons à l'icône. Passons au texto. La couleur devrait être ce bleu marine. Mais en survolant, ça devrait être aussi rougeâtre que ça, juste comme ça Nous pouvons maintenant modifier ces icônes. Revenons-en donc au contenu me concernant. Alors peut-être un utilisateur. Des articles. Peut-être un texto. Confidentialité. Que devons-nous utiliser ici ? Je vais utiliser des conditions d'utilisation cibles. C'est un livre énorme avec des conditions d'utilisation. Confidentialité, peut-être que nous pouvons utiliser un coffre-fort. Très bien, mettez-le à jour. D'accord. Bien sûr, comme vous pouvez le voir, le fond a cette couleur que nous avons utilisée ici. Permettez-moi donc de choisir ce fond de barre latérale. Copiez ça, allez ici. Sélectionnez le conteneur, le style et le type d' arrière-plan. Collez ça dedans. Choisissons également la couleur de la bordure. Couleur de la bordure Solide. Donnons-lui un. Et donnons à la bordure la couleur OK. Et remarquez également que nous avons de l' espacement ici et en bas. Tant que cette option est toujours sélectionnée, accédez à la marge avancée en haut, AD ou attendez, censé être le rembourrage, huit et huit Mets-le à jour. Nous voulons également avoir un bon espacement entre ces éléments Tant que cette option est toujours sélectionnée, mise en page , lacunes, disons 30. Mets-le à jour. Passons en revue les modifications. Allons-y. Je veux donc baisser légèrement ce chiffre car il semble être plus élevé que cela. Je vais donc sélectionner le contenant qui le contient et augmenter le rembourrage en haut Espacement entre le bord du contenant et le contenu. Mettez-le à jour, prévisualisez les modifications, comme ça. Alors maintenant, je pense que nous allons nous arrêter ici pour cette leçon. Dans la leçon suivante, nous allons créer le formulaire du forminateur et les icônes des réseaux sociaux Je te verrai donc bientôt. 33. Formulaire d'inscription à la liste de diffusion: Et bon retour. Il est donc temps de créer le formulaire d'inscription à la liste de diffusion avec forminator Revenons donc au tableau de bord. Je souhaite cliquer dessus pour accéder au tableau de bord et au front end du Togo. Alors, on y va. Passons aux plugins en ajouter de nouveaux. Je vais taper forminator comme ça. Nous y voilà. Installez-le maintenant. 500 000 installations actives. C'est très populaire. Activez. Nous y voilà. Alors voilà, je vais juste le faire glisser vers la gauche et passer à Forminator Maintenant, comme vous pouvez le voir, ici, nous avons créé n'importe quel type de formulaire pour Paul. Notre objectif étant de créer un formulaire, je vais cliquer sur Créer. Nous voulons m'inscrire à la newsletter Je vais donc cliquer sur Continuer. Formulaire d'inscription, création. Nous y voilà. Nous y voilà donc. Nous avons deux champs, le prénom, adresse e-mail et le bouton d' abonnement. Si nous en avons un aperçu, c'est ce que nous avons. Si je ferme cela, nous pouvons les réorganiser comme ça, donc côte à côte. Si nous avons un aperçu de cela. Nous pouvons les avoir côte à côte. Vous pouvez également modifier le contenu en cliquant dessus et en disant « peut-être soumettre ». Mais maintenant, c'est abonnement parce qu'il s'agit d'une inscription à la newsletter. Vous pouvez modifier n'importe lequel de ces champs en cliquant dessus. Maintenant, comme vous le remarquez, je ne veux pas le prénom, donc je vais le supprimer, le supprimer. Il ne nous reste donc plus que l' e-mail et le bouton. Juste comme ça. Fermez-le et publiez-le. Je vais sélectionner cette copie du code abrégé et passer au front-end où nous modifierons notre pied de page Je vais cliquer sur le code court de type Plus. Et il s'agit d'un espace réservé à un code abrégé. Ainsi, lorsque nous le déposons là, cela nous donne un espace ici pour saisir notre code court. Je vais donc coller ce code court. Je viens de le copier ici dans cet espace, et maintenant notre formulaire apparaîtra ici. Permettez-moi donc de le mettre à jour. Permettez-moi donc de cliquer sur Appliquer pour refléter les modifications que nous avons apportées dans le back-end Voici maintenant notre formulaire. Bien entendu, nous devons travailler pour le rendre plus attrayant. Retournons ici. Oh, attendez. Permettez-moi de revenir au tableau de bord. Fermez-le car il s'agit du tableau de bord. Passons au tableau de bord. Maintenant, dans Forminator, revenons à notre formulaire. Je vais cliquer sur les formulaires. Nous en avons deux. Je souhaite le supprimer. C'est parce que j'appuie sur Entrée, puis sur le bouton de création pendant que je le crée. Modifiez-le. Nous revenons à notre éditeur. La deuxième étape ici est l'apparence. Je vais cliquer dessus, et ici nous pouvons choisir différents préréglages. Nous allons utiliser celui-ci. OK. Et pour les couleurs, nous pouvons utiliser des couleurs par défaut, ces couleurs ou personnalisées. Choisissons le personnalisé. Bouton Soumettre. Ce devrait être de quelle couleur ou cette couleur rougeâtre. Cette couleur. Alors copiez-le. Soumettez la couleur par défaut. Collez-le là-dedans, et si nous le prévisualisons , c'est maintenant cette couleur. Comme vous pouvez le constater, nous n' avons plus ces bordures partielles. Au survol, copiez-le. Au survol, nous voulions avoir ce bleu marine et nous concentrer sur le focus. Collez et mettez-le à jour. Maintenant, si nous allons dans le front-end, que nous le sélectionnons et que nous l'appliquons, nous verrons les modifications que nous avons apportées au back-end se les modifications que nous avons apportées au back-end répercuter sur le front-end, comme ça. Mais maintenant, vous remarquerez que si nous prévisualisons les modifications, cela comporte des points très difficiles. Nous pouvons les rendre plus arrondis comme ici. Et pour cela, il va falloir utiliser du CSS. Désormais, chaque plug-in possède des paramètres spécifiques qu'il vous fournit, mais juste au cas où vous ne pourriez pas voir les paramètres que vous souhaitez utiliser. Peut-être que le plug-in ne vous a pas fourni ces paramètres. Ce plugin vous permet généralement d'ajouter votre propre CSS afin modifier l'apparence de ce que vous créez. L'apparence de Forminator a donc ce champ CSS personnalisé dans lequel nous pouvons ajouter quelques lignes de code en CSS pour affecter son apparence Donc, ici en bas, nous pouvons utiliser le sélecteur de saisie. Il s'agit d'un champ de saisie. Nous pouvons donc utiliser le sélecteur de saisie. Lorsque nous cliquons dessus, il se remplit automatiquement. Et ici, nous pouvons dire que la bordure a un rayon de cinq cellules de pointe, et si nous en avons un aperçu. Maintenant, il y a cinq cellules de pointe. Si nous disons 50 cellules de pointe, ce sera super arrondi. Revenons à 50. Nous pouvons faire de même pour le bouton, mais le problème est que nous n'avons pas de sélecteur pour le bouton ici Tout d'abord, permettez-moi de le mettre à jour, et allons-y, sélectionnez-le, puis appliquez-le. Maintenant, si nous prévisualisons les modifications, bien sûr, les coins sont arrondis, mais nous devons le faire pour le bouton. Donc, pour obtenir le sélecteur du bouton, cliquez avec le bouton droit sur cet élément et passons à l'inspection Permettez-moi de développer cela. Si nous choisissons cette icône ici, nous passons en mode de sélection totale des éléments et nous pouvons sélectionner un élément spécifique. Par exemple, si je sélectionne ce bouton, je peux maintenant regarder le bouton Laissez-moi simplement le faire glisser. Je peux maintenant regarder le nom de cet élément que j'ai sélectionné avec cette icône ici. Ici, comme vous pouvez le voir, nous avons le bouton de soumission du formulateur à points, et voici le sélecteur Donc, pour y revenir, je vais coller le bouton de soumission, accolades, la saisie, le rayon de commande, cinq pixels également Donnons-en un aperçu. Et maintenant, il a ces coins arrondis. Bien sûr, augmentons la largeur à 100 % de l'espace disponible de gauche à droite, 100 %, juste comme ça. Mets-le à jour. Maintenant, si nous allons au front-end et que nous le sélectionnons, appliquons puis prévisualisons les modifications. Nous y voilà. Alors laissez-moi terminer ceci et maintenant c'est un beau fooder Je pense donc que nous allons arrêter cette leçon ici. Dans la leçon suivante, ajoutons ces icônes sociales sous le formulaire d'inscription. Je te verrai bientôt. 34. Ajouter des icônes sociales: Il est temps d'ajouter les icônes sociales, ces icônes sociales, et je ne les avais pas très bien stylisées sur mon site de référence. Ils en sont trop proches. Quoi qu'il en soit, nous passons à notre poste de travail ici. Revenons à notre éditeur. Nous y voilà. Je veux dire avancé, et passons à la marge et réduisons cette marge inférieure parce que cela prend trop de place, juste comme ça. Maintenant, allons-y et tapons social. Et nous voulons utiliser les icônes sociales du kit Elements. Je vais donc les glisser et les déposer là-bas, et c'est parti. Avancé, je veux passer à la marge et augmenter la marge supérieure à dix (mise à jour). Et passons en revue les modifications. Nous y voilà. Maintenant, je veux juste changer les icônes elles-mêmes à l'intérieur pour qu'elles soient blanches au survol. Je n'aime pas le noir. Donc, revenez ici pendant que cette option est encore sélectionnée, allez au contenu, Facebook au survol. La couleur doit être blanche, juste comme ça. Faisons de même pour Twitter. Couleur au survol, blanc. Et passons à Link in over white. Maintenant, bien sûr, vous pouvez maintenant fournir votre lien ici pour accéder à la plateforme de médias sociaux spécifique. Il doit s'agir de Linkedin et vous pouvez choisir de l' ouvrir dans un nouvel onglet. Vous pouvez également ajouter d'autres icônes sociales si vous le souhaitez, puis les rechercher ici. Disons peut-être YouTube. Je vais cliquer sur YouTube Insérer. Maintenant, nous y voilà. Nous pouvons changer ce nom en YouTube et le remplacer par White. Passons en revue les modifications. Nous y voilà. Bien sûr, maintenant, ils utilisent les couleurs officielles de la marque au survol, alors faisons de même pour YouTube Au survol, la couleur de fond doit être rouge. Mettez ça à jour, et maintenant c'est rouge. Passons en revue les modifications. Maintenant, vous vous demandez peut-être si vous continuerez à voir ce lien vers le formulaire de modification ici ? Et la réponse est que les utilisateurs ne le verront pas parce qu'ils ne sont pas connectés à votre tableau de bord. Si vous êtes déconnecté, vous ne verrez pas ce formulaire de modification. Vous ne le verrez que si vous êtes l'éditeur en tant que propriétaire. Les utilisateurs ne pourront donc pas le voir. Voilà comment ajouter les icônes sociales. Nous avons presque terminé, mais avant passer à rendre le site Web adaptatif, créons la page de contact. Donc, si je clique ici pour accéder à la page de contact. Voilà à quoi ressemble la page de contact. Voyons donc comment le construire dans la leçon suivante. Je te verrai bientôt. 35. Page de contact: I. Il est donc temps de créer la page de contact, et voici à quoi elle ressemble. Donc, pour en revenir à l'endroit d'où nous travaillons, allons-y. Avant de passer à cet endroit, rendons-le cliquable. Je vais sélectionner ceci. Accédez au lien du contenu, l'URL personnalisée, et je veux qu'il pointe vers la page d'accueil. Je vais donc sélectionner l' adresse de mon domicile, puis la mettre à jour. Prévisualisons les modifications. Maintenant, je peux cliquer dessus pour rentrer chez moi. Allons-y. Oh, attendez. Encore une chose. Nous devons ajouter un espace entre le pied de page et ce contenu Je dois donc modifier la page elle-même, pas la nourriture, la page. Je vais donc dire modifier avec Elementor. Allons-y. Et comme ce conteneur contient tout ce contenu, je vais sélectionner le conteneur lui-même. Marge avancée en bas. Donnons-lui 100. Mets-le à jour. Prévisualisons maintenant les modifications. Faire défiler la page vers le bas. Allons-y. Un bel espacement entre le contenu et le dossier. Passons maintenant à la page de contact, et voici à quoi elle ressemble par défaut. Passons à la page d'édition pour effectuer quelques configurations. Nous allons remplacer le modèle par défaut par un élément en pleine largeur. Allons ici et disons «   plein », sans barre latérale. Clôturons ces trois mises à jour. Éditons maintenant avec Elementor. Je vais fermer ça et ça aussi. Ça va. Laissons-le là. Il s' agit de notre éditeur de contacts. Jetons donc un coup d'œil à ça. C'est bon. Créons une double colonne comme celle-ci. Maintenant, ce sera 30 % et ce sera 70 %. Je vais cliquer dessus et ajouter un code abrégé sur un espace réservé. Parce que nous voulons déposer ici un formulaire créé avec le formulateur. Passons au formulateur et disons formulaires. Créez. Nous avons déjà le formulaire d'inscription. C'est maintenant le formulaire de contact. Permettez-moi simplement d'utiliser ce modèle. Poursuivre. Contactez Create. Allons-y. Il comporte quatre champs. Je n'ai besoin du numéro de téléphone de personne, donc je vais le supprimer. Nous avons maintenant leur prénom, leur e-mail et leur message. Ces deux sont des champs de saisie, et il s'agit d'une zone de texte multiligne. Il s'agit d'un champ de saisie d'une seule ligne. Ça, publiez. Copions ce code abrégé. Maintenant que nous avons cet élément de code abrégé, ajoutons-y ce formulaire. Maintenant c'est un affichage, mettez-le à jour. Créons également de l'espace ici. Sélectionnez le conteneur qui le contient. Cassez ça, et donnons-lui peut-être 50. Disons 60. Mets-le à jour. La prochaine étape est de changer cette apparence. Nous voulons passer à l'apparence, à plat, puis passer aux couleurs personnalisées. Donc, à l'heure actuelle, quand il est plat, il n'a pas ces bords durs. Mais maintenant, pour les couleurs, le bouton d'envoi devrait également obtenir les couleurs que nous avons utilisées la dernière fois. Copiez donc cette couleur rougeâtre par défaut, collez-la comme ça . Au survol, nous voulons que ce soit ce bleu marine Copiez-le au survol, posez-le là, et c'est parti Mets-le à jour. Passons en revue les modifications. Au survol. C'est bon Maintenant, si nous passons au front-end, alors que cette option est sélectionnée, appliquons. Et prévisualisons les modifications. Allons-y. Maintenant, augmentons la marge du pot sur ce contenant. Donc 100. Mets-le à jour. Prévisualisons les modifications. Juste comme ça. Maintenant, il est bien aligné au centre. Ensuite, pourquoi ne pas les arrondir ? Ce sont des champs de saisie, n'oubliez pas, et il s'agit d'une zone de texte. Donc, si nous revenons ici et que nous faisons défiler l'écran jusqu' aux paramètres personnalisés, nous avons un sélecteur de champ de saisie et un sélecteur de zone de texte Ainsi, pour tous les champs de saisie, nous voulons que le rayon de la bordure soit de cinq pixels, et non de 50. Et si nous prévisualisons cela, les deux champs de saisie sont arrondis. Maintenant, faisons-le pour la zone de texte. Le sélecteur de zone de texte. Cinq cellules de pointe. Allons-y. est Forminator Et je me souviens que le sélecteur de boutons est Forminator Button Submit. Je le sais parce que je l' utilise tellement de fois. Je m'en souviens. Je voulais juste vous montrer comment le récupérer depuis le front-end lorsque nous avons créé le formulaire d'inscription. La plupart du temps, cela restera toujours le bouton Forminator, « Soumettre » Répétons la même chose. Cinq cellules de pointe. Allons-y. C'est bon. Alors bien sûr, pour la largeur, donnons-lui 100 %. Passons cela en revue. Allons-y. Mets-le à jour. Allons le sélectionner et appliquer les modifications. Passons ensuite en revue les modifications apportées au front-end et c'est parti. Alors maintenant, bien sûr, vous remarquerez que nous avons cette barre latérale. Mais nous avons eu ce petit problème avec ne sont pas extraits de l'endroit où ils sont censés être extraits. Voyons ce qui va se passer. Donc, si nous accédons à la page d'accueil sur un nouvel onglet, la molette centrale de la souris et que nous l'ouvrons, je veux modifier avec Elementor of Canvas le contenu C'est quoi ça ? Je veux faire défiler la page ici. Pourquoi avons-nous ça ? Oh, ouais. Maintenant, après l'avoir actualisé, nous pouvons maintenant saisir les catégories. C'est génial. Alors maintenant, parlons de productivité. Supprimer cette catégorie. Et affichons la productivité directement sur la page d'accueil. Alors maintenant, laissez-moi sélectionner cette copie avec le bouton droit de la souris. Allons-y ici. Sélectionnez ce clic droit pour coller. C'est bon. Maintenant, laissez-moi sélectionner ceci, fermer ceci, et maintenant lequel devons-nous sélectionner ici ? Disons récemment en vedette. En vedette, nous n'en avons qu'un. Nous pouvons nous en assurer en consultant ici les articles. Je souhaite qu'un plus grand nombre de ces articles figurent dans la catégorie des articles en vedette Je vais donc modifier rapidement chacun d'entre eux. Modification rapide. Ils devraient également être dans la fonctionnalité, mettre à jour également, édition rapide, mise à jour en vedette qui. Enfin, une petite mise à jour. D'accord. C'est bon. Alors maintenant, si nous mettons cela à jour. Et laissez-moi simplement le sélectionner et l'appliquer afin que toutes les modifications puissent s'appliquer depuis le back-end. Allons-y. Il nous en reste donc trois. C'est bon. Alors maintenant, limite de publication, nous sommes censés en avoir quatre. Cela se comporte mal maintenant. Je me suis mal comporté il y a un instant. C'est bon. Je ne pense donc pas que je vais continuer à battre pour trouver une solution à ce problème. Mais je pourrais probablement ajouter une leçon supplémentaire ici après toutes ces autres leçons. Une fois que j'ai fait mon dépannage et que j'ai trouvé une solution à ce problème. Alors ne t'inquiète pas, au moins tu sais comment aller jusqu'ici. Prévisualisons donc les modifications une fois de plus. Maintenant, nous avons besoin d'un peu d'espacement ici. Augmentons donc cet écart, sélectionnez cet écart 30. Mettons-le à jour. Prévisualisez les modifications. Allons-y. En gros, c'est tout ce que j' avais pour toi dans ce cours. Si je trouve une solution à ce problème, je la partagerai. Si ce n'est pas le cas, je trouverai une autre façon d'afficher ces articles récents. Alors ne t'inquiète pas. Vous le trouverez quelque part dans la liste des leçons, je crois, à la fin, en tant que leçon bonus. Je vous verrai donc dans la prochaine leçon où nous aborderons l'en-tête réactif. Alors n'allez pas trop loin. 36. Afficher les messages récents dans la barre latérale: J'ai fait une courte pause dans l'enregistrement de ces leçons, et quand je suis revenue, j'ai eu l'esprit neuf et j'ai trouvé une solution pour afficher ces articles récents. Je veux donc vous montrer comment procéder. Revenons donc au rédacteur en chef, je m'entraînais, et voici je m'entraînais, ce que j'ai trouvé. Je pense que ça a l'air bien mieux que d'aller à la page d'accueil. OK. Et regardez l'original. C'est l'original. Et si je vais sur le site de référence, c'est ce que nous avons sur le site de référence. Ça a toujours l'air bien aussi. Cela a l'air génial, mais nous allons en fait faire moins de travail que je ne le faisais pendant que je le créais. heure actuelle, pendant que nous créons les nouveaux articles récents, nous allons faire moins de travail que ce que nous aurions fait. Alors maintenant, voici un article de blog élément par kit. Je vais donc simplement taper Laissez-moi simplement supprimer ceci. Et ici, je vais taper blog. Donc, parce que nous avons installé un kit d' éléments, il y a cet élément d' articles de blog. Alors, glissez-le et déposez-le juste en dessous de ce titre. Et ça viendra avec tout ça. Ça a l'air effrayant. Vous vous demandez peut-être comment allons-nous modifier cela. Mais ne vous inquiétez pas. Donc, tout d'abord, passons à l'affichage du contenu, disons non. Nous ne montrons donc pas cet extrait. Deuxièmement, nous voulons passer au style. Réduisons le wrapper, passons au titre et réduisons la typographie, le texte du Alors laisse-moi juste faire glisser ça. Laisse-moi juste en rester là pour le moment. Nous allons jouer avec ça. Mais au moins maintenant, comme vous pouvez le constater, il commence à s'intégrer dans un espace plus restreint. L'autre point est que si nous accédons à la liste des publications, aux publications que nous avons créées, souvenez-vous que nous avons créé ce contenu hors Canvas afin de pouvoir l'afficher ici sur le côté. Nous l'avons donc créé sous forme de publication, et il est actuellement dans la catégorie Non classé. C'est pourquoi il apparaît ici. Parce que si nous le sélectionnons et que nous passons au contenu, réduisons la mise en page et passons à la requête. Vous voyez que la catégorie « Non classé » figure dans la liste des publications à afficher. Supprimons donc Uncategorized. Regardons également les fonctionnalités. En fait, permettez-moi simplement de le supprimer car il est classé. Il doit rester tel que présenté. C'est bon. Donc, en revenant ici, supprimons également les fonctionnalités. Voici en vedette. Supprimons cela. Cela signifie que la publication hors Canvas ne sera pas affichée ici car nous n'affichons pas les publications en vedette. La prochaine chose que nous voulons faire est de passer aux métadonnées. Voyons si nous pouvons changer quelque chose ici. Non, mise en page. Donc, en entrant ici, c'est ici que nous allons apporter quelques modifications. Donc, tout d'abord, cassons le rembourrage sur ce fond, cette boîte. C'est l'emballage. Donc, rembourrage du conteneur. Augmentons la marge sur les récipients situés sur le dessus pour les espacer. Donc, marge du conteneur. Décomposons cela, puis augmentons la marge supérieure pour les espacer. 15, c'est bien. Alors augmentons également le rembourrage supérieur. Jusqu'à 15 et rembourrage inférieur 15 également. Parce que n'oubliez pas que nous essayons de faire en sorte que, comme vous l'avez vu dans mon exemple, cela ait été un peu repoussé. Permettez-moi de passer à l'emballage et d'agrandir l'image en vedette. Passons à la gauche principale. Réduisons-le pour le pousser légèrement vers la gauche. Mais sélectionnons le conteneur qui les contient. Brisez également la marge. Réduisez légèrement la marge de droite car nous voulons équilibrer cet espacement avec cet espacement par rapport à l'image, non par rapport au fond blanc lui-même C'est bon. Cela dit, pendant qu'il est encore sélectionné, revenons à l'intérieur du style. Passons au titre. Marge. Augmentons la marge en haut. Donnons-en dix, et réduisons la marge de gauche. Revenons au rappeur, augmentons le rembourrage sur la droite pour le pousser ce côté afin de créer plus d'espace, comme ça Mais réduisons également le rappeur pour augmenter la taille du titre. Typographie du titre. Je vais cliquer ici et utiliser la touche ap de mon clavier pour l' augmenter progressivement. Je pense que c'est une bonne taille. Ensuite, je vais également augmenter la hauteur de la ligne avec la flèche de mon clavier. Je pense que c'est une bonne taille. Disons 16 maintenant pour revenir à l'intérieur de l'emballage, réduisons en fait, c'est de retour dans le titre, dans la marge supérieure Réduisons cela jusqu'à ce point. Donc, pour en revenir au contenu interne, comme vous pouvez le voir en ce moment, je ne montre que trois articles, mais si nous allons dans une requête interne, nous avons le nombre de publications. Nous pouvons peut-être augmenter ce chiffre à six et nous en aurons six affichés ici. Maintenant, bien sûr, certains titres sont plus longs que les autres, et ils ne sont donc pas équilibrés comme ça. Je pense que c'est à vous de jouer avec le nom de vos articles pour qu'ils aient à peu près la même longueur en termes de mots afin qu'ils aient un aspect uniforme, comme les trois premiers. Donc, si nous supprimons ces deux éléments qui débordent au-delà de l'image, nous allons créer ces trois Et maintenant ça a l'air bien. Alors laissez-moi dire mise à jour, et prévisualisons les modifications. Nous y voilà donc. Je trouve que ça a l'air génial. Et bien sûr, si vous cliquez sur l'un d'entre eux, ils ouvriront l' article afin que vous puissiez lire comme vous pouvez le voir les scories ici Alors revenons ici. Je pense que c'était Oui, nous avions déjà créé ce billet de blog, et je pense que nous avons oublié d'ajouter une belle marge sur notre modèle. Ainsi, chaque fois que nous ajoutons le modèle à un article de blog pour le créer, il n'y aura toujours pas cet espace ici. Modifions-le donc très rapidement avant de quitter ceci. Très bien, je vais donc sélectionner ce conteneur qui contient tout. Il contient tout ce qui se trouve jusqu'à cet endroit. Je vais passer à la marge avancée inférieure à 100. Mets-le à jour. Passons en revue les modifications. En faisant défiler l'écran jusqu'en bas. Maintenant, nous avons un bon espacement. Maintenant que nous avons ce billet de blog mis à jour, nous devons nous débarrasser de l'ancien modèle et enregistrer le nouveau. Une fois cette option sélectionnée, je vais corriger le modèle d'enregistrement. Nouveau modèle de billet de blog, Enter. Et supprimons l'ancien modèle de billet de blog. Supprimez-le. supprimer ne supprimera pas les articles de blog qui l'utilisent. C'est bon. Maintenant, pour y revenir, je voudrais aller à la page d'accueil. Et je souhaite la remplacer par la nouvelle barre latérale des articles récents que nous avons créée. Modifiez donc avec un élément. Faisons défiler la page jusqu'ici, puis je vais le supprimer. Retournez ici. Cliquez sur ce conteneur, cliquez avec le bouton droit de la souris sur Copier. Retournez ici. Sélectionnez ce conteneur, cliquez avec le bouton droit de la souris sur Coller. C'est donc collé là-dedans. Nous pouvons maintenant le sélectionner et dire, peut-être que nous voulons une requête interne, que nous voulons afficher uniquement la productivité. Je vais donc me débarrasser de ces autres. Et maintenant, il ne nous reste que des articles sur la productivité. Je peux appeler cela des articles sur la productivité. Sélection du style, de la typographie, flèche vers le bas du clavier pour réduire la taille, mise à jour Passons en revue les modifications. Faire défiler la page vers le bas. J'aime bien ça. Donc ça a l'air génial. Maintenant, dans la leçon suivante, je veux que nous continuions et si nous allons sur notre site Web de référence, bien sûr, comme vous pouvez le voir, nous avons ce formulaire d'inscription. Nous avions déjà un autre formulaire d' inscription ici, mais nous en avons un autre ici. Je veux vous montrer comment construire cela dans la prochaine leçon. Alors n'allez pas trop loin. À bientôt. 37. Section d'inscription de la page d'accueil: Il est donc temps de créer ce formulaire ou cette section d'inscription à ma liste d'envoi. Pour en revenir à notre espace de travail, nous y voilà. Pendant que nous sommes encore en train de modifier la page d'accueil. Il est très facile d' ajouter cette section. Donc, tout d'abord, je vais sélectionner cette copie avec le bouton droit de la souris. Sélectionnez ce conteneur ici, cliquez avec le bouton droit de la souris sur Coller. Maintenant, nous l'avons collé là-dedans, et débarrassons-nous de ça Maintenant, bien sûr, je vais juste prendre un code court. Et déposez-le là-dedans. Et maintenant , n'oubliez pas que nous avons déjà créé un formulaire d'inscription. Tout ce que nous avons à faire est récupérer le code court depuis le backend. Donc, pour en revenir ici, forminator se forme. Et nous avons un formulaire d'inscription. Nous n'avons pas besoin de l'ouvrir. Nous n'avons pas besoin d'aller pour modifier. Nous pouvons cliquer sur cette roue dentée copier le code court et revenir ici Collez ce code court dedans, et voici notre formulaire. Il ne nous reste plus qu'à le styliser pour qu'il ressemble à ceci. Tout d'abord, laissez-moi prendre cette copie qui, sélectionnez-la, double-cliquez ici, collez-la. Consultez les derniers articles, copiez-les. Je veux prendre un éditeur de texte et le déposer juste là. C'est bon. Je vais double-cliquer dessus, puis contrôler la touche V pour y coller ce texte. Sélectionnez. Tant que cette option est toujours sélectionnée, je vais passer à l'option avancée, rompre ce lien juste là. Puis marge inférieure. Réduisons-le jusqu'à ce point. Sélectionnez cette option, augmentez la taille de la typographie. Jusqu'à cet endroit. Permettez-moi de le réduire à 40 peut-être. Mets-le à jour. Je veux aller chercher ma couleur ici, le bleu marine. Non, c'est censé être blanc, au fait. Oui, ce texte est censé être blanc. Alors, tout d'abord, rendons le fond bleu marine. Donc, en sélectionnant ce style de conteneur, coloriage. Sélectionnez les textes, les blancs sélectionnent ces textes. White, mise à jour. En fait, nous devons ajouter un peu d' espacement ici alors que c'est encore sélectionné, passer au mode avancé, supprimer pour pouvoir modifier les cellules individuelles, marge supérieure, peut-être jusqu'à cet endroit, et d'ailleurs, nous avons oublié d'augmenter l'espacement entre les deux Je vais donc sélectionner le conteneur contenant les deux conteneurs, et je vais passer à la mise en page. Disons 30. Maintenant, nous avons un bon espacement. Je vais devoir réduire la taille jusqu'à cet endroit. Tant que cette option est toujours sélectionnée. Bien sûr, tout d'abord, enregistrons et prévisualisons les modifications. Faire défiler la page vers le bas. Ça me plaît. Mais je veux le voir lorsque je suis déconnecté. Laissez-moi le copier. Puis, contrôlez la touche Shift pour ouvrir une fenêtre de navigation privée. Ensuite, j' y collerai l'URL pour l'afficher en tant qu'invité. Faire défiler la page vers le bas. Oui, nous avons donc trop d'espace ici. Allons-y et réduisons ce chiffre en sélectionnant cette marge inférieure avancée, en réduisant à peut-être 15, moins 15. Permettez-moi d'aller ici et de me rafraîchir. Nous avons maintenant une quantité équilibrée d'espace ici et là-haut. Ainsi, sur les côtés, nous pouvons également augmenter le rembourrage. Disons qu'à gauche et à droite, nous avons besoin de. T. Mettez cela à jour. Prévisualisons les modifications. Exactement. Nous y voilà. Voici donc comment ajouter la section d'inscription à notre page d'accueil. Les utilisateurs peuvent le faire lorsqu' ils font défiler l' vers le bas et qu'ils aiment déjà les articles qu'ils consultent Ils recevront ce formulaire et on leur demandera de s'inscrire. À ce moment-là, il est très facile de les inciter à s'inscrire, car ils peuvent voir les avantages de l'inscription. La prochaine chose que je veux faire est de changer la couleur de cette adresse e-mail. Mais si nous le faisons, nous le rendons blanc, parce que nous utilisons le même formulaire d'inscription, il sera également blanc ici parce que c'est le même formulaire d'inscription. Si nous voulons que l'étiquette présente ici, adresse e-mail, soit blanche, et la laisser en gris foncé, nous devons créer et la laisser en gris foncé, nous devons créer un autre formulaire d'inscription ressemblant à ceci. Alors revenons ici. Formulaire d'inscription, roue dentée. Nous pouvons dupliquer cette copie du formulaire d'inscription. Je veux donc modifier ceci. Modifions-le en Formulaire d' inscription sur page. Mets-le à jour. Passons à l'apparence, aux couleurs, aux bases du champ, à l'étiquette. Nous voulons que l'étiquette soit blanche. Si nous prévisualisons cela, maintenant que l'étiquette est blanche, c'est pourquoi nous ne pouvons pas la voir car le fond est blanc, mettez à jour. Maintenant, si nous revenons ici et sélectionnons le formulaire, cliquez ensuite sur Appliquer. Les modifications se répercuteront désormais sur ce formulaire en particulier. faisant défiler l'écran vers le bas, laissez-moi En faisant défiler l'écran vers le bas, laissez-moi l'actualiser. Que se passe-t-il ? Art du contrôle. Je ne sais pas pourquoi ce n'est pas le cas Oh, attends. Nous utilisons toujours le même code abrégé. Mais ici, cela a un code abrégé différent. Permettez-moi donc de copier ce code court. Retournez ici et collez le nouveau code court. Comme vous pouvez le voir, il est passé de 3809 à 4809. Alors maintenant, c'est blanc. Mettez-le à jour, prévisualisez les modifications. Maintenant, c'est blanc, et ici, c'est toujours gris parce que ce sont deux formulaires d'inscription différents qui semblent identiques. J'espère donc que vous comprenez la différence. Donc, en gros, voici comment ajouter le formulaire d'abonnement ou d'inscription à la page d'accueil. Dans la leçon suivante, nous allons commencer créer l'en-tête réactif. Faisons en sorte que cet en-tête soit réactif sur différentes tailles d'appareils. Il s'affiche déjà bien sur les écrans de bureau. Maintenant, faisons en sorte qu'il soit beau sur tablette et téléphone portable. Je te verrai donc bientôt. 38. En-tête réactif: Il est temps de rendre le site web adaptatif et nous allons commencer par l'en-tête. Donc, avant de commencer à travailler sur la réactivité, examinons à quoi elle ressemble sur différents appareils Donc Control Shift pour afficher les outils de développement, donc Control Shift sur mon clavier, allons-y et cliquons sur ce bouton réactif Lorsque je clique dessus, nous pouvons basculer entre vue normale et les simulations d'appareils Et ici, dans ce menu déroulant, nous pouvons simuler différents types d'appareils. On peut le regarder depuis un iPhone 14 max. Voilà à quoi ça ressemble. Regardons-le sur un iPad mini. Voilà à quoi ça ressemble. Voici donc l'en-tête d'un iPad mini qui n'a pas l'air très beau. En fait, passons à la fenêtre de navigation privée. Où se trouve ma fenêtre de navigation privée ? C'est ici. Je veux que nous soyons déconnectés, car lorsque vous êtes connecté, nous avons cette barre bien enfoncée qui nous empêche de voir sur quoi nous travaillons Donc, en passant à la fenêtre de navigation privée, par le contrôle, voilà à quoi ça ressemble Revenons donc à l'iPhone 12. Voilà à quoi ça ressemble. Commençons donc par l'en-tête. Fermez ceci en même temps que cela parce que nous en avons fini avec tout cela. Pour commencer avec l'en-tête du kit Elements, passons aux kits Elements Je vais cliquer sur Modifier avec Elementor ici, puis cliquer avec le bouton droit sur Ouvrir le lien dans un nouvel onglet Et nous y voilà. Donc, si je le sélectionne, nous pouvons passer en mode réactif, alors cliquez sur cette icône, qui révélera les différents modes. Cela fonctionne déjà bien sur ordinateur, alors passons aux tablettes. Voilà à quoi ça ressemble sur la tablette dans notre éditeur. Nous pouvons donc laisser ce bouton là. Mais maintenant, ce que je veux que nous fassions, c'est sélectionner cet élément de menu. OK. Laissez-moi choisir à l'extérieur. C'est un peu difficile à sélectionner, alors je vais appuyer sur Ctrl pour faire apparaître le navigateur. OK. Et oui, il est effectivement sélectionné. Je veux passer à Avancé, puis supprimer les paramètres que nous avons définis pour le bureau. Comme vous pouvez le constater, ils sont gradués, mais si nous passons à l'ordinateur de bureau, ils sont désormais actifs car nous modifions le bureau Si nous passons à la tablette, ils sont notés pour nous indiquer que ce ne sont pas les paramètres de la tablette. Je vais le casser. C'est comme le réinitialiser, et je trouve que ça a l'air bien. Mets-le à jour. Et maintenant, passons à cette fenêtre de navigation privée, actualisons-la. Passons à l'iPad Mini, et voilà à quoi ça ressemble. Mais ça a l'air bizarre sur un iPad mini. Alors laisse-moi clore ça. Voilà à quoi ressemble le menu sur un iPad Mini. Retourner ici. Allons-y et ajoutons notre logo ici. Accédez donc au contenu, aux paramètres du menu mobile, au logo du menu mobile. Sélectionnons le logo et mettons-le dedans, mettons à jour. Maintenant, quand on ouvre le menu, ça a l'air bien. Mais nous pouvons ajouter une marge sur la gauche, donc styler, réduire l'emballage du menu, logo du menu mobile, la marge, casser ça Ouvrons-le à nouveau. Marge droite à gauche. Enfonçons-le un peu vers l'intérieur. Mets-le à jour. Nous pouvons également augmenter la largeur pour l' agrandir, mettez à jour cela. Je pense que je l'aime bien jusqu'à présent. Passons à l'affichage mobile. Et c'est à ça que ça ressemble sur mobile. Donc, à l'heure actuelle, ce contenant qui porte le logo, pendant que nous sommes ici, en occupe 25 %. Mais lorsque nous passons à la vue mobile, elle occupe 100 % de la page de gauche à droite. Nous voulions occuper 25 % à 50 %. Donc, en sélectionnant cela, passez ici au pourcentage, puis à 50 %. Et ce conteneur mobile devrait également occuper 50 %. Juste comme ça. Ensuite, nous pouvons laisser ce bouton là. Mettre à jour. Ne prévisualisons pas les modifications ici. Passons à cette étape. Actualisez la fenêtre de navigation privée Passons à l'iPhone 12. Ne t'inquiète pas pour ça. Cela est dû au texte et au contenu. C'est pourquoi tout est poussé vers la gauche. Mais comme vous pouvez le constater, ils sont bien structurés. D'accord, maintenant ça a l'air beaucoup mieux. Je peux le fermer. Si j'ouvre le menu, c'est comme ça que sont les menus. Augmentons la taille du menu mobile. Ouvrons-le. Accéder au logo du menu mobile avec mise à jour ? Aperçu ? J'y suis habitué. Alors rafraîchissez-vous. Maintenant, ouvrons-le. Le logo est bon. Maintenant, tout est poussé vers la gauche car, comme vous pouvez le voir, le H est trop large. Donc, la file d'attente devrait se situer quelque part ici. Tout devrait être parfaitement ajusté sans cet espace blanc. Revenons donc ici et confirmons que tout le reste va bien avant de terminer. Je pense que nous avons maintenant un bel en-tête sur tous les appareils. Oui, sur tous les appareils, l'en-tête est beau. Voici donc comment rendre l'en-tête réactif sur différentes tailles d'appareils. Dans la leçon suivante, nous allons voir comment faire de même pour la page d'accueil et tout son contenu avant de passer au dossier. Je te verrai donc bientôt. 39. Pages réactives: Il est donc temps de rendre la page de destination réactive. Donc, parce que nous en avons fini avec l'en-tête. Je vais juste appuyer sur l' aperçu des modifications pour pouvoir cliquer sur ce bouton d'accueil. Fermez ensuite cet éditeur. Alors maintenant, nous pouvons modifier cette page elle-même avec Elementor. Et nous y voilà. Alors laissez-moi fermer le navigateur. Et maintenant, cliquons sur le mode réactif et passons à la tablette. Voici à quoi ça ressemble sur tablette. Faisons simplement défiler la page jusqu'en bas. C'est bon. Commençons donc par cette section des meilleurs héros, en la sélectionnant. Je vais passer en mode avancé. Ensuite, nous voulons conserver ce rembourrage supérieur et inférieur. Donc, si je le casse, nous devrons taper 50 à nouveau et 80. Maintenant, disons 60 ici sur des tablettes. Mais sur les côtés, nous voulons lui donner peut-être 30 et l'autre 30. Sélectionnez-le et mettons-le au milieu. Juste comme ça. Sélectionnons ce conteneur qui contient tout le reste. Donnons-lui également un rembourrage de 20 sur les côtés, à gauche. Et 20 sur la droite, juste comme ça. Maintenant, lorsque nous le sélectionnons, sur ordinateur, il est dans ce format sur tablette, il passe au style grille, et nous ne voulons pas cela. Nous voulons conserver la mise en page d'origine. Donc, pour entrer ici, nous voulons une colonne. Et nous devrions être sur place. Pourquoi y a-t-il des cartes d'effet ? Je pense que c'est parce que nous n'avons pas assez de largeur comme sur un ordinateur de bureau. Je veux dire, c'est très large. Et ici, nous n' avons pas assez d'espacement pour avoir une image et tout ce contenu sur la gauche Je ne pense pas que nous puissions appliquer la même mise en page lorsque nous avons une image et le texte à droite en mode bureau. Je pense donc que nous allons devoir optimiser son apparence. Donc, ici, nous l'avons configuré sur place, et je pense que j'en suis satisfait. La seule chose que je voudrais faire, c'est séparer un peu les choses. Tellement de style. Passons au contenu. Revenons maintenant au contenu et aux options d' affichage, à l'espacement des lignes Augmentons ce chiffre. Cela fait 20, disons 30 pour séparer chaque post du précédent. Je pense que j'aime ça. Au lieu de prévisualiser cela, réduisons d' abord l'écart entre les deux colonnes En sélectionnant cette option, accédez à la mise en page. L'écart ici devrait être de dix. En fait, aucun écart, zéro. Laisse-le comme ça. En fait, je pense que nous pouvons faire en sorte que cela occupe 40 % de l'espace. En cliquant sur ce 40 %. En fait, disons 50 % et cet autre côté occupera également 50 %, juste comme ça. Et on peut laisser ça là. Nous pouvons probablement y ajuster la taille de la tuile, Typographie Non, nous pouvons le laisser à cette taille, mais réduire la hauteur de la ligne. Mettez ça à jour. Revenons maintenant à la fenêtre de navigation privée de notre simulateur Je vais rafraîchir cette page. Et puis prévisualisons-le sur un iPad mini. Passons-en en revue sur un iPad Pro. Voilà à quoi ça ressemble sur un iPad pro. Surface Pro, iPad Air. Maintenant, il semble que lorsque nous l'affichons dans la fenêtre de navigation privée ou lorsque nous nous déconnectons de l'éditeur, nous sommes en mesure de conserver la mise en page côte à côte, mais je pense que l' autre mise en page beaucoup plus logique que d' avoir cette image étroite Au moins, nous pouvons maintenant comprendre pourquoi ce n'est pas une bonne idée d'avoir le texte et l'image côte à côte. Eh bien, c'est sélectionné. Passons au contenu. Disons des cartes. Et qu'en est-il des classiques ? Très bien, mettons-le à jour. Et revenons ici, actualisons-le. Nous y voilà. Voilà à quoi ça ressemble. Je pense que ça a l'air bien mieux que ce que nous avions avant. Oui, ça a l'air bien. Voyons maintenant comment le rendre responsive sur téléphone mobile. Je vais donc sélectionner cette typographie de style de texte. Réduisons également la hauteur de la ligne à cet endroit. Je pense que tout le reste va bien dans cette section consacrée aux héros, nous pouvons réduire cela, je pense qu'il faut en rester là. Faire défiler la page vers le bas. Voici les articles du blogue. L'abonnement vient avant cela, et c'est pourquoi nous voulions le conserver dans ce conteneur sur le côté gauche, car ce conteneur s'effondrera et viendra après ce conteneur. Pour en revenir à l'affichage mobile, nous voulons maintenant augmenter cet espace, en sélectionnant ce conteneur, en passant au mode avancé, cassant la marge et en augmentant la marge supérieure jusqu'à cet endroit, peut-être. Maintenant, c'est équilibré. Faire défiler Nous devons faire quelque chose à ce sujet, je vais donc sélectionner ce style. Arrêtons d'augmenter le rembourrage inférieur. Pendant que nous sommes encore sous silence. Passons au titre. Brisons les paramètres par défaut que nous avions définis, juste comme ça. Mettons tout au centre. Revenons à l'emballage et augmentons le rembourrage à gauche et à Disons cinq. Non, ça fait 50. Disons dix et à droite, dix, cela pousse tout vers l'intérieur de dix ou dix Ensuite, pour l'image en vedette, réduisons cette marge. Supprimez cette marge que nous avions définie. Et définissons une marge inférieure pour pousser le texte vers le bas. Réduisons la marge supérieure pour pousser l'image vers le haut et hors du fond blanc. Revenons maintenant à l'intérieur de l'emballage et réduisons la marge inférieure sur le fond blanc Disons 20. Je pense que ça a l'air bien mieux. Sélectionnez ce titre, stylez, centralisez les textes, avancé, marge inférieure Poussons les choses vers le bas. Passons également à la typographie, augmentons légèrement la taille, 20 mais réduisons la hauteur de la ligne OK. Mettez ça à jour. Faire défiler Dans la prochaine leçon, nous allons travailler sur le dossier. Mais revenons maintenant à cette page et actualisons le simulateur. Passons maintenant à l'iPhone 14. Voilà à quoi ça ressemble sur un iPhone 14. C'est ainsi que le blog publie sur un iPhone. Bien entendu, il ne s'agit que d'une illustration du fonctionnement de ces outils. Nous n'allons pas avoir un site Web parfait pour le moment. À vous de prendre le temps de pimenter le tout et utiliser tous ces paramètres pour que tout soit parfaitement ajusté. Par exemple, je pense que ce texte est un peu trop petit, nous pouvons donc l'augmenter légèrement. Mais je m' attends à ce que tu t'occupes de ces choses. En sélectionnant cela, en sélectionnant le style, en réduisant l'habillage ou en passant à la typographie du titre, augmentons la taille du texte ainsi que la hauteur de ligne C'est trop. Disons que d'ici là, mettez à jour. Voici donc certaines des choses dont vous auriez besoin pour prendre temps de vous améliorer. Et toutes les autres parties dont nous avons peut-être oublié de nous occuper. C'est ce que je fournis, c' est juste un guide sur la façon de faire ces choses pour vous aider à garder l'état d'esprit, sur la façon de créer un bon site Web. Nous y voilà donc. Maintenant, vous pouvez continuer et faire quelque chose à propos de cette partie. Permettez-moi de terminer avec ça. En sélectionnant ceci. Faisons en sorte qu'il occupe peut-être 40 % et cela peut-être 60 %. Je ne sais pas pourquoi il ne monte pas, censé s'effondrer ici parce que nous avons assez d'espace. Faisons en sorte qu'il occupe 100 %. Et cela peut également occuper laissez-moi passer à l'état avancé, supprimer cette marge, puis augmenter sa largeur. Et mettez-le à jour. Comme vous pouvez le constater, ceux-ci sont plus poussés vers l'intérieur que le texte et le titre En sélectionnant cette option avancée, coupez cette marge vers la gauche. Faisons de même pour cela. Marge avancée à gauche. Mettez ça à jour. Voyons maintenant cette actualisation. Nous y voilà. Je pense donc que c'est suffisant pour le moment. C'est à vous d'aller de l'avant et de jouer avec ça. Réduisons également la marge supérieure à ce sujet. Oh, attendez, sélectionnons ce texte, passons au mode avancé, réduisons la marge inférieure pour faire apparaître l'image . Mettez ça à jour. Actualisez-le. C'est bon. Je pense donc que c'est beaucoup mieux pour le moment, mais n'hésitez pas à continuer à modifier tous les paramètres pour obtenir de meilleurs résultats Dans la leçon suivante, voyons comment rendre les aliments réactifs. Je te verrai donc bientôt. 40. Pied de page réactif: Il est donc temps de rendre le pied de page réactif. Passons donc à l'édition avec Elementor, puis modifions le pied de page Très bien, alors allons-y. Passons maintenant au mode réactif, et je souhaite passer en mode tablette car cela fonctionne déjà bien sur ordinateur de bureau. Nous y voilà. Donc, ce que je veux faire, c'est lui donner un peu de rembourrage sur les côtés. Oui, alors allons-y. Pendant que ce conteneur lui-même est sélectionné, passons au mode avancé Nous voulons conserver ce rembourrage supérieur et inférieur, mais en ajouter 20 sur les côtés Alors cassons les 20, 20 qui restent. Alors peut-être 50. Non, en fait, disons 40 et top 40. C'est bon. Allons-y. Ça a donc l'air bien sur une tablette. Passons au mobile. Voilà à quoi ça ressemble sur un mobile. Je vais sélectionner ce texte, passer au style. Mets-le au milieu. Ajoutons une marge sur le dessus pour le séparer du logo. T est bon. Et mettons-les également au milieu. Pouvons-nous les y laisser ? Oui, je pense que nous devrions les laisser là parce que je trouve qu'ils ont l'air bien. Mais sélectionnons ce conteneur contenant les liens rapides Advance. Je souhaite augmenter encore le rembourrage supérieur. En fait, ramenez-le à zéro et augmentez plutôt la marge supérieure. Juste comme ça, mettez à jour. Passons en revue les modifications. Disons Control Shift, et c'est à cela que cela ressemble sur une tablette. Je ne veux pas les mettre au milieu car voyons à quoi ils ressembleront, en sélectionnant ce style, en les plaçant au centre. Comme vous pouvez le constater, ils ne sont pas correctement alignés. Si nous sélectionnons ces liens rapides. Allons le centraliser, le mettre à jour. Allons ici et examinons les changements. Au fait, je trouve que ça a l'air génial. Je vais donc en rester là. Vous pouvez utiliser, vous pouvez revenir à l'autre mise en page ou la laisser au milieu comme ça. Donc, si nous cliquons dessus pour rentrer chez nous, ou en fait, regardons-le également sur une tablette, un iPad mini. Allons au bas de la page. Voilà à quoi ça ressemble sur une tablette. Montons. Voilà à quoi ça ressemble. Voilà comment rendre le site web réactif, les différentes sections réactives sur les différents appareils. Maintenant, vous remarquerez que nous n'avons pas rendu ces autres pages réactives, et bien sûr, c'est un exercice pour vous. Dans chaque cours que je publie, je vous laisse toujours un exercice. En utilisant les principes que nous avons utilisés pour rendre cette page d'accueil, l'en-tête et la photo réactifs, vous pouvez également rendre ces autres parties réactives, la page de contact, les articles. Enfin, nous avons également la page des vidéos, que je voulais vous donner à titre d'exercice. Cela fait également partie de l'exercice. Si nous allons sur le site de référence ici, c'est parti. Donc, vers le site de référence , comme vous l'avez déjà vu. Si nous allons sur la page des vidéos, nous avons quatre exemples de vidéos. Et si vous cliquez sur l'un d'entre eux, il apparaît et lit automatiquement une vidéo, et ils ont ces coins arrondis Et bien sûr, cette section sur les héros ressemble beaucoup à la section des articles, sur les héros. Cela signifie que vous pouvez simplement le copier. Mais pour les vidéos, vous devrez utiliser un élément vidéo. Alors revenons ici. Si nous allons ici et recherchons une vidéo, vous verrez différents éléments vidéo. Il y a cette vidéo d'Elements Kit, une autre de Element, la version gratuite d'Elementor, puis nous avons ce qu' est cette boîte vidéo Jouez avec eux et voyez lequel vous permettra d'obtenir un tel résultat. C'est un exercice pour toi. Juste au cas où vous auriez besoin d'une page vidéo pour votre blog. Mais si vous n'en avez pas besoin, vous n'avez pas besoin de travailler sur cette page. Nous avons donc rendu le site Web adaptatif. Vous aurez remarqué une chose si nous revenons à la page d'accueil, revenons à l'endroit d'où nous travaillons. Je souhaite basculer et quitter le mode réactif et actualiser cette page Maintenant, vous remarquerez que nous avons perdu notre mise en page qui avait l'image gauche et le texte du message à droite. L'image et le texte ne sont donc pas côte à côte. Et j'ai découvert que cet élément que nous avons utilisé pour créer cette grille ne possède pas les paramètres du mode responsive. Cela signifie donc que si vous le configurez pour qu'il ressemble à ceci, il ressemblera à ceci sur toutes les tailles d'appareils. Si vous le configurez pour avoir l'image gauche et le texte à droite, je ressemblerai à cela sur tous les appareils. C'est donc une lacune de cet élément. J'ajouterai peut-être une leçon supplémentaire plus tard pour vous montrer comment utiliser un élément différent qui ne présente pas cet inconvénient, où nous pouvons définir différentes mises en page pour l'affichage des articles de blog sur différents appareils Mais pour le moment, je pense que c'est suffisant. C'est acceptable. N'oubliez pas que notre objectif dans ce cours était comprendre comment utiliser Elementor et Word Press ensemble ainsi que des plugins supplémentaires pour créer un site Web entièrement fonctionnel Nous avons donc atteint notre objectif. Nous avons appris à utiliser ces outils. Maintenant, avant que tu ne partes, j'ai quelques dernières réflexions cruciales. J'ai envie de partager avec vous. Donc, si vous êtes avec moi jusqu'ici, je pense que vous voudrez entendre ce que j'ai à dire, alors je vous verrai bientôt. 41. Réflexions finales et prochaines étapes: Et bon retour. Je voudrais donc prendre un moment pour vous remercier de m'avoir rejoint dans ce cours et de m' soutenu du début à la fin. Il est très facile de commencer un cours ou un cours, mais c'est un jeu de balle différent pour terminer le cours. Beaucoup de gens abandonnent en cours de route ou sont occupés et oublient de terminer leurs cours. Mais tu as été avec moi jusqu'au bout. Je tiens donc à vous remercier d'être restée avec moi jusqu'au bout. Maintenant, je pense que pendant le cours, j'ai mentionné dans plusieurs leçons que vous devez faire certaines choses pour améliorer votre référencement, le référencement de votre site Web, l'optimisation des moteurs de recherche. Votre site Web restera invisible pour les moteurs de recherche à moins que vous ne l' optimisiez pour qu'il soit visible pour eux. Et il existe des moyens de rendre votre site Web plus visible pour les moteurs de recherche tels que Google et Bing. Mais c'est votre jour de chance car j'ai un cours de référencement complet qui vous montre comment optimiser votre site WordPress pour les moteurs de recherche. Maintenant que vous avez appris à créer un site Web avec Wordpress et Elementor, la prochaine étape logique à franchir est d'apprendre à rendre ce site Web visible pour optimisation des moteurs de recherche Alors jetez un œil à ce cours dans mon profil. Et je suis sûr que vous apprendrez une ou deux choses très cruciales à faire pour votre site Web et votre entreprise. Et avant que tu ne partes, je voudrais te demander un petit service. Si vous pouviez prendre un peu moins d'une minute accéder à l'onglet de révision en dessous de ce lecteur vidéo, j'aimerais avoir votre avis sur ce cours. Vos commentaires m' aideront vraiment à comprendre l'impact que j' ai sur mes étudiants. Cela aidera également les autres étudiants à savoir si ce cours répond bien à leurs besoins, car certains étudiants potentiels cherchent étudiants potentiels cherchent un moyen de créer un site Web et ils ne sont pas sûrs que ce soit un bon cours pour eux. Leur recommanderiez-vous de suivre ce cours ? Vous avez aimé ce cours ? Si oui, qu'est-ce que vous avez aimé dans ce cours ? Cela vous prendra moins d'une minute. Accédez simplement à l'onglet d'évaluation situé sous ce lecteur vidéo, et en moins d'une minute, vous pourrez y déposer vos commentaires, et nous vous en sommes vraiment reconnaissants C'est tout ce que j'ai pour toi pour le moment. Je travaille actuellement sur le prochain cours que je publierai dans une semaine ou deux. N'oubliez donc pas de me suivre pour être prévenu dès que je publierai un tout nouveau cours. Mais jusqu'à la prochaine fois, je ne vous souhaite rien le meilleur et je veux que vous restiez créatifs. bientôt. Paix.