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.
- Front-end Editor
- 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.
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.
Click on "Add Element". Save changes whenever you add element and update the page.
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.
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.
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.
Section Heading and Intro¶
Core Expertise 1¶
To Add Core Expertie Variation 1, Select default Row element of visual composer as shown in image below.
Now select the columns in that Row element as shown below.
Click + icon to add element.
Add Core Expertise 1 from BuilderPress elements. You can add Icon or Image to show. Click "Save changes" when all done.
Add Core Expertise 1 element in all columns and its done.
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.
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.
Now Parent element is added. Click on "+" icon to add child element.
After clicking its child element Core Expertise2 will appear. Click on it to add.
Now add settings and click save.
Call To Action Bar¶
Add Call To Action Bar from BuilderPress elements and add settings.
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.
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.
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.
Why Choose Us¶
Add Why Choose Us element from BuilderPress elements and save it.
Click + icon to add children.
Click one of its children to add i.e Qualities.
Enter Icon, Title and Text for the Qualities.
Again to add more children i.e Images, click on inner + icon.
Add image and set positions within its contanier. If all positions set to 0, the image will be in center.
When all qualities are set like shown below in image, click "Update".
You will see beautiful section like the demo contents as shown in image below.
Client and Partners¶
Add Client and Partners element from BuilderPress elements. You have option to show them in carousel.
Click + icon to add clients and partners.
Add Client and Partner item.
Add settings for the client and partner and save changes.
Team Members¶
Add Team Members element from BuilderPress elements. Make sure Team Members are added in WordPress Admin > Team .
Testimonials 1¶
Add Testimonials 1 element from BuilderPress elements. Make sure Testimonials are added in WordPress Admin > Testimonials .
Testimonials 2¶
Add Testimonials 2 element from BuilderPress elements. Make sure Testimonials are added in WordPress Admin > Testimonials .
Recent Posts¶
Add Recent Posts element from BuilderPress elements. Blog posts will shown in this section.
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.
Featured Projects 1¶
Projects that are marked as featured in single projects metabox will be displayed in Featured Projects as shown in image below.
Add Featured Projects 1 element from BuilderPress elements and click "Save Changes".
Featured Projects 2¶
Projects that are marked as featured in single projects metabox will be displayed in Featured Projects as shown in image below.
Add Featured Projects 2 element from BuilderPress elements and click "Save Changes".
Services 1¶
Add Services 1 element from BuilderPress elements. Make sure services are added in WordPress Admin > Services.
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.
Services 2¶
Add Services 2 element from BuilderPress elements. Make sure services are added in WordPress Admin > Services.
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.
Contact Details¶
Add Contact Details from BuilderPress elements and click "Save Changes".
Click + icon to add Contact Details.
Add child elements.
Lets add first Contact Detail List as shown in image below.
Click on inner + icon to add more items. you can add more contact detail elements like email, fax, address etc.
Now add Office Opening Days/Hours element.
Home Main Slider¶
Add Home Main Slider from BuilderPress elements and click "Save Changes".
Click + icon to add Slides.
Click Home Mail Slide Single to add as slide.
Setup slide's detail as shown in image below. You can add as many slides as you want.
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.
Core Values Carousel¶
Add Core Values Carouel and add settings as shown in image below.
Click + icon to add Slides.
Add Core Values Item
Setup Core Values Item settings as shown in image below. you can add as many slides as you want.
