The page section shortcode is a container shortcode that allows you to add other shortcodes inside. This shortcode is a more complete alternative to the row shortcode. It has more options, but at the same time is bulkier , so only use it if you need the options that the row shortcode doesn’t have.
In this article, we’ll explain how to configure the page section shortcode.
Displaying the Page Section Shortcode
To add the shortcode:
1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.
3In the Add Element pop-up screen, search for Page Section and click on it to be added to the page.
4When the shortcode is added, a new pop-up screen called Page section Settings will open that allows you to configure the shortcode settings.
5Configure the settings as required. More settings are explained in the next sections.
| Setting | Description |
|---|---|
| Section Layout | Sets the layout of the Page Section. Available options are: Full Layout, One Half Layout (Background Image on Left & Content in Right), and One Half Layout (Background Image on Right & Content in Left). |
| Top And Bottom Border Color | Sets the color for the top and bottom border of page section. |
Note: If you choose the One Half layout, the uploaded background image will be displayed on one half of the screen width, while the shortcodes placed in this section will occupy the rest of the half (not screen-wide, but rather it will follow half of the main grid width).
6Click on Save Changes and publish or update the page to check the result.
Configuring the Page Section Settings
After you’ve added the page section shortcode, a pop-up window will appear where you can set the options. Below is a detailed description of each option for the page section shortcode.
| Setting | Description |
|---|---|
| Scroll To Bottom Arrow | Enable this option if you want to have an arrow icon at the bottom of the page section which upon clicking, will scroll down the page with a smooth animation to the next section. |
| Section ID | Use this option to add an ID for the page section. This will give you a way to refer to it in the future for your custom CSS or Javascript code. For example if you add “contact” for this option (without quotation marks), you will be able to access the page section later by adding a link like this into your code: #contact |
Configuring the Background Image and Color
There are several settings in the page section settings pop-up which allow you to set the background color or add a background image.
| Setting | Description |
|---|---|
| Background Image | Upload or choose an image from the Media Library for the background of the page section. |
| Background Image (Portrait) | Upload or choose an image from the Media Library for the background of the page section. Alternatively, this image can be shown on mobile devices with a portrait orientation. It is recommended to use images with portrait ratio such as 2:3. |
| Background Color | Sets the background color of the page section. |
| Background Attachment | Sets whether the background image is fixed or scrolls with the rest of the page. For more information about Background Attachment, click here. Available options are: Scroll and Fixed. |
| Background Position | Sets the position of the background image in the page section. 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 Repeat | Use this option to decide if you want the background image to repeat itself or not. And if you want it to be repeated, you can set the repeat direction. Available options are: Repeat, No Repeat, Horizontal Repeat and Vertical Repeat. |
| Cover Whole Background | Use this option to force the browser to stretch the 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. |
| Parallax Background? | Enable this option if you want the background image to have a Parallax effect. To see a Parallax effect demo, click here. |
| 3D Speed Factor | Sets the Parallax effect speed. Both positive and negative values are allowed for this option. Try to test different values for this option to find the best speed for your Parallax effect case. |
Configuring the Video Background
| Setting | Description |
|---|---|
| Background Video | Enable this option if you want to have a video background for the page section. Available options: Yes and No. |
| Background Video Preview Image (Fallback Image) | Use this option to upload a placeholder background image for the video. This image will be shown while the video is loading. Also it will keep showing if the user’s machine can’t play the video for some reason. This image will be shown for all Mobile and Tablet devices, since video background functionality is not available for those devices. |
| Video Source | Use this option to decide if you want to upload your own video files for the background video or use Social Video Sharing services such as Youtube or Vimeo. Available options are: Self Hosted and Social Hosted. |
| Background Video (.MP4) | Upload your video file in MP4 format. You’ll need to upload other video formats too for cross-browser compatibility. This video format is for IE 9 compatibility. |
| Background Video (.WebM) | Upload your video file in WebM format. You need to upload other video formats too for cross-browser compatibility. This video format is for Firefox 4, Opera, and Chrome compatibility. |
| OGV Format | Upload your video file in OGV format. You’ll need to upload other video formats too for cross-browser compatibility. This video format is for older Firefox and Opera compatibility. |
| Video Loop? | Enable this option if you want the video to restart automatically when it’s played to the end. |
| Overlay Mask Pattern? | Enable this option to have an overlay pattern on the video background. This option is used to make the video a little bit less colorful so you can add your title text over it without a readability problem. |
| Gradient Overlay Orientation | Sets the overlay gradient direction for the background of the page section. Available options are: –No Gradient,Vertical ↓, Horizontal →, Diagonal ↘, Diagonal ↗ and Radial ○. |
| Overlay Color | Adds the starting color for the gradient overlay. If you set No Gradient, then this option will act as a simple overlay color with no extra pattern. |
| Overlay Color End | Adds the ending color for the gradient overlay. Set this option to blank if you don’t want a gradient overlay. |
| Overlay Color Mask Opacity | Sets the opacity of the overlay color of the page section. |
Configuring the Page Section Styling
To select the style or change the size of the page section you’ll need edit the following options. Each option has a description which you can find below:
| Setting | Description |
|---|---|
| Inner Shadow | Enable this option if you want to have a light inner shadow effect at the top area of the page section box. |
| Select Section Layout | Sets the layout of the section. Available options are: No Sidebar, Left Sidebar and Right Sidebar. |
| Sidebar | Sets a sidebar for the page section. Set this option to blank if you don’t want to have a sidebar assigned. |
Configuring the Page Section Height
There are a few settings in the page section settings pop-up that allow you to set the height of the page section.
| Setting | Description |
|---|---|
| Page Section Adaptive Height | If you enable this option, the height of the page section will be determined based on the background image. Consider that page section’s content won’t get resized automatically and it may overflow if the content is not responsive. Also the Full Screen Height? option will need to be disabled. |
| Page Section Minimum Height | Sets a minimum height value for the page section. The value for this option is in pixels. |
| Full Width? | Enable this option to make the page section span across the whole width of the main theme container. |
| Full Screen Height? | Using this option you can set the height of the page section to cover the whole visible screen area. Please note that if the content is larger than the window height, this feature will be disabled. This option also works in responsive mode, and it changes the height of page section accordingly. |
| Center Vertically | This option puts the whole content of the section in center. The option is not available when Full Height is on. |
Configuring the Page Section Spacing
| Setting | Description |
|---|---|
| Padding Top | Sets the spacing between the content and the top border of the page section. |
| Padding Bottom | Sets the spacing between the content and the bottom border of page section. |
| Margin Bottom | Sets the spacing between the bottom border of page section and the next shortcode. |
Configuring the Visibility for Devices
The Visibility For Devices field in the settings pop-up allows you to configure the visibility of the shortcode on different devices.
You can read the Configuring the visibility for devices article for further explanation.
Adding an Entrance Animation
The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll through the browser.
You can read the Configuring a shortcode’s entrance animation article for further explanation.
Adding an Extra Class Name
The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
