Free support 120 Days
Free Support
Free support Mon - Fri From (10 AM - 10 PM) IST
Magento>How Magento Page Builder Is Beneficial For Greater ROI

How Magento Page Builder Is Beneficial For Greater ROI

view data

Magento

view data

5 MIN READ

view data

March 25, 2022

Loading

Magento 2 Page Builder

Being an online merchant, you would like to create an eye-catching website page. If you use an eCommerce platform such as Magento, you must be aware of the Magento 2.4.3 launch. With this launch, Magento introduced the Page Builder feature, which was a boon to online sellers.

Magento Page Builder is for both technical and non-technical people. Any merchant can create a beautiful layout of its website with the basic knowledge of page layouts.

Magento Page Builder

Page Builder was first seen in the Magento Commerce 2.3.1. It provides advanced content management functionality to the store admin. The admin does not require any CSS or HTML knowledge to create custom page layouts. With an easy drag and drop pre-built control, a user can create a personalized Magento page.

Administrators may simply design and customize rich-content pages in Magento Commerce by utilizing the built-in Page Builder. Simple pages, Catalog content, or Blocks with a user-friendly interface, unique layouts, and visual content features can be built.

 

Magento Commerce

 

In nutshell, Page Builder is a Magento Extension for creating content with the pre-built controls in form of drag and drop functionality.

The pre-built controls are categorized into four types:

 

pre-built controls

 

Let’s dive into deep the Page builder panel and get familiar with all the functionalities available for the admin.

Magento 2 Page Builder Panel

To begin creating content, it is important that Magento 2 CMS page builder must be enabled on your website. Open the Page Builder Workspace by visiting the “Edit With Page Builder” button, where, in the left corner of the workspace you can visit the Page Builder Panel.

The pre-built controls are also known as “content-type”. Let’s understand each content type thoroughly.

Layout

Layout

The layout option gives rows, columns, and tab features to drag and drop from the panel to the stage.

  • Row

A new row may only be added to the stage by dragging it from the panel and positioning it above or below the existing row, tab, or column group. You may also create a copy of the original row by selecting Duplicate.

  • Column

Drag a column to the stage from the panel, or to tabs and rows. The maximum number of columns is only determined by the number of grid divisions.

  • Tabs

Admin can drag a single tab from the panel to the stage, or to rows and columns. One can add additional tabs if required from the toolbox.

Element

Element

From the Elements section, you may add text, dividers, buttons, headings, and HTML code to the stage.

  • Text: The stage can have a text container and an editor.
  • Heading: The stage can have a heading container.
  • Buttons: Adds a container to the stage for either a single button or a collection of buttons.
  • Divider: The stage will have a container for a divider.
  • HTML code: The stage will have a container for HTML code.

Media

Media

Add pictures, banners, videos, Google Maps, and sliders to any layout container on the Page Builder stage using the Media section of the Page Builder panel. When a media content type is moved from the panel to the stage, a container with a toolbox of content-specific choices appears.

  • Image: Allows admin to add image container to the stage.
  • Banner: Allows admin to add a banner container to the stage.
  • Video: Allows admin to add video container to the stage.
  • Google Maps: Allows admin to add map container to the stage.
  • Slider: Allows admin to add slider container to the stage.

Add Content

Add Content

 

To add the existing content to the page builder stage, the “Add Content” section is required.

  • Block: Add an existing block from the panel to the stage.
  • Dynamic Block: Add an existing dynamic block from the panel to the stage.
  • Products: Add a list of products from the panel to the stage.
  • Product Recommendations: Add a list of product recommendations from the panel to the stage.
  • Dotdigital form: Admin can add engagement cloud from the panel to the stage.

Outstanding Features of the Magento 2 Page Builder

There are many advanced features of Magento Commerce Page Builder that a user can use for creating an engaging content layout.

  • CMS pages, categories, and products all are supported by full-page layouts.
  • Live previews and real-time editing option helps to see how content will appear at the frontend.
  • Page creation by drag-and-drop functionality.
  • A diverse range of content types is available.
  • Device friendly, as it allows to preview the content on Desktop and Mobile.
  • Available advanced content tools like border, border color, border-radius, border width, alignment, margins, paddings, and CSS classes.

How to Set-up Magento 2 CMS Page Builder

Don’t get confused by Magento 2 CMS Page Builder or Magento Page Builder, both keywords imply the same. CMS stands for Content Management System.

If you use Magento to sell your products online, Page Builder Extension is beneficial for you. To enable the set-up, follow the given points.

Note: Your existing Magento should be upgraded to the Magento 2.4.3 version. To upgrade your Magento, consult the Ksolves here!

 

advanced content tool

 

When you enable One Page Builder in the setup, it will become the standard content creation tool for Blocks, Dynamic Blocks, and CMS Pages. Furthermore, the “Enable Advanced CMS” button makes Page Builder an opportunity for Categories and Products. Admin can also choose the default page layout for CMS pages, products, and categories.

For Advanced Content Tools, consult with the Ksolves team for smooth settings.

Page Builder Configuration

You will require to configure the Magento 2.4 page builder. Follow the given instructions thoroughly.

1. On the Admin Panel, navigate to Stores > Settings > Configuration.

2. Choose Content Management from the General in the left panel.

3. Go to Advanced Content Tools and ensure that Enable Page Builder is switched to ‘YES’.

4. To set up Google Maps, follow the given points:

  • Follow the Get API Key steps if necessary to copy and paste the Google Maps API Key.

Link to getting API: https://developers.google.com/maps/documentation/javascript/get-api-key

  • To modify the Google Maps Style, insert the JSON code provided by the Google Maps APIs Styling Wizard.

5. To adjust the number of guidelines in the Page Builder column grid, do the following:

  • In Default Column Grid Size, enter a number of columns you wish to show in the grid by default.
  • Maximum Column Grid Size should be set to the number of columns you wish to see in the grid.Column Grid Size

6. Select SAVE Config to complete the Page Builder Configuration.

Default Layout Configurations

To configure default layouts, follow these steps:

1. From the Admin Panel, navigate to Stores > Settings > Configuration.

2. Select Web from the General dropdown menu.

3. Select Default Layouts and then perform these steps:

  • Choose the Default Product Layout, Default Category Layout, and Default Page Layout as per the requirements of your content page.Default Layouts

 

  1. To finish, click on the Save Config button.

Disable Page Builder

To disable Magento 2 Page Builder, do the following:

1. Go to Stores > Settings > Configuration on the Admin sidebar.

2. Select Content Management from the left panel under the General section.

3. Set Enable Page Builder to ‘No’ in the Advanced Content Tools expansion.

4. When requested for confirmation, select Turn Off.

off page builder

5. Click ‘Save Config’ and refresh any invalid caches when requested.
These are the simple steps to set up, enable, and disable the Page Builder Extension in Magento 2.

Let’s see why you should choose the Magento 2 CMS page builder.

Benefits of Magento 2 CMS Page Builder Extension

  • Make appealing and creative pages 

With the help of pre-designed templates, you can create CMS pages, category descriptions, and product descriptions with a few easy operations like drag and drop.

There is no coding skills or experience necessary, and you are not obliged to seek assistance from any technical professionals.

  • Enhance the look of your shop

You may improve the design of your store by using elegant and ready-to-use templates with effects and animation from the Magento 2 page builder extension. 

Attract new visitors, keep them on your webpage longer, and convert them into customers.

  • Improve the client experience 

Allowing your consumers to purchase in an online store with vibrant and beautifully designed pages greatly enhances their shopping experience.

Furthermore, eye-catching designs might inspire customers to make a purchasing choice, make them more inclined to place orders. As a consequence, you may improve sales and benefit more.

The Great Advice

Creating a visually appealing storefront is as important as building brand awareness. With the Magento 2.4 Page Builder, admins can now create beautiful page content.

You can follow the given link for detailed instructions.

https://docs.magento.com/user-guide/cms/content-menu.html

Moreover, if you need expert assistance in creating a customized page layout for your Magento store, don’t hesitate to consult the Ksolves.

Contact us at the given details:

Website: https://store.ksolves.com/
Phone:+1(646)-203-1075, +91-7498170227
Email: sales@ksolves.com

Loading

Need Help