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

# Device mocks

> Show screenshots or short screen recordings inside a drawn TV, desktop browser or phone.

The **Device mocks** section shows your screenshots or short screen recordings inside a drawn TV, desktop browser or phone. Use it to show off an app, a booking page or your website at a glance.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![A Duo as visitors see it: eyebrow "Product tour", heading "See it in action" and intro centered above a desktop browser showing Parker's booking page.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/device-mocks/guides-sections-device-mocks-overview-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=0b984fbcaf432131cbce7094ad498582)

A desktop and a phone, side by side, showing your screens.

## When to use it

* To show your online booking, app or customer portal without a long explanation.
* To show how your website looks on a phone and on a computer.
* To play a short screen recording of a task, such as booking a visit.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Content** → **Device mocks**. You can also add it inside a column of a **Layout** section, and in the body of a blog post.

A new section shows empty screens with a hint, such as "Choose an image or video for the phone screen". Only people who can edit see the hint. Visitors see nothing until at least one screen has a screenshot or a video.

![A freshly added Duo while editing, with both screens empty and the hints "Choose an image or video for the desktop screen" and "Choose an image or video for the phone screen".](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/device-mocks/guides-sections-device-mocks-empty-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=e61250907da6fe0e5e87b15509b671a7)

Empty screens tell you what to add.

## What you can change

Select the section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. Its tabs are **Device mocks**, one tab per screen (**TV screen**, **Desktop screen**, **Phone screen**), then **Background**, **Fonts**, **Button** and **CSS**. Only the screen tabs for your arrangement appear: a Duo shows **Desktop screen** and **Phone screen**.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Device mocks editor open on the Phone screen tab beside the live section, with Phone screen shows, Phone screenshot and Phone screenshot alt text ringed.](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/device-mocks/guides-sections-device-mocks-editor-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=e8780addd8cabc9e773b151e8a507b2c)

Each device has its own screen tab.

> [accordion] Device mocks
>
> Which devices to show, where the text goes, and the text itself.
>
> **Devices**
>
> * **Arrangement**: which devices to show.
>   * **Duo — desktop + phone**: a phone overlaps the corner of a desktop browser. It suits most apps and websites.
>   * **Trio — TV + desktop + phone**: adds a TV behind them. On narrow screens it shows as a Duo, so the devices stay readable.
>   * **Desktop browser only**, **Phone only** or **TV only**: one device on its own.
> * **Text placement**: **Above (centered)** puts the text over the devices. **Left of the devices** or **Right of the devices** puts it in a column beside them, and on narrow screens above them. **None (devices only)** hides the eyebrow, heading and intro. A caption still shows under the devices.
> * **Device size**: **Compact**, **Normal** or **Large**.
> * **Desktop screen shape**: **16:10 (laptop)** or **16:9 (widescreen)**. Match the shape of your desktop screenshots.
> * **Browser address bar text**: the web address shown at the top of the browser, "app.example.com" to start. It's for show and isn't a link.
> * **Draw a phone status bar**: draws a time, signal and battery bar across the top of the phone screen. Leave it off for phone screenshots, which already include one. **Status bar time** sets its clock, "9:41" to start.
> * **Show pause button on background motion**: a pause button under the devices that stops their videos. It appears once a screen uses a video, and it's on to start.
>
> **Text**
>
> * **Show eyebrow** and **Eyebrow**: a small line above the heading, "Product tour" to start.
> * **Heading** and **Intro**: "See it in action" and a short sentence to start. Clearing the heading hides only the heading. To show just the devices, set **Text placement** to **None (devices only)** and clear the caption.
> * **Caption (optional)**: a short line under the devices.
>
> The eyebrow, heading and intro each have a size, a weight and a color. Each color can be set separately for the dark and light themes.

> [accordion] TV screen, Desktop screen and Phone screen
>
> Each screen tab has the same options, named for its device. Below are the **Phone screen** tab's labels. On the **TV screen** and **Desktop screen** tabs, the same options start with "TV" or "Desktop" instead, such as **Desktop screen shows**.
>
> * **Phone screen shows**: **Image (library)** for a still screenshot, or **Video loop (library)** for a short screen recording.
> * **Phone screenshot**: choose the screenshot from your Images library. The help under it gives the best size for that device.
> * **Phone screenshot alt text**: describe what the screen shows, such as "Booking calendar with three open play times". It's required once you choose a screenshot. Skip the device itself, since the frame is just decoration.
> * **Phone video**: choose the recording from your Videos library.
> * **Phone video description**: a short description of what the recording shows, read to screen reader users. It's recommended.
> * **Phone media fit**: **Fill the screen (crop)** fills the whole screen. **Fit inside the screen** shows all of it, with bars if the shapes differ.
> * **Phone media anchor**: **Top**, **Center** or **Bottom**, the part that stays in view when the media is cropped. **Top** keeps an app's header in view.

> [accordion] Background
>
> A background color for the whole section, set separately for the dark and light themes. It starts as **Transparent (page background)**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the heading. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> One optional button, such as "Book online", in your site's main button look with an arrow. It sits in the text, or centered under the devices when there's no text column. It shows only when it has both a **Button label** and a **Button link**. To learn every button option, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A single phone on the right showing Parker's app home screen, with the eyebrow, heading, intro and a "Book online" button in a column on the left.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/device-mocks/guides-sections-device-mocks-phone-beside-text-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=c705a4e847f976b825cbc8acf5aa0a14)

One phone beside your text and a button.

**A phone beside your pitch.** Set **Arrangement** to **Phone only** and **Text placement** to **Left of the devices**, then add a button.

![A Trio on a wide screen: a TV at the back left, a desktop browser across it, and a phone at the front right, all showing Parker's screens, with a caption under them.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/device-mocks/guides-sections-device-mocks-trio-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=5a49159deb9226049e2b3875e257655e)

A Trio shows every screen at once.

**Every screen at once.** Set **Arrangement** to **Trio — TV + desktop + phone** and **Device size** to **Large**, and add a caption.

![A Desktop browser only arrangement playing a screen recording of booking a visit, with the pause button under the device.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/device-mocks/guides-sections-device-mocks-video-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=a1dc161ffd9ae256a8d9fe14deeec748)

A short screen recording, with a pause button under it.

**A screen recording.** Choose **Desktop browser only**, set **Desktop screen shows** to **Video loop (library)**, and choose a short recording.

## Good to know

* **Use plain screenshots.** Capture just the screen, with no device frame or browser toolbar, since the section draws those for you. Phone screenshots should be portrait.
* **Finding your Videos library.** Open the command palette (press ⌘K, or Ctrl+K on Windows) and choose **Videos** under **Manage**.
* **Keep recordings short and light**: about 5 to 15 seconds, under about 10 MB, with no sound. Give each one a **Poster / fallback image** in the Videos library: visitors see it first, and visitors who prefer less motion only ever see it.
* **Videos play only when they're on screen**, and pause when visitors scroll away, so they don't slow the page down.
* **Keep the pause button on** whenever a screen plays a video, so visitors can stop the motion.
* **Animations play for visitors only.** While you edit, the devices show in place. Visitors who prefer less motion also see them without animation.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Media + Text block](https://docs.fetchski-attract.com/guides/sections/media-text.md)
>
> a photo or video beside text, row by row.

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> put a device beside other content.

> [card] [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md)
>
> upload screenshots and recordings.

> [card] [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md)
>
> turn site animations on or off.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.