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.
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.
Echter, alle WordPress-thema's biedt geen ingebouwd parallax-effect en misschien wilt u geen visuele paginabuilder gebruiken alleen voor een 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.
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 " Stretch.
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 Invoegen 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.
Methode 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.
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.
.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.
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 gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling 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.
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 Plugin waarmee u uw LinkedIn-profiel op uw blog kunt presenteren. Het werkt ook voor blogs met meerdere auteurs. Het voegt volg- en deelknoppen toe aan uw WordPress-berichten, -pagina's of widgets.
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 WordPress Plugin uniek platform, waarmee u video's vanaf uw website naar YouTube kunt uploaden en eenvoudig YouTube-video's, afspeellijsten en kanalen op uw website kunt insluiten.
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.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- Hoe de fout "Kan niet naar schijf schrijven" op WordPress te repareren
- Hoe word je een succesvolle blogger en verdien je geld met WordPress
- Hoe kunt u uw artikelen te publiceren via e-mail op WordPress
- Hoe word je een succesvolle blogger en verdien je geld met WordPress
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.
...
