{"id":207743,"date":"2018-03-09T12:56:35","date_gmt":"2018-03-09T11:56:35","guid":{"rendered":"https:\/\/sopressed.nl\/?p=207743"},"modified":"2018-03-09T12:56:35","modified_gmt":"2018-03-09T11:56:35","slug":"divi-overlays","status":"publish","type":"post","link":"https:\/\/corporate.dividiva.nl\/?p=207743","title":{"rendered":"Divi Overlays"},"content":{"rendered":"

Stap 1- Maak een Overlay<\/span><\/h3>\n

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

Aanpassen in Divi. <\/span>
\n<\/span>Tip, maak eerst de basis, ga dan met de \u201cTrigger\u201d verder. Daarna kan je beter zien wat je nog wilt veranderen.<\/span>
\n<\/span>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. <\/span><\/p>\n

Font Color : Alleen als je niet met de Divi builder werkt. Anders negeren.<\/span><\/i>
\n<\/span><\/i>Nu kun je de animatie kiezen. <\/span><\/p>\n


\n<\/span>Stap 2- Trigger<\/span><\/h2>\n

Optie 1: Klik trigger<\/span>
\n<\/span>Deze geeft de overlay op een pagina als iemand ergens op klikt.<\/span><\/p>\n

Optie 2: Automatische trigger<\/span>
\n<\/span>Bijvoorbeeld na een bepaalde tijd, of na % scrollen op een pagina.<\/span>
\n<\/span>Of exit intent: als iemand je pagina wil sluiten! <\/span><\/p>\n

Tekst link voorbeeld:<\/span><\/p>\n

<<\/span>a<\/b> id=<\/span>“overlay_unique_id_940”<\/span> href=<\/span>“#open-overlay”<\/span>><\/span>Your Link Text Here<\/span><\/<\/span>a<\/b>><\/span><\/p>\n

Vervang 940 met jouw unique ID in de CSS ID in je Overlays screen. <\/span>
\n<\/span>Vervang TEXT Here door je link tekst.<\/span><\/p>\n

CopyPaste je link in een Divi module en gebruik dan de \u201cText\u201d tab. Je kunt ook de code module gebruiken.<\/span><\/p>\n

Voorbeeld 2: <\/span><\/p>\n

Maak een knop voor je overlay met de \u00a0knopmodule.<\/span>
\n<\/span>In de knopmodule plak je de Unique ID van je overlay bij CSS id.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

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. \u00a0 Klik import en selecteer je layout (zit in Dropbox) […]<\/p>\n","protected":false},"author":1,"featured_media":209508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[49],"tags":[55],"class_list":["post-207743","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handleidingen","tag-sopressed-members"],"acf":[],"_links":{"self":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/posts\/207743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=207743"}],"version-history":[{"count":0,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=\/wp\/v2\/posts\/207743\/revisions"}],"wp:attachment":[{"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=207743"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=207743"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/corporate.dividiva.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=207743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}