The Divi Icon Module lets you add customizable icons anywhere on your page using Divi’s native icons or the Font Awesome set. Icons can highlight important areas, showcase features, or add a stylish design element without clutter.
Add The Divi Icon Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row to open the Divi Module Library. The library contains all the modules included with the Divi theme.Find the Icon module and click on it to load the module.
The module library is also searchable. To access it, type the module name you want in the search bar at the top.
{Gif here}
The Divi Icon Module use cases
Enhancing Feature Sections: Use icons to represent different services or features, making your content more engaging and easier to understand.
Creating Visual Lists: Incorporate icons into lists to improve readability and add a visual element that guides users through information.
Designing Icon Buttons: Combine icons with links to create interactive buttons that draw attention to calls to action or important links.
Icon Module Settings Breakdown
Once you've added the Icon module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
Inside the Content tab, you can choose which Project Categories to display the projects in, which elements to show, set up the module link, and more.
Icon - Choose the Icon to be displayed.
Link - Make the entire Icon module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Icon module's background styles.
Admin Label - Choose the Icon module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Icon module are in this tab.
Icon - Choose the Icon module's color and size.
Alignment - Choose the Icon module's alignement.
Spacing - Choose the Icon module's spacing.
Border - Choose the Icon module's border styles.
Box Shadow - Choose the Icon module's Box Shadow styles.
Filters - Choose the Icon module's filters such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Icon module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Icon module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique identifiers or reusable labels to modules, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Icon module, enabling advanced styling that perfectly aligns with your vision.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Icon's module visibility based on different devices.
Transitions - Choose how long Icon's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Icon's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Icon module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
