Name: WordPress Personnaliser les thèmes Gutenberg sans coder (5e édition)
Rating: 5 (2 reviews)

Découvrir les blocs de mise en page

Pour concevoir les modèles des pages, vous pouvez utiliser des blocs spécifiques qui permettent de créer des structures avec des conteneurs. Ces blocs conteneurs sont principalement les blocs nommés Groupe, Rangée, Empilement, Grille et Colonnes. Ces blocs servent à contenir d’autres blocs pour créer une structure de mise en page plus ou moins complexe.

Notez bien que ces blocs « conteneurs » sont utilisables dans les modèles de page, mais aussi dans les contenus rédactionnels que sont les articles et les pages.

Donc, avant la personnalisation des modèles, il convient de faire un tour d’horizon de ces blocs de mise en page.

Créer un modèle de page de travail

Pour exploiter ces blocs de mise en page, il faut utiliser un contenu. Pour aborder ces concepts dans ce chapitre, nous allons créer un modèle de page de travail dont l’objectif est simplement d’avoir un contenu. Ce modèle de page ne sera pas exploité en tant que tel dans le site.

Dans le menu Apparence, choisissez Éditeur.

Puis, cliquez sur Modèles.

En haut à droite de l’écran, cliquez sur le bouton Ajouter un modèle.

Dans les modèles prédéfinis, choisissez Modèle personnalisé.

Puis nommez le nouveau modèle.

Cliquez sur le bouton Créer.

Ensuite, WordPress nous propose d’utiliser une composition pour créer le nouveau modèle.

Sélectionnez l’unique composition proposée.

Le nouveau modèle est créé :

Pour afficher la structure du modèle, cliquez sur le bouton Vue d’ensemble du document.

La structure s’affiche, avec un en-tête, un bloc Groupe pour afficher le contenu principal et un pied de page :

Déployez l’arborescence du bloc Groupe, puis sélectionnez le bloc Groupe inclus, cliquez sur l’outil Options images/06ic04.PNG puis sur Supprimer.

Confirmez cette suppression en cliquant sur le bouton Supprimer.

Nous avons maintenant un modèle...

Insérer des blocs de mise en page

Pour appréhender les blocs de mise en page, nous allons utiliser ce modèle et les insérer dans le bloc Groupe central qui est vide actuellement.

Dans le volet Vue d’ensemble du document, sélectionnez le bloc Groupe central.

Pour insérer un bloc, cliquez sur le bouton images/07ic01.PNG Ouvrir/fermer l’outil d’insertion de blocs.

Dans la liste des blocs, les blocs de mise en page sont classés dans la catégorie DESIGN :

Utiliser le bloc Groupe

1. Insérer le bloc Groupe et choisir son type de mise en page

Le premier bloc que nous allons utiliser est le bloc Groupe. Ce bloc permet d’y insérer d’autres blocs afin de créer une structure de base pour la mise en page. Noter que, pour des structures plus complexes, il est parfaitement possible d’insérer un bloc Groupe dans un autre bloc Groupe.

Dans la liste des blocs, choisissez Groupe.

Après l’insertion d’un bloc Groupe, choisissez une mise en page pour les blocs qui y seront insérés :

Voici les quatre possibilités :

Groupe

Rangée

Empilement

Grille

Dès que vous choisissez un type de mise en page, le bloc qui était initialement de type Groupe change de type, sauf pour l’option Groupe.

Voici le bloc Groupe avec l’option Groupe, il n’y a initialement qu’une seule « cellule » où sera par la suite inséré un bloc :

Le type de groupe est affiché dans la colonne des Réglages, dans l’onglet Bloc :

Voici le bloc Groupe avec l’option Rangée, il y a initialement deux « cellules » l’une à côté de l’autre, où seront insérés les blocs :

Et son type :

Voici le bloc Groupe avec l’option Empilement, il y a initialement deux « cellules » l’une au-dessus de l’autre, où seront insérés les blocs :

Et son type :

Voici le bloc Groupe avec l’option Grille, il y a initialement trois « cellules » où seront insérés les blocs :

Et son type :

Donc, une fois choisi le type de conteneur, le bloc Groupe est automatiquement changé en bloc Rangée, Empilement...

Mettre en page le bloc Groupe

Dans ce nouvel exemple, nous avons créé un bloc Groupe simple nommé Groupe simple.

Ce groupe ne contient qu’un seul bloc. C’est un bloc Paragraphe avec un texte simple.

Voici sa structure :

Voici les deux blocs affichés :

En ce qui concerne la mise en page du bloc Groupe, nous retrouvons tout ce qui a été vu précédemment.

Pour effectuer la mise en page, utilisez les options de l’onglet Bloc du volet de réglages.

Mettre en page le bloc Rangée

1. La structure du bloc Rangée

Dans cet exemple, nous avons inséré un bloc Groupe qui utilise le type Rangée :

Puis, dans ce bloc Rangée, nous avons trois blocs Paragraphe avec du texte simple.

Voici la structure :

Voici les blocs affichés :

Notez que ce bloc Rangée utilise un alignement Grande largeur. De plus, nous avons utilisé ici des blocs de type Paragraphe pour plus de facilité, mais vous pouvez bien sûr insérer n’importe quel type de bloc.

Pour effectuer la mise en page de ce bloc Rangée, utilisez l’onglet Bloc du volet des réglages et les paramètres de Mise en page :

2. Le réglage Justification

Le réglage JUSTIFICATION permet de choisir l’alignement horizontal des blocs Paragraphes inclus dans le bloc Rangée.

Sélectionnez Justifier les blocs à gauche pour afficher les blocs inclus sur la gauche du bloc Rangée.

Sélectionnez Justifier les blocs au centre pour afficher les blocs inclus au centre du bloc Rangée.

Sélectionnez Justifier les blocs à droite pour afficher les blocs inclus sur la droite du bloc Rangée.

Sélectionnez Répartir les blocs pour répartir horizontalement les blocs inclus dans le bloc Rangée.

Notez que vous retrouvez ces alignements dans la barre d’outils...

Mettre en page le bloc Empilement

Dans cet exemple, nous avons inséré un bloc Groupe qui utilise le type Empilement :

Puis, dans ce bloc Empilement, nous avons trois blocs Paragraphe avec du texte simple.

Voici la structure :

Voici les blocs affichés :

Notez que ce bloc Empilement utilise un alignement Aucun. Il occupe donc une petite largeur dans son bloc parent, un bloc Groupe. À nouveau, vous pouvez bien sûr insérer n’importe quel type de bloc dans le bloc Empilement.

Utilisez le volet des réglages pour réaliser la mise en page du bloc Empilement :

Pour les blocs Empilement, vous retrouvez les mêmes réglages que ceux vus précédemment pour les blocs Rangée : JUSTIFICATION, ORIENTATION et Autoriser le passage sur plusieurs lignes. Les applications sont les mêmes, mais cette fois, c’est dans le sens vertical.

Mettre en page le bloc Grille

1. La structure du bloc Grille

Dans cet exemple nous avons inséré un bloc Groupe qui utilise le type Grille :

Puis, dans ce bloc Grille, nous avons cinq blocs Paragraphe avec du texte simple.

Voici la structure :

Voici les blocs affichés :

Notez que ce bloc Grille utilise un alignement Grande largeur. Il occupe donc la largeur spécifiée dans son bloc parent, un bloc Groupe. À nouveau, vous pouvez insérer n’importe quel type de bloc dans le bloc Grille.

C’est toujours dans le volet des réglages onglet Bloc que se fait la mise en page du bloc Grille :

2. Le réglage Position de l’élément de la grille

Pour positionner les blocs enfants de la grille, vous avez deux possibilités de mise en page.

Sélectionnez l’option Automatique pour définir la largeur minimale des colonnes. C’est le réglage par défaut de la Mise en page.

Dans cet exemple, les blocs inclus de type Paragraphe sont placés automatiquement dans le bloc Grille. Et les colonnes de la grille, qui contiennent les blocs Paragraphe, ont une largeur minimale de 12 rem. L’unité rem est définie relativement par rapport à la taille spécifiée à la racine de la page, dans le code HTML/CSS du thème.

Voici l’affichage obtenu :

Appliquez une largeur minimale...

Mettre en page le bloc Colonnes

1. La structure du bloc Colonnes

Le bloc Colonnes permet de créer des mises en page en colonnes.

Insérez un bloc Colonnes.

Choisissez combien de colonnes vous souhaitez insérer dans le bloc Colonnes.

Dans cet exemple, l’option choisie est Deux colonnes ; largeur égale. Les deux colonnes occupent chacune 50 % de la largeur du bloc parent. Dans l’interface du bloc Colonnes cela correspond au choix 50/50 :

Ensuite, insérez un bloc Paragraphe dans la première colonne et saisissez-y du texte :

Dans le volet Vue d’ensemble du document, sélectionnez la deuxième colonne.

Puis cliquez sur l’outil Ajouter un bloc images/07ic02.PNG pour ajouter un bloc dans la deuxième colonne et choisissez un bloc Paragraphe.

Voici la structure :

Voici l’affichage obtenu :

Dans cet exemple, le bloc Colonnes utilise une Grande largeur par rapport à son bloc parent qui est un bloc Groupe.

2. Le réglage du nombre de colonnes

Comme toujours, c’est dans le volet réglages que s’effectue la mise en page du bloc Colonnes.

Dans le champ COLONNES, spécifiez le nombre de colonnes ou utilisez la réglette.

Activez l’option Empiler sur mobile pour afficher les colonnes les unes au-dessus des autres lorsque la page est affichée sur un téléphone mobile.

Mettre en forme des blocs de structure

1. L’affichage des mises en forme

La mise en forme des blocs de structure est similaire pour tous les blocs. Les paramètres de mise en forme sont communs. La mise en forme des blocs se fait dans le volet Réglages, dans l’onglet Bloc, sous-onglet Styles. En voici un extrait :

2. Les styles

Dans le sous-onglet Styles, choisissez une mise en forme prédéfinie parmi celles proposées par le thème.

3. Les couleurs

Dans la section Couleur, modifiez et personnalisez la couleur du texte et de l’arrière-plan.

Cliquez sur le menu Options de Couleur images/06ic04.PNG pour sélectionner d’autres éléments à colorer :

Quand vous choisissez un autre élément, celui-ci apparaît dans la section Couleur. Dans cet exemple, ce sont les éléments Lien et Bouton qui sont sélectionnés :

Reportez-vous au chapitre Modifier les styles du thème Twenty Twenty-Five, section Personnaliser un style et de sous-section Modifier les couleurs pour revoir l’utilisation des couleurs.

Si vous avez fait des erreurs dans le choix des couleurs, dans le menu Options de Couleur images/06ic04.PNG , cliquez sur l’option RÉINITIALISER de l’élément ou bien cliquez sur l’option Tout réinitialiser pour revenir à toutes les couleurs du thème par défaut.