Button Widget

 

To use the Button widget, ensure its enabled in the Widgets Bundle dashboard at PluginsSiteOrigin Widgets. The Button widget can be inserted into any theme widget area at AppearanceWidgets or any page or post using Page Builder.

Once the Button widget has been inserted into your theme widget area or page/post using Page Builder, hover over it and click the Edit link to begin. You’ll find the following fields available:

Button text: Enter the text that’ll be displayed in the button.
Destination URL: Enter the button link. Use the Select Content button on the right to select a page or post in your WordPress installation.
Open in a new window: Enable to open the button link in a new window.

Next, you’ll see three sections, each contains a list of settings:

  • Icon
  • Design and Layout
  • Other attributes and SEO

Icon

Icon
Visually select an icon from several different icon libraries.

Icon Color
Set the selected icon’s color.

Image Icon
Replaces the icon with your own image icon. Use the Choose Media button to choose an image from your WordPress media library or click the Image Search button to search for royalty free images on Pixabay.

Design and Layout

Width
Leave blank to let the button resize according to content. Alternatively, insert a width value. Use the drop-down field next to the width field to select a unit of measurement. The default unit is pixels (px).

Align
Align the entire button on the page. Defaults to center. Choose between the following options: Left, Right, Center or Justify.

Button Theme
Select a button theme. Choose from Atom, Flat or Wire. Atom has a rounded effect which Flat removes. Wire removes the background color and only uses a border.

Button color
Select the button background color.

Text color
Select the button text color.

Use Hover Effects
For the Atom and Flat themes, hover effects will lighten the background slightly, for the Wire theme, the background will be added on hover.

Font Size
Set the button font size. Choose between Normal, Medium, Large or Extra Large.

Rounding
Set the button corner rounding. Defaults to Slightly rounded. Choose between None, Slightly rounded, Very rounded or Completely rounded.

Padding
Padding is the distance between the text and the edge of the button. Defaults to Medium. Choose between Low, Medium, High or Very high.

Other attributes and SEO

This section contains optional fields that some users will find useful.

Button ID
An ID attribute allows you to target this button in JavaScript.

Title attribute
Adds a title attribute to the button link.

Onclick
Run this JavaScript when the button is clicked. Ideal for tracking.