- Click the “Choose Your Image” box to select an image to display on your CTA box.
- Position: set the position of your image relative to the content box.
- Title: set the title of your CTA.
- Title HTML Tag: choose the HTML tag of the title (H1, H2, H3, etc.).
- Description: set the text of your CTA.
- Apply Link On: set the CTA link either on the button or the entire CTA box.
- Enable Button: click the switch to set up a button in the CTA box.
- Text: set the text on the CTA button.
- Link: set the link that the button redirects to. Click the gear icon to select if clicking the button opens in a new window, and to add nofollow to it.
Click on the Styles icon to edit the look of your Call to Action. Click on the dropdown menu of each of the sections to customize.
- Height: choose the height of the box.
- Alignment: choose how you want to align the content within your box.
- Vertical Position: choose the vertical position of your content within the box.
- Padding: set the padding parameters of the content within your box.
- Min. Width: choose the minimum width of your Call to Action image box.
- Min. Height: choose the minimum height of your Call to Action image box.
- Background Size: choose how you want your image to fit in the image box.
Here you can set many style options for the content of your Call to Action.
- Typography: choose the family, size, weight, style, letter spacing, etc. for each piece of content.
- Normal/Hover: choose to have the hover effect or not.
- Colors: choose to have background, title, and description colors.
Fist Button/Second Button
Customize your call to action button by choosing the width, the size and the typography.
- Border Width: choose the border width by typing in a number or by sliding the button.
- Border Radius: choose to have curved edges and the radius of the curve.
- Margins & Padding: choose to add margins or padding to your button.
- Hover/Normal: activate a hover effect or leave it static.
- Text/Border/Background: choose and customize the colors for each of these.
Apply effects to the image of your Call to Action.
- Image Hover Animation: set the type of animation upon hover.
- Animation duration: how long the animation will be upon hover.
- Normal/Hover: enable or disable hover.
- Overlay color: enable overlay color or not.
- CSS Filters: set blur, brightness, saturation, and hue.
- Blend Mode: choose how your overlay color blends with your image.