---
title: "Sections, columns, dividers and spacers"
description: "Lay out your page with sections and columns, add a header and footer, and use dividers and spacers for space."
url: https://scratcher.io/help/elements/sections-columns-and-layout
language: en
---

1. [Help center](https://scratcher.io/help)
2. [Elements and design](https://scratcher.io/help/elements)
3. Sections, columns, dividers and spacers

# Sections, columns, dividers and spacers

Lay out your page with sections and columns, add a header and footer, and use dividers and spacers for space.

## Sections and columns

A **Section** is a box that holds other elements. Use it to put elements side by side, or to give a group of elements a background.

1. Insert a **Section** and drag elements into it.
2. On the **Content** tab, choose the number of **Columns**: 1 to 4.
3. With more than one column, choose the **Size ratio**, for example **Equal**, 1:2 or 2:1, or **Custom**.
4. Choose the **Mobile orientation**: **Left on top**, **Right on top** or **Keep columns** (columns stay side by side on phones).

If you reduce the number of columns, the columns at the end are removed together with their content.

On the **Styles** tab: **Background** (color or image), **Border**, **Width**, **Shape**, the vertical **Alignment** of the columns and the **Gap** between them. In popups, you can also make a section's **Height** **Full**.

Sections, columns and menus are part of the plans with the **Elements** feature.

## Header and footer

A header and a footer are sections that appear on every page, for example with your logo and a link to your terms. On each page, you can choose **Hide header on page** or **Hide footer on page**. Turn on **Make absolute** in the header's or footer's settings to let it float over the page instead of taking up space.

## Divider

A **Divider** is a line between elements. Set its **Color**, **Border** style, **Size** (length and thickness), **Shape** and **Alignment**. You can add an **Icon** in the middle of the line, and adjust it under **Display settings**.

## Spacer

A **Spacer** adds empty space. Drag its handle on the page, or type the height in pixels (5 to 500).

Click the icon on a divider to open **Divider icon**, where you set the icon's size, alignment and gap. A spacer's handle says **Drag to resize spacer height**.

Elements and design

- [How element settings work](https://scratcher.io/help/elements/element-settings-basics)
- [Edit text and headings](https://scratcher.io/help/elements/text-and-headings)
- [Buttons and click actions](https://scratcher.io/help/elements/buttons-and-click-actions)
- [Images, logos, video and fonts](https://scratcher.io/help/elements/images-video-and-fonts)
- [Sections, columns, dividers and spacers](https://scratcher.io/help/elements/sections-columns-and-layout)
- [Page settings, backgrounds and popup pages](https://scratcher.io/help/elements/page-settings-and-backgrounds)
- [Countdown, social, share and menu elements](https://scratcher.io/help/elements/countdown-social-share-and-menu)
- [Interactive graphics with clickable hotspots](https://scratcher.io/help/elements/interactive-graphic)
- [Cookie notice, custom code and other campaign add-ons](https://scratcher.io/help/elements/cookie-notice-and-custom-code)
- [Save and reuse templates](https://scratcher.io/help/elements/templates-and-reuse)

## Related articles

- [How element settings work](https://scratcher.io/help/elements/element-settings-basics): The Content, Styles, Settings and Effects tabs, sizes, shapes, borders, colors and backgrounds, mobile changes and add-ons.
- [Add and edit texts, images and other elements](https://scratcher.io/help/campaigns/add-and-edit-elements): Insert elements, change texts, upload images and fonts, and style everything for desktop and mobile.
- [Page settings, backgrounds and popup pages](https://scratcher.io/help/elements/page-settings-and-backgrounds): Set a page's background, align its content, turn a page into a popup, hide the header and refresh the page automatically.

## Still need help?

Real people are here to help. If you already use Scratcher, the quickest way is the chat inside the platform.

- **[Chat with us](https://platform.scratcher.io/login)**

    Log in and click the chat button in the bottom-right corner. Rex answers right away, and our team is a click away.
- **[Book a meeting](https://scratcher.io/book-a-meeting)**

    A free 30-minute video call with our team: a tour, campaign ideas or help with your setup.
- **[Email us](mailto:contact@scratcher.io)**

    Write to contact@scratcher.io and we will get back to you.