Skip to content

Modules

Pair a headline with one or two buttons so a section ends with a clear next step. It includes an eyebrow line, headline, supporting text, and buttons in one module.

Call To Action pairs a headline with one or two buttons so a section ends with a clear next step. One module holds the eyebrow line, headline, supporting text, and buttons. This module works in Divi 5.

Divi Call To Action module banner with an eyebrow line, headline, supporting text, and two buttons

How to add the Call To Action module

  1. Add a section and row, then add the Call To Action module.
  2. Enter the headline and the button text, and link the buttons.
  3. Pick a layout and alignment.

Content

Text

  • Eyebrow: The short line above the headline. Leave it empty to hide it.
  • Headline: The main line.
  • Body: Supporting text. Leave it empty to hide it.

Buttons

  • Primary Button Text with its link. Clear the text to hide the button.
  • Use Second Button: Off by default. Turn it on to add Secondary Button Text for a second action.

Layout

  • Layout: Stacked (default), Text, then buttons, or Buttons, then text. Side-by-side layouts stack on phones.
  • Alignment: Left, Center (default), or Right.

Design

Layout & Overlay

  • Content Width: Keeps long text readable inside wide sections. Default 100%. It has no effect on the side-by-side layouts.
  • Use Overlay: Off by default. Tints whatever sits behind the text, such as a background image.
  • Overlay Color: Default rgba(0,0,0,0.4).

Button Spacing

  • Space Between Buttons: Default 16px.

Text and buttons

The Eyebrow Text, Headline Text, Body Text, Primary Button, and Secondary Button groups style each part. The standard Divi background and spacing options cover the rest.

Tip

Keep the primary button for the one action you actually want, and use the second button for the lower-commitment alternative, like a demo or a features page.