Hur man lägger till en parallaxeffekt till alla WordPress-teman

Nyligen frågade en av våra läsare oss hur man lägger till en parallaxeffekt till något WordPress-tema? Parallaxeffekt är en webbdesigntrend där en bakgrundsbild rullar långsammare än förgrundens innehåll. I den här artikeln kommer vi att visa dig hur du enkelt lägger till en parallaxeffekt till alla WordPress-teman.


Lägga till parallaxeffekt till alla WordPress-teman

Vad är en parallaxeffekt?

Parallaxeffekt är en modern webbdesignteknik där bakgrundselement rullar långsammare än förgrundens innehåll. Denna effekt lägger bakgrundsbilderna djupare och får dem att känna sig interaktiva.

Parallaxeffekt kan användas på målsidor, långformat innehåll, försäljningssidor eller hemsida på en företagswebbplats. Det är ett utmärkt sätt att markera olika avsnitt på en lång sida.

Många premium WordPress-teman har inbyggd parallaxeffekt på deras hemsida. Du kan också använda parallaxeffekt i de flesta WordPress-sidbyggare-plugins.

Men inte alla teman har en inbyggd parallaxeffekt, och du kanske inte vill använda en sidbyggare för att skapa anpassade sidlayouter bara för en parallaxeffekt.

Låt oss titta på hur du enkelt lägger till parallaxbakgrundseffekt till alla WordPress-teman.

Metod 1: Lägg till parallaxeffekt till alla WordPress-teman med hjälp av plugin

Den här metoden kräver inte att du lägger till någon kod till ditt WordPress-tema. Det är lättare och rekommenderas för de flesta användare.

Det första du behöver göra är att installera och aktivera plugin-programmet Advanced WordPress Backgrounds. Mer information finns i vår steg för steg-guide för hur du installerar ett WordPress-plugin.

Vid aktivering måste du redigera sidan eller inlägget där du vill lägga till parallaxeffekten. Du kommer att märka den nya knappen ‘Avancerad WordPress-bakgrunder’ i den visuella redigeraren.

WordPress avancerad bakgrundsknapp

Om du klickar på den öppnas en popup där du kan ändra olika inställningar för bakgrunden du vill lägga till.

Först måste du välja en bild som din bakgrundstyp och sedan markera alternativet ‘stretch’.

Parallax bakgrundsinställningar

Därefter måste du klicka på knappen ‘Välj bild’ för att ladda upp eller välja en bild du vill använda. Se till att du använder en stor bild annars kommer den att visas pixelerad.

Efter det måste du aktivera Parallax genom att välja en parallaxtyp. Det finns ett antal stilar tillgängliga som du kan experimentera med. Den vanligaste parallaxeffekten är bläddring.

Klicka på knappen Infoga för att fortsätta.

Plugin kommer nu att lägga till en kortkod i din WordPress-postredigerare. Det ser ut så här:

.

Ditt innehåll här

[/ Nk_awb]

Byt ut “Ditt innehåll här” med ditt eget innehåll och spara sedan din sida.

Du kan nu besöka din webbplats för att se den i aktion.

Förhandsvisning av Parallaxeffekt

Metod 2: Lägg till parallaxeffekt till alla WordPress-teman med CSS

Denna metod kräver att du har en rättvis förståelse för HTML / CSS samt hur WordPress-teman fungerar.

Först måste du ladda upp den bild du vill använda för parallaxeffekt till ditt WordPress mediebibliotek genom att besöka Media »Lägg till nytt sida.

När du har laddat upp bilden måste du kopiera webbadressen till bilden genom att redigera bilden i WordPress mediebibliotek.

Kopiera bildens URL

Därefter måste du lägga till följande HTML på sidan eller inlägget där du vill visa parallaxeffekten. Du kan också lägga till denna HTML i ditt WordPress-tema eller underordnatema.

Ditt innehåll går här…

Nästa måste du lägga till följande anpassade CSS till ditt WordPress-tema.

.parallax {
bakgrund-bild: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
höjd: 100%;
bakgrundsfästning: fast;
bakgrundsposition: centrum;
bakgrund-upprepa: ingen upprepa;
bakgrundsstorlek: täcka;
margin-vänster: -410px;
margin-höger: -410px;
}

.parallax-innehåll {
bredd: 50%;
marginal: 0 auto;
färg: #fff;
padding-top: 50px;
}

Glöm inte att byta ut bakgrundsbildens URL med din egen bakgrundsbild.

Du kan nu spara dina ändringar och besöka din webbplats för att se dem i aktion.

Parallaxeffekt läggs till med CSS

Obs! Du kan behöva justera CSS för att fungera med din webbplats.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till parallaxeffekt till alla WordPress-teman. Du kanske också vill se vår megalista med de mest eftertraktade WordPress-tips, tricks och hacks.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me