Features Widget

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


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.

Start by adding the features widget to your page (or widgetized area). The widget is called Features, with the description “Displays a list of features.”

The Widgets Bundle link on the left will show SiteOrigin widgets. Locate the Features widget OR use the search field above to find it.

The Widgets Bundle link on the left will show SiteOrigin widgets. Locate the Features widget OR use the search field above to find it.

The widget settings window should open automatically. If it does not click on the “Edit” link to open it.


Global Features

Before adding features lets take a look at the Global settings. These setting apply to all the features you add.

Features widget global settings.

Features widget global settings.



Features font settings for Title, Text and More Link.

In the fonts section, you can set the font family for the Title, Text and More Link. Each section provided will have the following settings:

Use the theme font or choose a new font family.

Choose the font size and unit of measurement.

Select the text color.

Container Shape

There are ten features container shapes from which to select.


Click on the drop down menu to change the default “Round” container shape to your choice of Sticker, Rounded-Sticker


Square, Rounded-Square, Rounded-Hex


Octagon, Hex, Frame


and Explode.


Icon and Icon Container Size

Set your Icon and Icon container size by typing in the required number of pixels in the text fields provided.



Example of 84 and 120 px icon container sizes and  24 and 50 px icon sizes are displayed below.

FW8 - Oct 84 and 120

FW9 24 and 50

Features Per Row

You can set the number of features you wish to display in a single row, in the text field provided.


Lastly, under the global settings you can activate or deactivate “Responsive layout”, “Link feature title to more URL”, “Link icon to more URL”, and “Open more URL in new window” by clicking on the relevant check box.

Features widget options.

Features widget options.

Adding, Deleting and Editing Features

Add features by clicking on the “Add” button.

Add a feature.

Add a feature.

Remove featured by clicking on the “X”.

Cross icon to remove a feature.

Cross icon to remove a feature.

To begin editing a feature click on the expand arrow next to the X.

Click the down arrow to edit the feature.

Click the down arrow to edit the feature.

Feature Specific Settings

Under each feature, you will find several feature specific settings. Unlike the global settings these will only apply to that individual feature. Let’s take a look at each setting.

Container Colour

Select the feature container color by clicking on the “Select Color” button. Select the desired color using the color pallet or type in the color Hex (#) Value. Adjust the color intensity using the slider.



Icon, Icon Color, and Icon Image

Choose from over 100 icons to display in the icon container by selecting the desired image from the grid menu.


Select the Icon color by clicking on the “Select Color” button under the Icon Color heading.


Alternatively, if you wish to use your own icon or image to display, simply click on “Choose Media” and select it from your media library or upload it from your computer.


Input Fields

Add your features Title Text, Description Text, More Link Text and More Link URL in the fields provided.



And that’s it! Once you have added all the required features and adjusted each ones settings, click “Done”, save your page and your good to go.

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;