Skip to main content
Columns - Create, Edit and Style

Learn to create, edit, and style Yeeflow columns for dynamic layouts, enhancing page design and user experience with customization options.

Updated over a week ago

Columns can be manipulated and styled via the options in the Settings Panel on the left or by right-clicking the Column handle and choosing from the context menu that pops up.


Create new columns

If you wish to add a new column, select one of the existing column in a section, and click the operation menu, then choose Add Column.

Pro Tip

Columns include content area inside, where you can drag/add other controls from designer. Columns are placed horizontally (on PC view) in section, also can display vertically on Tablet or Mobile view with the settings of column width.


Layout Settings

The width of each column is equal division by default, means 100% for 1 column, and 50% each for 2 columns etc. But you can change the width of each column by giving different percentage. For example, there are 3 columns in one section. You can set the width as 20% for column 1 and column 3, and set column 2's width as 60%.

You can set different percentage on PC, tablet and mobile devices. For tablet and mobile size, you can have columns display with multiple rows by changing the percentage of each column width:

Detail settings of 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 of 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. Controls Space (px, em, rem, calc): Set the space of controls in this column.

Space Definitions

  • Space Between – Controls start and end at the edge of the column, with equal space between them

  • Space Around – Controls are spaced equally, and the edges are half the size of the space between widgets

  • Space Evenly – Controls have equal space between, before and after them


Style a Column

Background (Normal & Hover)

Choose between Classic (which allows you to set a background color or image), Gradient (allowing you to set a color gradient background), Video background, or an image Slideshow background.

Border (Normal & Hover)

  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 column.


Advanced settings

Advanced

Set the margin and padding to leave the spaces outside and inside contents. A column's padding also affects its height. It’s best practice to set a Section's top and bottom padding and add content to let it adjust accordingly.

  1. Margin: Set the section Margin

  2. Padding: Set the section Padding

  3. CSS ID: Set a CSS ID for your column

  4. CSS Classes: Set CSS Classes for your column

  5. Responsive: Show or Hide column on Desktop, Tablet, or Mobile

Responsive

Show or Hide column on Desktop, Tablet, or Mobile

  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

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


Did this answer your question?