Dans Elementor , les éléments qui se chevauchent peuvent leur donner une apparence distinctive, experte et à la mode. De plus, il vous permet d'entasser plus d'informations dans un espace compact sans qu'elles paraissent stériles ou inintéressantes.

La bonne nouvelle est que l'utilisation d' Elementor simplifie le chevauchement d'images, de texte et d'autres éléments. Nous allons vous montrer comment créer une section superposée dans Elementor dans le didacticiel d'aujourd'hui.

Créer des sections d'élément qui se chevauchent

Accédez aux pages de votre tableau de bord et lancez n'importe quelle page à l'aide d'Elementor. Sélectionnez ensuite Modifier avec Elementor.

Définissez la mise en page sur Elementor Canvas sous Paramètres de la page une fois votre page chargée. puis appuyez sur le signe plus (+) pour ajouter une nouvelle section avec une seule colonne.

Dans votre nouvelle section, ajoutez un widget; cliquez sur l'icône widget’s et dans la recherche, tapez diviseur pour obtenir le widget diviseur, faites-le glisser dans votre section.

Définissez Hauteur sur Hauteur minimale de 400 pixels dans la fenêtre Modifier la section à droite après avoir sélectionné la section. Donnez-lui une couleur de fond sous Style (mon choix est rouge). Donnez au séparateur un fond blanc sous Style après avoir choisi le séparateur.

Sélectionnez maintenant la section et dupliquez-la.

Maintenant, stylisez la section clone séparément de la précédente et donnez-lui une couleur d'arrière-plan différente.

L'étape suivante consiste à superposer vos deux parties une fois que vous les avez.

Je vais commencer par montrer comment empiler les sections bleues et rouges.

Vous aurez besoin du navigateur Elementor pour cela. Le symbole de navigation se trouve à gauche, près du bas de votre section d'édition.

Votre navigateur apparaît lorsque vous cliquez sur l'icône de navigation. Vous pouvez accéder rapidement à vos sections avec le navigateur, qui facilite également la navigation à travers celles-ci. De plus, une partie est masquée lorsque vous cliquez sur "l'œil" à côté.

Sélectionnez la section bleue, choisissez Avancé dans le menu Modifier la section à gauche, puis sous Marges, attribuez-lui une marge supérieure de -100 pixels. Cela amènera la section bleue dans (au-dessus de) la première section.

Choisissez la partie rouge, choisissez Avancé, sélectionnez Z-index et réglez-le sur 10 pour que la section rouge apparaisse au-dessus de la section bleue à la place. En conséquence, la section rouge est automatiquement positionnée sur la section bleue.

Au départ, la partie bleue est plus grande que la rouge car elle est prioritaire. Si la partie bleue a un indice Z de 1, elle est au-dessus si la section rouge a un indice Z de 0. Essentiellement, la partie avec l'indice Z le plus élevé glisse automatiquement au-dessus de la partie inférieure.

Imaginons que vous ayez plus de sections que deux.

Vous devez créer une autre section afin de voir comment cela fonctionne.

Choisissez la section bleue et dupliquez-la. Choisissez ensuite la section clonée et définissez son index Z et ses marges sur 0 pixel sous Avancé. Vous pouvez en changer la couleur sous Style.

Par exemple, vous auriez besoin de donner à la partie bleue un indice Z supérieur aux parties rouge et verte si vous vouliez qu'elle soit au-dessus des deux sections.

Par exemple, la zone verte et la section rouge ont toutes deux un indice Z de 1. (valeur par défaut). Décidez de donner à la section bleue un indice Z de 3, puis choisissez-la.

Sélectionnez la partie verte et donnez-lui une marge de -20 sous Avancé afin qu'elle puisse se déplacer dans la section supérieure pour voir clairement cette modification. La section bleue est alors visible comme étant au-dessus des deux zones.

Même dans des paramètres réactifs, cet effet de chevauchement fonctionne. Par exemple, vous pouvez sélectionner l'appareil mobile dans le menu Mode réactif et décider d'augmenter l'index Z de la partie que vous souhaitez voir en premier.

Emballer

Dans Elementor , vous pouvez le faire pour chevaucher des zones, et le chevauchement fonctionnera même sur différents appareils.

Utilisez la section ci-dessous pour tout commentaire ou question. Faites également passer le mot à vos connaissances et continuez à suivre CodeWatchers.