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.
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.
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
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:
- Full Layout
- One Half Layout (Background Image on Left & Content in Right)
- One Half Layout (Background Image on Right & Content in Left)
1.1.2. Background Image
This option to set upload or choose an image from the Media Library for the background of Page Section.
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.
1.1.4. Background Color
This option is to set the background color of the Page Section.
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, Multiply, Screen, Overlay, Darken, Lighten, Soft Light and Luminosity
1.1.6. Top And Bottom Border Color
This option to set a color for top and bottom border of Page Section.
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.
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.
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.
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.
1.1.11. Parallax Background
Using this option if you want the background image to have a Parallax effect.