Magento 2 Page Builder guide: how to build better store pages

Key takeaways

• Magento 2 Page Builder helps teams create responsive pages with drag-and-drop tools.
• It works for CMS pages, landing pages, banners, blocks, and product grids.
• Core content types include layouts, elements, media, and add content tools.
• Page Builder reduces developer bottlenecks, but pages still need SEO, mobile testing, and performance review.

Your ecommerce website should allow you to design and move content quickly without writing code, all while remaining on-brand.

That flexibility lets you delegate website design and content tasks to almost any team member, helping you sidestep developer delays or burnouts — so you’ll deliver projects faster.

That’s the solution drag-and-drop ecommerce website builders provide.

Just one thing, though. You have unique enterprise needs.

So, your drag-and-drop builder should accommodate them. For example, your no-code solution should be elastic, allowing various customizations, including code embeds, when necessary.

That’s where Magento 2 Page Builder comes in handy.

This guide helps you understand the use cases and benefits of Magento 2 Page Builder and shows you how to create a landing page, storefront, product list, and content page.

Let’s dive in.

What is Magento 2 Page Builder

Magento 2 Page Builder is a drag-and-drop content creation tool for building responsive ecommerce pages from the Magento admin. It helps merchants and content teams create layouts, add images, insert text, display products, build banners, and create landing pages without editing code.

Page Builder became available in Magento Open Source starting with Magento 2.4.3. It’s now the default content-editing tool for both Magento Open Source and Adobe Commerce.

How to enable Page Builder in Magento 2

Follow these steps to set up your Magento Page Builder staging area in Adobe Commerce.

1. Go to Stores > Settings > Configuration from your Admin sidebar
2. Select Content Management under General
3. Set the Enable Page Builder field to Yes in Advanced Content Tools
4. Save the configuration

To configure default page layouts, go to Stores > Settings > Configuration, select General, then Web. Expand Default Layouts and choose your product, category, and page layouts, then save.

Adobe notes that disabling Page Builder replaces advanced content tools with the WYSIWYG editor and may cause display errors for Page Builder content, so use care before turning it off.

How to create a new page with Page Builder

1. Initiate page creation from your Admin panel using this path: Content > Elements > Pages.
2. Add a new page from the upper right corner of your screen.
3. Set Enable Page to No while building if you want to avoid making live changes before the page is ready. Then give your page a title.
4. Expand the design section, choose a theme, or use the default Magento theme.
5. Open the Content section, choose Edit with Page Builder, and build the page in the workspace. Save, preview, and test before publishing.

How the Page Builder workspace works

Page Builder gives store administrators a visual workspace inside the Magento admin. Adobe describes two working areas: the admin configuration area and the Page Builder tools used to build content.

Users drag content types onto the stage, then use each element’s toolbox to move, edit, duplicate, hide, or delete content.

You can control page layouts, elements, and content using toolbox options. For example, these features let you move, add, hide, and remove components from your page.

Hover in the Page Builder’s content containers to find these toolbox options.

Keep in mind that these features are container specific. So the options vary from container to container.

Core Page Builder content types

Page Builder includes several core content types with more than 20 sub-features.

1. Layouts

Magento 2 Page Builder offers you three layouts types:

• Tabs
• Columns
• Rows

Drag any of these content types from the Page Builder layout to the stage in your panel. Then, click the cog icon from the toolbox to access settings and customize the layout.

2. Elements

Page builder elements let you add written content, images, calls to action, and other content functionalities to your pages.

Common elements include text, headings, buttons, dividers, and HTML code.

• Text: This feature lets you add text, images, links, content templates, and widgets to your content.
• Headings: This feature lets you add heading tags to establish topical flow within your content for better SEO.
• Buttons: This feature lets you add and customize your page’s call-to-action or navigation buttons.
• Dividers: Dividers add visual breaks between content sections.
• HTML Code: This feature allows you to embed JavaScript, HTML, and CSS code snippets to your page.

3. Media

This drag-and-drop interface enables you to add rich media to your content.

You can add these media types:

• Images
• Video
• Banners
• Sliders
• Google Maps

Magento Page Builder supports PNG, JPG, and GIF image types, and you can link your image to any content, product, or category pages.

This same idea applies to other media types: drag them to the stage and then use their toolbox options to add the media you want your audience to see.

4. Add content

Page Builder can also add store content, such as CMS blocks, dynamic blocks, products, and product recommendations. Adobe notes that the Products content type lets teams add a product list block to the Page Builder stage.

Blocks are the basic page-building units of Magento 2 Page Builder. You can embed blocks in blocks.

CMS blocks display static information like images and texts, whereas dynamic blocks display information from your database using widgets.

Product recommendations are available for Adobe Commerce users only.

How to edit and style Page Builder content

Each content block has its own edit controls. Users can hover over an element and use the edit or settings icon to change text, images, links, backgrounds, borders, spacing, alignment, and other properties.

Users can also duplicate elements to reuse layouts or delete elements they no longer need.

How to build a simple Magento landing page with Page Builder

Use this simple structure to create a landing page:

1. Add a row
2. Add a banner or hero image
3. Add a heading and supporting text
4. Add a CTA button
5. Add a product grid or featured products
6. Add a review or testimonial block
7. Add internal links or supporting content
8. Preview desktop and mobile views
9. Save and test

Before building pages or creating content in Page Builder, consider increasing your admin session lifetime to avoid session timeouts while you work.

How to add rows and columns to pages

1. Open the page you wish to edit in the Page Builder stage.
2. Drag the Row layout from the Layout section to the page. You’ll see a red line between rows indicating the boundary. Add your new row there.
3. Customize this row using its toolbox options. Then, set the appearance of the row.
4. Choose a width appearance for your row.
5. Then save your changes.

Divide that row into two equal parts by dragging and dropping the column from the layout options into the Magento Page Builder staging area.

Each column has its own toolbox options, giving you control over layout and styling.

How to add banners to a page

1. Open the page where you want to add a banner, then drag and drop a banner container in the Page Builder backend.
2. Choose a banner image from the toolbox: upload or gallery.
3. Choose a banner appearance from the Toolbox Settings.
4. Scroll down to the Background section to set the banner background image.
5. Change and format the placeholder text in the WYSIWYG editor.
6. Return to settings to add a button color, choose fonts, and then go to the content section to add a banner link.
7. Wrap up your setup, save, and close it.

How to add review content to a page

1. Create a row and two columns. But drag the first column’s right border to the 4/12 position in the grid. This setting adjusts the second column to 8/12 automatically.
2. Add your review product image to the first column using the image component from the media section.
3. Then add your review text to the other column using Text from Elements.
4. Add a five-star image to the text box using the native insert-image feature in the WYSIWYG editor.
5. And then add your review text to the editor. You can also add links to your review text.

How to add a product catalog to a page

1. Open the page where you want to add this catalog or create a dedicated catalog page in the Page Builder editor.
2. Drag and drop the product component to the stage.
3. Set the conditions and category in the product settings area.
4. Choose the number of products to display and add a buy button.
5. Configure the product display settings, add supporting content, and save the page.
6. Then save your changes.

Page Builder SEO checklist

Page Builder can support SEO when each page has a clear structure and helpful content.

Before publishing, review:

• One clear H1
• Descriptive H2s
• A unique page title and meta description
• A clean URL
• ALT text for images
• Compressed images
• Internal links to relevant category, product, and CMS pages
• Enough content to support the search intent
• Page speed after rich media is added
• Links and buttons after publishing

Responsive design and mobile testing

Page Builder pages should be reviewed on desktop, tablet, and mobile before publishing. A layout that looks strong on desktop may stack awkwardly on mobile. Check image crops, button spacing, column stacking, text length, slider behavior, product grids, and banners.

Page Builder vs custom development

Page Builder works well for landing pages, banners, content updates, product grids, review sections, and promotional pages.

A developer’s help may still be needed for custom content types, theme components, complex integrations, advanced product logic, custom templates, performance fixes, or brand-specific layouts that Page Builder can’t handle cleanly.

Performance considerations for Page Builder pages

Page Builder makes rich content easier to create, but content-heavy pages can become slow if they use large images, too many sliders, videos, maps, embeds, product grids, or third-party scripts.

Compress images, use a CDN, review caching, consider lazy loading where appropriate, and test page speed after publishing.

Brand consistency and content governance

Teams should use reusable blocks, templates, permissions, approval workflows, and style guidelines to keep Page Builder pages consistent. This helps larger teams move quickly without creating inconsistent page layouts, spacing, button styles, or messaging.

Common Magento Page Builder mistakes

Common Page Builder mistakes include uploading oversized images, using too many sliders or videos, skipping mobile previews, forgetting SEO fields, using weak heading structure, adding too much text to banners, publishing without testing links and buttons, creating inconsistent layouts, and not checking page speed.

Magento 2 Page Builder FAQs

Getting started with Magento 2 Page Builder 

Magento 2 Page Builder helps ecommerce teams create and update storefront content faster without writing code.

Start by confirming Page Builder is enabled. Then create a test page and build a simple layout with a row, banner, text, button, and product block before using it for a live campaign.

Page Builder works best when image-heavy Magento pages load quickly and stay stable under traffic. Liquid Web Magento hosting gives ecommerce teams the performance, support, and reliability they need to build and publish with confidence. Explore Liquid Web Magento hosting to find the right fit.

Maddy Osman