Features Widget

The SiteOrigin Features Widget gives you an easy way to add features of your product, company, or services using icons and text.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Features Widget.

The Features Widget 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.

Features

Click the Add link to add your first Feature. Once added, you’ll find three icons to the right of each Feature. The down arrow opens the Feature for editing, the page icon duplicates the Feature, and the cross icon deletes the Feature.

Within each Feature, you’ll find the following options:

Icon Container Color
Select the icon container background color.

Icon Container Position
Select the icon container position. Choose between Top, Right, Bottom, or Left.

Icon
Select the Feature icon.

Icon Title
Optionally enter icon title text. The title text will display when hovering over the Feature icon. For a styled tooltip, consider the SiteOrigin Premium Tooltip Addon (demo).

Icon Color
Select the icon color.

Icon Image
Optionally upload an icon image instead of selecting an icon.

Icon Image Size
Select the icon image size.

Title Text
Enter the Feature title text.

Text
Enter the Feature main text.

More Link Text
Optionally enter a “Read More” link text.

More Link URL
Optionally enter a “Read More” URL.

Settings


Font Design

Title

HTML Tag
Select the title HTML tag.

Font
Select the title font family.

Size
Enter the title font size and select the unit of measurement.

Color
Select the title color.

Text

Font
Select the text font family.

Size
Enter the text font size and select the unit of measurement.

Color
Select the text color.

Font
Select the more link font family.

Size
Enter the more link font size and select the unit of measurement.

Color
Select the more link color.


Icon Container Shape
Select the Features icon or image container shape. The following options are available:

  • None
  • Round
  • Sticker
  • Rounded Sticker
  • Square
  • Rounded Square
  • Rounded Hex
  • Octagon
  • Hex
  • Frame
  • Explode

Icon Container Size
Enter the icon container size and select the unit of measurement.

Icon Size
Enter the icon size and select the unit of measurement.

Use icon size for custom icon
Enable to use the Icon Size setting for custom icons.

Features Per Row
Enter the number of Features per row. Defaults to 3.

Responsive layout
Enable to use a responsive layout on mobile devices.

Link Feature title to More URL
Enable to link the Feature title to the URL entered into the Read More Link URL field.

Link Feature column to More URL
Enable to link the Feature column to the URL entered into the Read More Link URL field.

Open More URL in a new window
Enable to open the Read More link in a new window.

Custom CSS Customizations

Custom CSS rules can be added to Appearance > Custom CSS if you’re using SiteOrigin CSS or Customize > Additional CSS.

Adjust the Title Text Top and Bottom Margin
Adjust the heading tag and margin value as required.

.sow-features-list .sow-features-feature h5 {
	margin: 1em 0 !important;
}