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.
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.
Dock alla WordPress-teman erbjuder inte en inbyggd parallaxeffekt och du kanske inte vill använda en visuell sidbyggare bara för en 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.
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".
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 kortkod på fö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.
Metod 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.
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.
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 för att optimera hanteringen av din blogg eller hemsida.
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.
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 en Wordpress plugin som låter dig presentera din LinkedIn-profil på din blogg. Det fungerar även för bloggar med flera författare. Den lägger till följ och dela-knappar till dina WordPress-inlägg, sidor eller widgets.
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 en Wordpress plugin unik plattform, som låter dig ladda upp videor till YouTube från din webbplats och enkelt bädda in YouTube-videor, spellistor och kanaler på din webbplats.
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.
- Hur man fixar "Det går inte att skriva till disk" -felet på WordPress
- Hur man blir en framgångsrik bloggare och tjäna pengar med WordPress
- Hur att publicera dina artiklar via e-post på Wordpress
- Hur man blir en framgångsrik bloggare och tjäna pengar med WordPress
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.
.
