How to Use the Drag and Drop Magento Page Builder

In March 2019, Magento 2.3.1 was released. One of the biggest changes that came with this update is that the page builder content editing tool is now a standard feature.

In the Magento page builder user guide below, we'll show you exactly how to use this tool.

The New Magento Page Builder

Magento’s main goal with this tool was to give brands much more control over the narrative and content within their stores.

In their words, “effortless control”.

Magento page builder

That’s important, because the more time you spend trying to fine-tune image placement and content layout, the less time you have to focus on running your business. And smaller brands don’t have the budget for expensive design and development teams to be on call every time landing pages need to be created or products updated.

Enter the Magento page builder.

This built-in editor provides a suite of tools that allow merchants to edit individual pages and content in a simple point, click, drag, type visual interface without having to tamper with code.

Magento Page Builder Features

The built-in page builder for Magento Commerce includes a number of key features:

  • In-line editing
  • Reusable dynamic blocks
  • Scheduled content updates
  • Live content previews
  • Banner creation tools
  • Button creation and editing tools
  • Image and video placement
  • Drag and drop content management
  • Product page content integration
  • Drag and drop product additions to content pages
  • Customizable content on category pages
  • Complete control over content layout
  • Customization on element positions without code
  • Create new content types from scratch
  • Fully responsive elements
  • Form editors for entering and customizing content

How to Add Content With the Magento Page Builder

Adding content with the page builder is simple. Just open the Magento Dashboard and navigate to create a new page.

In the new page creation screen, click on the content section and you’ll have access to the visual elements.

Click on the content section

This is where you can use the visual drag-and-drop interface to work with a variety of visual elements including:

  • Layout for rows, columns, and tabs
  • Various page elements like text, headings and buttons
  • Media including images and video
  • And additional custom content

Magento Page Builder Product Layout Control

The page builder makes it easy to change the way customers browse your store. You can adjust the layout for complete control over how your products are displayed on category and brand pages, all with a few simple clicks.

Magento products

Magento Page Builder Media Control

With the media elements available in the Magento page builder, you can create a more engaging and attractive shopping experience designed to capture clicks and conversions.

The media options include the ability to create banners and interactive sliders for promoting specific products, categories, brands, or any type of campaign you want to feature on a landing page.

Magento media control

How to Find the Magento Page Builder

You can navigate to and access the Magento Page Builder in several locations within your admin dashboard, since there are several places where content can be edited. This includes:

  • Catalog Product
  • Catalog Category
  • CMS Page
  • CMS Block

The following example shows Page Builder active within the Home Page by selecting Content > Pages > Home Page > Edit, as shown here:

Select "Edit"

Other Magento Page Builder Options

Magento Commerce comes with a pre-installed version of Magento Page Builder that has the above options.

For additional customization and control, we recommend our Shogun Page Builder App that now integrates with Magento!

Magento users can now gain extended customization of page layout, content, and a variety of elements. Likewise, all the changes you make within the visual editor can be applied without directly editing the code in Magento. With Shogun, you can even schedule AB testing to improve conversions in your store.

Shogun page builder

Open Source Page Builder for Magento

Magento Commerce includes a visual page builder, while the open source version of Magento allows you to choose from a variety of page builder apps. This includes the Shogun page builder app as well as a variety of other popular, approved extensions.

In fact, at the time of this writing, there are more than 50 page builder apps ranging from free to premium for Magento 2.

Other page builders

Some apps include complete visual editors, while others are designed for editing specific page elements.

These include:

  • Magezon Page Builder ($199)
  • Gaboli Digital Sunny Landing Page Builder (free)
  • Responsive CMS Page Builder ($129)
  • Mega Menu Page Builder ($179)
  • Blue form Page Builder ($99)
  • Contact Page Builder ($99)
  • Custom Thank You Page Builder ($99)

Customization of your online store just got a lot easier with the Magento page builder. Combined with the Shogun Page Builder App, you’ll be able to create stunning landing pages and more engaging content throughout your store guaranteed to capture conversions and set you apart from competitors.

Build Magento pages that convert.

Create professional-quality pages for your ecommerce store with a powerful drag and drop page builder for Magento designed with ecommerce teams and agencies in mind.
Start Your Free Trial

Build Magento pages that convert.

Create professional-quality pages for your ecommerce store with a powerful drag and drop page builder for Magento designed with ecommerce teams and agencies in mind.
Start Your Free Trial

Derek Cromwell

Derek is the founder of Thunder Bay Media and lover of everything related to content writing and copywriting. He has 15+ years of copywriting, content writing, and digital marketing experience and is a featured guest blogger published by more than 30 marketing publications.