Gutenberg, le nouvel éditeur de WordPress est sorti le 6 décembre 2018 avec la version 5.0. Depuis, l’expérience utilisateur dans la publication de contenus sur WordPress a été nettement modifiée. On peut dire que le sujet ‘Gutenberg’ est assez clivant dans la communauté WordPress. Le projet était contesté par certain-e-s avant même sa sortie. Mais dans ce tutoriel, il ne s’agira pas d’alimenter la polémique. Au contraire, il s’agira d’expérimenter et de voir quelles sont les possibilités…
Nous allons découvrir ici une bibliothèque pour Gutenberg qui regroupe des blocs additionnels pour WordPress https://gutenberghub.com/blocks/. Cette bibliothèque bénéficie d’un moteur de recherche. Nous pouvons retrouver facilement des blocs qui nous intéressent.
Blocs additionnels Gutenberg
Dans ce tutoriel, nous allons voir comment construire une page d’accueil comme une ‘landing page’ uniquement avec des blocs Gutenberg. Cela va nous permettre de découvrir la bibliothèque ‘Gutengerhub’, de tester des nouveaux blocs Gutenberg et pourquoi pas une nouvelle manière de concevoir des pages sur WordPress. Pour une formation de base à Gutenberg, je vous renvoie à ce tutoriel de Johanne Alcidi
Pour notre exemple, nous allons imaginer un site qui propose des formations…à WordPress
Thème Neve
Pour commencer, nous allons installer le thème Neve. Ce thème est très pratique car il permet facilement de modifier le ‘layout’ des pages. Ainsi, par exemple, en un clic, on peut enlever la ‘sidebar’.
Pour + d’infos sur ce thème, c’est ici. Pour installer un thème, il y a ce tutoriel. Dans ce tutoriel, nous allons travailler sur la page d’accueil. Elle sera statique. Donc elle n’affichera pas les derniers articles du blog. Nous allons justement complètement ‘customiser’ cette page d’accueil.
Donc d’abord, nous allons créer une page qui s’appelle pour être original ‘Accueil’. Et dans ‘Apparence’ -> ‘Personnaliser’, nous allons définir cette page comme étant la page d’accueil
et pour l’instant notre page d’accueil ressemble à ceci
Pour commencer, on va un peu modifier le thème. On va enlever l’affichage du titre et l’affichage de la ‘sidebar’ pour la page d’accueil.
On va sur la page d’accueil et à droite, nous avons des réglages spécifiques pour chaque page. On va mettre la page d’accueil en pleine largeur (full width), on va enlever la sidebar (no sidebar) et on va enlever le titre (Disable Title).
Ainsi notre page d’accueil va ressembler à ceci:
Nous allons compléter le contenu avec Gutenberg.
Gutenberg Block Library
Nous allons nous rendre sur ‘Gutenberg Block Library’
https://gutenberghub.com/blocks/
Ici chaque bloc est présenté sous forme de cartes. Une petite image nous montre le bloc dans le fil de publication. Nous avons le titre du bloc. En dessous, un cours résumé de ce que fait le bloc. Sur un lien, nous retrouvons le nom de l’extension qui contient le bloc. Dans l’exemple ci-dessous, il s’agit de ‘Atomic Blocks’.
Dans le pied de page de la carte, les tags affiliés au blocs sont affichés ainsi qu’un bouton qui renvoie vers la page spécifique du bloc concerné.
Et sur chaque page, nous avons des liens vers la page WordPress de l’extension, un lien vers le dépôt Github et le site web de l’extension.
Notre page d’accueil
Bannière
Pour faire la bannière, nous allons chercher un bloc très pratique qui permet de créer des zones dans notre page et d’adapter les marges et les ‘paddings’ en fonction de la taille de l’écran. Ce bloc s’appelle ‘Row Layout’. Il suffit de le chercher avec le moteur de recherche
Le bloc est compris dans l’extension ‘Kadence Block’.
Je vous laisse télécharger l’extension et pour celles et ceux qui ne savent pas comment faire, il y a ce tutoriel sur WPFormation:
Une fois que notre extension est téléchargée, nous pouvons retourner sur l’édition de notre page d’accueil. Dans la liste des blocs, on peut voir maintenant que nous avons la liste des blocs de ‘Kadence Blocks’.
Après avoir sélectionné le bloc, on sélectionne le nombre de colonnes. Pour notre bannière, nous allons choisir une colonne.
Nous allons définir que notre bloc occupe toute la largeur horizontale de notre page en cliquant sur le bouton ci-dessous:
Nous sélectionnons une image d’arrière-plan comme ceci:
Nous allons ajouter le titre sur la bannière en utilisant le bloc ‘Advanced Heading’ de la même extension ‘Kadence Block’.
N’oubliez pas de mettre le titre dans une balise <h1>. En effet, c’est le titre principal de la page.
Puis toujours, dans ce même bloc ‘Row layout’, on peut ajouter un paragraphe.
En ‘front end’, on obtient maintenant ceci:
On ne va pas s’arrêter en si bon chemin et pour le plaisir, on va ajouter un petit bouton qui enverra directement vers les inscriptions. Et pour ça il y un bloc ‘Advanced Button’ toujours chez ‘Kadence Blocks’.
Descriptions des formations
Dans cette section, nous allons utiliser le bloc ‘Row Layout’, mettre un background de couleur et utiliser trois colonnes.
Nous allons utiliser chaque colonne pour décrire les possibilités et les avantages qu’offrent nos formations. Et pour accrocher encore + le visiteur, nous utiliserons des pictogrammes. Encore une fois, l’extension ‘Kadence blocks’ contient un bloc qui s’appelle ‘Icons’ et qui permet d’afficher facilement des pictogrammes.
Si nous continuons le travail pour les deux autres colonnes, on obtiendra une deuxième section qui pourrait ressembler à ça:
Pour faire tendance et joli, nous allons utiliser une vague pour diviser notre bloc bleu. Et pour cela, nous utilisons le bloc ‘Shape Divider’ provenant de l’extension ‘CoBlocks’.
Une fois l’extension installée, il suffit d’appliquer le bloc ‘Shape Divider’ sous notre bloc créé précédemment.
Pour que la vague colle au bloc précédent, il faut changer les marges.
Et ça donne ceci:
Media Card
Pour notre prochaine section, nous allons poser une photo avec une phrase accrocheuse. L’idée est que la photo et le texte soient alignés. Dans ‘CoBlocks’, il y a un bloc qui fait ça et il s’appelle ‘Media Card’.
Pour les versions mobile de votre page d’accueil, il est judicieux d’activer ’empiler sur mobile’, sinon l’espace pour l’alignement sera trop étroit.
Ainsi pour les mobiles, nous aurons cet affichage:
Affichage des formateur-trice-s
Pour la prochaine zone de notre page d’accueil, on aimerait afficher les formateurs-trice-s. On retourne sur ‘Gutenberg Block Library’, on tape ‘team’ dans le moteur de recherche et on tombe notamment là-dessus: (libre à vous de prendre un autre bloc. Ce sont des exemples).
On télécharge l’extension ‘Stackable’ et c’est parti.
Et en continuant, on peut imaginer obtenir ceci:
Liste des prix
Pour nos formations, on décide d’avoir deux prix: par mois et par an. C’est tout.
Pour ça, on va utiliser le bloc ‘Pricing box’ de ‘Stackable’. On va l’inclure dans un bloc ‘Row Layout’.
Mais on ne veut pas que les deux cartes occupent toute la largeur. Donc on va réduire le ‘padding’ dans notre bloc ‘Row Layout’.
Et pour la version mobile de notre page d’accueil, on ne voudra pas un tel ‘padding’, donc il suffit de remettre à 25 pixels les ‘paddings’ gauche et droite pour la version mobile comme ceci:
Conclusion
On pourra encore ajouter des témoignages d’étudiant-e-s en utilisant le bloc ‘Testimonials’ de Atomic Blocks
et au final, nous aurons une page d’accueil avec plusieurs sections et c’est ‘responsive’.
Maintenant à vous d’expérimenter et d’explorer la bibliothèque ‘Gutenberg Block Library’ !
