Tendencies in internet design alternate significantly yr to yr. One thing that turns out to have taken hang and stayed, alternatively, is the usage of animation. The extra other folks use cellular gadgets and apps, the extra they be expecting the websites they consult with to make use of one of the vital similar ideas. Using animation smartly can spice up consumer interplay, permitting you to lead your web site’s guests during the enjoy you wish to have them to have. That is the place the Lordicon provider is available in.

What’s Lordicon?

Lordicon is a choice of cool animated icons that can be utilized in a couple of virtual codecs. Every icon is to be had in JSON, GIF, EPS, SVG, and PNG codecs. Moreover, you’ll reproduction and paste usual HTML codes. The use of HTML makes it conceivable to combine icons in maximum CMS and static HTML environments with out the will for any plugins.

Lordicon gives get admission to to over 5,600 animated icons of their library. You’ll be able to use over 1000 of the ones Lordicon icons without cost. On the other hand, if you wish to have get admission to to the whole library, you’ll want a subscription. Getting began with Lordicon is modest. Join along with your electronic mail cope with, set a password, and you’re ready to browse their intensive library. Should you’re a developer, signing up with GitHub is also the best way of all.

Sign Up With Lordicon

You’ll have two icon classes to choose between upon join.

  • Stressed icons are extra trendy and expressive icons which can be absolutely customizable. You might make a selection your colours, set the velocity for the animation, make a selection whether or not to loop, or make a selection the animation taste.
  • Gadget icons are extra just like the icons introduced by means of Font Superior and very similar to the way that comes embedded in Divi.

Select Your Icon Style

Earlier than we display you easy methods to use Lordicon, let’s move over the pricing choices so you’ll make a decision whether or not Lordicon is one thing you’d like to make use of to your internet sites.

How A lot Does Lordicon Value?

Lordicon is unfastened to make use of! On the other hand, as we discussed sooner than, you’ll want a paid subscription to make use of the entire icon permutations. Lordicon gives two worth issues. You’ll be able to choose to pay per thirty days, which is able to price $16 per thirty days. If you select to buy an annual plan, your price is minimize in part to $8 per thirty days or $96 annually.

It must be famous, too, that with a paid subscription, you’ll even have extra keep an eye on over how you combine your icons into your site.

Lordicon Pricing

Navigating the Lordicon Interface

The Lordicon interface is modest and smartly concept out. Step one is to browse for icons. While you’ve discovered the only you’d like to make use of, merely click on on it to carry up your choices. Along with your icon decided on, you’ll edit it with the choices indexed within the sidebar. Right here you’ll set your colours and stroke width. From there, you’ll reproduction HTML, obtain it as a GIF or Lottie (JSON), or click on the extra button for extra choices.

Should you’d like complete keep an eye on parameters to your icon, merely click on the arrow in the fitting sidebar to drag up the whole editor.

Navigating the Lordicon Interface

Within the complete editor, you’ll get a couple of extra choices at your disposal. Along with opting for your colour and stroke measurement, you’ll be ready to make a choice a variation to your icon. There are in most cases 3 other permutations you’ll make a choice from so to fit your web site’s aesthetic regardless.

Further choices come with cause taste, measurement, and scale. While you’ve made the adjustments you favor, you’ll obtain or embed your icon.

Lordicon Full Editor

Obtain choices come with Embedding with HTML, Loridcon Lottie JSON, GIF, APNG, WebP, and MP4 codecs. Moreover, you’ll obtain supply information in EPS, Lottie JSON, or After Results codecs.

Download Options

You’ll be able to then import those information into WordPress’s media library to be used as you notice have compatibility.

The right way to Use Lordicon with any WordPress Website

It’s reasonably simple to embed Lordicons on WordPress websites the usage of Gutenberg blocks with the Lordicon plugin. Lordicon’s documentation states that their icons can also be simply embedded on any WordPress site using Gutenberg blocks or the usage of Divi modules (or different web site developers). Moreover, they’ve partnered with Slider Revolution to combine their icons into sliders.

The use of Gutenberg Blocks

The use of Lordicon icons with Gutenberg is easy. There are two ways in which you’ll do it. The primary method is to set your design parameters in Lordicon and reproduction the HTML to make use of in a Customized HTML block in Gutenberg. The second one is the usage of the Lordicon Animated Icons plugin with its personal customized block in Gutenberg.

First, you want to put in and turn on the Lordicon plugin from the WordPress dashboard. As soon as activated, create or edit a web page or submit to your WordPress site. Subsequent, click on the black + icon to make a choice the Lordicon Part block.

Using Lordicon Gutenberg Block

Subsequent, head over to the Lordicon icon library. For this situation, we’re going to make use of the bee icon. Seek for the bee, then the arrow to open the whole editor.

Lordicon Bee Icon

Embedding Your Icon in Gutenberg

Embedding your icon can also be accomplished certainly one of two tactics. The primary method is to obtain the JSON document from Lordicon, then add it for your WordPress web site. The second one method is to click on the HTML button and replica the CDN hyperlink within the embed code to easily hyperlink to it.

Both method works smartly, however the usage of JSONs to your web site has the possible to sluggish it down. If you’re handiest making plans on the usage of a few animation results right here and there, it’s completely tremendous. On the other hand, if you wish to use a couple of JSON information, it may well be perfect to make use of the CDN hyperlink so Lordicon delivers the picture themselves.

For this situation, we’ll use the CDN hyperlink. To embed your icon to your web site, click on the HTML button at the bee icon display screen and reproduction the CDN hyperlink.

Bee CDN link

Head again over for your site and paste the CDN hyperlink into the Icon URL box of the block settings. Subsequent, you’ll set your cause, and make a selection a prolong time (if desired). In any case, set your icon measurement, stroke weight, and hues.

Gutenberg Lordicon Settings

That’s it. As you’ll see, Lordicon icons are easy to make use of and be offering a number of tactics to combine them into your WordPress site the usage of the Gutenberg editor.

If at the probability you don’t need to use the Lordicon plugin and make a selection code embed,  you’ll practice the similar steps that we define within the subsequent segment, changing the Divi Code Module with the Customized HTML block in Gutenberg.

The right way to Use Lordicon with Divi

Subsequent, we’ll display you easy methods to incorporate those animated icons in Divi. For this educational, we’re going to make use of the Mobile App Landing Page layout to be had (without cost!) along with your Elegant Themes membership. You’ll be able to get admission to all our pre-made format packs from throughout the Divi Builder itself.

There are a couple of tactics you’ll incorporate Lordicon icons in Divi. The use of a GIF, including HTML right into a Divi Code Module, or the usage of a shortcode. Let’s discover each and every choice so you’ll make a selection which one is perfect for you.

The use of a GIF

For this educational, let’s use the touchdown web page from the Mobile App Layout pack. First, we’ll take the blurbs underneath the hero segment and substitute the picture with Lordicon GIFs. Colour pick out the pink from the hero segment and head over to Lordicon to make a choice the Clock icon. Click on at the inexperienced default colour and substitute it with #6f4fff. Click on practice to avoid wasting your adjustments.

Changing the Icon Color

There are 3 types for the icon. Select the road taste (the center choice proven within the screenshot under) for our icon.

Below preview settings, set the cause to Loop on hover, and measurement to Large.

Subsequent, set the to be had movement kind to Hover-1. This may occasionally have your icon animate on hover and loop the animation.

Then, alter the stroke width to 35%. After getting the proper settings, click on the GIF button to obtain your icon.

Clock Icon Settings

When the conversation field seems, choose clear for the background, 100px for the scale, and go away the default 250ms for the prolong. Click on the DOWNLOAD button.

Download the Clock Lordicon Icon

Upload Your Icon to Divi

Head again over to the Divi builder and choose the primary blurb in underneath the hero segment. Click on the equipment icon to edit, then choose the Symbol & Icon segment dropdown. Click on at the already put in calendar icon to switch it. Make a selection your newly Downloaded GIF so as to add it to the media library.

Change the Blurb Icon

Subsequent, click on at the Design tab and scroll right down to Symbol/Icon Width. Set the width of your icon to be 100px. Go away the alignment set to left, then click on the inexperienced test to avoid wasting the module.

Blurb Design Settings

Whilst embedding a GIF into your Divi site is modest, let’s discover an extra method you’ll incorporate Lordicon animated icons into your Divi web site.

The use of the Divi Code Module

This system offers you just a little extra keep an eye on over how your icon is gifted. Embedding a GIF works nice however limits one of the vital animation results. As an example, results similar to hover don’t serve as when the usage of a GIF. In an effort to have true keep an eye on over all facets of ways your Lordicon icon seems in Divi, we propose the usage of the Divi Code Module.

The use of the Code module is modest. The use of the similar format pack web page, navigate to the second one Blurb module at the web page. This time, we’re going to delete the picture from the Blurb module and put it aside.

Divi Code Module

While you’ve stored, click on the black + icon and to find the Divi Code Module. Upload it to the segment/row above the Blurb.

lordicon divi code module

Head again over to Lordicon and click on the EMBED HTML button. This may occasionally carry up the Embed on WEB conversation field. Be certain Loop on Hover is chosen. Then be sure that your measurement is ready to 100px. In any case, click on the COPY HTML CODE button.

Lordicon Divi Code Module Settings

Now, head again over for your Divi web page and paste that HTML into the Code module. Reserve it, and the brand new Lordicon embed must seem above the Blurb module that you simply got rid of the picture from.

Embed Lordicon HTML

The use of a Shortcode

The stairs to make use of a shortcode are similar to embedding HTML. In Lordicon, seek for the rising plant icon. Below preview settings, set the cause to Loop on hover and the scale to giant. Exchange their usual inexperienced colour with #6f4fff. Set the stroke width to 35%. In any case, obtain the JSON document by means of clicking the JSON (LOTTIE) button.

Growing Plant Icon Settings

Subsequent, you’ll both add the JSON you downloaded from Lordicon for your WordPress media library, or hyperlink to a URL you’ll to find within the HTML code.

Lordicon import

We propose linking to a URL for your shortcode reasonably than importing it for your media library. This may occasionally save area to your web site, particularly for those who plan to make use of a couple of icons, in addition to server processes. Lordicon shortcodes start with [lord-icon] and finish with [/lord-icon]. If the usage of a CDN hyperlink, your shortcode will seem like this:

[lord-icon src="https://cdn.lordicon.com/bccqzuyr.json" 
trigger="hover" size="100" palette="#000000, #6f4fff"]

For the icon supply (src=), you’ll reproduction the hyperlink from the rising plant icon within the HTML code. Be certain your animation is ready to hover, measurement is ready to 100, and your colours (palette) are #000000 and #6f4fff.

Creating your Shortcode

The closing step is to position your shortcode into the Divi Code Module and put it aside. Your shortcode must seem like the screenshot under.

Style of Shortcodes

Including new icons during the web site can also be achieved by means of copying the shortcode above, then converting out the CDN hyperlink in conjunction with your cause taste, measurement, and hues (if you want to have other animation results).

It’s vital to notice that these things are set whilst you create your icon at the Lordicon site.

Which Manner is Highest?

Should you check out your web page, you’ll see some variations between the GIF Lordicon icon and the HTML code you embedded. The primary distinction is that the GIF animates often. The code blocks we created animate handiest when hovered over. It’s as much as you which ones way you select.

Remember that a few of your customers is also delicate to motion. Whilst having motion and animations on internet sites is an effective way to stay customers engaged, you don’t need to overdo it. Now and again delicate interactions are all you want to create pastime for your design.

Lordicon Icons Make a Nice Addition to Your Web page

With internet design trending extra against the cellular app enjoy, animation has transform an integral a part of internet design. Incorporating delicate animation is an effective way to improve the feel and appear of your site. With over 1,000 unfastened icons and hundreds extra to be had with a Lordicon subscription, you must for sure take a better have a look at their choices. Particularly with it being really easy to combine into each WordPress and Divi.

Have you ever used Lordicon? If this is the case, let us know about your enjoy under.

Featured Symbol by the use of i_photos / shutterstock.com

The submit How to Use Lordicon with WordPress and Divi gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]