What is the image banner section?
The Image banner section and Image banner and countdown sections offer an excellent opportunity to showcase stunning product imagery to capture the attention of potential customers. A static image used with a combination of text, a button or countdown timer can create a powerful visual statement that draws the eye. It may encourage potential customers to spend more time on your store, thereby increasing the chance of conversions. Use the Beautify theme style and layout settings to create visual continuity between sections.
How to set up the image banner section
Steps
- Open the Theme Editor and add the Image banner or Image banner and countdown section to the page.
- Click Add block or use one of the existing blocks that are present upon install.
- In the main Image banner settings select an Image and an optional Mobile image.
- Add an optional Image link if desired.
In the Image layout settings, there are three Image height settings available.
Original image height: The original image height will be maintained so the full image is shown.Fixed height: The slider can be used to select a specific px height.
Full screen height: The image will take up the full height of the screen, excluding the space occupied by the header.
- Choose whether to Show text below image on mobile.
- In the Image styles settings, select an Image tint color and use the slider to adjust the Image tint opacity. This will not be used if fade settings have been selected.
How to use the text overlay
When text is added to an Image banner, it will appear as a Text overlay. In Beautify, the text overlay can appear on a colored background or directly on the image itself. To achieve the latter, ensure that a transparent color scheme is selected.
Steps
- In the main Image banner settings or Image banner and countdown, navigate to the Text overlay setting.
- Choose the Overlay position. If more control of the text overlay is required set a Custom overlay width.
- Set the Text alignment and select whether to Center text on mobile.
- Select a Color scheme. The color scheme needs to be set up in Theme settings > Colors > Schemes prior to being selected here. Use a color scheme with a transparent background if desired.
Tip
How to use the style and layout settings
The Style and Layout settings provide control over how sections appear and transition on the page. These settings determine whether the image banner spans the full width available, how backgrounds are displayed, how sections fade into one another and to adjust the space above the section. Create a smooth flow from one section to the next using the fade settings or by adjusting the Boundary above section setting.
Full width setting enabled
If the Full width setting is enabled, the main image expands to cover the entire screen width. This also makes the fade settings available, allowing the image banner section to blend smoothly into the sections above and below it.
Steps
- In the main Image banner or Image banner and countdown settings, navigate to the Style settings and turn the Full width setting on.
- To achieve a smooth transition between sections, select Enable top fade and/or Enable bottom fade. Adjust the fade depth and fade color settings to refine the effect.
Full width setting disabled
If the Full width setting is disabled, space appears around the image, making the Section background visible. The section background can be the page background or another color, image or gradient. The distance between the Image banner and the section above it can be adjusted to create a smooth flow from one section to the next.
Steps
- In the main Image banner or Image banner and countdown settings, navigate to the Style settings and turn the Full width setting off.
- Choose one of the five Section background options to show around the banner image:
Default: Uses Beautify's default color scheme selected in Theme settings > Colors > Schemes.
Color: Select a custom Background color
Image: Upload a Background image
Simple gradient: Set the gradient start and end colors, plus the gradient style
Advanced gradient: Customize the gradient further using the COLOR STOP settings - In the Layout settings, there are three Boundary above section options that control the spacing above the image banner. This can help to create smoother transitions between sections.
Default - Will leave the standard spacing at the top of the section
Tight - Will leave a smaller space between sections
Join - Adjacent sections will touch each other
How to use the scroll animation settings
Both the image and text content of the Image banner section can animate as the customer scrolls down the page.
Steps
- In the main Image banner or Image banner and countdown settings, navigate to the Scroll animation settings.
- Choose whether to animate the image on scroll with a Zoom out animation
- Choose a text animation effect - Fade in, Slide up, Slide down or None.
FAQs
I want to fade sections into each other. How do I do this?
A gradient background can be used to blend sections together in the Beautify theme and create a seamless flow. Alternatively, a Collage hero section can show an image behind up to 5 sections that are above or below it. In addition, the Image banner section has special top and bottom fade settings which can be used when the section is Full width.
Why is the background color is not showing for my full width section?
A Collage hero section can show an image behind up to 5 sections that are above it or below it. This will override the full width background settings for those sections.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us