Preview Page

The Preview Page allows users to view their creative in real-time and see how it will appear across different devices and screen sizes.

Accessing the Preview Page

The Preview Page for a creative can be accessed 3 different ways:

1. From the Creatives Page:

Hover over a creative and click the 'Preview' button.

Link to preview page when hovering on a creative on the Creative Page

1. From the Summary Page:

The Preview button is located at the top right of the Summary Page

Preview link at top right of Summary Page

1. From the Templates Page:

You can preview how templates will look before you use them. To do this, hover over any template on the Templates Page and click the 'Live Preview' link in the bottom right of the dark box.

Live Preview Button on hover on the Templates Page

1. From the Fluid Ad Creator:

When you are working on an Ad in the Fluid Ad Creator, you can preview it by clicking the 'Preview' button in the header.

Fluid Ad Creator Link to Preview Page

---

Navigating the Preview Page

The Preview Page

The Preview Page is essential for testing the responsiveness and appearance of the creative before deploying it. Here’s a breakdown of the available features:

Formats, Deployments, Layout Variants

Formats, Deployments and Layout Variants Drop Downs

Formats: Use the drop-down menu to select the creative format, such as Fully-Fluid™. This lets you view the creative in the specific format that adapts to various screen sizes and layouts.

Deployments: Choose the specific deployment to preview from this drop-down. Each deployment may have different settings, and previewing them helps you see how they will appear when live.

Layout Variants: Select from available layout variants to see how different layout options will affect the design. This is particularly useful if your creative is designed to shift based on device type or screen width.

Video: Viewing Variants on the Preview Page

In this video, Matt explains how to view variants for a creative on the preview page if dynamic variants has been configured

Screen & Device Visualization:

Screen & Device Visualisation Controls

This tool allows you to simulate how your creative will appear on different screen sizes and devices, including:

• Mobile Devices (e.g., smartphones)

• Tablets

• Desktops

• Custom Sizes: You can manually adjust the screen size by entering specific dimensions (e.g., 1792x923) to test custom resolutions.

Responsive, Breakout, Fallbacks & In-Page Tabs

Tabs for Responsive, Breakout, Fallbacks and In-Page viewing options

These four view modes allow you to toggle between different viewing options:

• Responsive: Displays the creative in a responsive format to see how it adapts to screen size changes.

• Breakout: Shows the creative in a "breakout" mode to focus on the ad itself without distractions from the surrounding content.

• Fallbacks: Lets you preview the fallback versions of the creative that will display in older browsers or when HTML5 is not supported.

• In-Page: Simulates how the ad will appear within a webpage, giving you a sense of how it will blend with surrounding page content.

Manage, QR Code, Copy URL

Manage, QR Code and Copy Url Buttons

Manage, QR Code, Copy URL:

• Manage: Takes you to the Summary page which allows you to manage settings and configurations for the creative, such as deployment or export options.

• QR Code: Generates a QR code for quick sharing or testing of the creative on mobile devices.

• Copy URL: Click this to launch a sub menu with the following options:

  • Overall Creative: Copies a link to ?

  • By Format: Create a link to just the selected format

  • For Proofing: Don't know?

  • Customize Link: This launches a modal shown below

Custimize Link Modal

Reload Animation, Toggle Parallax Scroll View, Background Color

The three controls

These three controls located on the right-hand side allow you to (left to right):

• Reload Animation: Clicking this will reload any animations in your Creative being previewed.

• Toggle Parallax Scroll View: This allows you to view any parallax scrolling animations as they would work when deployed/exported.

• Change Preview Background Color: This allows you to change the background color of your preview page. Useful for seeing the edges of ads if the background color intially matches that of the Creative.

Creative Preview

The Creative preview Area

The large visual display in the center shows the actual preview of your creative. In this example, the ad for the "Lucia LX" car is showcased with full responsiveness for a mobile device, allowing the user to interact with and experience the creative just as an end-user would. You can interact with clickable elements, animations, or other features to test their functionality.