Prompt visitors to take action with a customizable title, subtitle, button, and design settings.
Requirements
To use this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Call To Action Widget.
The Call To Action is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
Settings
Title
Insert a title for the call to action.
Subtitle
Insert a subtitle for the call to action.
Next, you’ll see two main sections; each contains a list of settings and sub-sections:
- Design
- Button
Design
Colors
Background Color
Select a background color for the call to action.
Border Color
Select a border color for the call to action.
Title Color
Select the call to action title color.
Subtitle Color
Select the call to action subtitle color.
Fonts
Title HTML Tag
Select the title HTML tag. Defaults to H4.
Title Font Family
Select the title font family. Defaults to the theme font.
Title Font Size
Optionally enter a title font size.
Subtitle HTML Tag
Select the subtitle HTML tag. Defaults to H5.
Subtitle Font Family
Select the subtitle font family. Defaults to the theme font.
Subtitle Font Size
Optionally enter a subtitle font size.
Layout
Desktop Button Align
Select the button alignment for desktop.
Mobile Button Align
Select the button alignment for mobile.
Content Vertical Alignment
Choose between Top, Center, and Bottom. Available as part of the SiteOrigin Premium Call To Action Addon.
Padding
Set the Call To Action container Top, Right, Bottom, and Left padding. Available as part of the SiteOrigin Premium Call To Action Addon.
Image
Available as part of the SiteOrigin Premium Call To Action Addon.
Add a Call to Action Image. The following settings are available:
Image
Select, upload or add an image via an External URL.
Image Display
Choose between Background Image, Right of Text, or Left of Text. If Right or Left of Text is selected, a Gutter setting will be displayed.
Background Style
Choose between Cover, Contain, Fixed, or Parallax.
Image Size
Select an image size from the list of available sizes in your WordPress installation.
Button
Button Text
Enter the call to action button text.
Destination URL
Enter the button destination URL/link. You can also use the Select Content button on the right to select existing content in your WordPress installation.
Open in a New Window
Enable to open the button link in a new window.
Download
Initiate a file download. The Destination URL will be downloaded when a user clicks on the button.
Icon
Optionally insert a button icon.
Icon
Use the Choose Icon button to select an icon from one of the icon libraries available. Once an icon is selected, you can click it again to deselect it.
Icon Color
Select the icon color.
Image Icon
Use the Choose Media button to select a custom icon from your media library or use the Image Search button to search for images on Pixabay.
Icon Placement
Choose between top, right, bottom, or left.
Design and Layout
Design and layout settings for the call to action button.
Width
Enter a width for the button or leave it blank to resize according to the content.
Button Theme
Select the button design theme, choose between Atom (rounded), Flat, or Wire.
Button Color
Select the button background color.
Text Color
Select the button text color.
Use Hover Effects
Enable to use hover effects.
Hover Background Color
Select the button hover background color.
Hover Text Color
Select the button hover text color.
Font
Select the button font family.
Font Size
Set the button font size. Defaults to 1em.
Padding
Padding is the distance between the text and the edge of the button. Defaults to 1em.
Rounding
Enter the button rounding value for the top, right, bottom, and left corners. Defaults to 0.25em.
Other Attributes and SEO
This section controls the call to action button’s other attributes and SEO. Optional fields that some users will find helpful.
Button ID
An ID attribute allows you to target this button in JavaScript.
Button Classes
Additional CSS classes added to the button link.
Title Attribute
Adds a title attribute to the button link.
Onclick
Run this JavaScript when the button is clicked—ideal for tracking.
Rel Attribute
Adds a rel attribute to the button link.