Heb je deze prachtige CSS-animaties op populaire websites gezien? Animatie-effecten zoals inhoud die verschuift, die verdwijnt, de stuiterende beelden, enz…. ​ Wil je ook CSS-animaties toevoegen aan WordPress?

In dit artikel laten we u zien hoe u eenvoudig CSS-animaties aan WordPress kunt toevoegen zonder code te schrijven.

Wanneer en waarom moet u CSS-animaties gebruiken?

Met CSS-animaties kunt u de aandacht van de gebruiker op verschillende delen van de pagina vestigen. U kunt ze gebruiken om productfuncties of een call-to-action-knop te animeren. Veel websites gebruiken CSS-animaties wanneer de gebruiker naar beneden scrolt. Het voegt wat persoonlijkheid toe aan de pagina en benadrukt de belangrijkste elementen.

CSS-animaties zijn ook sneller dan het gebruik van flash of video's. Ze laden snel en worden ondersteund door de meeste moderne webbrowsers. U kunt handmatig CSS-animaties toevoegen aan uw WordPress-thema of aan uw stylesheet. kind thema. De meeste beginners willen echter hun themabestanden niet bewerken of CSS leren.

Dat gezegd hebbende, in deze zelfstudie zullen we zien hoe je eenvoudig CSS-animaties aan je WordPress-website kunt toevoegen.

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

Ga dan terug naar waarom we hier zijn.

CSS animaties instellen

We zullen een plug-in gebruiken voor deze tutorial. Hiermee kunt u CSS-animaties maken met WYSIWYG visuele editor. Het eerste dat u hoeft te doen, is de plug-in installeren en activeren Animeren!. De plug-in werkt zonder configuratie en er is geen configuratiescherm.

Ontdek Hoe maak je een plugin in WordPress installeren als je het nog nooit hebt gedaan.

Maak gewoon een nieuw bericht en je ziet een nieuwe knop op de werkbalk van de visuele editor.

Door op de knop te klikken, ziet u een nieuw venster verschijnen waarin u uw CSS-animaties kunt ontwerpen. De plug-in ondersteunt veel CSS-animaties waaruit u allemaal kunt kiezen.

Eerst moet u de animatiestijl selecteren. Daarna moet u de wachttijd vóór de animatie en de animatieduur kiezen. Ten slotte kunt u aangeven wanneer de animatie zal starten.

Ga ook verder door te ontdekken Hoe maak je indrukwekkende animaties toe te voegen aan uw blog

De plug-in biedt drie keuzes. U kunt de animatie uitvoeren door te klikken, te zweven of tijdens het scrollen.

Als u tevreden bent met de instellingen, kunt u klikken op de knop " Anime It Om de preview van de animatie te zien.

Klik vervolgens op de knop Invoegen om animatie toe te voegen aan uw bericht of pagina. U zult merken dat de plug-in een shortcode met dummy-inhoud toevoegt aan de visuele editor.

U moet de dummy-inhoud in de shortcode verwijderen en deze vervangen door uw eigen inhoud, afbeeldingen of wat u maar wilt.

Ontdek ook Hoe interactieve kaarten toe te voegen aan uw WordPress-website

Het enige dat u nu hoeft te doen, is uw inhoud publiceren en er een voorbeeld van bekijken.

Ontdek ook enkele 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. ChimpMate Pro

Chimpmaat is de WordPress Plugin De premium pop-up van MailChimp, die u zal helpen uw lezers om te zetten in abonnees. Het is ontworpen om uw e-maillijst te laten groeien zonder bezoekers te irriteren met vervelende pop-ups.

Het is volledig aanpasbaar en u beheerst wanneer en waar pop-ups worden weergegeven. De andere functies zijn: ondersteuning van verschillende browsers en heeft pmeerdere planningsopties, een volledig aanpasbare lay-out, eenresponsieve klantondersteuning, iperfecte integratie met WooCommerce, een excellente cachebeheer, perfecte integratie met veel WordPress-thema's, meertalige ondersteuning dankzij naar de WPML-plug-in, eniet veel meer.

Downloaden | demonstratie | web hosting

2. WooCommerce Cardstream Payment Gateway

CardStream is de enige onafhankelijke aanbieder van betalingsgateways. Deze WordPress Plugin premium stelt u in staat om betalingen rechtstreeks in uw WooCommerce online winkel te accepteren via Cardstream.

Het geeft u ook de mogelijkheid om betalingen te accepteren met behulp van de door Cardstream gehoste oplossing.

Downloaden | demonstratie | web hosting

3. Gegevensbron

DataSource is een WordPress Plugin premium gericht op de visuele presentatie van uw gegevens op elke pagina van uw website. Hiermee kunt u gegevens uit CSV-bestanden, XML, Excel, Google Spreadsheets, MySQL-databases of aangepaste berichttypen presenteren als sorteerbare en filterbare tabellen, verschillende grafieken, kaarten en meer.

Onder de functies vindt u onder andere: an iintuïtieve interface, tableaux gebaseerd op het model van uw gegevens, tsorteerbaar, filtreerbaar en reagerend, hetupport van Google Maps en meertaligeenresponsieve klantenondersteuning, één mgebruikershandleiding, een isnelle installatie, et 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 te comprimeren en afbeeldingen verkleinen op WordPress
• Hoe maak je een widget toe te voegen aan de kop van uw WordPress blog
• Hoe interactieve kaarten toe te voegen aan uw WordPress-website
• Hoe 413 fout op WordPress te repareren

Conclusie

Alstublieft ! Dat is alles voor deze tutorial, we hopen dat het je heeft geholpen om te leren hoe je CSS-animaties in WordPress kunt integreren. 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.

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

...