Hur man lägger till en hover-effekt i divi builder

Wordpress

Det finns många sätt att göra en webbsida på din webbplats mer attraktiv. Ett av dem är att du kan lägga till en hover-effekt till ett visst element på sidan. Om du har en WordPress-baserad webbplats som är byggd med Divi Builder kan du enkelt lägga till en hover-effekt till ett element på din sida. Vad är Divi Builder förresten?

Ifall du inte känner till Divi Builder. Det är ett plugin för sidbyggare för WordPress precis som Elementor (Elementor är den mest populära sidbyggaren för WordPress). Det kommer också med en visuell redigerare för att göra det lättare för dig att skapa sidan. Divi Builder har några inbyggda funktioner för att lägga till animationseffekter, bland annat de som du kan lägga till när en besökare hoverar på ett visst element på din sida. Ta en titt på screencasten nedan.

Hovereffekterna ovan är skapade med Divi Builder. Divi Builder själv använder sig av CSS-transformation för funktionen för hover-effekter. Så tekniskt sett, när du lägger till en hover-effekt till ett visst element i Divi Builder, implementerar du CSS-transform till din sida.

I Divi Builder kan designelement delas in i tre typer: sektion, rad och modul. Du kan lägga till en hover-effekt till dessa tre elementtyper. I det här exemplet visar vi dig hur du lägger till en hover till en bildmodul (som du kan se i screencasten ovan).

Hur du lägger till en hover-effekt i Divi Builder

Först måste du förbereda en sektion samt en rad på canvasområdet i Divi Builder. För att göra det klickar du på den blå plusknappen för att lägga till ett nytt avsnitt (du kan lägga till ett vanligt avsnitt för det här exemplet). Lägg in en rad och välj kolumnstruktur enligt ditt behov. I det här exemplet väljer vi strukturen med tre kolumner.

När raden har lagts till klickar du på den grå plusikonen på en av kolumnerna för att lägga till en modul. Eftersom vi vill lägga till hover-effekten till bilden väljer vi Bild för att lägga till bildmodulen.

Inställningspanelen för bildmodulen visas direkt efter att du lagt till bildmodulen. För att lägga till en bild kan du klicka på bildhållaren i blocket Image under fliken Content .

När bilden har lagts till går du till fliken Design och öppnar blocket Transform . I blocket Transform klickar du på markörikonen och sedan på fliken hover (som också representeras av en markörikon).

Välj en transformtyp som du vill lägga till genom att klicka på en av de tillgängliga flikarna och använd musen för att ställa in värdet. Du kan också ställa in transformationsvärdet manuellt genom att skriva in önskat värde.

Det är allt. Du kan tillämpa ändringarna genom att klicka på den gröna checklisteikonen i det nedre högra hörnet av inställningspanelen.

För att göra din sida mer attraktiv kan du också visa en annan bild vid hover. Du kan den här artikeln för att lära dig mer.

Du kan gå igenom samma väg för att lägga till en hover-effekt till ett avsnitt och en rad. Öppna först inställningspanelen och gå sedan till fliken Design . På fliken Design kan du öppna blocket Transform . Du kan ställa in hover-effekten på det här blocket som vi just har behandlat ovan.

YouTube video: Hur man lägger till en hover-effekt i Divi Builder


Rate article