How to layout pages using Visual Composer

This shows how to use the Visual Composer, layout the page using the power of Visual Composer. In adding/editing page you can use the Visual Composer by clicking the button below the page title. See figure below.

Click the button to enable/disable the visual composer.

In this topic

We will explain about using the page section, rows & columns.

1. Using Page Section

Page Section is a container element, within which you can add other elements. This element is a more complete alternative to the Row element. It has more options than the Row element, its recommended to use Page Sections if you need the options which the Row element doesn’t have.

We strongly recommend avoiding the nested use of Page Sections with Rows, as this causes both performance and unexpected layout issues.

To add the Page Section element in a page or post to appear on the website, please follow steps below:

1.1. Add Page Section Element

To use Page Section element, click on the + (plus) icon, and then click on Page Section.

After adding the Page Section element, click on the pencil icon to show a pop up window from which you can set options of the Page Section element. See below the detailed information of each option for the Page Section element:

1.1.1. Section Layout

This option sets the layout of the Page Section. If you choose One Half layout, the uploaded background image will be displayed in one half of the screen width, while the elements placed in this section will occupy the rest of the half (not screen-wide, rather it will follow half of the main grid width). There are 3 available options right now:

  1. Full Layout
  2. One Half Layout (Background Image on Left & Content in Right)
  3. One Half Layout (Background Image on Right & Content in Left)
Section Layouts

1.1.2. Background Image

This option to set upload or choose an image from the Media Library for the background of Page Section.

Background Image

1.1.3. Background Image (Portrait)

This option to set upload or choose an image from the Media Library for the background of Page Section. Alternatively, this image could be shown in mobile devices with portrait orientation. It is recommended to use images with portrait ratio such as 2:3.

Background Image (Portrait)

1.1.4. Background Color

This option is to set the background color of the Page Section.

Background Color

1.1.5. Background Blend Modes

This option is yet an experimental feature. Compatible with some browsers (Chrome, Opera, Firefox and partially Safari) The available options are None, MultiplyScreen, OverlayDarkenLighten, Soft Light and Luminosity

Background Blend Modes

1.1.6. Top And Bottom Border Color

This option to set a color for top and bottom border of Page Section.

Top and Bottom Border Color

1.1.7. Background Attachment

This option sets whether the background image is fixed or scrolls with the rest of the page. Available options are Scroll and Fixed.

Background Attachment

1.1.8. Background Position

This option is to set the position of the background image. The first value defines the horizontal position and the second the vertical position. Available options are Left Top, Center Top, Right Top, Left Center, Center Center, Right Center, Left Bottom, Center Bottom and Right Bottom.

Background Position

1.1.9. Background Repeat

This option is to use the background image to repeat itself or not. And if yes, it can be set the repeat direction. Available options are Repeat, No Repeat, Horizontal Repeat and Vertical Repeat.

Background Repeat

1.1.10. Cover Whole Background

This option is to force the browser to stretch background image in a way that it fills up the whole container. Some parts of the background image may not be in view within the background positioning area.

Cover Whole Background

1.1.11. Parallax Background

Using this option if you want the background image to have a Parallax effect.

Cover Whole Background

2. Using Row

3. Using Columns

0