Unlike other elements this element has more styling options from title to button to background style all under the main General tab.
In the Basic tab we have the following options:
- Admin Label- Add a custom label to the element to clearly identify it in the page back-end layout.
- Title- Add the CTA title here.
- HTML Tag- Choose the required tag applied on the title.
- Description- Add description on the cta.
- Button Text- Enter the button text here.
- Link- Add link on the button. Only enabled if you have added any button text.
- Ribbon Text- Enter the ribbon text in the text field.
Next is the CTA Styling options, that are:
- Min Height- Set the min height of the element.
- Vertical Position- Choose the element position vertically.
- Alignment- Choose the element position horizontally.
Now comes Title Styling:
- Title Typography- Manage the font style, size, spacing or even line height via the typography field.
- Title Colors- Add color to the title text.
- Spacing- Adjust the space between title & description.
Under Description Styling we have:
- Description Typography- Manage the font style, size, spacing or even line height via the typography field.
- Description Colors- Add color to the description text.
- Spacing- Adjust the space between button & description.
Next tab is of Button Styling, and the options are:
- Button Type- Choose the button type from the given global options.
- Size- Manage the button size from small to large.
- Button Color Options- Design the button by adding different colors other than its default type.
- Button Hover Color Options- Add button hover colors.
- Button Padding- Adjust the button padding to increase its size.
- Button Typography- Style the button text via the typography field.
Next is are the Button Border Styling tab for styling the button border normally & on hover.
Next to it is Ribbon Styling tab for styling the CTA ribbon, we the following options:
- Ribbon Position- Adjust the position of the ribbon either left or right.
- Ribbon Colors- Style the ribbon in different colors using the color picker.
- Ribbon Distance- Manage the distance between content & ribbon by sliding over the values.
- Typography- Set the ribbon text typography from different font styles to sizes to its alignment all can be managed here.
Now we have the CTA Background options tab from where you can set Color or an Image or Video or can even add a Gradient to the CTA element’s background. If not then don’t do anything just keep it to None!
CTA Background Overlay options only work when you have taken Image or a Video as the background from the above tab. Here we have the following options:
- Opacity- Adjust the opacity over the background added.
- Overlay Color- Add your background overlay color from the color picker.
- Overlay Image- If not the color or along with the color add an overlay image and manage its position.
Adjust your CTA’s Border settings and Spacing from CTA Border & CTA Spacing tabs.
Lastly you can also customize your cta on hover under CTA Hover Options tab, similar to the CTA Background options we have Color, Image & Gradient here and if you feel lazy just do None!
