Så här addar du en parallaxeffekt till alla teman i WordPress

Vill du add to en parallaxeffekt till ett WordPress theme?

Parallaxeffekten är en trend inom webbdesign där en bakgrundsbild rullar långsammare än förgrundsinnehållet. Detta skapar en illusion av djup och rörelse, vilket ger en mer uppslukande och interaktiv upplevelse för användarna på din website.

I den här artikeln visar vi dig hur du enkelt kan add to en parallaxeffekt till alla WordPress teman.

Vad är en parallaxeffekt?

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

Parallaxeffekten kan användas på landing pages, long-form content, försäljningssidor eller hemsidan på en företagswebbplats.

Det kan lyfta fram olika sections på en lång page, förbättra det övergripande visuella tilltalet på site, öka användarnas engagement och vara ett fantastiskt verktyg för att förmedla ett message eller berätta en story på din blogg.

Många premiumteman i WordPress har en built-in parallaxeffekt på sin homepage. Du kan också använda den här effekten i de flesta tillägg för page builders i WordPress.

Alla themes har dock inte den här funktionen, och du kanske ej vill använda en page builder för att skapa customize layouts bara för en parallaxeffekt.

Med detta sagt, låt oss titta på hur du enkelt kan add to en parallax bakgrundseffekt till ett WordPress theme. Vi kommer att täcka ett par olika metoder, och du kan använda snabblänkarna under för att hoppa till den du vill använda:

Metod 1: Add Parallax Effect till WordPress Theme med hjälp av plugin

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

Först måste du installera och aktivera pluginet Advanced WordPress Backgrounds. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

När du aktiverat sidan går du till Settings ” AWB page i WordPress dashboard. Här kan du kontrollera boxarna 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 kontrollera den boxen.

Därefter klickar du på knappen ”Save Changes” för att lagra dina inställningar.

Öppna sedan en sida eller ett inlägg som du gillar i Gutenberg block editor.

När du är där klickar du på knappen add block ”+” högst upp till vänster på vyn för att öppna blockets meny.

Härifrån måste du hitta och add the Background (AWB) block till posten.

Öppna nu panelen Block på höger sida av vyn och växla till tabben ”Image” om du vill lägga till en image som parallaxbakgrund.

Därefter klickar du på knappen ”Select Image” för att starta mediabiblioteket. Du kan också klicka på knappen ”Use featured image” för att automatiskt lägga till den featured image som bakgrundsbild.

Du kan även add to en bakgrundsfärg eller ett videoklipp för effekten genom att växla till dessa tabs.

När du lägger till en image kan du justera dess fokuspunkt från block-panelen och konfigurera bakgrundsstorleken. Vi rekommenderar dock att du låter bakgrundsstorleken vara ”Cover”.

Därefter kan du använda slidern för att ändra opaciteten på imagen.

När du har gjort det rullar du ner till tabben ”Parallax” och förstorar den.

Härifrån kan du välja din parallaxtyp från dropdown-menyn. När du har valt ett alternativ kommer ändringarna automatiskt att tillämpas i block editor där du kan testa det.

I vårt exempel använder vi ”Opacity + Rulla”.

När du har lagt till effekten klickar du på knappen ”+” i AWB-blocket för att öppna blockets meny.

Du kan nu add to ett stycke, en image, ett videoklipp, ett citat eller vilket annat block du vill. Detta block kommer sedan att visas med parallaxeffekten.

Slutligen klickar du på knappen ”Update” eller ”Publicera” högst upp för att lagra dina settings.

Nu kan du besöka din WordPress site för att view parallax-effekten i action.

Metod 2: Add Parallax Effect till WordPress Theme med CSS

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

Först måste du ladda upp den image du vill använda till ditt mediabibliotek i WordPress genom att besöka sidan Media ” Add New Media File.

När du har gjort det måste du kopiera bildens URL genom att clicka på den och öppna dess ”Attachment details” prompt.

När du har gjort det måste du lägga till custom CSS-kod i dina theme-filer. Det minsta error när du skriver in koden kan dock förstöra din site och göra den otillgänglig.

Det är därför vi rekommenderar att du använder WPCode. Det är det bästa WordPress code snippets plugin på marknaden som gör det supersäkert och enkelt att lägga till custom code, inklusive CSS.

Först måste du installera och aktivera pluginet WPCode. Detaljerade instruktioner finns i vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Efter aktivering, besök Code Snippets ” + Add Snippet-sidan från WordPress dashboard och klicka på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.

Detta kommer att ta dig till ”Create Custom Snippet” page, där du kan börja med att lägga till en titel för din custom kod.

Därefter väljer du alternativet ”CSS Snippet” från dropdown-menyn Code Type till höger.

Följare, add to följande custom CSS kod i ’Code Preview’ boxen:

.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 exempelets URL i bakgrundsbild: url-raden i koden med URL: en för din image.

Den här imagen kommer att användas som bakgrund för parallaxeffekten på all your website.

Därefter rullar du ner till section ”Insertion” och väljer läget ”Auto Insert”.

Snippet kommer automatiskt att köras på din website när du har addat lite HTML-kod till det.

Slutligen rullar du tillbaka högst upp på sidan och togglar omkopplaren ”Inaktiverad” till ”Aktiv”.

Klicka sedan på knappen ”Save Snippet” för att lagra dina Settings.

Nu är det dags för dig att öppna WordPress post eller page där du vill lägga till parallaxeffekten.

När du är där klickar du på ikonen med tre punkter högst upp till höger på vyn för att öppna en meny. Därefter väljer du läget ”Code editor”.

Nu måste du add to följande HTML-kod i code editor 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 visual block editor genom att klicka på länken ”Exit Code Editor” högst upp.

Efter det lägger du till resten av innehållet för sidan eller posten i visual block editor.

Slutligen klickar du på knappen ”Update” eller ”Publicera” för att lagra dina settings.

Nu är det bara att besöka din WordPress blogg för att view parallax-effekten i action.

Bonus: Add to YouTube videoklipp som bakgrund i fullskärm i WordPress

Förutom parallaxeffekten kan du också add to ett YouTube videoklipp som bakgrund i helskärm i WordPress.

Detta kan ge dina användare en uppslukande upplevelse och göra din WordPress site mer visuellt tilltalande. En YouTube-video i helskärm som bakgrund kan väcka känslor och skapa en djupare anslutning till din publik.

Om du till exempel serverar en giveaway på din website kan du använda ett YouTube videoklipp i bakgrunden för att göra sidan mer spännande och uppmuntra användarna att delta i tävlingen.

På samma sätt, om du har en ideell välgörenhetsorganisation, kan du använda videoklipp som bakgrund för att displayed din organisations påverkan, uppdrag och stories från de enskilda eller samhällen du tjänar. Du kan till och med visa upp stories utan problem i bakgrunden för videoklipp i helskärm.

För mer details kan du se vår tutorial om hur du lägger till en YouTube video som en fullskärms bakgrund i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan add to en parallaxeffekt till ett WordPress theme. Du kanske också vill se vår guide för nybörjare om hur du hittar royaltyfria images för dina blogginlägg i WordPress och vår lista över de mest efterfrågade WordPress-tipsen, -trixen och -hackarna.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.