How to Get Started with Visual Composer

Posted OnJun 15, 2015     CategoryQuestion & Answer     CommentsNo comment

In this section of the guide to the Visual Composer plugin we will start off with a fresh theme install and setup basic theme options for our website. This will help us create a real-world example of getting started with Visual Composer.

For the purposes of this guide, the Virtue theme will be installed and we will create a new website using the Visual Composer to build pages and add content.

Install & Activate the Virtue Theme

Step 1) Login to the WordPress Dashboard.

Step 2) Download, install and activate the Virtue theme or another theme of your choosing.

Depending on the theme selected, there may be some compatibility issues between the theme and Visual Composer.

km-vc-getting-013a

Click the Live Preview hyperlink to see how the theme looks.
Click the Activate hyperlink to set this theme as the default theme.

Step 3) If required (depending on theme selected), install and activate any necessary plugins.

For this example, there were no plugins to install.


Setup Basic Virtue Theme Options

For this example, the following options will be added/modified for the Virtue theme:

  • Change the Logo Text Color and Font
  • Change the Topbar Background Color.
  • Change the Font for the H1-H5 Headings.
  • Add a Slideshow to the Home Page.
  • Setup Menu(s).

Change the Logo Text Color and Font

Step 4) From the left-hand sidebar of the Dashboard navigate to Appearance -> Theme Options -> Main Settings.

Step 5) Select Kite One as the Sitename Logo Font.

Step 6) Enter #42a5ec in the Current Color textbox.

km-settings-40a

Step 7) Click the Save Settings button to save any changes.

Change the Topbar Background Color

Step 8) From the left-hand sidebar of the Dashboard navigate to Appearance -> Theme Options -> Advanced Styling.

Step 9) Scroll down until you see Topbar Background Color.

Step 10) Enter #42a5ec in the Current Color textbox.

km-getting-30a

Step 11) Click the Save Settings button to save any changes.

Change the Font to Kite One (H1-H5 Headings)

Step 12) From the left-hand sidebar of the Dashboard navigate to Appearance -> Theme Options -> Typography.

Step 13) For each H heading, select Kite One as the font.

km-getting-31a

Step 14) Click the Save Settings button to save any changes.

Add a Slideshow to the Home Page

Step 15) From the left-hand sidebar of the Dashboard navigate to Appearance -> Theme Options -> Home Slider Settings.

Step 16) From the Home Image Slider dropdown list, select Flex Slider.

Step 17) Click here to download the sample slides.

Step 18) Add the two slide images from the zip file downloaded above. The default image dimensions of 1170px wide x 400px high were not changed.

km-settings-35a

Step 19) Click the Save Settings button to save any changes.

Setup Menu(s)

Step 20) From the left-hand sidebar of the Dashboard navigate to Appearance -> Menus.

Step 21) Setup the Menu(s) as needed.


Checkpoint

If you installed the Virtue theme and setup the options as outlined above, the site should now look like this:

km-vc-getting-03a


The next step of the guide will focus on How to Configure the General Settings for Visual Composer.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend