Hur man skapar flipbox-överlägg och hovringar i WordPress

Vill du lägga till flipbox-överlägg och bild-hover-effekter på din WordPress-webbplats?

Även om du använder ett högkvalitativt WordPress-tema, kan du känna dig begränsad av anpassningsalternativen. I det här fallet kan du använda flipboxar och bild-hover för att lägga till iögonfallande animerade effekter på din webbplats.

I den här artikeln visar vi hur du lägger till flipbox-överlägg och bild-hovers på din WordPress-webbplats.

Vad är en Flipbox?

En flipbox är en ruta som vänder sig när du för muspekaren över den. Du kan lägga till denna hover-effekt till innehåll som bilder och textrutor.

Liksom annat animerat innehåll som GIF:ar och responsiva sliders, kan flipbox-effekten göra det mer interaktivt och engagerande. Du kan till exempel visa ett författarfoto och namn, och sedan använda en flipbox-animation för att visa deras biografi när en läsare för muspekaren över det.

Om du är en WordPress-frilansare kan du visa dina kunders logotyper och sedan använda en flip-animation för att avslöja en länk till varje projekt.

Även om dessa animerade effekter kan förbättra din webbplats användarupplevelse, är det viktigt att inte överdriva. Ett stort antal animationer kan bli överväldigande och förvirrande, och kan till och med påverka din webbplatsens prestanda.

Med det sagt, låt oss titta på hur du kan lägga till flipbox-överlägg och bild-hover-effekter på din WordPress-webbplats.

Hur man skapar flipbox-överlägg och hover-effekter i WordPress

Det finns många olika sätt att lägga till animationer i WordPress, inklusive att använda sidbyggaren SeedProd eller att skriva anpassad kod.

Det bästa sättet att skapa vändlådor och hovringseffekter är dock att använda pluginet Flipbox – Awesomes Flip Boxes Image Overlay. Detta gratis plugin kommer med flera olika vändlådestilar som innehåller en blandning av bilder, text och knappar för uppmaning till handling.

Skapa en ny Flipbox

Det första du behöver göra är att installera och aktivera pluginet Flipbox – Awesomes Flip Boxes Image Overlay. För mer detaljer, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När pluginet är installerat och aktiverat kan du skapa din första flipbox genom att gå till Flip Box » Skapa ny.

Detta visar alla olika mallar du kan använda.

Om du inte vill använda någon av dessa designer, klicka på ‘Import Templates’.

Om du ser en mall du vill använda, klicka på ‘Import’ för att lägga till den i din WordPress-blogg eller webbplats.

Efter att ha valt en design måste du klicka på dess knapp ‘Skapa stil’.

I popup-fönstret som visas, skriv in ett namn för flipbox-designen. Detta är bara för din referens, så du kan använda vad du vill.

Du kan också välja vilken layout du vill använda genom att klicka på antingen 1:a, 2:a eller 3:e.

När det är klart, klicka på 'Spara'.

Lägg till innehåll i din vändlåda

Du kan ändra hur flipboxen ser ut med hjälp av flikarna Allmänt, Fram- och Baksida.

Du kan ändra typsnitt, stoppning och marginaler. De flesta av dessa inställningar är självförklarande, så det är värt att titta igenom dem för att se vilka olika effekter du kan skapa.

När du är nöjd med hur lådan ser ut är det dags att lägga till innehåll. Skrolla helt enkelt till förhandsvisningen av vändlådan längst ner på skärmen och för muspekaren över den.

När den visas, klicka på knappen ‘Redigera’.

För att ändra titeln som visas på framsidan av flipboxen kan du skriva in den i fältet ‘Front Title’.

Efter det kan du ändra frontikonen genom att klicka på fältet ‘Font Icon’ och sedan välja en ny bild från popup-fönstret som visas.

Därefter kan du lägga till en bild på framsidan av flipboxen. Klicka helt enkelt på ‘Ladda upp bild’ och välj sedan en fil från mediebiblioteket eller ladda upp en ny bild från din dator.

Om du inte redan har en bild som du vill använda, kan du skapa en med hjälp av webbdesignprogram som Canva.

När du är nöjd med framsidan av flipboxen är det dags att designa baksidan. För att börja, skriv in innehållet du vill visa i rutan ‘Backend Info’.

Ofta vill du använda en uppmaning till handling för att skicka besökare till en relaterad sida, som listningen för en populär produkt, prisinformation eller något annat innehåll.

För att ändra texten som visas på knappen för uppmaning till handling, skriv helt enkelt i 'Backend Button Text'. Du kan sedan lägga till destinations-URL:en i fältet 'Link'.

Klicka slutligen på ‘Ladda upp nu’ för att ändra bakgrundsbilden.

När du är nöjd med hur baksidan av flipboxen är inställd, är det dags att klicka på 'Submit'.

Förhandsgranskningen kommer nu att uppdateras för att visa alla dina ändringar.

Skapa flera vändlådor

Vid det här laget kanske du vill lägga till fler rutor genom att klicka på ‘+’ i sektionen ‘Add New Flip Boxes’.

Detta gör att du kan skapa flera flipboxar med samma stil och sedan organisera dem i kolumner och rader.

Du kan nu skapa fler flipboxar genom att följa processen som beskrivs ovan.

Till exempel kan du skapa en flipbox för vart och ett av dina prisplaner.

Lägg till vändlådan på din WordPress-webbplats

När du är nöjd med flipboxen kan du lägga till den på din WordPress-webbplats med en kortkod som pluginet automatiskt tillhandahåller.

Till höger på skärmen, kopiera bara värdet i rutan ‘Shortcode’.

Du kan nu lägga till vändlådan på valfri sida, inlägg eller widget-redo område med hjälp av kortkod.

För steg-för-steg-instruktioner om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.

Pluginet har också en flipbox-widget som du kan lägga till i valfritt widget-redo område av ditt WordPress-tema.

Om du har skapat mer än en vändlådeanimation, behöver du känna till ID:t. För att få denna information kan du gå till Vänd låda » Vänd låda och titta i kolumnen ‘ID’.

På följande bild är vändlådans ID 1.

När du har denna information, gå till Utseende » Widgets.

Här behöver du klicka på '+' -knappen.

Du kan nu skriva in ‘Flipbox’.

När rätt widget visas, dra och släpp den bara till sidofältet, sidfoten eller liknande sektion.

Flipbox-widgeten visar en av dina animationer som standard.

För att visa en annan flipbox istället, skriv dess ID i fältet.

När du är nöjd med hur widgeten ser ut, klicka på ‘Uppdatera’.

För mer information, se vår guide om hur man lägger till och använder widgets i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till flipbox-överlägg och hovringar på din WordPress-webbplats. Du kanske också vill kolla in vår guide om hur man skapar ett bildgalleri, eller se vårt experttips om de bästa WordPress-bildspelsplugins.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.