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 widget settings window should open automatically. If it does not click on the “Edit” link to open it.
Before adding features lets take a look at the Global settings. These setting apply to all the features you add.
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.
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
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.
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.
Add features by clicking on the “Add” button.
Remove featured by clicking on the “X”.
To begin editing a feature click on the expand arrow next to the X.
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.
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.
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.
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.