Een preloader maken op WordPress met Elementor

Muneeb WordPress-zelfstudies Nov 22, 2021

Een preloader, ook wel loader genoemd, is een eenvoudige of complexe animatie of GIF die op de pagina blijft draaien terwijl de andere inhoud van de pagina wordt geladen.

Het is heel belangrijk om uw gebruikers bezig te houden gedurende de korte tijd die uw website nodig heeft om de inhoud te laden. Het helpt niet alleen om veel gebruikers te behouden, maar maakt het ook mogelijk om een blijvende aanwezigheid in de hoofden van de gebruikers te creëren. In deze zelfstudie zullen we begrijpen hoe u preloaders kunt maken met Elementor .

Een preloader maken met Elementor

Elementor zit boordevol opties waarmee u uw website op een geheel ander niveau kunt weergeven. Op dezelfde manier kunt u ook preloaders maken waarmee u de gebruikers kunt vangen die snel van uw website stuiteren.

Zorg er om te beginnen voor dat u alleen preloaders maakt voor pagina's die echt even nodig hebben om de inhoud te laden en die een belangrijk aspect van uw website zijn.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Als je eenmaal hebt besloten op welke pagina je de Preloader gaat plaatsen, zoek dan een SVG of een GIF die bij je website en die specifieke pagina past. Icons8 is een echt bekende bron voor Preloaders-animatie.

Als je niet weet hoe je SVG Format-bestanden op Elementor moet importeren, ga je gang en bekijk onze tutorial .

Vervolgens zijn er twee manieren om Preloaders op uw website te gebruiken, ofwel door ze voor een bepaalde pagina te gebruiken of door ze voor de hele website te gebruiken.

  • Als je de Preloader voor de hele website wilt gebruiken, maak dan een nieuwe sectie in de Header Template aan .
  • Als u de Preloader voor een bepaalde pagina wilt gebruiken, maakt u bovenaan de pagina een nieuwe sectie aan.

Zorg er in beide gevallen voor dat u de instellingen van de sectie wijzigt in No Gap .

Als u klaar bent met de instellingen, gaat u naar het tabblad Elementen aan de linkerkant van uw scherm en kiest u HTML .

Voeg in het HTML-veld de volgende code toe en zorg ervoor dat u de Preloader-URL met die van uzelf wijzigt.

>div class="loader" /divscript/scriptstyle/style

De codering heeft een commentaarverklaring voor de beginners om een soort van wijzigingen aan te brengen als dat nodig is.

Tot slot, ga je gang en publiceer je Preloader en controleer of deze perfect werkt. Zo kun je een Preloader maken met Elementor op je WordPress website.

We hopen dat deze tutorial u zal helpen om gebruikers van uw website te behouden en deze er ook veel professioneler uit te laten zien. Dat is allemaal van ons voor deze tutorial. Zorg ervoor dat u zich bij ons voegt op Twitter en Facebook om op de hoogte te blijven van onze inhoud.

Divi WordPress Theme