Video Overview:
Venustheme.com brings you the best Magento Page Builder that supports you to build stunning and professional page/layout in few minutes. With tons of content elements supported by default, you can create any content page at ease. In addition, the platform comes with powerful and user friendly control panel with drag and drop feature and 2 builders: Magento Page Builder and Magento Block builder. It’ll absolutely change the ways of web development and content creation. This Magento Page Builder offers more than 50 widgets, drag and drop features and work with any themes. It is fully responsive with Bootstrap 3 and many other features. In this post, we make a video tutorial to show how to use Magento page builder most easily.
Magento Page Builder Video Transcription
Hi, I am John from Venustheme. Today we would like to introduce the best Magento Page Builder that will have you building any layout, any way you want in minutes.
Basically, a layout is built from blocks, each block contain rows and columns. Content in those rows and columns are loaded from assigned modules.
Let’s get started!
From your Magento Back-end setting, go to “VenusTheme > Venus Builder > Manage Builder”.
In this panel, you will see all created profiles, each profile is a page built from the tool. Hit the “Add New Item” to create new profile.
For Block Information, add general info about the profile. When you add Block title, the Block code is auto generated, but you can change it if you want.
Next, enable the profile, then select customer groups you want the profile to be published for, we’ll select all for this tutorial.
Now, open the “Design Block” to build layout. Hit the button to add new block, then add new column in that block, and click here to assign widget to the column. Here is the list of all the supported widgets, there is also a Filter to make finding the widget easier.
Ok, select the widget.
Here is the widget setting panel, you can configure it your way then hit “Insert Widget.”
Let’s create another block, add 3 columns to the block, this time we are going to change the column size by enable grid view. This is Bootstrap grid system, really visual, let’s change it to 3-6-3. Once done, disable the grid view to clean up the panel. Now assign widget for each column. We use single image widget for all 3 columns. You can duplicate any widget, change its position and edit settings.
Well done, create another block, this time, we will use a product carousel widget, using the widget filter, here it is, Ves Products Carousel, let’s select it. And In the widget setting, configure it to display as you want.
Perfect, now you can change position of blocks, move it right to the place you want, its the same with columns and widgets. Hit the button to open the edit settings of the column, you can add a class, set it to full width or not there are lots of other settings.. Do the same for block.
Replicate the process to create other blocks you want, here is what our complete layout that we built looks like.
Next step, configure the layout for responsiveness,
Here are supported layouts, we have Large, Medium, Small and Extra Small.
Select a responsive layout, lets try the Tablet layout,
And let’s change the width of columns a little bit. Hit the save button and we’re done with layout building,
Now it’s time to show the layout on your front page, go to “CMS > Pages”, You can create anew page or use and existing page here. We will use Home page, assign store view then move to the “Content” tab.
Remove current widget then select another widget, make sure you select the “Ves Block Builder” widget type then select the profile that we just created, and hit the “Insert Widget”. Finally we save go to at our great front-page. Amazing, it works like a charm. You can change the layout, style any time using the layout builder.
That also brings me to the end of the video overview, for more details, check it out at: venustheme.com
Thanks for watching.
0 Comment