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 :
Ou ici une superposition avec Elementor d’un Widgets Titre et d’une colonne avec une image de fond :
Superposer dans Elementor permet donc de donner un design très professionnel à vos pages.
Voyons comment créer des superpositions sur vos pages Elementor.
Sommaire
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.
Dans notre 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.
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.
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’esthétisme).
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) :
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.
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.
