Published May 1, 2024 • Divi / WordPress

Two Buttons in an Older Divi Slider: Check the Layout First

How can an older Divi slide offer two useful links? This archived example uses HTML in the content, with layout checks before use.

The original guide concerned Divi 3.x. Treat it as an older example, rather than a tested guide to current Divi 5.

Check whether two choices belong on the slide

If one action does the job, keep it simple. A second button should serve a clear need, with a label explaining its destination.

The Fullwidth Slider documentation describes slide body content and a button link. Your installed version and editor may differ from this archive.

Work on a saved copy or staging page before changing a live layout. Keep the original content so you can undo the experiment.

Archived HTML for two links

This sample puts two anchor links in the slide content. Where your editor has a Text or HTML view, inspect the saved markup there.

Replace each example address and its label with the intended destination. The placeholder links below aren't your website's contact or booking pages.

<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>

Check the saved visitor view after leaving the editor. A preview alone doesn't prove that both links work in the published layout.

The original phone layout example

This CSS stacks the example buttons below 768 pixels and hides the spacing span. Its fixed minimum width needs checking on narrow screens.

/*------------------------------------------------*/
/*---------------[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;
    }
}

Don't assume those dimensions fit your fonts or slide text. Check long labels, zoomed text and space around each control.

Other archived samples

The earlier article also included this shorter HTML variation. Check the spacing in your theme before choosing this 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>

The following values were suggested for the slide description's CSS area. Treat them as layout examples, rather than universal settings.

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

Changing an offset or minimum height can affect nearby content. Check other slides before keeping the adjustment.

Choose a small fix when it is enough

Open each destination and check that its page matches the label. Also check whether the same choices are clear on a phone.

You don't need a complete replacement site just to straighten out two buttons. First establish what the installed layout can support.