> For the complete documentation index, see [llms.txt](https://creativemail.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://creativemail.gitbook.io/knowledge/getting-started/building_content.md).

# Building Content

Welcome to the Creative Mail builder quick start. This guide walks you through the core features so you can confidently structure layouts, add content and polish every detail.

Here’s a quick tour of the workspace and key tools:

## Stage & Sidebar

The stage lives on the left and acts as your canvas—drag in rows, columns and content blocks to build the layout. The sidebar sits on the right and holds all of your customization controls, so you can tweak whatever you have selected. A small icon between them lets you collapse the sidebar when you want more editing space.

<figure><img src="/files/1MEPLKQ1QROELJcYAr0g" alt="Stage and sidebar in Creative Mail builder"><figcaption><p><em>See how the stage and sidebar work together inside the Creative Mail builder.</em></p></figcaption></figure>

## Settings

The **Settings** tab manages global defaults for the entire design. Every row and content block starts with these values unless you override them.

<figure><img src="/files/AFnwmMWkJfvA8SHT0FHw" alt="Settings tab in Creative Mail builder"><figcaption><p><em>Adjust global defaults like colors &#x26; fonts from the Settings tab.</em></p></figcaption></figure>

You can quickly adjust:

* Content area width
* Content area alignment
* Background color
* Content area background color
* Default font
* Link color

Together these settings establish the overall look and feel of your email.

## Rows

Rows form the main structure of your email or page. Each row can include one or more columns and each column can host content blocks.

<figure><img src="/files/33I1huR7w5OVWro0CjUT" alt="Row properties in Creative Mail"><figcaption><p><em>Row properties let you fine-tune backgrounds, borders and padding.</em></p></figcaption></figure>

Row-level options include:

* Row background color
* Content area background color
* Content area borders (with per-side controls)
* Rounded corners for the content area
* Content area padding (all sides or individual)
* Background image slot inside the content area

## Columns

Use columns to create multi-column layouts, fine-tune spacing and style sections independently.

<figure><img src="/files/Kr1VOsE14kM0m5QPpWgV" alt="Column properties in Creative Mail"><figcaption><p><em>Column properties mirror row controls with background, border and padding.</em></p></figcaption></figure>

For each column, you can modify:

* Background color for the column container
* Content area background color if you want contrast against the row
* Border style, width and per-side options
* Rounded corners to soften the column edges
* Padding on each side with individual controls

The column you are working on stays highlighted, making it easy to see exactly what is being edited.

## Content

Creative Mail offers a wide range of content blocks that you can drag into any column.

<figure><img src="/files/6eAxlRoj5Gt4NhMWbrQw" alt="Content blocks available in Creative Mail"><figcaption><p><em>Drag any block—text, images, buttons and layout helpers—into your layout.</em></p></figcaption></figure>

Available content blocks:

* Title
* Paragraph
* List
* Image
* Button
* Divider
* Spacer
* Social
* Menu
* Text

Each block comes with its own padding and visibility controls so you can refine the layout for every device.

## Mobile Design Mode

Mobile Design Mode shows your layout with a mobile-first perspective, making it simple to perfect small-screen experiences.

<figure><img src="/files/j9lx2vTcm7EgZqN9x0Y1" alt="Creative Mail mobile design mode"><figcaption><p><em>Fine-tune spacing and visibility using Mobile Design Mode’s phone preview.</em></p></figcaption></figure>

Most edits apply to both desktop and mobile automatically. If you see a mobile icon next to a setting, that change affects only the mobile version.

## Preview

Preview mode lets you see exactly how your design will look on different devices and under different conditions before you send or publish.

<figure><img src="/files/hyYSekftqCmneGTCDAXG" alt="Device preview in Creative Mail"><figcaption><p><em>Preview confirms how your layout renders on desktop, tablet, mobile and dark mode.</em></p></figcaption></figure>

You can preview:

* Desktop
* Tablet
* Mobile
* Dark mode
* Custom pixel width


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://creativemail.gitbook.io/knowledge/getting-started/building_content.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.