Visual Composer Elements

Basic Introduction

BuilderPress Theme's basic pages like Home, About and Contact pages are built in Visual Composer page builder. If you have done Demo Import then these pages have already been created along with all contents.
We will try to provide complete documentation of how to add Visual Composer elements in your page and how to edit them.

Visual Composer Comes with to types of Editors.

  1. Front-end Editor
  2. Back-end Editor

We recommend you to use Back-end Editor for adding content elements.

Lets start with creating a page. Go to WordPress Admin > Pages > Add New to create a page using Default Template. Give it a name (i.e Home) and click on BACKEND EDITOR as shown in image below.

Visual Composer

You can disble the banner if you are going to add Home Main Slider.
Consult documentation to learn about Banner settings in How To section.
Visual Composer

Click on "Add Element". Save changes whenever you add element and update the page.
Visual Composer

Go to "BuilderPress" tab and click on an element to add. There are two types of Elements, Simple and Nested, with different icons as you can see in image below. Nested Elements will add more elements once they are added. Continue the documentation to learn about it.
Visual Composer

Although all elements are self explanatory and brief desciption is geiven under every field. But we will go through all BuilderPress Visual Compser Elements one by one.
Visual Composer

Section Top Icon

Add Section Top Icon from BuilderPress Elements. You can change the default settings for your requirements. Hook Icon will be displayed if no image is selected. Visual Composer

Section Heading and Intro

Visual Composer

Core Expertise 1

To Add Core Expertie Variation 1, Select default Row element of visual composer as shown in image below. Visual Composer

Now select the columns in that Row element as shown below. Visual Composer

Click + icon to add element. Visual Composer

Add Core Expertise 1 from BuilderPress elements. You can add Icon or Image to show. Click "Save changes" when all done. Visual Composer

Add Core Expertise 1 element in all columns and its done. Visual Composer

Core Expertise 2

Add Core Expertie Variation 2 from BuilderPress elements. It is a nested element. you have to add its child element after adding this.

Give the heading and text to parent element as shown in image below. Visual Composer

When you click on "Select URL" button, another box "Inset/edit link" will open to set URL and Button text as shown belown in image. Click "Set Link" to save.
Visual Composer

Now Parent element is added. Click on "+" icon to add child element. Visual Composer

After clicking its child element Core Expertise2 will appear. Click on it to add. Visual Composer

Now add settings and click save. Visual Composer

Call To Action Bar

Add Call To Action Bar from BuilderPress elements and add settings. Visual Composer Visual Composer

When you click on "Select URL" button, another box "Inset/edit link" will open to set URL and Button text as shown belown in image. Click "Set Link" to save.
Visual Composer

Google Map

Add Google Map from BuilderPress elements. Make sure that Google Map API key in Customize > MISC > Google Map is already given.

if you want to learn how to get Google Map API Key Click Here.
If you wnat to learn how to get Google Map Coordinates Click Here.

If Latitude and Longitude Fields are empty, Customize > Misc > Google Map default Coordinates will be applied. Visual Composer Visual Composer

Contact Form

Add Contact Form from BuilderPress elements. Both Contact Form 7 and Ninja Forms are supported. Add Contact Form 7 shortcodes as shown in image below.
To learn how to setup Contact Form 7 Click Here.

Visual Composer

Why Choose Us

Add Why Choose Us element from BuilderPress elements and save it. Visual Composer

Click + icon to add children. Visual Composer

Click one of its children to add i.e Qualities. Visual Composer

Enter Icon, Title and Text for the Qualities. Visual Composer

Again to add more children i.e Images, click on inner + icon. Visual Composer

Add image and set positions within its contanier. If all positions set to 0, the image will be in center. Visual Composer

When all qualities are set like shown below in image, click "Update". Visual Composer

You will see beautiful section like the demo contents as shown in image below. Visual Composer

Client and Partners

Add Client and Partners element from BuilderPress elements. You have option to show them in carousel.
Visual Composer

Click + icon to add clients and partners.
Visual Composer

Add Client and Partner item.
Visual Composer

Add settings for the client and partner and save changes.
Visual Composer

Team Members

Add Team Members element from BuilderPress elements. Make sure Team Members are added in WordPress Admin > Team .
Visual Composer

Testimonials 1

Add Testimonials 1 element from BuilderPress elements. Make sure Testimonials are added in WordPress Admin > Testimonials .
Visual Composer

Testimonials 2

Add Testimonials 2 element from BuilderPress elements. Make sure Testimonials are added in WordPress Admin > Testimonials .
Visual Composer

Recent Posts

Add Recent Posts element from BuilderPress elements. Blog posts will shown in this section.
Visual Composer

Recent Projects

Add Recent Projects element from BuilderPress elements and save changes. All projects will be displayed in this section if they have been assigned categories.
Visual Composer

Projects that are marked as featured in single projects metabox will be displayed in Featured Projects as shown in image below.
Visual Composer

Add Featured Projects 1 element from BuilderPress elements and click "Save Changes".
Visual Composer

Projects that are marked as featured in single projects metabox will be displayed in Featured Projects as shown in image below.
Visual Composer

Add Featured Projects 2 element from BuilderPress elements and click "Save Changes".
Visual Composer

Services 1

Add Services 1 element from BuilderPress elements. Make sure services are added in WordPress Admin > Services. Visual Composer

When you click on "Select URL" button, another box "Inset/edit link" will open to set URL and Button text as shown belown in image.
Click "Set Link" to save.
Visual Composer

Services 2

Add Services 2 element from BuilderPress elements. Make sure services are added in WordPress Admin > Services. Visual Composer

When you click on "Select URL" button, another box "Inset/edit link" will open to set URL and Button text as shown belown in image.
Click "Set Link" to save.
Visual Composer

Contact Details

Add Contact Details from BuilderPress elements and click "Save Changes".
Visual Composer

Click + icon to add Contact Details.
Visual Composer

Add child elements. Visual Composer

Lets add first Contact Detail List as shown in image below. Visual Composer

Click on inner + icon to add more items. you can add more contact detail elements like email, fax, address etc. Visual Composer

Now add Office Opening Days/Hours element. Visual Composer Visual Composer

Home Main Slider

Add Home Main Slider from BuilderPress elements and click "Save Changes". Visual Composer

Click + icon to add Slides.
Visual Composer

Click Home Mail Slide Single to add as slide. Visual Composer

Setup slide's detail as shown in image below. You can add as many slides as you want. Visual Composer

When you click on "Select URL" button, another box "Inset/edit link" will open to set URL and Button text as shown belown in image.
Click "Set Link" to save.
Visual Composer

Add Core Values Carouel and add settings as shown in image below.
Visual Composer

Click + icon to add Slides.
Visual Composer

Add Core Values Item
Visual Composer

Setup Core Values Item settings as shown in image below. you can add as many slides as you want.
Visual Composer