Hoe eenvoudig CSS-animaties toe te voegen in WordPress - DeLaatbusiness

Hoe eenvoudig CSS-animaties toe te voegen in WordPress

2 min


111
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Heb je die mooie CSS-animaties op populaire sites gezien? Geanimeerde effecten zoals glijdende inhoud, fade-in feature-boxes, stuiterende afbeeldingen, etc. In dit artikel laten we u zien hoe u gemakkelijk CSS-animaties in WordPress kunt toevoegen zonder een code te hoeven schrijven.

Prijstabel geanimeerd met behulp van CSS

Wanneer en waarom moet je CSS-animaties gebruiken?

Met CSS- animaties kunt u de aandacht van gebruikers trekken op verschillende delen van de pagina.

U kunt ze gebruiken om productfuncties te animeren of door een call-to-action knop.

Veel websites gebruiken CSS-animaties terwijl gebruikers naar beneden scrollen op een pagina. Hiermee voegt u een storytelling-element toe aan de pagina met items die vordert terwijl gebruikers naar beneden scrollen.

CSS-animaties zijn ook sneller dan Flash of video’s. Ze laden snel en worden ondersteund door de meeste moderne webbrowsers.

U kunt de CSS-animaties handmatig toevoegen aan je WordPress theme of kind thema stylesheet ‘s. De meeste beginners willen echter hun themabestanden niet bewerken of tijd besteden aan het leren van CSS.

Dat gezegd hebbende, laten we eens kijken hoe u eenvoudig CSS-animaties aan uw WordPress-site kunt toevoegen.

CSS animeren instellen! Inpluggen

We zullen een plug-in gebruiken voor deze tutorial. Hiermee kunt u CSS-animaties maken met een WYSIWYG-editor.

Het eerste wat u hoeft te doen is het Animate it installeren en activeren inpluggen. De plug-in werkt standaard en er zijn geen instellingen die u kunt configureren.

Maak gewoon een nieuw bericht en je ziet een nieuwe knop in je WordPress visuele editor met het label ‘Animate it!’.

Animeer het knop in WordPress visuele editor

Als u op de knop klikt, verschijnt er een pop-up waarin u uw CSS-animatie kunt ontwerpen. De plug-in ondersteunt vele CSS-animaties waaruit u kunt kiezen.

Animatie-editor

Eerst moet je een animatiestijl selecteren. Daarna moet je de vertraging en de duur van de animatie kiezen. Ten slotte moet u selecteren wanneer u de animatie wilt laten verschijnen.

De plug-in biedt drie keuzes. U kunt de animatie uitvoeren op klikken, zweven of bladeren verschuiven.

Selecteer wanneer de animatie moet worden uitgevoerd

Als u tevreden bent met de instellingen, kunt u op de knop Animeren klikken om een ​​voorbeeld van de animatie te bekijken.

Klik vervolgens op de knop Invoegen om de animatie toe te voegen aan uw WordPress-bericht of -pagina. U zult merken dat de plug-in een shortcode zal toevoegen met een aantal dummy-inhoud erin in de post-editor.

CSS-animatie! shortcode in berichteditor

U moet de dummy-inhoud in de shortcode verwijderen en deze vervangen door uw eigen inhoud, afbeeldingen of iets anders dat u wilt animeren.

Vervang dummy-inhoud in shortcode met uw eigen inhoud

Nu je down bent, klik om het bericht op te slaan of te publiceren en klik vervolgens op de voorbeeldknop. Je ziet je inhoud prachtig geanimeerd.

We hopen dat dit artikel je heeft geholpen bij het eenvoudig toevoegen van CSS-animaties in WordPress. 


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format