{"id":234256,"date":"2023-02-22T19:41:00","date_gmt":"2023-02-22T16:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234256"},"modified":"2022-11-12T02:25:16","modified_gmt":"2022-11-11T23:25:16","slug":"guide-du-developpeur-utilisation-de-wordpress-gutenberg-pour-la-page-daccueil-et-les-pages-de-destination","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/guide-du-developpeur-utilisation-de-wordpress-gutenberg-pour-la-page-daccueil-et-les-pages-de-destination\/","title":{"rendered":"Guide du d\u00e9veloppeur\u00a0: Utilisation de WordPress Gutenberg pour la page d’accueil et les pages de destination"},"content":{"rendered":"\n

Dans cet article, nous verrons comment utiliser l’\u00e9diteur Gutenberg pour cr\u00e9er des pages d’accueil ou des pages de destination attrayantes et modernes. Nous examinerons en particulier comment vous, en tant que d\u00e9veloppeur, pouvez ajuster votre code de th\u00e8me pour prendre en charge cela. Ce guide est parfait pour vous qui souhaitez ajuster un ancien th\u00e8me pour prendre en charge Gutenberg, ou souhaitez apprendre \u00e0 d\u00e9velopper de nouveaux th\u00e8mes optimis\u00e9s pour Gutenberg.<\/p>\n

Lorsque WordPress a introduit le nouvel \u00e9diteur Gutenberg<\/a> dans WordPress 5.0 (sorti vers d\u00e9cembre 2018), il a principalement rendu inutile l’utilisation d’un plugin de cr\u00e9ation de page s\u00e9par\u00e9. L’\u00e9diteur Gutenberg donne \u00e0 l’auteur WordPress beaucoup de flexibilit\u00e9 et la possibilit\u00e9 de cr\u00e9er un contenu riche et des conceptions qui n’\u00e9taient pas faciles auparavant – \u00e0 moins que le th\u00e8me ou un plugin ne fournisse la fonctionnalit\u00e9 pour eux en utilisant par exemple des shortcodes.<\/p>\n

Vous obtenez beaucoup de style pour les blocs Gutenberg pr\u00eats \u00e0 l’emploi dans WordPress, mais avec un peu de travail dans votre th\u00e8me et des connaissances sur les blocs, vous pouvez ajouter beaucoup plus \u00e0 l’exp\u00e9rience Gutenberg. Voyons comment !<\/p>\n

Activation des blocs larges et pleine largeur<\/h2>\n

\"Guide<\/a><\/p>\n

La plupart des blocs vous permettent de choisir des alignements de blocs. Lorsque vous travaillez dans Gutenberg sur un th\u00e8me non d\u00e9velopp\u00e9 pour Gutenberg, vous avez le choix entre "Aligner \u00e0 gauche, "Aligner au centre" et "Aligner \u00e0 droite".<\/p>\n

Mais saviez-vous qu’il y en a en fait deux autres? Les deux autres, "large largeur" \u200b\u200bet "pleine largeur" \u200b\u200bsont parfaites pour cr\u00e9er une page d’accueil ou une page de destination. Nous examinerons de plus pr\u00e8s comment optimiser la mise en page et la conception de votre th\u00e8me pour prendre pleinement en charge les blocs larges et pleine largeur ult\u00e9rieurement. Vous devez d’abord dire \u00e0 WordPress d’ajouter la prise en charge de ces deux alignements de blocs dans votre th\u00e8me.<\/p>\n

Dans une fonction qui vous est accroch\u00e9e after_setup_theme<\/code>, appelez simplement add_theme_support('align-wide')<\/code>. Vous avez probablement d\u00e9j\u00e0 une fonction \u00ab\u00a0configuration\u00a0\u00bb dans votre th\u00e8me, ou si ce n’est pas le cas, ajoutez-la dans votre th\u00e8mefunctions.php<\/code>\u00a0:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Avec ce code actif dans votre th\u00e8me, vous devriez maintenant obtenir un total de cinq options pour les alignements de blocs. Pour certains blocs, par exemple Colonnes, vous n’obtenez que les deux nouveaux.<\/p>\n
\"Guide<\/a><\/p>\n
Il existe certains types de blocs o\u00f9 vous pouvez d\u00e9finir des alignements de blocs – la plupart du temps, c’est le type qui prend en charge les blocs imbriqu\u00e9s, c’est-\u00e0-dire. un bloc qui vous permet d’ajouter des blocs \u00e0 l’int\u00e9rieur. Ces blocs populaires sont la couverture, les colonnes, l’image, les blocs d’int\u00e9gration, etc. Le bloc Couverture est un excellent bloc pour cr\u00e9er des pages d’accueil ou des pages de destination, comme nous le verrons tout au long de cet article.<\/p>\n
Utilisation du bloc Couverture<\/h2>\n
Le bloc Couverture est certainement le meilleur bloc lorsque vous souhaitez cr\u00e9er une page d’accueil ou une page de destination divis\u00e9e en sections. Vous pouvez ajouter n’importe quel type de bloc et autant de blocs que vous le souhaitez \u00e0 l’int\u00e9rieur d’un bloc de couverture. Avec un bloc Couverture, vous pouvez d\u00e9finir une couleur d’arri\u00e8re-plan, une image d’arri\u00e8re-plan ou une image d’arri\u00e8re-plan avec une superposition de couleur.<\/p>\n
\"Guide<\/a><\/p>\n
Combin\u00e9 avec la possibilit\u00e9 de r\u00e9gler le r\u00e9glage du bloc sur large ou pleine largeur (comme nous l’avons fait ci-dessus), le bloc Cover est un outil puissant. Vous pouvez cr\u00e9er une page o\u00f9 tout le contenu r\u00e9side dans des sections de blocs de couverture pleine largeur avec chacune sa propre couleur d’arri\u00e8re-plan ou image d’arri\u00e8re-plan. Avec le style et la mise en page corrects dans votre th\u00e8me, vous disposez d’un constructeur de page d’accueil moderne \u00e0 part enti\u00e8re.<\/p>\n
\"Guide<\/a><\/p>\n
Dans WordPress 5.3, une am\u00e9lioration importante est venue pour le bloc Cover: un wrapper HTML interne. Cela signifie que le bloc Cover a un \u00e9l\u00e9ment HTML pour la section elle-m\u00eame – avec sa couleur d’arri\u00e8re-plan ou son image d’arri\u00e8re-plan, puis un autre \u00e9l\u00e9ment HTML o\u00f9 r\u00e9side tout le contenu. Combinez cela avec un alignement de bloc pleine largeur\u00a0: stylisez l’\u00e9l\u00e9ment externe (avec la couleur ou l’image d’arri\u00e8re-plan) pour qu’il aille compl\u00e8tement en pleine largeur, puis stylisez l’\u00e9l\u00e9ment HTML interne avec le contenu pour qu’il tienne dans le conteneur de votre th\u00e8me.<\/p>\n
Par exemple, supposons que votre th\u00e8me ait un conteneur de largeur maximale de 1200 pixels. Vous avez probablement d\u00e9j\u00e0 une classe HTML sp\u00e9cifique qui est stylis\u00e9e avec max-width, garantissant que votre contenu ne se contente pas de s’afficher sur toute la largeur, quelle que soit la taille de l’\u00e9cran. Ajoutez votre style de largeur maximale au code HTML interne de la couverture\u00a0; nom de classe wp-block-cover__inner-container<\/code>. Par exemple:<\/p>\n
.wp-block-cover-image.alignfull .wp-block-cover__inner-container, \n.wp-block-cover.alignfull .wp-block-cover__inner-container {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    padding: 0 20px;\n}<\/code><\/pre>\n
Dans le code CSS ci-dessus, je cible deux classes parent Cover. La classe de bloc de couverture parent change selon que vous choisissez ou non une image d’arri\u00e8re-plan. Les blocs de couverture avec une image d’arri\u00e8re-plan obtiennent la classe " wp-block-cover-image<\/code>" et les blocs de couverture avec une couleur d’arri\u00e8re-plan obtiennent la classe " wp-block-cover<\/code>". De plus je cible \u00e9galement l’alignement du bloc "Full Width" avec la classe " alignfull<\/code>". L’alignement de bloc "Wide Width" obtient la classe " alignwide<\/code>". Ajoutez CSS pour cibler \u00e9galement cet alignement de bloc – en fonction de ce que vous voulez faire.<\/p>\n
Si vous avez commenc\u00e9 \u00e0 jouer avec cela, vous avez peut-\u00eatre rencontr\u00e9 des probl\u00e8mes avec la disposition g\u00e9n\u00e9rale du th\u00e8me. Votre th\u00e8me oblige probablement vos blocs de couverture pleine largeur \u00e0 ne pas aller du tout en pleine largeur. Regardons cela ensuite.<\/p>\n
Disposition du th\u00e8me et style pleine largeur<\/h2>\n
Jusqu’\u00e0 pr\u00e9sent, nous avons ajout\u00e9 la prise en charge des blocs larges et pleine largeur et appris \u00e0 utiliser et \u00e0 optimiser le bloc Couverture pour agir comme des sections de page d’accueil ou de page de destination. Mais dans la plupart des th\u00e8mes, votre code HTML et votre mise en page peuvent emp\u00eacher le contenu de votre publication d’aller en pleine largeur.<\/p>\n
Votre th\u00e8me a probablement une barre lat\u00e9rale droite en vue de publication unique ou de page. Il existe probablement des wrappers HTML suppl\u00e9mentaires, y compris un \u00e9l\u00e9ment de conteneur de largeur maximale, qui emp\u00eache vos blocs pleine largeur d’aller r\u00e9ellement en pleine largeur. Vos emballages ont probablement aussi un peu de marges ou de rembourrage, ce qui emp\u00eache \u00e0 nouveau les blocs pleine largeur de toucher compl\u00e8tement les bords de l’\u00e9cran. Mais vous devez faire en sorte que la publication ou la page unique ait l’air bien pour les publications o\u00f9 l’utilisateur n’utilise pas non plus les blocs de couverture. Vous devez tenir compte de vos wrappers lors du d\u00e9veloppement pour Gutenberg avec prise en charge des blocs larges et pleine largeur. Tout d\u00e9pend de la conception, du code HTML et du style de votre th\u00e8me, mais examinons quelques id\u00e9es pour r\u00e9soudre ce probl\u00e8me.<\/p>\n
\"Guide<\/a><\/p>\n
Une bonne solution serait d’ajouter des options de publication ; param\u00e8tres m\u00e9ta personnalis\u00e9s pour les publications et les pages qui affectent la mise en page de cette page. Vous pouvez d\u00e9finir un param\u00e8tre pour masquer la barre lat\u00e9rale ou pour forcer le contenu de votre publication \u00e0 s’afficher sur toute la largeur. Cr\u00e9ez vous-m\u00eame les param\u00e8tres de publication manuellement en ajoutant des m\u00e9taboxes ou utilisez des champs personnalis\u00e9s avanc\u00e9s<\/a> pour faciliter ce processus. Et puis, dans votre th\u00e8me, vous r\u00e9cup\u00e9rez les param\u00e8tres de publication et g\u00e9rez la sortie HTML en cons\u00e9quence.<\/p>\n
D’autres bonnes options de publication consistent \u00e0 masquer le titre de la page et\/ou \u00e0 masquer l’image en vedette. Cela vous permet de cr\u00e9er du contenu normalement, mais pour des pages sp\u00e9cifiques, vous pouvez facilement configurer une page de destination enti\u00e8rement avec des blocs de couverture pleine largeur. En masquant le titre de la page standard, vous pouvez cr\u00e9er un en-t\u00eate ou une section d’appel \u00e0 l’action plus attrayants pour servir de titre de page \u00e0 la place.<\/p>\n
Cr\u00e9er des styles de bloc<\/h2>\n
Il existe une fonctionnalit\u00e9 peu connue dans WordPress Gutenberg ; les blocs peuvent avoir diff\u00e9rents styles. Vous pouvez voir les styles de bloc en action avec le bloc Citation. Ajoutez le bloc dans votre \u00e9diteur et jetez un \u0153il \u00e0 l’inspecteur (barre lat\u00e9rale droite). Vous trouverez la rubrique "Styles" et deux options entre diff\u00e9rents styles.<\/p>\n
\"Guide<\/a><\/p>\n
Cr\u00e9ez des styles personnalis\u00e9s qui facilitent la cr\u00e9ation de pages d’accueil et de pages de destination. Je sugg\u00e8re au moins d’ajouter des styles de bloc personnalis\u00e9s au bloc Titre, afin que vous puissiez cr\u00e9er des styles personnalis\u00e9s sans interrompre les titres pour les publications normales. Cr\u00e9ez un style de bloc pour les titres de section avec une police extra large et un rembourrage suppl\u00e9mentaire.<\/p>\n
Lorsque vous essayez de cr\u00e9er des pages d’accueil, notez ce que vous devez personnaliser \u00e0 plusieurs reprises – cela pourrait convenir \u00e0 un style de bloc.<\/p>\n
L’ajout de styles de blocs personnalis\u00e9s est en fait tr\u00e8s simple et ne n\u00e9cessite aucune connaissance de Javascript. J’ai un tutoriel s\u00e9par\u00e9 sur la fa\u00e7on de proc\u00e9der si vous voulez en savoir plus \u00e0 ce sujet.<\/p>\n
PS: Si vous ne voyez pas les styles de bloc, votre th\u00e8me pourrait ne pas prendre en charge cela. Le processus est le m\u00eame que pour les alignements de blocs larges et pleine largeur\u00a0; dans le crochet after_setup_theme<\/code>, vous ajoutez add_theme_support('wp-block-styles')<\/code>:<\/p>\n
add_action('after_setup_theme', function() {\n    add_theme_support('wp-block-styles');\n});<\/code><\/pre>\n
Utiliser les couleurs du th\u00e8me comme palette de couleurs<\/h2>\n
Si vous avez jou\u00e9 avec Gutenberg, vous avez probablement remarqu\u00e9 que Gutenberg vous propose un certain ensemble de couleurs pour le texte ou la couleur d’arri\u00e8re-plan. Par exemple, l’ajout d’un bloc de couverture vous invitera \u00e0 choisir une couleur dans une palette de couleurs.<\/p>\n
Vous avez la possibilit\u00e9 d’utiliser un s\u00e9lecteur de couleurs pour choisir ou entrer la couleur hexad\u00e9cimale \u00e0 la couleur pr\u00e9cise que vous voulez. Vous pouvez y acc\u00e9der en cliquant sur le lien "Couleur personnalis\u00e9e". Mais si vous utilisez le m\u00eame ensemble de couleurs dans votre th\u00e8me et que vous voulez le garder coh\u00e9rent, il peut \u00eatre fastidieux de se souvenir constamment et d’entrer les m\u00eames codes de couleur hexad\u00e9cimaux \u00e0 chaque fois.<\/p>\n
Heureusement WordPress Gutenberg vous permet de d\u00e9finir la palette de couleurs! C’est encore un autre add_theme_support()<\/code>o\u00f9 vous fournissez un tableau des couleurs que vous voulez dans la palette. Dans une fonction accroch\u00e9e \u00e0 after_setup_theme<\/code>, faites ceci :<\/p>\n
add_theme_support('editor-color-palette', [\n    [\n        'name' => __('Main blue profile color', 'txtdomain'),\n        'slug' => 'blue-profile',\n        'color' => '#59BACC'\n    ],\n    [\n        'name' => __('Secondary green profile color', 'txtdomain'),\n        'slug' => 'secondary-profile',\n        'color' => '#58AD69'\n    ],\n]);<\/code><\/pre>\n
Dans le code ci-dessus, nous ajoutons la prise en charge du th\u00e8me pour ‘ editor-color-palette<\/code>‘, et comme deuxi\u00e8me param\u00e8tre de la fonction, nous d\u00e9finissons un tableau de toutes les couleurs que nous voulons. Chaque couleur requiert les attributs name<\/code>, slug<\/code>et color<\/code>. name<\/code>est ce qui appara\u00eet lorsque vous passez la souris sur la couleur dans la palette. slug<\/code>est le nom de classe qui sera ajout\u00e9 \u00e0 l’\u00e9l\u00e9ment de bloc. Et color<\/code>d\u00e9finit le code hexad\u00e9cimal de votre couleur.<\/p>\n
\"Guide<\/a><\/p>\n
Gardez \u00e0 l’esprit que vous devez ajouter des styles dans votre CSS ciblant chacune de ces classes (d\u00e9finies par slug<\/code>). WordPress n’applique pas automatiquement la couleur hexad\u00e9cimale sur vos blocs m\u00eame si nous indiquons \u00e0 WordPress quel est le code de couleur.<\/p>\n
A titre d’exemple, l’image \u00e0 droite est ma palette de couleurs que j’ai d\u00e9finie pour le th\u00e8me de ce site \u2013 pour A White Pixel :<\/p>\n
Ce sont mes couleurs de th\u00e8me et dans 95% des cas, j’utiliserai l’une de ces couleurs – soit comme arri\u00e8re-plan, soit comme couleur de texte. Dans de rares cas, je peux retirer le s\u00e9lecteur de couleurs, mais le fait d’avoir les suspects habituels d\u00e9j\u00e0 d\u00e9finis dans la palette de couleurs rend la vie beaucoup plus facile.<\/p>\n
Une astuce consiste \u00e0 toujours s’assurer d’ajouter du noir pur (#000000<\/code>) et du blanc pur (#FFFFFF<\/code>) dans votre palette de couleurs. C’est probablement aussi une bonne id\u00e9e d’avoir une ou deux couleurs gris clair.<\/p>\n
Utilisation d’une page d’accueil statique et optimisation du mod\u00e8le de page d’accueil<\/h2>\n
Vous le savez probablement d\u00e9j\u00e0, mais je le mentionnerai tout de m\u00eame. Dans WordPress, vous pouvez d\u00e9finir une page statique comme page d’accueil en allant dans Param\u00e8tres > Lecture.<\/p>\n
\"Guide<\/a><\/p>\n
Par d\u00e9faut, la page d’accueil de WordPress affiche une liste des articles les plus r\u00e9cents. Mais si vous s\u00e9lectionnez "Une page statique" et choisissez une page dans la liste d\u00e9roulante, WordPress affichera cette page comme page d’accueil de votre site.<\/p>\n
Il s’agit d’une \u00e9vidence dans la mise en place d’une page d’accueil pour votre site WordPress. Dans la page s\u00e9lectionn\u00e9e, vous pouvez cr\u00e9er la page d’accueil en utilisant toutes les astuces mentionn\u00e9es ci-dessus. Par exemple, vous pouvez avoir des options de publication non coch\u00e9es pour afficher le titre de la page, la barre lat\u00e9rale et l’image en vedette. Et la page est enti\u00e8rement construite avec des blocs de couverture et du contenu pleine largeur. Cependant, vous pouvez choisir de ne pas utiliser les options de publication (masquer la barre lat\u00e9rale, etc.) et de cr\u00e9er simplement un mod\u00e8le de page d’accueil pour les remplacer ou les appliquer.<\/p>\n
Lorsque votre WordPress est d\u00e9fini comme une page statique en tant que page d’accueil, WordPress recherchera le mod\u00e8le front-page.php<\/code>dans votre th\u00e8me. Ceci sera utilis\u00e9 \u00e0 la place de page.php<\/code>. Cela vous permet de cr\u00e9er et d’ajuster un mod\u00e8le distinct qui est utilis\u00e9 uniquement pour votre page d’accueil.<\/p>\n
Dans ce front-page.php<\/code>mod\u00e8le, vous pouvez d\u00e9j\u00e0 d\u00e9finir du code HTML pour vous assurer que tous les blocs occupent toute la largeur, n’ont pas de barre lat\u00e9rale, pas de titre de page ou d’image en vedette. Vous voudrez peut-\u00eatre simplement ne faire que the_content()<\/code>sortir le contenu de la page dans son int\u00e9gralit\u00e9.<\/p>\n
Par exemple, c’est ce que j’ai dans le th\u00e8me de ce site front-page.php<\/code>. Alors que dans tous les autres mod\u00e8les, tels que page.php<\/code>, j’ai plein de sorties pour la barre lat\u00e9rale, le titre du message, etc., c’est toute l’\u00e9tendue de ma boucle dans front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
C’est \u00e7a. Mon code HTML et mes classes d’emballage garantissent que le contenu de la publication est enti\u00e8rement en pleine largeur.<\/p>\n
N’oubliez pas qu’il s’agit d’une bonne solution si vous, en tant qu’utilisateur du th\u00e8me, comprenez le fonctionnement de vos mod\u00e8les. Je sais que tout le contenu de ma page d’accueil doit \u00eatre enti\u00e8rement envelopp\u00e9 dans des blocs de couverture. Je m’appuie sur le conteneur HTML interne du bloc Cover pour m’assurer que mon contenu est beau et tombe dans un conteneur de largeur maximale. Si je devais ajouter un simple bloc de paragraphe sans bloc de couverture d’emballage, cela n’aurait pas l’air bien car il manquerait de rembourrage sur les c\u00f4t\u00e9s.<\/p>\n
Rendre l’en-t\u00eate de votre site transparent au premier bloc de couverture<\/h2>\n
Une caract\u00e9ristique tr\u00e8s courante dans les sites Web modernes est de rendre l’en-t\u00eate transparent sur la page d’accueil. Lorsque l’utilisateur commence \u00e0 faire d\u00e9filer la page, l’en-t\u00eate se transforme en un style fixe et obtient un arri\u00e8re-plan. Mais garder un en-t\u00eate transparent peut \u00eatre tr\u00e8s agr\u00e9able lorsque nous pouvons voir les couleurs ou l’image derri\u00e8re la premi\u00e8re section.<\/p>\n
Je le fais sur la page d’accueil<\/a> de ce site. Regarde! Tout en haut de la page, mon en-t\u00eate n’a pas d’arri\u00e8re-plan et affiche l’arri\u00e8re-plan de la section d\u00e9grad\u00e9 violet (un bloc de couverture) derri\u00e8re. Une fois que vous commencez \u00e0 faire d\u00e9filer, il obtient un arri\u00e8re-plan solide fixe.<\/p>\n
Gardez \u00e0 l’esprit que vous devez \u00eatre conscient des couleurs de votre en-t\u00eate et de l’arri\u00e8re-plan de la premi\u00e8re couverture. Si votre en-t\u00eate se compose d’un logo blanc et d’\u00e9l\u00e9ments de menu blancs (comme le mien), vous ne pouvez pas utiliser cette astuce avec un bloc Cover qui a un fond clair. Cela rendrait votre en-t\u00eate illisible\u00a0!<\/p>\n
Si vous voulez faire cela, gardez \u00e0 l’esprit que cela n\u00e9cessite un peu de connaissances en Javascript. Mais c’est en fait tr\u00e8s simple. Je vais passer par les bases pour vous:<\/p>\n
Mon \u00e9l\u00e9ment d’en-t\u00eate entier est toujours position: fixed<\/code>. Parce que je ne veux normalement pas que mon contenu disparaisse derri\u00e8re l’en-t\u00eate, j’ai ajout\u00e9 un padding-top sur l’\u00e9l\u00e9ment body, poussant le contenu sous l’en-t\u00eate. Cependant, j’ai ajout\u00e9 une r\u00e8gle selon laquelle si nous sommes au mod\u00e8le de premi\u00e8re page, ce rembourrage ne sera pas ajout\u00e9. Cela garantit que uniquement sur la page d’accueil, la partie du corps appara\u00eetra derri\u00e8re l’en-t\u00eate. Je cible ensuite le premier bloc de couverture sur la page d’accueil et j’ajoute un rembourrage suppl\u00e9mentaire pour m’assurer que le contenu de ce premier bloc ne bute pas derri\u00e8re l’en-t\u00eate, ce qui lui donne un bon rembourrage apr\u00e8s l’en-t\u00eate.<\/p>\n
Et puis j’ai ajout\u00e9 un code Javascript tr\u00e8s simple en utilisant jQuery\u00a0:<\/p>\n
$(window).scroll(function() {\n    if ($(window).scrollTop() >= 60) {\n        $('#header').addClass('navbar-fixed')\n    } else {\n        $('#header').removeClass('navbar-fixed');\n    }\n});<\/code><\/pre>\n
Ce que fait ce code, c’est ajouter une classe ‘ navbar-fixed<\/code>‘ lorsque la page d\u00e9file plus loin que 60 pixels vers le bas de la page. Et dans mon CSS, je cible simplement cette classe et ajoute une couleur de fond fixe. Sans cette classe, l’arri\u00e8re-plan de l’en-t\u00eate est transparent sur la page d’accueil.<\/p>\n
C’est la base. Jouez avec le CSS – ajustez le "point de basculement" Javascript et utilisez par exemple transition<\/code>la propri\u00e9t\u00e9 pour effectuer une transition plus fluide lorsque la couleur d’arri\u00e8re-plan est appliqu\u00e9e.<\/p>\n
Grands blocs pour les pages d’accueil et les pages de destination<\/h2>\n
WordPress propose une gamme compl\u00e8te de blocs pr\u00eats \u00e0 \u00eatre utilis\u00e9s. Certains d’entre eux sont particuli\u00e8rement utiles lors de la cr\u00e9ation d’une page d’accueil ou d’une page de destination. Si vous connaissez d\u00e9j\u00e0 tous les blocs disponibles, vous les connaissez probablement d\u00e9j\u00e0.<\/p>\n