In this article, we will see how Call To Action module shortcode works.
Here is the Shortcode-

Where,

admin_label = Admin Label for the module.

Title = Title for CTA module.

button_url = URL of the button.

url_new_window = “on” to open the link in “new window”, off to open in “same window”.

button_text = It reflects the text on button.

use_background_color = It determines whether to use background color or not.

background_color = To set background color.

background_layout = dark or light.

text_orientation = Specify the orientation of the text (i.e. Left, centered or Right).

use_border_color =  It determines whether to use border or not.

border_color =Color of border.

border_style =  It determines the border style (i.e. solid, dotted,

dashed, double, grove, ridge, inset and outset).

custom_button = Select “on” to customize the button and “off” to not to customize.

button_letter_spacing = It determines the letter spacing.

button_use_icon = Icon for the button.

button_icon_placement= Where to place the button (i.e. top or bottom).

button_on_hover = To select the hover effect (“on” or “off”).

button_letter_spacing_hover = Button letter spacing on hover (i.e. value=1, 2, 3…).

max_width= It sets the maximum width for module.

header_font = Font family for header text.

header_font_size = Size of the font of the header text (i.e. 1, 2, 3…..).

header_text_color = Text color of header text.

header_letter_spacing= Letter spacing for the Header Text (i.e 1,2,3.. etc.).

body_text_color = Text color for body.

border_width = Width of the border (i.e. 1px, 2px….).

button_font = Font Family for the button text (i.e. Arial etc. ).

button_icon_color = Color of button icon.

Above Call To Action Module Shortcode will create a button like in Following Image :

Call To Action Module Shortcode

Call To Action Module Preview

CTA Module in Depth

CTA (Call to Action) module is a major module in divi builder which is responsible for awesomely designed buttons. We can use the given shortcode anywhere (it can be footer, header and sidebar etc.) by simply putting it in CODE MODULE or in default wordpress editor. Lets see this module in little depth.

Basically there are three sections to design an awesome CTA button with this module.

  1. General Settings
  2. Advanced Design Settings
  3. Custom CSS

In General Settings-

There are all the basic settings available in this section including Button Link, Title, Background Color and Text Color etc. You can check the following Image for more detail.

Call To Action Module Shortcode

General settings of CTA

Advanced Design Settings-

This section can be used for little heavy customization like Max Width of the Module, Header Font Styling Background Images and border etc. for all kind of devices (Desktop, Tablet and Smartphone).

For more detail please look in the picture below:

Call To Action Module Shortcode

Advanced Settings of CTA

Once shortcode is created, then it can be used anywhere on the site.

Hope, this will help you. Let us know if you have any question related to this post, feel free to comment below, we will come back to you ASAP.

Important Notes

  • Tested on divi version 2.7.5
Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!

Share This