Useful Divi Code Snippets for Real Projects

Divi, the flagship theme and page builder by Elegant Themes, is a powerful tool for designing dynamic and responsive websites without any coding knowledge. However, for professionals and developers looking to go beyond the standard visual controls and unlock the full potential of Divi, using custom code snippets can make a world of difference. This article presents a trusted collection of practical and useful Divi code snippets to enhance real-world projects. Whether you’re customizing layouts, improving performance, or troubleshooting design issues, these snippets are designed to help you deliver polished results faster and more efficiently.

1. Hide the Divi Header on Specific Pages

If you want to create a landing page or a special layout without the standard header, you can hide it by using a conditional snippet in your child theme’s functions.php file:

function hide_header_on_specific_pages() {
    if ( is_page(array('landing-page', 'custom-page-slug')) ) {
        echo '<style>#main-header { display: none !important; }</style>';
    }
}
add_action('wp_head', 'hide_header_on_specific_pages');

Replace ‘landing-page’ and ‘custom-page-slug’ with the actual slugs of your pages.

2. Add Gradient Overlay to Divi Background Images

Sometimes, images may need an overlay gradient to ensure text visibility. This quick CSS trick can be added via the Theme Options panel or a child theme’s stylesheet:

.et_pb_section {
    position: relative;
}

.et_pb_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
    z-index: 1;
}

.et_pb_column {
    position: relative;
    z-index: 2;
}

This adds a subtle gradient overlay effect on any section background image, improving contrast and readability.

3. Improve Divi Page Load Time by Removing Unused Scripts

Divi loads some scripts globally, even if they are not used on the current page. You can improve page performance by removing unnecessary styles and scripts like the gallery shortcode and dashicons for non-logged-in users.

function remove_unused_divi_scripts() {
    if (!is_user_logged_in()) {
        wp_dequeue_style('dashicons');
        wp_dequeue_script('divi-custom-gallery-script');
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_divi_scripts', 100);

This performance optimization is particularly useful for live environments where page speed is critical.

4. Prevent Divi Module Animations on Mobile Devices

While animations add a dynamic feel, they may not render properly on mobile or can slow page performance. Disable all Divi animations on smaller screens with this snippet:

@media only screen and (max-width: 768px) {
    .et-waypoint {
        opacity: 1 !important;
        transform: none !important;
    }
}

Use this CSS snippet in your Theme Customizer or child theme’s style.css to maintain a smoother mobile experience.

5. Create a Sticky CTA Button in Divi

A sticky call-to-action (CTA) button boosts engagement by staying visible as users scroll. Use the following CSS to make any Divi button stick to the bottom right of the screen:

.sticky-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background-color: #ff5a5f;
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Then, add the class sticky-cta to your button module inside the Divi builder.

6. Add Google Fonts Manually for Performance

To optimize font loading, especially when working in multilingual environments or when performance is a concern, consider disabling Divi’s default Google Fonts and adding only the fonts you use:

// Disable Divi's Google Fonts
function disable_divi_google_fonts() {
    wp_dequeue_style('et-gf-open-sans');
    wp_dequeue_style('et-builder-googlefonts');
}
add_action('wp_enqueue_scripts', 'disable_divi_google_fonts', 20);

Then you can manually enqueue only the fonts you need using:

function add_custom_google_fonts() {
    wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'add_custom_google_fonts' );

This approach reduces HTTP requests and improves loading time.

7. Force Full-Width Image in Blog Module

By default, featured images in Divi’s blog module are constrained. To set the image to full width, use this custom CSS:

.et_pb_post .et_pb_image_container img {
    width: 100% !important;
    height: auto !important;
}

This ensures your blog’s visual elements look consistent and clean across devices.

8. Add Breadcrumbs to Divi Pages

For better navigation and SEO, integrating breadcrumbs is a smart idea. If you use Yoast SEO or Rank Math, you can insert their breadcrumbs into Divi like this:

function insert_breadcrumbs() {
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb('
','
');
    }
}
// Add this into a Divi Code Module or Template

Or, for Rank Math:

function insert_breadcrumbs() {
    if ( function_exists('rank_math_the_breadcrumbs') ) {
        rank_math_the_breadcrumbs();
    }
}

9. Customize Footer Credits in Divi

Remove or replace the default footer credit via PHP by hooking into et_footer_credits:

function custom_footer_credits() {
    echo '© ' . date('Y') . ' Your Company Name. All rights reserved.';
}
add_filter( 'et_footer_credits', 'custom_footer_credits' );

This ensures your branding is consistently applied across the site, without relying on the Theme Customizer panel.

10. Track Button Clicks with Google Analytics

Tracking the performance of CTAs is essential. Add an onClick attribute in your button settings or through JavaScript:

<a href="#" onclick="gtag('event', 'click', {
  'event_category': 'CTA',
  'event_label': 'Homepage CTA Button'
});">Click Me</a>

This allows you to track engagement and optimize conversion strategies using Google Analytics 4.

Tips for Using Code Snippets Effectively

• Always use a child theme to prevent your changes from being lost during updates.
• Back up your site before implementing custom PHP or JavaScript.
• Use developer tools like the browser inspector and Divi’s built-in tools to test and debug snippets.
• Keep things modular—separate snippets by function for easier management.

Conclusion

Divi is an extremely capable platform that enables pixel-perfect web design. But to truly harness its power, understanding how to enhance it with code is crucial. The snippets we’ve shared above are practical, efficient, and proven in real projects—covering everything from performance tuning to aesthetic customizations and SEO enhancements.

By integrating these Divi code snippets into your workflow, you not only expand your creative and technical toolkit but also deliver projects that are both beautiful and functional. Whether you’re an agency, freelancer, or internal developer, these tidbits of code are key ingredients for building professional-grade websites with Divi.