Hoe u een Parallax-effect aan elk WordPress-thema kunt toevoegen

Onlangs vroeg een van onze lezers ons hoe we een parallax-effect aan een WordPress-thema konden toevoegen? Parallax-effect is een trend in webdesign waarbij een achtergrondafbeelding langzamer scrollt dan voorgrondinhoud. In dit artikel laten we u zien hoe u eenvoudig een parallax-effect kunt toevoegen aan elk WordPress-thema.


Parallax-effect toevoegen aan elk WordPress-thema

Wat is een Parallax-effect?

Parallax-effect is een moderne webdesigntechniek waarbij het achtergrondelement langzamer scrollt dan de voorgrondinhoud. Dit effect voegt diepte toe aan de achtergrondafbeeldingen en zorgt ervoor dat ze interactief aanvoelen.

Parallax-effect kan worden gebruikt op bestemmingspagina’s, longform-inhoud, 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 startpagina. U kunt ook het parallax-effect gebruiken in de meeste plug-ins voor het bouwen van WordPress-pagina’s.

Niet alle thema’s hebben echter een ingebouwd parallax-effect en misschien wilt u geen paginabuilder gebruiken om aangepaste paginalay-outs te maken, alleen voor een parallax-effect.

Laten we eens kijken hoe u eenvoudig een parallax-achtergrondeffect aan een WordPress-thema kunt toevoegen.

Methode 1: Voeg Parallax-effect toe 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 gemakkelijker en wordt aanbevolen voor de meeste gebruikers.

Het eerste dat u hoeft te doen, is de plug-in Geavanceerde WordPress-achtergronden installeren en activeren. Raadpleeg onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in voor meer informatie.

Na activering moet u de pagina of post bewerken waar u het parallax-effect wilt toevoegen. U zult de nieuwe knop ‘Geavanceerde WordPress-achtergronden’ in de visuele editor zien.

WordPress geavanceerde achtergrondknop

Als u erop klikt, verschijnt er een pop-up waarin u verschillende instellingen kunt wijzigen voor de achtergrond die u wilt toevoegen.

Eerst moet u een afbeelding selecteren als achtergrondtype en vervolgens de optie ‘uitrekken’ aanvinken.

Parallax achtergrondinstellingen

Vervolgens moet u op de knop ‘Afbeelding selecteren’ klikken om een ​​afbeelding te uploaden of te selecteren die u wilt gebruiken. Zorg ervoor dat u een grote afbeelding gebruikt, anders wordt deze korrelig weergegeven.

Daarna moet je Parallax inschakelen door een parallax-type te kiezen. Er zijn een aantal stijlen beschikbaar waarmee je kunt experimenteren. Het meest gebruikte parallax-effect is scrollen.

Klik op de knop Invoegen om door te gaan.

De plug-in voegt nu een shortcode toe aan uw WordPress-berichteditor. Het ziet er ongeveer 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_sb = 30 ”awb_mouse_parallax_sb

Uw inhoud hier

[/ nk_awb]

Vervang ‘Uw inhoud hier’ door uw eigen inhoud en sla vervolgens uw pagina op.

U kunt nu uw website bezoeken om deze in actie te zien.

Parallax-effectvoorbeeld

Methode 2: voeg Parallax-effect toe aan elk WordPress-thema met CSS

Deze methode vereist dat je een goed begrip hebt van HTML / CSS en hoe WordPress-thema’s werken.

Eerst moet u de afbeelding die u wilt gebruiken voor parallax-effect uploaden naar uw WordPress-mediabibliotheek door naar te gaan Media »Nieuw toevoegen bladzijde.

Na het uploaden van de afbeelding moet u de afbeeldings-URL kopiëren door de afbeelding in de WordPress-mediabibliotheek te bewerken.

Kopieer URL van afbeelding

Vervolgens moet je de volgende HTML toevoegen aan de pagina of post waar je het parallax-effect wilt laten zien. U kunt deze HTML ook toevoegen aan uw WordPress-thema of kindthema.

Je inhoud komt hier…

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

.parallax {
achtergrond-afbeelding: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
hoogte: 100%;
achtergrond-bijlage: vast;
achtergrondpositie: midden;
achtergrondherhaling: geen herhaling;
achtergrondformaat: omslag;
marge-links: -410px;
margin-right: -410px;
}

.parallax-content {
breedte: 50%;
marge: 0 auto;
kleur: #FFF;
padding-top: 50px;
}

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

U kunt nu uw wijzigingen opslaan en uw website bezoeken om deze in actie te zien.

Parallax-effect toegevoegd met CSS

Opmerking: mogelijk moet u de CSS aanpassen om te werken met de lay-out van uw site.

We hopen dat dit artikel je heeft geholpen om eenvoudig een parallax-effect toe te voegen aan elk WordPress-thema. Misschien wil je ook onze megalijst met de meest gewilde WordPress-tips, -trucs en -hacks zien.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map