The Ultimate Guide to Magento Page Builder's Image Content Type
The Magento Page Builder is a potent tool that you can use to improve the functionality and aesthetic appeal of your Magento store. Visual content is essential for increasing visitor numbers and improving retention. Making the most of it can help you brand your company and personalize your website, raising the conversion rate.
This extensive article will examine the features, functions, and best practices of the Image Content Type in Magento Page Builder, enabling you to create visually appealing and captivating product pages.
The Image content type is located in the Media area on the left side of the Magento Page Builder workspace. Move over to open the image toolbox once the image content type is shown on the stage. Tools like move, hide, show, duplicate, remove, settings and image are included in the toolbox.
How to Add Image in Magento Page Builder
You can use the same procedures in Magento Page Builder as you would with other forms of content.
Step: 1
Check the left panel first, now. Select one of the required content kinds after expanding the Layout section. Selecting between Row, Column, or Tabs is an option. Remember that to get the exact appearance you want, you also need to set the characteristics of this content type. Start with the Row, the first material content to display, to keep things simple. Once the row is in the stage position, drag the picture placeholder inside it until the orange line shows, then release it. After that, you can see the image container.
To add the image, there are three methods available:
Method 1: Upload a new image:
First, select Upload Image.
Select a new image from your file system and send it online.
Method 2: Choose an existing image from the gallery
In the Gallery, click Select.
Locate the image by opening the folder inside all collections on the left sidebar. To complete, click its thumbnail and select the Add Selected button in the upper-right corner.
Method 3: Look through the Adobe Stock collection and select an image.
To find the particular image, click Adobe Stock Search.
To the gallery, add the preview or the licenced photo.
Select the thumbnail of the image, and then click Add Selected.
It would help if you had an Adobe Stock integration set up for your administrator in order to use this strategy.
How to Change Image Settings?
This section explains how to modify the SEO, advanced, and general settings when you hover your cursor over the picture container and select the settings button.
- General Settings
The three options you learned to add or modify the current image at the top of the page will be visible to you. The image's name, file size, and dimensions are displayed in the footer once it has been added. As you may have noticed, the Mobile Image area is located directly underneath. This uploads the picture to be shown on mobile devices.
If you'd like, you can include a link to the picture. Your customers will be directed to a destination page when clicking this link. You should think about the following four types of links:
URL: Provides a link to a relative or fully-qualified URL.
Relative URL: rootways.com
Fully-qualified URL: https://www.rootways.com/
Product: The product name, or SKU, indicates the destination page. Entering the product's name or SKU into the search box will help you find it.
Category: The category or subcategory designates the destination page. Once you have typed a partial or complete name into the search box, you can utilize the category tree to choose the category or subcategory.
Page: A content page designates the destination page. To locate the page, use the search box, then choose it from the results list.
You'll see that the chosen menu has a small checkbox labelled "Open in new tab." If you wish to prevent customers from navigating away from your store, choose it. In simpler terms, visitors are more likely to exit your business if the checkbox is left empty because the destination page will load in the same tab. You'll then need to caption the image. It will reveal its details to search engines and site visitors beneath your image. If your website is accessible to people worldwide, you might want to translate the caption into several languages.
As you may have seen, the <figcaption> tag in HTML is a subset of the <figure> tag.
For example: <figcaption>Image Caption </figcaption>
To apply the settings after everything appears in order, click Save.
- Search Engine Optimization
This section will teach you how to add keywords to the alt tag and title of the image to optimize how it is indexed.
There are two fields to fill in. Search engines will be able to see the text that has been typed into these fields, enhancing how the page is indexed.
Alternative Text: The text you type in here will help make content visible on digital accessibility tools. Put differently, it needs to explain precisely the subject matter of your image.
Example:
<image title=”this is a final image” alt=”description” src=”image.jpg”>
Title Attribute: When you hover your mouse pointer over the image, the text you write here will appear as a tooltip.
It would help if you used keywords in a descriptive title to help search engines index your image as highly as possible.
The image tag is a subset of the title attribute.
Example:
<image title=”this is a final image” alt=”description” src=”image.jpg”>.
- Advanced Setting
- Alignment setting
This option controls the image's horizontal position inside its container.
Default: The current theme's style sheet's default alignment option is applied.
Left: With any specified padding value, the image content is positioned along the container's left boundary.
Center: With any specified padding value, the image content is positioned in the centre of the container.
Right: With any specified padding value, the image content is positioned along the container's right boundary.
- Border Setting
The appearance of the image's border can be altered with this parameter. The four sub-settings are border styles, color, width, and radius, as you can see. There are ten different style options for the border. Selecting None will prevent your image's container from having a border, and you won't be able to adjust the Border Colour or Border Width further. You can adjust additional container border options if None is not your preference.
Default: The corresponding style sheet's default border style is applied.
Dotted: The boundary of the container appears as a dot.
Dashed: The border of the container appears as a dashed line.
Solid: The boundary of the container appears to be a solid line.
Double: The border of the container appears to be two lines.
Groove: The edge of the container resembles a grooved line.
Ridge: The border of the container looks like a ridged line.
Inset: The container border is an inset line.
Outset: The edge of the container appears as an outset line.
Border Color: Use a color picker or swatch to select a color or type in a valid color name or corresponding hexadecimal value.
Border Width: Put in the number of pixels representing the borderline width.
Border Radius: To determine the boundary radius size, enter the amount of pixels.
The CSS Classes fill the box and can further customize the picture container. If multiple classes exist, a space will be used to divide them.
Conclusion
E-commerce companies may construct visually appealing and user-friendly websites with the help of the advanced Image Content Type feature in Magento Page Builder. You may improve the overall buying experience for your customers by making use of image editing tools, responsive design elements, and drag-and-drop capability. Use best practices to make your online store stand out in the crowded e-commerce market, like reducing image file sizes and employing high-quality imagery. Whether you run a little business or a large, enterprise-level e-commerce company, you can take your online store to new heights by utilizing the Image Content Type feature of Magento Page Builder. This will leave a lasting impression on your clients and promote long-term success.
CONTACT US; We are always prepared to provide prompt assistance and support.