The Features and Features List components are two similar, but different ways of displaying features, services, or more that you offer. In general, the Features component is best for a smaller number of features where you can have individual buttons and images for each, and the Features List is better for a larger number where you want a single image and button for the whole list.
Features component
The features component includes an image with each feature, and displays each feature vertically in a mirrored fashion for a dynamic layout. After dragging the component to a page of your site, click on it to open the options panel and you’ll see these options:
-
Features - Click on Add Feature to add additional features. To edit the title and description, simply click on either within the component to edit the text. To edit other elements of a feature, click on the feature in the list. Each feature has the following options:
- Icon - Click on this to change which icon is used with the feature. A checkmark is used by default.
- Show Icon - Use this toggle to hide or show the icon.
- Image - Use this option to upload an image for the feature.
- Link Label - Edit this text to update the text shown on the button.
- Link - Click Add Link to edit the button link.
-
Size & Position
- Width - This option controls the width of features shown within the component. By default it uses the full width, but you can select smaller proportions. Click on the desktop/mobile icon to set this separately for large and small screens.
- Align - When not using the full width of the component, you can align features to the left, right, and center of the component.
-
Design
- Shape - If each feature has a border, this option controls the shape of the border. By default, it inherits the choice set in your site settings. This can be set separately for large and small screens by clicking the desktop/mobile icon.
- Border - This option controls the width of the border shown around each feature. By default this is set to none.
-
Spacing
- Margin - This option controls the space around the component. Click on the desktop/mobile icon to set this separately for large and small screens.
- Padding - This option controls spacing within the component around the features themselves.
- Hover - Click on Hover on the top of the options panel to the left to customize how the border looks when hovering over the component with a mouse.
Features List component
The Features List component uses a single image and button along with a succinct list of features you add. After dragging the component to the page, you’ll see the following options:
- Features - To add a feature, click on the Add Feature button. You can edit the title and description of a feature by clicking on one and typing within the component. To change the icon of the feature, click on the feature in the list of features in the options panel, then click on the icon.
-
Image - Click on the Upload Image area to upload an image to the component.
Button - Hide Button - This toggle will hide or show the button in the component.
- Button Label - Edit this option to change the text shown on the button.
- Button Link - Click on Add Link to add a link to the button.
- Design - The Shape option found here will control the shape of the button in the component. By default it uses what you have set in your site settings. To set this separately for large and small screens, click on the desktop/mobile icon.
-
Spacing - The Margin option found here will control how much space there is around the elements that make up the component. You can set this separately for large and small screens by clicking on the desktop/mobile icon.