Hoe een overlapsectie te maken in Elementor

Rifat E Jan 11, 2023

In Elementor kunnen overlappende elementen ze een onderscheidend, deskundig en modieus uiterlijk geven. Bovendien stelt het je in staat om meer informatie in een compacte ruimte te proppen zonder dat het er steriel of oninteressant uitziet.

Het goede nieuws is dat het gebruik van Elementor het net zo eenvoudig maakt als het wordt om afbeeldingen, tekst en andere elementen te overlappen. In de tutorial van vandaag laten we je zien hoe je een overlappende sectie maakt in Elementor.

Maak overlappende Elementor-secties

Ga naar pagina's op uw dashboard en start een willekeurige pagina met Elementor. Selecteer vervolgens Bewerken met Elementor.

Stel Pagina-indeling in op Elementor Canvas onder Pagina-instellingen zodra uw pagina is geladen. druk vervolgens op het plusteken (+) om een ​​nieuwe sectie met een enkele kolom toe te voegen.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Voeg in je nieuwe sectie een widget toe; klik op het widget’s-pictogram en typ in de zoekopdracht divider om de divider-widget te krijgen, sleep deze naar uw sectie.

Stel Hoogte in op Min. Hoogte van 400 pixels in het venster Sectie bewerken aan de rechterkant nadat u de sectie hebt geselecteerd. Geef het vervolgens een achtergrondkleur onder Stijl (mijn keuze is rood). Geef de scheidingslijn een witte achtergrond onder Stijl na het kiezen van de scheidingslijn.

Selecteer nu de sectie en dupliceer deze.

Style nu het kloongedeelte apart dan het vorige en geef het een andere achtergrondkleur.

De volgende stap is om je twee delen te laten overlappen zodra je ze hebt.

Ik zal beginnen met te demonstreren hoe de blauwe en rode secties moeten worden gestapeld.

Hiervoor heeft u de Elementor Navigator nodig. Het navigatiesymbool bevindt zich aan de linkerkant, bijna onderaan uw bewerkingssectie.

Uw navigator verschijnt wanneer u op het navigatiepictogram klikt. U hebt snel toegang tot uw secties met de navigator, die ook helpt bij het navigeren erdoorheen. Bovendien wordt een gedeelte verborgen wanneer u op het "oog" ernaast klikt.

Selecteer het blauwe gedeelte, kies Geavanceerd in het menu Sectie bewerken aan de linkerkant en geef het onder Marges een bovenmarge van -100 pixels. Dit brengt het blauwe gedeelte in (bovenop) het eerste gedeelte.

Kies het rode gedeelte, kies Geavanceerd, selecteer Z-index en pas het aan naar 10 om in plaats daarvan het rode gedeelte boven het blauwe gedeelte te laten verschijnen. Hierdoor wordt het rode gedeelte automatisch over het blauwe gedeelte gepositioneerd.

In eerste instantie is het blauwe gedeelte groter dan het rode omdat dit voorrang krijgt. Als het blauwe gedeelte een Z-index van 1 heeft, staat het bovenaan als het rode gedeelte een Z-index van 0 heeft. In wezen schuift het gedeelte met de hogere Z-index automatisch boven de onderste.

Stel je voor dat je meer secties hebt dan slechts twee.

U moet nog een sectie maken om te zien hoe dit werkt.

Kies het blauwe gedeelte en dupliceer het. Kies vervolgens de gekloonde sectie en stel de Z-index en Marges in op 0 pixels onder Geavanceerd. U kunt de kleur ervan wijzigen onder Stijl.

Overlap Sections in Elementor

U zou bijvoorbeeld het blauwe gedeelte een Z-index moeten geven die hoger is dan zowel het rode als het groene gedeelte als u wilt dat het bovenaan beide secties staat.

Het groene gebied en het rode gebied hebben bijvoorbeeld beide een Z-index van 1. (standaard). Besluit om het blauwe gedeelte een Z-index van 3 te geven en kies het dan.

Selecteer het groene gedeelte en geef het een marge van -20 onder Geavanceerd zodat het naar het bovenste gedeelte kan gaan om deze wijziging duidelijk te zien. Het blauwe gedeelte is dan zichtbaar boven beide gebieden.

Overlap Sections in Elementor with Z index

Zelfs in responsieve instellingen werkt dit overlappende effect. U kunt bijvoorbeeld het mobiele apparaat selecteren in het menu Responsieve modus en besluiten om de Z-index te verhogen van het onderdeel dat u als eerste wilt zien.

Afsluiten

In Elementor kunt u dat doen om gebieden te overlappen, en de overlap werkt zelfs op verschillende apparaten.

Gebruik het onderstaande gedeelte voor opmerkingen of vragen. Verspreid het ook onder uw kennissen en blijf CodeWatchers volgen.

Divi WordPress Theme