Your eCommerce website should allow you to quickly design and move content without writing code, all while staying on-brand.
That flexibility lets you delegate website design and content tasks to almost anyone on your team, helping you avoid developer delays or burnout, so you’ll deliver projects faster.
That is the solution that drag and drop ecommerce website builders provide.
Although only one thing. Have unique business needs.
So your drag and drop builder should accommodate them. For example, your solution without code it should be elastic, allowing for various customizations, including code embeds, where necessary.
That is 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 listing, and content page.
let’s dive in
Benefits of using Magento 2 Page Builder
Business users love Magento 2 Page Builder for at least five reasons.
No Coding Skills Required – Magento 2 Page Builder allows anyone to create top-notch content pages without any programming knowledge. User Friendly Interface – Magento 2 Page Builder has a near zero learning curve and an intuitive interface design. Drag and Drop and Live Preview – Drag and drop components, layouts, and content elements and preview them in real time. Flexible Content Management – Page Builder extension supports all your ecommerce page design and content creation needs. Supports developer customizations: enterprise or advanced users can create features using developer help.
The best part? Getting started with Magento 2 Page Builder is easy. That is how.
Getting started with Magento 2 Page Builder
Page Builder is a Magento extension that allows open source Adobe Commerce and Magento users to create layout-rich content pages using pre-built controls.
These controls include intuitive drag-and-drop page builders, live previews, rich media, form editors, and product catalogs.
However, only Magento Commerce users can access its enhanced features.
Let’s explore how to get started with this CMS Page Builder.
Set up Magento 2 Page Builder in 4 steps
Follow these steps to set up your Magento Page Builder staging area in Adobe Commerce.
Step #1 – Go to Stores > Settings > Settings from the admin sidebar.
Step #2 – Select General Content Management.
Step #3 – Set the Enable Page Builder field to Yes in the advanced content tools.
Step #4: Save the settings.
Set your default layouts
Now, head over to the Settings area.
Under General, select Web. Next, expand Default Layouts and choose your product, category, and page layouts.
Then save the settings.
You are now ready to get started and explore the many features Magento 2 Page Builder has to offer.
Magento 2 Page Builder Features
Page Builder has five features with a total of more than 20 sub-features.
Let’s explore what each component offers you.
Toolbox Options
You can control page layouts, elements, and content using the options in the toolbox. For example, these features allow you to move, add, hide, and remove components on your page.
Hover over the Page Builder content containers to find these toolbox options.
Note that these functions are container-specific. So the options vary from container to container. The following image shows the toolbox options for the Row layout.
designs
Magento 2 Page Builder offers you three types of layouts:
Drag any of these content types from the Page Builder layout onto the stage in your dashboard. Then click the gear icon in the toolbox to access settings and customize the layout.
Items
Page builder elements allow you to add written content, images, calls to action, and other content functionality to your pages.
Like anything else, you can drag and drop content items and customize them to your liking.
Magento 2 Page Builder has five elements. Let’s shed some light on them.
Text: This feature allows you to add text, images, links, content templatesand widgets for your content.
Headers – This feature allows you to add header tags to establish a thematic flow within your content for better SEO (search engine optimization).
Buttons – This feature allows you to add and customize your page navigation or call-to-action buttons.
Dividers – Dividers add visual breaks between sections of content.
HTML Code: This feature allows you to embed JavaScript, HTML, and CSS code snippets into your page.
Media
This drag and drop interface allows you to add rich media to your content.
You can add these media types:
ImagesVideoBannersSlidersGoogle Maps
Magento Page Builder supports PNG, JPG, and GIF image types, and you can link your image to any content, product, or category page.
This same idea applies to other types of media: drag them onto the stage, and then use the options in your toolbox to add the media you want your audience to see.
content components
Content components are useful for adding forms, creating unique eCommerce experiences, and distributing content on your website.
Magento 2 Page Builder has four types of content:
CMS BlocksDynamic BlocksProductsProduct Recommendations
Blocks are the basic page building units of Magento 2 Page Builder. You can embed blocks in blocks.
CMS blocks display static information such as images and text, while dynamic blocks display information from your database using widgets.
Product recommendation content helps you serve recommended products to buyers on your page. But this feature is only for Magento Commerce users.
Now, let’s do some quick tutorials using these functions.
Magento 2 Page Builder User Guides
Before building pages or creating content in Page Builder, increase your administration session duration to avoid session timeouts while you work.
How to create a page
Start the page creation from your admin panel using this path: Content > Elements > Pages.
Add a new page from the top right corner of your screen.
Set the Enable Page slider to No to prevent live changes to your store. And then, give your page a title.
Expand the design section, choose a theme or use the default Magento theme.
Save.
Next, let’s add rows and columns to your page.
How to add rows and columns to pages
Let’s start by adding rows.
create a row
Open the page you want to edit in the Page Builder stage.
Drag the Row layout from the Layout section onto the page. You will see a red line between rows indicating the limit. Add your new row there.
Customize this row using the options in your toolbox. Next, set the appearance of the row.
Choose a width appearance for your row.
And then save.
create a column
Split that row into two equal parts by dragging and dropping the column from the layout options in the Magento Page Builder staging area.
Each column is a unique container with its own toolbox options. Thus, you have complete control of customization of it.
How to add banners to a page
Open the page where you want to add a banner, then drag and drop a banner container onto the Page Builder backend.
Choose a banner image from the toolbox: upload or gallery.
Choose a banner appearance in the toolbox settings.
Scroll down to the Background section to set the background image for the banner.
Change and format the placeholder text in the WYSIWYG editor.
Go back to settings to add a button color, choose fonts, and then go to the content section to add a banner link.
So your banner interface should end up looking like this:
Finish your configuration, save it and close it.
How to Add Review Content to a Page
Adding review content is as simple as creating rows and columns and adding new content using elements and media.
Let’s see an example.
Create one row and two columns. But drag the right edge of the first column to the 4/12 position on the grid. This setting adjusts the second column to 8/12 automatically.
Add your review product image to the first column using the media section image component; see image below.
Then add your review text to the other column using Elements Text.
Add a five star image to the text box using the native image embed feature in the WYSIWYG editor.
And then add your review text to the editor. You can also add links to your review text.
The end result should look like this.
How to add a product catalog to a page
Open the page where you want to add this catalog or create a dedicated catalog page in the Page Builder editor.
Drag and drop the product component onto the stage.
Set the conditions and category in the product configuration area.
Choose the number of products to display and add a buy button.
Set up the checkout area, write your product description, and add other page elements to complete your catalog setup.
And then save.
Exit the CMS page by clicking the white icon in the upper right corner with two arrows pointing at each other.
And then, save and close using the dropdown menu on the admin page.
Final Thoughts: Launch Your Magento 2 Page Builder
Magento 2 Page Builder is a flexible content management solution that can help you increase productivity. So no more content management headaches.
But a flexible CMS can only take you so far. It would help if you had a ecommerce hosting solution That depends on the tobacco.
Enter Nexcess Business Hosting. Nexcess handles your company’s eCommerce hosting needs, including Magento Hosting. Try it today.