Column Overview

Author: Iris 108 views

This article will show you everything about how to Create, Edit, & Style Columns.

EComposer uses three main building blocks: Sections, Columns, and Elements. Sections are the largest building blocks and are located inside Sections. They are used to house the Elements, as well as Elements, placed inside Columns.

How do columns work?

Columns can be manipulated by right-clicking the column handle and choosing from the context menu that pops up.

  • Insert column, Duplicate: If you want to have the same or insert a different column. You can quickly use right-clicking.
  • Save As Template: You are allowed to save a column and then add it to anywhere that you like.
  • Copy & Paste: You can copy to save to the clipboard then paste the column to other places.
  • Paste Style: You can copy a column and then paste only styles for other columns.
  • Delete Column: If you don’t like the column, you can quickly delete it here.

Moreover, you can adjust the visibility of columns, including show or hide.

Drag and drop to change position between columns.

Columns also can be styled either via the options in the sidebar or on the left when you click Edit Column.

Layout

  • Column Width (%): Set your Columns Width. Available for desktop, tablet, and mobile devices.
  • Elements Space (px): space between the Column content’s.
  • Vertical Align: Set your Column Content’s vertical alignment. Choose from Top, Middle, Bottom, Space Between, Space Around, Space Evenly.
  • Horizontal Align: This extends the ability of the inline positioning and lets you horizontally align. Choose from Left, Center, End, Right.
  • HTML Tag: Set an HTML Tag for your column. Choose the tag that you want to use.

Design

1. Background

  • You change the background for both normal and hover states.
  • Background: This option allows you to change the background for all devices including mobile, tablet, and desktop devices.
  • CSS filter: This allows you to adjust blur, brightness, contrast, etc. for the background.
  • Transition duration (ms): This option only can use for the hover state, you can enter the time that the hover background will appear after hovering.

2. Border

Set Border, Border Radius, Box Shadow for columns.

3. Typography

Set Typography for the Column content.

Leave a Comment

On this page