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 ?

Bien que l'éditeur de blocs WordPress block editor facilite l'ajout de contenu, les tailles de blocs par défaut ne correspondent pas toujours au design que vous avez en tête. Ajuster la hauteur et la largeur d'un bloc est un moyen simple d'avoir plus de contrôle sur l'apparence de votre page.

Voici quelques raisons clés pour lesquelles vous pourriez vouloir modifier la taille d'un bloc :

• Améliorer la mise en page visuelle : Vous pouvez créer des designs plus équilibrés et professionnels en contrôlant la taille exacte de vos éléments.
• Améliorer la lisibilité : Ajuster la largeur des blocs de texte peut rendre votre contenu plus facile à lire, surtout sur les grands écrans.
• Assurer la réactivité : La bonne taille des blocs aide votre contenu à être superbe sur tous les appareils, des ordinateurs de bureau aux téléphones mobiles.
• Créer de l'emphase : Agrandir ou réduire un bloc peut attirer l'attention sur des appels à l'action importants ou des informations clés.

Comprendre le dimensionnement des blocs WordPress

Avant de plonger dans les méthodes, il est utile de comprendre les différentes façons dont WordPress vous permet de définir les dimensions des blocs :

Terme	Ce que cela signifie	Quand l'utiliser
Pixels (px)	Une unité de taille fixe qui ne change pas en fonction de la taille de l'écran.	Utilisez les pixels lorsque vous voulez que quelque chose reste exactement de la même taille partout.
Pourcentages (%)	Une unité flexible qui s'ajuste en fonction du conteneur parent.	Utilisez les pourcentages pour que votre mise en page soit belle sur toutes les tailles d'écran.
Largeur étendue	Un alignement WordPress qui rend un bloc plus large que la zone de contenu, mais pas plein écran.	Utilisez ceci pour faire ressortir des sections sans qu'elles s'étendent sur toute la page.
Pleine largeur	Un alignement WordPress qui étend un bloc d'un bord à l'autre de l'écran.	Essayez ceci pour les sections principales, les bannières ou les grandes images d'arrière-plan.
Hauteur minimale	Définit la hauteur la plus petite qu'un bloc puisse avoir, mais lui permet de grandir si nécessaire.	Optez pour ceci lorsque vous souhaitez que les sections (comme les blocs de couverture) conservent une hauteur constante.

Voyons maintenant comment vous pouvez facilement changer la hauteur et la largeur des blocs dans WordPress.

Nous couvrirons 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.

Bien que WordPress n'offre pas les mêmes options de redimensionnement pour chaque bloc, l'éditeur de blocs fournit plusieurs moyens puissants pour ajuster la hauteur et la largeur de divers blocs.

Commençons par le bloc Image dans WordPress.

Pour un bloc d'image, vous pouvez ajuster sa largeur en utilisant les options d'alignement. Cliquez sur le bouton « Aligner » dans la barre d'outils au-dessus du bloc.

Choisir « Largeur étendue » rendra l'image occupant la majeure partie de votre zone de contenu, tandis que « Pleine largeur » l'étendra sur toute la page.

Vous pouvez également ajuster la taille d'affichage de l'image en allant dans le panneau « Paramètres du bloc » à droite.

Dans la section « Paramètres », utilisez le menu déroulant « Taille de l'image » pour choisir parmi des options prédéfinies comme Miniature, Moyenne, Grande ou Taille réelle.

Cela modifiera les dimensions de l’image pour correspondre au préréglage sélectionné.

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 largeur du bloc à l'aide du bloc Colonnes

Si le bloc que vous souhaitez redimensionner n'a pas de contrôles de taille intégrés, comme le bloc Paragraphe, alors cette méthode est pour vous. Elle agit comme une solution de contournement en plaçant votre bloc à l'intérieur d'un conteneur que vous pouvez contrôler.

Pour cette méthode, nous placerons notre bloc à l’intérieur du bloc Colonnes. C’est un conteneur où vous pouvez ajouter différents blocs dans chaque colonne.

Ensuite, vous pouvez principalement contrôler la largeur des blocs à l’intérieur en ajustant la largeur des colonnes. La hauteur de la colonne s’ajustera automatiquement pour s’adapter à son contenu.

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 contrôler sa largeur en ajustant la colonne dans laquelle il se trouve.

Sélectionnez simplement la colonne, et dans le panneau des paramètres du bloc à droite, vous pouvez modifier la largeur de la colonne dans la section « Paramètres ». Cela redimensionnera le bloc qu'elle contient.

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

Le bloc Groupe est excellent pour organiser plusieurs blocs et gérer leur mise en page et leur espacement. Bien qu’il ne définisse pas directement la hauteur et la largeur des blocs individuels qu’il contient, vous pouvez contrôler les dimensions globales du groupe et la manière dont son contenu est agencé.

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 l’aurez ajouté, le bloc Groupe proposera des options de mise en page telles que « Groupe », « Ligne » ou « Pile ». Pour ce tutoriel, nous utiliserons la mise en page « Groupe » par défaut.

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.

L’ajustement de ces paramètres de mise en page influencera la manière dont les blocs sont agencés et l’espace qu’ils occupent dans le groupe. 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 et définir une hauteur minimale spécifique pour une section. C'est idéal pour créer des bannières pleine largeur ou des images principales avec du texte et d'autres contenus par-dessus.

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 multimédia 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 l'utilisation du bloc Couverture, vous voudrez peut-être consulter notre guide pour débutants sur Image de couverture vs. 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 des pages magnifiques et 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'ensemble de leur site Web, et leurs utilisateurs ont adoré le look frais et moderne. Pour en savoir plus, consultez notre avis sur SeedProd.

Étape 1 : Installer et activer 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.

Étape 2 : Créer une nouvelle page de destination

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.

Étape 3 : Redimensionner les dimensions du bloc Image

Cela lancera le constructeur de pages 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 affiner l’espacement autour et à l’intérieur du bloc image en passant à l’onglet « Avancé » en haut du panneau des paramètres.

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

Ici, vous pouvez ajouter des valeurs pour ajuster la marge (espace à l’extérieur du bloc) et le remplissage (espace à l’intérieur du bloc) 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.

Étape 4 : Ajuster la hauteur du bloc Espaceur

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.

Étape 5 : Configurer le remplissage du bloc Bouton

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 augmenter la taille verticale du bouton en faisant glisser le curseur « Remplissage vertical », ce qui ajoute de l’espace au-dessus et au-dessous du texte du bouton.

Pour augmenter sa taille horizontale, faites glisser le curseur « Remplissage horizontal », ajoutant de l’espace à gauche et à droite du texte.

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

Questions fréquemment posées sur le changement de la largeur et de la hauteur des blocs

Voici quelques questions que nos lecteurs nous ont fréquemment posées sur la modification de la largeur et de la hauteur des blocs dans WordPress :

Comment réduire la taille d’un bloc dans WordPress ?

Vous pouvez réduire la taille d’un bloc dans WordPress en ajustant sa largeur, son remplissage ou la taille de la police dans les paramètres du bloc. Commencez par sélectionner le bloc et en diminuant les dimensions ou l’espacement jusqu’à ce que le résultat vous convienne.

Comment redimensionner un bloc de texte dans WordPress ?

Vous pouvez redimensionner un bloc de texte dans WordPress en changeant la taille de la police dans les paramètres de typographie. Vous pouvez également ajuster la hauteur de ligne ou l’espacement si le texte semble toujours trop grand.

Comment ajuster l’espacement des blocs dans WordPress ?

Vous pouvez ajuster l’espacement des blocs dans WordPress en modifiant les paramètres de marge et de remplissage. Nous vous recommandons de réduire d’abord le remplissage s’il y a trop d’espace à l’intérieur du bloc.

Comment redimensionner une page Web dans WordPress ?

Vous pouvez redimensionner une page Web dans WordPress en modifiant les paramètres de mise en page de votre thème ou de votre constructeur de pages. Vous pouvez essayer de basculer entre les mises en page en boîte et pleine largeur en fonction du design que vous souhaitez.

Comment réduire la taille d’un site Web dans WordPress ?

Vous pouvez réduire la taille d'un site Web dans WordPress en diminuant la taille des polices, l'espacement et la largeur des conteneurs. Commencez par apporter de petits ajustements à différents éléments au lieu de tout changer d'un coup.

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

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.