Using Columns and Layouts in Webey

A professional website needs more than content stacked vertically. With columns and layout blocks, you give your pages structure, visual variety, and a professional appearance. In this article, you will learn how to make the most of the columns, card-grid, hero, spacer, and divider blocks.

The Columns Block

The columns block is one of the most powerful blocks in Webey. It lets you divide a section of your page into multiple side-by-side columns. You can choose between 2, 3, or 4 columns. After adding a columns block, select the desired number and start placing content in each column right away.

Setting Custom Widths

By default, all columns are equal in width, but you can manually adjust the width ratios. This is useful when you want a narrow sidebar next to a wide content area, for example. In the block settings, adjust each column's width as a percentage. Make sure the total always adds up to 100%. Common ratios include:

• 70/30 — wide content area with narrow sidebar
• 30/70 — image on the left, text on the right
• 25/50/25 — centered content with narrow side columns
• 33/33/33 — three equal columns for features or services

Nesting Blocks Inside Columns

Each column acts as its own container in which you can place other blocks. Drag a text block, image, button, or even a form into a column. You can stack multiple blocks per column. This makes complex layouts possible without writing any code.

Responsive Behavior

On mobile devices, columns automatically stack vertically. A three-column layout becomes three consecutive sections on a smartphone. This ensures your content always remains readable regardless of screen size. You do not need to configure anything for this — Webey handles it automatically.

The Card Grid Block

When you want to display repeating content — such as services, team members, or product categories — the card-grid block is ideal. This block displays a grid of cards, each containing an image, title, description, and optionally a link. The difference from the columns block is that card-grid is designed for uniform, repeating items.

Add a card-grid block and configure the desired number of columns. Then add cards and fill each one with content. The card-grid automatically adapts on smaller screens: on tablets, 4 columns become 2, and on mobile, everything stacks vertically.

The Hero Block with Overlay

The hero block is designed for large, compelling opening sections. You can set a background image with a color overlay for readability. Add a heading, subtitle, and call-to-action button. The hero block stretches across the full width of the page and is perfect for making a strong first impression on your website.

Tips for an effective hero block:

• Use a high-resolution background image that matches your brand
• Set the overlay opacity so that text remains clearly readable
• Keep the text short and impactful — a heading and one sentence at most
• Always add a clear call-to-action button

Spacer and Divider Blocks

White space is essential for a professional design. Use the spacer block to add vertical space between sections. You set the height in pixels, giving you precise control over how much breathing room there is.

The divider block adds a horizontal line that visually separates sections. This is useful when you want a more subtle separation than a large colored area or lots of white space. You can adjust the line's thickness and color in the block settings.

Best Practices for Page Structure

A well-structured page follows a logical structure that guides visitors through your content. Follow these guidelines:

• Start with a hero block — make a strong first impression right away
• Alternate wide and narrow sections — use columns to add variety
• Use white space intentionally — prevent blocks from being too close together
• Group related content — use card-grids for lists and columns for comparisons
• End with a CTA — finish every page with a clear action your visitor can take
• Test on mobile — always check how your layout looks on a smartphone via the preview function

Common Mistakes

Avoid these common mistakes when setting up your layout:

• Too many columns in a row — 4 columns fit fine on desktop, but the content per column becomes narrow. Use a maximum of 3 columns when you have a lot of text.
• Not using spacers — blocks that sit directly against each other look cluttered. Always add spacers between important sections.
• Inconsistent widths — keep your column ratios consistent on similar pages for a professional appearance.

By making smart use of columns, card-grids, hero sections, and white space, you build pages that look professional and read comfortably on any device.