Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Call to Action Module with the Website Page Designer

Call to Action Module with the Website Page Designer

The Call to Action module is a combination of a title, body text, and a button that has the purpose of grabbing the attention of your visitors. It is usually used when you want to prompt the users to take a specific action.

To create a call-to-action with the page designer, add a new module by clicking on the gray plus sign. Choose the gallery module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

In the contents tab you will find the options to define what goes into your call-to-action.

Text

Here you can the title, the button text and the content of the call to action. If you don’t want to have a button leave the button field blank.

Link

Define here the link that the button will open and choose if it will open in the same window or the same tab.

If you want that the entire module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Body Text

You can also adjust the font settings for the body text.

Button

You can enable button customization and then adjust its text size, color, and fonts, background color, border settings, and button icon.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. You can also define the button’s rel attribute here. Check this guide to know more about how to use these settings.

Use Case

Let’s create a Call to Action for a sale.

We are adding the following content:

And background color: #7a9fbf

And these design options:

Text Orientation: Center

Text Color: Light

Title Text Weight: Ultra bold

Title Text Size: 45px

Title Text Color: #f7de00

Body Text Size: 20px

Body Text Color: #ffffff

Body Line Height: 1.8em

Use Custom Styles for Button: YES

Button Text Size: 20

Button Text Color: #ffffff

Button Background Color: #f7de00

Button Border Color: #ffffff

Button Border Radius: 100

Button Letter Spacing: 4px

Show Button Icon: YES

Button Icon: arrow

Button Icon Color: #ffffff

Only Show Icon on Hover: NO

Here it is!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?