Features Widget

The SiteOrigin Features widget gives you an easy way to add features your product, company or services offers to Page Builder pages or other widgetized areas.

This document will show you how to use the features widget on a Page Builder page, but the same ideas apply to adding one to a widgetized area. If you’re not familiar with Page Builder you can read over the its documentation.

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.

features-edit-link

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.

Fonts

features-widget-font-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:

Font
Use the theme font or choose a new font family.

Size
Choose the font size and unit of measurement.

Color
Select the text color.

Container Shape

There are ten features container shapes from which to select.

FW4

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

FW5

Square, Rounded-Square, Rounded-Hex

FW6

Octagon, Hex, Frame

FW7

and Explode.

FW7a

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.

FW8

FW9

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.

FW10

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.

FW15

FW15a

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.

2014-05-21_13-13-34

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

FW17a

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.

FW18

Input Fields

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

FW19

FW20

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.