Showcase features with icons, titles, text, and links in a customizable grid layout.
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.
More Link
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.
Space Between Each Feature
Enter the padding between each feature. Defaults to 25px.
Responsive Layout
Enable to use a responsive layout on mobile devices.
Bottom Align More Link Text
Enable to align the More link text to the bottom of the longest feature.
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;
}