> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uplifthub.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Building creatives

> How to add creative components, upload assets, and preview your ad before it goes live.

export const Ui = ({children}) => <span style={{
  display: "inline-flex",
  alignItems: "center",
  padding: "1px 6px",
  background: "#f7f8f8",
  border: "1px solid #e9ecef",
  borderRadius: 4,
  fontSize: "0.92em",
  fontWeight: 500,
  color: "#101213"
}}>
    {children}
  </span>;

Once a creative has been created, the creative detail page is where you fill in
the ad content and upload assets. The page is split into three panels: **Creative
Details** on the left, a **live preview** in the centre, and **asset uploads** on
the right. Changes to components and assets reflect in the preview in real time —
click <Ui>Save changes</Ui> to persist them.

<Frame caption="The creative detail page — components on the left, live preview in the centre, asset uploads on the right.">
  <img src="https://cdn-uplifthubs.s3.eu-west-2.amazonaws.com/Documentation/creative-detail-desktop.png" alt="Creative detail page showing three-panel layout" />
</Frame>

***

## Creative Details

The left panel shows the core details set when the creative was created: **Name**,
**URL**, and the **Use Line Item Dates** toggle. These can all be edited here
after creation.

***

## Creative Components

Below Creative Details, the **Creative Components** section contains the
text fields that populate the ad — typically **Headline**, **Body**, and **CTA**.
The exact fields depend on the template selected when the creative was created.

Type directly into each field. The preview updates as you type.

Each field also has an <Ui>+ Add from source</Ui> option — this lets you pull
content from a connected asset feed if your workspace has one configured.

<Frame caption="Creative Components — Headline, Body and CTA fields update the live preview as you type.">
  <img src="https://cdn-uplifthubs.s3.eu-west-2.amazonaws.com/Documentation/creative-components.png" alt="Creative Components fields with headline body and CTA" />
</Frame>

***

## Uploading assets

The right panel handles image assets — typically a **Main Hero Image** and a
**Partner Logo**. For each asset you can:

* Drag and drop a file directly onto the upload area
* Click <Ui>Select asset</Ui> to browse your files
* Paste an image URL directly into the URL field

Once an asset is uploaded, click the **⋯** menu next to the filename to
**Edit** (crop/adjust), **Replace**, **Open in a new tab**, or **Remove** it.

Clicking **Edit** opens the **Adjust image** modal where you can crop and
reposition the image before uploading.

<Frame caption="The asset menu — Edit, Replace, Open in a new tab, and Remove.">
  <img src="https://cdn-uplifthubs.s3.eu-west-2.amazonaws.com/Documentation/creative-asset-menu.png" alt="Asset three-dot menu showing edit replace and remove options" />
</Frame>

<Frame caption="The Adjust image modal — crop and reposition before uploading.">
  <img src="https://cdn-uplifthubs.s3.eu-west-2.amazonaws.com/Documentation/creative-adjust-image.png" alt="Adjust image modal with crop handles" />
</Frame>

***

## Previewing the creative

The centre panel shows a live preview of the ad as it will appear in situ.
Toggle between <Ui>Desktop</Ui> and <Ui>Mobile</Ui> to check both breakpoints.

<Frame caption="Desktop preview showing the ad in context.">
  <img src="https://cdn-uplifthubs.s3.eu-west-2.amazonaws.com/Documentation/creative-preview-desktop.png" alt="Creative desktop preview" />
</Frame>

<Frame caption="Mobile preview of the same creative.">
  <img src="https://cdn-uplifthubs.s3.eu-west-2.amazonaws.com/Documentation/creative-preview-mobile.png" alt="Creative mobile preview" />
</Frame>

If the preview appears small due to the panel layout, click
<Ui>Open Preview in New Window</Ui> or <Ui>Collapse sidebars</Ui> at the bottom
of the preview panel to see the full-size render.

<Note>
  The preview reflects the last saved version. Click <Ui>Save changes</Ui>
  before opening the preview in a new window to see your latest edits.
</Note>

***

## Saving

Click <Ui>Save changes</Ui> in the top right when you're happy with the
creative. The creative is now ready for review before the line item goes live.

<Tip>
  Once assets and components are complete, share a preview link with the client
  for approval before go-live. See [Sharing preview links](/creatives/preview-links).
</Tip>