Create beautiful boxes that are visually attractive, informative, and actionable using the 10Web Call to Action premium widget.
The Content Tab
Image
Position: Choose to position your image to the left, center, or right, in relation to the text.
Graphic Element: Choose your graphic element from image, icon, or none.
Image: Click on the image box to upload an image.
Icon: Choose an icon from the drop down menu. Choose the shape from circle or square and the view from default, stacked, or framed.
Content
Title: Title of your call to action box.
Title HTML Tag: From the drop down menu, choose the HTML tag of your title.
Description: Write a description to be displayed on your CTA.
Apply Link On: Choose to apply a link to only the button or the whole box.
First Button/ Second Button
Enable Button: Click on the toggle to show or hide the button from your CTA box.
Text: Customize the text of your button.
Link: Set the link that the button redirects to. Click the gear icon to choose to redirect in a new window and to add nofollow to it.
Button Alignment: In case of a second button, choose how to align the buttons relative to each other. Choose from vertical or horizontal.
The Styles Tab
Box
Minimum Height: Specify the height of your CTA box.
Alignment: Set the horizontal alignment of your text to the left, center, or to the right of the box.
Vertical Positioning: Set the vertical alignment of your text to the top, center, or the bottom of the box.
Padding: Set the padding parameters of the content within your box.
Image
Minimum Width: Set the minimum width of your CTA image box.
Minimum Height: Set the minimum height of your CTA image box.
Background Size: Choose how you want your image to fit in the image box.
Content
Typography: Choose the family, size, weight, style, letter spacing, etc. for Title and Description.
Normal/Hover: Choose to have the hover effect or not.
Color: Set the Background, Title, and Description color.
First Button/ Second Button
Width: Adjust the width of the button.
Size: Choose a button size from extra small to extra large.
Typography: Choose the typography settings for the button text.
Border Width: Adjust the width of the button border.
Border Radius: Set the curvature of the border edges.
Margins & Padding: Choose to add margins or padding to your button.
Hover/Normal: Activate a hover effect or leave it static.
Color: Customize colors for button text, border, and background.
Hover Effects
Animate your Call to Action box by using hover effects and CSS filters.
Image Hover Animation: Choose the type of animation upon hover.
Animation Duration: Set the time span of the animation.
Normal/Hover: Enable or disable hover.
Overlay Color: Place color on top of image.
CSS Filters: Adjust filters to get the look needed for your image.
Blend Mode: Choose how to blend the overlay color with your image.
The Advanced Tab
In the advanced tab adjust the padding, apply Z-index to your elements, set conditions, motion effects, responsiveness, and more.
Next Up: Block Quote Widget