Sélectionner une page

Les espacements sur Divi

25, Mar 2019

Introduction

L’espacement sur Divi est l’outil de mise en page le plus utilisé pour construire son site internet avec Divi. En effet, il permet de positionner n’importe quel bloc sur la page par rapport aux autres blocs mais aussi par rapport aux bords de l’écran.

Je vous rappelle que ses bords sont des différentes tailles en fonction de la taille de l’écran sur lequel votre visiteur consultera site. Au vue du développement de la consultation des sites sur mobile, je ne saurais trop vous conseiller de bien regarder comment se positionne vos blocs sur une tablette et un mobile.

Les bases de l’espacement

Il est important de noter que ce qui est valable pour l’exemple ci-dessous du module texte est valable également pour les sections et pour les rangées.

Comme vous pouvez le voir sur l’image ci-dessous, l’espacement sur Divi que j’ai appliqué est double : marge externe ou marge et marge interne.

Pour cet exemple j’ai appliqué les marges suivantes :

  • Marges :
    • Sommet : 5%,
    • Bas : 5 %,
    • Gauche : 5%
    • Droite : 5%
  • Marges internes :
    • Sommet : 5%,
    • Bas : 5 %,
    • Gauche : 5%
    • Droite : 5%
Marge noire : marge et marge rouge : marge interne

La marge ou marge externe permet de créer un espace entre un bloc et un autre ou d’un module vis à vis de sa rangée, etc… La marge externe est matérialisée par la bande en noire alors que la marge interne est elle matérialisée par la marge rouge.

Comme vous avez pu le remarquer, j’ai utilisé comme unité de mesure le % alors que par défaut, il s’agit du px (pixels). En effet, je préfère le % car il maintient les proportions quelque soit la taille de l’écran.Comme vous pouvez le voir sur l’image ci-dessous, l’espacement sur Divi que j’ai appliqué est double : marge externe ou marge et marge interne.

Chevaucher 2 blocs

Grâce aux espacements sur Divi, vous pouvez donc faire chevaucher 2 blocs facilement.

Dans l’exemple ci-dessous, j’ai chevauché 2 modules textes. Vous pouvez également le faire avec 2 rangées ou 2 sections.

Comment faire ?

Il suffit de jouer sur les marges externes ou marges qui sont les seules d’ailleurs à appliquer des marges négatives. C’est assez logique que des marges internes ne peuvent pas intégrer des marges négatives. Qui voudrait d’une bordure au milieu d’un texte.

Pour cette exemple j’ai choisi les marges suivante pour le module texte en rouge :

  • Marges : je n’ai rien touché
  • Marges internes : 5%, 5%, 5%, 5% (Sommet, Bas, Gauche & Droite)

Pour le module texte en orange :

  • Marges : -10%, -, 5%, 6 : ce qui veut dire que j’ai mis -10% pour la marge du Sommet pour superposer le module orange sur le module rouge et de 5 % à gauche pour décaler le module orange vers la gauche. Si j’avais voulu le décaler vers la droite, j’aurais insérer une marge négative à gauche.
  • Marges internes : 5%, 5%, 5%, 5% (Sommet, Bas, Gauche & Droite)
Le bloc du bas chevauche le bloc du haut et est décalé sur la gauche

Voici les différentes possibilités pour faire bouger un bloc :

  • vers le haut : marge sommet négative
  • vers le bas : marge sommet positive
  • vers la gauche : marge gauche positive,
  • vers la droite : marge gauche négative.

Le fait de rajouter une marge à droite ne fera que réduire votre bloc, tout comme si ajouter une marge positive en bas.
Par contre si vous ajoutez une marge négative à droite ou en bas, cela va agrandir votre bloc.

Utilisation de la fonction Transform

Transform n’est pas un espacement sur Divi, il permet uniquement de modifier la position de votre bloc. C’est une nouvelle fonctionnalité qui a été introduite par Elegant Themes pour Divi récemment.

2 blocs se chevauchent grâce à la fonction Transform

Pour réaliser la superposition des 2 modules de l’image ci-dessus, j’ai utilisé la fameuse fonction Transform que vous trouverez en cliquant sur le menu du module puis sur Style et Transform. Vous cliquez ensuite sur la croix et vous pouvez utiliser votre souris pour bouger votre module comme vous le souhaitez. Ici j’ai utilisé les coordonnées suivantes :

  • horizontal : -5%
  • vertical : -40%

Facile non ?

Conclusion

Gérer les espacements sur Divi est une étape cruciale pour le positionnement de vos blocs (sections, rangées ou modules). N’oubliez pas tout de même que le rendu sur les différents écrans peut être très différents. Pour ma part, je vous conseille fortement d’utiliser les % en unité plutôt que les px (pixels). Mais c’est à vous de voir.