Comment changer la hauteur et la largeur des blocs dans WordPress

Obtenir la taille exacte de vos blocs WordPress nécessitait auparavant du CSS personnalisé ou des solutions de contournement complexes.

Nous le savons car nous avons passé d'innombrables heures à aider les utilisateurs avec ce problème exact. Mais grâce aux récentes mises à jour de WordPress, le contrôle des dimensions des blocs est devenu beaucoup plus simple.

Ce qui surprend beaucoup de gens, c'est qu'il existe en fait plusieurs façons intégrées d'ajuster les tailles de blocs dans WordPress. Grâce à de nombreuses expérimentations, nous avons identifié les méthodes les plus fiables qui fonctionnent dans différentes situations et thèmes.

Dans ce guide, nous partagerons les moyens les plus simples de changer la hauteur et la largeur des blocs dans WordPress.

Pourquoi changer la hauteur et la largeur des blocs dans WordPress ?

L'éditeur de blocs vous permet d'ajouter du contenu à votre site Web WordPress à l'aide de différents blocs, y compris des titres, des paragraphes, des images, des vidéos, de l'audio, et plus encore.

Cependant, vous pourriez parfois vouloir changer la largeur ou la hauteur d'un bloc spécifique pour améliorer son apparence ou la mise en page générale du contenu.

L'ajustement des tailles de blocs peut également garantir que votre contenu est responsive et s'affiche correctement sur tous les appareils, y compris les téléphones, les tablettes et les ordinateurs portables.

Par exemple, vous pourriez avoir téléchargé une image dans l'éditeur de contenu, mais elle est trop grande et rend la page peu attrayante sur le front-end.

Vous pourriez également vouloir changer la taille du bloc de titre pour mieux l'aligner avec le contenu.

En ajustant la largeur et la hauteur des blocs, vous pouvez rendre vos articles et pages plus esthétiques.

Cela dit, voyons comment vous pouvez facilement modifier la hauteur et la largeur des blocs dans WordPress. Nous allons couvrir plusieurs méthodes différentes, et vous pouvez utiliser les liens rapides ci-dessous pour accéder à celle que vous souhaitez utiliser :

Méthode 1 : Modifier la hauteur et la largeur des blocs à l'aide des paramètres de bloc

Dans cette méthode, nous vous montrerons comment modifier la hauteur et la largeur d'un bloc à l'aide des paramètres par défaut de WordPress.

Actuellement, WordPress n'offre pas les mêmes options de redimensionnement pour tous les blocs. Cependant, l'éditeur de blocs offre de nombreuses façons de redimensionner la hauteur et la largeur de différents blocs.

Commençons par le bloc Image dans WordPress.

Tout d'abord, vous pouvez modifier l'alignement du bloc Image en cliquant sur le bouton « Aligner » dans la barre d'outils située au-dessus du bloc.

Ici, choisir l'option « Largeur étendue » rendra le bloc aussi large que le conteneur. Ou, l'option d'alignement « Pleine largeur » rendra le bloc sur toute la largeur de la page.

Vous pouvez également redimensionner un bloc en allant dans le panneau « Paramètres du bloc » à droite et en faisant défiler jusqu'à la section « Paramètres ». À partir de là, vous pouvez redimensionner un bloc à partir du menu déroulant « Taille de l'image ».

Vous pouvez également ajuster la largeur et la hauteur du bloc en saisissant la taille en pixels souhaitée dans les cases « Largeur » et « Hauteur » de la section « Dimensions de l'image ».

En dessous, vous pouvez également ajuster la taille du bloc en pourcentage.

Une autre façon de redimensionner un bloc Image est de cliquer sur l'image elle-même, ce qui fait apparaître une bordure bleue avec des ancres circulaires.

Ensuite, faites simplement glisser ces ancres pour modifier la hauteur et la largeur du bloc d'image.

Une fois que vous avez terminé, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.

Méthode 2 : Modifier la hauteur et la largeur des blocs à l'aide du bloc Colonnes

Si le bloc que vous souhaitez redimensionner n'est pas fourni avec des boutons d'alignement ou des paramètres de redimensionnement, alors cette méthode est pour vous.

Pour cette méthode, nous placerons notre bloc à l'intérieur du bloc Colonnes. Il agit comme un conteneur où vous pouvez ajouter différents blocs dans chaque colonne. Ensuite, vous pouvez redimensionner ces blocs en ajustant la hauteur et la largeur des colonnes.

Tout d'abord, cliquez sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche de l'écran.

À partir de là, localisez et ajoutez le bloc Colonnes à l'éditeur Gutenberg. Ensuite, il vous sera demandé de choisir une variation.

Après cela, la disposition des colonnes s'affichera à l'écran, et vous pourrez maintenant ajouter le bloc que vous souhaitez en cliquant sur le bouton « Ajouter un bloc (+) » à l'intérieur d'une colonne.

Une fois le bloc ajouté, vous pouvez le redimensionner en utilisant les « Paramètres de colonne » situés dans le panneau de droite.

Une fois que vous avez terminé, cliquez simplement sur le bouton « Publier » pour enregistrer vos modifications.

Voici à quoi ressemblait le contenu sur notre site de démonstration après avoir redimensionné et aligné deux blocs de paragraphe à l'intérieur d'un bloc à deux colonnes.

Méthode 3 : Modifier la hauteur et la largeur des blocs à l'aide du bloc Groupe

Vous pouvez également ajuster la largeur et la hauteur des blocs à l'aide du bloc Groupe. Il vous permet de regrouper vos blocs souhaités et de les styliser ensemble.

Tout d'abord, vous devez cliquer sur le bouton « Ajouter un bloc » (+) en haut. Ensuite, localisez et ajoutez le bloc Groupe à l'éditeur de contenu.

Une fois que vous avez fait cela, le bloc Groupe affichera trois options de mise en page différentes. Pour ce tutoriel, nous utiliserons la mise en page « Groupe ».

Après cela, le bouton « Ajouter un bloc » s'affichera à l'écran. Vous pouvez maintenant ajouter n'importe quel bloc que vous souhaitez.

Dans ce tutoriel, nous allons ajouter et redimensionner un bloc Titre, un bloc Paragraphe et un bloc Image.

Pour ajouter plusieurs blocs au Groupe, cliquez sur le bouton « Sélectionner le groupe » dans la barre d'outils du bloc.

Une fois le Groupe sélectionné, cliquez simplement sur le bouton « Ajouter un bloc » (+) en bas.

Une fois que vous avez fait cela, la barre latérale des paramètres de bloc à droite s'ouvrira. À partir de là, vous pouvez facilement ajuster la mise en page, la justification et l'orientation de tous les blocs.

La modification de la mise en page modifiera également les différentes tailles de blocs. Vous pouvez configurer ces paramètres jusqu'à ce que vous soyez satisfait du résultat.

Une fois que vous avez terminé, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.

Voici à quoi ressemblait le bloc Groupe sur notre site de démonstration.

Méthode 4 : Modifier la hauteur des blocs à l'aide du bloc Couverture

Cette méthode de redimensionnement est pour vous si vous souhaitez utiliser le bloc Couverture. Elle vous permet d'afficher du texte et d'autres contenus par-dessus une image ou une vidéo.

Tout d'abord, cliquez sur le bouton « Ajouter un bloc » (+) en haut et trouvez le bloc Couverture.

Une fois que vous avez fait cela, il vous sera demandé de choisir une couleur ou de télécharger une image depuis la bibliothèque de médias WordPress. Cette image ou couleur sera utilisée comme arrière-plan pour le bloc Couverture.

Ensuite, faites simplement glisser et déposez n'importe quel bloc que vous souhaitez dans le bloc Couverture.

Après cela, vous devez cliquer sur le bloc Couverture pour ouvrir ses paramètres de bloc dans la colonne de droite.

À partir de là, faites défiler vers le bas jusqu'au panneau « Dimensions », où vous pouvez ajuster la hauteur du bloc Couverture en pixels.

Enfin, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Pour des instructions plus détaillées sur la façon d'utiliser le bloc Couverture, vous voudrez peut-être consulter notre guide pour débutants sur l'image de couverture par rapport à l'image mise en avant dans l'éditeur de blocs WordPress.

Bonus : Créez de belles pages à l'aide de blocs avancés dans SeedProd

Vous pouvez facilement créer de belles pages esthétiques en utilisant le plugin SeedProd .

C'est le meilleur constructeur de pages WordPress du marché qui vous permet de créer des pages de destination à l'aide de blocs, qui sont super faciles à personnaliser et à redimensionner selon vos besoins.

Plusieurs de nos marques partenaires ont utilisé cet outil pour concevoir l'intégralité de leur site Web, et leurs utilisateurs ont adoré le look frais et moderne. Pour en savoir plus, consultez notre avis sur SeedProd.

Tout d'abord, vous devrez installer et activer le plugin SeedProd. Pour plus de détails, vous pouvez lire notre guide sur comment installer un plugin WordPress.

Après activation, vous devez vous rendre sur la page SeedProd » Paramètres depuis votre tableau de bord WordPress et saisir la clé de licence dans la case « Clé de licence ».

Vous pouvez trouver la clé de licence sur la page de votre compte sur le site web de SeedProd.

Ensuite, visitez l'écran SeedProd » Pages de destination depuis la barre latérale d'administration pour commencer à créer une page de destination.

À partir de là, cliquez simplement sur le bouton « Ajouter une nouvelle page de destination ».

Vous serez maintenant dirigé vers l'écran « Choisir un nouveau modèle de page ». SeedProd propose de nombreux modèles préconçus parmi lesquels vous pouvez choisir.

Après avoir sélectionné un modèle, il vous sera demandé de fournir un nom et une URL pour votre page de destination.

Après avoir ajouté ces détails, cliquez simplement sur le bouton « Enregistrer et commencer à modifier la page » pour continuer.

Cela lancera l'éditeur de page par glisser-déposer de SeedProd, où vous pouvez maintenant commencer à modifier votre page. Pour des instructions détaillées, consultez notre guide sur comment créer une page de destination avec WordPress.

Pour ce tutoriel, nous allons ajouter et redimensionner un bloc Image et un bloc Bouton.

Tout d'abord, vous devrez faire glisser le bloc Image depuis le panneau des blocs à gauche et le déposer où vous le souhaitez sur la page.

Ensuite, cliquez sur le bloc Image pour ouvrir ses paramètres de bloc dans la colonne de gauche. À partir de là, vous pouvez télécharger une image depuis votre bibliothèque de médias.

Ensuite, vous pouvez modifier la hauteur et la largeur du bloc en utilisant des pixels ou des pourcentages.

Vous pouvez également ajuster la taille et la position de l'image en passant à l'onglet « Avancé » en haut du panneau des paramètres.

Ensuite, cliquez simplement sur le panneau Espacement pour développer ses paramètres.

Ici, ajoutez simplement des valeurs pour ajuster la marge et le remplissage du bloc selon vos besoins.

Vous pouvez ajuster la marge et le remplissage pour les zones supérieure, inférieure, gauche et droite du bloc.

Avec Seedprod, vous pouvez également ajouter un bloc Séparateur entre deux blocs différents pour créer un espace entre eux.

Tout d'abord, vous devrez localiser et ajouter le bloc « Séparateur » dans la colonne de gauche. Ensuite, cliquez dessus pour ouvrir ses paramètres.

Maintenant, vous pouvez contrôler la hauteur du séparateur à l'aide du curseur « Hauteur ».

Le bloc séparateur peut vous aider à créer un site Web sans encombrement.

Vous pouvez également modifier la largeur et la hauteur d'autres blocs de la même manière, y compris les blocs Vidéo, Titre et Bouton.

Trouvez simplement le bloc Bouton dans la colonne de gauche et faites-le glisser sur votre page.

Ensuite, vous devrez cliquer sur le Bouton pour ouvrir ses paramètres de bloc.

À partir d'ici, passez à l'onglet « Avancé » en haut. Vous pouvez modifier la hauteur du bloc en faisant glisser le curseur « Rembourrage vertical ».

Pour modifier la largeur, faites glisser le curseur « Rembourrage horizontal » dans la colonne de gauche.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer ».

Nous espérons que cet article vous a aidé à apprendre comment modifier la largeur et la hauteur des blocs dans WordPress. Vous voudrez peut-être également consulter notre article sur comment ajouter et aligner des images dans l'éditeur de blocs WordPress et nos meilleures sélections pour les meilleurs thèmes WordPress compatibles Gutenberg.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.