Divi 5 already provides you with helpful tactics to paintings with icons, SVGs, mask, and background design. The local SVG module permits you to upload SVG markup and magnificence it with Divi controls, whilst Divi’s masks and background equipment come up with extra tactics to form photographs and sections.
However some initiatives want extra selection than the default equipment supply. Shopper websites, brand-heavy touchdown pages, 404 templates, provider playing cards, function grids, and editorial layouts continuously want icons and shapes that really feel extra explicit.
This is the place two Divi Market extensions from Divi Den can lend a hand: Divi Icon Library and Divi Mask Library.
Divi Icon Library provides a searchable library of 14,000+ SVG icons without delay within the Visible Builder. Divi Masks Library provides 4,500+ hand-drawn SVG shapes you’ll save and observe as mask. Each are constructed for Divi 5, and each are designed to come up with extra visible choices with out leaving the builder.
On this Product Spotlight, we can have a look at what each and every extension does, how they paintings, and a couple of sensible tactics to make use of them in actual Divi 5 layouts.
Divi Icon Library: 14,000+ SVG Icons Inside of The Visible Builder
Divi Icon Library provides a customized Icon Library module to Divi 5. As soon as the extension is lively, the module seems within the Visible Builder along Divi’s local modules.
Recall to mind it as a quicker technique to in finding and use customized SVG icons. Divi’s local SVG module turns out to be useful when you have already got the SVG markup or document you wish to have to make use of. Divi Icon Library provides you with a searchable selection of SVG icons from within the builder, so you’ll browse, make a choice, and magnificence an icon with out sourcing one somewhere else.
Whilst you upload the module and open the icon picker, you get a searchable modal with 3 icon types:
- Line: Stroke-based icons that paintings neatly for light-weight UI and description types.
- Form: Forged icons that paintings neatly for daring visible accents.
- Crammed: Two-tone icons with each stroke and fill controls.
A class sidebar is helping slim the library through matter, and the quest updates as you sort. That makes a 14,000+ icon library sensible to make use of since you aren’t pressured to scroll thru all of the assortment manually.
The benefit turns into transparent when you wish to have a selected image. A generic icon set can have a handful of industrial, social, or interface icons. This library provides you with extra space to check the icon to the web page, trade, or message.
As an example, in case you are development a bit about products and services, advantages, classes, or options, you’ll seek for extra explicit phrases and switch icons till the set feels balanced.
How The Icons Are Styled
The icons render as inline SVG, this means that they keep sharp at any dimension and don’t depend on icon fonts at the entrance finish.
The module additionally comprises the design controls you may be expecting from a Divi component:
- Colour controls: Alter stroke, line, fill, or accessory colours relying at the icon taste.
- Responsive sizing: Set the icon dimension and regulate it in keeping with breakpoint.
- Stroke width: Tremendous-tune line thickness for supported icon types.
- Alignment controls: Place the icon inside of its structure.
- Hover states: Create easy interactive colour or styling adjustments when wanted.
Now not each icon taste exposes the similar controls. A cast form icon does now not want the similar stroke settings as a line icon, for instance. Make a choice the way that fits the design controls you wish to have.
Divi Masks Library: 4,500+ Customized Mask For Divi 5
Divi Mask Library works otherwise from the icon extension. As an alternative of including a brand new content material module, it provides you with a big library of SVG shapes that may be stored and carried out as mask in Divi 5.
The library comprises 4,500+ hand-drawn shapes throughout 56 classes. The shapes are CC0 authorized, which makes them usable for private, shopper, and industrial initiatives with out attribution.
The workflow begins outdoor the Visible Builder. Open the Masks Library web page in WordPress, browse the cloud library, seek through key phrase, or clear out through class. Whilst you discover a form you wish to have to make use of, reserve it for your web page.
The ones stored mask are saved in the community on your WordPress database. That implies the broadcast web page does now not want to name an exterior cloud library simply to render the masks.
As soon as stored, the mask seem in Divi’s masks workflow. You’ll observe them from the Masks Library possibility crew on supported image-bearing modules, and stored mask additionally seem in Divi’s local Background > Masks picker.
Masks Controls
After making use of a masks, you’ll regulate the way it behaves. Not unusual controls come with:
- Measurement: Keep watch over how huge the masks seems, together with customized sizing.
- Place: Position the masks the place it really works very best over the picture or background.
- Repeat: Repeat the masks development when the design requires it.
- Turn: Turn the masks horizontally, vertically, or each.
- Mode: Use commonplace or inverted protecting.
- Rotate: Rotate the form to suit the composition.
The ones settings may also be particularly helpful as a result of mask hardly want to be used precisely as-is. A form might paintings higher flipped, turned around, resized, repeated, or inverted.
The masks controls additionally enhance responsive and hover-state workflows, so a masks may also be adjusted for desktop, pill, telephone, or interactive states.
5 Sensible Tactics To Use Divi Icon Library And Divi Masks Library
Those extensions are most dear once they make an actual structure really feel extra intentional. Listed below are 5 examples that display how icons and mask can reinforce odd sections.
1. Create A 404 Web page That Fits The Logo
A 404 web page is a great position for a small visible thought. On this instance, the structure makes use of 3 inline parts: a Textual content module with 4, an Icon Library module within the heart, and some other Textual content module with 4.
The icon turns into the 0.
That one switch we could the web page fit the trade. A dental web page can use a teeth. A cleansing corporate can use a twig bottle. A park provider can use a tree. A health model can use a dumbbell. The structure remains the similar, however the message turns into extra explicit.
That is the place a deep icon library is helping. You aren’t simply adorning the web page. You might be the use of the icon to make a generic template really feel adore it belongs to that web page.
2. Exchange Border Radius With A Background Masks
Border radius turns out to be useful, however it may possibly solely spherical corners. Mask can create extra expressive shapes.
On this instance, the hero phase began with a background picture formed through border radius. Disposing of the radius turns it again right into a simple rectangle. Making use of a half-pill masks brings the unique form again, however with extra flexibility.
Now the picture form is swappable. The similar structure may use a blob, brush stroke, torn edge, natural curve, or geometric masks with out rebuilding the phase.
3. Upload Persona To An Symbol Collage
Symbol collages can simply turn out to be a grid of rectangles. Mask lend a hand wreck that development.
On this instance, two photographs in a five-image collage had been masked. One picture makes use of a repeating semi-circle form to melt the brink of the grid. Every other makes use of an inverted line masks to create a cutout that feels associated with the content material.
The structure nonetheless feels structured, but it surely now not looks as if 5 flat picture bins.
4. Use Mask On Photographs And Backgrounds
Divi Masks Library may also be helpful in multiple context. You’ll observe mask to picture modules and to background photographs.
That implies a portrait, product picture, hero background, phase background, or ornamental picture can proportion the similar form language.
That is useful when you wish to have a design motif to copy throughout a web page. A form can seem within the hero, go back in a card, and display up once more in a background remedy.
5. Give Social Icons Extra Selection
Social icons are small, however they are able to nonetheless have an effect on the tone of a design.
On this instance, the phase began with usual social icons. Divi Icon Library provides you with extra diversifications for a similar social platforms, which makes it more straightforward to check the icon weight, nook taste, and total persona of the structure.
That turns out to be useful when the default model is technically right kind however visually now not somewhat proper.
The use of The Divi Den Libraries
Each extensions set up like different Divi Market merchandise.
After activation, Divi Icon Library provides the Icon Library module to the Divi 5 module listing. Divi Masks Library provides its masks workflow for supported image-bearing modules and stored mask for Divi’s background masks picker.
The present Divi Den documentation lists each merchandise as Divi 5-only. Divi 4 isn’t supported. Divi Den additionally lists WordPress 6.3+ and PHP 8.0+ as minimal necessities.
Pricing
On the time of writing, each extensions are indexed at the Divi Market at $5 each and every.
Every Market checklist comprises:
- Limitless website online utilization
- GPL licensing
- 12 months of enhance and updates
- 30-day money-back ensure
As a result of pricing and licensing main points can exchange, test the Market pages earlier than buying.
About Divi Den
Divi Den is a long-running third-party Divi author and Divi Market writer. Its product lineup comprises Divi Den Professional, Divi Icon Library, and Divi Masks Library. Divi Icon Library and Divi Masks Library resolve two explicit design issues: discovering extra icons and developing extra customized picture shapes. Each do this within the Divi 5 workflow, which is what makes them helpful.
Use the icon library when a design wishes a greater image. Use the masks library when a rectangle isn’t sufficient. Use each when you wish to have a Divi 5 structure to really feel extra customized with out leaving the Visible Builder.
The submit Divi Product Highlight: Divi Icon Library & Divi Mask Library gave the impression first on Elegant Themes Blog.
0 Comments