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 can be inserted into any theme widget area at AppearanceWidgets or any post/page using Page Builder by SiteOrigin. If you’re using the Block Editor, the Features widget can be inserted via the SiteOrigin Layout or SiteOrigin Widget block.
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.