How can we help?
Page Builder in Magento
In this article we will discuss Magento Page Builder, an included extension for Magento open source as of version 2.4.3. Page Builder is an editor that allows non-technical users to create content.
Page Builder lets you drag all kinds of content elements (content types) onto the editor's canvas to easily build and manage pages. The page is divided into rows on which you can place the desired content using drag-and-drop.
Page Builder Menu
When Pager Builder is active within your Magento open it by clicking on the Edit with Page Builder button.(Content > Pages > Page > Content) The Page Builder menu appears on the left side with all content types divided into sections.
Content Types in Magento Page Builder
| Content Type | Content Type |
| Layout | rows, columns and tabs as the layout of a page |
| Elements | text and buttons, as well as HTML code |
| Media | images, videos, banners, sliders and Google Maps |
| Add Content | content blocks for a static or dynamic display of your product catalog |
We will now go into a little more detail about the different sections of the Page Builder menu.
Layout
We start with a blank canvas on which we can drag layout elements including rows, columns and tabs.
Elements
Elements is a section of content types that lets you add text, buttons, headings, and HTML code to any layout element you place on the canvas. The layout elements become visible as soon as you drag one of these elements onto the canvas.
HTML Code is a special content type that allows you to insert HTML, CSS and JavaScript code into the of your web page.
There are also buttons that allow you to insert specific content elements into your code.
- Insert Widget
- Insert Image
- Insert Variable
The Insert Image button adds images from your library.
With the Insert Widget button insert standard content elements on your page. There are many standard widgets available, but you can also create your own widget and use it in Magento(Content > Widgets > Add Widgets). Be aware that using many widgets will slow down the loading of your pages.
With the Insert Variable button you insert variables on your page which allows for reuse of content. Again, you can create your own variables and use them in Magento(System -> Other settings -> Custom Variables).
Media
The Media section provides content types for images, video, buttons, sliders and Google Maps which you then position within the layout elements on the canvas.
The Magento Page Builder has two new features. You can use the slider as a product carousel or as a product grid. These show a preview of your products. Choose the product carousel if you want to show the images side by side. It also gives you the option to rotate the products continuously. A product grid shows your products in columns below each other.
Add Content
In the Add Content section you can add content blocks with static content, dynamic content or you can add products from the catalog. Dynamic blocks are very powerful because they allow you to serve content to your customers based on pricing rules on products and customer segments.
When we select the Products content element we have the option to show those products based on product category, SKU or when the products meet specific conditions.
Mobile display
Page Builder can optimize content for proper display on phones and tablets. Optionally, you can have different images loaded for mobile devices than the ones you use for the desktop. This means you can completely customize the content for use on mobile devices and choose different elements.
A good mobile display of your webshop has become extremely important now that Google will be using the mobile version for indexing and ranking all your content.
Page Builder features a framework to test the responsiveness of your pages and gives merchants more options to customize their content. For example, you can set a minimum height for your images and adjust the padding and margins on your content types for each device. For example, it is not unusual for padding/margins to be lower for use on smaller screens.
Extensibility Page Builder
Finally, the functionality of Page Builder is expandable or customizable. Developers can modify or add to the existing layout and content elements. But it is also possible to create and use or customize self-made widgets.
Also interested in Page Builder? Then get in touch with us.
