Librement inspiré de l’article de Nick Roach du 12 avril juin 2019 – Blog Elegantthemes

Aujourd’hui, nous présentons une nouvelle amélioration du Visual Builder qui permet d’ajuster rapidement la largeur, la hauteur, la marge et les espacements de tout module, ligne ou section.

Plutôt que d’avoir à ouvrir leur panneau de paramètres et saisir manuellement leurs dimensions, vous pouvez désormais étirer les éléments directement sur la page et voir le résultat instantanément. C’est rapide, facile et  vous exploitez réellement toute la puissance du Visual Builder de Divi.

Hauteurs et largeurs étirables à la souris

Ajuster les dimensions à la souris a été rendu possible grâce à quelques subtiles améliorations de l’interface. Elles prennent la forme de petites poignées que l’on trouve désormais sur tous les éléments. Faciles à utiliser, elles ne gênent en rien le processus de construction.

Pour ajuster la largeur ou la hauteur de tout module, rangée ou section, posez simplement votre souris sur l’un de ses bords et étirez le dans un sens ou dans l’autre.

Désormais, dans la section Dimensionnement de tous les éléments Divi, vous trouverez de nouveaux paramètres de largeur, hauteur, largeur maximale et hauteur maximale. Ceux-ci sont accompagnés de nouveaux réglages de “débordement horizontal” et “vertical” que l’on trouve sans la section Visibilité (onglet Avancé).  Ces derniers peuvent être utilisés pour déterminer la visibilité du contenu en débord des largeurs ou des hauteurs statiques que vous avez définies. Ces nouvelles options de hauteur et de largeur vous offrent plus de souplesse dans le réglage des dimensions des éléments de votre page et dans la manière dont leur taille change lorsque son contenu interne augmente. Ils vous permettent également de travailler de manière plus réactive et plus intuitive.

Marges et espaces étirables à la souris

Vous pouvez également, en tenant le clic gauche de souris appuyé, ajuster les valeurs de remplissage et de marge supérieure, inférieure, gauche ou droite de chaque module, ligne ou section.

Lorsque vous approchez la souris du bord d’un l’élément, de petites flèches apparaissent. Pour agrandir ou réduire les marges intérieures d’un élément, passez simplement votre souris sur l’un des bords, puis faites glisser la flèche dans un sens ou dans l’autre. Pour ajouter une marge à l’extérieur d’un élément, survolez le bord extérieur et faites glisser la flèche dans le sens désiré.

Vous pouvez même ainsi ajouter une marge négative afin de créer des effets superposés et faire dépasser les éléments de leur colonne.

Nouveaux contrôles de largeur, hauteur et de débordement !

La nouvelle interface permettant l’étirement des largeurs et des hauteurs s’accompagne d’une gamme de nouveaux contrôles que l’on trouve dans les Paramètres de tous les modules, lignes et sections. Vous trouverez plus précisément ces nouvelles options dans les panneaux Style > Dimensionnement ainsi que dans Avancé > Visibilité.
Ces paramètres vous permettent de créer des boîtes  au contenu défilant dans vos pages.

On peut ainsi régler :

  • La taille
  • Hauteur minimale
  • Largeur maximale
  • Largeur minimum
  • Débordement horizontal
  • Débordement vertical

Sortez des cadres avec les marges négatives !

Cette nouvelle interface ne facilite pas seulement la conception de votre page, elle vous permet également plus de créativité grâce aux marges négatives et aux largeurs statiques. Les marges négatives peuvent être utilisées pour libérer les éléments de leurs conteneurs et pour créer des effets de chevauchement amusants. Les largeurs statiques vous permettent également de libérer les éléments de la structure rigide de leur colonne parente.