Magento 2 Page Builder

Magento 2.4.3 launch was a halo event for the community.  Included with a host of improvements to Magento, major updates to Page Builder were introduced.

Page Builder has been in continual development for many years.  In October 2020 the Magento Commerce 2.4.1 displayed a huge shift in its development. This version included Immersive full screen editing and Page Builder content previews. Page Builder development continued with the release of Magento Commerce 2.4.2.

What s new?

As of Magento 2.4.3, Page Builder is now available to Magento Open Source users.  This is an important development for all eCommerce merchants no matter your current platform of choice.

Magento 2 Page Builder

Simply put Page Builder is a drag-and-drop “What You See Is What You Get” (WYSIWYG) editor enabling you to build pages and immediately view your content. This editor allows you to build and develop your site without having to touch a single line of code. Never a bad thing.

Magento eCommerce Page Builder enables anyone in your business the power to build new pages and modify content. Page Builder gives you the ability to drag-and-drop all types of elements from text to photos, videos and columns, and rows of products. It is both a powerful and versatile content management tool.drag and drop page builder

The ability to create new pages when required is not only great for the development of your store front.  It also allows you to quickly produce sales pages and promotions as and when you need them without the need of a developer.

Adobe Magento Page Builder list of features:

  • Advanced content tools
  • Full-page layouts for CMS pages, products, and categories
  • Real-time editing from the workspace
  • Drag and drop page design
  • Rich assortment of content types
  • Custom product attribute input types

As an example of just how powerful Page builder is we will look at Dynamic Blocks.

Page Builder: Dynamic Content

Page Builder gives you the ability to create Dynamic Content.  So what does this mean?  When your users login to your shop they can provide gender, age, interests etc.  This data can then be used to provide bespoke dynamic content.

A simple example is, say, a promotion of men’s and woman’s shoes.  You can use dynamic blocks to create two promotions for men and woman.  Once set up this dynamic block will display either men’s or woman’s shoes based on the data provided by the logged in user.

The use of these dynamic blocks focusses and streamlines your sales to maximise interest and drive sales.

Page Builder Tutorial: How To Set Up?  

Magento Open Source users please ensure you have upgraded to Magento 2.4.3

Firstly enable Page Builder in the configuration setting it to the default content creation tool for CMS Pages, Blocks, and Dynamic Blocks. Admins can also select the default page layout for products, categories, and CMS pages.

advanced-content-tools-in-magento-2-page-builderConfigure Page Builder 

To configure Page Builder, follow these steps:

  1. Open Stores > Settings > Configuration on the Admin Panel
  2. General dropdown > Content Management
  3. Advanced Content Tools.
  4. In Enable Page Builder choose “YES”
  5. To configure Google Maps, follow the Get API Key instructions, then copy and paste your Google Maps API Key. Paste the JSON code generated by the Google Maps APIs Styling Wizard to change the Google Maps Style
  6. Do the following to configure the number of guidelines in the Page Builder column grid:
  • Enter the default number of columns that you want to appear in the grid in Default Column Grid Size
  • Enter the largest number of columns that you want to be available in the grid in Maximum Column Grid Sizeconfigure-number-of-guidelines

6. Choose Save Config to complete

Configure Default Layouts 

Follow these steps to configure default layouts:

  1. Access Stores > Settings > Configuration from the Admin Panel
  2. Under General dropdown, choose Web
  3. Expand Default Layouts and follow this guide:
  • In Default Product LayoutDefault Category LayoutDefault Page Layout, select the options as you wantdefault-layouts
  1. Click Save Config to complete

Disable Page Builder 

Once Disabling Page Builder is disabled, the WYSIWYG editor will replace the Advanced Content Tools which might lead to display errors in the frontend. Content previously created with Page Builder might not be editable from the Admin.

  1. Access Stores > Settings > Configuration from the Admin Panel
  2. Under General dropdown, click Content Management
  3. Open Advanced Content Tools and set Enable Page Builder to “NO”
  4. Click Turn Off when prompted to confirm
  5. Click Save Config to complete
  6. When prompted, don’t forget to refresh any invalid cache

In the fiercely competitive ecommerce world, the ability to rapidly deliver engaging content to the market is the key to success. Magento 2 Page Builder is a fantastic tool that every Magento website should utilize as soon as possible. Page Builder makes it an easy decision to update to Magento 2.4.3 right now if you don’t want to be left behind by your competitors.

Adobe Page Builder for Magento Commerce and Open Source, is a very powerful easy to use content management tool. Unlocking the power of Magento to further develop and grow you business.


Leave a Reply

Your email address will not be published. Required fields are marked *