How to Use Electro Image Banner Section

Electro Image banner Section is a basic type of banner in an online store. This section has 3 tabs in the Settings toolbar: General, Layout and Image.

How many images could I add to the image banner?	1
The recommended size for a background image?	1600px x 800px
The recommended size for a mobile background image?	750px x 1100px

About Electro Image Banner

Electro Image banner is a basic type of banner in an online store.

The banner image is typically a large, prominent image that appears at the top of your online store’s homepage. It serves as a visual introduction to your store and can be used to highlight products, promotions, or convey your brand message. You can usually customize this image to suit your store’s branding and marketing needs.

Access Electro Banner Image Section

• Step 1: Go to Online Store > Themes > click on Customize
• Step 2: Click on Add Section block > search for Image Banner on the search bar and hit Image Banner
• Step 3: Click on Image Banner block or each content block to edit the content

Configure Electro Image Banner Section

This section has 3 tabs in the Settings toolbar: General, Layout and Image.

To access the section configuration, please follow these steps:

• Step 1: Click on the Image Banner section
• Step 2: There will be all of the parameters of General, Layout and Image for you to modify.

Edit General Tab

The overlay opacity is a setting that allows you to control the level of transparency or “opacity” of a color or pattern overlay that can be placed on top of the background image. This overlay is often used to make the text or content on top of the image more legible by darkening or tinting the background image.

Whether you should use overlay opacity or not depends on your design preferences and the readability of the text or content over the background image. It can be particularly useful if your background image has a lot of details or colors that make it hard for text to stand out.

The range for adjusting the overlay opacity typically allows you to set it anywhere between 0% (completely transparent) and 90% (almost fully opaque).

To adjust the Overlay opacity, slide the percentage bar in the Overlay settings to the desired opacity.

If you want to change the color scheme, you can switch to a different color scheme. This color scheme is set up in the theme settings.

Next, you can activate the large heading feature. If you activate this feature, all headings in the image banner will have the font size of the headline.

Edit Layout Tab

The section has 3 options to show based on your need, which is reflected in the Height dropdown selector:

• 70% screen height

• 100% screen height

• Adapt to image: The section will adapt its height to the height of the background image

By default, the banner section will be set at 70% screen height for highest quality.

Please note that this height will always set to 100% on mobile.

Edit Image Tab

You can change the background image and mobile background image individually, by clicking on the “Select image” button. This will open the media manager, where you can drag and drop your image, or choose it if it is already uploaded.

If you choose a background image for the large screen but don’t add one for the mobile screen, the mobile view will automatically use the large screen’s image. However, if you select a background image only for the mobile screen, the large screen won’t adopt the mobile screen’s image.

Please note that it is advisable to use dimensions of 1600 x 800 pixels for desktop and 750 x 1100 pixels for mobile devices.

Configure Content Block Items

Before going to settings for the text and button of the Image Banner, you can choose to display the position of the whole content block:

Edit Text Tab

To change the content of the text, you just need to type down the Heading, subheadings and description into the text boxes.

Edit Button Tab

You can change the name of the button and direct each button with an URL.

If you want to hide the button, just leave the Button Label blank.

Frequently Asked Questions

What is the Electro Image Banner Section?

The Electro Image Banner Section is an easy way to add a single image to your page. There are three options to edit in the Settings toolbar: General, Layout and Image. You also can add content to your Electro Image Banner.

Can I customize the text description under ‘Content Section’?

Yes, with a description, you can (1) edit headings of the text (H1 > H6 or simple paragraph type, this is very beneficial for SEO practice), (2) insert links, (3) make these bold, italic and (4) create bullet or numbered lists.