Tilda Blog

How to Combine Blocks With and Without Columns

Columns in web design help structure information such as features, rates, or services. Alternating blocks that contain different numbers of columns can slow down your website and decrease readability.

The easiest way is to alternate blocks with several columns and blocks with a single column. Doing so will distribute the visual weight and create a balance between a block with columns and a single full-width block with content.

Don’t overuse columns, place them only where necessary, breaking them up with simple blocks. For example, talk about your company using blocks FR101, FR102, or FR103. The content is divided horizontally there, and a single column is used.

If you do want to place two blocks with columns one under the other, make sure they have the same number of columns.

What blocks with columns go well together?
Columns are most often used in the blocks from the "Features" and "Services" categories. To break them up visually, you may use single-column blocks from the "About" category (e.g., AB101-AB108). They work great for quotes, short descriptions, and CTAs.

Simple blocks from the "Gallery" category, such as GL01 or GL19. Use them for product photos or to visualize the production process. They attract attention and break up a grid-like column structure.

Use blocks from the "Cover" category not only for the front cover page but also as a visual pause between blocks. Include a quote on the cover, a short phrase about your mission and values, or repeat a CTAs.

Don't place text in a column unless it's a short quote or a headline. A big amount of text inside a narrow column is hard to read as the eyes jump from line to line.
Made on