> ## Documentation Index > Fetch the complete documentation index at: https://docs.conversion.ai/llms.txt > Use this file to discover all available pages before exploring further. # Building a Landing Page > Use the landing page builder to add sections and blocks, style them, and preview the page on any device. The **Design** tab opens the landing page builder. Every change saves to the page's draft as you make it. Visitors don't see anything until you [publish](/product-docs/landing-pages/publishing). ## Layout of the builder | Area | What it holds | | - | - | | **Left rail** | **Insert** (sections and blocks), **Layers** (the page structure), and **Settings** (SEO, social sharing, and custom code). | | **Canvas** | The page itself. The dock at the bottom has **Select**, **Pan**, **Add**, zoom, and **Preview**. | | **Inspector** | Settings for whatever you've selected, split into **Content** and **Style** tabs. With nothing selected, it shows the page's **Theme** and background. | ## How a page is structured A page is a stack of **sections**. Each section holds **rows**, and each row holds **columns**. Blocks go inside columns. You can nest a row inside a column for more complex layouts. ## Adding sections Open **Insert → Sections** to add a pre-built section. Sections come styled by your theme and ready to edit. | Category | Sections | | - | - | | **Hero** | Campaign hero, Product spotlight, Webinar hero | | **Social proof** | Customer story | | **Features** | Three benefits, Downloadable guide | | **Call to action** | Closing invitation | | **Form** | Personal demo, Webinar registration | | **FAQ** | Questions, answered | | **Blank layouts** | 1 column, 2 columns, 3 columns, 4 columns | ## Adding blocks Open **Insert → Blocks**, or type `/` while editing text, to add a block: | Block | Use it for | | - | - | | **Heading** | Titles, levels 1 to 4. | | **Text** | Body copy, including bulleted and numbered lists. | | **Image** | Upload an image or paste an image URL. | | **Logo** | Your workspace logo. | | **Button** | A link styled as a button. | | **Divider** | A horizontal rule. | | **Form** | A [Conversion form](/product-docs/forms/overview). Pick an existing form or create a new one. | | **Logo gallery** | A row of customer or partner logos. | | **HTML** | Custom HTML. | Links on buttons and text can point to a **URL**, a **Section** on the same page, an **Email** address, or a **Phone** number. To link to a section, give it an **Anchor** first. ## Styling Your [theme](/product-docs/landing-pages/themes) sets fonts, colors, and spacing for the whole page. To give a section a different look, such as a dark band, choose a color scheme in its **Section theme** setting. Anything you set directly on a block overrides the theme for that block. ## Designing for every screen size Switch between **Desktop**, **Tablet**, and **Mobile** to see and adjust the page at each size. * **On mobile** on a row controls whether its columns stack, stack in reverse order, or stay side by side. * **Hidden** can be set per screen size, so you can hide a block on mobile only, or on desktop only. ## Personalizing content Type `/` in a text block and choose **Field**, **Token**, or **Liquid** to insert personalized content. On the live page, these are filled in for the visitor: * **Fields** come from the visitor's contact record. Conversion recognizes a visitor once they've submitted a form, or when they arrive from a Conversion email link. * **Tokens** come from the page's folder or campaign. See [Tokens](/product-docs/campaigns/tokens). * **Liquid** supports conditions and filters. See [Liquid](/product-docs/liquid/overview). ## Previewing Click **Preview** in the dock to see the page without editing controls. In preview you can: * Choose **Preview as a contact…** to see personalized content for a specific contact. * Change the screen size. * Click **Open in new tab** to open the draft in its own tab. Only signed-in workspace members can open draft links, and draft views don't count in analytics. Press **Esc** or click **Back** to return to editing. ## Page settings Open **Settings** in the left rail to set how the page appears in search and when shared: | Group | Settings | | - | - | | **Search** | **Title** (defaults to the page name), **Description**, and **Favicon**. | | **Social sharing** | **Title**, **Description**, and **Image** (resized to 1200×630). Falls back to the search title and description. | | **Custom code** | **Head** code, added at the end of ``, for meta tags, verification tags, and scripts that must load first. **Body** code, added before ``, for chat widgets and anything that shouldn't slow the page down. | These settings take effect when you publish. Search engines can index a page only when it's public and served from its live URL. Password-protected and members-only pages are never indexed. ## Draft status The top bar tells you where your changes stand: | Status | Meaning | | - | - | | **Draft saved** | Your latest change is saved to the draft. | | **Unpublished changes** | The draft differs from what visitors see. | | **All changes live** | The draft matches the published version. | | **Couldn't save** | The last change didn't save. Click **Retry**. | This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.