How to Use Widgets in Magento 2 Page Builder | Landofcoder Tutorials

As you know before, Magento 2 Page Builder Extension comes with powerful feature with 50+ Premade Element & Widgets and Drag n Drop Block will make your Magento 2 Store builder easier. Let’s spend some minutes to view All Outstanding Features:

  • Time & Money Saving
  • Drag & Drop Interface
  • Work with any Magento Themes
  • 50+ Widgets Supported
  • Responsive Design Options
  • Full amazing controls
  • Create Unlimited Layouts
  • Block Builder
  • Bootstrap Grid View System
  • Easy To extend with 3rd Party extensions
  • Cms Page Builder
  • CSS Skin Builder
  • Schedule Time To Display Your Page on Frontend
  • Enhance page load time incredibly
  • Live Preview For Easier Editing

In terms of this tutorial, I will show you “How to Use Widgets in Drag n Drop Magento 2 Page Builder Extension Steps by Steps”:

I. How to Use Widgets Magento 2

To Use Magento 2 Widgets in Magento 2 Page Builder, you should understand deeply these following buttons:

– Add Block
– Add Column
– Add Row
– Add Widget
– Resize Column
– Duplicate Block/Column/Row
– Drag n Drop Block Builder
– Copy Shortcode to Block
– Load CMS Block
– Copy Shortcode to Clipboard
– Load Element Profile
– Edit Column/Row/Block

1. Add Block:

Magento 2 Page builder supports to build Layouts & Content of Homepages & CMS Page. At the design page, you will see it is the complex of block builder with widgets. It ‘s possible to design layout page with “Creating Unlimited Block”

2. Different & Unlimited Columns:

For each block, you can create multiple columns with the different size. 1 column, 2 columns or 3 columns, etc to suit your design as well.

3. Add Row:

You are able to “Add Row” for your block builder. Unlimited Row can be added by you simply & easily.

Add Row Magento 2 Page Builder

 

4. Add Widgets:

Design with 50+ premade  Widgets & Elements, Magento 2 Page Builder becomes the smart tool in builder. No more style CSS or edit code, you can build your content richer by simple steps.

Add All 50+ Premade Widgets:

5. Resize Columns:

Normally, when you add column, the width of column is the same. If you want to set them with different width, you can do it with Magento 2 Page builder by pull-out the button to resize it. It’s flexible & ease to use.

resize magento 2 column

6. Drag n Drop Block Builder

The most interesting in Magento 2 Page Builder is Drag n Drop Feature. By Drag n Drop ( Block Builder/column/Row/Widgets), your builder becomes easier than ever. You can change the block position quickly without adding any CSS.

drag n drop magento 2 page builder

 

7. Duplicate Block/Column/Row

Instead of recreating any new block/column/row with the same styles, Magento 2 Page Builder allows to save your time effectively when click “Duplicate icon”, the duplicated options is created immediately.

duplicate magento 2 block

8. Edit Block/Column/Row/Widget

When your Block/Column/Row/Widget are added, if you want to change anything, you can go to “Edit” icon to change it.

edit magento 2 page builder

9. Delete Block/Column/Row/Widget

If anythings is unnecessary or incorrect, you can “Delete” it easily. Both Block/Column/Row and Widgets can be remove just after 1 click.

delete block magento 2

10. Copy Shortcode to Block

You are able to “Copy Shortcode to Block” in Magento 2 Page Builder. Each block has own Shortcode. When you want to “Move any blocks from this page to other pages quickly & Amazingly (surely all pages are built by Magento 2 Page Builder). By simple steps, you can Create New Block at the page with the same previous homepages.

View more at our blog: How to Move Blocks Magento 2 Among The Pages ?

copy shortcode in page builder magento 2

11. Load CMS Block

If you want to Load any CMS Page in any block, by simple steps you can Add all content of CMS Page to Block at ease.

load cms magento 2

12. Copy Shortcode to Clipboard:

A quick step to copy all Block Shortcode  to new block:

copy shortcode magento 2

13. Load Element Profile

With Magento 2 Page Builder, you are able to Load Element Profile in Block Builder.

load element profile magento 2

Here all our guide for “How to Use Widgets Magento 2 with our Magento 2 Page Builder – Landofcoder”. We hope this guide will help your installation easier & more quickly.

MAGENTO 2 PAGE BUILDER TUTORIALs

SOME OTHER EXTENSIONS YOU MAYBE INTERESTED IN

RELATED POSTS

Nhu Quynh

Recent Posts

Revolutionizing Workouts: Breakthrough Trends in Fitness App Development for 2025

Digital fitness is booming. Millions of users worldwide are shifting from traditional gyms to mobile…

8 hours ago

How SaaS-Based Magento Extensions Can Dramatically Supercharge Your Store in 2025?

Having your Magento store up and running requires more than having a good platform when…

4 days ago

Top 4 Reliable Managed IT Services in Boston to Empower Your Business

Running a business today isn’t easy. Technology problems can slow you down and leave your…

4 days ago

WooCommerce or Magento? A Business Owner’s Guide to Choosing the Best Platform in 2025

Everyone with a strong exposure to online stores and eCommerce are very aware about platforms…

5 days ago

How To Reduce Cart Abandonment And Increase Sales In Your Online Store In 2025

Have you witnessed your clients placing items into their shopping cart, only for them to…

2 weeks ago

AI vs Traditional B2B eCommerce: Top 10 Powerful Platforms Leading the Digital Transformation

In the global business arena, AI vs Traditional B2B eCommerce has altered how businesses interact,…

3 weeks ago