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.
In the contents tab you will find the options to define what goes into your call-to-action.
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.
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.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.
Define the font, color, alignment, line height, and other settings for the title.
You can also adjust the font settings for the body text.
You can enable button customization and then adjust its text size, color, and fonts, background color, border settings, and button icon.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
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.
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!