Superposer dans Elementor : Sections, colonnes et widgets

Superposer dans Elementor permet de créer des designs de pages inovants. 

Elementor permet de superposer deux éléments, des sections ou colonnes ou widgets, l’un sur l’autre.

Voici un exemple ici de superposition de deux colonnes Elementor : 

superposer dans Elementor

Ou ici une superposition avec Elementor d’un Widgets Titre et d’une colonne avec une image de fond : 

supersposition de colonnes index z

Superposer dans Elementor permet donc de donner un design très professionnel à vos pages.

Voyons comment créer des superpositions sur vos pages Elementor.

Créer deux colonnes à superposer avec Elementor

Pour créer un effet de superposition dans Elementor, la première étape est de créer deux colonnes et de placer à l’intérieur les éléments et le fond de la colonne.

Ici par exemple la superposition Elementor se fait avec deux colonnes.

Celle de gauche a une image d’arrière plan.

Celle de droite une icone, un titre et un widget de texte.

superposition colonne elementor

Une fois vos deux éléments placés sur votre page, vous allez pouvoir commencer à les superposer dans Elementor :

Appliquer des marges externes négatives pour superposer les deux colonnes Elementor

Ensuite il suffit de cliquer sur une des colonnes et d’appliquer des marges externes négatives du côté de la seconde colonne. 

On clique sur la seconde colonne

Onglet Avancé > Marges Externes > Marges de gauche

On utilise les flèches pour aller en dessous de zéro et on met une marge négative.

La seconde colonne de droite dans l’exemple va alors recouvrir la première.  

superposition colonne elementor

Nous allons voir plus bas comment définir quel élément passe au dessus de l’autre lorsque l’on superpose dans Elementor.

Puis on règle les marges externes du haut et du bas pour diminuer la taille d’une colonne par rapport à l’autre (Ceci uniquement pour l’esthetisme)

superposition colonne elementor

On va maintenant pouvoir définir quel élément est ce que l’on souhaite afficher au dessus de l’autre dans le cas d’une superposition avec Elementor.

Utiliser l’index-Z d’Elementor pour déterminer l’élément à mettre au premier plan

Pour superposer dans Elementor, on va utiliser l’index-z.

L’index-Z est tout simplement la position d’un élément d’Elementor (Widget, colonne ou section) sur l’axe Z c’est à dire la profondeur. 

Plus l’index-Z d’un élément est élevé et plus il apparaît au premier plan. 

L’index-Z dans Elementor va permettre de déterminer quel Element doit être affiché au premier plan et lequel doit être affiché en dessous. 

 

Pour modifier l’index-Z d’un élément et donc les plans sur la page, il faut cliquer sur l’élément et :

Dans l’onglet Avancé > Index-Z, indiquer la position sur le plan-Z (la profondeur) :

superposition colonne elementor

Un index-Z de 1 signifie que l’élément est sur le plan le plus au fond (donc l’arrière-plan). 

Un index-Z de 2 signifie que l’élément se situe juste au-dessus de l’arrière-plan. 

Et ainsi de suite. 

superposer dans Elementor

En utilisant les marges négatives et l’index-Z dans Elementor il est donc possible de superposer dans Elementor des éléments et de créer des designs innovants.

Partagez le hub Elementor :