Dual Buttons

Dual Buttons places two Divi buttons side by side inside one module, with an optional text or icon connector between them. It works in Divi 4 and Divi 5. Use it whenever a section needs two calls to action instead of one.

Building side-by-side buttons with two separate Divi Button modules means fighting with columns and custom CSS to keep them aligned and evenly spaced. Dual Buttons handles the layout and the gap, and gives each button its own independent styling.

How to add the Dual Buttons module

Open a page with the Divi Builder and add a section and row.
Click the + icon, search for Dual Buttons, and insert it.
Set the text and link for each button, then choose a connector style.

Content

Primary

The first button in the pair. It is the one on the left in a left-to-right layout.

Button Text: The label, for example "Get started". The default is Button 1. Supports dynamic content.
Button Link: The destination URL. Supports dynamic content, so it can pull from a post or custom field.
Button Link Target: Same Tab (default) or New Tab.

Connector

The connector sits between the two buttons.

Connector Type: No Connector (default) for a plain gap, Text for a word, or Icon for a symbol.
Connector Text: The word shown between the buttons. Defaults to OR.
Connector Icon: An icon from the icon picker, used instead of text.

Secondary

The second button, with the same three options as the primary: Button Text (default Button 2), Button Link, and Button Link Target.

Design

General

Button Alignment: Left (default), Center, or Right. This is a responsive option, so you can center the pair on desktop and left-align it on phones.
Button Gap: The space between the two buttons, from 0 to 250px. Defaults to 40px. This is also a responsive option.

Primary Button and Secondary Button

Each button has its own group with the standard Divi button options, plus Border and Box Shadow. Because the two are styled separately, you can pair a solid primary button with a ghost or outline secondary.

Connector

Connector Text Size: Default 14px.
Text Color: Default #333.
Background: The fill behind the connector. Default is transparent.
Connector Size and Connector Radius: Defaults are 30px and 0px. Set the radius to half the size for a circular badge.
Connector Border Width and Connector Border Color: Outline the connector. Defaults are 0px and transparent.

Tip

Give the two buttons different visual weight rather than making them identical. A filled primary and an outlined secondary tells visitors which action you want them to take, and it reads faster than two matching buttons that force people to stop and compare both.

Frequently asked questions

How do I change the alignment and gap on phones?

Switch the Divi builder to the phone view, then change Button Alignment and Button Gap in the General group of the Design tab. Both settings are responsive.

Can I put an icon between the two buttons instead of text?

Yes. Set Connector Type to Icon and pick an icon. Style it with the Connector Size, Connector Radius, Background, and border options to turn it into a circular badge between the buttons.

Does Dual Buttons work in Divi 5?

Yes. Dual Buttons is built natively for Divi 5 and also runs in Divi 4. Existing Divi 4 layouts that use the module convert when you open them in the Divi 5 Builder.

Can I use more than two buttons?

No. The module is built for exactly two buttons, and that is deliberate. Two options is a choice. More than two is a menu that slows people down. If you need three or more actions in a row, place individual Divi Button modules in separate columns instead.