WP and Divi Icons Professional is a third-party plugin that provides over 3900 icons with 11 other kinds to the Divi Builder. Icons come with Font Superior, Subject matter Design, and customized icons. You’ll be able to additionally add your individual and use them with the entire others. On this put up, we’ll take a detailed take a look at WP and Divi Icons Professional to lend a hand you make a decision if it’s the precise Divi plugin on your icon wishes.

Let’s get to it!

About WP and Divi Icons Professional

WP and Divi Icons Professional come with over 3400 single-color icons and 500 multicolor icons. It really works with the vintage editor, Gutenberg, and it integrates into Divi modules so it’s all the time to be had without reference to the editor you’re the usage of. The multicolor icons come with an editor so you’ll specify the colours. This makes them paintings smartly along with your branding.

For Divi, it’s to be had inside of any Divi Module that incorporates icons or a content material editor such because the Icon Module, Blurb Module, Accordion Module, Button Module, Toggle Module, Textual content Module, Name to Motion Module, and many others. We’ll see each choices on this put up.

WP and Divi Icons Professional Divi Module Settings

The entire Divi modules that show icons have a brand new possibility to select the icon sort, extra icons to make a choice from, and extra choices within the filter out. It additionally features a hyperlink to the WP and Divi Icons Professional plugin settings web page (extra in this later). An instance of a Divi module that accommodates an icon is the Blurb Module. Once you put in and turn on the WP and Divi Icons Professional plugin, a whole new vary of icons will seem within the icons house.

WP and Divi Icons Pro Tutorial

Icon Kind

The Icon Kind means that you can choose between Unmarried Colour Icons and Multicolor Icons. With Unmarried Colour Icon decided on, you’ll see the usual icon picker with seek and a filter out (as observed within the symbol above). With Multicolor Icon decided on, you’ll see a brand new variety window referred to as Icon Taste. This has 9 choices to make a choice from. Those choices divide the icons via design taste.

WP and Divi Icons Pro Tutorial

Deciding on a design taste displays handiest that form of icon within the icon variety window. This window nonetheless contains the quest and filter out choices. The filter out has already been implemented, so it handiest displays the choices that pertain to that design taste.

WP and Divi Icons Pro Tutorial

Colours are adjusted within the Design tab. Settings come with the main, secondary, and tertiary icon colours. The icon I’ve decided on displays two colours.

WP and Divi Icons Pro Tutorial

If the icon has 3 colours, you’ll regulate all 3. This case makes use of 3 colours. Some icons, like the only on this instance, upload a fourth shade that’s a color of the 0.33 shade.

WP and Divi Icons Pro Tutorial

Icon Filter out

The icon selector contains seek and filter out choices. The filter out contains Define, Hand Drawn, Caricature, Crammed, Multicolor, and extra. The filter out possibility means that you can temporarily in finding the icon you need within the taste you prefer.

WP and Divi Icons Pro Tutorial

To go looking, simply input the key phrase of the kind of icon you’re on the lookout for. For instance, input “software” to seek out the entire software icons. You’ll be able to filter out those even additional if you need.

WP and Divi Icons Pro Tutorial

Taste the WP and Divi Icons Professional Icons

The icons combine with Divi and paintings the similar as all Divi icons. Styling the WP and Divi Icons Professional icons is equal to styling any icon with Divi modules. Within the instance underneath, we’ve added a white background shade and a 1 pixel border.

WP and Divi Icons Pro Tutorial

WP and Divi Icons Professional Content material Editor

All Divi modules with a content material editor, reminiscent of the only discovered within the Textual content Module, Name to Motion Module, Accordion Module, Blurb Module, and many others., come with an possibility within the toolbar so as to add an icon on your content material.

WP and Divi Icons Pro Tutorial

This opens an icon insertion window that permits you to upload an icon in-line with the content material the place you’ve positioned your cursor. Deciding on this opens the icon selector modal the place you’ll choose unmarried or multicolor icons, select the icon sort, seek, select a colour, alternate the icon dimension, see the icon name, and upload a CSS elegance. In fact, it additionally features a window with the icons you’ll choose. You’ll be able to upload as many icons as you need on your content material.

WP and Divi Icons Pro Tutorial

Multicolor icons upload extra shade choices to the editor. It’ll upload both two or 3 shade pickers relying at the icon you select.

WP and Divi Icons Pro Tutorial

You’ll be able to double-click the icon within the content material to open the window once more to select a special icon or make changes.

WP and Divi Icons Pro Tutorial

WP and Divi Icons Professional Plugin Settings

WP and Divi Icons Professional features a settings display screen with a number of tabs the place you’ll make changes, add icons, select the icons you need to make use of, and spot directions on the usage of the plugin.

Efficiency Tab

The Efficiency tab means that you can disable the icons you don’t wish to use. Uncheck them they usually received’t seem within the icon selectors. This is helping support Divi’s efficiency since you’re now not loading unused icons. On this instance, I’ve unchecked the Font Superior and Subject matter Design icons.

Multicolor Icons Tab

Multicolor Icons assist you to specify shade schemes on your icons. The colours you specify right here seem on the finish of the icon lists. To start with, the multicolor icons didn’t seem within the Divi icon selector till I outlined a colour scheme within the WP and Divi Icons Professional plugin settings. Thankfully, that is simple to do.

WP and Divi Icons Pro Plugin Settings

Pass to Divi > WP and Divi Icons within the dashboard menu. Make a selection the Multicolor Icons tab. Click on Upload Colour Scheme and choose the colours to specify your individual or click on Save to make use of the default colours. You’ll be able to regulate 3 other colours. You’ll be able to upload a couple of shade schemes and you’ll additionally take away any shade scheme you don’t wish to stay.

WP and Divi Icons Pro Plugin Settings

Customized Icons Tab

The Customized Icons tab means that you can add customized SVG icon units. When they’re added, they’re to be had inside the Divi modules identical to the others. To add them, click on Add New Icon Set, choose Make a choice Document within the modal that opens, and choose your icons. The zip record for the customized icon font should be generated with Fontello or Icomoon.

WP and Divi Icons Pro Plugin Settings

It does take a few steps, however it’s easy and simple. Pass to Fontello or Icomoon and add your fonts to their platforms. Then, obtain the icons as a zipped record of their structure. After getting your zipped record, add it within the Customized Icons tab. Your icons combine with the entire different icons.

WP and Divi Icons Pro Plugin Settings

The place to Acquire WP and Divi Icons Professional

WP and Divi Icons Professional is to be had within the Divi Market for $79. It contains limitless website online utilization, 1 yr of give a boost to and updates, and a 30-day money-back ensure.

Where to Purchase WP and Divi Icons Pro

Finishing Ideas

That’s our take a look at WP and Divi Icons Professional. It integrates smartly into the Divi Builder and gives a number of techniques so as to add icons on your layouts and content material. The options and settings are intuitive. I just like the way to disable any icons I’m now not the usage of to avoid wasting internet sources. I additionally like the power to add my icons. They do should be in a undeniable structure, however thankfully, it isn’t tricky to create them in that structure. In case you’re fascinated by including a whole lot of new icons on your website online, WP and Divi Icons Professional is value a glance.

We wish to pay attention from you. Have you ever attempted WP and Divi Icons Professional? Tell us what you take into consideration it within the feedback.

The put up Divi Plugin Spotlight: WP and Divi Icons Professional seemed first on Sublime Issues Weblog.

WordPress Web Design

[ continue ]