Comment construire un en-tête Post Hero avec des blocs – WP Tavern

Je suis obsédé par la direction artistique sur le web depuis aussi longtemps que je me souvienne. Le terme est souvent utilisé pour décrire l’acte de concevoir des pages individuelles autour du contenu lui-même. C’est le contraire de la façon dont la plupart des utilisateurs fonctionnent généralement lorsqu’ils écrivent des messages. Le modèle ou le design est déconnecté du mot écrit.

Jason Santa Maria site Internet est probablement la vitrine la plus citée de ces messages. Je recommande fortement de naviguer, en particulier de regarder le Articles de Candygram.

Il y a des moments où les histoires demandent plus d’emphase visuelle. La conception du contenu peut peindre une image qui n’est pas possible par le texte seul. Parfois, il s’agit de mises en page élaborées d’une page entière. Dans d’autres, c’est l’insertion d’images et d’autres éléments qui attirent l’attention du lecteur.

C’est une des raisons pour lesquelles j’ai aimé utiliser le thème Archeo par Automattic dernièrement. Ses motifs évoquent les premiers souvenirs d’Internet pré-maison de la lecture de magazines, chaque histoire en vedette avec sa propre mise en page.

Au fil des ans, j’ai essayé de développer plusieurs systèmes de conception par publication, mais ils n’ont toujours pas répondu à mes attentes. Une partie du problème était que je n’avais pas un cadre solide qui se sentait suffisamment à l’épreuve du temps pour que je ne résous pas encore ses problèmes une décennie ou plus plus tard.

Lorsque WordPress a lancé son éditeur de blocs, ces vieilles idées ont commencé à remonter à la surface. Cela pourrait-il permettre aux gens de raconter leurs histoires visuellement et offrir une certaine assurance que les mises en page ne se briseraient pas quelques versions plus tard ?

Aujourd’hui, je suis convaincu que WordPress rend cela plus possible qu’auparavant. Il y a certaines choses qu’il pourrait faire mieux, comme étendre sa boîte à outils CSS partagée et apporter sa gamme de contrôles de conception à plus de blocs. Mais, au fond, l’éditeur de blocs est un langage de conception qui permet aux utilisateurs finaux de raconter leurs histoires à travers des éléments visuels et textuels. Cela ne fera que s’améliorer avec la version 6.0 et au-delà.

Je voulais offrir un petit aperçu de la façon dont les utilisateurs pourraient utiliser ces outils pour créer des histoires plus visuellement uniques. Cette entrée dans le Construire avec des blocs série est censée fournir un point de départ.

Pour ceux qui suivent, nous allons créer une section d’en-tête/d’introduction pour une histoire fictive sur Gotham City :

Grande section de héros violet sur un site Web avec un titre en gras, une image pleine largeur et du texte.

Ce n’est pas une conception pleine page, mais j’espère que cela aidera les gens à commencer à expérimenter davantage leur contenu. WordPress a une tonne d’outils de conception solides avec lesquels travailler maintenant.

En fait, j’ai reconstitué deux modèles différents pour ce tutoriel. Cependant, je ne me sentais pas à l’aise avec les méthodes utilisées pour l’original:

Section héros pleine largeur avec fond d'image traversant. Sur la gauche, le titre du message, la signature et le contenu sont placés dans une colonne.

En particulier, l’alignement du contenu à gauche et dans un conteneur de largeur maximale pose des problèmes. Il y a au moins deux façons de procéder. La méthode la plus utilisée consiste à insérer un bloc Colonnes 50/50, en utilisant la première colonne pour le contenu et en laissant la seconde vide. Cela a la plus grande compatibilité entre les thèmes, mais cela peut être désordonné à certaines tailles d’écran.

La seconde consiste à s’appuyer sur le contrôle de positionnement du bloc Cover pour aligner un bloc Group intérieur vers la gauche. C’est la meilleure option pour une mise en page réactive pure. Cependant, sa sortie était incohérente lors des tests sur plusieurs thèmes de blocs.

En fin de compte, j’ai mis la première mise en page de côté. Cependant, je voulais au moins le partager avec ceux qui voulaient essayer.

Construire le héros de l’en-tête de message

Pour ce patron, j’ai travaillé avec la version 12.9 du plugin Gutenberg. J’ai essayé de m’en tenir aux fonctionnalités disponibles pour les utilisateurs de WordPress 5.9, mais l’ancienne interface semble plus lente et plus volumineuse que les mises à jour plus récentes du plugin.

J’ai également utilisé un thème de bloc personnalisé. N’importe lequel devrait fonctionner, mais il devrait avoir un modèle “vierge” ou une option équivalente pleine largeur et ouverte. Sinon, vous pouvez en créer un à partir du éditeur de modèles intégré. Il n’aurait besoin que du bloc Post Content à l’intérieur.

Étape 1 : Création de l’arrière-plan

Éditeur de publication WordPress avec bloc de couverture inséré. Sur la droite, le panneau Couleur de superposition apparaît avec un dégradé sélectionné.

<img data-attachment-id="132817" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-01" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01.jpg" data-orig-size="2400,1113" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-01" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-500x232.jpg" loading="lazy" width="2400" height="1113" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01.jpg" alt="Éditeur de publication WordPress avec bloc de couverture inséré. Sur la droite, le panneau Couleur de superposition apparaît avec un dégradé sélectionné." class="wp-image-132817" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-500x232.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-768x356.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-1536x712.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-01-2048x950.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Ajout d’un bloc de couverture avec image de fond et superposition de dégradé.

Le bloc Cover est mon choix de prédilection lors de la création de nombreuses mises en page. C’est l’une des options les plus polyvalentes de WordPress, ouvrant la voie à de nombreux types de conceptions. Ce n’est pas une surprise que j’ai commencé ici.

La première étape consiste à insérer un nouveau bloc de couverture et à sélectionner une image pour celui-ci. Ensuite, réglez-le sur pleine largeur et activez l’option pleine hauteur.

En fonction de l’image choisie, vous pouvez personnaliser l’option de superposition en fonction de celle-ci. J’ai sélectionné le dégradé “bleu cyan vif à violet vif” avec une opacité de 70%. Je voulais que l’image d’arrière-plan soit suffisamment visible pour la voir, mais pas au point de submerger tout le reste.

Étape 2 : Spacers et un groupe

Éditeur de publication WordPress avec deux blocs Spacer et un groupe imbriqué à l'intérieur d'une couverture. Sur la gauche, la vue de liste est ouverte, montrant la hiérarchie.

<img data-attachment-id="132818" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-02" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02.jpg" data-orig-size="2400,1110" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-02" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-500x231.jpg" loading="lazy" width="2400" height="1110" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02.jpg" alt="Éditeur de publication WordPress avec deux blocs Spacer et un groupe imbriqué à l'intérieur d'une couverture. Sur la gauche, la vue de liste est ouverte, montrant la hiérarchie." class="wp-image-132818" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-500x231.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-768x355.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-1536x710.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-02-2048x947.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Ajout d’un Group entre deux blocs Spacer.

À ce stade, nous sommes encore en train de construire la mise en page globale du contenu. À l’intérieur du couvercle de l’étape 1, ajoutez un espaceur, un groupe et un autre espaceur.

Réglez chaque espaceur sur 2rem ou votre valeur préférée. C’est juste pour montrer un peu plus l’image d’arrière-plan en haut et en bas du motif. Alternativement, vous pouvez ajuster l’option de rembourrage sur le bloc de couverture externe pour obtenir le même effet.

Pour le bloc Groupe, je n’ai modifié que les paramètres de bordure. j’ai sélectionné 3px pour la largeur, définissez le style sur solide et choisissez le blanc pour la couleur.

Noter: le bloc Groupe à cette étape ne sera plus nécessaire à l’avenir. Idéalement, nous pourrions simplement coller la couverture de l’étape 3. Cependant, il ne prend pas encore en charge les bordures personnalisées. Il y a une ouverture ticket pour ajouter la fonctionnalité. Il n’est pas clair si WordPress proposera cela pour les couvertures dans la prochaine version 6.0. Pour l’instant, nous devons ajouter un wrapper supplémentaire.

Étape 3 : Couverture intérieure

Éditeur de publication WordPress avec un bloc Cover imbriqué dans un bloc Group, qui est imbriqué dans un autre Cover.

<img data-attachment-id="132819" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-03" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03.jpg" data-orig-size="2400,1114" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-03" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-500x232.jpg" loading="lazy" width="2400" height="1114" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03.jpg" alt="Éditeur de publication WordPress avec un bloc Cover imbriqué dans un bloc Group, qui est imbriqué dans un autre Cover." class="wp-image-132819" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-500x232.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-768x356.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-1536x713.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-03-2048x951.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Ajouter une couverture à l’intérieur d’un groupe à l’intérieur d’une couverture.

Ajoutez un nouveau bloc de couverture à l’intérieur du groupe à partir de l’étape 2. Réglez-le sur l’alignement pleine largeur et activez la pleine hauteur. Ensuite, sélectionnez une couleur d’arrière-plan de votre choix et ajustez l’opacité à quelque chose qui correspond à votre conception. Ce calque doit être suffisamment sombre pour que votre texte soit lisible. Vous pouvez choisir de modifier cela plus tard, en fonction de l’apparence de tout.

Pour ceux qui testent avec la dernière version de Gutenberg, consultez la note à la fin de l’étape suivante.

Étape 4 : Groupe de contenu

Un bloc de groupe à l'intérieur d'une couverture à l'intérieur d'un groupe à l'intérieur d'une couverture dans l'éditeur de publication WordPress.

<img data-attachment-id="132820" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-04" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04.jpg" data-orig-size="2400,1115" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-04" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-500x232.jpg" loading="lazy" width="2400" height="1115" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04.jpg" alt="Un bloc de groupe à l'intérieur d'une couverture à l'intérieur d'un groupe à l'intérieur d'une couverture dans l'éditeur de publication WordPress." class="wp-image-132820" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-500x232.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-768x357.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-1536x714.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-04-2048x951.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Encore une autre couche de conteneur.

Je promets que c’est la dernière couche de conteneurs imbriqués pour que ce modèle fonctionne. Pour cette étape, insérez un nouveau bloc de groupe à l’intérieur de la couverture de l’étape 2.

Le seul paramètre nécessaire est d’activer l’option “Hériter de la disposition par défaut” dans le panneau de la barre latérale du bloc. J’ai ajusté le paramètre “espacement des blocs” à 4rem pour donner au contenu beaucoup de marge de manœuvre, mais cela peut changer d’un thème à l’autre. Vous devez également sélectionner le blanc ou une autre couleur claire pour les options de couleur du texte et des liens.

Noter: c’est, encore une fois, un scénario où WordPress 5.9 n’offre pas les outils dont nous avons besoin pour réduire une partie du cruft. Le bloc Cover de l’étape 3 était nécessaire pour un fond transparent. Cependant, WordPress 6.0 permet aux utilisateurs de ajuster l’opacité de n’importe quelle couleur. Pour ceux qui testent avec le plugin Gutenberg, vous pouvez simplement utiliser le bloc Groupe dans cette étape et y mettre un arrière-plan transparent.

Étape 5 : Titre accrocheur

Éditeur de publication WordPress avec un titre de publication de grande taille et en gras.

<img data-attachment-id="132821" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-05" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05.jpg" data-orig-size="2400,1111" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-05" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-500x231.jpg" loading="lazy" width="2400" height="1111" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05.jpg" alt="Éditeur de publication WordPress avec un titre de publication de grande taille et en gras." class="wp-image-132821" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-500x231.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-768x356.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-1536x711.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-05-2048x948.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Allez grand ou rentrez chez vous avec le titre du message.

Maintenant, nous arrivons à la partie amusante – le contenu réel. N’oubliez pas qu’avec WordPress 6.0, il pourrait être possible de réduire de moitié les étapes précédentes.

Voulant plus d’espace entre le titre et son conteneur, j’ai inséré un bloc Spacer avec un 2rem hauteur à l’intérieur du bloc Groupe à partir de l’étape 3. Après cela, j’ai ajouté le bloc de titre du message et l’ai défini sur l’alignement pleine largeur. N’oubliez pas que nous utilisons un modèle “vierge” pour cet article, nous devons donc ajouter le titre quelque part.

C’est là que les choses deviennent risquées, et j’ai presque choisi de ne pas partager ce tutoriel spécifique à cause de cela. La taille des polices dans WordPress est aussi bonne que votre thème actif. La plate-forme principale n’a pas de gestion réactive pour eux et leurs hauteurs de ligne associées, et chaque thème peut être extrêmement incompatible avec les choix qu’il propose.

La meilleure option consiste à choisir une taille de police raisonnablement grande si elle est proposée par le thème du bloc de titre de la publication. Une conception bien équilibrée fournira une gamme de choix et gérera leur redimensionnement pour les écrans plus petits. S’il n’est pas disponible, vous devrez ajouter une taille de police et une hauteur de ligne personnalisées. Les valeurs utilisées dans ma configuration sont 6rem et 1respectivement.

Ensuite, sélectionnez l’option “Noir” pour les options Apparence ou Poids, selon ce qui est disponible.

Étape 6 : Ajouter une image

Éditeur de publication WordPress avec une image pleine largeur avec une légende de démonstration et une bordure noire.

<img data-attachment-id="132822" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-06" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06.jpg" data-orig-size="2400,1112" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-06" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-500x232.jpg" loading="lazy" width="2400" height="1112" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06.jpg" alt="Éditeur de publication WordPress avec une image pleine largeur avec une légende de démonstration et une bordure noire." class="wp-image-132822" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-500x232.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-768x356.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-1536x712.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-06-2048x949.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Ajout d’une image pleine largeur pour la publication.

Vous avez deux options pour cette étape : le bloc Post Featured Image ou Image. Le premier n’a pas autant de paramètres dans WordPress 5.9. Votre thème actif peut également rendre certains styles personnalisés disponibles pour l’un et pas pour l’autre.

J’ai opté pour le bloc Image principalement parce que je voulais ajouter une légende à la photo. Je l’ai ensuite réglé sur l’alignement pleine largeur et j’ai sélectionné un style “Bordure” disponible par mon thème pour le séparer un peu de l’arrière-plan.

Étape 7 : Conclure

Éditeur de publication WordPress avec une image suivie d'un paragraphe et d'un espaceur à l'intérieur d'un ensemble de conteneurs avec un fond violet.

<img data-attachment-id="132823" data-permalink="https://wptavern.com/making-an-impression-how-to-build-a-post-hero-header-with-blocks/post-header-step-07" data-orig-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07.jpg" data-orig-size="2400,1115" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="post-header-step-07" data-image-description="" data-image-caption="" data-medium-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-300x139.jpg" data-large-file="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-500x232.jpg" loading="lazy" width="2400" height="1115" src="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07.jpg" alt="Éditeur de publication WordPress avec une image suivie d'un paragraphe et d'un espaceur à l'intérieur d'un ensemble de conteneurs avec un fond violet." class="wp-image-132823" srcset="https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07.jpg 2400w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-300x139.jpg 300w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-500x232.jpg 500w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-768x357.jpg 768w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-1536x714.jpg 1536w , https://149611589.v2.pressablecdn.com/wp-content/uploads/2022/04/post-header-step-07-2048x951.jpg 2048w " sizes="(max-width: 2400px) 100vw, 2400px" />Ajout de blocs Paragraphe et Espacement.

À partir de maintenant, amusez-vous avec les choses. J’ai ajouté un lede pour mon histoire fictive et un autre bloc Spacer, mais vous pouvez bricoler avec d’autres options comme l’affichage de l’auteur du message et de la date.

Cela ressemblait à beaucoup de travail d’assemblage. Cependant, WordPress 6.0 devrait rendre les choses beaucoup plus simples.

Catégorie: Construire avec des blocs

— to wptavern.com

Magazine Gadgets

Comment construire un en-tête Post Hero avec des blocs – WP Tavern

Construire le héros de l’en-tête de message

Étape 1 : Création de l’arrière-plan

Étape 2 : Spacers et un groupe

Étape 3 : Couverture intérieure

Étape 4 : Groupe de contenu

Étape 5 : Titre accrocheur

Étape 6 : Ajouter une image

Étape 7 : Conclure

A propos de l’auteur

Magazines

LA COMMUNAUTÉ GADGETS

LES JEUX SUR PAPERBLOG.FR