Start a Project

Client Login

menu menu

All Categories

Magento

Getting Started With Magento Page Builder

12 Nov 2019

Mike Patel

For many, Magento 2 Page Builder is a simple, easy-to-use solution to a complex problem. If you’ve never built a website before though it can be a little overwhelming. This is especially true if you want to add custom features and objects to your site that don’t come with the basic version of Magento 2 Page Builder. Let’s take a look at the basics to get started.

What Is Magento 2 Page Builder?

Page Builder is a drag-and-drop interface for generating vibrant, dynamic and content-rich web pages any CSS, Javascript, or HTML coding. And this is the reason why Page Builder is a perfect utility for creating richly styled dynamic content without employing an in-house developer to build, style and maintain the content.

Online retailers and merchants are flocking to Magento 2 Page Builder for their website need because it allows them to create amazing pages and market their products without any experience or assistance. There’s also no need to pay a designer or developer to build the site for them or make changes: you can do it all yourself.

Sit down, load up the app, and start building that custom website for your business venture.

What All Can You Customize With Page Builder?

The content types included in Page Builder include:

-Rows

-Columns

-Tabs

-Text

-Headings

-Products

-Maps

-HTML Code

-Buttons

-Images

-Video

-Dividers

-Banners

-Sliders

-Dynamic Blocks

All these features are configured right out of the box, so you can design, customize and use them all right away. New and beginning users don’t often think about future-proofing, but Page Builder is designed to accommodate custom features from third-party apps and software. If you need to add a custom feature that isn’t available with the vanilla Page Builder kit or that you need as your site grows, you can integrate it using Page builder’s Custom Component tool.

Building components using the Page Builder tool requires a bit more knowledge and training. You should make a thorough study of the documentation and check out the well-written Page Builder user guide for Custom Components if you’re interested in this feature. Both should have you good to go with a little study and practice. Here’s how it works

Inserting Data

Start by determining from where the data used to generate the content is being sourced. Page Builder uses the same form fields and UI component forms that Magento uses in the backend. You can find the form configuration files for existing Page Builder components in the directory

vendor/Magento/module-page-builder/view/adminhtml/ui_component

If you want to add a form field for a Page Builder component but not sure how to do it, make sure you check whether the existing fields are in use somewhere else in the backend or any native Page Builder component.

Once you settle on how your feature data will be stored and retrieved, you’re ready for the next step.

Preview and Master

These are the backend and frontend of how your feature will function on a page. What the site does to fulfill the function is called the Preview, and the customer-facing side is called the Master. This is an important step to understand because Page Builder automatically splits between dual markups with its native features, but with custom components, you will need to determine these markups for rendering yourself. The file structure for a Page Builder component that had all three of these concerns separated would look like this:

Markup

Frontend: view/adminhtml/web/template/content-type/component-name/appearance-name/master.html

Backend: view/adminhtml/web/template/content-type/component-name/appearance-name/preview.html

Behavior

Frontend: view/adminhtml/web/js/content-type/component-name/master.js

Backend: view/adminhtml/web/js/content-type/component-name/preview.js

Styles

Frontend: view/frontend/web/css/source/_module.less

Backend: view/adminhtml/web/css/source/_module.less

Data Storage/Retrieval

This is how the data on your site connects to the feature/manipulative you’ve created elsewhere on the customer-facing side. All you have to do is assign the correct pathway on your server and test the master side to make sure it is displaying and functioning correctly.

All the data inserted into the markup via form fields will have one of these four purposes:

-html

-css (or class)

-style

-attribute

Converters & Mass Converters

Certain custom features you may want to add to your site require you to alter certain values before you can put them into markup. The Custom Feature Tool provides you with the value converters and mass converters you need for data sets to display properly if they require alteration before being pushed to the customer side. They are a critical component of creating custom forms and widgets on your site for customer data collection in landing pages.

The bottom line, Page Builder offers tons of included features for building a stable, stylish and highly functional e-commerce site or business website. The fact that you can also build custom features with a little additional training and experience is just icing on the cake.

Final Thoughts

If you’re looking to build your first site for a small to medium scale business, consider giving Magento 2 Page Builder a try. It’s feature-rich, reasonably priced, and easy to use even for those who aren’t tech-savvy. You won’t be disappointed.

I hope this article would be helpful for your Magento development. Feel free to comment below for any questions. Also, if you notice any error, please let me know, I will make the necessary changes.

Mike Patel

Mike Patel is the Founder and CEO of ioVista, a leading digital commerce agency specializing in eCommerce solutions. With a strong background in business and technology, Mike Patel has been at the forefront of driving digital transformations for businesses. He has successfully navigated the ever-changing landscape of eCommerce, helping companies leverage the power of online platforms to grow their brand, increase revenues, and optimize their digital presence. Under his leadership, ioVista has become a trusted partner with major technology companies: Adobe/Magento, Google, BigCommerce, Shopify, and Yahoo. He is dedicated to staying ahead of industry trends, adopting cutting-edge technologies, and continuously improving strategies to provide clients with a competitive edge. Mike’s commitment to excellence and client satisfaction is evident in every project ioVista undertakes.