Comment redimensionner des blocs dans WordPress

L'éditeur de blocs Gutenberg, introduit officiellement dans WordPress 5.0, donne aux utilisateurs la possibilité de personnaliser entièrement leur contenu et leurs sites WordPress. N'étant plus contraint par la nécessité de créer dans un outil WYSIWYG comme TinyMCE Classic Editor, Gutenberg fournit des blocs individuels pour chaque élément du contenu de la publication ou de la page. En contrôlant les paramètres de chaque bloc spécifique, les utilisateurs peuvent concevoir du contenu WordPress plus facilement que jamais. Et l'un des moyens les plus simples de faire ressortir les conceptions est de les amener au-delà de leurs paramètres par défaut. Nous allons donc voir comment redimensionner les blocs dans WordPress afin que vous puissiez commencer à penser (et à concevoir) en dehors des sentiers battus.

La plupart des redimensionnements dans l'éditeur de blocs sont toujours limités à la zone de contenu du site en raison de la nature réactive des blocs. Si vous avez défini la zone de contenu de votre page en pleine largeur, vous travaillerez dans cet espace. Si vous avez une zone de contenu de publication définie sur 580px ou 1200px, par exemple, vous y travaillerez. Les méthodes que nous utilisons pour vous apprendre à redimensionner des blocs dans WordPress sont toutes basées sur l'idée que vous resterez dans les limites d'un conteneur de bloc particulier.

Comment redimensionner des blocs dans l'éditeur

Certains blocs, mais pas tous, ont des options de redimensionnement intégrées. Ce sont les plus faciles à redimensionner pour des raisons évidentes. Selon le bloc, cependant, les options de redimensionnement seront à des endroits différents.

Exemple #1 : Le Bloc Image

Cliquer sur le bloc fera apparaître le menu contextuel, et les options de redimensionnement ici sont en fait des options d'espacement. Cependant, les alignements grande largeur et pleine largeur changeront la taille du bloc d'image soit à la largeur du conteneur (large) soit à la largeur de la page entière (pleine).

Vous pouvez également redimensionner le bloc d'image à l'aide des paramètres de bloc dans la barre latérale droite. La section Taille de l'image, qui porte bien son nom, propose un certain nombre de choix avec lesquels vous pouvez redimensionner le bloc.

WordPress a une liste déroulante pour un redimensionnement rapide, et vous pouvez choisir des préréglages parmi les miniatures , moyennes , grandes et pleine taille. La sélection de la taille réelle variera en fonction de votre thème, qu'il s'affiche réellement en entier ou qu'il s'adapte à la zone de contenu.

Vous pouvez également ajuster spécifiquement la largeur et la hauteur par pixels. En dessous, vous pouvez ajuster en pourcentage. Le pourcentage est basé sur la valeur numérique dans les champs de largeur et de hauteur . Pas la taille d'image prédéfinie que vous avez sélectionnée dans le menu déroulant.

Et enfin, vous pouvez cliquer sur l'image elle-même pour faire apparaître une bordure bleue avec des ancres blanches et circulaires . Vous pouvez les faire glisser pour redimensionner le bloc.

Il vous suffit de cliquer et de faire glisser sur l'une des ancres pour redimensionner l'image. Cela ajustera la taille dans les champs de hauteur et de largeur dans le menu des paramètres de bloc.

Exemple 2 : Le bloc d'événements

Pour le bloc d'événements, les paramètres de redimensionnement se trouvent uniquement dans le menu contextuel de l'éditeur lui-même. (Le bloc d'événements est un plugin distinct d'Automattic que vous installerez, et il ne fait pas partie de l'éditeur principal de Gutenberg.)

Comme certaines options de bloc d'image, les options de redimensionnement ici sont des options d'espacement technique. Mais les deux options sont Align Center et Wide Width. Vous pouvez en choisir un centré dans le conteneur ou sur toute la largeur de l'écran.

Ajuster la hauteur du bloc dans l'éditeur lui-même est un peu compliqué, mais fonctionne. Si vous appuyez simplement sur entrée/retour dans le champ de bloc vide, vous pouvez augmenter la hauteur en insérant des blocs de paragraphe vides supplémentaires.

C'est une solution loin d'être idéale. Mais c'est rapide et fonctionne à la rigueur, surtout compte tenu de l'absence d'une véritable option de réglage de la hauteur pour le bloc d'événements.

Exemple 3# : Utilisation de colonnes pour redimensionner des blocs dans WordPress

Si le bloc que vous devez redimensionner ne comporte pas d'options de redimensionnement dans son panneau de paramètres ou son menu contextuel, l'utilisation des colonnes de l'éditeur de blocs est une autre façon de redimensionner n'importe quel bloc. Recherchez simplement le bloc Colonnes en appuyant sur l'un des boutons + pour ajouter un nouveau bloc.

Dans le bloc Colonne, vous pouvez ajouter tous les autres blocs que vous souhaitez. Dans les options de recherche, l'éditeur de blocs Patterns apparaît également. Ce sont des modèles que vous pouvez insérer dans votre article ou votre page avec du contenu déjà dimensionné et placé, en attendant que votre contenu remplace l'espace réservé.

Dès le départ, le bloc Colonnes permet de choisir la taille de la colonne elle-même. Il est divisé en 6 orientations différentes, chacune avec un pourcentage différent de la page utilisée pour les colonnes individuelles.

Ce ne sont pas les seules configurations que vous pouvez utiliser. Vous pouvez utiliser le bouton bleu + à l'intérieur du bloc pour ajouter une nouvelle colonne à tout moment. Chaque colonne individuelle a son propre panneau de paramètres dans lequel vous pouvez ajuster la largeur de celle-ci par des pourcentages.

Il faudra peut-être quelques expérimentations pour obtenir le dimensionnement correct pour votre conception. Cependant, une fois terminé, vous pouvez avoir du contenu bien conçu et bien espacé sur votre page d'accueil. Gardez à l'esprit que toutes les colonnes vides que vous avez dans l'éditeur de blocs apparaîtront également comme vides sur le front-end.

En ajustant la largeur, le placement et le nombre de colonnes différentes, vos blocs peuvent être redimensionnés et placés de presque toutes les manières.

Besoin de plus d'options de dimensionnement ? Envisagez un constructeur de pages plus avancé

Nous réalisons que certaines de ces méthodes pour redimensionner les blocs peuvent sembler limitatives. Si vous trouvez qu'ils sont trop restrictifs pour vous, il est peut-être temps de vous tourner vers un constructeur de pages plus avancé.

Notre propre Divi, par exemple, a des options de dimensionnement et de transformation pour chaque module (bloc) qui vous donnent un contrôle beaucoup plus grand sur la forme, la taille et l'espacement que ce qui est possible dans Gutenberg. La plupart des constructeurs de pages avancés le font aussi, donc si vous trouvez que les options de Gutenberg sont trop limitées, vérifier quelque chose comme Divi peut être la meilleure prochaine étape.

Comment redimensionner des blocs dans WordPress à l'aide de CSS

Chaque bloc a une section CSS dans le panneau des paramètres sous Paramètres avancés . Outre tous les autres paramètres avancés spécifiques au bloc, chacun dispose d'un champ pour la ou les classes CSS supplémentaires . Vous pouvez affecter tous les sélecteurs de votre choix à ce bloc individuel, qu'ils existent déjà sur votre site ou que vous les créiez spécifiquement pour ce bloc.

Normalement, nous suggérons d'utiliser des identifiants CSS au lieu de classes pour les blocs individuels, mais cela n'est pas pris en charge par l'éditeur de blocs (au moins par défaut). Vous voudrez donc simplement utiliser plusieurs classes pour suivre les blocs individuels plutôt que les identifiants. Les classes sont vraiment destinées à couvrir de grandes catégories de types d'éléments, tandis que les ID sont destinés à des éléments individuels. Dans ce cas, nous vous suggérons d'utiliser une convention de nommage claire pour que les choses restent claires dans votre code.

Quoi qu'il en soit, vous saisirez simplement la classe dans le champ de texte. N'incluez pas de point/point devant le nom de la classe dans ce champ .

Maintenant, vous devez naviguer vers Apparence - Personnaliser et trouver la section CSS supplémentaire tout en bas. Écrivez ou collez le code CSS pour redimensionner le bloc à votre guise.

Nous vous suggérons d'éviter d'utiliser des mesures en pixels (px) car elles sont absolues. De préférence, vous utiliserez vw (largeur de la fenêtre) , vh (hauteur de la fenêtre) ou % (pourcentage) pour ajuster le bloc. Ceux-ci seront chacun mis à l'échelle en référence à l'appareil et/ou à d'autres contenus qui l'entourent.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Gardez à l'esprit que % et vw/vh sont également différents, bien qu'ils fonctionnent de la même manière. Ils fonctionnent tous sur des pourcentages, mais ceux-ci sont relatifs à des ancres différentes.

La mesure en pourcentage est en relation avec le conteneur dans lequel l'élément est maintenu. Ainsi, si la section ou la ligne dans laquelle se trouve l'élément n'atteint pas les bords de l'écran, même le paramètre width:100% n'atteindra pas les limites.

L'utilisation de vh/vw , cependant, car ils sont relatifs à la fenêtre d'affichage de l'appareil lui-même, et non aux éléments du site. En utilisant height:80vh , vous pouvez toujours vous assurer que ce bloc occupe 80% de la hauteur de l'écran, qu'il s'affiche sur un appareil mobile, un ordinateur de bureau ou une tablette.

Conclusion

L'éditeur de blocs de WordPress offre aux utilisateurs un grand nombre d'options de personnalisation qui n'étaient pas disponibles auparavant (dans l'éditeur lui-même, c'est-à-dire). Savoir comment redimensionner les blocs dans WordPress est essentiel pour pouvoir utiliser pleinement l'éditeur de blocs. Et avec l'édition complète du site maintenant dans son répertoire, c'est une compétence qui ne fera que devenir plus utile avec le temps.

Quels sont les trucs et astuces que vous pouvez partager sur le redimensionnement des blocs dans WordPress ?

Article présenté en image par 3rieart / shutterstock.com