{"id":23262,"date":"2025-04-05T12:47:22","date_gmt":"2025-04-05T04:47:22","guid":{"rendered":"https:\/\/www.szlogic.net\/?p=23262"},"modified":"2025-04-05T12:47:25","modified_gmt":"2025-04-05T04:47:25","slug":"wordpress-teaching","status":"publish","type":"post","link":"https:\/\/www.szlogic.net\/fr\/learn\/wordpress\/wordpress-teaching\/","title":{"rendered":"Cours WordPress Construire une page personnalis\u00e9e avec Elementor depuis z\u00e9ro"},"content":{"rendered":"<h1 class=\"wp-block-heading has-text-align-center\" style=\"margin-bottom:30px;font-size:31px\">Cours WordPress : Cr\u00e9er une page personnalis\u00e9e avec Elementor<\/h1>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"463\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png\" alt=\"wordpress\u6559\u7a0b\" class=\"wp-image-23271\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/wordpress\u6559\u7a0b-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Si vous souhaitez cr\u00e9er une page <strong><a href=\"https:\/\/www.szlogic.net\/fr\/learn\/wordpress\/what-is-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/what-is-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a><\/strong> \u00e0 la fois professionnelle et personnalis\u00e9e, sans \u00eatre frein\u00e9 par la complexit\u00e9 du code, alors l\u2019<strong><a href=\"https:\/\/www.szlogic.net\/fr\/learn\/wordpress\/basic-configuration\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/basic-configuration\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00e9diteur Elementor<\/a><\/strong> est l\u2019outil id\u00e9al pour vous. Ce tutoriel vous guidera pas \u00e0 pas depuis le d\u00e9but pour apprendre \u00e0 utiliser Elementor afin de mettre en page et construire les \u00e9l\u00e9ments d\u2019une page, rendant votre site WordPress plus esth\u00e9tique et fonctionnel. Il s'agit d\u2019un article p\u00e9dagogique destin\u00e9 \u00e0 cr\u00e9er et \u00e9diter une page WordPress depuis z\u00e9ro. Nous commencerons par cr\u00e9er une nouvelle page \u00e0 partir de l\u2019<strong><a href=\"https:\/\/www.szlogic.net\/fr\/learn\/wordpress\/wordpress-use\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/learn\/wordpress\/wordpress-use\/\" target=\"_blank\" rel=\"noreferrer noopener\">interface d\u2019administration WordPress<\/a><\/strong>, puis nous construirons successivement l\u2019en-t\u00eate, le contenu principal et le pied de page. \u00c0 l\u2019aide des composants visuels d\u2019Elementor, nous effectuerons la mise en page, l\u2019ajout de contenu, l\u2019ajustement du style, etc. Ce n\u2019est pas seulement une initiation, c\u2019est aussi un v\u00e9ritable exercice pratique. Bien que la plupart des op\u00e9rations puissent se d\u00e9rouler sans probl\u00e8me si vous suivez les \u00e9tapes, la cr\u00e9ation d\u2019\u00e9l\u00e9ments de page comporte souvent des impr\u00e9vus : conflits de plugins, anomalies de style, etc. C\u2019est pourquoi, en plus de savoir utiliser Elementor, il est important que les lecteurs d\u00e9veloppent une certaine capacit\u00e9 d\u2019observation et de r\u00e9solution de probl\u00e8mes, afin de r\u00e9ellement ma\u00eetriser cet outil puissant. Que vous soyez d\u00e9butant sur WordPress ou que vous cherchiez \u00e0 am\u00e9liorer vos comp\u00e9tences en \u00e9dition de pages, cet article vous fournira un guide pratique pour vous aider \u00e0 concevoir efficacement votre site web et cr\u00e9er ses \u00e9l\u00e9ments. Passons maintenant au sommaire de cet article avant d\u2019entrer dans le vif du sujet.<\/p>\n\n\n\n<p>Afin de permettre aux lecteurs d\u2019apprendre et de consulter plus efficacement, l\u2019auteur du blog a sp\u00e9cialement structur\u00e9 de mani\u00e8re syst\u00e9matique l\u2019article \u00ab\u00a0Enseignement WordPress : Construire une page personnalis\u00e9e avec Elementor depuis z\u00e9ro\u00a0\u00bb et l\u2019a organis\u00e9 sous forme d\u2019un sommaire clair. Chaque section pr\u00e9sente non seulement la hi\u00e9rarchie de l\u2019article de mani\u00e8re intuitive, mais int\u00e8gre \u00e9galement des liens d\u2019ancrage pour que vous puissiez acc\u00e9der en un clic \u00e0 la partie qui vous int\u00e9resse, revenir facilement en arri\u00e8re ou approfondir un sujet. Que vous souhaitiez suivre l\u2019apprentissage du d\u00e9but \u00e0 la fin ou localiser rapidement une \u00e9tape sp\u00e9cifique pendant la mise en \u0153uvre, ce sommaire r\u00e9pondra \u00e0 votre mani\u00e8re de lire souhait\u00e9e, assurant ainsi un apprentissage plus fluide et efficace. Voici le sommaire d\u00e9taill\u00e9 de l\u2019article :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"#new\">Cr\u00e9ation d\u2019une nouvelle page dans l\u2019interface d\u2019administration WordPress<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#fill\">Saisie du titre de la page<\/a><\/li>\n\n\n\n<li><a href=\"#custom\">Personnalisation du suffixe de l\u2019URL de la page<\/a><\/li>\n\n\n\n<li><a href=\"#level\">D\u00e9finir la hi\u00e9rarchie de la page<\/a><\/li>\n\n\n\n<li><a href=\"#publish\">Publication de la nouvelle page WordPress<\/a><\/li>\n\n\n\n<li><a href=\"#use\">\u00c9dition de la page avec Elementor<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#header\">Cr\u00e9ation d\u2019un fichier mod\u00e8le d\u2019en-t\u00eate (header et barre de navigation) dans le g\u00e9n\u00e9rateur de th\u00e8me Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#generate\">Acc\u00e8s au g\u00e9n\u00e9rateur de th\u00e8me Elementor<\/a><\/li>\n\n\n\n<li><a href=\"#template\">Ajout d\u2019un nouveau fichier mod\u00e8le dans l\u2019interface de gestion des mod\u00e8les d\u2019en-t\u00eate d\u2019Elementor<\/a><\/li>\n\n\n\n<li><a href=\"#select\">Choix d\u2019un style de mod\u00e8le d\u2019en-t\u00eate ou personnalisation compl\u00e8te du style<\/a><\/li>\n\n\n\n<li><a href=\"#navigation\">Utilisation des conteneurs Elementor pour la mise en page de l\u2019en-t\u00eate et de la barre de navigation<\/a><\/li>\n\n\n\n<li><a href=\"#edit\">\u00c9dition et cr\u00e9ation du contenu des \u00e9l\u00e9ments de l\u2019en-t\u00eate et de la barre de navigation<\/a><\/li>\n\n\n\n<li><a href=\"#settings\">Publication du mod\u00e8le d\u2019en-t\u00eate et d\u00e9finition des conditions d\u2019affichage<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#element\">Construction de la structure principale de la page avec Elementor et ajout d\u2019\u00e9l\u00e9ments de contenu<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#block\">Bloc de banni\u00e8re<\/a><\/li>\n\n\n\n<li><a href=\"#business\">Bloc de description des services<\/a><\/li>\n\n\n\n<li><a href=\"#product\">Bloc produits et services<\/a><\/li>\n\n\n\n<li><a href=\"#core\">Bloc de pr\u00e9sentation des avantages cl\u00e9s des produits<\/a><\/li>\n\n\n\n<li><a href=\"#brand\">Bloc histoire de la marque<\/a><\/li>\n\n\n\n<li><a href=\"#information\">Bloc des derni\u00e8res actualit\u00e9s<\/a><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong><a href=\"#file\">Cr\u00e9ation d\u2019un fichier mod\u00e8le de pied de page (footer) avec Elementor<\/a><\/strong>\n<ol class=\"wp-block-list\">\n<li><a href=\"#common\">Formes courantes de mise en page du pied de page<\/a><\/li>\n\n\n\n<li><a href=\"#component\">Composants fr\u00e9quemment utilis\u00e9s dans le pied de page<\/a><\/li>\n\n\n\n<li><a href=\"#display\">Publication du mod\u00e8le de pied de page et d\u00e9finition des conditions d\u2019affichage<\/a><\/li>\n\n\n\n<li><a href=\"#show\">Pr\u00e9sentation de la page finale r\u00e9alis\u00e9e avec l\u2019\u00e9diteur Elementor<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading new\" id=\"new\" style=\"margin-bottom:30px\">Un. Cr\u00e9ation d\u2019une nouvelle page dans l\u2019interface d\u2019administration WordPress<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img decoding=\"async\" width=\"800\" height=\"350\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png\" alt=\"Cr\u00e9ation d\u2019une nouvelle page dans l\u2019interface d\u2019administration WordPress\" class=\"wp-image-23277\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/WordPress\u540e\u53f0\u521b\u5efa\u65b0\u9875\u9762-18x8.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Avant de commencer \u00e0 construire une page WordPress avec l\u2019\u00e9diteur Elementor, la premi\u00e8re \u00e9tape consiste \u00e0 s\u2019assurer que la page a bien \u00e9t\u00e9 cr\u00e9\u00e9e dans l\u2019interface d\u2019administration de WordPress, comme indiqu\u00e9 dans le chemin d\u2019acc\u00e8s \u00e0 la gestion des pages illustr\u00e9 ci-dessus. Dans ce chapitre, nous allons partir de la fonction de gestion des pages de WordPress pour expliquer en d\u00e9tail comment cr\u00e9er une nouvelle page et renseigner les informations n\u00e9cessaires telles que le titre de la page, la configuration de l\u2019URL, la hi\u00e9rarchie de la page, ainsi que sa publication. La cr\u00e9ation de la page constitue la base de la construction du site. Une bonne configuration des propri\u00e9t\u00e9s de la page permet non seulement d\u2019augmenter l\u2019efficacit\u00e9 de l\u2019\u00e9dition par la suite, mais aussi d\u2019\u00e9viter les probl\u00e8mes de mise en page ou de compatibilit\u00e9 lors de l\u2019utilisation d\u2019Elementor. Une fois la page pr\u00eate, nous pourrons passer sans transition au mode d\u2019\u00e9dition Elementor pour commencer \u00e0 mettre en page et concevoir les \u00e9l\u00e9ments du site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fill\" style=\"margin-bottom:30px\">1\u3001Remplir le titre de la page<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2546\" height=\"1303\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png\" alt=\"Saisie du titre de la page\" class=\"wp-image-23281\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898.png 2546w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u586b\u5199\u9875\u9762\u6807\u9898-18x9.png 18w\" sizes=\"(max-width: 2546px) 100vw, 2546px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Depuis l\u2019interface d\u2019administration de WordPress, acc\u00e9dez \u00e0 la gestion des pages et cliquez sur le bouton \u00ab\u00a0Nouvelle page\u00a0\u00bb en haut de la page. Vous arriverez alors sur l\u2019interface de cr\u00e9ation d\u2019une nouvelle page, comme illustr\u00e9 ci-dessus. Dans le champ de saisie du titre mis en \u00e9vidence par un encadr\u00e9 rouge sur l\u2019image, entrez le titre personnalis\u00e9 de la page. Dans le syst\u00e8me WordPress, ce titre sera non seulement affich\u00e9 dans la gestion des pages, mais \u00e9galement utilis\u00e9 comme contenu de la balise 'title' dans le code source de la page. Il est donc important de tenir compte de son impact sur le SEO lors de la saisie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"custom\" style=\"margin-bottom:30px\">2\u3001Personnaliser le suffixe de l\u2019URL de la page<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png\" alt=\"Personnalisation du suffixe de l\u2019URL de la page\" class=\"wp-image-23282\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/03\/\u81ea\u5b9a\u4e49\u9875\u9762URL\u540e\u7f00-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Comme montr\u00e9 ci-dessus, apr\u00e8s avoir saisi le titre de la page, cliquez sur le lien \u00ab\u00a0Lien\u00a0\u00bb mis en \u00e9vidence dans un encadr\u00e9 rouge \u00e0 droite. Le syst\u00e8me affichera alors un champ de saisie permettant de personnaliser l\u2019URL de la page. Par d\u00e9faut, WordPress utilisera automatiquement le titre de la page comme suffixe d\u2019URL. Cependant, cette m\u00e9thode par d\u00e9faut ne respecte souvent pas les bonnes pratiques SEO, car le titre peut contenir des caract\u00e8res non latins ou \u00eatre trop long, ce qui nuit \u00e0 la lisibilit\u00e9 pour les utilisateurs et au r\u00e9f\u00e9rencement. Une URL id\u00e9ale doit \u00eatre aussi courte que possible et compos\u00e9e de mots anglais afin d\u2019en am\u00e9liorer la lisibilit\u00e9 et l\u2019optimisation pour les moteurs de recherche.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"level\" style=\"margin-bottom:30px\">3\u3001D\u00e9finir la hi\u00e9rarchie de la page<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"412\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png\" alt=\"D\u00e9finir la hi\u00e9rarchie de la page\" class=\"wp-image-23286\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9875\u9762\u7684\u5c42\u7ea7\u8bbe\u7f6e-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La hi\u00e9rarchie des pages sert \u00e0 d\u00e9finir les relations de subordination entre les pages WordPress. Contrairement aux articles qui peuvent \u00eatre class\u00e9s dans des cat\u00e9gories, les pages prennent en charge une structure hi\u00e9rarchique. Par exemple, l\u2019URL szlogic\/web-design repr\u00e9sente la page de conception web de \u00ab\u00a0Logic Digital Technology\u00a0\u00bb. Si cette page est d\u00e9finie comme page parente, alors l\u2019URL d\u2019une page enfant prendra la forme szlogic\/web-design\/votre-suffixe-d\u2019URL.\nPour d\u00e9finir la hi\u00e9rarchie d\u2019une page, comme illustr\u00e9 ci-dessus, allez dans la colonne \u00ab\u00a0Page\u00a0\u00bb \u00e0 droite de l\u2019interface d\u2019\u00e9dition, cliquez sur l\u2019option \u00ab\u00a0Parent\u00a0\u00bb, une fen\u00eatre de s\u00e9lection de la page parente s\u2019ouvrira. Une fois une page parente appropri\u00e9e s\u00e9lectionn\u00e9e, le syst\u00e8me ajustera automatiquement la structure de l\u2019URL pour qu\u2019elle respecte la hi\u00e9rarchie.\nL\u2019auteur tient \u00e0 pr\u00e9ciser que la hi\u00e9rarchie des pages est une option facultative. Si vous ne souhaitez pas d\u00e9finir une page parente, vous pouvez simplement conserver les param\u00e8tres par d\u00e9faut.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"publish\" style=\"margin-bottom:30px\">4\u3001Publier une nouvelle page WordPress<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"411\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png\" alt=\"Publication de la nouvelle page WordPress\" class=\"wp-image-23288\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03WordPress\u65b0\u589e\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Une fois les informations essentielles de la page renseign\u00e9es, vous pouvez proc\u00e9der \u00e0 sa publication. Une page n\u2019est int\u00e9gr\u00e9e \u00e0 la structure du site et accessible via une URL qu\u2019apr\u00e8s sa publication. Cliquez sur le bouton \u00ab\u00a0Publier\u00a0\u00bb mis en \u00e9vidence par un encadr\u00e9 rouge sur l\u2019image ci-dessus. L\u2019interface basculera vers un \u00e9cran de v\u00e9rification avant publication. Cliquez \u00e0 nouveau sur le bouton \u00ab\u00a0Publier\u00a0\u00bb sur cet \u00e9cran pour finaliser la publication de la nouvelle page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use\" style=\"margin-bottom:30px\">5\u3001\u00c9diter la page avec Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"422\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png\" alt=\"\u00c9dition de la page avec Elementor\" class=\"wp-image-23290\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7f16\u8f91\u9875\u9762-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">L\u2019\u00e9dition avec Elementor est la derni\u00e8re \u00e9tape apr\u00e8s avoir cr\u00e9\u00e9 une nouvelle page WordPress. Pour entrer dans le mode d\u2019\u00e9dition Elementor pour la premi\u00e8re fois, il est n\u00e9cessaire de cliquer sur le bouton \u00ab\u00a0\u00c9diter avec Elementor\u00a0\u00bb comme indiqu\u00e9 dans l\u2019encadr\u00e9 rouge de l\u2019image ci-dessus, depuis l\u2019interface de gestion des pages.\nApr\u00e8s cette premi\u00e8re entr\u00e9e en mode d\u2019\u00e9dition avec Elementor, il sera ensuite possible d\u2019y acc\u00e9der directement depuis la page en frontal, sans passer par l\u2019interface d\u2019administration. Cela s\u2019explique par le fait que la premi\u00e8re ouverture donne \u00e0 Elementor les droits d\u2019\u00e9dition sur cette page, une op\u00e9ration qui doit \u00eatre r\u00e9alis\u00e9e depuis l\u2019interface d\u2019administration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"header\" style=\"margin-bottom:30px\">Deux\u3001 cr\u00e9er un fichier de mod\u00e8le d'en-t\u00eate (Header et barre de navigation) dans le g\u00e9n\u00e9rateur de th\u00e8me d\u2019Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"423\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23296\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684\u4e3b\u9898\u751f\u6210\u5668\u4e2d\u521b\u5efaheader\uff08\u9875\u7709\uff09\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Sur un <strong><a href=\"https:\/\/www.szlogic.net\/fr\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/\" target=\"_blank\" rel=\"noreferrer noopener\">site WordPress<\/a><\/strong>, l\u2019en-t\u00eate (Header) et la barre de navigation sont des \u00e9l\u00e9ments globaux essentiels. Non seulement ils influencent le style g\u00e9n\u00e9ral du site, mais ils affectent \u00e9galement directement l\u2019exp\u00e9rience de navigation des utilisateurs.\n\u00c9tant donn\u00e9 que l\u2019en-t\u00eate doit g\u00e9n\u00e9ralement rester identique sur toutes les pages, nous pouvons utiliser la fonction de g\u00e9n\u00e9rateur de th\u00e8me d\u2019Elementor pour cr\u00e9er un mod\u00e8le d\u2019en-t\u00eate r\u00e9utilisable, permettant un affichage uniforme sur l\u2019ensemble du site.\nDans ce chapitre, nous allons vous expliquer comment utiliser la fonction de gestion des mod\u00e8les d\u2019Elementor pour concevoir un en-t\u00eate r\u00e9pondant aux besoins de votre site, \u00e0 partir de z\u00e9ro. Vous apprendrez \u00e0 ajouter des \u00e9l\u00e9ments courants tels que le logo, le menu de navigation et la barre de recherche, et \u00e0 les personnaliser via l\u2019interface intuitive de glisser-d\u00e9poser d\u2019Elementor.\nUne fois la conception du mod\u00e8le termin\u00e9e, nous vous montrerons comment le publier et choisir l\u2019option \u201cAppliquer \u00e0 l\u2019ensemble du site\u201d dans les conditions d\u2019affichage, afin que cet en-t\u00eate soit automatiquement appliqu\u00e9 \u00e0 toutes les pages.\nUne fois cette comp\u00e9tence ma\u00eetris\u00e9e, vous serez en mesure de cr\u00e9er un en-t\u00eate \u00e0 la fois esth\u00e9tique et fonctionnel, et vous pourrez le mettre \u00e0 jour facilement sans avoir \u00e0 modifier chaque page individuellement.\nCommen\u00e7ons donc la cr\u00e9ation de votre en-t\u00eate personnalis\u00e9 !<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"generate\" style=\"margin-bottom:30px\">1. Point d\u2019entr\u00e9e du g\u00e9n\u00e9rateur de th\u00e8me Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2558\" height=\"1146\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png\" alt=\"Acc\u00e8s au g\u00e9n\u00e9rateur de th\u00e8me Elementor\" class=\"wp-image-23298\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3.png 2558w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Elementor\u4e3b\u9898\u751f\u6210\u5668\u5165\u53e3-18x8.png 18w\" sizes=\"(max-width: 2558px) 100vw, 2558px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Acc\u00e9dez, via votre navigateur, \u00e0 la page que nous avons d\u00e9j\u00e0 publi\u00e9e. Si vous \u00eates toujours connect\u00e9 \u00e0 l\u2019arri\u00e8re-plan de votre site WordPress dans ce navigateur, une barre d\u2019outils d\u2019administration appara\u00eetra en haut de la page visit\u00e9e, comme indiqu\u00e9 dans l\u2019image ci-dessus.\nLorsque vous survolez le lien \u201cModifier avec Elementor\u201d dans cette barre, un menu d\u00e9roulant appara\u00eetra avec les options Elementor. L\u2019acc\u00e8s au \u201cG\u00e9n\u00e9rateur de th\u00e8me\u201d se trouve ici, cach\u00e9 dans ce menu. Cliquez sur le lien \u201cG\u00e9n\u00e9rateur de th\u00e8me\u201d encadr\u00e9 en rouge dans l\u2019image ci-dessus pour entrer dans la page de gestion des fichiers mod\u00e8les d\u2019Elementor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"template\" style=\"margin-bottom:30px\">2. Ajouter un nouveau fichier de mod\u00e8le dans l\u2019interface de gestion des mod\u00e8les d\u2019en-t\u00eate d\u2019Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"421\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png\" alt=\"Ajout d\u2019un nouveau fichier mod\u00e8le dans l\u2019interface de gestion des mod\u00e8les d\u2019en-t\u00eate d\u2019Elementor\" class=\"wp-image-23295\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5728Elementor\u7684Header\u6a21\u677f\u6587\u4ef6\u7ba1\u7406\u754c\u9762\u65b0\u589e\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Une fois dans la page d\u2019accueil du g\u00e9n\u00e9rateur de th\u00e8me Elementor, cliquez sur le r\u00e9pertoire \u201cHeader\u201d situ\u00e9 en haut de la colonne des cat\u00e9gories de mod\u00e8les \u00e0 gauche.\nVous arriverez alors dans l\u2019interface de gestion des fichiers mod\u00e8les \u201cHeader\u201d telle qu\u2019illustr\u00e9e ci-dessus. Sans autre manipulation, il suffit de cliquer \u00e0 nouveau sur le bouton \u201cAdd New\u201d en haut \u00e0 droite de l\u2019interface, comme encadr\u00e9 en rouge sur l\u2019image, pour cr\u00e9er un nouveau fichier mod\u00e8le d\u2019en-t\u00eate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select\" style=\"margin-bottom:30px\">3. Choisir un style de mod\u00e8le d\u2019en-t\u00eate ou cr\u00e9er un style enti\u00e8rement personnalis\u00e9<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png\" alt=\"\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f\" class=\"wp-image-23297\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u9009\u62e9header\uff08\u9875\u7709\uff09\u6a21\u677f\u6837\u5f0f\u6216\u521b\u5efaHeader\u6837\u5f0f-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Apr\u00e8s avoir cliqu\u00e9 sur le bouton \u201cAdd New\u201d dans l\u2019interface de gestion des mod\u00e8les Header, la page bascule automatiquement vers l\u2019\u00e9cran de s\u00e9lection du module Header d\u2019Elementor, comme illustr\u00e9 ci-dessus.\nSur cette page, Elementor propose plusieurs styles de mod\u00e8les d\u2019en-t\u00eate que vous pouvez s\u00e9lectionner et utiliser directement.\nDans cette interface, vous pouvez cliquer sur un mod\u00e8le de Header fourni par Elementor pour le charger, ou bien cliquer sur le \u201cX\u201d en haut \u00e0 droite de la fen\u00eatre de s\u00e9lection pour la fermer et cr\u00e9er un en-t\u00eate\/barre de navigation totalement personnalis\u00e9 pour votre site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"navigation\" style=\"margin-bottom:30px\">4. Utiliser les conteneurs d\u2019Elementor pour la mise en page de l\u2019en-t\u00eate et de la barre de navigation<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"454\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png\" alt=\"Utilisation des conteneurs Elementor pour la mise en page de l\u2019en-t\u00eate et de la barre de navigation\" class=\"wp-image-23302\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u7684\u5bb9\u5668\u5bf9\u9875\u7709\u53ca\u5bfc\u822a\u680f\u5e03\u5c40-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Dans le mode d\u2019\u00e9dition du mod\u00e8le d\u2019en-t\u00eate, la mise en page de l\u2019en-t\u00eate r\u00e9alis\u00e9e avec les conteneurs d\u2019Elementor est illustr\u00e9e comme dans l\u2019image ci-dessus.\nAu niveau du code en d\u00e9veloppement frontal, toutes les structures de page sont compos\u00e9es d\u2019\u00e9l\u00e9ments en blocs (g\u00e9n\u00e9ralement repr\u00e9sent\u00e9s par des balises <strong><a href=\"https:\/\/html.com\/\" data-type=\"link\" data-id=\"https:\/\/html.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">HTML<\/a><\/strong> <code> <\/code>), qui sont g\u00e9n\u00e9ralement appel\u00e9s le \u201cmod\u00e8le de bo\u00eete\u201d dans la mise en page HTML.\nElementor, en tant qu\u2019\u00e9diteur visuel de pages, suit cette m\u00eame logique, mais fournit une interface d\u2019op\u00e9rations visuelles ainsi que des composants de conteneurs (Container) pour nous aider \u00e0 construire la structure de base des pages et \u00e0 y organiser les autres \u00e9l\u00e9ments de mani\u00e8re ordonn\u00e9e.\nPar cons\u00e9quent, avant d\u2019ajouter les \u00e9l\u00e9ments de l\u2019en-t\u00eate (Header) et de la barre de navigation (Navbar), nous devons d\u2019abord planifier raisonnablement leur structure et utiliser les composants de conteneur d\u2019Elementor pour effectuer la mise en page.\nPour tirer pleinement parti de la flexibilit\u00e9 des composants conteneurs, il est indispensable de ma\u00eetriser les r\u00e9glages de param\u00e8tres et les op\u00e9rations d\u2019imbrication des conteneurs pr\u00e9sent\u00e9s dans cette sous-section.\nLe conteneur \u00e9tant le c\u0153ur de la structure de mise en page, il d\u00e9termine non seulement la disposition du contenu, mais influence aussi le comportement adaptatif du site ainsi que l\u2019exp\u00e9rience utilisateur.\nPar ailleurs, le nombre de conteneurs est li\u00e9 au nombre d\u2019\u00e9l\u00e9ments pr\u00e9sents sur la page : normalement, un conteneur accueille un seul composant \u00e9l\u00e9ment.\nLes \u00e9l\u00e9ments les plus couramment utilis\u00e9s dans la section d\u2019en-t\u00eate sont : Site Logo, WordPress Menu et Search, correspondant respectivement au logo du site, au menu WordPress et \u00e0 la barre de recherche.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) R\u00e9glage de la largeur du conteneur<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"603\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png\" alt=\"\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e\" class=\"wp-image-23316\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5bbd\u5ea6\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Comme illustr\u00e9 ci-dessus, le r\u00e9glage de la largeur du conteneur d\u00e9termine la zone d\u2019affichage des \u00e9l\u00e9ments de la page.\nDe nombreux d\u00e9butants rencontrent un probl\u00e8me o\u00f9 les \u00e9l\u00e9ments ne s\u2019affichent pas en pleine largeur.\nLa raison principale est souvent que la largeur du conteneur n\u2019a pas \u00e9t\u00e9 d\u00e9finie sur \u201cLargeur compl\u00e8te\u201d et que la marge interne (padding) du conteneur n\u2019a pas \u00e9t\u00e9 r\u00e9gl\u00e9e \u00e0 0.\nSi vous souhaitez que les \u00e9l\u00e9ments aient une marge, choisissez une \u201cmise en page encadr\u00e9e\u201d.\nPour un affichage en plein \u00e9cran, r\u00e9glez la largeur du conteneur sur \u201cLargeur compl\u00e8te\u201d et assurez-vous que la marge interne est r\u00e9gl\u00e9e \u00e0 0 selon la m\u00e9thode d\u00e9crite ci-dessous.\nCes deux param\u00e8tres doivent \u00eatre correctement configur\u00e9s pour que le contenu remplisse toute la largeur de l\u2019\u00e9cran.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) R\u00e9glage des marges internes \/ externes du conteneur<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"610\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png\" alt=\"\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a\" class=\"wp-image-23315\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5185\u8ddd\u5916\u8ddd\u7684\u8bbe\u5b9a-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Comme illustr\u00e9 ci-dessus, les param\u00e8tres des marges externes et internes du conteneur dans Elementor se trouvent dans l\u2019onglet \u201cR\u00e9glages avanc\u00e9s\u201d.\nLa zone sup\u00e9rieure permet d\u2019ajuster les marges dans les quatre directions.\nPar d\u00e9faut, Elementor verrouille les valeurs des marges internes et externes pour maintenir l\u2019uniformit\u00e9 des quatre c\u00f4t\u00e9s.\nPour ajuster la distance dans une direction sp\u00e9cifique, cliquez sur l\u2019ic\u00f4ne de \u201clien\u201d entour\u00e9e en rouge pour d\u00e9verrouiller les valeurs, puis entrez la valeur souhait\u00e9e pour la direction concern\u00e9e.\nDe plus, vous pouvez cliquer sur l\u2019unit\u00e9 \u201cpx\u201d situ\u00e9e au-dessus de l\u2019ic\u00f4ne de verrouillage pour ouvrir un menu d\u00e9roulant et s\u00e9lectionner d\u2019autres unit\u00e9s de mesure telles que em, rem, % etc., afin de r\u00e9pondre \u00e0 diff\u00e9rents besoins de design.\n\u00c0 noter qu\u2019Elementor d\u00e9finit par d\u00e9faut une marge interne de 10px.\nUne fois le verrou d\u00e9verrouill\u00e9, la valeur est automatiquement r\u00e9initialis\u00e9e \u00e0 0, il faudra alors la r\u00e9gler manuellement selon vos besoins r\u00e9els.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(3) M\u00e9thode d\u2019imbrication des conteneurs<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"408\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5\" class=\"wp-image-23314\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u5d4c\u5957\u65b9\u6cd5-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Comme illustr\u00e9 ci-dessus, il existe deux m\u00e9thodes pour r\u00e9aliser l\u2019imbrication des conteneurs dans Elementor.\nCes deux m\u00e9thodes permettent une imbrication efficace : le glisser-d\u00e9poser et le copier-coller dans le navigateur.\nLe glisser-d\u00e9poser est plus intuitif et adapt\u00e9 \u00e0 la cr\u00e9ation de structures depuis z\u00e9ro, tandis que le copier-coller convient \u00e0 l\u2019ajustement rapide et \u00e0 la r\u00e9utilisation de conteneurs existants.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Ajouter un sous-conteneur par glisser-d\u00e9poser<\/strong><\/h5>\n\n\n\n<p>Comme montr\u00e9 ci-dessus, il est possible de faire glisser directement le composant de conteneur depuis la barre d\u2019outils des composants situ\u00e9e \u00e0 gauche dans Elementor, et de le d\u00e9poser dans le conteneur parent cibl\u00e9.\nAinsi, le nouveau conteneur sera automatiquement int\u00e9gr\u00e9 comme enfant du conteneur parent, formant une structure hi\u00e9rarchique.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Copier et coller un conteneur<\/strong><\/h5>\n\n\n\n<p>Dans le panneau de navigation situ\u00e9 \u00e0 droite de l\u2019interface Elementor, vous pouvez d\u2019abord s\u00e9lectionner le conteneur \u00e0 imbriquer, puis effectuer une op\u00e9ration de copie.\nEnsuite, s\u00e9lectionnez le conteneur parent cible, faites un clic droit et collez : le conteneur copi\u00e9 sera alors int\u00e9gr\u00e9 sous le conteneur parent, devenant un sous-conteneur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\"><strong>(4) D\u00e9finir la direction d\u2019alignement des sous-conteneurs<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"403\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png\" alt=\"\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a\" class=\"wp-image-23313\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5b50\u5bb9\u5668\u7684\u6392\u5217\u65b9\u5411\u8bbe\u5b9a-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">L\u2019orientation des sous-conteneurs dans Elementor est d\u00e9finie par le conteneur parent.\nCe param\u00e8tre se trouve dans l\u2019onglet \u201cDisposition\u201d, comme indiqu\u00e9 par le cadre rouge dans l\u2019image ci-dessus.\nDans la section \u201c\u00c9l\u00e9ments\u201d, vous pouvez choisir le mode d\u2019alignement des conteneurs, soit en ligne horizontale, soit en pile verticale, et ajuster pr\u00e9cis\u00e9ment la direction.\nSi vous s\u00e9lectionnez un alignement horizontal, les sous-conteneurs seront plac\u00e9s les uns \u00e0 c\u00f4t\u00e9 des autres, avec un ordre de gauche \u00e0 droite ou de droite \u00e0 gauche selon les besoins de mise en page.\nEn s\u00e9lectionnant un alignement vertical, les sous-conteneurs s\u2019empileront de haut en bas ou de bas en haut.\nCes param\u00e8tres de direction influencent directement la disposition interne des sous-conteneurs et permettent, s\u2019ils sont bien configur\u00e9s, de concevoir une structure claire, souple et hi\u00e9rarchis\u00e9e.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"edit\" style=\"margin-bottom:30px\"><strong>5. \u00c9diter et cr\u00e9er le contenu des \u00e9l\u00e9ments de l\u2019en-t\u00eate et de la barre de navigation<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"429\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png\" alt=\"\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9\" class=\"wp-image-23307\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u7f16\u8f91\u521b\u5efa\u9875\u7709\u53ca\u5bfc\u822a\u680f\u7684\u5143\u7d20\u5185\u5bb9-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Apr\u00e8s avoir termin\u00e9 la structure de base de l\u2019en-t\u00eate et de la barre de navigation d\u00e9crite ci-dessus, il est maintenant n\u00e9cessaire d\u2019ajouter des composants sp\u00e9cifiques pour qu\u2019ils remplissent pleinement leurs fonctions de navigation et de pr\u00e9sentation de la marque.\nElementor propose plusieurs composants adapt\u00e9s \u00e0 l\u2019en-t\u00eate, parmi lesquels Site Logo (logo du site), WordPress Menu (menu de navigation) et Search (barre de recherche) sont les trois les plus courants et pratiques.\nEn faisant glisser ces composants dans les conteneurs correspondants, puis en t\u00e9l\u00e9chargeant les ressources n\u00e9cessaires et en configurant les param\u00e8tres, vous pouvez r\u00e9aliser une structure d\u2019en-t\u00eate compl\u00e8te et fonctionnelle.\nL\u2019image ci-dessus illustre le r\u00e9sultat apr\u00e8s que l\u2019auteur du blog a t\u00e9l\u00e9charg\u00e9 un logo pour le composant Site Logo et configur\u00e9 les conditions d\u2019affichage du WordPress Menu (menu de navigation).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"settings\">6. Publier le fichier mod\u00e8le d\u2019en-t\u00eate (Header) et d\u00e9finir les conditions d\u2019affichage<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">(1) Publier le fichier mod\u00e8le d\u2019en-t\u00eate (Header)<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png\" alt=\"\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6\" class=\"wp-image-23306\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u53d1\u5e03Header\u6a21\u677f\u6587\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Une fois que vous avez termin\u00e9 la mise en page de la section d\u2019en-t\u00eate \u00e0 l\u2019aide des composants de conteneur d\u2019Elementor, ajout\u00e9 les composants courants et t\u00e9l\u00e9vers\u00e9 les ressources, vous pouvez publier le fichier mod\u00e8le d\u2019en-t\u00eate (Header) afin qu\u2019il soit officiellement appliqu\u00e9 \u00e0 la page.\nEn mode d\u2019\u00e9dition Elementor, le bouton \u201cPublier\u201d se situe en bas de la barre lat\u00e9rale gauche, comme indiqu\u00e9 dans le cadre rouge de l\u2019image ci-dessus.\nEn cliquant sur le bouton \u201cPublier\u201d, une fen\u00eatre contextuelle de d\u00e9finition des conditions logiques d\u2019affichage s\u2019ouvre, guidant l\u2019utilisateur \u00e0 d\u00e9finir la port\u00e9e d\u2019application de ce mod\u00e8le d\u2019en-t\u00eate.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) D\u00e9finir les conditions d\u2019affichage du fichier mod\u00e8le d\u2019en-t\u00eate<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans la fen\u00eatre de param\u00e8tres logiques d\u2019affichage illustr\u00e9e ci-dessus, l\u2019utilisateur peut choisir d\u2019appliquer l\u2019en-t\u00eate (Header) \u00e0 l\u2019ensemble du site, \u00e0 certaines pages sp\u00e9cifiques, \u00e0 des cat\u00e9gories d\u2019articles, ou selon d\u2019autres conditions personnalis\u00e9es.\nPuisque le mod\u00e8le d\u2019en-t\u00eate (Header) est une partie globale du site WordPress, il est essentiel de s\u2019assurer qu\u2019il s\u2019applique \u00e0 toutes les pages du site.\nSelon la s\u00e9quence d\u2019actions d\u00e9finie par l\u2019auteur du blog dans l\u2019image ci-dessus, s\u00e9lectionnez \u201cInclude &gt; Entire Site\u201d dans la fen\u00eatre de param\u00e8tres logiques d\u2019affichage, ce qui signifie que ce mod\u00e8le d\u2019en-t\u00eate sera appliqu\u00e9 \u00e0 toutes les pages de l\u2019ensemble du site.\nUne fois le choix effectu\u00e9, cliquez sur le bouton \u201cSave &amp; Close\u201d pour appliquer les param\u00e8tres et fermer la fen\u00eatre d\u2019op\u00e9ration.Le syst\u00e8me appliquera automatiquement ce mod\u00e8le d\u2019en-t\u00eate \u00e0 toutes les pages du site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"element\" style=\"margin-bottom:30px\">Trois\u3001Construction de la structure principale de la page avec Elementor et ajout d\u2019\u00e9l\u00e9ments de contenu<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"533\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png\" alt=\"Construction de la structure principale de la page avec Elementor et ajout d\u2019\u00e9l\u00e9ments de contenu\" class=\"wp-image-23324\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u6784\u5efa\u9875\u9762\u4e3b\u4f53\u6846\u67b6\u5e76\u6dfb\u52a0\u5185\u5bb9\u5143\u7d20-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Apr\u00e8s avoir termin\u00e9 la mise en page et la cr\u00e9ation de l\u2019en-t\u00eate et de la barre de navigation, l\u2019\u00e9tape suivante consiste \u00e0 construire la zone de contenu principale de la page.\nTout comme dans le chapitre pr\u00e9c\u00e9dent sur \u00ab l\u2019utilisation des conteneurs Elementor pour la mise en page de l\u2019en-t\u00eate et de la barre de navigation \u00bb, la conception de la partie principale de la page repose \u00e9galement sur les composants de conteneur d\u2019Elementor.\nLa diff\u00e9rence r\u00e9side dans le fait que la section principale contient g\u00e9n\u00e9ralement davantage d\u2019\u00e9l\u00e9ments de contenu, tels que du texte, des images, des ic\u00f4nes, des vid\u00e9os, des boutons, des formulaires, etc., pour lesquels Elementor propose tous des composants correspondants.\nDans la pratique, il suffit de ma\u00eetriser avec souplesse l\u2019ajustement de la largeur des conteneurs, la configuration des marges int\u00e9rieures et ext\u00e9rieures, ainsi que la m\u00e9thode d\u2019imbrication des sous-conteneurs pour r\u00e9aliser une grande vari\u00e9t\u00e9 de mises en page.\nPar exemple, l\u2019utilisation d\u2019une disposition en colonnes appropri\u00e9e permet une distribution ordonn\u00e9e du contenu, tandis que l\u2019ajustement de la largeur adaptative et des espacements garantit une bonne pr\u00e9sentation visuelle sur diff\u00e9rents formats d\u2019\u00e9cran.\nC\u2019est l\u00e0 que r\u00e9side toute la puissance d\u2019Elementor : permettre aux utilisateurs de construire librement des structures de pages vari\u00e9es sans avoir besoin de coder.<\/p>\n\n\n\n<p>Par cons\u00e9quent, lors de la conception de la structure principale de la page, il est essentiel de planifier rationnellement la structure des conteneurs.\nUne hi\u00e9rarchie de conteneurs claire et bien organis\u00e9e assure non seulement une mise en page esth\u00e9tique, mais am\u00e9liore aussi la compatibilit\u00e9 responsive, offrant ainsi une exp\u00e9rience de navigation optimale sur tous les types d'appareils.\nEnsuite, l\u2019auteur du blog expliquera pas \u00e0 pas comment utiliser les composants de conteneur d\u2019Elementor pour configurer la structure de la partie principale de la page de haut en bas, et int\u00e9grer les composants de contenu pour rendre la page plus vivante et structur\u00e9e !<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block\" style=\"margin-bottom:30px\">1. Bloc de banni\u00e8re (Banner)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"537\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png\" alt=\"Banner\u533a\u5757\u7684\u5e03\u5c40\u548c\u5185\u5bb9\u7f16\u8f91\" class=\"wp-image-23322\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Banner\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">En r\u00e8gle g\u00e9n\u00e9rale, le bloc Banner ne n\u00e9cessite qu\u2019un seul composant : le composant Slides d\u2019Elementor.\nLe composant Slides est utilis\u00e9 pour cr\u00e9er un carrousel d\u2019images sur une page, avec des fonctions int\u00e9gr\u00e9es de titre, texte et param\u00e9trage de lien.\nAinsi, le bloc Banner n\u2019a pas besoin d\u2019une combinaison de plusieurs conteneurs imbriqu\u00e9s \u2014 il suffit d\u2019ajouter un conteneur unique en haut de la page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) Param\u00e8tres courants du composant Slides<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Param\u00e8tres d\u2019arri\u00e8re-plan<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"725\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Param\u00e8tres d\u2019arri\u00e8re-plan\" class=\"wp-image-23326\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u80cc\u666f\u7684\u53c2\u6570\u8bbe\u7f6e-13x12.png 13w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Comme illustr\u00e9 ci-dessus, apr\u00e8s avoir d\u00e9velopp\u00e9 l\u2019onglet du carrousel, les options de configuration de l\u2019arri\u00e8re-plan apparaissent dans la zone encadr\u00e9e en rouge.\nDans cette zone, vous pouvez t\u00e9l\u00e9verser une image d\u2019arri\u00e8re-plan pour le carrousel, d\u00e9finir une couleur de fond, et, dans l\u2019onglet sup\u00e9rieur \u201cContent\u201d, saisir le texte du titre, la description, ainsi que le texte du bouton, puis d\u00e9finir l\u2019URL du lien du bouton.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Param\u00e8tres de positionnement du contenu<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"609\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png\" alt=\"Param\u00e8tres de positionnement du contenu\" class=\"wp-image-23327\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5185\u5bb9\u5b9a\u4f4d\u53c2\u6570\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans l\u2019onglet \u00ab Style \u00bb de la zone de param\u00e8tres du composant Slides, il est possible de d\u00e9finir un positionnement personnalis\u00e9 du contenu.\nDe haut en bas, les param\u00e8tres disponibles sont : la largeur du contenu, la marge int\u00e9rieure, la direction horizontale, la direction verticale, ainsi que l\u2019alignement du texte.\nGr\u00e2ce \u00e0 ces r\u00e9glages, vous pouvez personnaliser la position d\u2019affichage du titre, de la description et du bouton.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Param\u00e8tres de style du texte<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"599\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png\" alt=\"Param\u00e8tres de style du texte\" class=\"wp-image-23329\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7684\u6837\u5f0f\u8bbe\u7f6e-16x12.png 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">L\u2019emplacement pour configurer le style du texte est illustr\u00e9 ci-dessus, et se trouve \u00e9galement dans l\u2019onglet \u00ab Style \u00bb, tout comme les param\u00e8tres de positionnement mentionn\u00e9s plus haut.\nComme indiqu\u00e9 dans l\u2019image, les types de texte (titre, description, bouton) sont encadr\u00e9s en rouge.\nEn cliquant sur un type de texte sp\u00e9cifique, vous acc\u00e9dez \u00e0 la configuration <strong><a href=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" data-type=\"link\" data-id=\"https:\/\/www.w3.org\/Style\/CSS\/Overview.en.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">CSS<\/a><\/strong> correspondante, o\u00f9 vous pouvez personnaliser la taille de la police, la couleur, etc., de l\u2019objet texte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"business\" style=\"margin-bottom:30px\">2. Bloc de description des services<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png\" alt=\"Bloc de description des services\" class=\"wp-image-23332\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4e1a\u52a1\u63cf\u8ff0\u533a\u5757-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Les composants utilis\u00e9s dans le bloc de description des services peuvent \u00eatre combin\u00e9s librement selon les besoins sp\u00e9cifiques du design de la page.\nEn g\u00e9n\u00e9ral, plus les \u00e9l\u00e9ments de description sont nombreux, plus il faudra int\u00e9grer de composants.\nContrairement au composant Slides fr\u00e9quemment utilis\u00e9 dans la section Banner, les autres sections de la page ne n\u00e9cessitent pas un nombre fixe de composants, ils peuvent \u00eatre combin\u00e9s librement en fonction du contenu.\nDans l\u2019exemple du bloc de description des services pr\u00e9sent\u00e9 ci-dessus, seuls le composant Titre et le composant Bouton ont \u00e9t\u00e9 utilis\u00e9s, pour un design global simple et clair.\nEnsuite, l\u2019auteur du blog expliquera en d\u00e9tail les param\u00e8tres courants de ces deux composants, afin de vous aider \u00e0 mieux en ma\u00eetriser l\u2019utilisation.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(1) Param\u00e8tres courants du composant Titre<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Param\u00e8tres disponibles dans l\u2019onglet \u00ab Contenu \u00bb du composant Titre<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"465\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Param\u00e8tres disponibles dans l\u2019onglet \u00ab Contenu \u00bb du composant Titre\" class=\"wp-image-23335\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Apr\u00e8s avoir s\u00e9lectionn\u00e9 le composant Titre dans le navigateur d'Elementor, comme illustr\u00e9 ci-dessus, la zone de param\u00e8tres du composant situ\u00e9e \u00e0 gauche affiche par d\u00e9faut l\u2019onglet \u00ab Contenu \u00bb.\nDans cet onglet, trois param\u00e8tres principaux sont disponibles : le champ de saisie du contenu du titre, le champ de lien du titre, et le r\u00e9glage de la balise HTML Hn.\nLe champ de contenu du titre est obligatoire, car il d\u00e9termine le texte affich\u00e9 sur la page.\nLe champ de lien est facultatif ; l\u2019ajout d\u2019un lien d\u00e9pend des besoins sp\u00e9cifiques, et dans la plupart des cas, les titres ne comportent pas de lien.\nLe r\u00e9glage de la balise HTML Hn est quant \u00e0 lui essentiel pour <strong><a href=\"https:\/\/www.szlogic.net\/fr\/seo\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">l\u2019optimisation SEO<\/a><\/strong>.\nChoisir correctement des balises telles que H1, H2 ou H3 aide les moteurs de recherche \u00e0 identifier la structure de la page.\nUne configuration appropri\u00e9e permet d\u2019am\u00e9liorer la lisibilit\u00e9 du site ainsi que ses performances dans les classements.\nAinsi, lors de l\u2019\u00e9dition d\u2019un composant Titre, il est important non seulement de garantir l\u2019exactitude du contenu, mais aussi de configurer les balises HTML de mani\u00e8re adapt\u00e9e \u00e0 la structure de la page et aux exigences SEO.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Param\u00e8tres de style dans l\u2019onglet \u00ab Style \u00bb du composant Titre<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"380\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Param\u00e8tres de style dans l\u2019onglet \u00ab Style \u00bb du composant Titre\" class=\"wp-image-23337\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Si vous ne ma\u00eetrisez pas encore l\u2019emplacement des param\u00e8tres de style des composants Elementor \u00e0 ce stade, l\u2019auteur vous donne ici un petit conseil : tous les param\u00e8tres de style des composants Elementor se trouvent dans l\u2019onglet \u00ab Style \u00bb du panneau de configuration du composant.\nBien que les options de style sp\u00e9cifiques varient d\u2019un composant \u00e0 l\u2019autre, le chemin d\u2019acc\u00e8s reste identique.\nPrenons l\u2019exemple du composant Titre : comme indiqu\u00e9 dans le cadre rouge de l\u2019image ci-dessus, les param\u00e8tres de style les plus courants incluent l\u2019alignement du titre, la couleur du texte du titre et les r\u00e9glages de typographie.\nDans les options de typographie, vous pouvez ajuster la police, la taille de police, l\u2019\u00e9paisseur, l\u2019interligne, etc., afin d\u2019adapter l\u2019apparence du titre au design global de la page.\nUne fois cette logique ma\u00eetris\u00e9e, que vous souhaitiez modifier le style d\u2019un titre, d\u2019un bouton, d\u2019une image ou d\u2019un autre composant, vous pourrez plus rapidement localiser les r\u00e9glages correspondants.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">(2) Param\u00e8tres courants du composant Bouton<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-top:30px;margin-bottom:30px\">Param\u00e8tres dans l\u2019onglet \u00ab Contenu \u00bb du composant Bouton<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"396\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"Param\u00e8tres dans l\u2019onglet \u00ab Contenu \u00bb du composant Bouton\" class=\"wp-image-23339\"\/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Les param\u00e8tres courants de l\u2019onglet \u00ab Contenu \u00bb du composant Bouton, comme indiqu\u00e9 dans le cadre rouge de l\u2019image ci-dessus, incluent : texte, lien et ic\u00f4ne.\nParmi ces trois param\u00e8tres, certains sont obligatoires, d'autres optionnels.\nLa saisie du texte est obligatoire, car le contenu du champ texte constitue le libell\u00e9 du bouton ; le lien est \u00e9galement essentiel \u2014 un bouton sans lien n\u2019aurait pas de fonction.\nQuant au param\u00e8tre de l\u2019ic\u00f4ne, il d\u00e9pend des besoins sp\u00e9cifiques en mati\u00e8re de design.\nSi votre bouton ne n\u00e9cessite pas d\u2019ic\u00f4ne, laissez simplement les param\u00e8tres par d\u00e9faut.\nEn revanche, si vous souhaitez ajouter une ic\u00f4ne, cliquez sur le bouton correspondant pour acc\u00e9der \u00e0 la biblioth\u00e8que d\u2019ic\u00f4nes d\u2019Elementor, o\u00f9 vous pourrez choisir une ic\u00f4ne existante ou importer un fichier sp\u00e9cifique.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" style=\"margin-bottom:30px\">Param\u00e8tres de style dans l\u2019onglet \u00ab Style \u00bb du composant Bouton<\/h5>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png\" alt=\"Param\u00e8tres de style dans l\u2019onglet \u00ab Style \u00bb du composant Bouton\" class=\"wp-image-23340\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6309\u94ae\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u6837\u5f0f\u8bbe\u5b9a\u9879-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">L\u2019onglet \u00ab Style \u00bb du composant Bouton comprend de nombreux param\u00e8tres, comme illustr\u00e9 ci-dessus.\nCompar\u00e9 au composant Titre pr\u00e9c\u00e9demment pr\u00e9sent\u00e9, le bouton offre des options de style plus riches, couvrant plusieurs param\u00e8tres cl\u00e9s afin de permettre un ajustement pr\u00e9cis de son apparence visuelle et de son interaction utilisateur.\nDans cet onglet, les r\u00e9glages de position d\u00e9terminent l\u2019alignement du bouton \u00e0 l\u2019int\u00e9rieur du conteneur, tel que centr\u00e9, align\u00e9 \u00e0 gauche ou \u00e0 droite.\nLes r\u00e9glages de typographie, similaires \u00e0 ceux des autres composants, servent \u00e0 ajuster la police, la taille de texte, l\u2019\u00e9paisseur, etc.\nLa couleur du texte peut \u00eatre d\u00e9finie s\u00e9par\u00e9ment pour l\u2019\u00e9tat normal et pour l\u2019\u00e9tat de survol (Hover), afin d\u2019assurer la lisibilit\u00e9 du bouton et un retour visuel efficace dans les diff\u00e9rents \u00e9tats d\u2019interaction.<\/p>\n\n\n\n<p>En outre, le param\u00e8tre de  rayon de bordure  contr\u00f4le l\u2019arrondi des bords du bouton : il peut \u00eatre ajust\u00e9 pour obtenir un bouton \u00e0 angles droits, \u00e0 bords arrondis, voire totalement circulaire.\nL\u2019effet  d\u2019ombre port\u00e9e  peut \u00eatre utilis\u00e9 pour ajouter une ombre au bouton, renfor\u00e7ant ainsi son relief et son attractivit\u00e9 en tant qu\u2019\u00e9l\u00e9ment cliquable.\nEnfin, le r\u00e9glage des  marges internes (Padding)  d\u00e9termine l\u2019espace entre le texte \u00e0 l\u2019int\u00e9rieur du bouton et ses bords. Un ajustement ad\u00e9quat permet d\u2019optimiser la taille du bouton et l\u2019\u00e9quilibre visuel global.\nEn combinant intelligemment ces param\u00e8tres de style, vous pouvez cr\u00e9er des boutons \u00e0 la fois esth\u00e9tiques et adapt\u00e9s \u00e0 l\u2019exp\u00e9rience utilisateur, selon les besoins de votre design de page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"product\" style=\"margin-bottom:30px\">3. Bloc Produits et Services<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png\" alt=\"Bloc produits et services\" class=\"wp-image-23342\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u548c\u670d\u52a1\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La structure de conteneurs imbriqu\u00e9s du bloc Produits et Services est plus complexe que celle des blocs pr\u00e9c\u00e9demment pr\u00e9sent\u00e9s, avec une hi\u00e9rarchie plus \u00e9labor\u00e9e.\nComme le montre l\u2019image ci-dessus, le sous-conteneur de droite contient un composant <strong>Gallery<\/strong> (galerie), affichant trois images li\u00e9es \u00e0 des produits ou services, chacune accompagn\u00e9e d\u2019un texte explicatif pour renforcer l\u2019impact visuel et la clart\u00e9 des informations.\nLe sous-conteneur de gauche, quant \u00e0 lui, associe un composant Titre \u00e0 plusieurs composants Bouton, assurant ainsi une orientation textuelle claire et une bonne interactivit\u00e9.<\/p>\n\n\n\n<p>Le composant <strong>Gallery<\/strong> propose divers agencements et param\u00e8tres. Comme le montre la zone de r\u00e9glages \u00e0 gauche sur l\u2019image, il est possible d\u2019ajuster l\u2019organisation des images, le nombre de colonnes, les espacements, ainsi que le type de lien associ\u00e9 \u00e0 chaque image.\nLa disposition actuelle de la galerie utilise une grille \u00e0 4 colonnes, et la fonction <strong>Lazy Load<\/strong> (chargement diff\u00e9r\u00e9) est activ\u00e9e pour am\u00e9liorer les performances de chargement de la page.\nDans le sous-conteneur gauche, le composant Titre est d\u00e9fini avec une taille de police importante pour garantir un bon impact visuel.\nEn dessous, plusieurs composants Bouton permettent de guider l\u2019utilisateur vers diff\u00e9rentes cat\u00e9gories de produits et services.\nLes couleurs des boutons, le style des bordures et le contenu textuel peuvent \u00eatre ajust\u00e9s via l\u2019onglet <strong>\u00ab Style \u00bb<\/strong>, afin de garantir une coh\u00e9rence avec le style graphique global de la page.\nLes r\u00e9glages des composants Titre et Bouton ayant \u00e9t\u00e9 d\u00e9taill\u00e9s pr\u00e9c\u00e9demment, cette section se concentrera d\u00e9sormais sur l\u2019analyse approfondie du composant <strong>Gallery<\/strong>, afin de vous aider \u00e0 en tirer le meilleur parti pour vos mises en page d\u2019images.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Param\u00e8tres dans l\u2019onglet \u00ab Contenu \u00bb du composant Gallery<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23346\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans l\u2019onglet <strong>\u00ab Contenu \u00bb<\/strong>, le composant <strong>Gallery<\/strong> offre plusieurs r\u00e9glages cl\u00e9s permettant de configurer l\u2019affichage des images de mani\u00e8re flexible.\nTout d\u2019abord, le param\u00e8tre <strong>Type<\/strong> permet de choisir le mode d\u2019affichage de la galerie, par exemple <em>Single<\/em> (image unique) ou <em>Grid<\/em> (grille), selon les besoins de la page.\nEnsuite, dans la section de s\u00e9lection d\u2019images, s\u2019affiche la liste des images actuellement ajout\u00e9es ; l\u2019utilisateur peut cliquer sur le bouton \u00ab + \u00bb pour t\u00e9l\u00e9verser de nouvelles images ou supprimer celles qui ne sont plus n\u00e9cessaires.\nLe param\u00e8tre <strong>Order By<\/strong> permet de d\u00e9finir l\u2019ordre d\u2019affichage des images, soit dans un ordre d\u00e9fini, soit de mani\u00e8re al\u00e9atoire.\nEnfin, l\u2019option <strong>Lazy Load<\/strong> (chargement diff\u00e9r\u00e9) peut \u00eatre activ\u00e9e ou d\u00e9sactiv\u00e9e. Cette fonctionnalit\u00e9 est particuli\u00e8rement utile pour am\u00e9liorer les performances des pages contenant un grand nombre d\u2019images.<\/p>\n\n\n\n<p>L\u2019option <strong>Layout<\/strong> (mise en page) d\u00e9termine la mani\u00e8re dont les images sont dispos\u00e9es. Dans l\u2019exemple illustr\u00e9 ci-dessus, la disposition choisie est le mode <em>Grid<\/em> (grille).\nLe param\u00e8tre <strong>Columns<\/strong> (colonnes) permet de d\u00e9finir le nombre de colonnes de la galerie, ce qui ajuste la structure d\u2019affichage des images afin qu\u2019elle s\u2019adapte \u00e0 diff\u00e9rentes largeurs de page.\nL\u2019option <strong>Spacing<\/strong> (espacement) contr\u00f4le l\u2019\u00e9cart entre les images. L\u2019utilisateur peut ajuster cet \u00e9cart \u00e0 l\u2019aide d\u2019un curseur, pour augmenter ou r\u00e9duire l\u2019espacement et ainsi optimiser l\u2019impact visuel.\nDans l\u2019option <strong>Link<\/strong> (lien), l\u2019utilisateur peut d\u00e9finir le comportement au clic sur les images de la galerie, comme ouvrir le fichier m\u00e9dia en taille r\u00e9elle ou rediriger vers une page sp\u00e9cifique.\nL\u2019option <strong>Lightbox<\/strong> (effet bo\u00eete modale) permet d\u2019activer l\u2019affichage des images dans une fen\u00eatre popup, offrant ainsi une meilleure exp\u00e9rience de visualisation.\nEnfin, l\u2019option <strong>Aspect Ratio<\/strong> (rapport hauteur\/largeur) permet de contr\u00f4ler les proportions d\u2019affichage des images. Le choix du blogueur ici, <em>9:16<\/em>, permet d\u2019afficher les images sous forme de colonnes verticales.\nGr\u00e2ce \u00e0 ces r\u00e9glages, l\u2019utilisateur peut personnaliser l\u2019apparence du composant galerie, l\u2019adapter \u00e0 diff\u00e9rents styles de mise en page, et am\u00e9liorer la performance visuelle du site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Param\u00e8tres dans l\u2019onglet \u00ab Style \u00bb du composant Gallery<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"529\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"\u753b\u5eca\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23347\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u753b\u5eca\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans l\u2019onglet <strong>Style<\/strong>, le composant <strong>Gallery<\/strong> propose plusieurs param\u00e8tres permettant aux utilisateurs de personnaliser l\u2019apparence de la galerie.\nLa section <strong>Image<\/strong> (image) permet d\u2019ajuster des styles tels que la bordure, l\u2019arrondi des coins ou encore les animations au survol, afin d\u2019am\u00e9liorer le rendu visuel.\nDans les param\u00e8tres <strong>Image<\/strong>, les utilisateurs peuvent basculer entre les \u00e9tats <strong>Normal<\/strong> (normal) et <strong>Hover<\/strong> (survol), et d\u00e9finir des styles sp\u00e9cifiques pour chacun.\nEn mode <strong>Normal<\/strong>, il est possible de configurer la <strong>Border Color<\/strong> (couleur de bordure), la <strong>Border Width<\/strong> (\u00e9paisseur de la bordure), ainsi que le <strong>Border Radius<\/strong> (arrondi de la bordure), afin de contr\u00f4ler l\u2019apparence du cadre des images.\nEn outre, les filtres CSS (<strong>CSS Filters<\/strong>) sont pris en charge, permettant aux utilisateurs d\u2019appliquer des effets tels que la luminosit\u00e9, le contraste ou la saturation pour enrichir la profondeur visuelle.<\/p>\n\n\n\n<p>Dans l'\u00e9tat de survol (Hover), il est possible d'ajouter diff\u00e9rents effets interactifs aux images, tels que Hover Animation (animation au survol), prenant en charge divers effets d'animation permettant \u00e0 l\u2019image de r\u00e9agir de mani\u00e8re dynamique au passage de la souris. L\u2019option Animation Duration (dur\u00e9e de l\u2019animation) permet d\u2019ajuster la vitesse de lecture de l\u2019animation afin d\u2019assurer une fluidit\u00e9 en accord avec l\u2019exp\u00e9rience utilisateur. Par ailleurs, les options Overlay (calque de superposition) et Content (contenu) permettent aux utilisateurs de personnaliser davantage les effets de superposition de la galerie ainsi que l\u2019affichage du texte sur l\u2019image, contribuant \u00e0 un rendu visuel plus raffin\u00e9. Gr\u00e2ce \u00e0 ces param\u00e8tres, il est possible d\u2019ajuster librement le style global de la galerie pour qu\u2019il corresponde au design et aux besoins d\u2019interaction du site web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"core\" style=\"margin-bottom:30px\">4\u3001Bloc de pr\u00e9sentation des avantages principaux du produit<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"457\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png\" alt=\"Bloc de pr\u00e9sentation des avantages cl\u00e9s des produits\" class=\"wp-image-23348\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4ea7\u54c1\u6838\u5fc3\u4f18\u52bf\u5f15\u5bfc\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Le bloc de pr\u00e9sentation des avantages principaux du produit utilise les m\u00eames composants que le \u00ab bloc de description des services \u00bb pr\u00e9sent\u00e9 pr\u00e9c\u00e9demment. La seule diff\u00e9rence est que le conteneur de ce bloc int\u00e8gre un \u00e9l\u00e9ment suppl\u00e9mentaire : une image d\u2019arri\u00e8re-plan. Cette modification introduit une nouvelle notion, et c\u2019est pourquoi ce chapitre expliquera comment ajouter une image d\u2019arri\u00e8re-plan \u00e0 un conteneur. Quant aux param\u00e8tres et fonctionnalit\u00e9s des composants de titre, de l\u2019\u00e9diteur de texte et du bouton, vous pouvez vous r\u00e9f\u00e9rer \u00e0 la configuration du conteneur et des \u00e9l\u00e9ments dans le \u00ab bloc de description des services \u00bb pour vous entra\u00eener et pratiquer.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) M\u00e9thode pour ajouter une image d\u2019arri\u00e8re-plan \u00e0 un conteneur<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"524\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png\" alt=\"\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5\" class=\"wp-image-23355\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u5bb9\u5668\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u7684\u64cd\u4f5c\u65b9\u6cd5-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px;margin-bottom:30px\">Pour ajouter une image d\u2019arri\u00e8re-plan \u00e0 un composant de conteneur dans Elementor, il faut acc\u00e9der \u00e0 l\u2019onglet \u00ab Style \u00bb du conteneur. Tout d\u2019abord, s\u00e9lectionnez le conteneur auquel vous souhaitez ajouter une image d\u2019arri\u00e8re-plan, puis passez \u00e0 l\u2019onglet \u00ab Style \u00bb dans le panneau de configuration \u00e0 gauche. Dans cette zone de r\u00e9glage, d\u00e9veloppez la section \u00ab Arri\u00e8re-plan \u00bb pour voir l\u2019option \u00ab Recouvrement de l\u2019arri\u00e8re-plan \u00bb. Dans le type d\u2019arri\u00e8re-plan, choisissez l\u2019option image, puis t\u00e9l\u00e9versez ou s\u00e9lectionnez dans la m\u00e9diath\u00e8que l\u2019image souhait\u00e9e. Une fois l\u2019image s\u00e9lectionn\u00e9e, vous pouvez ajuster son mode d\u2019affichage. Tout d\u2019abord, la r\u00e9solution peut rester en \u00ab taille originale \u00bb ou \u00eatre adapt\u00e9e selon les besoins. Ensuite, dans l\u2019option \u00ab Position \u00bb, choisissez un alignement appropri\u00e9, comme \u00ab centr\u00e9 \u00bb, pour garantir un affichage toujours centr\u00e9. L\u2019option \u00ab Fixe \u00bb permet de d\u00e9terminer si l\u2019arri\u00e8re-plan se d\u00e9place avec le d\u00e9filement de la page ; si vous souhaitez qu\u2019il reste fixe dans la fen\u00eatre, choisissez le mode \u00ab Fixe \u00bb. Pour le r\u00e9glage de la r\u00e9p\u00e9tition, choisissez \u00ab non r\u00e9p\u00e9t\u00e9 \u00bb afin d\u2019\u00e9viter que de petites images ne soient r\u00e9p\u00e9t\u00e9es en mosa\u00efque. Enfin, dans l\u2019option \u00ab Taille d\u2019affichage \u00bb, s\u00e9lectionnez \u00ab couverture \u00bb pour que l\u2019image remplisse enti\u00e8rement le conteneur sans laisser d\u2019espaces. Gr\u00e2ce \u00e0 ces param\u00e8tres, l\u2019utilisateur peut contr\u00f4ler pr\u00e9cis\u00e9ment l\u2019affichage de l\u2019image d\u2019arri\u00e8re-plan afin de mieux r\u00e9pondre aux exigences du design de la page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"brand\" style=\"margin-bottom:30px\">5\u3001Bloc d\u2019histoire de la marque<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"430\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png\" alt=\"Bloc histoire de la marque\" class=\"wp-image-23352\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u54c1\u724c\u6545\u4e8b\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Le layout du conteneur et les \u00e9l\u00e9ments utilis\u00e9s dans le bloc d\u2019histoire de la marque sont les m\u00eames que ceux du \u00ab bloc de produit et de service \u00bb mentionn\u00e9 pr\u00e9c\u00e9demment. Il utilise \u00e9galement trois composants : le composant de titre, le composant de bouton et le composant de galerie (Gallery) pour charger le contenu, et l\u2019agencement g\u00e9n\u00e9ral reste celui d\u2019un conteneur principal contenant deux sous-conteneurs. Les lecteurs peuvent utiliser les r\u00e9glages des param\u00e8tres de conteneur, la m\u00e9thode de disposition imbriqu\u00e9e, ainsi que les ajustements des param\u00e8tres et du style de ces trois composants pour cr\u00e9er la mise en page du \u00ab bloc d\u2019histoire de la marque \u00bb montr\u00e9e sur l\u2019image ci-dessus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"information\" style=\"margin-bottom:30px\">6\u3001Bloc d\u2019informations r\u00e9centes<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"432\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png\" alt=\"Bloc des derni\u00e8res actualit\u00e9s\" class=\"wp-image-23354\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6700\u65b0\u4fe1\u606f\u533a\u5757-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Pour afficher les m\u00e9tadonn\u00e9es du composant Post d\u2019Elementor en anglais sur la page, il est n\u00e9cessaire de d\u00e9finir la langue du site WordPress en anglais. En effet, l\u2019interface d\u2019\u00e9dition d\u2019Elementor et certaines m\u00e9tadonn\u00e9es lisent par d\u00e9faut la langue du site et s\u2019affichent en cons\u00e9quence. C\u2019est pourquoi, dans la capture d\u2019\u00e9cran ci-dessus, les param\u00e8tres et le style du composant Post sont \u00e9galement affich\u00e9s en anglais. Ensuite, le blogueur expliquera les param\u00e8tres fonctionnels essentiels du composant Post et comment ajuster son style pour que vous puissiez mieux utiliser ce composant.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Param\u00e8tres sous l'onglet \u00ab Contenu \u00bb du composant post<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"434\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u5185\u5bb9\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23359\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u5185\u5bb9\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans le composant Post d\u2019Elementor, l\u2019onglet \u00ab Contenu \u00bb offre une s\u00e9rie de r\u00e9glages cl\u00e9s permettant de contr\u00f4ler la disposition et l\u2019affichage des articles. Voici les d\u00e9tails de chaque fonctionnalit\u00e9, gr\u00e2ce auxquels l\u2019utilisateur peut ajuster l\u2019affichage du contenu du composant Post pour mieux s\u2019adapter au style du site :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Disposition (Layout) :<\/strong> La section disposition permet \u00e0 l\u2019utilisateur de choisir le style d\u2019affichage des articles. L\u2019option \u00ab Skin \u00bb permet de d\u00e9finir le style d\u2019apparence g\u00e9n\u00e9ral, comme le mode \u00ab Cards \u00bb qui organise le contenu des articles sous forme de cartes. Ensuite, l\u2019option \u00ab Columns \u00bb permet de sp\u00e9cifier le nombre de colonnes dans la liste d\u2019articles, tandis que l\u2019option \u00ab Posts Per Page \u00bb d\u00e9termine le nombre d\u2019articles affich\u00e9s par page.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Image :<\/strong> Les param\u00e8tres li\u00e9s \u00e0 l\u2019image incluent l\u2019interrupteur \u00ab Show Image \u00bb pour contr\u00f4ler l\u2019affichage de la miniature de l\u2019article ; l\u2019option \u00ab Masonry \u00bb active la disposition en ma\u00e7onnerie, organisant les images et les blocs d\u2019articles selon diff\u00e9rentes hauteurs pour am\u00e9liorer l\u2019effet visuel. \u00ab Image Resolution \u00bb permet \u00e0 l\u2019utilisateur de d\u00e9finir la r\u00e9solution de l\u2019image, par exemple \u00ab Medium 0.3x \u00bb pour r\u00e9duire la pression de chargement de l\u2019image, et \u00ab Image Ratio \u00bb ajuste le rapport largeur\/hauteur de l\u2019image afin d\u2019assurer une disposition harmonieuse.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Titre :<\/strong> La section titre propose l\u2019interrupteur \u00ab Show \u00bb pour d\u00e9cider si le titre de l\u2019article doit \u00eatre affich\u00e9, et permet de s\u00e9lectionner une balise HTML via \u00ab Title HTML Tag \u00bb, comme H3, influen\u00e7ant ainsi le poids SEO et la hi\u00e9rarchie des styles.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Extrait :<\/strong> La section extrait permet de d\u00e9finir l\u2019affichage du r\u00e9sum\u00e9 de l\u2019article. L\u2019interrupteur \u00ab Show \u00bb d\u00e9cide de l\u2019affichage de l\u2019extrait, tandis que \u00ab Excerpt Length \u00bb contr\u00f4le le nombre de caract\u00e8res de l\u2019extrait, assurant ainsi une disposition propre de la page. De plus, l\u2019option \u00ab Apply to custom Excerpt \u00bb permet d\u2019appliquer les param\u00e8tres d\u2019extrait \u00e0 un champ de contenu personnalis\u00e9.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>M\u00e9tadonn\u00e9es (Meta Data) :<\/strong> La section des m\u00e9tadonn\u00e9es permet de choisir si les informations telles que la date, l\u2019heure, les cat\u00e9gories, les \u00e9tiquettes et l\u2019auteur de l\u2019article doivent \u00eatre affich\u00e9es, rendant ainsi la liste des articles plus compl\u00e8te et structur\u00e9e. Dans la capture d\u2019\u00e9cran, vous pouvez voir que la date (Date), l\u2019heure (Time) et le nombre de commentaires (Comments) sont activ\u00e9s.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Param\u00e8tres sous l'onglet \u00ab Style \u00bb du composant post<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"427\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png\" alt=\"post\u7ec4\u4ef6\u201c\u6837\u5f0f\u201d\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879\" class=\"wp-image-23358\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/post\u7ec4\u4ef6\u6837\u5f0f\u9009\u9879\u5361\u4e0b\u7684\u8bbe\u7f6e\u9879-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans le composant Post d\u2019Elementor, l\u2019onglet \u00ab Style \u00bb offre une s\u00e9rie d\u2019options pour ajuster l\u2019apparence, y compris la disposition g\u00e9n\u00e9rale, le style des images, le style des textes et les r\u00e9glages d\u2019espacement, afin de garantir que l\u2019apparence de la liste des articles corresponde au style du site. Gr\u00e2ce \u00e0 ces param\u00e8tres dans l\u2019onglet \u00ab Style \u00bb, les utilisateurs peuvent affiner l\u2019apparence visuelle du composant Post pour mieux l\u2019adapter \u00e0 la marque et aux exigences de conception globale du site. Les d\u00e9tails des styles personnalisables sous le composant Post sont les suivants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"translation-block\"><strong>Disposition (Layout) :<\/strong> La section disposition permet \u00e0 l\u2019utilisateur d\u2019ajuster la taille g\u00e9n\u00e9rale du composant Post, y compris la largeur et la hauteur des cartes. Ces r\u00e9glages aident les utilisateurs \u00e0 optimiser la mani\u00e8re dont les blocs d\u2019articles occupent de l\u2019espace, afin de mieux s\u2019adapter aux diff\u00e9rents layouts de page.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Image :<\/strong> La section image offre des r\u00e9glages d\u00e9taill\u00e9s pour ajuster le style des miniatures des articles, y compris le rayon des coins (Border Radius), les bordures (Border) et les effets d\u2019ombre (Box Shadow). Les utilisateurs peuvent ajuster ces param\u00e8tres pour obtenir diff\u00e9rents styles visuels pour les images, comme des designs carr\u00e9s, arrondis ou avec un effet tridimensionnel.<\/li>\n\n\n\n<li class=\"translation-block\"><strong>Contenu :<\/strong> La section contenu concerne les r\u00e9glages de style des \u00e9l\u00e9ments internes des articles, tels que le titre, l\u2019extrait, le bouton \u00ab Lire la suite \u00bb et les m\u00e9tadonn\u00e9es (Meta Data). Dans les param\u00e8tres du titre (Title), les utilisateurs peuvent ajuster la taille de la police, la couleur, le poids de la police et l\u2019espacement, afin de donner plus de hi\u00e9rarchie au titre dans la liste. La section extrait (Excerpt) permet \u00e9galement de modifier les styles de police pour garantir la lisibilit\u00e9 et l\u2019esth\u00e9tique du r\u00e9sum\u00e9 de l\u2019article. De plus, la section des m\u00e9tadonn\u00e9es (Meta Data) permet de personnaliser la police et la couleur des informations telles que la date, la cat\u00e9gorie, les tags, etc., afin de rendre les hi\u00e9rarchies d\u2019informations de la liste d\u2019articles plus claires.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"file\" style=\"margin-bottom:30px\">Quatre\u3001 Cr\u00e9er un fichier de mod\u00e8le de pied de page (footer) avec Elementor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"399\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png\" alt=\"Cr\u00e9ation d\u2019un fichier mod\u00e8le de pied de page (footer) avec Elementor\" class=\"wp-image-23364\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u4f7f\u7528Elementor\u521b\u5efafooter\uff08\u9875\u811a\uff09\u6a21\u677f\u6587\u4ef6-18x9.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">La section Footer (pied de page) est la derni\u00e8re partie de la d\u00e9monstration dans cet article. Elle explique comment personnaliser la cr\u00e9ation de la mise en page et des \u00e9l\u00e9ments d\u2019une page. Une fois la mise en page et la conception du pied de page termin\u00e9es, la structure de la page est essentiellement form\u00e9e et devient une page compl\u00e8te. L\u2019entr\u00e9e pour cr\u00e9er le fichier mod\u00e8le de pied de page est identique \u00e0 celle du fichier mod\u00e8le d\u2019en-t\u00eate (Header), il faut acc\u00e9der \u00e0 l\u2019interface du g\u00e9n\u00e9rateur de th\u00e8me Elementor dans la page frontend. Dans l\u2019interface de gestion du g\u00e9n\u00e9rateur de th\u00e8me, l\u2019utilisateur peut trouver l\u2019option Footer (pied de page) dans le r\u00e9pertoire de mod\u00e8les \u00e0 gauche, qui se trouve en deuxi\u00e8me position dans le r\u00e9pertoire \u00e0 gauche. En cliquant dessus, vous acc\u00e9dez \u00e0 l\u2019interface de gestion du mod\u00e8le de pied de page. Dans cette interface, cliquez sur le bouton \"Add New\" (Ajouter un nouveau) en haut \u00e0 droite pour cr\u00e9er un nouveau fichier mod\u00e8le de pied de page. Pendant le processus de cr\u00e9ation, Elementor proposera une s\u00e9rie de styles de pied de page pr\u00e9d\u00e9finis, que l\u2019utilisateur pourra choisir directement pour finaliser rapidement la conception du pied de page. Si une mise en page compl\u00e8tement personnalis\u00e9e est n\u00e9cessaire, vous pouvez fermer la fen\u00eatre de s\u00e9lection de style et utiliser librement des conteneurs et des \u00e9l\u00e9ments pour concevoir un mod\u00e8le de pied de page qui correspond au style du site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"common\" style=\"margin-bottom:30px\">1\u3001Les formats de mise en page courants pour le Footer (pied de page)<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2532\" height=\"1438\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png\" alt=\"Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f\" class=\"wp-image-23369\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f.png 2532w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\u5e38\u89c1\u5bb9\u5668\u5e03\u5c40\u5f62\u5f0f-18x10.png 18w\" sizes=\"(max-width: 2532px) 100vw, 2532px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">D\u2019apr\u00e8s les apprentissages pr\u00e9c\u00e9dents et la pratique, les lecteurs devraient comprendre qu\u2019il est possible de r\u00e9aliser n\u2019importe quel format de mise en page, qu\u2019il soit simple ou complexe, tant que l\u2019on ma\u00eetrise les param\u00e8tres de conteneur parent, la direction d\u2019alignement et les m\u00e9thodes d\u2019imbrication des conteneurs enfants. La mise en page du pied de page, comme montr\u00e9 dans l\u2019image ci-dessus, n\u2019est pas trop complexe, g\u00e9n\u00e9ralement r\u00e9alis\u00e9e en imbriquant plusieurs conteneurs enfants dans un conteneur parent, la direction d\u2019alignement des conteneurs enfants d\u00e9pendra des besoins du design. La mise en page du pied de page dans cette d\u00e9monstration est constitu\u00e9e de trois lignes pour l\u2019agencement des conteneurs enfants, et dans le conteneur enfant de deuxi\u00e8me niveau, trois autres conteneurs sont organis\u00e9s par colonnes. Une fois que la mise en page des conteneurs est termin\u00e9e, nous pouvons ajouter les \u00e9l\u00e9ments n\u00e9cessaires dans les conteneurs enfants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"component\" style=\"margin-bottom:30px\">2. Les composants couramment utilis\u00e9s dans le Footer (pied de page)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"539\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png\" alt=\"Composants fr\u00e9quemment utilis\u00e9s dans le pied de page\" class=\"wp-image-23370\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Footer\uff08\u9875\u811a\uff09\u5e38\u7528\u7684\u7ec4\u4ef6-18x10.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Le pied de page, en tant que structure situ\u00e9e en bas du site web, bien qu\u2019il ne soit pas aussi informatif que le corps de la page ou aussi dominant en termes de navigation que l\u2019en-t\u00eate, remplit toujours des fonctions tr\u00e8s pratiques, telles que les informations de copyright, les coordonn\u00e9es, les liens sociaux, la navigation secondaire, les formulaires d\u2019abonnement, etc. En termes de conception pratique, la complexit\u00e9 du pied de page d\u00e9pend g\u00e9n\u00e9ralement du style global du site et des besoins fonctionnels. Il peut \u00eatre tr\u00e8s simple ou relativement riche. Au fil de la pratique de la cr\u00e9ation de sites, l\u2019auteur a progressivement d\u00e9velopp\u00e9 une combinaison de composants de pied de page efficaces et pratiques en fonction des besoins des diff\u00e9rents projets. Bien que chaque site ait son propre positionnement, il est possible de cr\u00e9er un pied de page clair, esth\u00e9tique, uniforme et fonctionnel en utilisant correctement ces composants courants, m\u00eame sans ajouter de nombreux \u00e9l\u00e9ments d\u00e9coratifs. Dans la section suivante, l\u2019auteur pr\u00e9sentera les param\u00e8tres fonctionnels et les styles de ces composants pour garantir que les styles de ces composants soient coh\u00e9rents avec le plan de conception et que votre site WordPress refl\u00e8te \u00e9galement le professionnalisme et la qualit\u00e9 dans ses d\u00e9tails.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(1) Composant Site Logo<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"514\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png\" alt=\"Site Logo\u7ec4\u4ef6\" class=\"wp-image-23376\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/Site-Logo\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Le composant Site Logo a d\u00e9j\u00e0 \u00e9t\u00e9 utilis\u00e9 dans le chapitre des fichiers mod\u00e8les d\u2019en-t\u00eate (Header), mais \u00e0 l\u2019\u00e9poque, nous nous \u00e9tions principalement concentr\u00e9s sur la disposition g\u00e9n\u00e9rale et la combinaison des composants, sans entrer dans les d\u00e9tails de la fonction et du style du composant Site Logo lui-m\u00eame. Par cons\u00e9quent, dans cette section, l\u2019auteur compl\u00e9tera l\u2019explication des onglets \u00ab Contenu \u00bb et \u00ab Style \u00bb de ce composant pour aider les utilisateurs \u00e0 ma\u00eetriser plus facilement son utilisation dans diff\u00e9rents contextes.<\/p>\n\n\n\n<p>Dans l'onglet \u00ab Contenu \u00bb du composant Site Logo, l'utilisateur peut choisir d'utiliser le logo du site d\u00e9fini dans le backend de WordPress ou de t\u00e9l\u00e9charger une image personnalis\u00e9e comme logo. En plus de choisir l'image, ce panneau permet \u00e9galement de d\u00e9finir le comportement du lien du logo (par exemple, si un clic sur le logo redirige vers la page d'accueil), ainsi que la taille de l'image du logo (parmi les tailles d'image d\u00e9finies par WordPress comme par d\u00e9faut, miniature, taille moyenne, etc.). Quant \u00e0 l'onglet \u00ab Style \u00bb, il offre plus de contr\u00f4le sur l'apparence visuelle du logo. Dans ce panneau, vous pouvez personnaliser la largeur et la largeur maximale du logo pour l\u2019adapter aux besoins d'affichage de diff\u00e9rentes r\u00e9solutions ; vous pouvez \u00e9galement ajuster l'opacit\u00e9 de l'image, les effets de filtre CSS (comme la grisaille, la luminosit\u00e9, le contraste, etc.), afin que le logo s\u2019harmonise mieux avec le style global de la page. En outre, l'onglet \u00ab Style \u00bb prend en charge les r\u00e9glages de bordure, d'arrondi et d'ajout d'ombres pour offrir au logo un affichage plus textur\u00e9. Ces ajustements de style am\u00e9liorent non seulement l'unit\u00e9 visuelle, mais permettent \u00e9galement au logo de conserver une pr\u00e9sentation optimale sur diff\u00e9rents appareils et styles de th\u00e8me.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(2) Composant Titre<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"489\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png\" alt=\"\u6807\u9898\u7ec4\u4ef6\" class=\"wp-image-23377\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6807\u9898\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\">Les param\u00e8tres de fonctionnalit\u00e9 et de style du composant Titre ont d\u00e9j\u00e0 \u00e9t\u00e9 abord\u00e9s dans le troisi\u00e8me chapitre de cet article, dans la section intitul\u00e9e \u00ab <strong>Utiliser Elementor pour construire le cadre principal de la page et ajouter des \u00e9l\u00e9ments de contenu<\/strong> \u00bb, dans la sous-section \u00ab Bloc de description de l'entreprise \u00bb. L\u2019auteur ne reviendra pas sur ces \u00e9l\u00e9ments ici, mais vous pouvez pratiquer en utilisant la m\u00e9thode d\u2019application du composant Titre apprise dans la section pr\u00e9c\u00e9dente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(3) Composant Liste d'ic\u00f4nes<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"493\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png\" alt=\"\u56fe\u6807\u5217\u8868\u7ec4\u4ef6\" class=\"wp-image-23378\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u56fe\u6807\u5217\u8868\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans le composant \u00ab Liste d'ic\u00f4nes \u00bb d'Elementor, l'onglet \u00ab Contenu \u00bb est principalement utilis\u00e9 pour d\u00e9finir le contenu et la structure d'agencement de chaque \u00e9l\u00e9ment de la liste. Vous pouvez ajouter des \u00e9l\u00e9ments \u00e0 la liste un par un et assigner une ic\u00f4ne \u00e0 chaque \u00e9l\u00e9ment, comme une coche, une fl\u00e8che, une ic\u00f4ne de t\u00e9l\u00e9phone, etc., pour am\u00e9liorer la reconnaissance de l'information. Bien s\u00fbr, comme dans la configuration utilis\u00e9e dans cette d\u00e9monstration, vous pouvez \u00e9galement supprimer les ic\u00f4nes de la liste en supprimant simplement l'ic\u00f4ne actuelle dans les param\u00e8tres de l'ic\u00f4ne. Chaque \u00e9l\u00e9ment de la liste peut avoir un texte de titre personnalis\u00e9 et un lien associ\u00e9 (par exemple, un lien vers une autre page ou pour passer un appel t\u00e9l\u00e9phonique).<\/p>\n\n\n\n<p>Dans l'onglet \u00ab Style \u00bb, Elementor offre un contr\u00f4le plus personnalis\u00e9 sur l'apparence de la liste d'ic\u00f4nes. Vous pouvez ajuster s\u00e9par\u00e9ment le style des ic\u00f4nes et le style du texte. Par exemple, pour les ic\u00f4nes, vous pouvez personnaliser la couleur, la taille, l'espacement, les effets de survol, etc. Pour le texte, vous pouvez d\u00e9finir la police, la taille de police, la hauteur de ligne, la couleur, ainsi que l'espacement entre le texte et l'ic\u00f4ne. Si vous activez la fonction de ligne de s\u00e9paration, vous pouvez \u00e9galement ajuster l'\u00e9paisseur, la couleur et le style de la ligne. Gr\u00e2ce \u00e0 ces options de style, vous pouvez adapter la liste d'ic\u00f4nes au style global de la page, qu\u2019il s\u2019agisse d\u2019une page simple ou d\u2019une page cr\u00e9ative mettant davantage l'accent sur la tension visuelle.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(4) Composant Ic\u00f4nes Sociales<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"485\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png\" alt=\"\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6\" class=\"wp-image-23379\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u793e\u4ea4\u56fe\u6807\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans le composant \u00ab Ic\u00f4nes Sociales \u00bb d'Elementor, l'onglet \u00ab Contenu \u00bb est principalement utilis\u00e9 pour ajouter et g\u00e9rer les liens vers diff\u00e9rentes plateformes sociales. L'utilisateur peut ajouter librement plusieurs entr\u00e9es d'ic\u00f4nes sociales, comme celles utilis\u00e9es par l\u2019auteur, telles que Facebook, Twitter, YouTube, etc. Chaque entr\u00e9e permet de personnaliser le type d'ic\u00f4ne (utiliser la biblioth\u00e8que d'ic\u00f4nes int\u00e9gr\u00e9e ou t\u00e9l\u00e9charger une ic\u00f4ne SVG), de remplir le lien social correspondant et de d\u00e9finir si le lien s\u2019ouvre dans un nouvel onglet. En plus des plateformes sociales pr\u00e9d\u00e9finies, il est \u00e9galement possible de choisir le type \u00ab Personnalis\u00e9 \u00bb pour ajouter n'importe quel lien et ic\u00f4ne, permettant une utilisation plus flexible. Gr\u00e2ce \u00e0 ces r\u00e9glages de contenu, les ic\u00f4nes sociales peuvent non seulement guider rapidement les visiteurs vers d\u2019autres plateformes, mais aussi renforcer visuellement la capacit\u00e9 de liaison externe et l\u2019interconnexion de la marque sur le site.<\/p>\n\n\n\n<p>Dans l'onglet \u00ab Style \u00bb, Elementor offre de nombreuses options de personnalisation visuelle, garantissant que les ic\u00f4nes sociales soient \u00e0 la fois pratiques et esth\u00e9tiques. Vous pouvez d\u00e9finir la taille des ic\u00f4nes, l'espacement, l'alignement, ainsi que le sch\u00e9ma de couleurs des ic\u00f4nes (par exemple, les couleurs de marque officielles ou une couleur personnalis\u00e9e). De plus, ce param\u00e8tre permet d'ajuster les bordures, les coins arrondis et la couleur de fond des ic\u00f4nes, et de d\u00e9finir des effets au survol, comme l'inversion des couleurs, des animations de zoom ou des variations d'ombre, afin que les ic\u00f4nes sociales aient un effet dynamique lorsqu'un utilisateur interagit. Gr\u00e2ce \u00e0 ces r\u00e9glages de style, que vous souhaitiez concevoir une zone sociale de pied de page simple et plate ou cr\u00e9er une zone de guidage social visuellement percutante, le composant des ic\u00f4nes sociales d'Elementor offre une grande libert\u00e9 de conception.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" style=\"margin-bottom:30px\">(5) Composant \u00c9diteur de texte<\/h4>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"491\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png\" alt=\"\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6\" class=\"wp-image-23380\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u6587\u672c\u7f16\u8f91\u5668\u7ec4\u4ef6-18x12.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Dans le composant \u00ab \u00c9diteur de texte \u00bb d'Elementor, l'onglet \u00ab Contenu \u00bb est principalement responsable de la saisie du contenu textuel et des r\u00e9glages de mise en page de base. L'utilisateur peut directement entrer les phrases textuelles n\u00e9cessaires dans la bo\u00eete de texte. Ce composant utilise un \u00e9diteur WYSIWYG (What You See Is What You Get), avec des fonctionnalit\u00e9s similaires \u00e0 l'\u00e9diteur classique de WordPress, permettant de mettre du texte en gras, en italique, d'ins\u00e9rer des liens hypertextes, d'ajuster l'alignement, etc. Si vous avez besoin d'ins\u00e9rer du contenu dynamique (comme un titre d'article, une date, etc.), cela peut \u00e9galement \u00eatre r\u00e9alis\u00e9 via la fonctionnalit\u00e9 des balises dynamiques d'Elementor. En g\u00e9n\u00e9ral, les r\u00e9glages de cet onglet sont davantage orient\u00e9s vers le remplissage du contenu et la pr\u00e9sentation de la structure, ce qui le rend id\u00e9al pour les paragraphes de texte, les explications, les informations de copyright, et d'autres zones textuelles.<\/p>\n\n\n\n<p>Dans l'onglet \u00ab Style \u00bb, vous pouvez personnaliser l'apparence du texte. Vous pouvez d\u00e9finir la couleur du texte, le type de police, la taille de la police, l'\u00e9paisseur de la police, la hauteur de ligne, l'espacement des lettres, etc., pour l'adapter au style visuel global de la page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"display\" style=\"margin-bottom:30px\">3. Publication du fichier de mod\u00e8le Footer (Pied de page) et d\u00e9finition des conditions d'affichage<\/h3>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png\" alt=\"\u9875\u811a\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6\" class=\"wp-image-23308\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6.png 800w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/\u8bbe\u5b9aHeader\u6a21\u677f\u6587\u4ef6\u7684\u663e\u793a\u6761\u4ef6-18x10.png 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\">Le fichier de mod\u00e8le Footer (Pied de page) est, comme le fichier de mod\u00e8le Header, une partie globale du site WordPress. Par cons\u00e9quent, les conditions d'affichage sont \u00e9galement d\u00e9finies de mani\u00e8re similaire \u00e0 celles du fichier de mod\u00e8le Header, en \u00e9tant configur\u00e9es pour s'afficher sur toutes les pages du site. Les lecteurs peuvent suivre les \u00e9tapes et options indiqu\u00e9es dans l'image ci-dessus pour publier le fichier de mod\u00e8le Footer et d\u00e9finir les conditions d'affichage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show\" style=\"margin-bottom:30px\">4. Pr\u00e9sentation de la page finale r\u00e9alis\u00e9e avec l'\u00e9diteur Elementor<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"3045\" src=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png\" alt=\"WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66\" class=\"wp-image-23372\" srcset=\"https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66.png 1000w, https:\/\/www.szlogic.net\/wp-content\/uploads\/2025\/04\/WordPress\u9875\u9762\u81ea\u5b9a\u4e49\u9875\u9762\u8bbe\u8ba1\u6559\u5b66-4x12.png 4w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p style=\"margin-top:30px\" class=\"translation-block\"><strong>Conclusion\u00a0:<\/strong> Les captures d'\u00e9cran compl\u00e8tes de la page ci-dessus sont le produit final de la construction de la page, r\u00e9alis\u00e9e en temps r\u00e9el tout au long de ce tutoriel. Depuis la cr\u00e9ation d'une nouvelle page dans le back-office de WordPress jusqu'\u00e0 l'utilisation d'Elementor pour cr\u00e9er les \u00e9l\u00e9ments et structures du header, du contenu principal et du footer, chaque \u00e9tape et chaque param\u00e8tre a \u00e9t\u00e9 montr\u00e9 en suivant le processus de d\u00e9veloppement r\u00e9el. En d'autres termes, l'apparence finale de la page est directement le produit de ce tutoriel. J'esp\u00e8re que ce guide de cr\u00e9ation de site Elementor, d\u00e9marrant de z\u00e9ro, offrira des r\u00e9f\u00e9rences claires et des astuces pratiques \u00e0 ceux qui apprennent \u00e0 concevoir et d\u00e9velopper des pages WordPress. Si vous rencontrez des probl\u00e8mes lors de l'op\u00e9ration, n'h\u00e9sitez pas \u00e0 revenir aux sections correspondantes pour consulter les d\u00e9tails. Si vous avez d\u00e9j\u00e0 termin\u00e9 l'ensemble du processus avec succ\u00e8s, vous \u00eates \u00e9galement invit\u00e9 \u00e0 ajouter plus de conception personnalis\u00e9e \u00e0 partir de cette base pour continuer \u00e0 d\u00e9velopper des pages de sites de haute qualit\u00e9.<\/p>\n\n\n\n<p class=\"translation-block\">Enfin, si apr\u00e8s avoir lu ce tutoriel, vous estimez que la cr\u00e9ation de sites WordPress n\u00e9cessite encore une assistance technique professionnelle ou si vous souhaitez am\u00e9liorer le design de vos pages Elementor \u00e0 un niveau sup\u00e9rieur, n'h\u00e9sitez pas \u00e0 d\u00e9couvrir et \u00e0 contacter Logic Digital Technology Co., Ltd. Nous nous sp\u00e9cialisons dans la <strong><a href=\"https:\/\/www.szlogic.net\/fr\/web-design\/\" data-type=\"link\" data-id=\"https:\/\/www.szlogic.net\/web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">conception et le d\u00e9veloppement personnalis\u00e9 de sites WordPress<\/a><\/strong>, avec une riche exp\u00e9rience pratique, capable de cr\u00e9er des pages de sites Web professionnelles, adapt\u00e9es \u00e0 l'exp\u00e9rience utilisateur et aux objectifs de conversion, en fonction du positionnement de la marque de l'entreprise et des besoins commerciaux. Que ce soit pour un site web d'entreprise, une plateforme de commerce \u00e9lectronique ou un site multilingue pour le commerce international, nous pouvons vous fournir des solutions de cr\u00e9ation de sites efficaces, stables et \u00e9volutives.<\/p>\n\n\n\n<p><strong>Cet article est la propri\u00e9t\u00e9 de Logic Digital Technology (SZLOGIC), il est libre de partage pour l'apprentissage personnel. Toute utilisation commerciale ou reproduction sans autorisation est strictement interdite.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>WordPress\u6559\u5b66\uff1a\u4ece\u96f6\u5f00\u59cb\u4f7f\u7528Elementor\u7f16\u8f91\u5668\u81ea\u5b9a\u4e49\u6784\u5efa\u9875\u9762 \u5982\u679c\u4f60\u60f3\u6253\u9020\u4e00\u4e2a\u4e13\u4e1a\u53c8\u4e2a\u6027\u5316\u7684Wo [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23270,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[87],"tags":[],"class_list":["post-23262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/posts\/23262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/comments?post=23262"}],"version-history":[{"count":73,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/posts\/23262\/revisions"}],"predecessor-version":[{"id":23397,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/posts\/23262\/revisions\/23397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/media\/23270"}],"wp:attachment":[{"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/media?parent=23262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/categories?post=23262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.szlogic.net\/fr\/wp-json\/wp\/v2\/tags?post=23262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}