The Ultimate Guide to Magento Page Builder's Banner Content Type
A website must be visually appealing and exciting to attract customers to Internet businesses. One of the most compelling features available in the Page Builder tool of Magento, a top e-commerce platform, is the Banner Content Type. This feature has the ability to completely change how you present your items and brand images on your website.
This blog discusses the Banner Content Type in the Magento Page Builder, its features, and tips for maximizing its effectiveness.
What is Magento 2 page builder?
A visual content creation tool for the Magento 2 e-commerce platform is called Magento 2 Page Builder. With this feature-rich plugin, users may create and modify web pages without knowing much coding. Magento 2 Page Builder's main objective is to give retailers and store managers an intuitive user interface to produce eye-catching, dynamic content without depending on developers.
What is the banner content type?
With Magento's Page Builder, users can design and modify web pages without requiring a deep understanding of code. Easily incorporate eye-catching banners into your web pages with the help of the flexible Banner Content Type feature in Page Builder.
Open the Magento Page Builder workspace to locate the Banner. The content type is situated when you expand Media in the left panel.
How to Add a Banner & Customize the Banner in Magento Page Builder
One of the Layout content types needs to be present on the stage before you can add a Banner content type. For that, you can go with the Row content type. By dragging and dropping it into the row, you may include the Magento Page Builder Banner. This row needs to be applied for the banner inside to fill the entire full-screen width. You can edit row appearance - contained, full width, and full bleed are the options. If you have previously submitted the image, you can choose it from the gallery or upload the banner from your PC.
You can edit banner content in 2 ways.
- Change the banner's content quickly and directly from the stage. To accomplish this, click the placeholder for the banner; the text editor will appear. This editor now allows you to add material, including text, images, links, and more.
- To modify the content, navigate to the Edit Banner page. This is especially helpful if you change settings for more intricate banner containers.
Let's customize the banner image in Magento
Click the Settings icon in the Magento Page Builder Banner toolbox to bring up the Edit Banner page. You will be directed to a page with three sections.
- Appearance
Choose a banner placement type from the options listed below.
Poster: Position the button and content in the middle of the banner. The overlay will fill the entire width of the banner if you apply it to it.
Collage Left: Position the button and the designated content area to the left of the banner.
Collage Centre: Place the button and the designated content area in the centre of the banner. This area will only be covered if the overlay is applied to the banner.
Collage Right: Place the button and the designated content area to the right of the banner.
Minimum Height: Indicate the banner's minimum height. This is very helpful if the banner image needs to be fully visible. You can enter a calculation (e.g., 100vh – 250px) or a value with a valid CSS (e.g., 50px, 50%, 50vh, 50em). The banner's actual height is 620 pixels. However, the default minimum height is 300 pixels.
- Background
Background Color: Select any color from the list below as the backdrop.
You are choosing a swatch from the palette of colors.
Putting a custom color name or hexadecimal value in the designated field.
The slider below the color picker can also change the color's opacity.
Background Type: Images and videos are the two different kinds of backgrounds. The background type is Image by default, complete with all its parameters. Page Builder replaces the image and video settings when you select Video. We'll go over these two background-type options in detail.
- Advanced
Background picture: Select the banner's backdrop picture. There are three methods for doing it.
Ensure that the size of your image file does not exceed the 4 MB upload limit. JPG, GIF, and PNJ are supported aside from that.
Background Mobile Image: If required, apply the same technique to choose an alternative background image for displayed mobile devices.
Background Size: To define the background image's scaling with respect to the banner's width, select this option. Cover, Contain, and Auto are the three available background size options.
Cover: If you select Cover as the backdrop size, your image will be resized to fill the banner container's width. If their dimensions differ, the image will be cropped vertically or horizontally to fit the banner container.
Contain: This option lets you scale your image within its container without cropping or stretching, as the name suggests. As a result, this image is shown in the same ratio but with a reduced size.
Auto: When you choose Auto, the current theme's (Luma) style sheet determines the background size. In this instance, the actual image proportions won't change.
Background Position: Determine your background image's initial horizontal position. There are nine alternatives available to you.
Background Attachment: This allows you to select whether the backdrop picture moves with the page or remains stationary. You have been seeing Background Attachment set to Scroll by default ever since. Thus, in the video below, I will only demonstrate the other setting, Fixed.
Scroll: The linked background image descends with the page as you scroll.
Fixed: The container remains motionless at the designated backdrop position while it scrolls over the background picture. Remember that mobile devices are not supported for Fixed.
Background Repeat: If you want the background image to fill the container, set this to Yes. When the picture background is set to Contain, this is quite helpful.
Video settings in Magento
All image parameters are changed to the video settings when selecting Video as the Background Type.
Video URL: Set in an actual video URL. This video has to be hosted on Vimeo or YouTube or be a link to an authorized video file with the appropriate video extensions.
Overlay colour: Choose a colour to add a translucent overlay to the video by selecting it.
Infinite loop: To enable limitless video repeats, set this to Yes.
Lazy load: Set this to No if you want the video to load along with the page even when it isn't visible. If you want the video to only load from the source when visible on the screen, set this to Yes.
Play Only When Visible: If you want the video to start playing just when visible, select Yes for this setting. If you choose No for this setting, Whether the video is visible or not, it will start playing as soon as it loads.
Fallback Image: Choose a picture to appear on the screen before a movie loading. This is frequently utilized when a fallback image works perfectly to replace the video if the video fails to load.
Conclusion
The first step to dramatically improving the visual attractiveness and user engagement of your e-commerce website is to become proficient with the Banner Content Type in Magento Page Builder. Online retail is a dynamic industry, so having a solid foundation is essential, as is designing engaging user experiences. Use the versatile features of the Banner Content Type to effectively display your promotions and items while directing visitors through an easy-to-use and visually appealing experience. You can make the most of this effective tool by following the best practices described in this tutorial. Banner Content is more than just a tool; it's a medium for creative expression and a way to communicate the core values of your business to your internet audience. Now that you know this, go ahead and try it out and create an online store that not only satisfies but also beyond the expectations of your customers.
CONTACT US; We are always prepared to provide prompt assistance and support.