How to Configure the Design Settings for Visual Composer

Posted OnJun 17, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Visual Composer, we will focus on configuring the Design Settings which covers customizing colors for various content elements.

We recommend that any color changes for the website elements outlined below be done in the Design Settings area and not the Theme Options area.

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar of the Dashboard, navigate to Visual Composer -> Design Settings.

km-vc-design-01a

Step 3) Place a checkmark in the Use Custom Design Options checkbox to enable the use of custom design options.

For this example, this field was checked.

km-vc-design-01a-next

When this field is checked, a custom.css file will be used.

Changing Element Colors

Step 4) To change the color of any of the elements shown below, determine the element you wish to change.

km-vc-design-03a

Step 5) Click the Select Color button located to the left of the selected area to display the Color Picker area.

Step 6) Select the new color by any of the following methods:

A. Enter Hex Value Enter the Hex Value of the desired color in this textbox. Click here to view a list of Hex Values.
B. Color Boxes Click to select the desired color box from the Color Boxes displayed. The Hex Value textbox will be updated with the selected color.
C. Color Slider Click, hold down the mouse and drag up or down to select the desired color. The Hex Value textbox will be updated with the selected color.

km-vc-design-04aW

Step 7) Repeat the above steps to change other element colors.

For this example, the colors were changed as shown below:

km-vc-design-55aW

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

Change Elements Bottom Margin

Step 9) Modify the default value of 35px for the Bottom Margin as needed.

For this example, no change was made.

Grid Gutter Width

Step 10) Modify the default value of 15px for the Grid Gutter Width as needed.

For this example, no change was made.

Mobile Screen Width

By default content elements stack one on top other when screen size is smaller than 768px.

Step 11) Modify the default value of 768px as needed.

For this example, no change was made.

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


Checkpoint

If you modified the Mobile Screen Width, we recommend you confirm this works as expected prior to continuing.


The next step of the guide will focus on How to Add Custom CSS in Visual Composer.

 


Leave a Reply

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

Send this to friend