Hur man lägger till en parallaxeffekt till vilket WordPress-tema som helst

Parallaxeffekten är en webbdesigntrend där en bakgrundsbild scrollar långsammare än förgrundsinnehållet. Detta skapar en illusion av djup och rörelse, vilket ger en mer interaktiv användarupplevelse på din webbplats.

Enligt vår mening är användningen av en parallaxeffekt ett utmärkt sätt att fånga besökarnas uppmärksamhet. Det drar in människor och uppmuntrar dem att stanna längre, vilket kan öka engagemanget. Vi har funnit att det inte bara ger din webbplats en elegant, professionell känsla utan också kan leda till högre konverteringar.

I den här artikeln visar vi hur du enkelt lägger till en parallaxeffekt i vilket WordPress-tema som helst. Vi kommer att utforska olika metoder, inklusive användning av plugins och anpassad kod, för att ge dig flexibla alternativ.

Vad är en parallaxeffekt?

Parallaxeffekten är en modern webbdesignteknik där bakgrunden rullar långsammare än förgrundsinnehållet. Denna effekt ger djup till bakgrundsbilderna och gör att de känns mer interaktiva.

Parallaxeffekten kan användas på landningssidor, långt innehåll, försäljningssidor eller startsidan för en företagswebbplats.

Det kan lyfta fram olika sektioner på en lång sida, förbättra webbplatsens övergripande visuella utseende, öka användarnas engagemang och vara ett fantastiskt verktyg för att förmedla ett budskap eller berätta en historia på din blogg.

Många premium WordPress-teman har en inbyggd parallaxeffekt på sin startsida. Du kan också använda den här effekten i de flesta sidbyggarplugins för WordPress.

Alla teman har dock inte den här funktionen, och du kanske inte vill använda en sidbyggare för att skapa anpassade sidlayouter bara för en parallaxeffekt.

Med det sagt, låt oss titta på hur du enkelt kan lägga till en parallaxbakgrundseffekt till vilket WordPress-tema som helst. Vi kommer att täcka ett par olika metoder, och du kan använda snabblänkarna nedan för att hoppa till den du vill använda:

• Metod 1: Lägg till parallaxeffekt i WordPress-tema med plugin
• Metod 2: Lägg till parallaxeffekt i WordPress-tema med CSS
• Bonus: Lägg till YouTube-video som helskärmsbakgrund i WordPress

Metod 1: Lägg till parallaxeffekt i WordPress-tema med plugin

Denna metod kräver inte att du lägger till någon kod i ditt WordPress-tema. Den är enkel och rekommenderas för de flesta användare.

Först måste du installera och aktivera pluginet Advanced WordPress Backgrounds. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, besök sidan Inställningar » AWB från WordPress-instrumentpanelen. Här kan du markera rutorna för de webbläsare eller enheter där du inte vill visa parallaxeffekten.

Om du till exempel inte vill visa parallaxeffekten för användare på mobila enheter, kan du kryssa i den rutan.

Klicka sedan på knappen 'Spara ändringar' för att spara dina inställningar.

Öppna sedan en sida eller ett inlägg du gillar i Gutenberg blockredigerare.

När du är där, klicka på knappen för att lägga till block '+', längst upp till vänster på skärmen, för att öppna blockmenyn.

Härifrån behöver du hitta och lägga till blocket Bakgrund (AWB) till inlägget.

Öppna nu blockpanelen på skärmens högra sida och växla till fliken "Bild" om du vill lägga till en bild som parallaxbakgrund.

Klicka sedan på knappen ‘Välj bild’ för att starta mediabiblioteket. Du kan också klicka på knappen ‘Använd utvald bild’ för att automatiskt lägga till den utvalda bilden som bakgrund.

Du kan till och med lägga till en bakgrundsfärg eller video för effekten genom att växla till dessa flikar.

När du har lagt till en bild kan du justera dess fokuspunkt från blockpanelen och konfigurera bakgrundsstorleken. Vi rekommenderar dock att du lämnar bakgrundsstorleken som 'Täck'.

Använd sedan skjutreglaget för att ändra bildens opacitet.

När du har gjort det, scrolla ner till fliken 'Parallax' och expandera den.

Härifrån kan du välja din parrallelltyp från rullgardinsmenyn. När du har valt ett alternativ kommer ändringarna automatiskt att tillämpas i blockredigeraren där du kan testa det.

I vårt exempel använder vi 'Opacitet + Scroll'.

När du har lagt till effekten, klicka på '+' -knappen i AWB-blocket för att öppna blockmenyn.

Du kan nu lägga till ett stycke, en bild, en video, ett citat eller något annat block du vill. Detta block kommer sedan att visas med parallaxeffekten.

Klicka slutligen på knappen ‘Uppdatera’ eller ‘Publicera’ högst upp för att lagra dina inställningar.

Nu kan du besöka din WordPress-webbplats för att se parallaxeffekten i aktion.

Metod 2: Lägg till parallaxeffekt i WordPress-tema med CSS

Om du vill använda en enda bild som parallaxbakgrund över hela din webbplats, då är den här metoden för dig.

Först måste du ladda upp bilden du vill använda till ditt WordPress-mediebibliotek genom att besöka sidan Media » Lägg till ny mediefil.

När du har gjort det måste du kopiera bildens URL genom att klicka på den och öppna dess prompt 'Bilagdetaljer'.

När du har gjort det måste du lägga till anpassad CSS-kod i dina temafiler. Det minsta felet när du skriver koden kan dock bryta din webbplats och göra den otillgänglig.

Det är därför vi rekommenderar att använda WPCode. Det är det bästa pluginet för kodavsnitt för WordPress på marknaden som gör det mycket säkert och enkelt att lägga till anpassad kod, inklusive CSS.

Först måste du installera och aktivera WPCode-pluginet. För detaljerade instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Besök efter aktivering sidan Kodutdrag » + Lägg till utdrag från WordPress-instrumentpanelen och klicka på knappen 'Använd utdrag' under alternativet 'Lägg till din anpassade kod (nytt utdrag)'.

Detta tar dig till sidan 'Skapa anpassat kodavsnitt', där du kan börja med att lägga till en titel för din anpassade kod.

Välj sedan alternativet 'CSS Snippet' från rullgardinsmenyn Code Type till höger.

Lägg sedan till följande anpassade CSS-kod i rutan 'Kodförhandsgranskning':

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

När du har gjort det, se till att ersätta exempel-URL:en i raden background-image: url i koden med URL:en till din bild.

Den här bilden kommer att användas som bakgrund för parallaxeffekten över hela din webbplats.

Rulla sedan ner till avsnittet 'Infogning' och välj läget 'Automatisk infogning'.

Utdraget kommer automatiskt att köras på din webbplats när du lägger till lite HTML-kod i det.

Skrolla slutligen tillbaka till toppen av sidan och växla omkopplaren 'Inaktiv' till 'Aktiv'.

Klicka sedan på knappen ‘Spara kodsnutt’ för att lagra dina inställningar.

Nu är det dags för dig att öppna WordPress-inlägget eller sidan där du vill lägga till parallaxeffekten.

När du är där, klicka på ikonen med tre punkter längst upp till höger på skärmen för att öppna en meny. Välj sedan läget 'Kodredigerare'.

Nu behöver du lägga till följande HTML-kod i kodredigeraren med innehållet för parallaxeffekten emellan:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Du kan sedan enkelt gå tillbaka till den visuella blockredigeraren genom att klicka på länken 'Avsluta kodredigeraren' högst upp.

Lägg sedan till resten av innehållet för sidan eller inlägget i den visuella blockredigeraren.

Klicka slutligen på knappen 'Uppdatera' eller 'Publicera' för att spara dina inställningar.

Now, simply visit your WordPress blog to view the parallax effect in action.

Bonus: Lägg till YouTube-video som helskärmsbakgrund i WordPress

Förutom parallaxeffekten kan du också lägga till en YouTube-video som en helskärmsbakgrund i WordPress.

Detta kan ge en uppslukande upplevelse för dina användare och öka den visuella attraktionskraften på din WordPress-webbplats. En helskärms YouTube-video som bakgrund kan framkalla känslor och skapa en djupare koppling till din publik.

Om du till exempel arrangerar en utlottning på din webbplats, kan du använda en bakgrundsvideo på YouTube för att göra sidan mer spännande och uppmuntra användare att delta i tävlingen.

På samma sätt, om du har en ideell välgörenhetsorganisation, kan du använda videobakgrunder för att visa din organisations inverkan, uppdrag och berättelserna om de individer eller samhällen du betjänar. Du kan till och med visa upp framgångshistorier i bakgrundsvideon i helskärm.

För mer information kan du se vår handledning om hur man lägger till en YouTube-video som bakgrund i helskärm i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till en parallaxeffekt till vilket WordPress-tema som helst. Du kanske också vill se vår nybörjarguide om hur du lägger till oändlig scrollning till din WordPress-webbplats och vår lista över de bästa Canva-alternativen för webbgrafik.

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.