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

new--60-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

layered-slider-container

2. Ves Product Carousel

>> Front-end Appearance

front-end-carousel

>> Back end Configuration

You can see full configuration here: Product Carousel

product-carousel-configure

3. Ves Categories Tabs

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

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

Ves-Categories-Tabs-new

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

3.2. Ves Categories Tabs-  Categories Tabs ajax carousel:

>> Front-end Appearance

product-carousel-2-frontend

>> Back end Configuration

Ves Categories Tabs 2 cònig

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

>> Front-end Appearance

category1
>> Back end Configuration

Ves-Categories-Tabs

 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

latest-blog-frontend

>> Back end Configuration

blog-post-configuration

5. Ves Brand

>> Front-end Appearance

ves-brand-frontend
>> Back end Configurations

ves-brand-configuration

6. Our Service

>> Front-end Appearance

our service frontend

>> Back end Configuration

our-service-frontend

our service widget-config

7. Ves Base: Instagram & Single image

>> Front-end Appearance

Instagram wiget
>> Back end Configuration

Instagram-config

You can see full configuration here: Ves Base: Instagram

8. Testimonials

>> Front-end Appearance

ves-testimonial-frontend

>> Back end Configuration

ves-testimonial- configuration

9.  Newsletter

>> Front-end Appearance

ves newsletter

>> Back end Configuration

newsletter-widget-config

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

add-widgets-2jpg

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!