Utilisation des nouvelles options de hauteur et de largeur de Divi pour créer un design réactif

Bien qu'elles ne soient généralement pas la première chose que les visiteurs remarquent à propos de votre site Web, les propriétés CSS de largeur et de hauteur aident à garder votre site Web ensemble et à l'apparence impressionnante. Et maintenant, avec les nouvelles options de dimensionnement déplaçables de Divi, vous pouvez littéralement contrôler la largeur, la largeur maximale, la hauteur minimale, la hauteur et la hauteur maximale de chaque élément à l'intérieur du constructeur lui-même. Cela vous donne la liberté de créer des sites Web très réactifs sur différentes tailles d'écran.

Maintenant, tout cela semble bien, mais comment cela se traduit-il en un beau site Web, en pratique ? C'est exactement ce dont nous allons parler dans cet article. Nous commencerons par expliquer la différence entre toutes les propriétés de hauteur et de largeur disponibles dans les paramètres de Divi, puis les utiliserons dans différents scénarios pour que nos conceptions de page se comportent exactement comme nous le souhaitons.

Allons-y !

Abonnez-vous à notre chaîne Youtube

Comprendre la différence entre les propriétés

Avant d'utiliser la largeur et la largeur maximale dans nos processus de conception quotidiens, il est important de comprendre ce qu'ils font. Voici l'explication théorique :

Largeur – La largeur réelle d'un élément de conception. S'il s'agit de 100 %, il est aussi large que le conteneur le permet. La largeur est généralement exprimée en %. Plus le pourcentage de largeur est faible, plus l'élément de conception sera étroit.

Largeur maximale – La largeur maximale a le pouvoir sur la largeur. Si la largeur d'un module est définie sur 100 %, il adhérera à cette valeur tant qu'elle restera en dessous de la valeur de largeur maximale. Une fois la valeur de largeur maximale atteinte, elle ne la dépassera pas.

Mais comment cela se traduit-il en responsive design ? Pour aider à expliquer la différence, nous allons créer une comparaison visuelle en activant Visual Builder sur une toute nouvelle page. Nous allons ajouter une section avec une ligne à une colonne. Ensuite, insérez un module de texte avec du contenu, une couleur d'arrière-plan et un rembourrage personnalisé.

Modification de la largeur

Lorsque vous modifiez la largeur du module de texte à 80 %, vous verrez la taille du module de texte diminuer. Une possibilité d'aligner le module comme vous le souhaitez apparaît également.

Modification de la largeur maximale

Lorsque vous modifiez la largeur maximale, la valeur attribuée ne commencera à s'appliquer qu'à partir du moment où la largeur réelle dépasse la valeur de largeur maximale. Démontrons cela très rapidement :

Non dépassé

Dépassé

Outre la largeur et la largeur maximale, vous pourrez également trouver la hauteur minimale, la hauteur et la hauteur maximale dans les paramètres de dimensionnement de chaque élément. Voici ce que vous pouvez théoriquement comprendre à partir de ces termes :

Hauteur minimale – La hauteur minimale que vous souhaitez attribuer à un élément. Si cette valeur est supérieure à l'entrée de hauteur, l'entrée de hauteur minimale dominera.

Hauteur – Ceci définit la hauteur réelle que vous souhaitez attribuer à l'élément.

Hauteur maximale – Cette valeur devient la nouvelle hauteur une fois que la hauteur dépasse la valeur qui a été attribuée à la hauteur.

Modification de la hauteur minimale

Si vous modifiez la hauteur minimale d'un élément, cette valeur devient la norme. Lors du test, vous verrez automatiquement la hauteur du module de texte changer en temps réel.

Modification de la hauteur

Si vous combinez une hauteur minimale et une hauteur, vous devrez vous assurer que la hauteur est supérieure à la hauteur minimale. Sinon, la hauteur sera ignorée. Dans les deux GIF ci-dessous, vous pourrez voir la différence en temps réel.

Ne dépasse pas

Dépasse

Modification de la hauteur maximale

La hauteur max prend le dessus si elle dépasse la hauteur min mais est inférieure à la hauteur. Si, par exemple, vous affectiez une valeur plus élevée à la hauteur minimale qu'à la hauteur maximale, la hauteur minimale dominerait.

Modification de la largeur maximale des lignes

L'une des meilleures pratiques en matière de conception de sites Web consiste à décider d'une largeur maximale particulière pour l'ensemble de votre site Web. Cela permet à tout de rester réactif sur différentes tailles d'écran. Il aide également les concepteurs à créer des wireframes précis.

Modification de la largeur maximale globale

Vous savez peut-être ou non que vous pouvez définir une certaine largeur maximale par défaut pour votre contenu dans le personnalisateur de thème en accédant aux paramètres généraux et en continuant vers les paramètres de mise en page. Garder la largeur maximale persistante aide à renforcer la réactivité.

Modifier la largeur maximale d'une ligne en particulier

Avec la nouvelle mise à jour de dimensionnement déplaçable, vous avez également la possibilité de définir individuellement une largeur maximale pour les lignes. C'est idéal pour les exceptions où il est plus logique d'utiliser une largeur maximale plus élevée.

Donner aux modules la même hauteur

Une autre technique que vous devez garder à l'esprit consiste à donner à des éléments similaires la même hauteur. Ceci est esthétiquement agréable à l'œil et aide les visiteurs à rechercher facilement du contenu. Il y a deux manières courantes d'aborder cela :

Utilisation de l'égaliseur de colonne

La première méthode est celle qui existe depuis longtemps avec Divi. Si vous souhaitez créer la même hauteur pour chacune des colonnes de votre ligne, vous pouvez activer l'égaliseur de colonne dans les paramètres de dimensionnement de votre ligne. Si vous utilisez des couleurs d'arrière-plan de colonne, vous remarquerez rapidement la différence.

Attribution d'une hauteur à chaque module

Une autre façon de l'aborder est d'attribuer une hauteur prédéfinie aux modules que vous ajoutez.

Aligner le contenu dans un module

Une fois que vous avez attribué une hauteur à tous les modules, vous pouvez également jouer avec l'alignement du contenu. Pour ce faire, vous pouvez soit utiliser un remplissage personnalisé pour déterminer manuellement l'espace blanc dans un module, soit utiliser quelques lignes de code CSS pour aligner automatiquement le contenu.

display: flex;
flex-wrap: wrap;
align-content: center;

Choisir la hauteur ou la largeur de l'élément de conception et transformer le débordement en défilement

Une autre chose intéressante que vous pouvez faire avec les nouvelles options de dimensionnement déplaçables consiste à transformer le débordement en défilement. Cela vous aidera facilement à économiser de l'espace sur vos pages et à ajouter une interaction supplémentaire. Il y a deux étapes à cela ; définir une hauteur pour votre élément et modifier le débordement dans les paramètres de visibilité. Commencez par changer la hauteur de votre élément.

Ensuite, allez dans les paramètres de visibilité de votre élément et changez le débordement vertical en scroll.

Création d'une section de héros en plein écran sur toutes les tailles d'écran

Passons au prochain et dernier conseil ! Vous voulez créer une section de héros en plein écran ? Ouvrez la section héros sur votre page, accédez aux paramètres de dimensionnement et modifiez la hauteur. Il est important que vous utilisiez l'unité de fenêtre de hauteur pour vous assurer que tout reste réactif sur toutes les tailles d'écran.

• Hauteur: 100vh

Vous voulez aligner de manière centralisée le contenu de votre section héros en plein écran ? Ajoutez également les lignes de code CSS personnalisées suivantes à l'élément principal de votre section :

display: flex;
flex-wrap: wrap;
align-content: center;

Dernières pensées

Dans cet article, nous avons passé en revue les nouvelles options de largeur et de hauteur fournies avec la mise à jour de la taille déplaçable de Divi. Nous vous avons montré comment ils fonctionnent et comment vous pouvez les utiliser pour créer une conception de page réactive pour tout type de site Web que vous créez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.