Our brands

Guide Ves Pages Builder Magento 2

Getting Started

Getting Started

Installation & Update

Module Installation

The module we provide 2 ways of magento 2 Pages Builder  installation which were supported by magento 2


Your magento 2 extension can be installed in a few minutes by going through these following steps:

– Download/purchase the extension
– Unzip the file in a temporary directory
– Upload it to your Magento installation root directory
– Disable the cache under System->Cache Management
– Enter the following at the command line in SSH terminal:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

– After opening Stores->Configuration->Advanced->Advanced, the module will be shown in the admin panel


– Download/purchase the extension
– Unzip the file in a temporary directory
– Upload it to your Magento installation root directory
– Disable the cache under System->Cache Management
– Edit app/etc/config.php file and three line code:

'Ves_All' => 1,
'Ves_BaseWidget' => 1,
'Ves_PageBuilder' => 1,
'Ves_Setup' => 1,


– Clean the cache under System->Cache Management
– After opening Stores->Configuration->Advanced->Advanced, the module will be shown in the admin panel


If you need to upgrade the database, run the following command line:

php bin/magento setup:db-schema:upgrade

Congrats! You finished install the extension, now you can go forward!

Now you can go to admin > Ves PageBuilder > Manage Page Profile to create your page layout as you want.

Module Version Update

Prepare before update

– We recommend you to duplicate your live store on a development store and try update Ves Page Builder version on it in advance.
– Backup database of your site: Go to admin > System > Backup > Click on button “Backup Database”, input file name and submit it.
– Backup your modified files of the theme and extensions: app/code/Ves/PageBuilderapp/code/Ves/BaseWidget
– Disable all cache related section that you have in your magento.

Update Theme Files

Update to last version of extension file

Step 1: – Download latest extension package on our site http://www.venustheme.com/venus-magento-page-builder/ . Then decompress the package on your PC.

Step 2: – Upload the file Module File/Ves_PageBuilder_v[VERSION].zip which you just decompressed into the webroot folder in your site (it will override the app/ folder in your site).

Step 3: – Open SSH Terminal of your site, then run there commands:

php bin/magento setup:upgrade --keep-generated

php bin/magento setup:static-content:deploy

php bin/magento cache:clean



Sometimes your site is broken, after run this command, it’s because of you ran this command with the incorrect user. If your site was broken, it’s very important to set the file’s permissions and ownership correctly, after run this command line. You can refer this command chown -R : .
Typical examples:

chown -R apache:apache /var/www/html/magento2/venustheme
chown -R www-data:www-data /home/domain/public_html

And also please refer this, http://devdocs.magento.com/guides/v2.0/install-gde/prereq/integrator_install.html#perms-over

Install Sample Data

The Ves Pages Builder extension we included a sample pages and block profile in the module package. You should download latest version of Ves Pages Builder extension in our site: http://landofcoder.com/magento-2-page-builder.html/ or in our site http://www.venustheme.com/venus-magento-page-builder/

Demo Sample Pages Profile:


Follow there steps to setup the sample pages builder profile:

Step 1: Decompress the module package, then decompress the file “Ves_Pagesbuilder_Sample_Magento2.zip“. We will get the sample file and folders:

Step 2: Go to admin > Venustheme > Setup > Import, then browse the sample JSON profile and click on button Import configuration

Step 3: Upload folders: app/ and pub/ of sample profile into webroot folder of your site to override 2 folders in your site. (This will add sample css files and sample media images which we used in our sample data)

Step 4: Clean cache of your site.

View the page: http://your domain/demo-homepage-01/

*Note: If the page not show the pages builder profile, you should edit page profiles in admin > Ves Pages Builder > Manage Page Profiles. Then check there CMS Static Block widgets were loaded correctly cms block items or not? (Because our sample profiles are using cms static blocks with name prefix “venus”)

Extension Configuration

System configuration

1. Base Widget Settings

Go to admin > Ves PageBuilder > Base Widget > Configuration

2. Pages Builder Settings

Go to admin > Ves PageBuilder > Pages Builder > Configuration
General Settings

Expired, Comming soon, Private Pages Setting (Action when the cms page is expired, comming soon, privated)

3. Live CSS Editor Settings

Go to admin > Ves PageBuilder > Live CSS Tool > Configuration

How to work?

How to the page builder work

The extension Ves Pages Builder will allow you create page layout profile in backend which was based on magento widgets, then generate profile’s layout on frontend at main content of the CMS Page (or in the main content of a block).


P1 – Pages Builder Work Diagram

1, Use Ves Pages Builder to build main content of a CMS Page.

Go to admin > Venustheme > Ves Pagebuilder > Manage Page Profile > Add New Page Profile


2, Use Element Builder to build content of a block or widget instance.

Go to admin > Venustheme > Ves Pagebuilder > Manage Element Profile > Add New Element Profile


Tips:  We use the element builder profiles to build complex design layout. Then load the element profiles in each row of page builder profile. So you can mix and reuse your element builder profiles on later.

Design In Backend

Create page builder profile

– We use page builder profile to build any magento CMS Pages (for example: Homepage, Contact Us, Lookbook, Portfolio,…). There page builder profile will been generated into content of a cms page.

  • We create page builder profile and save it
  • A CMS Page will been created same Identifier with Page Builder Profile
  • After save the page builder profile, a widget shortcode will been added into Content of CMS Page as this:


{{widget type="Ves\PageBuilder\Block\Widget\Page" block_id="1" code="demo-homepage-01"}}

block_id: is ID of page builder profile

code: is Identifier (URL Key) of page builder profile

– To manage there page profile please go to admin > Ves Pagebuilder > Pages Builder > Manage Page Profile

Build a page builder profile “”

Create Element Builder Profiles

Reference Block Builder Profiles



Accordion With Background


Core Magento Blocks



Content Carousel

List Categories

Category Info

Tab by Category

Simple Content Html Block

Coupon Countdown Banner

We use the widget to load a countdown banner with magento 2  coupon code information (cart price rules of magento marketing section).

Banner Countdown Timer

Load banner image with count down timer.

we config the widget as this:

magento 2 pages builder | banner countdown widget config

Counting Number

Showing counting number as this:

We config the widget as this:

magento 2 pages builder | counting number widget

Load Custom Extension Block

If you want to load any extension’s block without use layout xml, we can use the widget to make that.

For example: we want to load block type “Magento\Newsletter\Block\Subscribe”  – it will been call to block class file “vendor/magento/module-newsletter/Block/Subscribe.php

Please follow as this:

ves pagebuilder | load custom block widget guide


Widget options:

Addition Class: Custom Block css class, use for custom style for block

Block Type: Input the block type (it will call to module block class), same way of layout xml are calling.

On layout xml, the block are calling as this:

<block class=”Magento\Newsletter\Block\Subscribe” name=”form.subscribe” as=”subscribe” before=”-” template=”Magento_Newsletter::subscribe.phtml”/>

Block Name: input the name for the block as you want.

Block Parameters: You can input there param will use on the block. example:


Deal Product

Facebook Widget

Facebook Comment

Feed Reader


Google Plus Button

Google Map

Google Plus

Heading Text

Html Content



Gallery Images

Newsletter Widget

Our Service


Pinterest – Profile Widget


Pricing Plan

Single Product Block

Progress Bar

Generate a Shortcode

Single Image

Single Deal Block

Social Links

Social Share Links

Tab by Source and Conditions

Content Swiper Slider

Twitter Widget


Live CSS Editor

Config Live Css Editor

1, Config to use Live Css Editor on frontend

To use the feature on frontend you should enable the live css editor in backend (default it was disabled).

1, Go to admin > Venustheme > Ves Page Builder > Configuration > Live Css Editor.

2, Enable option “Enabled Live Css Tool”

3, Choose the default live css profile “Default.xml” – This is file store all css selector name (element/section class or id to use to detect and apply css code for them). You can change the file or clone the file in the folder “pub/pagebuilder/livecss/profiles/default.xml”, and change the element/section class/id or css selector name as you want.

4, Save the Setting, and flush the cache.

You can limit the people can see the Live Css Tool on frontend by input ip address or just allow admin can save the css profile on frontend, other can not save the changes.

2, Use the css tool, please view my screenshots:

The live css tool will show on top left on frontend


You can load saved profile to change or delete

Apply css profile for frontend

To apply the custom live css file on frontend. Please go to admin > Venustheme > Ves Page Builder > Settings > Live Css Editor.

Select the css profile in the dropdown “Load Custom Css Profile” then save the setting, and flush cache of the site. The css file was stored in folder (as default, or you can change the folder by input the path into option “Css Profile Folder Path”): pub/pagebuilder/livecss/customize/democss1.css

How To Custom?

How to import sample profiles?

Please follow there steps to setup our sample data for your site.

Step 1. Download sample file at here: http://newdemo.demo4coder.com/m2/Ves_Pagebuilder_Sample.zip

Step 2. Decompress the file on your local PC, you will get 3 folders: profiles, app, pub. Then upload 2 folders: app, pub into webroot folder of your site.

Step 3. Go to your site admin > Venustheme > Setup > Import. Then choose file “all-sample-profiles.json” in folder profiles where you decompress the sample file. Then click on button “Import Configuration”

Step 4. Run magento commands:

php bin/magento setup:upgrade –keep-generated
php bin/magento setup:static-content:deploy


You can check sample demo at here:







How to load css, js files on special page builder?

If you want to load custom css file for a page of builder profile. You can do as steps:

Step 1. Create css files in folder: /app/design/frontend/[Theme Vendor]/[Theme Name]/Ves_PageBuilder/web/css/sample/

for example:

/app/design/frontend/[Theme Vendor]/[Theme Name]/Ves_PageBuilder/web/css/sample/profile04.css

/app/design/frontend/[Theme Vendor]/[Theme Name]/Ves_PageBuilder/web/css/sample/footer02.css

Step 2. Edit page profile in backend > open tab “CMS Page Information”. Then add code in “Layout Update XML” as this:

<css src=”Ves_PageBuilder::css/sample/profile04.css” />
<css src=”Ves_PageBuilder::css/sample/footer02.css” />

Step 3. Save the page profile and clean cache of the site.

How to extension extension files into custom theme?

How to fix break styles in custom theme?

How to custom style for builder widgets?

How to create widget?

How to custom widget settings?

Theme Integration

Porto Theme

Integrate Ves Pages Builder Extension in Magento Porto Theme


Ultimo Theme

Integrate Ves Pages Builder Extension in Magento Ultimo Theme

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