Magento 2 Page Builder guide simplified

We’ve prepared a Magento 2 Page Builder guide for its default functionality creating and customizing content with pre-built controls. Get to know the extension in-and-out, and start building modern pages with minimal effort and time investment.

Key features:

  • Drag-and-drop functionality
  • Live previews of how the content will look on the storefront
  • New element creation
  • No coding skills required

How to access the menu

You should be logged in to the Magento Admin Panel.

Admin Panel → Content → Pages → Find “Action” column → Choose “Edit” from the drop-down.

Once you are redirected to the Page customization, scroll down to find and expand the “Content” section.

Page Builder side menu should appear next to the Admin Panel.

Menu Content Types

General configurations

  • Move: allows you to drag-and-drop selected elements across the page to place between other components.
  • Edit: opens a menu with Advanced options for the selected element customization.
  • Hide: allows you to hide the selected field so it’s not presented on the Page front end, but is kept on the back end panel.
  • Duplicate: make the same element with all the configuration and paste it below.
  • Remove: delete the selected element with all configuration and adjustments.

Layout

Layout types can contain any option from “Elements”, “Media”, or “Add Content”.

Row

Edit: expands the menu with a variety of extra configurations according to the selected element. Includes customizations for Appearance, Background, Parallax Background, and Advanced options, e.g., Padding.

Column

Grid size: determines the maximum number of columns available per one side. Adjustable by middle lane drag-and-drop functionality.

Tabs

Allows keeping content in separate tabs. Add: adds a tab to the element.

Elements

  • Text: original field of input with standard options of text customization, widget insertion, etc.
  • Heading: a field for page Heading and alignment adjustments.
  • Buttons: adds a customizable button with a variety of options: Text, Link, Padding, CSS Styling, etc.
  • Divider: creates a line for content types separation on the front end.
  • HTML Code: gives an option to add custom HTML, declare a CSS class that you can apply to an element on the page, or add a code snippet code for a logo, button, or banner that you received from a third-party provider.

Magento Page builder how-to’s

Create a simple banner

1) Drag a Banner placeholder to the stage.

2) Hover over the banner container and choose Edit.

3) Select “Collage Center” under the Appearance section.

4) Add desktop and mobile background image in the Background section. Select Background Size as Cover and Background Position as Center.

5) Add a link in banner Settings from the Content section. Change Link variation to Category and select the existing Product Listing Page.

6) Adjust Margins and Padding in the Advanced section if further customization is required. 

Make sure that each Row has “Auto” selected for the Background Size option. This functionality allows for better user experience while resizing the browser window.

Expected result

End-users should be redirected to a certain category, once the banner is selected on Store View.

Create a Category banner

1) Add Category from the Layout section in the menu to the existing Row.

2) Change Grid Size value. 

3) Add one more Column to the existing row with columns with pre-set value.

4) Drag-and-Drop Banner content type to each created column and upload images from the hover menu of the banner.

In case of image identical resolution, a customized banner could be Duplicated and moved to another column keeping the same customizations.

5) Adjust options for each banner in Settings from the hover menu. 

  • Appearance: Collage Center
  • Choose Maximum Height according to your image – 200px
  • Background Size: Contain
  • Background Position: Center
  • Link: Select Category and choose from the list
  • Alignment: Center – will keep an image in the center during Desktop Browser Window rescaling
  • Margins and Paddings: choose appropriate values according to design requirements

Please keep in mind that customizations listed before are set specifically for our example Homepage.

Create a Product Grid

“Products” content-type allows the creation of a grid of products with a variety of sorting options (e.g., Newest Products, Oldest products, etc.), as well as products related to certain brands.

1) Drag-and-drop Products from Page Builder Menu to active Row.

2) Navigate to Settings from Products hovered menu.

3) Select the following options in the Appearance section:

  • Choose Product Grid
  • Select Products by category
  • Category: Select the product category of your choice

Important note: Ensure that products in the selected category are available in-stock, enabled, and are visible in the catalog. Otherwise, items won’t be presented!

4) Sort By: Choose the appropriate sorting option.

5) Number of Products to Display: Add the number of products that should be displayed. 

6) Follow the list of options below for Advanced section:

  • Alignment: Default
  • The rest of the options could be left without any changes or as default.

Have you tried this extension yourself? Need assistance or any type of Magento 2 support? Let us help you! Drop us a line at info@scandiweb.com and we’ll be happy to!


If you enjoyed this post, you may also like