{"id":33968,"date":"2024-08-11T15:26:16","date_gmt":"2024-08-11T15:26:16","guid":{"rendered":"\/tutoriels\/?p=33968"},"modified":"2024-11-26T19:48:16","modified_gmt":"2024-11-26T19:48:16","slug":"twenty-twenty-four","status":"publish","type":"post","link":"\/fr\/tutoriels\/twenty-twenty-four","title":{"rendered":"Explorer Twenty Twenty-Four : un th\u00e8me WordPress pour tous les sites web"},"content":{"rendered":"<p>Chaque ann&eacute;e, la communaut&eacute; WordPress, dirig&eacute;e par l&rsquo;&eacute;quipe du th&egrave;me Automatic, publie un nouveau th&egrave;me par d&eacute;faut mettant en valeur les fonctionnalit&eacute;s de la derni&egrave;re version de WordPress<strong>.&nbsp;<\/strong><\/p><p>Ce fut le cas en novembre 2023, lorsque WordPress 6.4 fut livr&eacute; avec Twenty Twenty-Four, que beaucoup consid&eacute;raient comme le meilleur th&egrave;me par d&eacute;faut jamais publi&eacute; par l&rsquo;&eacute;quipe.<\/p><p>Comme tous les <a href=\"\/fr\/tutoriels\/meilleur-theme-wordpress-gratuit\"><strong>th&egrave;mes WordPress<\/strong><\/a> par d&eacute;faut r&eacute;cents, Twenty Twenty-Four est un th&egrave;me &agrave; blocs qui permet de cr&eacute;er chaque &eacute;l&eacute;ment d&rsquo;un site web &agrave; l&rsquo;aide de blocs.<\/p><p>Twenty Twenty-Four vous permet de cr&eacute;er une grande vari&eacute;t&eacute; de sites web, limit&eacute;s seulement par votre imagination. Cependant, sa force r&eacute;side dans la cr&eacute;ation de trois types de sites, que j&rsquo;explorerai en d&eacute;tail plus loin.&nbsp;<\/p><p>Voyons ce qui fait la sp&eacute;cificit&eacute; de Twenty Twenty-Four.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-compositions\"><strong>Compositions<\/strong><\/h2><p>Une composition WordPress est une collection de blocs logiquement orient&eacute;s qui sugg&egrave;rent la mise en page. Tout &eacute;l&eacute;ment d&rsquo;une composition peut &ecirc;tre modifi&eacute; sans aucun codage. Par cons&eacute;quent, ces compositions constituent un moyen facile d&rsquo;entamer votre processus de conception, de garantir la coh&eacute;rence et d&rsquo;acc&eacute;l&eacute;rer votre flux de travail.&nbsp;&nbsp;<\/p><p>Twenty Twenty-Four est livr&eacute; avec plus de compositions que tout autre th&egrave;me par d&eacute;faut publi&eacute; pr&eacute;c&eacute;demment. Il s&rsquo;agit de compositions de pages compl&egrave;tes et partielles, comme :<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/gallery-page-pattern.png\/public\" alt=\"Blocs de compositions disponibles sur le th&egrave;me Twenty Twenty-Four \" class=\"wp-image-34011\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/gallery-page-pattern.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/gallery-page-pattern.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/gallery-page-pattern.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/gallery-page-pattern.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Les 37 compositions du th&egrave;me sont organis&eacute;es en cat&eacute;gories :<\/p><ul class=\"wp-block-list\">\n<li>&Agrave; propos&nbsp;<\/li>\n\n\n\n<li>Banni&egrave;res<\/li>\n\n\n\n<li>Appel &agrave; l&rsquo;action<\/li>\n\n\n\n<li>Mis en avant<\/li>\n\n\n\n<li>Pieds de page<\/li>\n\n\n\n<li>Galerie<\/li>\n\n\n\n<li>Pages<\/li>\n\n\n\n<li>Portfolio<\/li>\n\n\n\n<li>Publications<\/li>\n\n\n\n<li>Services<\/li>\n\n\n\n<li><em>&Eacute;<\/em>quipe<\/li>\n\n\n\n<li>T&eacute;moignages<\/li>\n\n\n\n<li>Texte<\/li>\n<\/ul><p>Comme pour tout th&egrave;me WordPress, vous pouvez cr&eacute;er des compositions personnalis&eacute;es qui peuvent &ecirc;tre utilis&eacute;es partout sur votre site.<\/p><h2 class=\"wp-block-heading\" id=\"h-variations-de-style\"><strong>Variations de style<\/strong><\/h2><p>Le th&egrave;me comporte huit variations de style, qui sont des ensembles de styles pr&eacute;d&eacute;finis que vous pouvez modifier en fonction de vos besoins.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e23e1d2c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"792\" height=\"139\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/style-variations.png\/public\" alt=\"Variations de style disponibles sur le th&egrave;me Twenty Twenty-Four\" class=\"wp-image-34012\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/style-variations.png\/w=792,fit=scale-down 792w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/style-variations.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/style-variations.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/style-variations.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Lorsque vous modifiez le style de votre site, utilisez l&rsquo;une des variantes qui correspondent le mieux &agrave; l&rsquo;apparence que vous souhaitez donner &agrave; votre site. Personnalisez ensuite les couleurs, la typographie et d&rsquo;autres param&egrave;tres similaires &agrave; votre guise.<\/p><h2 class=\"wp-block-heading\" id=\"h-police-de-caracteres\"><strong>Police<\/strong> <strong>de caract&egrave;res<\/strong><\/h2><p>Quelle que soit la variante de style que vous choisissez, les polices suivantes vous attendent par d&eacute;faut :<\/p><h3 class=\"wp-block-heading\" id=\"h-cardo\"><strong>Cardo<\/strong><\/h3><p>Cardo est une police qui repr&eacute;sente un pont entre les polices de caract&egrave;res traditionnelles et modernes. Elle a un aspect solide, ancien et &eacute;rudit.&nbsp;<\/p><p><strong>Caract&eacute;ristiques principales<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Design Serif&nbsp;<\/li>\n\n\n\n<li>OpenType<\/li>\n\n\n\n<li>Jeu de caract&egrave;res &eacute;tendu<\/li>\n\n\n\n<li>Inspiration historique<\/li>\n\n\n\n<li>Open source<\/li>\n<\/ul><p>Gr&acirc;ce &agrave; ces propri&eacute;t&eacute;s, Cardo est id&eacute;al pour les titres de pages web, quel que soit l&rsquo;appareil utilis&eacute;.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-inter\"><strong>Inter<\/strong><\/h3><p>La police Inter a &eacute;t&eacute; sp&eacute;cialement con&ccedil;ue pour &ecirc;tre tr&egrave;s lisible et agr&eacute;able &agrave; l&rsquo;&oelig;il, tant sur les ordinateurs de bureau que sur les appareils mobiles, ce qui en fait un excellent choix pour la conception de sites web.<\/p><p><strong>Caract&eacute;ristiques principales&nbsp;<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Plusieurs graisses et styles<\/li>\n\n\n\n<li>Polyvalence<\/li>\n\n\n\n<li>Design moderne<\/li>\n\n\n\n<li>Adapt&eacute;e &agrave; la localisation<\/li>\n<\/ul><p>Cette police sans serif est id&eacute;ale pour les paragraphes, les listes, les liens ou tout autre type de texte.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e23e4f8f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Modifier-larticle-Article-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress-3.png\" alt=\"Un exemple de police sans serif utilis&eacute;e pour un paragraphe\" class=\"wp-image-34192\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Dans l&rsquo;exemple ci-dessus, &ldquo;Article&rdquo; est d&eacute;fini sur Cardo, le corps du texte &eacute;tant r&eacute;dig&eacute; en Inter.<\/p><h3 class=\"wp-block-heading\" id=\"h-system-sans-serif-et-system-serif-nbsp\"><strong>System Sans-serif et System Serif&nbsp;<\/strong><\/h3><p>Vous avez &eacute;galement la possibilit&eacute; de d&eacute;finir vos polices sur une police sans serif ou avec serif par d&eacute;faut. La police utilis&eacute;e d&eacute;pend du syst&egrave;me d&rsquo;exploitation de l&rsquo;utilisateur. Par exemple, de nombreux appareils Apple utilisent Roboto comme police sans serif par d&eacute;faut.&nbsp;<\/p><p>Qu&rsquo;en est-il de l&rsquo;utilisation de polices non incluses dans Twenty Twenty-Four ? Vous pouvez toujours utiliser d&rsquo;autres polices dans vos projets WordPress, comme Google Fonts ou Adobe Fonts.<\/p><p>Fin mars 2024, avec la sortie de WordPress 6.5, la s&eacute;lection des polices dans la biblioth&egrave;que de polices de WordPress sera aussi facile que la s&eacute;lection d&rsquo;une image dans la biblioth&egrave;que de m&eacute;dias.<\/p><h3 class=\"wp-block-heading\" id=\"h-reglage-des-polices\"><strong><strong>R&eacute;glage des polices<\/strong><\/strong><\/h3><p>Comme c&rsquo;est le cas depuis l&rsquo;adoption du syst&egrave;me de blocs Gutenberg, les polices peuvent &ecirc;tre d&eacute;finies pour l&rsquo;ensemble du site ou pour chaque bloc.&nbsp;<\/p><p><strong>Polices globales<\/strong><\/p><p>Le guide de style, qui fait partie de la section Style de l&rsquo;&eacute;diteur de site, est un moyen id&eacute;al de changer vos s&eacute;lections de polices par rapport aux s&eacute;lections pr&eacute;d&eacute;finies que l&rsquo;on trouve dans chaque variation de style.&nbsp;<\/p><p>Les polices pour le texte, les liens, les titres, les l&eacute;gendes et les boutons sont d&eacute;finies &agrave; l&rsquo;aide de ces choix dans la barre lat&eacute;rale droite.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e23e7b80\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Editeur-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress.png\" alt=\"Le guide de style, pour modifier les param&egrave;tres de style globaux.\" class=\"wp-image-34193\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Par bloc<\/strong><\/p><p>Vous pouvez modifier la police de n&rsquo;importe quel bloc pour remplacer les param&egrave;tres de style globaux. Ici, le titre est d&eacute;fini par d&eacute;faut sur Cardo. Pour le remplacer par Inter, cliquez sur le bouton &agrave; trois points situ&eacute; &agrave; c&ocirc;t&eacute; de Typographie dans la barre lat&eacute;rale droite pour ouvrir une vue qui vous permet de d&eacute;finir la police de caract&egrave;res.<\/p><figure data-wp-context='{\"imageId\":\"6a050e23ea84c\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Editeur-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress-1.png\" alt=\"Ouverture de la police de caract&egrave;res dans l'&eacute;diteur de blocs\" class=\"wp-image-34194\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Ensuite, cliquez en dehors de la fen&ecirc;tre Typographie mais &agrave; l&rsquo;int&eacute;rieur de la barre lat&eacute;rale droite pour afficher les options de police. Ici, je change pour Inter.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e23ed713\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"405\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/untitled-6.png\/public\" alt=\"S&eacute;lection de la police Inter dans l'&eacute;diteur de blocs\" class=\"wp-image-34196\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/untitled-6.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/untitled-6.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/untitled-6.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/untitled-6.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-modeles\"><strong>Mod&egrave;les<\/strong><\/h2><p>Le th&egrave;me est livr&eacute; avec ces onze mod&egrave;les &agrave; partir desquels n&rsquo;importe quel type de page peut &ecirc;tre construit :<\/p><h3 class=\"wp-block-heading\" id=\"h-modele-s-pour-blogging\"><strong><strong><strong>Mod&egrave;le<\/strong>s<\/strong> pour blogging<\/strong><\/h3><ul class=\"wp-block-list\">\n<li>Publications seules<\/li>\n\n\n\n<li>Page d&rsquo;accueil du blog<\/li>\n\n\n\n<li>* Publication unique avec colonne lat&eacute;rale<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-modele-s-de-pages\"><strong><strong><strong>Mod&egrave;le<\/strong>s<\/strong> de pages<\/strong><\/h3><ul class=\"wp-block-list\">\n<li>Pages<\/li>\n\n\n\n<li>* Page avec barre lat&eacute;rale<\/li>\n\n\n\n<li>Page sans titre&nbsp;<\/li>\n\n\n\n<li>* Page avec image large<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-modele-s-de-pages-specialisees\"><strong><strong><strong>Mod&egrave;le<\/strong>s<\/strong> de pages sp&eacute;cialis&eacute;es<\/strong><\/h3><ul class=\"wp-block-list\">\n<li>Index<\/li>\n\n\n\n<li>Page 404 <\/li>\n\n\n\n<li>R&eacute;sultats de recherche<\/li>\n\n\n\n<li>Page d&rsquo;archives<\/li>\n<\/ul><p>(* = unique &agrave; TwentyTwenyFour)<\/p><h3 class=\"wp-block-heading\" id=\"h-travailler-avec-le-modele-de-page-avec-image-large\"><strong>Travailler avec le <strong>mod&egrave;le<\/strong> de page avec image large<\/strong><\/h3><p>Voici un exemple de la fa&ccedil;on dont j&rsquo;ai utilis&eacute; l&rsquo;un des mod&egrave;les uniques de Twenty Twenty-Four pour cr&eacute;er deux pages.&nbsp;<\/p><p>Comme je pr&eacute;f&eacute;rais que l&rsquo;image vedette s&rsquo;&eacute;tende sur toute la largeur de l&rsquo;&eacute;cran, j&rsquo;ai modifi&eacute; la largeur de Normal &agrave; Pleine largeur. C&rsquo;est la seule modification que j&rsquo;ai apport&eacute;e &agrave; ce mod&egrave;le.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e23f09f7\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Page-with-Wide-Image-%E2%80%B9-Modele-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%B9-Editeur-%E2%80%94-WordPress.png\" alt=\"La page avec un mod&egrave;le d'image large dans l'&eacute;diteur de blocs\" class=\"wp-image-34252\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>L&rsquo;essence du mod&egrave;le est un bloc de groupe pris en sandwich entre les blocs d&rsquo;en-t&ecirc;te et de pied de page. (Pour plus de clart&eacute;, j&rsquo;ai supprim&eacute; les blocs d&rsquo;en-t&ecirc;te et de pied de page par d&eacute;faut et les ai remplac&eacute;s par mes blocs de remplacement).<\/p><p>Dans le bloc de groupe se trouvent l&rsquo;image vedette, le titre et les espaces r&eacute;serv&eacute;s au bloc de contenu. Ils seront remplis lorsque j&rsquo;utiliserai le mod&egrave;le dans les deux exemples ci-dessous.&nbsp;<\/p><p>Pour utiliser le mod&egrave;le, j&rsquo;ai modifi&eacute; le mod&egrave;le de page par d&eacute;faut en Page avec image large, puis j&rsquo;ai ajout&eacute; mon image de pr&eacute;sentation.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e23f3725\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Ajouter-une-page-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress.png\" alt=\"Changer le mod&egrave;le d'une page en page avec image large\" class=\"wp-image-34253\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Le r&eacute;sultat est cette page.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e24022a5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Page-avec-image-large-%E2%80%93-Arc-en-ciel-%E2%80%93-hostinger-dev-19-xyz-1-535x1024.png\" alt=\"Exemple de page avec le mod&egrave;le de page avec image large \" class=\"wp-image-34254\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>En utilisant le m&ecirc;me mod&egrave;le, j&rsquo;ai cr&eacute;&eacute; cette page.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e240502e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"767\" height=\"1200\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-wide-image.png\/public\" alt=\"Exemple de page avec le mod&egrave;le de page avec image large \" class=\"wp-image-34020\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-wide-image.png\/w=767,fit=scale-down 767w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-wide-image.png\/w=192,fit=scale-down 192w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-wide-image.png\/w=655,fit=scale-down 655w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-wide-image.png\/w=96,fit=scale-down 96w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Quelle est la diff&eacute;rence entre une composition et un mod&egrave;le ? Les compositions sont des collections de parties de pages pr&eacute;con&ccedil;ues que vous pouvez facilement adapter &agrave; votre usage. Consid&eacute;rez les compositions comme des design starters. Un mod&egrave;le d&eacute;finit la mise en page d&rsquo;une page donn&eacute;e. Toutes les pages que vous voyez sur un site WordPress sont d&eacute;finies par un seul mod&egrave;le.<\/p><p>Les compositions sont utilis&eacute;s dans un mod&egrave;le pour g&eacute;n&eacute;rer une page web.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-3-exemples-d-utilisation-de-compositions-pour-creer-des-sites-personnalises\"><strong>3 exemples d&rsquo;utilisation de compositions pour cr&eacute;er des sites personnalis&eacute;s<\/strong><\/h2><p>Dans les trois exemples suivants, j&rsquo;ai choisi la variation de style par d&eacute;faut.<\/p><h3 class=\"wp-block-heading\" id=\"h-utilisation-d-une-composition-de-page-pour-creer-une-page-de-base-pour-une-entreprise\"><strong>Utilisation d&rsquo;une composition de page pour cr&eacute;er une page de base pour une entreprise<\/strong><\/h3><p>La plupart des sites web utilisent une composition g&eacute;n&eacute;rique qui est utilis&eacute;e de mani&egrave;re r&eacute;p&eacute;t&eacute;e pour des pages typiques. Une bonne fa&ccedil;on de commencer est de choisir une composition de page et de la modifier pour obtenir un design utilisable sur l&rsquo;ensemble du site.&nbsp;<\/p><p>Ici, je commence par une composition de page que j&rsquo;utiliserai pour construire un site d&rsquo;entreprise. Cette composition comporte six sections horizontales (blocs de groupe), dont certaines comportent deux colonnes ou plus &agrave; l&rsquo;int&eacute;rieur d&rsquo;une m&ecirc;me section.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e240812a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"445\" height=\"1200\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-pattern.png\/public\" alt=\"Une composition &agrave; six sections horizontales \" class=\"wp-image-34021\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-pattern.png\/w=445,fit=scale-down 445w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-pattern.png\/w=111,fit=scale-down 111w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-pattern.png\/w=380,fit=scale-down 380w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/page-pattern.png\/w=56,fit=scale-down 56w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Comme il s&rsquo;agit d&rsquo;une page de base (polyvalente) par n&eacute;cessit&eacute;, elle doit &ecirc;tre d&eacute;pouill&eacute;e car elle sera utilis&eacute;e pour ces pages int&eacute;rieures et d&rsquo;autres encore :<\/p><ul class=\"wp-block-list\">\n<li>A propos de, Services, T&eacute;moignages, Equipe, Landing, et Page de contact<\/li>\n\n\n\n<li>Page des r&eacute;sultats de la recherche<\/li>\n\n\n\n<li>Page 404<\/li>\n<\/ul><p>Voici comment j&rsquo;ai cr&eacute;&eacute; cette composition de base minimaliste &agrave; partir duquel d&rsquo;autres blocs peuvent &ecirc;tre ajout&eacute;s selon les besoins pour diff&eacute;rentes pages.<\/p><p>1. J&rsquo;ai supprim&eacute; toutes les sections horizontales (lignes) &agrave; l&rsquo;exception de la troisi&egrave;me. J&rsquo;ai ensuite supprim&eacute; les deux colonnes qui s&rsquo;y trouvaient, ce qui m&rsquo;a laiss&eacute; un groupe de fond gris et vide.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e240b0cd\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Ajouter-une-page-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress-1-.png\" alt=\"Cr&eacute;ation d'une composition dans l'&eacute;diteur de blocs \" class=\"wp-image-34260\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>2. J&rsquo;ai renomm&eacute; le groupe &ldquo;Conteneur ext&eacute;rieur&rdquo;, j&rsquo;ai ajout&eacute; un bloc de groupe &agrave; l&rsquo;int&eacute;rieur de celui-ci et je l&rsquo;ai renomm&eacute; &ldquo;Conteneur int&eacute;rieur&rdquo; sur fond blanc. &Agrave; l&rsquo;int&eacute;rieur de ce bloc, j&rsquo;ai ajout&eacute; deux paragraphes de texte Lorem en guise d&rsquo;espaces r&eacute;serv&eacute;s. Enfin, j&rsquo;ai supprim&eacute; le bloc de colonnes car il n&rsquo;&eacute;tait pas n&eacute;cessaire.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e240deef\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Ajouter-une-page-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress-2-.png\" alt=\"Cr&eacute;ation d'une composition dans l'&eacute;diteur de blocs \" class=\"wp-image-34261\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>3. En ce qui concerne la largeur et la hauteur des conteneurs, voici les param&egrave;tres importants :<\/p><p>Certains param&egrave;tres des conteneurs ext&eacute;rieur et int&eacute;rieur n&rsquo;&eacute;tant pas d&eacute;finis par d&eacute;faut, les voici :<\/p><p><strong>Conteneur ext&eacute;rieur<\/strong><\/p><ol class=\"wp-block-list\">\n<li>Le conteneur interne utilise la largeur de ce conteneur.<\/li>\n\n\n\n<li>Le curseur de remplissage gauche et droit est r&eacute;gl&eacute; sur 3 positions &agrave; partir de la gauche.&nbsp;<\/li>\n<\/ol><p><strong>Conteneur int&eacute;rieur&nbsp;<\/strong><\/p><p>Le remplissage &agrave; gauche et &agrave; droite est fix&eacute; &agrave; 10 %.<\/p><p>Le r&eacute;sultat est ce motif polyvalent que j&rsquo;ai rebaptis&eacute; &ldquo;motif de base&rdquo;.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e2410ed7\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"496\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/base-pattern.png\/public\" alt=\"Le r&eacute;sultat final de la composition personnalis&eacute;e, utilisant des conteneurs int&eacute;rieurs et ext&eacute;rieurs \" class=\"wp-image-34024\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/base-pattern.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/base-pattern.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/base-pattern.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/base-pattern.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Aurais-je pu me dispenser de cr&eacute;er cette composition simple &agrave; partir d&rsquo;une composition plus &eacute;labor&eacute;e et repartir de z&eacute;ro ? Oui, alors regardons l&rsquo;exemple suivant, plus difficile, o&ugrave; j&rsquo;ai utilis&eacute; des espaces r&eacute;serv&eacute;s d&rsquo;images pour cr&eacute;er une composition de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/galerie-wordpress\"><strong>galerie<\/strong><\/a>.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-utiliser-des-espaces-reserves-pour-creer-un-site-de-portfolio\"><strong>Utiliser des espaces r&eacute;serv&eacute;s pour cr&eacute;er un site de portfolio<\/strong><\/h3><p>L&rsquo;une des nouvelles fonctionnalit&eacute;s de WordPress 6.4 est l&rsquo;utilisation d&rsquo;espaces r&eacute;serv&eacute;s pour les images, qui exploitent pleinement la possibilit&eacute; de cr&eacute;er des compositions.<\/p><p>Twenty Twenty-Four propose sept compositions de placeholder d&rsquo;images, mais comme vous le verrez, vous n&rsquo;&ecirc;tes pas limit&eacute; &agrave; ces compositions.<\/p><p>Ici, je suis parti de z&eacute;ro en utilisant une page vierge pour cr&eacute;er une composition de galerie que je peux utiliser partout sur mon site.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e2413f0c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"745\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-gallery-745x1024-1.png\/public\" alt=\"Une composition de galerie personnalis&eacute;e, montrant les espaces r&eacute;serv&eacute;s aux images utilis&eacute;s pour indiquer les espaces \" class=\"wp-image-34025\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-gallery-745x1024-1.png\/w=745,fit=scale-down 745w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-gallery-745x1024-1.png\/w=218,fit=scale-down 218w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-gallery-745x1024-1.png\/w=109,fit=scale-down 109w\" sizes=\"(max-width: 745px) 100vw, 745px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Comment l&rsquo;espace r&eacute;serv&eacute; est-il cr&eacute;&eacute; ? Ins&eacute;rez le bloc d&rsquo;image &agrave; l&rsquo;endroit o&ugrave; vous pr&eacute;voyez d&rsquo;avoir une image, mais n&rsquo;ajoutez pas l&rsquo;image comme vous le feriez normalement.&nbsp;<\/p><p>Les lignes diagonales repr&eacute;sentent l&rsquo;endroit o&ugrave; les images peuvent &ecirc;tre plac&eacute;es ; ce sont donc les espaces r&eacute;serv&eacute;s. J&rsquo;ai &eacute;galement ajout&eacute; des zones pour les descriptions textuelles &agrave; c&ocirc;t&eacute; de chaque image.&nbsp;<\/p><p>Dans les param&egrave;tres de l&rsquo;image (barre lat&eacute;rale droite), vous disposez de ces options pour d&eacute;finir les dimensions d&rsquo;une image.&nbsp;<\/p><ul class=\"wp-block-list\">\n<li>Taille originale<\/li>\n\n\n\n<li>Carr&eacute; 1:1<\/li>\n\n\n\n<li>Standard 4:3<\/li>\n\n\n\n<li>Portrait 3:4<\/li>\n\n\n\n<li>Classique 3:2<\/li>\n\n\n\n<li>Portrait classique 2:3<\/li>\n\n\n\n<li>Large 16:9<\/li>\n\n\n\n<li>Haute 9:16<\/li>\n<\/ul><p>Le param&egrave;tre le plus important est le moment o&ugrave; vous enregistrez la composition. Voici le r&eacute;glage que j&rsquo;ai utilis&eacute;. Notez que j&rsquo;ai utilis&eacute; deux cat&eacute;gories dans lesquelles ma composition sera stock&eacute;e et que l&rsquo;option Synchronis&eacute;e est d&eacute;sactiv&eacute;e.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e2416dbf\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Page-daccueil-du-blog-%E2%80%B9-Modele-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%B9-Editeur-%E2%80%94-WordPress.png\" alt=\"La fen&ecirc;tre contextuelle permettant de cr&eacute;er une composition dans l'&eacute;diteur de blocs\" class=\"wp-image-34262\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Une fois ma composition sauvegard&eacute;e, je l&rsquo;ai utilis&eacute; pour cr&eacute;er ces deux pages de galerie. Dans l&rsquo;outil d&rsquo;insertion de blocs, j&rsquo;ai s&eacute;lectionn&eacute; Compositions et j&rsquo;ai trouv&eacute; ma composition dans la cat&eacute;gorie Mes compositions ainsi que dans les cat&eacute;gories Galerie et Portfolio.&nbsp;<\/p><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure data-wp-context='{\"imageId\":\"6a050e2419b0d\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"801\" height=\"1200\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-row-gallery-1.png\/public\" alt=\"Le premier exemple des pages de la galerie \" class=\"wp-image-34030\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-row-gallery-1.png\/w=801,fit=scale-down 801w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-row-gallery-1.png\/w=200,fit=scale-down 200w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-row-gallery-1.png\/w=684,fit=scale-down 684w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-row-gallery-1.png\/w=100,fit=scale-down 100w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-row-gallery-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure data-wp-context='{\"imageId\":\"6a050e241cc72\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"801\" height=\"1200\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-column-gallery-1.png\/public\" alt=\"Le deuxi&egrave;me exemple des pages de la galerie \" class=\"wp-image-34029\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-column-gallery-1.png\/w=801,fit=scale-down 801w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-column-gallery-1.png\/w=200,fit=scale-down 200w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-column-gallery-1.png\/w=684,fit=scale-down 684w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-column-gallery-1.png\/w=100,fit=scale-down 100w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/2-column-gallery-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-creation-d-une-composition-d-archive-de-blog-nbsp\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/2-row-gallery.webp\"><\/a><strong>Cr&eacute;ation d&rsquo;une composition d&rsquo;archive de blog&nbsp;<\/strong><\/h3><p>Il n&rsquo;est pas surprenant que Twenty Twenty-Four convienne parfaitement aux blogueurs. Il est livr&eacute; avec sept compositions qui peuvent &ecirc;tre utilis&eacute;es pour la page d&rsquo;accueil du blog (page d&rsquo;archives).&nbsp;<\/p><p>Cependant, j&rsquo;ai choisi de cr&eacute;er une composition d&rsquo;archive de blog qui peut &ecirc;tre utilis&eacute;e n&rsquo;importe o&ugrave;, selon les besoins.&nbsp;<\/p><p>Je suis parti de z&eacute;ro dans l&rsquo;&eacute;diteur de site et j&rsquo;ai cr&eacute;&eacute; une pr&eacute;sentation en deux colonnes envelopp&eacute;e dans un bloc de groupe. La colonne de gauche contient le bloc d&rsquo;apparence de la requ&ecirc;te tr&egrave;s important, qui attire un contenu dynamique en fonction de la fa&ccedil;on dont la composition est utilis&eacute;e.<\/p><p>J&rsquo;ai dispos&eacute; les &eacute;l&eacute;ments dynamiques de la boucle (titre, image en vedette, date, extrait et pagination). La colonne de droite comprend trois blocs, dont deux affichent un contenu dyadique (Articles r&eacute;cents et Calendrier).&nbsp;<\/p><p>Voici la composition d&rsquo;archive.<\/p><figure data-wp-context='{\"imageId\":\"6a050e241fd7f\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"944\" height=\"1200\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-archive-pattern.png\/public\" alt=\"La composition d'archives personnalis&eacute; pour les sites web de blogs \" class=\"wp-image-34031\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-archive-pattern.png\/w=944,fit=scale-down 944w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-archive-pattern.png\/w=236,fit=scale-down 236w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-archive-pattern.png\/w=806,fit=scale-down 806w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-archive-pattern.png\/w=118,fit=scale-down 118w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/custom-archive-pattern.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 944px) 100vw, 944px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Comme pour la composition pr&eacute;c&eacute;dente de la Galerie, j&rsquo;ai sauvegard&eacute; ma composition sans la synchroniser. Ainsi, je ne modifierai pas la composition originale lorsque je l&rsquo;utiliserai.<\/p><p>En utilisant la composition, j&rsquo;ai cr&eacute;&eacute; cette page d&rsquo;accueil de blog tr&egrave;s propre et &eacute;l&eacute;gante.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e24228bb\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"918\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/blog-home.png\/public\" alt=\"Exemple d'utilisation de la composition d'archives personnalis&eacute;e pour la page d'accueil du blog \" class=\"wp-image-34032\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/blog-home.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/blog-home.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/blog-home.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/blog-home.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>La deuxi&egrave;me fois que j&rsquo;ai utilis&eacute; cette composition, c&rsquo;&eacute;tait pour une page d&rsquo;archive de cat&eacute;gorie qui n&rsquo;affiche que les articles de la cat&eacute;gorie &ldquo;People&rdquo;.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e2425366\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"849\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/category-people.png\/public\" alt=\"Exemple d'utilisation de la composition d'archives personnalis&eacute;e pour la page de la cat&eacute;gorie &quot;People&quot;\" class=\"wp-image-34033\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/category-people.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/category-people.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/category-people.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/08\/category-people.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Ici, je n&rsquo;ai fait que quelques ajustements &agrave; mon design en utilisant ma composition d&rsquo;archive.&nbsp;<\/p><p>Lorsque vous avez un design qui se r&eacute;p&egrave;te sur l&rsquo;ensemble de votre site, les compositions vous font gagner beaucoup de temps et sont agr&eacute;ables &agrave; cr&eacute;er.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Twenty Twenty-Four est un th&egrave;me amusant et flexible qui a &eacute;t&eacute; introduit avec WordPress 6.4. Bien qu&rsquo;il soit principalement destin&eacute; aux sites d&rsquo;entreprises, aux portfolios et aux blogs, il peut &ecirc;tre utilis&eacute; pour n&rsquo;importe quel site web.&nbsp;<\/p><p>Il n&rsquo;est pas n&eacute;cessaire d&rsquo;utiliser un th&egrave;me en bloc tel que Twenty Twenty-Four pour cr&eacute;er des compositions.&nbsp; Pour mes trois exemples, les compositions de galerie et d&rsquo;archive ont &eacute;t&eacute; cr&eacute;&eacute;es dans l&rsquo;&eacute;diteur de site. Pour la composition de page de base, j&rsquo;ai utilis&eacute; l&rsquo;&eacute;diteur de page.&nbsp;<\/p><p>Dans ce cas, j&rsquo;ai utilis&eacute; l&rsquo;option des trois points dans l&rsquo;outil d&rsquo;insertion de blocs comme suit :<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a050e242920f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2024\/08\/Modifier-la-page-Composition-de-Page-%E2%80%B9-hostinger-dev-19-xyz-%E2%80%94-WordPress.png\" alt=\"Le menu des options de bloc dans l'&eacute;diteur de bloc, avec l'option &laquo; Cr&eacute;er une composition &raquo; en surbrillance \" class=\"wp-image-34265\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Chaque ann&eacute;e, la communaut&eacute; WordPress, dirig&eacute;e par l&rsquo;&eacute;quipe du th&egrave;me Automatic, publie un nouveau th&egrave;me par d&eacute;faut mettant en valeur les fonctionnalit&eacute;s de la derni&egrave;re version de WordPress.&nbsp; Ce fut le cas en novembre 2023, lorsque WordPress 6.4 fut livr&eacute; avec Twenty Twenty-Four, que beaucoup consid&eacute;raient comme le meilleur th&egrave;me par d&eacute;faut jamais publi&eacute; par [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/twenty-twenty-four\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":431,"featured_media":33978,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Twenty Twenty-Four : Un th\u00e8me WordPress pour tout site web","rank_math_description":"Twenty Twenty-Four est l'un des th\u00e8mes de bloc de WordPress. Lisez cet article pour d\u00e9couvrir sa flexibilit\u00e9 et ses possibilit\u00e9s de design.","rank_math_focus_keyword":"twenty twenty four","footnotes":""},"categories":[4777,5813],"tags":[],"class_list":["post-33968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-themes"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/33968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/431"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=33968"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/33968\/revisions"}],"predecessor-version":[{"id":36455,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/33968\/revisions\/36455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/33978"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=33968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=33968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=33968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}