Our brands

Commonly Used Magento Widgets & How to Use Magento Page Builder Widgets

magento widgets tutorials

As you may know, magento widgets are magento extensions with a predefined set of configuration options. Thanks to magento widgets, the store admin is able to enrich the front-end blocks functionality.

At this moment, Ves Page Builder offer over 60+ magento widgets for your choice. Because widgets are one of the most important part to create your content block. In this magento widgets tutorial post will show you:

1. List of 60+ magento widgets in page builder

2. How to use page builder widgets effectively

3. How to install other magento widget and insert it into a CMS page

I. Magento Page Builder Widgets

In the below image, I will show you the list of 60 magento widgets that ves page builder offer. If you want to see how it really look you can view here: Magento Widgets


II. How To Use Page Builder Widgets- Magento Widgets Tutorials

In the previous post, I showed you how to add widgets. Again today I will guide you how to add widgets. This is very small and simple task. Please follow the below process

Step 1

Go to admin panel >> Venustheme >> Ves Page Builder >> Go to design page >> Choose ” Add widget” Button  like below image

add magento widgets

Step 2

Then, you will see the list of magento widgets and you need to choose one of them for each block.

In order to help you choose the right widget for each sub-block, today I will guide you 13 most commonly used magento widget to build homepage.

Notice: Ves Page builder is compatible with all types of magento widgets. Hence, whatever module you are using, Ves Page Builder can work with it.

1. Ves Layer Slider

As we mentioned before,  Ves Page builder is compatible with all types of magento widgets. Hence, whatever slider module you are using, Ves Page Builder can work with it. In our theme we using Ves Layer Slider module. Hence, we will take it as an example to show you how to configure this widget in magento page builder.

>> Front-end Appearance

ves layer slider

>> Back end Configuration

– Add Widget

layer-slider-widget jpg

– Configure Slider

** Enable: select enabled or disabled slider

** Banner Id: choose slideshow you created. To know how to create slideshow with Ves layered Slider you can watch video guide HERE

ves layer slider3

Note: In “row setting” you can add class “Container” to show like front-end image


2. Ves Product Carousel

>> Front-end Appearance


>> Back end Configuration

You can see full configuration here: Product Carousel


3. Ves Categories Tabs

3.1. Ves Base: Categories Tabs- Categories Tabs makeup default:

>> Front-end Appearance
Ves Categories Tabs configure
>> Back end Configuration


You can see full configuration here: Ves Base: Categories Tabs

3.2. Ves Categories Tabs-  Categories Tabs ajax carousel:

>> Front-end Appearance


>> Back end Configuration

Ves Categories Tabs 2 cònig

3.3. Ves Categories Tabs- Categories Tabs makeup block-danger

>> Front-end Appearance

>> Back end Configuration


 3. Ves Deals

>> Front-end Appearance

ves deals frontend

>> Back end Configuration

** Insert Widget

backend config

** Config widget:

backend config2

You can see full configuration here: Ves Deals

4.  Ves Latest Blogs

>> Front-end Appearance


>> Back end Configuration


5. Ves Brand

>> Front-end Appearance

>> Back end Configurations


6. Our Service

>> Front-end Appearance

our service frontend

>> Back end Configuration


our service widget-config

7. Ves Base: Instagram & Single image

>> Front-end Appearance

Instagram wiget
>> Back end Configuration


You can see full configuration here: Ves Base: Instagram

8. Testimonials

>> Front-end Appearance


>> Back end Configuration

ves-testimonial- configuration

9.  Newsletter

>> Front-end Appearance

ves newsletter

>> Back end Configuration


III. How to install a widget and insert it

The Magento widgets can be used and installed in the same way as the other Magento extensions.

In order to install a widget and insert it. Firstly, it’s necessary for you to find a widget you want and get its extension key from the Magento Connect.

When you already found a widget suitable for your Magento version, click on “Install Now” button >> choose the Magento Connect version (select Magento Connect 2.0 if you are running Magento 1.5 or newer), >>check and agree the license agreement >> click the Get Extension Key button. Then, select and copy it.

Now open admin panel >> System >> Magento Connect >> Magento Connect Manager.

Then, paste the extension key in the Paste extension key to install field >> Click on the “Install” button to Proceed.

To insert the widget to your pages, return to the Magento Admin Area >> navigate to CMS >> Pages.

Click on the page where you want to insert the widget >> open the Content section >> click on the Insert Widget icon. Like below image

add magento widget

You can choose widget type from drop down menu >> Then click on ” insert widget” button


Now  Click on the Save Page button. Then you can check your page on the frontend to confirm the widget is showing properly.

If you still confuse about this Tutorials, please feel free to contact our professional support team with more than 7 years of experiences for more helpful aid.

All questions are always welcomed. Contact us now! Magento Development Services

Related Posts

Share this Post!

Alena Dao
Alena Dao
“Good marketing makes the company look smart. Great marketing makes the customer feel smart.”

0 Comment

Leave a Comment

Your email address will not be published.

Do NOT follow this link or you will be banned from the site!