Manage Section

Table of Contents

Each page of the Page Builder is made up of sections. Below is an example of a section.

Notice there is a blue border around each section on hover.

Inside the sections, you have columns. And inside the columns are widgets.

Add Section #

To add a section, click the plus(+) sign. Then, you can hover over the columns and choose four, three, two or your desired column layout from the selection.

You can also choose and click the folder icon to choose from the predefined templates.

Edit Section #

Use Section handles to edit all elements and move them around. Click the section handle on the left. The plus(+) sign lets you add a new blank section.

To edit your section, edit the dots in the middle. This opens the panel with the layout, style, and advanced section settings.

Move a Section #

To Move a section, use the middle dots to drag and drop the section up or down.

Here, you can also right-click the middle dots to duplicate, copy, delete and more.

Section Overview #

Layout #

  1. Stretch Section: Force the Section to stretch to the full width of the page
  2. Content Width: Set the Content Width to Boxed or Full Width. When choosing Boxed – use the slider to set your width
  3. Columns Gap: Set your Columns Gap
  4. Height: Choose between Fit to Screen: Your section will fill the screen, and Min Height: Set a Min Height, and use the slider to set your section height
  5. Vertical Align: Set your Section content’s vertical alignment
  6. HTML Tag: Set an HTML Tag for your section. Learn more about HTML Tags

Style #

Background (Normal & Hover)

  1. Background Type: Choose between Classic , Gradient , or Video Background

Background Overlay (Normal & Hover)

  1. Background Type: Choose between Classic or Gradient
  2. Blend Mode: Set a Blend Mode

Border (Normal & Hover)

  1. Border Type: Set a Border Type
  2. Border Radius: Set your Border Radius
  3. Box Shadow: Add a Box Shadow

Shape Divider (Normal & Hover)

  1. Type: Click the dropdown to choose your Shape Divider style
  2. Color: Pick a color
  3. Width: Set the width of your Shape Divider
  4. Height: Set the height of your Shape Divider
  5. Flip: Flip the direction of your Shape Divider
  6. Bring to Front: Force your Shape Divider to be in front of other objects

Learn more about Shape Divider

Typography

  1. Set Typography Colors for the section

Note: The ‘Set Typography’ colors won’t work if Default Colors are enabled.

#

Advanced #

Advanced

  1. Margin: Set the section Margin
  2. Padding: Set the section Padding
  3. Z-index: Set the Z-Index. Learn more about Z-Index
  4. CSS ID: Set an CSS ID for your section
  5. CSS Classes: Set CSS Classes for your section

  Motion Effects (Pro users only)

  1. Sticky: Set your section as Sticky, and choose between Top or Bottom. Learn more about Sticky
  2. Scrolling Effects: Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. Learn more about Scrolling Effects
  3. Entrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation

Responsive

  1. Reverse Columns: Slide to reverse your columns order (Great for Mobile)
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile

Attributes (Pro only)

  1. Add your own custom attributes. Learn more about Custom Attributes

Custom CSS (Pro only)

  1. Add your own custom CSS

Powered by BetterDocs