Een aardige plugin om extra aandacht mee te trekken: Animate it. Je plaatst een afbeelding op een pagina of bericht en geeft die afbeelding een bepaalde animatie mee.
Zie hieronder een voorbeeld:
[su_row]
[su_column size=”1/3″][edsanimate animation=”swing” delay=”3″ duration=”3″ infinite_animation=”no” animate_on=”” ]
[/edsanimate][/su_column]
[su_column size=”1/3″][edsanimate animation=”swing” delay=”3″ duration=”3″ infinite_animation=”no” animate_on=”” ]
[/edsanimate][/su_column]
[su_column size=”1/3″][edsanimate animation=”swing” delay=”3″ duration=”3″ infinite_animation=”no” animate_on=”” ]
[/edsanimate][/su_column]
[/su_row]
Hoe werkt het?
Uiteraard moet je op de bekende manier de plugin Animate It downloaden, installeren en activeren.
Als je een nieuwe pagina of een nieuw bericht aanmaakt verschijnt boven het bewerkvenster een extra icoontje (een grijs vierkantje met een soort witte toverstof erin; als je er met de muis overheen zweeft zie je de tekst Animate it! verschijnen.
Zet de cursor op de plek waar je de animatie wilt hebben en klik op de knop.
Bevestig je keuze (het zijn er nogal wat!) door op de groene knop ‘Insert’ te kiezen.
De volgende code wordt gegenereerd:
Nu is het alleen nog een kwestie van verwijderen van de voorbeeldtekst (die ik lichtoranje heb gekleurd) en daar op de gebruikelijke manier de afbeelding te plaatsen. Ronde afbeeldingen sorteren waarschijnlijk het meeste succes, maar ook vierkante of rechthoekige met afgeronde hoeken zijn geschikt. Op internet zijn tal van voorbeeldiconen te vinden en te downloaden.
Het voorbeeld hierboven is een combinatie van kolommen die ik gemaakt heb met Shortcodes Ultimate en Animate it.
Hieronder heb ik met Shortcodes Ultimate 5 kolommen gemaakt met icoontjes die een aantal andere instellingen hebben dan de icoontjes hierboven.
[su_row]
[su_column size=”1/5″][edsanimate animation=”rubberBand” delay=”1″ duration=”4″ infinite_animation=”no” animate_on=”scroll” ]
[/edsanimate][/su_column]
[su_column size=”1/5″][edsanimate animation=”rubberBand” delay=”2″ duration=”4″ infinite_animation=”no” animate_on=”scroll” ]
[/edsanimate][/su_column]
[su_column size=”1/5″][edsanimate animation=”rubberBand” delay=”3″ duration=”4″ infinite_animation=”no” animate_on=”scroll” ]
[/edsanimate][/su_column]
[su_column size=”1/5″][edsanimate animation=”rubberBand” delay=”4″ duration=”4″ infinite_animation=”no” animate_on=”scroll” ]
[/edsanimate][/su_column]
[su_column size=”1/5″][edsanimate animation=”rubberBand” delay=”5″ duration=”4″ infinite_animation=”no” animate_on=”scroll” ]
[/edsanimate][/su_column]
[/su_row]
Veel plezier met uitproberen.