The Divi Fullwidth Code Module lets you insert HTML, CSS, JavaScript, shortcodes, or third-party code, like calendars or CRM integrations, anywhere on your site.
Add The Divi Fullwidth Code Module
When you load the Visual Builder, Divi automatically adds a Section.
Click on the Blue Plus
icon to insert a Fullwidth section.Click on the Fullwidth button.
Find the Fullwidth Code module and click on it to load it. Alternatively, you can use the Search option to find it.
{Gif here}
The Divi Fullwidth Code Module Use Cases
Embedding Third-Party Plugins: Integrate 3rd-party plugins by placing their shortFullwidth Codes within the Fullwidth Code Module, enabling advanced functionalities.
Adding Custom JavaScript: Insert JavaScript snippets directly into your page to enhance interactivity, such as implementing unique animations or form validations.
Adding Custom CSS: You can insert CSS snippets directly into the page, allowing you to add advanced design options through custom CSS Full-Width Code.
Fullwidth Code Module Settings Breakdown
Once you've added the Fullwidth Code 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
The Content tab allows you to add Full-Width Code (HTML, CSS, or JS), set the module link, customize the background, and tweak essential design settings.
Text - Add HTML, CSS, and/or JS Fullwidth Code.
Link - Make the entire Fullwidth Code module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Fullwidth Code module's background styles.
Admin Label - Choose the Fullwidth Code module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
Notes:
CSS Code should be wrapped by the
<style></style>tags.JS Code should be wrapped by the
<script></script>tags.
The Design tab
All the design styles and options for the Fullwidth Code module are in this tab.
Text - Choose the overall Fullwidth Code module's text styles for this module.
Sizing - Choose the Fullwidth Code module's sizing.
Spacing - Choose the Fullwidth Code module's spacing.
Border - Choose the Fullwidth Code module's border styles.
Box Shadow - Choose the Fullwidth Code module's Box Shadow styles.
Filters - Choose the Fullwidth Code module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Fullwidth Code module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Fullwidth Code module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
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 CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS Fullwidth Code to fine-tune your Fullwidth Code 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 Fullwidth Code's module visibility based on different devices.
Transitions - Choose how long Fullwidth Code's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Fullwidth Code's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Fullwidth Code 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.
