Banner foreground content settings

Overview #

The Banner foreground content setting group is designed to control the visual and functional aspects of banners across the theme. These settings influence elements such as alignment, text, and button styles, providing a cohesive look and feel throughout the shop. While these settings are generally applied globally, they can be customized at the section or block level for more specific design needs.

Key components and functionality #

Alignment settings

The alignment settings allow you to position content within the banner both horizontally and vertically. This ensures that your content is displayed exactly where you want it, enhancing the overall design and user experience.

Horizontal alignment

This setting lets you adjust the horizontal alignment of content within the banner. Options include aligning content to the left, center, or right.

Vertical alignment

Vertical alignment controls the positioning of content along the vertical axis within the banner. Options include top, center, and bottom alignment, with the default being bottom.

Text and icon settings

These settings provide options for adding and styling text and icons within the banner, allowing for clear communication and visual appeal.

Icon

The icon setting allows you to add an icon to the banner content, enhancing its visual appeal and drawing attention to specific elements.

Caption

The caption setting provides a space for adding a brief text description or title above or below the media content.

Heading

The heading setting allows you to add a prominent title to the banner, useful for highlighting the main message or theme.

Heading type

This setting lets you choose the HTML tag for the heading, ranging from paragraph (p) to heading levels (h1 to h6). The default is h2.

Subheading

The subheading setting provides an additional text field for adding a secondary title or description to the banner.

Button settings

Button settings offer various options for styling and configuring buttons within the banner, ensuring they are both functional and visually consistent with the theme.

Button icon

This setting allows you to add an icon to the button within the banner, providing a visual cue about the button's purpose.

Button text

The button text setting specifies the text displayed on the button, guiding users on the action they can take.

Button URL

This setting defines the URL that the button will link to, directing users to the desired page or resource.

Open link in a new tab

This checkbox setting determines whether the button link opens in a new tab. The default is false.

Button style

The button style setting offers various styling options, including primary, secondary, extra large, plain, small, and small secondary.

Button layout

This setting controls the layout of the button, with options for placing the icon on the left, right, or having an icon-only button.

Link settings

Link settings provide options for styling links within the banner, ensuring they are visually consistent with the theme's design.

Link style

The link style setting offers options such as button, full block, or full block with button, allowing for customization of link appearance.

Usage examples #

1. Promotional Banner: You might consider centering the content using the alignment settings, adding a heading and subheading to highlight a sale, and including a button with a primary style to encourage users to shop now.

2. Informational Banner: Consider adding an icon and caption for context, using a heading type of h3 for the title, and setting the button to open in a new tab to direct users to an external resource without navigating away from the site.

3. Event Announcement: You might consider using the button layout setting to place an icon on the left of the button text, using a secondary button style for a subtle call-to-action, and linking to a detailed event page using the button URL setting.

These settings provide a flexible framework for creating visually appealing and functional banners that enhance the overall theme of the shop.