Responsive Divi Call to Action Module: 2026 Guide

The Divi Call to Action module remains one of the most effective tools for converting visitors into leads, subscribers, or customers. However, a static CTA that looks great on desktop can quickly become a usability nightmare on tablets and smartphones. In 2026, with mobile traffic accounting for over 65% of global web visits, responsive design is no longer optional—it is a fundamental requirement for SEO, user experience, and conversion rate optimization. This guide provides a comprehensive, step-by-step walkthrough for creating a fully responsive Divi Call to Action module using the latest Divi Builder (version 4.27+). We will move beyond basic settings and explore advanced techniques including fluid typography, conditional display logic, custom CSS with clamp() functions, and performance optimization. Whether you are building a landing page from scratch or retrofitting an existing layout, you will learn how to ensure your CTA delivers a seamless experience across every device. We will also address deprecated practices from older tutorials and provide modern replacements that align with 2026 web standards.

Understanding the Divi Call to Action Module in 2026

The Divi Call to Action module is a native element within the Divi Builder that allows you to combine a headline, body text, and a prominent button into a single, cohesive unit. Unlike generic text or button modules, the CTA module is purpose-built for conversion, offering integrated styling controls for typography, spacing, backgrounds, and borders. In Divi 4.27 and later, the module has received significant updates including improved responsive controls, dynamic content support, and enhanced accessibility features.

Why Responsiveness Matters More Than Ever

Responsive design is not just about making things fit. It is about optimizing the user journey for the context of each device. A user on a smartphone is often in a different mindset than someone on a desktop—they may be looking for quick information, a phone number, or a simplified action. A responsive CTA module adapts not only its size but also its content hierarchy, button placement, and visual weight.

Key reasons to prioritize responsiveness in 2026:

• SEO Impact: Google uses mobile-first indexing, meaning the mobile version of your page is the primary version for ranking. A poorly responsive CTA can increase bounce rates and harm your Core Web Vitals.
• Conversion Rates: Studies consistently show that mobile-optimized CTAs convert 20-30% better than non-optimized ones.
• Accessibility: Responsive design overlaps with accessibility. Touch targets must be large enough (minimum 44×44 pixels), and text must remain legible without zooming.
• User Expectation: Users now expect a seamless experience across devices. A broken layout signals a lack of professionalism and trust.

What You Will Need

Before starting, ensure you have:

• WordPress 6.5 or higher
• Divi Builder 4.27 or higher (the latest version as of 2026)
• A child theme (recommended for custom CSS)
• Basic familiarity with the Divi Builder interface
• Access to the Divi Charter Boat Layout Pack (free from Elegant Themes)

Setting Up the Page Template and Module

We will begin by installing the Charter Boat layout pack, which provides a realistic context for our CTA module. This layout includes a hero section, a features section, and a call-to-action area that we will customize.

Installing the Charter Boat Layout Pack

1. Create a new page in WordPress and click Use Divi Builder.
2. Select Choose a Premade Layout from the three options presented.
3. In the layout library, search for Charter Boat and click Use This Layout.
4. Wait for the layout to load completely, then save your page.

Once loaded, you will see a pre-built landing page. We will focus on the section that contains a text module and a button module—this is where we will insert our responsive CTA module.

Replacing Existing Modules with the Call to Action Module

1. Hover over the text module and click the trash icon to delete it.
2. Repeat for the button module.
3. Click the gray + icon to open the module library.
4. Search for Call to Action and click to insert it.

Your CTA module is now in place. The next step is to configure its content and design.

Configuring Content and Link Settings

The Content tab is where you define the textual and functional elements of your CTA. Proper configuration here ensures that your module communicates clearly and directs users to the right destination.

Adding Title, Body, and Button Text

In the Content tab, you will find fields for:

• Title: The main headline of your CTA. Keep it concise and action-oriented.
• Body Text: Optional supporting text. Use this to provide context or overcome objections.
• Button Text: The label for your call-to-action button. Use strong verbs like ‘Get Started’, ‘Download Now’, or ‘Claim Your Offer’.

For this tutorial, we will use:

• Title: ‘Ready to Set Sail?’
• Body: ‘Book your charter today and experience the ocean like never before.’
• Button: ‘Book Now’

Setting the Button Link URL

Scroll down to the Link tab. Enter the URL where you want to send users. This could be a contact page, a checkout page, or an external booking system. In 2026, consider using UTM parameters to track the performance of your CTA in analytics tools.

Example URL:

https://example.com/book?utm_source=website&utm_medium=cta&utm_campaign=charter_boat

Removing the Default Background Color

The default CTA module comes with a background color that may clash with your design. To remove it:

1. Go to the Background section.
2. Toggle Use Background Color to off.

This allows the section background to show through, creating a more integrated look.

Designing the Call to Action Module

With content in place, we move to the Design tab. Here, we will style the text, button, and overall layout to match the Charter Boat aesthetic while ensuring responsiveness.

Text Alignment and Color

1. Open the Text tab.
2. Set Text Alignment to Right.
3. Set Text Color to Light.

This aligns the CTA content to the right side of the module, which works well with the layout’s existing imagery.

Styling the Title Text

The title is the most prominent element. We will use a custom font and responsive sizing.

1. Scroll to the Title Text section.
2. Set Title Font to Cinzel (available in Divi’s font library).
3. Enable responsive settings by clicking the mobile icon next to Title Text Size.
4. Enter the following values:

These values ensure the title remains impactful on large screens without overwhelming smaller devices.

Configuring the Button

The button is the primary conversion element. We will customize its colors, borders, and padding.

1. In the Button section, toggle Use Custom Styles for Button to Yes.
2. Set the following:

These settings create a clean, modern button that stands out against the background.

Implementing Responsive Design for the Module

Now that the basic styling is complete, we need to ensure the module adapts gracefully across devices. Divi provides built-in responsive controls for most settings, but we will also use custom CSS for advanced fluid typography.

Using Divi’s Responsive Sizing Options

1. Go to the Sizing tab.
2. Enable responsive settings for Max Width.
3. Set the following values:

1. Set Module Alignment to Right for all devices.

These settings ensure the module occupies an appropriate amount of horizontal space on each device, preventing it from feeling cramped or overly stretched.

Advanced Fluid Typography with CSS clamp()

While Divi’s responsive controls are powerful, they rely on breakpoints. For truly fluid typography that scales smoothly between breakpoints, we can use the CSS clamp() function. This is a modern best practice in 2026.

Add the following CSS to your child theme’s stylesheet or the Divi Theme Options > Custom CSS box:

/* Fluid typography for Divi Call to Action Module */
.et_pb_promo .et_pb_promo_title {
  font-size: clamp(2rem, 5vw + 1rem, 7.5rem);
  line-height: 1.1;
}

.et_pb_promo .et_pb_promo_button {
  padding: clamp(0.8rem, 2vw, 1.2rem) clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

This CSS ensures the title and button scale smoothly from mobile to desktop without abrupt jumps at breakpoints. The clamp() function takes three arguments: a minimum value, a preferred value (usually a viewport-relative unit), and a maximum value.

Testing Responsiveness

Always test your module on real devices or using browser developer tools. Pay attention to:

• Touch target sizes (buttons should be at least 44×44 pixels)
• Text legibility (minimum 16px for body text)
• Contrast ratios (WCAG AA requires 4.5:1 for normal text)
• Horizontal overflow (no horizontal scrolling)

Adding and Styling Body Text

Body text provides additional context and can improve conversion rates by addressing user questions or concerns. However, on small screens, it may be better to hide it to reduce clutter.

Incorporating Body Text

1. In the Content tab, locate the Body field.
2. Enter your supporting text. For example: ‘Our charters include a licensed captain, fuel, and all safety equipment. Book online or call us at (555) 123-4567.’

Styling the Body Text

1. Go to the Design tab and open the Body Text section.
2. Set the following:

These settings ensure the body text is readable and complements the title.

Ensuring Body Text Responsiveness

On mobile devices, the body text may cause the CTA to become too tall, pushing the button below the fold. To hide it on smaller screens:

1. In the Content tab, hover over the Body label.
2. Click the tablet icon to enable responsive settings.
3. Select the Disable option for tablet and mobile.

Alternatively, you can use CSS to hide it:

@media (max-width: 980px) {
  .et_pb_promo .et_pb_promo_description {
    display: none;
  }
}

This approach gives you more control and can be conditionally applied.

Adjusting Backgrounds for Tablet and Mobile

The background of your CTA section can significantly impact its visual appeal and readability. On mobile, a different background image may be necessary to maintain contrast and focus.

Changing the Section Background on Mobile

1. Open the Section settings by clicking the gear icon on the section containing your CTA.
2. Go to the Background section.
3. Hover over the Background Image option and click the mobile icon.
4. Upload or select a different image that is optimized for mobile viewing.

Choose an image that is less busy and provides sufficient contrast for your text. In 2026, consider using WebP or AVIF formats for better performance.

Using Conditional Display Logic

Divi 4.27+ includes advanced conditional display options. You can show or hide entire sections based on device type, user role, or other conditions. To use this:

1. Open the Section settings.
2. Go to the Advanced tab.
3. Under Visibility, select Disable On and choose the devices where you want to hide the section.

This is useful if you want to create entirely different CTA sections for desktop and mobile.

Performance and Accessibility Considerations

A responsive CTA is not just about layout—it is also about performance and accessibility. These factors directly impact user experience and SEO.

Optimizing for Core Web Vitals

Core Web Vitals are a set of metrics that Google uses to evaluate page experience. Your CTA module can affect these metrics:

• Largest Contentful Paint (LCP): If your CTA contains a large image, ensure it is optimized and lazy-loaded. Use the loading='lazy' attribute for images below the fold.
• Cumulative Layout Shift (CLS): Avoid layout shifts by specifying image dimensions and reserving space for the CTA.
• First Input Delay (FID): Minimize JavaScript execution. Divi’s built-in performance options (found in Divi > Theme Options > Performance) can help.

Accessibility Best Practices

• Ensure sufficient color contrast between text and background.
• Use semantic HTML. The CTA module outputs a div with a button; consider adding ARIA labels if necessary.
• Make sure the button is keyboard-focusable and has a visible focus state.
• Test with screen readers to ensure the content is announced correctly.

Example of adding ARIA label via custom PHP:

// Add ARIA label to Divi Call to Action button
add_filter( 'et_pb_promo_button_output', function( $output, $props ) {
    if ( ! empty( $props['button_text'] ) ) {
        $output = str_replace( '<a', '<a aria-label=' . esc_attr( $props['button_text'] ) . '', $output );
    }
    return $output;
}, 10, 2 );

This code should be added to your child theme’s functions.php file.

Troubleshooting Common Issues

Even with careful configuration, you may encounter issues. Here are solutions to common problems.

Module Not Responsive

If your module is not responding to responsive settings:

• Ensure you have enabled responsive settings for each option by clicking the mobile icon.
• Check for custom CSS that may be overriding Divi’s styles.
• Clear any caching plugins and your browser cache.

Button Not Clickable on Mobile

If the button is not clickable on mobile:

• Check for overlapping elements with a higher z-index.
• Ensure the button has enough padding (minimum 44×44 pixels).
• Test with a different theme to rule out conflicts.

Background Image Not Loading on Mobile

If the mobile background image is not loading:

• Verify the image URL is correct.
• Check file permissions.
• Ensure the image is not being lazy-loaded incorrectly.

Conclusion

Creating a responsive Divi Call to Action module is a critical skill for any WordPress developer or designer in 2026. By leveraging Divi’s built-in responsive controls, advanced CSS techniques like clamp(), and performance best practices, you can build CTAs that not only look great but also convert effectively on every device. Remember to test on real devices, prioritize accessibility, and keep performance in mind. The techniques covered in this guide—from setting up the Charter Boat layout to implementing conditional display logic—provide a solid foundation for building high-converting, responsive CTAs. As Divi continues to evolve, stay updated with the latest version and explore new features like Divi AI for content generation and layout suggestions. Start implementing these strategies today and watch your conversion rates improve across all devices.