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
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
>> Back end Configuration
– Add Widget
– 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
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
>> 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
3.3. Ves Categories Tabs- Categories Tabs makeup block-danger
>> Front-end Appearance
>> Back end Configuration
3. Ves Deals
>> Front-end Appearance
>> Back end Configuration
** Insert Widget
** Config widget:
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
>> Back end Configuration
7. Ves Base: Instagram & Single image
>> Front-end Appearance
>> Back end Configuration
You can see full configuration here: Ves Base: Instagram
8. Testimonials
>> Front-end Appearance
>> Back end Configuration
9. Newsletter
>> Front-end Appearance
>> 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
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
0 Comment