Overview #
The Features Bar section is designed to display various announcements, features, or important notes on your website. It provides a flexible way to highlight key information or promotional content, enhancing the user experience by drawing attention to specific elements.
Key components and functionality #
Features bar theme settings
The Features Bar section comes with default theme settings that are automatically applied when the section is active. These settings can be customized within the section to better fit your design needs.
Text alignment
This setting allows you to control the alignment of text within the Features Bar. You can choose from various alignment options to best fit your design needs.
Icon position
The icon position setting lets you decide where the icon will be placed relative to the text. Available options include top, bottom, left, and right, with the default being left.
Show icon border
This setting enables or disables a border around the icon. By default, the icon border is enabled.
Color settings
Color settings allow you to customize the appearance of the Features Bar by overriding the default theme colors. This includes settings for icon color, text color, and icon border color.
Padding settings
Padding settings control the space above and below the section content. You can adjust the top and bottom padding for both desktop and mobile views to ensure the section fits well within your layout.
Background settings
Background settings enable you to add a color, gradient, image, or video as a background to the section. Adjusting these settings can significantly impact the overall look and feel of the Features Bar.
Separator settings
Separator settings allow you to add a line at the top or bottom of the section, creating a visual separation between different parts of your page.
Visibility settings
Visibility settings provide control over when the Features Bar is displayed. This is particularly useful for creating custom layouts for mobile devices.
Usage examples #
-
Promotional Announcements: Use the Features Bar to announce sales or special offers. Align the text centrally and place the icon on the left for a balanced look.
-
Feature Highlights: Highlight specific features of a product by placing the icon at the top and aligning the text to the left, creating a visually appealing layout.
-
Important Notes: Display important notes or updates by enabling the icon border to make the icon stand out, drawing attention to the message.
By utilizing these settings, you can effectively customize the Features Bar to suit various purposes, ensuring that key information is prominently displayed to your audience.
Align v1.7 is out now! Learn more about our best release yet →