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 600.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 een parallax-effect toe te voegen aan een WordPress-thema?

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

In deze zelfstudie 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.

Comment ajouter un effet parallaxe sur nimporte quel theme wordpress 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, de verkooppagina's of de startpagina van een bedrijfswebsite. Dit 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 startpagina. U kunt het parallax-effect ook 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 we het parallax-effect eenvoudig aan elk WordPress-thema kunnen toevoegen.

1-methode: het Parallax-effect toevoegen aan elk WordPress-thema met behulp van een plug-in

Voor deze methode hoeft u geen code toe te voegen aan uw WordPress-thema. Het is eenvoudiger en 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.

Na het activeren van de plug-in, moet u de pagina wijzigen waaraan u het parallax-effect wilt toevoegen. U zult de nieuwe knop opmerkenGeavanceerde WordPress-achtergrondenOp de werkbalk van de visuele editor.

Voeg een geavanceerde wordpress-achtergrond toe

Als u hierop klikt, wordt een pop-upvenster weergegeven waarin u verschillende achtergrondinstellingen kunt bewerken die u wilt toevoegen.

Eerst 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]

Fenêtre advanced wordpress background

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 zijn 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.

Effet parallaxe sur wordpress2-methode: 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.

Allereerst moet u in uw WordPress multimedia-bibliotheek de afbeelding uploaden die u wilt gebruiken voor het parallax-effect door de media> Voeg een nieuwe toe .

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

Na het downloaden van de afbeelding, moet u de URL van de afbeelding kopiëren door de afbeelding in de WordPress Media Library te bewerken.

Copier lurl de limage sur wordpress

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

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]

div class = "parallax"> <div class = "parallax-content"> Uw inhoud hier ... </ div> </ div>

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

.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.

Exemple effet parallaxe wordpress

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 door klanten gespecificeerde bedragen. Ze zullen zoveel kunnen geven als ze willen. Elke donatie kan worden gepresenteerd als een gewoon product van WooCommerce.


Woocommerce-donatie-plug-in

Als de klant de winkelwagenpagina negeert of rechtstreeks naar de kassa gaat zonder een donatie te doen, wordt een link weergegeven boven de kassa-pagina zodat hij zijn donatie kan doen.

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 "Cadeau toevoegen" in het winkelmandje.

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 plugin wordpress linkedin

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 je uiterlijk aan te passen, instellingen te configureren en andere geavanceerde opties in te schakelen 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 je video's vanaf je website naar YouTube kunt uploaden en eenvoudig video's, afspeellijsten en YouTube-kanalen kunt integreren in je website.

Youtuber plugin wordpress youtube

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 en sluit deze in 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

Ontdek andere aanbevolen bronnen die u zullen begeleiden bij het maken 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