Manage Columns

Table of Contents

You can find columns inside a section. Columns can be identified by the black dotted lines and the column icon handle as shown. Below is an example of a three-column section.

Edit Column #

To edit a column, right-click the column handle to duplicate, delete, copy, add a new column and more.

Also, right-clicking the column’s handle will show its panel for layout, style and advanced column settings.

Move a Column #

To move a column, click and hold the column handle and drag and drop to the desired position.

Column Overview #

Layout #

  1. Column Width (%): Set your Columns Width
  2. Vertical Align: Set your Column Content’s vertical alignment. This way, you will be able to stick the content of all the columns of a section to the bottom, the middle or the top or “stretch to fill” to align columns with unequal heights. Choose from Top, Middle, Bottom, Space Between, Space Around, Space Evenly
  3. Horizontal Align: This extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row. Choose from Start, Center, End, Space Between, Space Around, Space Evenly
  4. HTML Tag: Set an HTML Tag for your column. Learn more about HTML Tags

Space Definitions

  • Space Between – Widgets start and end at the edge of the column, with equal space between them
  • Space Around – Widgets are spaced equally, and the edges are half the size of the space between widgets
  • Space Evenly – Widgets have equal space between, before and after them

Style #

Background

Background Type: Choose between Classic or Gradient

Background Overlay

  1. Background Type: Choose between Classic or Gradient
  2. Blend Mode: Set a Blend Mode
  3. CSS Filters: Add Blur, Brightness, Contrast, and Saturation

Border

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

Typography

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. Entrance Animation: Click the dropdown to choose an animation. Learn more about Entrance Animation
  5. CSS ID: Set a CSS ID for your column
  6. CSS Classes: Set CSS Classes for your column
  7. Responsive: Show or Hide column on Desktop, Tablet, or Mobile

Attributes (Pro only)

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

Motion Effects (Pro users only)

  1. Sticky: Set your section as Sticky, and choose between Top or Bottom. Learn more about Sticky
  2. 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

Custom CSS (Pro only)

  1. Add your own custom CSS. Learn more about Custom CSS

Powered by BetterDocs