CTA - Create Beautiful Call To Action That Drive Engagement
Take Your Design Skills To The Next Level!
Dive in to check all the creative addons that let you enhance the possibilities of SP PageBuilder with creative elements and a user friendly interface at hand.
Take Your Design Skills To The Next Level!
Dive in to check all the creative addons that let you enhance the possibilities of SP PageBuilder
with creative elements and a user friendly interface at hand.
Content Fields
Here is a list of common content fields for Call To Action add-on.
| Setting | Description |
|---|---|
| Title | A text field used for title of the Call To Action |
| HTML Element | Choose the title html element from the list to fit your semantic structure. |
| Style | Heading styles differ in font-size but may also come with a predefined color, size and font |
| Heading Decoration | Decorate the heading with a divider, bullet or a line that is vertically centered to the heading. |
| Title Color | Select the text color. If the background options is selected, styles that don't apply a background image use the primary color instead. |
| Content | A text field for the main text blocks. |
| Button text | A text field for the button text. |
Layout Settings
| Setting | Description |
|---|---|
| Button Position | Align the button to the top,left,right or place it between the title and the content. |
| Grid Width | Define the width of the button within the grid. Choose between percent and fixed widths or expand columns to the width of their content.. |
| Grid Gutter | Select the gutter width between the button and content items. |
| Grid Breakpoint | Set the breakpoint from which grid cells will stack. |
Content Settings
| Setting | Description |
|---|---|
| Global Text color | Set light or dark color mode for text, buttons and controls if you use dark or light background mode. |
| Link Button Style | Set the button style. |
| Button Size | Set the Button Size |
| Full width button | Set the Full width button |
| Title text transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |