Published May 1, 2024 • Divi / WordPress

The Problem

Divi's fullwidth slider only lets you add one button per slide. If you want two buttons (like "Learn More" and "Contact Us"), you're out of luck with the built-in options.

Elegant Themes still hasn't added this as a feature, so here's the workaround.

How to Add Two Buttons

You'll be adding HTML directly to the slide content and using CSS classes that Divi already provides. This isn't elegant, but it works.

Important: Use the Text Editor

1. Add a Fullwidth Slider module and create a new slide
2. Switch to the Text editor tab (not Visual)
3. Paste the HTML code below
4. Save and do not flip back to Visual editor or it will strip the formatting

Method 1: With Mobile Optimization (Recommended)

This version stacks the buttons vertically on mobile devices for better usability.

HTML for the Slide Content:

<a class="phoneFixExample et_pb_more_button et_pb_button second_button special_button_front" href="https://yourlink1.com">Button 1 Text</a> <span class="hideStuff">      </span><a class="phoneFixExample et_pb_more_button et_pb_button second_button special_button_front" href="https://yourlink2.com">Button 2 Text</a>

Replace the href URLs and button text with your actual links and labels.

CSS for Your Child Theme:

Add this to your child theme's style.css or in Appearance → Customize → Additional CSS:

/*------------------------------------------------*/
/*---------------[Button Example]-----------------*/
/*------------------------------------------------*/
@media (max-width: 767px) {
    .phoneFixExample {
        display: block;
        min-width: 225px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .hideStuff {
        display:none;
    }
}

This CSS makes the buttons stack on phones and centers them for better touch targets.

Method 2: Simple Version (No Child Theme)

If you don't want to mess with CSS files, use this simpler HTML-only version:

<a class="makeBlock et_pb_more_button et_pb_button second_button special_button_front" href="https://yourlink1.com">Button 1 Text</a>      <a class="makeBlock et_pb_more_button et_pb_button second_button special_button_front" href="https://yourlink2.com">Button 2 Text</a>

This version works but doesn't look as good on mobile devices. The buttons will be small and side-by-side.

Bonus: Reduce Slider Height

If your fullwidth slider is too tall for just text and buttons, you can adjust the height directly in the builder.

Edit the fullwidth slider module, go to Advanced → Custom CSS, and find the Slide Description field. Add this:

position: relative;
top: 30px;
padding-top: 0;
padding-bottom: 0;
min-height: 225px;

Adjust the min-height value to control how tall the slider is. Lower numbers make it shorter.

Why This Is Annoying

This shouldn't require a workaround. Elegant Themes should have added two-button support years ago.

But this is what happens when you build sites with page builders. You're locked into what the theme developer thinks you need, and you end up writing hacky code to get around their limitations.

This is why I don't use WordPress or Divi anymore. Clean, custom HTML is easier to work with and doesn't break when the theme updates.