Sådan tilføjer du en hover-effekt i divi builder

Wordpress

Der er mange måder at få en webside på dit website til at se mere attraktiv ud på. En af dem er, at du kan tilføje en hover-effekt til et bestemt element på siden. Hvis du har et WordPress-baseret websted, der er bygget med Divi Builder , kan du uden besvær tilføje en hover-effekt til et element på din side. Hvad er Divi Builder forresten?

Hvis du ikke har kendt til Divi Builder. Det er et side builder-plugin til WordPress ligesom Elementor (Elementor er den mest populære WordPress-side builder). Det kommer også med en visuel editor for at gøre det lettere for dig at oprette siden. Divi Builder kommer med nogle indbyggede funktioner til at tilføje animationseffekter, herunder dem, du kan tilføje, når en besøgende svæver på et bestemt element på din side. Tag et kig på screencastet nedenfor.

Overstående hover-effekter er oprettet med Divi Builder. Divi Builder selv gør brug af CSS-transformation til funktionen hover-effekt. Så teknisk set implementerer du CSS-transformation på din side, når du tilføjer en hover-effekt til et bestemt element i Divi Builder.

I Divi Builder falder designelementet ind i tre typer: sektion, række og modul. Du kan tilføje en hover-effekt til disse tre elementtyper. I dette eksempel vil vi vise dig, hvordan du tilføjer en hover til et billedmodul (som du kan se på screencastet ovenfor).

Sådan tilføjer du en hover-effekt i Divi Builder

Først skal du forberede et afsnit samt en række på lærredsområdet i Divi Builder. For at gøre dette skal du klikke på den blå plusknap for at tilføje et nyt afsnit (du kan tilføje et almindeligt afsnit til dette eksempel). Indsæt en række, og vælg kolonnestrukturen i henhold til dit behov. I dette eksempel vælger vi strukturen med tre kolonner.

Når rækken er tilføjet, skal du klikke på det grå plusikon på en af kolonnerne for at tilføje et modul. Da vi ønsker at tilføje hover-effekten til billedet, skal du vælge Image for at tilføje Image-modulet.

Panelet med indstillinger for Image-modulet vises lige efter, at du har tilføjet Image-modulet. For at tilføje et billede kan du klikke på billedholderen på blokken Billede under fanen Indhold .

Når billedet er tilføjet, skal du gå til fanen Design og åbne blokken Transform . På blokken Transform skal du klikke på cursor-ikonet og derefter klikke på fanen hover (som også er repræsenteret med et cursor-ikon).

Vælg en transformationstype, du vil tilføje, ved at klikke på en af de tilgængelige faner, og brug musen til at indstille værdien. Eller du kan også indstille transformationsværdien manuelt ved at skrive din foretrukne værdi.

Det er det hele. Du kan anvende ændringerne ved at klikke på det grønne tjeklisteikon i det nederste højre hjørne af indstillingspanelet.

For at gøre din side mere attraktiv kan du også vise et andet billede ved hover. Du kan disse artikel for at lære mere.

Du kan gå igennem samme rute for at tilføje en hover-effekt til et afsnit og en række. Først skal du åbne indstillingspanelet og derefter gå til fanen Design . På fanen Design kan du åbne blokken Transform . Du kan indstille hover-effekten på denne blok, som vi lige har gennemgået ovenfor.

YouTube video: Sådan tilføjer du en hover-effekt i Divi Builder


Rate article