Some of the newest Divi 5 updates offered Carousels and Lottie Animations, in addition to one thing each and every website online can use: the brand new Icon Listing Module. As an alternative of undeniable bullet issues, you’ll be able to create styled lists with significant icons that upload readability and visible enchantment.
Recall to mind options on a product web page, steps in a procedure, services and products in a pricing desk, and even advantages on a touchdown web page. The Icon Listing Module makes these kind of more uncomplicated to design and extra enticing for guests.
On this publish, we’ll duvet the whole lot you want to understand concerning the Icon Listing Module, from options to sensible use circumstances, so you’ll be able to improve your lists and strengthen your Divi websites.
What Is The Icon Listing Module?
The Icon Listing module in Divi 5 is designed to create interesting, structured lists that strengthen your website online’s design. By means of permitting you to pair every record merchandise with a novel icon, this module transforms undeniable textual content into skilled, enticing content material.
Ahead of Divi 5, developing stylized lists in Divi required formatting Textual content or Blurb Modules, which used to be much less environment friendly. The Icon Listing module fills this hole, providing a devoted resolution that’s user-friendly and extremely customizable.
Key Options
The Icon Listing module has options that make it a really perfect addition to Divi 5. Listed below are its key options:
Simple Listing Introduction
Create lists briefly via including pieces and assigning icons from Divi’s in depth icon library or importing customized icons. The module’s intuitive interface allows you to construct polished lists in mins, saving time in comparison to handbook formatting.
Intensive Customization Choices
Make a choice from loads of integrated icons, regulate their measurement, shade, and location to create a cohesive glance that aligns together with your website online’s design.
Leverage Divi’s robust design settings to customise fonts, textual content colours, spacing, alignment, and backgrounds. You’ll be able to additionally upload hover results or animations to make your lists extra interactive.
How To Use The Icon Listing Module
Getting began with Divi 5’s Icon Listing module is straightforward. Create a brand new web page or open an present one. Click on so as to add a brand new module and make a selection Icon Listing.
After including the module, you’ll see 3 Icon Listing Pieces within the content material tab. Let’s get started via clicking at the first one to edit it.
Within the Content material tab, input a name within the Textual content box.
Subsequent, increase the Icon dropdown tab. Right here, you’ll be able to choose between loads of icons within the Divi library. You’ll be able to seek for icons or scroll to search out the only you’d like to make use of.
The Icon Listing module permits you to upload hyperlinks to particular person record pieces, making it simple to hyperlink to different pages, attachments, and extra.
The Design Tab is the place you’ll be able to taste your icon record pieces. Within the Icon dropdown menu, assign an icon shade and measurement.
Within the background tab, you’ll be able to assign your icon a background shade, upload a border or field shadow, and regulate spacing.
Any other choices come with Textual content, the place you keep watch over the alignment of the textual content or upload a textual content shadow. On the other hand, to taste the textual content, make a selection the Frame Textual content dropdown menu. You’ll be able to assign a font, weight, taste, textual content alignment, shade, measurement, and extra there.
Like several different Divi modules, you’ll be able to keep watch over sizing, spacing, border, and field shadows and upload filters, transitions, or animations.
When you’ve styled the primary icon record merchandise, you’ll be able to simply replica it, exchange the icon, and replace the textual content.
Including House Between Icon Listing Pieces
Within the earlier phase, we demonstrated how one can upload icon record pieces. On this phase, we’ll evaluation how one can regulate format houses the usage of Divi 5’s Flexbox Format Machine. As you’ll be able to see, lets use a bit of area between every of our icon record pieces.
In the principle Icon Listing module settings, click on at the Design tab. Find the Format dropdown menu and increase it to expose the settings.
By means of default, Flex is chosen underneath Format Taste. This lets you use Divi 5’s Flexbox settings to keep watch over spacing, format instructions, and alignment. So as to add spacing between every Icon Listing merchandise, merely regulate the Vertical Hole. This provides respiring room between every merchandise, giving our record extra visible enchantment.
Common Design Settings For All Icon Listing Pieces
Along with styling Icon Listing pieces in my view, you’ll be able to use the principle module’s design settings so as to add kinds to each and every icon record merchandise immediately. As an example, if you need your whole icons to have the similar shade, textual content, or background kinds, you’ll be able to do it on the module stage.
Whether or not you need to taste record pieces in my view or as an entire, the Icon Listing module in Divi 5 supplies a good way to show off knowledge in a extra user-friendly means.
Sensible Examples The usage of The Icon Listing Module
The Icon Listing module is flexible and will toughen other spaces of your web page. Listed below are a couple of sensible examples to encourage your designs.
Trip Blogs
The Icon Listing module gives a good way to create enticing content material to your trip weblog. You’ll be able to use it to focus on classes to your weblog, trip itineraries, packing pointers, or vacation spot highlights. Moreover, you’ll be able to mix hover results and use other icons for every record merchandise to provide knowledge in a transparent, trendy means.
Options On A Industry Website
Use the Icon Listing module to show off your online business’s services and products. Assign related icons and customise colours to compare your logo. You’ll be able to additionally upload hyperlinks to provider pages for simple navigation.
Step-By means of-Step Procedure Information
Create a listing outlining the stairs of a procedure, like “How to enroll”. Use checkmarks to visually information customers thru every step, making complicated knowledge extra digestible.
E-Trade Retailer Pages
For e-commerce websites, use the Icon Listing module to focus on your retailer’s options. Pair with Divi 5’s Woo modules to create a cohesive product class web page.
@media simplest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}
Obtain For Loose
Sign up for the Divi Publication and we can electronic mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus lots of alternative wonderful and loose Divi assets, pointers and methods. Apply alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your electronic mail deal with under and click on obtain to get admission to the format pack.
You’ve effectively subscribed. Please test your electronic mail deal with to substantiate your subscription and get get admission to to loose weekly Divi format packs!
Use The Icon Listing Module In Divi 5
The Icon Listing module in Divi 5 gives a good way to create trendy, purposeful lists with little effort. Its ease of use, powerful customization choices, and seamless integration with Divi 5’s new options make it essential for Divi customers. Whether or not you’re highlighting services and products, guiding customers thru a procedure, or showcasing product options, this module is helping you ship skilled effects that interact your target audience.
Able to take a look at it? Obtain the newest Divi 5 Public Alpha nowadays and discover the Icon Listing module your self. Keep tuned for extra Divi 5 updates as we roll out new options.
The publish The entirety You Want To Know About Divi 5’s Icon Listing Module seemed first on Sublime Topics Weblog.
WordPress Web Design