Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

Nyligen frågade en av våra läsare oss hur man lägger till parallaxeffekt till något WordPress-tema?

Parallax-effekten är en populär trend idag på webben där en bakgrundsbild rullar långsammare än förgrundsinnehåll.

I den här handledningen visar vi dig hur du enkelt kan lägga till parallaxeffekt till vilket WordPress-tema som helst.

Men om du aldrig har installerat WordPress, upptäck Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Men tillbaka till varför vi är här.

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

Vad är en parallaxeffekt?

Parallax-effekten är en modern webbdesignteknik där bakgrundselementet rullar långsammare än förgrundsinnehållet. Denna effekt ger bakgrundsbilder djup och gör dem interaktiva.

Upptäck vårt 25 WordPress teman med parallax för att skapa en webbplats

Parallax-effekten kan användas på målsidor, försäljningssidor eller hemsidan för 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 en inbyggd parallaxeffekt på deras hemsida. Du kan också använda parallaxeffekten med de flesta plugins Wordpress visuell skapelse av sidor.

Men inte alla WordPress-teman har en inbyggd parallaxeffekt, och du kanske inte vill använda en visuell konstruktör av sidor bara för parallaxeffekt.

Låt oss ta en titt på hur du enkelt kan lägga till parallaxeffekten till något WordPress-tema.

Metod 1: Lägg till parallaxeffekten till vilket WordPress-tema som helst med hjälp av ett plugin

Den här metoden kräver inte att du lägger till någon kod i 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 Avancerade WordPress-bakgrunder. För mer information, Kolla in vår steg-för-steg-guide för hur du installerar ett WordPress-plugin.

När du har aktiverat plugin-programmet måste du redigera sidan där du vill lägga till parallaxeffekten. Du kommer att märka den nya knappen "Avancerade WordPress-bakgrunder»I verktygsfältet för visuell redigerare.

Lägg till adavanced wordpress bakgrund

Om du klickar på det visas ett popup-fönster där du kan ändra olika bakgrundsinställningar som du vill lägga till.

Först och främst måste du välja en bild som bakgrund och sedan markera alternativet " Stretch".

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

Avancerad wordpress fönsterbakgrund

Då måste du klicka på knappen Välj bild För att ladda ner 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 effekten Parallax Genom att välja en typ av parallaxeffekt. Det finns ett antal stilar tillgängliga som du kan experimentera med. Den vanligaste parallaxeffekten som används är rullning.

Klicka på knappen Insert att fortsätta.

Plugin kommer att lägga till en kortkodförlagsredaktör. Det kommer att se ut så här:

[nk_awb awb_type = "image" awb_stretch = "sant" awb_image = "22" awb_image_size = "full" awb_parallax = "bläddra" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mouse_alla_ här [/ nk_awb]

Ersätt " detta innehåll Spara sedan sidan med ditt eget innehåll.

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

Parallax effekt på wordpressMetod 2: Lägg till "Parallax" -effekten till valfritt WordPress-tema med CSS

Den här metoden kräver att du har viss kunskap om "HTML / CSS" samt hur WordPress-teman och plugins fungerar.

Först måste du ladda upp till ditt WordPress-mediebibliotek, bilden du vill använda för parallaxeffekten genom att besöka " media> Lägg till nytt ".

Gå längre genom att upptäcka Hur man organiserar media på din Wordpress-blogg

Efter att ha laddat upp bilden måste du kopiera bildens webbadress genom att redigera bilden i WordPress-mediebiblioteket.

Kopiera bildwebbadressen till wordpress

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

Då måste du lägga till följande HTML-kod på sidan där du vill visa parallaxeffekten. Du kan också lägga till den här HTML-koden i din WordPress tema eller ditt barn tema.

div class = "parallax"> Ditt innehåll här ...

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

.parallax {background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); höjd: 100%; bakgrundsfästning: fast; bakgrundsställning: center; background-repeat: no-repeat; bakgrundsstorlek: omslag; margin-vänster: -410px; margin-höger: -410px; } .parallax-innehåll {width: 50%; marginal: 0 auto; färg: #fff; padding-top: 50px; }

Kom ihåg att ersätta webbadressen till bakgrundsbilden med din egen bild.

Du kan nu spara dina ändringar och besöka din webbplats.

Wordpress parallax effekt exempel

Här är ! Nu kan du lägga till parallaxeffekten på din WordPress-webbplats.

Upptäck också några teman och premium WordPress-plugins  

Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. WooCommerce Donation

Acceptera genom denna förlängning donationer på din WooCommerce-webbplats med belopp som anges av kunderna. Detta gör att de kan ge så mycket de vill. Varje donation kan presenteras som alla vanliga produkter från WooCommerce


Plugin för donation av Woocommerce

Om kunden hoppar över kundvagnssidan eller går direkt till kassan utan att göra en donation visas en länk ovanför kassasidan så att de kan donera.

Varje steg för att använda WooCommerce Donation förklaras i en dokumentation med skärmdumpar. Aktivera bara plugin-programmet så hittar du fältet "Lägg till donation" på kundvagnen.

Ladda ner | demo webbhotell

2. LinkedIn Mer

LinkedIn Plus är ett WordPress-plugin som låter dig presentera din LinkedIn-profil på din blogg. Det fungerar också för bloggar med flera författare. Det lägger till Följ och Dela-knappar till dina publikationer, sidor eller WordPress-widgetar.Linkedin plus LinkedIn wordpress-plugin

Det är ett utmärkt sätt att lägga till alla LinkedIn-funktioner i din blogg och validera ditt varumärke med konsumenterna. Det ger dig möjlighet att anpassa dess utseende, konfigurera inställningar och aktivera andra avancerade alternativ för att marknadsföra din profil för potentiella rekryterare eller arbetsgivare. 

Ladda ner | demo | webbhotell

3. YouTuber

YouTubeR är ett unikt WordPress-plugin, som låter dig ladda upp YouTube-videor från din webbplats och enkelt bädda in YouTube-videor, spellistor och kanaler till din webbplats.

Youtuber youtube wordpress plugin

Med detta plugin har du möjlighet att skapa exceptionella videogallerier på din webbplats.

Dess andra funktioner är: möjligheten till enkelt ladda upp videor till YouTube från din WordPress-webbplats, integration enkla videor, spellistor och YouTube-kanaler till din webbplats, support för Visual Composer, oändlig rullning i spellistor, utmärkt caching, responsiv layout, detaljerad dokumentation och mer.

Ladda ner | demo | webbhotell

Rekommenderade resurser

Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.

Slutsats

Det är allt! Vi hoppas att det har varit till stor hjälp. Tveka inte att dela med dina vänner på dina favorit sociala nätverk

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Och om du har några förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.