Magento’s Page Builder: Creating Responsive Content

Introduction In the digital age, where the majority of internet traffic comes from mobile devices, responsive design is not just a feature—it’s a necessity. Magento’s Page Builder empowers businesses to create websites that look and function flawlessly across all devices, ensuring a seamless user experience. This post delves into the responsive design capabilities of Magento’s Page Builder, illustrating how it prepares businesses for a mobile-first world.

Responsive Design: A Critical Element in Today’s E-Commerce Responsive design ensures that a website automatically adjusts its layout, images, and functionalities to match the device it is being viewed on, whether it’s a desktop, tablet, or smartphone. This adaptability is crucial for maintaining a consistent user experience, improving site accessibility, and enhancing customer satisfaction.

  • Market Trends and User Behavior: Statistics show that mobile users are more likely to engage with and purchase from a site optimized for their devices. Businesses without a responsive website risk losing potential customers to competitors who provide better mobile experiences.

Magento’s Page Builder: Pioneering Responsive Design Magento’s Page Builder comes equipped with features that make creating responsive content intuitive and effective. The tool uses a grid system, flexible images, and media queries to ensure content looks perfect on every screen size.

  • Fluid Grid Layout: This feature allows elements within the Page Builder to adjust automatically to the screen size, ensuring that the website layout is always optimal.
  • Adaptive Media and Images: Images and media elements within Magento’s Page Builder are designed to scale appropriately, maintaining their quality and impact across devices.

The Benefits of Responsive Design with Magento Implementing responsive design with Magento’s Page Builder offers numerous advantages, from enhancing user engagement to improving SEO rankings.

  • Improved User Experience (UX): A responsive website provides a smooth and consistent experience for users, which can lead to increased time on site, higher conversion rates, and improved brand perception.
  • SEO Advantages: Search engines favor responsive websites. A mobile-friendly site with Magento’s Page Builder can lead to better search rankings, driving more organic traffic.
  • Cost and Time Efficiency: Maintaining a single responsive website is more cost-effective than managing separate versions for desktop and mobile. Magento’s Page Builder simplifies this process, reducing the need for extensive coding and testing across multiple platforms.

Magento 2 Page Builder user guides

How to create a page

To start creating a new page in Magento, access your Admin panel and navigate to Content > Elements > Pages.

Page creation menu

From the top right corner of your screen, click on the “Add New Page” button.

To prevent any live changes to your store, toggle the “Enable Page” slider to No. Afterward, provide a title for your new page.

New Page

Expand the design section, choose a theme, or use the default Magento theme.

New Page design

Save your changes.

Create a row

To add rows and columns to your page, follow these steps:

  1. Open the page you want to edit in the Page Builder stage.
  2. Drag the Row layout from the Layout section onto the page. You’ll notice a red line between rows, indicating the boundary where you can add your new row.
Creating a row

Customize the newly added row using its toolbox options. You can adjust various settings such as column layout, background color, padding, margin, border, and more to tailor the appearance of the row to your preferences.

Rows settings

Click on the Edit like in the picture.

Rows appearance

Select a width appearance for your row. Once finished click save.

Create a Column

Split the row evenly by dragging and dropping a column from the layout options into the staging area of Magento Page Builder.

Column creation

Each column functions as a distinct container with its own set of toolbox options, giving you full control over customization. In the next image, on the left side are column containers for the bigger resolutions, and on the left are the mobile resolutions and smaller screens.

Column on phone and laptop
Column options
How to add banners to a page
Banner creation

Select a banner image from the toolbox, either by uploading it or choosing from the gallery.

Banner toolbox

Select a banner appearance from the Toolbox Settings.

Banner options

Navigate to the Background section and set the banner background image there.

Background options Banner

Modify and format the placeholder text using the WYSIWYG editor.

Text banner on phone and Pc resolutions

Go back to settings to specify a button color and select fonts. Then, navigate to the content section to add a banner link.

How to add review content to a page

Adding review content is straightforward; you create rows and columns, then insert new content using elements and media.

For instance, let’s create a row with two columns. Drag the right border of the first column to the 4/12 position on the grid. This action automatically adjusts the second column to 8/12.

Insert your review product image into the first column using the image component from the media section. You can refer to the image below for guidance.

Add Image to column

Next, input your review text into the other column using the Text element from the Elements section.

Adding text to column

Incorporate a five-star image into the text box using the native insert-image feature available in the WYSIWYG editor.

Insert image WYSIWYG

After that, input your review text into the editor. Additionally, you can include links within your review text as needed.

How to add a product catalog to a page

Open the page where you intend to add this catalog or create a dedicated catalog page within the Page Builder editor. Then, simply drag and drop the product component onto the stage.

Products content

In the product settings area, define the conditions and category as per your requirements. Specify the number of products to display and include a buy button.

Configure the checkout area, write your product description, and incorporate any other page elements needed to finalize the catalog setup. Once done, save your changes.

To exit the CMS page, click on the white icon located in the upper-right corner with two arrows pointing toward each other.