Door naar hoofdmenu

Hoe maak je een parallax effect toe te voegen op een WordPress theme

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Onlangs vroeg een van onze lezers ons hoe we een parallax-effect konden toevoegen aan elk WordPress-thema?

Het Parallax-effect is tegenwoordig een populaire trend op internet, waarbij een achtergrondafbeelding langzamer scrolt dan de inhoud op de voorgrond.

In deze tutorial laten we u zien hoe u eenvoudig een parallax-effect kunt toevoegen aan elk WordPress-thema.

Maar als je WordPress nog nooit hebt geïnstalleerd, ontdek het dan Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Maar terug naar waarom we hier zijn.

Parallax-effect toevoegen aan elk WordPress-thema e1567702269161

Wat is een parallax-effect?

Het Parallax-effect is een moderne webontwerptechniek waarbij het achtergrondelement langzamer scrolt dan de voorgrondinhoud. Dit effect voegt diepte toe aan de achtergrondafbeeldingen en maakt ze interactief.

Ontdek onze 25 WordPress-thema's met parallax om een ​​website te maken

Het Parallax-effect kan worden gebruikt op landingspagina's, verkooppagina's of de startpagina van een zakelijke website. Het is een geweldige manier om verschillende secties op een lange pagina te markeren.

Veel premium WordPress-thema's hebben een ingebouwd parallax-effect op hun homepage. Je kunt ook het parallax-effect gebruiken met de meeste plug-ins WordPress visuele creatie van pagina's.

Niet alle WordPress-thema's hebben echter een ingebouwd parallax-effect en u wilt misschien geen visuele constructor van pagina's gebruiken alleen voor het parallax-effect.

Laten we eens kijken hoe u eenvoudig het parallax-effect aan elk WordPress-thema kunt toevoegen.

Methode 1: Voeg het parallax-effect toe aan elk WordPress-thema met behulp van een plug-in

Voor deze methode hoeft u geen code aan uw WordPress-thema toe te voegen. Het is gemakkelijker en wordt aanbevolen voor de meeste gebruikers.

Het eerste wat u moet doen, is de plug-in installeren en activeren Geavanceerde WordPress-achtergronden. Voor meer informatie bekijk onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in.

Nadat u de plug-in hebt geactiveerd, moet u de pagina bewerken waarop u het parallax-effect wilt toevoegen. U ziet de nieuwe knop "Geavanceerde WordPress-achtergronden»Op de werkbalk van de visuele editor.

Voeg een geavanceerde wordpress-achtergrond toe

Als u erop klikt, wordt een pop-upvenster geopend waarin u verschillende achtergrondinstellingen die u wilt toevoegen, kunt wijzigen.

Allereerst moet u een afbeelding als achtergrond selecteren en vervolgens de optie " Rekken.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Geavanceerde wordpress-vensterachtergrond

Dan moet je op de knop klikken Selecteer Afbeelding Om een ​​afbeelding te downloaden of te selecteren die u wilt gebruiken. Zorg ervoor dat je een grote afbeelding gebruikt, anders verschijnt deze korrelig.

Daarna moet je het effect activeren Parallax Door een type parallax-effect te kiezen. Er is een aantal stijlen beschikbaar waarmee u kunt experimenteren. Het meest gebruikte parallax-effect is scrollen.

Klik op de knop bijvoegsel doorgaan.

De plug-in voegt een toe shortcodes op Publishing Editor. Het ziet er zo uit:

[Nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "scroll" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mouse_parallax_size = "30" awb_mouse_parallax_speed = "10000"] Uw inhoud hier [/ nk_awb]

Vervangen " deze inhoud Door uw eigen inhoud, sla dan uw pagina op.

U kunt uw website bezoeken om hem in actie te zien.

Parallax-effect op WordPressMethode 2: Voeg het "Parallax" -effect toe aan elk WordPress-thema met CSS

Deze methode vereist dat je enige kennis hebt van "HTML / CSS" en hoe WordPress-thema's en plug-ins werken.

Eerst moet je de afbeelding die je wilt gebruiken voor het parallax-effect uploaden naar je WordPress-mediabibliotheek door naar " media> Nieuwe toevoegen .

Ga verder door te ontdekken Hoe de media te organiseren op je WordPress blog

Nadat u de afbeelding hebt geüpload, moet u de afbeeldings-URL kopiëren door de afbeelding in de WordPress-mediabibliotheek te bewerken.

Kopieer de afbeeldings-url naar wordpress

Vervolgens moet u de volgende HTML-code toevoegen op de pagina waarop u het parallax-effect wilt weergeven. U kunt deze HTML-code ook toevoegen aan uw WordPress-thema of het thema van uw kind.

div class = "parallax"> Uw inhoud hier ...

Vervolgens moet u de volgende aangepaste CSS-code toevoegen aan uw WordPress-thema.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

.parallax {background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); hoogte: 100%; achtergrond-bijlage: vast; achtergrondpositie: centrum; background-repeat: no-repeat; achtergrond-grootte: dekking; margin-left: -410px; margin-right: -410px; } .parallax-inhoud {width: 50%; margin: 0 auto; color: # fff; padding-top: 50px; }

Vergeet niet om de URL van de achtergrondafbeelding te vervangen door uw eigen afbeelding.

U kunt nu uw wijzigingen opslaan en uw website bezoeken.

Voorbeeld van een Wordpress-parallax-effect

Alstublieft ! Nu kunt u het parallax-effect toevoegen aan uw WordPress-website.

Ontdek ook enkele thema's en premium WordPress-plug-ins  

U kunt andere WordPress-plug-ins gebruiken om een ​​moderne look te geven en de grip van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. WooCommerce Donation

Accepteer via deze extensie donaties op uw WooCommerce-website met bedragen die door klanten zijn opgegeven. Hierdoor kunnen ze zoveel geven als ze willen. Elke donatie kan worden gepresenteerd als een gewoon product van WooCommerce


Woocommerce-donatie-plug-in

Als de klant de winkelwagenpagina overslaat of direct naar de kassa gaat zonder een donatie te doen, verschijnt er een link boven de afrekenpagina zodat hij kan doneren.

Elke stap van het gebruik van WooCommerce Donation wordt uitgelegd in een documentatie met screenshots. Activeer gewoon de plug-in en u vindt het veld "Donatie toevoegen" op de winkelwagen.

Downloaden | demonstratie web hosting

2. LinkedIn meer

LinkedIn Plus is een WordPress-plug-in waarmee je je LinkedIn-profiel op je blog kunt presenteren. Het werkt ook voor blogs met meerdere auteurs. Het voegt de knoppen Volgen en Delen toe aan uw publicaties, pagina's of WordPress-widgets.Linkedin plus LinkedIn WordPress plug-in

Het is een geweldige manier om alle LinkedIn-functies aan uw blog toe te voegen en uw merk bij consumenten te valideren. Het geeft je de mogelijkheid om het uiterlijk aan te passen, instellingen te configureren en andere geavanceerde opties te activeren om je profiel te promoten bij potentiële recruiters of werkgevers. 

Downloaden | demonstratie | web hosting

3. YouTuber

YouTubeR is een unieke WordPress-plug-in, waarmee u YouTube-video's van uw website kunt uploaden en eenvoudig YouTube-video's, afspeellijsten en kanalen op uw website kunt insluiten.

Youtuber youtube wordpress plugin

Met deze plug-in hebt u de mogelijkheid om uitzonderlijke videogalerijen op uw website te maken.

De andere functies zijn: de mogelijkheid van upload eenvoudig video's naar YouTube vanaf uw WordPress-website, integratie eenvoudige video's, afspeellijsten en YouTube-kanalen op uw website, ondersteuning voor Visual Composer, de oneindig scrollen in afspeellijsten, uitstekende caching, responsieve lay-out, gedetailleerde documentatie en meer.

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

Downloaden | demonstratie | web hosting

Aanbevolen bronnen

Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.

Conclusie

Dat is alles! We hopen dat het een grote hulp is geweest. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

En als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.

... 

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
6 aandelen
aandeel3
gekwetter
Enregistrer3