Call To Action

The Call To Action Widget shows a title, a subtitle and a button in one box. Use it to ask visitors to take one clear step, such as booking a call or starting a free trial.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate the Call To Action Widget.

You can use the Call To Action Widget anywhere:

Page Builder: Insert the widget in Page Builder by SiteOrigin, in the Classic Editor or in the Page Builder Layout Block.
Block Editor: Insert the SiteOrigin Call To Action block. You will find it in the SiteOrigin category.
Theme and Plugin Widget Areas: Insert the widget into any theme or plugin widget area.

Settings

Title
The main heading of the call to action.

Subtitle
The text below the title.

The Call To Action widget form with the Design and Button sections

The form has two more sections: Design and Button.

Design

Colors

Background Color
The background color of the box. Default: #f8f8f8.

Border Color
The 1px border color of the box. Default: #e3e3e3.

Title Color
The title text color. Leave it empty to use the theme color.

Subtitle Color
The subtitle text color. Leave it empty to use the theme color.

Fonts

Title HTML Tag
The HTML tag for the title. Choose H1 to H6 or Paragraph. Default: H4.

Title Font Family
The title font. Leave it on the default to use the theme font.

Title Font Size
The title font size. Leave it empty to use the theme size.

Subtitle HTML Tag
At the moment, this setting has no effect. The subtitle uses the same tag as the title.

Subtitle Font Family
The subtitle font. Leave it on the default to use the theme font.

Subtitle Font Size
The subtitle font size. Leave it empty to use the theme size.

Layout

Desktop Button Align
The position of the button next to the text. Default: Right. The options are:

  • Center Top: The button is above the text. The text is centered.
  • Left: The button is to the left of the text.
  • Center Bottom: The button is below the text. The text is centered.
  • Right: The button is to the right of the text.

Mobile Button Align
The position of the button on small screens. The options are:

  • Desktop Button Align: Keep the desktop position.
  • Center Top: The button is above the text. The text is centered.
  • Center Bottom: The button is below the text. The text is centered.

By default, the button keeps its desktop position on small screens. The widget uses the mobile position at or below the Responsive Breakpoint. See Global Settings below.

Button

This section contains the settings of the SiteOrigin Button Widget. The Align and Mobile Align settings are not available here, because the Layout settings above control the button position.

Button Text
The text on the button.

Destination URL
The URL the button links to. Enter a URL, or use the Select Content button to find a post or page on your site.

Open in a new window
Opens the link in a new tab or window. Disabled by default.

Download
Downloads the Destination URL when a visitor clicks the button. Disabled by default.

Icon

Icon
Click Choose Icon to select an icon from the icon libraries. Click the selected icon again to remove it.

Icon Color
The icon color.

Image Icon
An image from your Media Library to use in place of the icon.

Icon Placement
The icon position on the button. Choose Top, Right, Bottom or Left. Default: Left.

Design and Layout

Width
The button width. Leave it empty to fit the button to its text.

Button Theme
The button style. Choose Atom, Flat or Wire. Default: Flat.

Button Color
The button background color. With the Wire theme, the background is transparent, and this color sets the border and the text.

Text Color
The button text color. The Wire theme does not use it.

Use hover effects
Changes the button colors when a visitor hovers over it. Enabled by default. When enabled, two more settings show:

  • Hover Background Color: The base background color on hover. The Flat and Atom themes lighten it slightly.
  • Hover Text Color: The text color on hover.

Font
The button font. Default: the theme font.

Font Size
The button text size. Default: 1em.

Icon Size
The size of the icon you chose with Choose Icon. It does not change an Image Icon. Default: 1.3em.

Padding
The space between the text and the edge of the button. Default: 1em.

Rounding
The corner radius for the top, right, bottom and left corners. Default: 0.25em for each corner.

Other Attributes and SEO

Button ID
An ID attribute for the button. Use it to target the button in JavaScript.

Button Classes
Extra CSS classes for the button link.

Title Attribute
A title attribute for the button link.

Onclick
JavaScript that runs when a visitor clicks the button. Use it for tracking.

Rel Attribute
A rel attribute for the button link, for example nofollow.

A call to action on the front end with the button on the right

Global Settings

Go to PluginsSiteOrigin Widgets and click Settings on the Call To Action Widget.

Responsive Breakpoint
At or below this screen width, the widget uses the Mobile Button Align setting. Default: 780px.

SiteOrigin Premium

The Call To Action Addon in SiteOrigin Premium adds these settings to the Design section:

  • Image: A new sub-section. Select an image from the Media Library, or enter an external URL. Image Display puts the image in the background (the default), or to the right or left of the text. You can also set the Background Style, the Gutter and the Image Size.
  • Content Vertical Alignment: In the Layout sub-section. Aligns the text and the button to the top, center or bottom of a side image. It shows only when the image is to the right or left of the text.
  • Padding: In the Layout sub-section. Sets the padding of the box for each side. Default: 2em 2.5em 2em 2.5em.