Divi Overlays

door | Handleidingen

Stap 1- Maak een Overlay

Ga naar Divi Overlays > Add New; geef een titel (deze is voor interne herkenning)
Kies Divi Builder.
We kunnen een nieuwe maken of een voorbeeld importeren als (.json)
Om te importeren kies je dit icoontje in de Divi Builder.  
Klik import en selecteer je layout (zit in Dropbox)

Aanpassen in Divi.
Tip, maak eerst de basis, ga dan met de “Trigger” verder. Daarna kan je beter zien wat je nog wilt veranderen.
Kies alvast je achtergrondkleur:CopyPaste je huisstijl kleur of gewenst kleur (#eeeeee) of als je een transparanter tint hebt deze code: rgba (rgba(0,0,0,0.86) of gebruik de selector. Onderin kan je ook transparant instellen.

Font Color : Alleen als je niet met de Divi builder werkt. Anders negeren.
Nu kun je de animatie kiezen.


Stap 2- Trigger

Optie 1: Klik trigger
Deze geeft de overlay op een pagina als iemand ergens op klikt.

Optie 2: Automatische trigger
Bijvoorbeeld na een bepaalde tijd, of na % scrollen op een pagina.
Of exit intent: als iemand je pagina wil sluiten!

Tekst link voorbeeld:

<a id=“overlay_unique_id_940” href=“#open-overlay”>Your Link Text Here</a>

Vervang 940 met jouw unique ID in de CSS ID in je Overlays screen.
Vervang TEXT Here door je link tekst.

CopyPaste je link in een Divi module en gebruik dan de “Text” tab. Je kunt ook de code module gebruiken.

Voorbeeld 2:

Maak een knop voor je overlay met de  knopmodule.
In de knopmodule plak je de Unique ID van je overlay bij CSS id.

Fanny Veldmeijer-van Doorn

Fanny Veldmeijer-van Doorn

❥ Divi lover - WordPressCoach

Over Fanny

Ken je de kreet? Als je gaat doen wat je écht leuk vindt, hoef je nooit meer te werken. Wij maken lange dagen maar nog altijd met veel plezier. Fantastisch om te zien hoe de leukste klanten met perfect passende websites online zichtbaar worden.