Use text columns in Webflow

Create columnar text that applies to text elements and other elements, like forms that use the text columns property.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

With text columns, you can use horizontal space efficiently and maintain readability. In the Style panel, you can create columnar text that applies to text elements and other elements, such as forms. You can also set headings to span multiple columns or wrap within their column.

Columns

To wrap your content in multiple columns, set the column count, or number of columns, in the input field.

Open the text column properties to customize the column settings.

The text column properties panel includes customization fields for Gap, Divider settings and Column Child.

Column count

The default value in the column count input field is set to auto, or one column.

The column count entered is 3 in the input field. There is also -1 letter spacing and 0 text index. The three dot button for the text column properties is on the right of the columns input field.

You can specify the number of columns in the column input field. To make sure content displays in one column on mobile devices, open the mobile view and set the column count to auto.

Text column properties

Once you’ve specified the number of columns, open the text column properties next to the column count input.

Here, you can define the gap between your columns, add and style a column divider, or set a column child to span all columns.

The Text column properties panel is open displaying settings for the Gap, Divider settings and for Column child.

Gap

The default gap (the space between columns) is 0 px. You can customize it in the column properties.

Learn more about input values and units.

Divider settings

You can add a divider (a line or rule) between the columns if you’re going for a newspaper look. You can customize the style, width, and color of this divider here.

Style

Choose between the following line styles:

  • No rule (x)
  • Solid ————
  • Dashed -------
  • Dotted …….

Width

Use the selector or input field to specify how thick your divider is. You can use both integers and decimals.

Color

Specify the color of this divider by typing the color value or name in the input field or using the color picker.

The Divider settings section of the text column properties panel has a color setting #4353ff. The color section is highlighted on the panel.

Column child

Once you apply the columns property to an element, any element inside becomes a column child. By default, column children wrap to the next column — their span setting is set to “don’t.” You can override this setting for specific children.

The Column child section of the text column properties is highlighted.

Span

By default, column children are set to don’t span. If you want an element, such as a heading, to span all columns, select the element and change the span setting to “do”.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top