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 :
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:
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
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
À 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
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
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
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
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
À 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.
— to wptavern.com
French
Arabic
Chinese (Simplified)
English
German
Italian
Russian
Spanish