MANUAL GUIDE
Lordicon Wordpress Plugin
We have developed a free WordPress plugin that lets you
insert and customize animated .json icons in a blink of an eye.
Install Lordicon WordPress Plug-in
Go to: [Link]/plugins/lordicon-interactive-icons/
download, and install Lordicon plugin to your WordPress
administration panel.
Easily Upload
Upload icons as JSON (Lottie) format from Adjust icon
the Lordicon library or any other Lottie Change the size, colors or stroke
animation. Don’t want to host icons in size of each icon.
Media Library? Use icon URL from the
„Embed HTML”.
Shortcode
Triggers Happy with adjustments? Copy the
Set animation on "hover", "loop", easy-to-read shortcode and paste
"loop with delay" or "click" and more. it to web builders such as Divi,
Elementor, or custom themes.
NOTE: Color & Stroke controls work only with Lordicon resources. Go to [Link]/help into
learn more how to prepare animated graphics that works with Lordicon Wordpress Plugin.
Onboarding
We use Gutenberg editor as a platform to host Lordicon WordPress Plugin. It works the best with
Lottie files as it gives immediate feedback after coloring icons or setting different animation triggers.
NOTE: It doesn’t mean that the Gutenberg site is the only place to use the plugin. We provide a
shortcode option that lets you embed icons from Divi or Elementor web builder to a custom theme.
Uploading Files
1. GO TO LORDICON LIBRARY
Upload icons as JSON (Lottie) format from the Lordicon library or any
other Lottie animation. Delete or change the description of the files at 2. DOWNLOAD ICONS AS A JSON (LOTTIE)
any time. 3. UPLOAD TO MEDIA LIBRARY
STEP 1
STEP 2 STEP 3
How to Use Lordicon Wordpress Plugin 1. CREATE NEW POST WITH GUTENBERG EDITOR
Now let's create a test Gutenberg post. You click, Posts -> Add new. Then 2. CLICK AND ADD LORDICON BLOCK
click "+" and search for Lordicon Element. A test icon has been added. 3. USE PANEL ON THE RIGHT HAND SIDE TO ADD AN ICON
Change test icon with uploaded icon from Media Library.
[Link]
[Link]
STEP 1 STEP 2 STEP 3
Alternative Icon Upload 1. GO TO LORDICON LIBRARY & SELECT AN ICON
Don’t want to host icons in Media Library? Use icon URL from the „Embed 2. EMBED AS HTML & COPY ICON SOURCE URL
HTML”. Go to Lordicon library, click „Embed HTML”, copy the icon URL and 3. USE PANEL ON THE RIGHT HAND SIDE TO ADD AN ICON
paste it to Lordicon WordPress Plugin.
STEP 1 STEP 2
Icon Adjustments 1. TOGGLE SIZE, STROKE AND COLORS
Toggle Size, Stroke & Colors panel in order to make changes. 2. ADJUST SIZE, STROKE, OR COLORS TO CUSTOMIZE AN ICON
NONE Presents the first frame of the animation.
CLICK Plays animation from first to the last frame after clicking on the icon.
HOVER Plays animation from first to the last frame after hovering over the icon.
LOOP Plays animation from the first to the last frame infinitely, without any
interactions. Does animation play too often? Set a delay time to add
a break between each loop.
LOOP It works the same as loop trigger, but only when the cursor is over the
ON HOVER icon. Once the cursor is off the icon the animation stops. Here, you can
set delay as well.
MORPH This animation player is reserved for animated icons that as unique first
and last frames. As long as the cursor is over the icon, animation plays
from the first to the last frame. Once you hover off the icon,
the animation go back from last to the first frame.
MORPH It triggers animation after hovering on the icon. The animation plays from
TWO WAY first to the last frame and then immediately goes back from last to the
first frame.
Animation Trigger
Now it is time to set an animation trigger. Would you like the icon to
animate on hover, click or maybe loop with a 2-seconds delay between
each loop? Set it up correctly to achieve the best user experience.
STEP 1 STEP 2
Embed it 1. REVEAL SHORTCODE SECTION
Once you are happy with the adjustments, you can either save your post 2. COPY & PASTE SHORTCODE IN YOUR PROJECT OUTSIDE
GUTENBER EDITOR
or head into the „Shortcode” section, copy the code and embed it as a
Block in web builders like Divi, Elementor, or any other website project
including custom themes.
Thank you
Hope you have find this guide helpful.
Do you have a question? Visit [Link]/help
or contact us directly: supprt@[Link]