Wat nu als je tekst over een plaatje wilt zetten, maar niet meteen zichtbaar. De tekst moet pas tevoorschijn komen als je er met de muis overheen gaat. Of op mobiel, als je erop klikt.
Welnu, dit kun je met slechts 1 Divi module voor elkaar krijgen zonder extra css code. Hiernaast (hieronder op mobiel) zie je het voorbeeld dat ik ga uitleggen in deze Divi Tip.
Voor dit voorbeeld heb ik de ‘Oproep tot actie’ module gebruikt.
In de basis zie je alleen de achtergrondafbeelding en bij hover (als je met de muis eroverheen beweegt) verschijnen titel, tekst, knop en een achtergrondkleur.
De hover functie
Bij instellingen zie je bijna altijd dit pijltje staan. Als je daarop klikt kun je verschillen aangeven tussen de basisvorm en de hovervorm, dus als je eroverheen beweegt met de muis.
De titel
In mijn voorbeeld is de titel alleen zichtbaar bij hover.
In de basis, bij de ‘Desktop’ tab, vul je dus niks in.
Ik kan me voorstellen dat je in de basis wel de titel wilt tonen. Dan vul je de titel in zonder hover opties.
In de hoverstand, bij de ‘Dekking’ tab, vul je een titel in.
De knop
Voor de knop doe je hetzelfde.
In de basis, bij de ‘Desktop’ tab, vul je dus niks in. En in de hoverstand, bij de ‘Dekking’ tab, vul je een knoptekst in.
De body tekst
Voor de tekst doe je hetzelfde.
In de basis, bij de ‘Desktop’ tab, vul je dus niks in. En in de hoverstand, bij de ‘Dekking’ tab, vul je een tekst in.
De link
Je kunt alleen laten klikken op de knop, maar ik heb de gehele module klikbaar gemaakt.
Vul de hyperlinks in waar je je bezoeker naartoe wilt sturen.
De achtergrond
In de basis, bij de ‘Desktop’ tab, kies je een afbeelding. En in de hoverstand, bij de ‘Dekking’ tab, kies je een achtergrondkleur.
De transformatie
In mijn voorbeeld zie je dat het hele blokje wat groter wordt bij hoveren. Die instelling vind je onder Ontwerp – Transformeren.
In de basis, bij de ‘Desktop’ tab, verander je niks.
En in de hoverstand, bij de ‘Dekking’ tab, stel je een vertgroting van 5% in.
Hoogte instellen
Tot slot stel je de algemene hoogte in van de call-to-action module. Als je dat niet doet dan verspringt het plaatje van klein naar groot.
De hoogte is afhankelijk van je afbeelding en de hoeveelheid tekst die je wilt plaatsen.
Controleer ook voor mobiel en tablets!
