Magento Page Builder

Status: In Progress

Read Time: TBD

Magento Page Builder feature has been introduced in version 2.4.3. This feature has been long awaited for in the Magento Open Source edition and opens the potential for merchants to quickly and efficiently take control of their content and expand the pontential of their online presense eliminating the dependency on a developer or someone familiar with HTML, CSS and JavaScript! Updating content is now a breeze, straightfoward and intuitive.

The page builder is based on Row / Column / Grid approach. When you think of page content, pretty much any layout can be broken down into rows and columns and because of this, the page builder is incredibly flexible and powerful tool to quickly generate layouts and templates ready for for the copywriter.

In this guide I wanted to take a moment to showcase some of the basic page builder features, and what you can do with them.

Table of Contents

Layout & Structure

The key here is to keep the structure simple especially when just getting familliar with the tool. There is no need to overthink or over-engineer your content layout. Here, let us take a look at one of our clients' homepage redesigns proposals.

Mockup

Grid Layout

Rows & Columns

Think of rows as general containers, where each section of your content is a row. Even when your content is in a single column, it's best to include the column in the row because this approach gives you more control over the position, look and feel of your content.

Benefits with using columns within rows allow for:

  • Improved control over content position and location
  • Improved control over margins and paddings
  • Improved control over content height and width

Headings & Copy

Images & Media

Banners & Sliders

Embedded Products

Blocks & Content Reuse

Tabs

Widgets

Advanced Custom Components


About the Author

Oleg Snegov Founder of X2Y.io Oleg Snegov Founder of X2Y.io
Oleg Snegov

I’ve always been a quick learner and adopter of new and rising technologies which helped me build my experience over the years with different companies and clients. I value my work and take a lot of pride in the code I write and the endeavors I take on.

Did you enjoy reading the article?

Be sure to share it with your friends and colleagues or signup for our newsletter to stay in the loop as we release more updates on our ventures and progress. Help us spread the word!