The Divi 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 Code 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, which will show the list of all available Divi modules.Find the Code module and click on it to load it. Alternatively, you can use the Search option to find it.
{Gif here}
The Divi Code Module Use Cases
Embedding Third-Party Plugins: Integrate 3rd-party plugins by placing their shortcodes within the 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: Insert CSS snippets directly into the page, allowing you to add advanced designed options through custom CSS code.
Code Module Settings Breakdown
Once you've added the 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 lets you add code (HTML, CSS, or JS), set the module link, customize the background, and tweak essential design settings.
Text - Add HTML, CSS and/or JS code.
Link - Make the entire Code module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Code module's background styles.
Admin Label - Choose the 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 Code module are in this tab.
Text - Choose the overall Code module's text styles for this module.
Sizing - Choose the Code module's sizing.
Spacing - Choose the Code module's spacing.
Border - Choose the Code module's border styles.
Box Shadow - Choose the Code module's Box Shadow styles.
Filters - Choose the Code module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Code module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the 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 code to fine-tune your 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 Code's module visibility based on different devices.
Transitions - Choose how long 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 Code's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the 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.
