# Welcome Responsive Ads User Guide ## Overview Welcome to ResponsiveAds™, a leader in creative technologies for innovative, omni-channel display advertising. Our **Fully-Fluid™** technology enables the creation of advanced display ads at 10x the typical setup speed, delivering substantial benefits for Direct-to-Consumer (DTC) brands, agencies, and publishers. Our ads outperform standard IAB engagements by 20x, providing a significant competitive advantage in the advertising landscape. ### Our Offerings ResponsiveAds™ provides a comprehensive suite of solutions, including: * **Self-Serve Studio Products (SaaS):** Empowering users to create ads independently from our templates, PSD designs and individual assets. Includes export for ads of all sizes, as ZIPs, videos, or images. * **Third-Party Fluid 1-Tag Ad Serving:** Simplifying ad deployment across various platforms with either discreet size ad serving formats or 1-tag fluid responsive multi-size ad serving formats. The advantage of ResponsiveAds 3rd party ad serving is the optimized load of the creative for large high-impact creative designs, dynamic variants (DCO - Dynamic Creative Optimization) and detailed analytics. * **Full-Service Rich-Media Creative Development:** Offering professional development for both direct-sold and programmatic campaigns. We can curate and customize a set of high-impact creative Fully-Fluid templates for your site and brand. ### Benefits for Marketers Our platform allows marketers to maximize creativity without the hassle of resizing numerous ad variants. Fully-Fluid™ technology delivers a single master creative that adapts seamlessly to any ad slot and screen size, especially suited for mobile. Designers can effortlessly export HTML5 Zip packages in any required size. In addition, ResponsiveAds offers dynamic variant set-up via CSV upload or contextual triggering based on conditions (time of day, weather, language, location/ZIP codes, etc..) ### Advantages for Publishers Publishers that sell direct can utilize our suite of advanced ad solutions to deploy edge-to-edge premium creative formats that can be sold at a significant lift. Publishers build their own in-house creative teams have shown proven results by increasing CPM revenue by 10x. The platform includes a rich library of templates and components, enabling the realization of any creative vision with a business model tailored to your needs. Publishers looking for Programmatic high-impact ad format solutions, stay tuned for our Programmatic offering coming in 2025 ### Proven Performance ResponsiveAds™ has served billions of Fully-Fluid™ ad impressions for leading brands, agencies, and publishers. Our team excels in managing high-maintenance partners, delivering pixel-perfect quality and enhanced performance for mobile campaigns. Welcome to a new era of responsive advertising with ResponsiveAds™! # Overview Coming Soon Welcome to the **Quick Start Guides**! This section is designed to help you get started with ResponsiveAds quickly and effectively. Whether you're a **publisher**, an **ad agency**, or part of an **ad tech or network team**, our tailored guides will show you how to achieve your goals using our tools. ### What’s Coming Soon? We’re currently preparing comprehensive step-by-step guides for: * **Publishers**: Learn how to set up responsive ads for your sites, optimize placements, and maximize ad revenue. * **Ad Agencies & Media Agencies**: Discover how to create stunning, scalable ad campaigns that perform across platforms. * **Ad Tech & Networks**: Explore how to integrate and utilize ResponsiveAds for streamlined ad delivery and superior performance. Each guide will include practical tips, best practices, and examples tailored to your specific needs. Stay tuned—this content is on its way! In the meantime, explore the rest of our User Documentation or reach out to our Support Team for assistance. # CS4 Workflow Overview This page guides you through the ResponsiveAds **Creative Studio 4 (CS4)** workflow. From preparing assets to designing layouts, tagging ads, and tracking performance, each step happens in a specific order to ensure smooth ad production. *** ### 1. Assets Start by collecting all necessary input materials for your creative: * Fonts * Images * Videos (including variants) * Master PSDs * Figma Designs *** ### 2. Layout & Design Next, choose how your ad will be structured: * Select a **Template** from the library or start from scratch. * This defines how your ad will behave across screen sizes. *** ### 3. Fluid Ad Creator (Building & Prep) Once a layout is selected, you move into full creative production using the **Fluid Ad Creator**. Here you: * **Import your assets** * **Adjust and place elements** within the layout * Perform the **Prep tasks** directly inside the canvas: * Anchoring: Fix items to edges or corners * Hotspots: Define interactive regions * Focal Points: Ensure key visuals are visible across formats * Grouping & Animation: Organize related elements and apply motion *** ### 4. Ad Operations Once your creative is complete: * Export the creative as HTML5 or video * Prepare assets for variant campaigns (DCO) * Add ad tags and tracking for campaign measurement *** ### 5. Sales Operations Before launch, use internal tools to preview or present the ad: * Use the **Showcase** page for polished previews * Use the **Preview Page** to test layout responsiveness > 👥 Useful for stakeholder approval or sales enablement. *** ### 6. Deployment & Tagging Make your ad live by: * Applying final AdServe tags and trackers * Completing QA and final campaign tagging > 🧷 This ensures the ad runs smoothly and is trackable across platforms. *** ### 7. Analytics & Reporting After deployment, measure your ad’s performance with the **Analytics Dashboard**: * View Heatmaps * Benchmark campaign performance * Analyze engagement by device and resolution (e.g. 970x250 vs 1920x1080) # Template Tutorials ## Template Tutorials Overview ### Welcome to the Template Tutorials The Template Tutorials section is designed to help you get started with Studio 4’s essential templates. Whether you’re creating your first ad or refining your approach, these tutorials will guide you through setting up each template step-by-step. #### Why Use Templates? Our templates are built to accelerate the ad creation process while teaching you the fundamentals of Studio 4. Each template serves a different purpose — from basic static designs to more advanced, interactive layouts. By working through these tutorials, you’ll learn how to: * Customize templates to match your brand. * Swap images, videos, and text elements. * Apply Studio 4’s unique features like Borders and Stacked Layouts. * Understand responsive behavior and how to design for multiple sizes. #### Types of Templates We’ve categorized the essential templates into three types: 1. **Standard Templates** – Quick-start templates built with familiar IAB sizes, great for simple, static ads. 2. **Responsive Templates** – Introduces Studio 4’s Fluid 250, Scroller, and 4x1 formats for adaptable, multi-size creatives. 3. **Premium Responsive Templates** – More advanced templates showcasing high-impact ad formats like Masthead or Adhesion. #### What’s Included in Each Tutorial Each template tutorial will walk you through: * An overview of the template’s purpose and use cases. * A breakdown of the template’s elements. * Step-by-step setup instructions. * Best practices for customizing the design. * Tips on working with assets and images. #### Ready to Get Started? Select a tutorial below to begin:
Static TemplateA simple, no-motion template perfect for straightforward messaging and brand visuals./files/wOQEs9ij4X2Q2oGEreFU/pages/HnT9x9P8Cf2oNelYaL0l
Shoppable CarouselAn interactive, scrollable carousel ideal for showcasing multiple products with direct purchase links./files/aUWxX7qgzxbOha6MpijU/pages/ajBD9oAhQPi26yJIVJBR
In Banner VideoA sleek video ad format that plays within a banner, balancing engagement and space efficiency./files/CXgi6mCLEfUYQjcd8TD3/pages/2sVmqGAGO06dR0DmcpwG
Full Bleed VideoA high-impact video template that fills the entire ad space for immersive storytelling./files/crKQzSrXhYyKmkpEQZdU/pages/waSKyAUw5aFTwv6abfE2
By the end of these tutorials, you’ll have a set of fully customized, high-performing ads — and the skills to create even more. Let’s dive in! # Static Template Build Guide: Creating an Ad from a Static Template ## Intro The Static Essential Template is a quick and straightforward starting point for creating clean, fixed-layout ads. This tutorial will guide you through each step — from selecting the template to customizing text, images, and colors — helping you produce a polished, ready-to-publish ad. For a more visual walkthrough, check out the video tutorial below before diving into the step-by-step guide. Have a look at the end result of this tutorial here: [Static Template Example](https://studio.responsiveads.com/creatives/67d317c97d612603014b38e4/preview?#/responsive-all) #### Downloadable Assets for this Tutorial: {% file src="/files/iKLxmE5uOXPlnuMFDsSK" %} *** ## Watch The Video Tutorial: {% embed url="" %} Have a look at the end result of this tutorial here: [Static Template Example](https://studio.responsiveads.com/creatives/67d317c97d612603014b38e4/preview?#/responsive-all) *** ## Follow the Step by Step Guide: ### Step 1: Click on the templates tab, and find the Static template You can find the templates in the templates tab in the top navigation. Here you will find all the templates available in your account:

The Static Template on the Templates Tab

For this tutorial we will use the “Static” template. * Hover the template and click on use. ### Step 2: Name your creative and add metadata You will be asked to name your creative. You can name it to your preferences, however, our recommendation is to use a naming convention that will make it easier for you to find your creative later. * A useful naming convention is: brand\_campaign\_descriptor.

Naming your Creative

Next you will be prompted to add some useful metadata like advertiser, market or category for your ad. We recommend adding all the metadata so it’s easier to find your creative later on. For this demo you can just fill out the advertiser’s name. * Click on Start Creating

Metadata page

### Step 3: Before customizing - The Basics {% hint style="info" %} If you have read other build guides, you can skip to [Step 4](#step-4-add-your-format) {% endhint %} **Build once, run anywhere** One of the most powerful concepts of our platform is “build once, run anywhere”. Typically you have to manually resize creatives once at a time so you can traffic your campaign to different sizes across your inventory - the resizing process can take from days to weeks. However, Our fluid technology allows us to create ads in many formats and sizes at the same time without the need to do “resizes”. We achieve this by allowing you to add different sizes and formats to an existing ad, and providing tools to customize your ad for all those different formats. **Getting to know the builder** * [**Elements Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#elements-list) Sitting on the left side of the screen, you can find all the elements that are used in the ad. Like logos, text, images, videos, buttons. * [**Settings Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#right-sidebar) Sitting on the right side, this is where you can modify the properties of the creative and elements. * [**Tool bar:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) At the top you can find the zoom, undo and redo option, as well as the History which allows you to go back to a previously saved version of your ad. * [**Formats Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#formats-panel) On the left side of the screen, above the Elements Panel. It allows you add the different formats that you want to create your ad as. ### Step 4: Add your format Today we are creating our ad as a Programmatic Fluid 250, but the same steps can be applied for any of our supported formats (e.g. IAB standard sizes). **Steps:** * From the Formats Panel click on the + button. This will open the formats panel. * Select the Programmatic Fluid 250 format at the top of the list. * You can select many different formats on this step but we recommend only doing the Programmatic Fluid 250 only so it’s easier to follow. * Click on the “Add Selected” button. This will add the new format to your ad You will notice a new format on the Formats panel called **Programmatic Fluid 250**. You can click on each size available to familiarize yourself with each layout.
### Step 5: Customize your ad We have included a set of demo assets that you can use for this tutorial. Download using the link below. {% file src="/files/iKLxmE5uOXPlnuMFDsSK" %} The Static Template already comes with all elements laid out for you in many different sizes. You can access these different sizes from the Formats Panel. The layout (e.g. Position, and style of elements) for each size of your ad can be updated independently, however you can copy your styles and layout for each element to some or to all the sizes on your ad. Our recommendation is to start from the larger size. Once your larger size is ready, you can copy your element styles to the other sizes. And tweak smaller sizes as needed.
#### **Updating the existing elements:** * Customize the Logo: * Select the Logo layer from the Elements Panel * Click on “Replace Image” from Assets Tab of the Settings Panel * Here you can drag and drop your logo image, or choose a file to upload. * Customize the Background * Select the IMG BG layer from the Elements Panel * Click on “Replace Image” from Assets Tab of the Settings Panel * Here you can drag and drop your background image, or choose a file to upload. * Customize the Text * Select the Text Headline layer from the Elements Panel * Double Click the element in the edit area * Here you can add the text that you would like to use. * Customize the CTA * Select the Button CTA layer from the Elements Panel * From Design Tab of the Settings Panel, you can modify the style for the background, text color, size or round borders. * From the Setup Tab of the Settings Panel, you can customize the url for the CTA. {% hint style="danger" %} Please note that the url set up here for the CTA can be overwritten when generating tags for trafficking. {% endhint %} #### **Adding new elements to your ad** You can add text, images or text elements as needed from the Elements panel by clicking on the Add New Element button, and selecting the type of element you want to add. #### **Copying your changes from one size to another** Our recommendation is always to layout your larger size first, and then copy your element’s settings to the smaller sizes, and lastly modify each size as needed to accommodate the elements in the available space. For example, work on the 1920x250 size until it feels ready, then copy the element’s settings to the other smaller sizes like 1280x250 or 970x250.
How to copy elements settings: 1. Select the element you want to copy styles for 2. Under the element, click on the Copy Settings to Other Sizes 3. Select the sizes that you want to copy the styles to, then click next 4. Select the properties you want to copy 5. Click on Copy Settings All the settings selected from your element should have been copied to other styles

How to copy elements settings

### Step 7: Save your Ad Click on the save button at the top of the screen, once it’s saved you can preview your changes, or safely close your browser tab. ### Step 8: Preview your Ad * Once the ad is saved, click on the Preview button at the top of the screen (next to the save button). Have a look at the end result of this tutorial here: [Static Template Example](https://studio.responsiveads.com/creatives/67d317c97d612603014b38e4/preview?#/responsive-all) *** Want to explore more templates? Head back to the [**Templates Tutorials**](/quick-start-guides/template-tutorials) page and try another design! # Shoppable Carousel Build Guide: Creating an Ad from a Shoppable Carousel Template ## Intro The Static Essential Template is a quick and straightforward starting point for creating clean, fixed-layout ads. This tutorial will guide you through each step — from selecting the template to customizing text, images, and colors — helping you produce a polished, ready-to-publish ad. For a more visual walkthrough, check out the video tutorial below before diving into the step-by-step guide. Have a look at the end result of this tutorial here: [Shoppable Carousel Example](https://studio.responsiveads.com/creatives/67e4197d212f906f1226f2d7/preview?#/responsive-all) #### Downloadable Assets for this Tutorial: {% file src="/files/vRHsL1zpcvqRBenHOBCu" %} *** ## Watch The Video Tutorial: {% embed url="" %} Have a look at the end result of this tutorial here: [Shoppable Carousel Example](https://studio.responsiveads.com/creatives/67e4197d212f906f1226f2d7/preview?#/responsive-all) *** ## Follow the Step by Step Guide: ### Step 1: Click on the templates tab, and find the Shoppable Carousel template You can find the templates in the templates tab in the top navigation. Here you will find all the templates available in your account:

The Shoppable Carousel Template on the Templates Tab

For this tutorial we will use the “Shoppable Carousel” template. * Hover the template and click on use. ### Step 2: Name your creative and add metadata You will be asked to name your creative. You can name it to your preferences, however, our recommendation is to use a naming convention that will make it easier for you to find your creative later. * A useful naming convention is: brand\_campaign\_descriptor.

Naming your Creative

Next you will be prompted to add some useful metadata like advertiser, market or category for your ad. We recommend adding all the metadata so it’s easier to find your creative later on. For this demo you can just fill out the advertiser’s name. * Click on Start Creating

Metadata page

### Step 3: Before customizing - The Basics {% hint style="info" %} If you have read other build guides, you can skip to [Step 4](#step-4-add-your-format) {% endhint %} **Build once, run anywhere** One of the most powerful concepts of our platform is “build once, run anywhere”. Typically you have to manually resize creatives once at a time so you can traffic your campaign to different sizes across your inventory - the resizing process can take from days to weeks. However, Our fluid technology allows us to create ads in many formats and sizes at the same time without the need to do “resizes”. We achieve this by allowing you to add different sizes and formats to an existing ad, and providing tools to customize your ad for all those different formats. **Getting to know the builder** * [**Elements Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#elements-list) Sitting on the left side of the screen, you can find all the elements that are used in the ad. Like logos, text, images, videos, buttons. * [**Settings Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#right-sidebar) Sitting on the right side, this is where you can modify the properties of the creative and elements. * [**Tool bar:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) At the top you can find the zoom, undo and redo option, as well as the History which allows you to go back to a previously saved version of your ad. * [**Formats Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#formats-panel) On the left side of the screen, above the Elements Panel. It allows you add the different formats that you want to create your ad as. ### Step 4: Add your format Today we are creating our ad as a Programmatic Fluid 250, but the same steps can be applied for any of our supported formats (e.g. IAB standard sizes). **Steps:** * From the Formats Panel click on the + button. This will open the formats panel. * Select the Programmatic Fluid 250 format at the top of the list. * You can select many different formats on this step but we recommend only doing the Programmatic Fluid 250 only so it’s easier to follow. * Click on the “Add Selected” button. This will add the new format to your ad You will notice a new format on the Formats panel called **Programmatic Fluid 250**. You can click on each size available to familiarize yourself with each layout.
### Step 5: Customize your ad We have included a set of demo assets that you can use for this tutorial. Download using the link below. {% file src="/files/vRHsL1zpcvqRBenHOBCu" %} The Shoppable Carousel Template already comes with all elements laid out for you in many different sizes. You can access these different sizes from the Formats Panel. The layout (e.g. Position, and style of elements) for each size of your ad can be updated independently, however you can copy your styles and layout for each element to some or to all the sizes on your ad. Our recommendation is to start from the larger size. Once your larger size is ready, you can copy your element styles to the other sizes. And tweak smaller sizes as needed.
#### **Updating the existing elements:** * **Customize the Logo** 1. Select the Logo layer from the Elements Panel 2. Click on “Replace Image” from Assets Tab of the Settings Panel 3. Here you can drag and drop your logo image, or choose a file to upload. * **Customize the Text** 1. Select the Text Headline layer from the Elements Panel 2. Double Click the text element to enter edit mode. 3. Now type the text that you would like to use. For this tutorial we are using “Where beauty meets fashion” or any other text you would like. #### Updating the Carousel Slides In the Elements Panel, you can find the carousel slides under the Carousel group. To start editing a slide you need to edit the Image and the CTA elements: * **Customize Slide Image** 1. From the elements panel, click on the IMG layer inside the slide. 2. Click on “Replace Image” from Assets Tab of the Settings Panel 3. Here you can drag and drop your logo image, or choose a file to upload. * **Customize the CTA** 1. From the elements panel, select the Button CTA 2. From Design Tab of the Settings Panel, you can modify the style for the background, text color, size or round borders. 3. From the Setup Tab of the Settings Panel, you can customize the url for the CTA. {% hint style="danger" %} Please note that the url set up here for the CTA can be overwritten when generating tags for trafficking. {% endhint %} #### **Adding new elements to your ad** You can add text, images or text elements as needed from the Elements panel by clicking on the Add New Element button, and selecting the type of element you want to add. #### **Copying your changes from one size to another** Our recommendation is always to layout your larger size first, and then copy your element’s settings to the smaller sizes, and lastly modify each size as needed to accommodate the elements in the available space. For example, work on the 1920x250 size until it feels ready, then copy the element’s settings to the other smaller sizes like 1280x250 or 970x250.
How to copy elements settings: 1. Select the element you want to copy styles for 2. Under the element, click on the Copy Settings to Other Sizes 3. Select the sizes that you want to copy the styles to, then click next 4. Select the properties you want to copy 5. Click on Copy Settings All the settings selected from your element should have been copied to other styles

How to copy elements settings

### Step 7: Save your Ad Click on the save button at the top of the screen, once it’s saved you can preview your changes, or safely close your browser tab. ### Step 8: Preview your Ad * Once the ad is saved, click on the Preview button at the top of the screen (next to the save button). Have a look at the end result of this tutorial here: [Shoppable Carousel Example](https://studio.responsiveads.com/creatives/67e4197d212f906f1226f2d7/preview?#/responsive-all) *** Want to explore more templates? Head back to the [**Templates Tutorials**](/quick-start-guides/template-tutorials) page and try another design! # In Banner Video Build Guide: Creating an Ad from a In-Banner Video Template ## Intro The In-Banner Video Template allows you to integrate video content seamlessly within a standard display ad, making it an engaging yet non-intrusive way to capture user attention. This tutorial will guide you through setting up the template, customizing the video playback settings, and refining text and design elements to align with your brand. Watch the tutorial video below for an overview before following the step-by-step instructions. Have a look at the end result of this tutorial here: [In Banner Video Example](https://studio.responsiveads.com/creatives/67d9743c7782ab53666fe17d/preview?#/responsive-all) #### Downloadable Assets for this Tutorial: {% file src="/files/EwxfD3FvUB33zDRqFiz6" %} *** ## Watch The Video Tutorial: {% embed url="" %} Have a look at the end result of this tutorial herHave a look at the end result of this tutorial here: [In Banner Video Example](https://studio.responsiveads.com/creatives/67d9743c7782ab53666fe17d/preview?#/responsive-all) *** ## Follow the Step by Step Guide: ### Step 1: Click on the templates tab, and find the In-Banner Video template You can find the templates in the templates tab in the top navigation. Here you will find all the templates available in your account:

The In-Banner Video Template on the Templates Tab

For this tutorial we will use the “In-Banner Video” template. * Hover the template and click on use. ### Step 2: Name your creative and add metadata You will be asked to name your creative. You can name it to your preferences, however, our recommendation is to use a naming convention that will make it easier for you to find your creative later. * A useful naming convention is: brand\_campaign\_descriptor.

Naming your Creative

Next you will be prompted to add some useful metadata like advertiser, market or category for your ad. We recommend adding all the metadata so it’s easier to find your creative later on. For this demo you can just fill out the advertiser’s name. * Click on Start Creating

Metadata page

### Step 3: Before customizing - The Basics {% hint style="info" %} If you have read other build guides, you can skip to [Step 4](#step-4-add-your-format) {% endhint %} **Build once, run anywhere** One of the most powerful concepts of our platform is “build once, run anywhere”. Typically you have to manually resize creatives once at a time so you can traffic your campaign to different sizes across your inventory - the resizing process can take from days to weeks. However, Our fluid technology allows us to create ads in many formats and sizes at the same time without the need to do “resizes”. We achieve this by allowing you to add different sizes and formats to an existing ad, and providing tools to customize your ad for all those different formats. **Getting to know the builder** * [**Elements Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#elements-list) Sitting on the left side of the screen, you can find all the elements that are used in the ad. Like logos, text, images, videos, buttons. * [**Settings Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#right-sidebar) Sitting on the right side, this is where you can modify the properties of the creative and elements. * [**Tool bar:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) At the top you can find the zoom, undo and redo option, as well as the History which allows you to go back to a previously saved version of your ad. * [**Formats Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#formats-panel) On the left side of the screen, above the Elements Panel. It allows you add the different formats that you want to create your ad as. ### Step 4: Add your format Today we are creating our ad as a Programmatic Fluid 250, but the same steps can be applied for any of our supported formats (e.g. IAB standard sizes). **Steps:** * From the Formats Panel click on the + button. This will open the formats panel. * Select the **Programmatic Fluid 250** format at the top of the list. * You can select many different formats on this step but we recommend only doing the Programmatic Fluid 250 only so it’s easier to follow. * Click on the “Add Selected” button. This will add the new format to your ad You will notice a new format on the Formats panel called **Programmatic Fluid 250**. You can click on each size available to familiarize yourself with each layout.
### Step 5: Customize your ad We have included a set of demo assets that you can use for this tutorial. Download using the link below. {% file src="/files/EwxfD3FvUB33zDRqFiz6" %} The In-banner Video Template already comes with all elements laid out for you in many different sizes. Which you can access from the Formats Panel. The layout(e.g. Position, and style of elements) for each size of your ad can be updated independently, however you can copy your styles and layout for each element to some or to all the sizes added to your ad. Our recommendation is to start from the larger size. Once your larger size is ready, you can copy your element styles to the other sizes. And tweak smaller sizes as needed. #### **Updating the existing elements:** * **Customize the Video** 1. Select the Video layer from the Elements Panel 2. Click on “Replace Video” from Assets Tab of the Settings Panel 3. Choose your video from the library 1. If the video does not exist in the library you can choose a video file to upload. Please note that our platform needs to process your new video which can take up to 5 minutes. After the video is processed, it will be added to the library and you will get a notification on the top right corder. 2. Once the video is ready, you should repeat steps 1-3. * **Customize the Logo** 1. Select the Logo layer from the Elements Panel 2. Click on “Replace Image” from Assets Tab of the Settings Panel 3. Here you can drag and drop your logo image, or choose a file to upload. * **Customize the Text** 1. Select the Text Headline layer from the Elements Panel 2. Double Click the text element to enter edit mode. 3. Now type the text that you would like to use. For this tutorial we are using “Where beauty meets fashion” or any other text you would like. * **Customize the CTA** 1. Select the Button CTA layer from the Elements Panel 2. From Design Tab of the Settings Panel, you can modify the style for the background, text color, size or round borders. 3. From the Setup Tab of the Settings Panel, you can customize the url for the CTA. {% hint style="danger" %} Please note that the url set up here for the CTA can be overwritten when generating tags for trafficking. {% endhint %} You can modify the position, color or size of the elements from the Settings Panel. #### **Adding new elements to your ad** You can add text, images or text elements as needed from the Elements panel by clicking on the Add New Element button, and selecting the type of element you want to add. #### **Copying your changes from one size to another** Our recommendation is always to layout your larger size first, and then copy your element’s settings to the smaller sizes, and lastly modify each size as needed to accommodate the elements in the available space. For example, work on the 1920x250 size until it feels ready, then copy the element’s settings to the other smaller sizes like 1280x250 or 970x250.
How to copy elements settings: 1. Select the element you want to copy styles for 2. Under the element, click on the Copy Settings to Other Sizes 3. Select the sizes that you want to copy the styles to, then click next 4. Select the properties you want to copy 5. Click on Copy Settings All the settings selected from your element should have been copied to other styles

How to copy elements settings

### Step 7: Save your Ad Click on the save button at the top of the screen, once it’s saved you can preview your changes, or safely close your browser tab. ### Step 8: Preview your Ad * Once the ad is saved, click on the Preview button at the top of the screen (next to the save button). Have a look at the end result of this tutorial here: [In Banner Video Example](https://studio.responsiveads.com/creatives/67d9743c7782ab53666fe17d/preview?#/responsive-all) *** Want to explore more templates? Head back to the [**Templates Tutorials**](/quick-start-guides/template-tutorials) page and try another design! # Full Bleed Video Build Guide: Creating an Ad from a Full-Bleed Video Template ## Intro The Full Bleed Video Template is designed to create eye-catching, immersive ads with edge-to-edge video content. This tutorial will walk you through setting up the template, customizing the video, and fine-tuning text and design elements to create a dynamic, high-impact creative. For a visual guide, watch the tutorial video below before following the step-by-step instructions. Have a look at the end result of this tutorial here: [Full Bleed Video Example](https://studio.responsiveads.com/creatives/67d8287b7d612603014b3df4/preview?#/responsive-all) #### Downloadable Assets for this Tutorial: {% file src="/files/s1c1IL6NTlTDQxW8btZA" %} *** ## Watch The Video Tutorial: {% embed url="" %} Have a look at the end result of this tutorial here: Full Bleed Video Example *** ## Follow the Step by Step Guide: ### Step 1: Click on the templates tab, and find the Full Bleed Video template You can find the templates in the templates tab in the top navigation. Here you will find all the templates available in your account:

The Full Bleed Video Template on the Templates Tab

For this tutorial we will use the “Full Bleed Video” template. * Hover the template and click on use. ### Step 2: Name your creative and add metadata You will be asked to name your creative. You can name it to your preferences, however, our recommendation is to use a naming convention that will make it easier for you to find your creative later. * A useful naming convention is: brand\_campaign\_descriptor.

Naming your Creative

Next you will be prompted to add some useful metadata like advertiser, market or category for your ad. We recommend adding all the metadata so it’s easier to find your creative later on. For this demo you can just fill out the advertiser’s name. * Click on Start Creating

Metadata page

### Step 3: Before customizing - The Basics {% hint style="info" %} If you have read other build guides, you can skip to [Step 4](#step-4-add-your-format) {% endhint %} **Build once, run anywhere** One of the most powerful concepts of our platform is “build once, run anywhere”. Typically you have to manually resize creatives once at a time so you can traffic your campaign to different sizes across your inventory - the resizing process can take from days to weeks. However, Our fluid technology allows us to create ads in many formats and sizes at the same time without the need to do “resizes”. We achieve this by allowing you to add different sizes and formats to an existing ad, and providing tools to customize your ad for all those different formats. **Getting to know the builder** * [**Elements Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#elements-list) Sitting on the left side of the screen, you can find all the elements that are used in the ad. Like logos, text, images, videos, buttons. * [**Settings Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#right-sidebar) Sitting on the right side, this is where you can modify the properties of the creative and elements. * [**Tool bar:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) At the top you can find the zoom, undo and redo option, as well as the History which allows you to go back to a previously saved version of your ad. * [**Formats Panel:**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#formats-panel) On the left side of the screen, above the Elements Panel. It allows you add the different formats that you want to create your ad as. ### Step 4: Add your format Today we are creating our ad as a Programmatic Fluid 250, but the same steps can be applied for any of our supported formats (e.g. IAB standard sizes). **Steps:** * From the Formats Panel click on the + button. This will open the formats panel. * Select the Programmatic Fluid 250 format at the top of the list. * You can select many different formats on this step but we recommend only doing the Programmatic Fluid 250 only so it’s easier to follow. * Click on the “Add Selected” button. This will add the new format to your ad \ You will notice a new format on the Formats panel called Programmatic Fluid 250. You can click on each size available to familiarize yourself with each layout. ### Step 5: Customize your ad We have included a set of demo assets that you can use for this tutorial. Download using the link below. {% file src="/files/s1c1IL6NTlTDQxW8btZA" %} The Full-bleed Video Template already comes with all elements laid out for you in many different sizes. Which you can access from the Formats Panel. The layout(e.g. Position, and style of elements) for each size of your ad can be updated independently, however you can copy your styles and layout for each element to some or to all the sizes on your ad. Our recommendation is to start from the larger size. Once your larger size is ready, you can copy your element styles to the other sizes. And tweak smaller sizes as needed. #### **Updating the existing elements:** * **Customize the Video** 1. Select the Video layer from the Elements Panel 2. Click on “Replace Video” from Assets Tab of the Settings Panel 3. Choose your video from the library 1. If the video does not exist in the library you can choose a video file to upload. Please note that our platform needs to process your new video which can take up to 5 minutes. After the video is processed, it will be added to the library and you will get a notification on the top right corner. 2. Once the video is ready, you should repeat steps 1-3. * **Customize the Logo** 1. Select the Logo layer from the Elements Panel 2. Click on “Replace Image” from Assets Tab of the Settings Panel 3. Here you can drag and drop your logo image, or choose a file to upload. * **Customize the Text** 1. Select the Text Headline layer from the Elements Panel 2. Double Click the text element to enter edit mode. 3. Now type the text that you would like to use. For this tutorial we are using “Where beauty meets fashion” or any other text you would like. * **Customize the CTA** 1. Select the Button CTA layer from the Elements Panel 2. From Design Tab of the Settings Panel, you can modify the style for the background, text color, size or round borders. 3. From the Setup Tab of the Settings Panel, you can customize the url for the CTA. {% hint style="warning" %} Please note that the url set up here for the CTA can be overwritten when generating tags for trafficking {% endhint %} You can modify the position, color or size of the elements from the Settings Panel. #### **Adding new elements to your ad** You can add text, images or text elements as needed from the Elements panel by clicking on the Add New Element button, and selecting the type of element you want to add. #### **Copying your changes from one size to another** Our recommendation is always to layout your larger size first, and then copy your element’s settings to the smaller sizes, and lastly modify each size as needed to accommodate the elements in the available space. For example, work on the 1920x250 size until it feels ready, then copy the element’s settings to the other smaller sizes like 1280x250 or 970x250.
**How to copy elements settings:** 1. Select the element you want to copy styles for 2. Under the element, click on the Copy Settings to Other Sizes 3. Select the sizes that you want to copy the styles to, then click next 4. Select the properties you want to copy 5. Click on Copy Settings
All the settings selected from your element should have been copied to other styles

How to copy element settings

### Step 6: Save your Ad Click on the save button at the top of the screen, once it’s saved you can preview your changes, or safely close your browser tab. ### Step 7: Preview your Ad * Once the ad is saved, click on the Preview button at the top of the screen (next to the save button). Have a look at the end result of this tutorial here: [Full Bleed Video Example](https://studio.responsiveads.com/creatives/67d8287b7d612603014b3df4/preview?#/responsive-all) *** Want to explore more templates? Head back to the [**Templates Tutorials**](/quick-start-guides/template-tutorials) page and try another design! # Animated Template Coming Soon The Animated Template tutorial is not yet available, as we are making updates to the tool to enhance its functionality. Once these improvements are complete, this page will be updated with a full step-by-step guide on how to set up and customize the Animated Template. In the meantime, you can explore the other available templates by visiting the [**Templates Tutorials**](/quick-start-guides/template-tutorials) page. # Map Templates {% embed url="" %} ## Map Templates: Uploading Your CSV Feed We offer **5 map templates**, all of which use the same upload process. Once you've prepared your image and CSV file, the steps below apply no matter which map template you're using. > Replace the template names below once confirmed: > > * \[Template 1 name] > * \[Template 2 name] > * \[Template 3 name] > * \[Template 4 name] > * \[Template 5 name] ### Before you start You'll need two things: 1. **A store marker image** — the icon that represents each location on the map. 2. **A CSV file** — containing your store data. #### Image requirements * Recommended size: **75 x 75 pixels**. * If you upload an image that's too large, the Studio will show an error next to the Image URL field. * If your image URL is invalid for any reason, an error will also appear here — check the URL is correct and publicly accessible. #### Getting your image URL 1. Go to the **Media** tab. 2. Open the **Images** sub-tab and upload your store marker image (if you haven't already). 3. Hover over the image in the media assets list and select **Copy URL**. 4. You'll paste this URL into the **Feed Pin Image URL** field in the next step. #### CSV file requirements The feed config modal includes a downloadable **example CSV file** — this is the easiest way to get started, since your file just needs to use the same column headers. The required column headers are: `name`, `address`, `city`, `state`, `zip`, `country`, `phone`, `website`, `lat`, `lng` > **Note:** Confirm whether all 5 templates use this same set of columns, or if any template requires additional fields. ### Step 1: Set up your feed 1. Go to the **Media** tab and open the **Feeds** sub-tab. 2. Open the feed config for the map template you want to set up (or create a new one). 3. Paste your copied image URL into the **Feed Pin Image URL** field. 4. If needed, download the **example CSV file** from the same modal to use as a template for your column headers. 5. Upload your **CSV file**. 6. Click **Save**. Saving uploads all of your stores and starts generating the map image for each one in the background. ### Step 2: Copy your Feed ID Once you've saved, Studio will display a **Feed ID** (for example, `90`). Copy this — you'll need it to reference or embed this specific map feed. ### Step 3: Wait for image generation Map images are generated in the background after you save: * **Small feeds** (e.g. a single store): images are usually ready almost immediately. * **Large feeds** (e.g. several thousand stores): generation can take **5–10 minutes**, sometimes longer depending on volume. **If you open the page and the map doesn't show anything**, this is most likely because the images haven't finished generating yet. Wait 5–10 minutes (longer for larger feeds) and refresh the page. ### Optional settings These settings are available across all 5 templates: #### Zoom level * Default zoom level is **15**. * Increase the number to zoom in further and focus on a smaller area. * Decrease the number to zoom out and show a wider area. #### Map style/look To change the visual style of the map, enter a **Style ID** in the **Style ID** field in the feed config. This setting is optional — leave it blank to use the default style. #### Number of stores shown per creative By default, a creative may show only one store. If you want to display multiple stores (e.g. 2–3) on a single creative, this can be configured in the same settings area. ### Troubleshooting | Issue | Likely cause | Fix | | -------------------------- | ---------------------------------------- | ------------------------------------------------------------- | | Error shown near Image URL | Image is too large or the URL is invalid | Resize image to \~75x75px and confirm the URL loads correctly | | Map is blank after saving | Store images are still generating | Wait 5–10 minutes (longer for large feeds), then refresh | | Only one store appears | Default "stores per creative" setting | Update the store count setting to show 2–3 stores | *** *This is a starting draft based on one template walkthrough. Before publishing, verify: (1) the process is identical across all 5 templates with no template-specific quirks, (2) exact CSV column requirements, and (3) whether any template has unique settings not covered here. If a template does differ, consider adding a short "Template-specific notes" section per template rather than duplicating the whole guide.* # Guides for Publishers # Guides for Ad Agencies & Media Agencies # Guides for Ad Tech / Networks # Overview Find your way around the Creative Studio

The ResponsiveAds Creative Studio

The Responsive Ads web app is called 'Creative Studio'. The creative studio allows you to Create, Manage, Deploy and Analyze your Ads. ## Product Demo {% embed url="" %} Creative Studio Full Walk Through {% endembed %} #### Full Walkthrough File Download Download the Photoshop (PSD) file shown in the video above using the link below. See for yourself how a PSD file seamlessly uploads into the Responsive Ads App. {% file src="/files/qO6e2dLbquI4FLKK4bWk" %} Demo PSD File from the Full Walk-Through Video {% endfile %} ## Learn More
DashboardLearn about the Dashboard/pages/fHpRIUWLsWNpEtvBWEBi/files/VdPsCGjtiKkGnRvWc8Nd
CreativesManage your Creatives on the Creative Page/pages/v9SnKj99hFUcFex5SiPv/files/MNeAFxKqFqB4lU7Q0NyA
TemplatesChoose from 100's of tried and tested templates/pages/Vo77SMTmLkkd4ATh1nKW/files/5tviDwh989Tu0zthju0z
MediaMange your uploaded assets /pages/7CRrCS9flO8sUJItg5xd/files/dd96MC3o86tx2ygg4gEj
FormatsLearn more about creating new formats/pages/RjVJiy11mzqvNVRoqfe1/files/HeU41ceed5qc3zg4z4hR
AnalyticsTrack the success of your ads/pages/BKWPq6wZOZ8A8ej0Na8i/files/WPJGQlkac8ffXY1pJJiq
# Dashboard The homepage of Creative Studio Any time you log into your Responsive Ads account, you will land on the Dashboard. The Dashboard page can also be accessed by clicking the 'Dashboard' tab in the App header.Read on to learn about what you can do from the dashboard:

The Creative Studio Dashboard

## Header

The Header on the Dashboard

The left side of the header contains navigation links to the rest of the Creative Studio. The right Side of the header is home to a number of other links. 1. Navigate to the rest of the App using the links on the left side of the Header

Navigation links on left side of the Header

2. [Set up a New Creative](/creating-ads/setting-up-ads/setting-up-an-ad-from-scratch), access the [support](/help-and-faq/support) menu, open the [Showcase](/ad-management/showcase) and manage your [Profile/Team Settings](/account-management/settings) from the links on the right side of the Header

Other Header links with support menu opened

{% hint style="info" %} The support menu has different options when opened in the Fluid Ad Creator. Learn about those [here](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#help-and-info) {% endhint %} ## Getting Started

Getting Started Section on the Dashboard

Use the tiles in the 'Getting Started' to [start a new creative from scratch](/creating-ads/setting-up-ads/setting-up-an-ad-from-scratch), [start a new creative from a template](/creating-ads/setting-up-ads/setting-up-an-ad-from-a-template), or access the User Guide. ## Analytics Snapshot

Analytics Snapshot Section on the Dashboard

View an overview of your [Ad Analytics](/analytics/overview) in the 'Analytics Snapshot' section # Creatives View and manage all your ad designs in one place with the Creatives page. ## What is a **Creative**? A **Creative** is your design file, built to support multiple formats and layouts. It serves as the foundation for creating responsive ads, rich-media ads, or single-size ad creatives. The flexibility of a Creative allows it to adapt seamlessly to various ad slots and display requirements. Formats, which are discussed later, define the shape and properties of your creative, ensuring it is optimized for trafficking in different ad placements. ## Navigating to the Creatives Page The Creatives page can be accessed by clicking the 'Creatives' tab in the App header.

The Creatives page in Creative Studio

## The Sidebar

The Sidebar on the Creatives Page

The sidebar is used for filtering your list of creatives by tags or properties. You can also choose whether or not you want to show any archived creatives in your list of creatives. ### Filter by Tags * **Advertiser -** This filters Creatives by each brand you have created ads for. * **Agency/Account -** This filters by Agency responsible for the Ad. * **Format -** Filter by formats used for creatives. * **Category -** Filter by industry, eg. Beauty, Food & Beverages, Healthcare etc. * **Features -** Filter by features used in the ad eg. Video, Carousel, Podcast etc. * **Segment -** Filter by segment eg. Demographic, Location based, Time based etc. * **Trafficking/Site/App -** Filter by what site, app or placement the ad will run on. {% hint style="info" %} Tags can be set up for your creatives during the creative set up process ([Learn more](/creating-ads/setting-up-ads/setting-up-an-ad-from-scratch#step-3-details)) {% endhint %} ### Filter by Properties * **Ownership -** Filter by creatives which are owned by you or shared with you. * **Origin -** Filter by creatives you made from a PSD, creatives started from scratch, or creatives you made using a template. * **Status -** Filter by status: * **Draft -** creatives that are not published to the cloud server yet * **Published -** creatives that are finished and uploaded to the server * **Re-Publish required -** creatives that are published, but some changes have since been made in the Fluid Ad Creator * **Classification -** Filter by the billing classification of the creative: * **Basic** <250KB * **Pro** <1MB * **Pro+** (or video units) <10MB * **Advanced** >10MB ### Filter by Archive Status When archived, a Creative is no longer displayed in the Creatives list. To access archived Creatives: * Scroll to the bottom of the sidebar * Click “Show archived creatives” To return to your active Creatives: * Scroll down to the bottom of the sidebar again * Click “Back to regular list” {% hint style="info" %} It is recommended to **archive** unused creatives rather than deleting them. Archiving allows you to clean up your Creative List while still retaining access to the creatives if needed in the future. Deleted creatives, on the other hand, are permanently removed and cannot be recovered. {% endhint %}

Switching between archived Creatives and non-archived Creatives

## Sub header

The sub header on the Creatives Page

The 'Studio 3', 'Studio 4' and 'All' tabs in the sub header give you the ability to view only your Creatives designed using Creative Studio 3, only your Creatives designed using Creative Studio 4, or all of your Creatives regardless of which version of Creative Studio was used to design them. {% hint style="danger" %} STUDIO 3 is an earlier version of the ResponsiveAds Studio, originally launched in 2017. As of now, all new clients are using STUDIO 4, the latest version of the platform. Existing STUDIO 3 clients will be transitioned to STUDIO 4 in 2025. For detailed information and assistance with the transition, please contact your account manager to discuss plans and next steps. {% endhint %} In addition, there is also a search bar which can be used to find a specific creative by name, as well as a sort dropdown which can be used to sort your list of creatives. ## List of Creatives

List of creatives on the Creatives Page

This is a list of all of the Creatives you have created using the [Fluid Ad Creator](/creating-ads/designing-your-ad-in-the-fluid-ad-creator). The first space in the list is a shortcut which will allow you to easily create a new creative if clicked. ### Understanding a Creative at a glance The items in the list of Creatives have a icons, numbers and text shown on them. These can be seen on the example Creative below:

A single Creative shown in the list

1. K Weight of the Creative 2. This icon indicates the Creative was made using Creative Studio 4. 3. This icon indicates the classification of the Creative (Pro Creative for the example above) 4. This icon indicates the status of the Creative (draft status in the example above) 5. This icon indicates the origin of the Creative (made using a PSD file in the example above) 6. This is the name of the Creative 7. This is the last date that the creative was edited 8. This is a thumbnail preview image of the Creative ### Hover Controls on a Creative When you hover over a Creative in the list, the thumbnail preview image will change to show the options shown below:

Hover menu on a Creative

* **Edit** - Clicking this button will take you into the [Fluid Ad Creator](/creating-ads/designing-your-ad-in-the-fluid-ad-creator) to edit the Creative. * **Preview** - Clicking this button will take you to the [Preview Page](/ad-management/preview-page) for the Creative. * **Summary Page** - Clicking this button will take you to the [Summary Page](/ad-management/summary-page) for the Creative # Templates Browse innovative Ad templates and use one for your next Creative ## What is a **Template**? A **Template** is a pre-built ad creative that includes one or more formats, providing a starting point for creating new creatives. It helps save time and development resources by offering a ready-to-use design framework, eliminating the need to start from scratch. Many Templates are built using Fully-Fluid™ Formats, which automatically generate and adapt sizes. This feature makes it easier to add your own formats later, ensuring that layouts adjust seamlessly to different sizes. By using a Template, you can focus on customizing and refining your ad creative while relying on a strong foundational design. ## Accessing the Templates Page The Templates page can be accessed by clicking the 'Templates' tab in the App header.

The Templates page in Creative Studio

## The Sidebar

The sidebar on the Templates page

The sidebar is used for filtering the list of Templates. You can also choose whether or not you want to show any archived templates in the list. ### Filter by: * **Source -** There are 2 sources of templates: * ResponsiveAds - native templates available for all users * My Templates - your unique templates that you own, and templates shared with you * **Template** **Type**- List of template types used in a given account. Template type refers to a combination of features used inside one template or to a specific distinct functionality. These are set-up by ResponsiveAds for Template tracking, usage and analytics. A very powerful way to establish benchmarks. For example: Content Portal-Lightbox, Flipbook, Full-Bleed Video, Pinpoint, Shoppable etc. * **Classification** - The complexity of a Template for usage. Types include: * Advanced - more sophisticated Templates. * Basic- has just the essential elements. * Blank - an empty framework with formats already setup. * Image Swap - templates that users can simply add images to use; very common for ad ops or markets at publishers to use. * **Format** - These are the Formats used in the Template. Eg. Fixed Height Fluid, Fully Fluid etc. * **Category** - Comprehensive list of categories like Beauty, Food & Beverages, Healthcare etc. * **Features** - List of all features available in the Fluid Designer like Video, Carousel, Podcast etc. You can also check and see features of the template, by hovering over the “Feature” icon in the Primary menu, visible when hovering over a template. ## Sub header

The sub header on the Template page

The 'Studio 3', 'Studio 4' and 'All' tabs in the sub header give you the ability to view only Templates designed using Creative Studio 3, only Templates designed using Creative Studio 4, or all Templates regardless of which version of Creative Studio was used to design them. The 'Layouts', 'Themes' and 'All tabs in the sub header allow you to view either 'Layout' Templates which do not use branded content, 'Themes' Templates which use branded content to provide inspiration, or all Templates regardless of if branded content is used. In addition, there is also a search bar which can be used to find a specific Template by name, as well as a sort dropdown which can be used to sort the list of Templates. ## List of Templates

List of Templates on the Templates Page

This is a list of all of the templates available in Creative Studio. ### Understanding a Template at a glance The items in the list of Templates have the logo of the template creator, title of the template, format of the template and the classification of the template shown below the thumbnail image of the template. These can be seen on the example Template below:

Example of a Template in the list of templates.

### Hover Controls on a Template When you hover over a Template in the list, the thumbnail preview image will change to show the options shown below:

Hover on a Template in the Template list

1. **Use -** You can select a template you want to use for your new creative by hovering over it and clicking “Use”. This will begin the '[Setting up an Ad from a Template](/creating-ads/setting-up-ads/setting-up-an-ad-from-a-template)' process. 2. **Info** - Clicking the “Info” button opens the [Info Modal](#info-modal). 3. **Options** - The four menu options are: * Summary - “Summary” takes you to the summary page for this template, where you can edit your template’s tags and share privileges. NOTE: you can access a Template’s Summary page only if you are an owner. * Modify Template - “Modify Template” opens the [Fluid Ad Creator](/creating-ads/designing-your-ad-in-the-fluid-ad-creator) to make changes for this template. * Duplicate - The "Duplicate" feature creates a copy of the template, replicating its elements and layout. This duplicated template can be used or modified within the Fluid Ad Creator. The duplicated template will be saved in your account with a number appended to the original template name, and you will become its owner. * Delete - “Delete” removes the selected Template from the Templates Library. 4. **Features** - You can check and see the features of a given template by hovering over the “Feature” icon. 5. **Preview** - Preview lets you view a given Template in a range of displays. It takes you to the [Preview Page](/ad-management/preview-page). {% hint style="info" %} You must have owner permissions for a Template in order to modify or delete it. {% endhint %} ### Info Modal Information about the Template can be saved and shared to give users details about the template itself. The Info Modal displays this information and is shown in a pop-up window that looks like this: ![Info Modal on Templates Page](https://support.responsiveads.com/hc/article_attachments/360082069211) It contains basic **information** about a template: * **Name -** If you choose to use a template to build an ad in the Fluid Ad Creator, you will be able to rename the resulting ad. If you decide to turn an ad into a template, you can also re-name it. * **Format -** Lists all [Formats](/navigating-the-app/formats) used in the template * **Type** - Indicates how the template is tagged on the Summary page, and how it’s cataloged in the left-hand sidebar Filter. Options are: basic, advanced (has dynamic features; includes unique components), blank, image swap * **Owner** - Indicates whether you are the owner of the template, or if the template is currently being shared with you. * **Source -** Indicates the email address of the current owner of the template. * **Additional Informatio**n - e.g. description, Assets Specs or Build Guide It also has access to basic **functions**: * **Use -** Same as Use in the hover controls. This will begin the '[Setting up an Ad from a Template](/creating-ads/setting-up-ads/setting-up-an-ad-from-a-template)' process. * **Preview -** Lets you view the template in the [Preview page](/ad-management/preview-page). * **Summary -** Summary takes you to the Deploy & Track page summary for this template, where you can edit your template’s tags and share privileges. # Media All of your Creative assets stored in one convenient location The Media page can be accessed by clicking the 'Media' tab in the App header.

The Media page in Creative Studio

## The Sidebar

The sidebar on the Media page

The sidebar is used for filtering the list of Assets. ### Filter by: * **Assets Source** - Assets can either be those provided by ResponsiveAds or the ones which you have uploaded. * **Type** - Applicable to images & Components. These can be assigned to the image in the modal accessed from the 'Edit Modal' ## Sub header

Sub header on the Media page

The tabs in the Sub header allow you to view your different types of media assets. In addition, there is also a search bar which can be used to find a specific Media Asset by name, as well as a sort dropdown which can be used to sort the list of Assets. ## List of Media Assets

List of Media Assets on the Media page

This is a list of all of the Media Assets you have available to you in Creative Studio. The first space in the list is a shortcut which will allow you to easily upload a new Media Asset if clicked. ### Understanding a Media Asset at a Glance The items in the list of Media Assets have the name of the asset, file size of the asset and the date the asset was uploaded below the thumbnail image of the asset. What is shown will vary slightly between the different types of asset, for example a font will show the name of the asset and the number of font variations within the asset. These can be seen on the example Media & Font Assets below:

Image Media Asset

Font Media Asset

### Hover Controls on a Media Asset When you hover over an asset in the list, the thumbnail preview image will change to show a set of controls. What is shown will vary on the type of media asset. #### Image Media Asset

Image media asset

* **Edit** - Launches the edit image modal, where you can change the name of the image, change the tags for the image, download and re-upload your image. * **Copy URL** - this will copy the hosted address of the image asset to your clipboard * **Delete**- this will delete the asset #### Audio Media Asset

Audio media asset

* **Play** - this will play the audio file * **Delete** - this will delete the asset #### Feeds Media Asset

Feeds media asset

* **Edit** - launches the Feed config modal where you can edit your feed config * **Start/Stop** - Once the data source has been defined, clicking this button will map the data to the creative(s) using it. * **Options** - from this menu you can force update your feed, or delete the feed. #### Components Media Asset

Components media asset

* **Play**- this will play the components asset file * **Delete**- this will delete the media asset #### HTML5 Media Asset Coming soon #### Code Snippets Coming soon # Formats Formats define the dimensions and responsive behaviour of your ads. You can view all of your Formats on the Formats page which can be accessed from the 'Formats' tab in the App Header.

The Formats page in Creative Studio

## The Sidebar

The sidebar on the formats page

The sidebar is on the Formats page is solely used to show/hide any archived formats in your list of formats. When archived, a Format is no longer displayed in the Formats list. To access archived Formats: * Scroll to the bottom of the sidebar * Click “Show archived formats” To return to your active Formats: * Scroll down to the bottom of the sidebar again * Click “Back to regular list” ## Sub header

The Sub header on the Formats page

On the left of the sub header there are two buttons, 'Preview URLs' and 'Format Groups': * Preview URLs - This link will take you to the '[Edit preview URLs in showcase](/ad-management/showcase)' page * Format groups - This link will take you to the Format [Custom Groups management](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/how-to-use-formats-and-layouts) page On the far right of the sub header is a 'Create New Format' button. This will launch the [Format creation process](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/how-to-use-formats-and-layouts). In addition, there is also a search bar which can be used to find a specific Format by name, as well as a sort dropdown which can be used to sort the list of Formats. ## List of Formats

List of Formats on the Formats page

This is a list of all of the Formats you have access to in the Fluid Ad Creator. The list of Formats has 3 columns of info: * **Format Name** - For each item in the list, you can see the Format name (this can be clicked on to open up the Format edit screen), the date the Format was created and the user who shared the format with you if you didn't create the Format. * **Primary Flowline** - This shows the list of sizes in the format. These can be edited from either the Format editing page, or from the Fluid Ad Creator (see [How to Use Formats](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/how-to-use-formats-and-layouts)) * **Actions** - * Edit - this launches the format editing page for the selected format * Duplicate - this duplicates the format * Archive - this archives the format * Delete - this deletes the format # Analytics See the data of how your Ad Campaigns are Performing {% hint style="info" %} For enterprise clients, ResponsiveAds also offers a custom admin solution available as a paid SaaS product through **Quicksites**. This solution provides enhanced capabilities tailored to the needs of large-scale ad management and deployment. To access this feature, contact your account representative for assistance in setting up an enterprise account. Learn more about Advanced Analytics [here](/analytics/advanced-analytics). {% endhint %} The Analytics page can be accessed by clicking the 'Analytics' tab in the App header. To get started viewing Analytics for a Creative, select a Campaign from the list in the left sidebar.

The Analytics page in Creative Studio

## The Sidebar

The Sidebar on the Analytics page

With no Campaign selected, there are two parts of the sidebar on the Analytics page: 1. **Search bar and drop down -** allow you to search for specific creatives. 2. **List of Campaigns** - allow you to view the analytics for specific campaigns. Clicking a campaign name in the list will launch the analytics summary for that campaign. When a Campaign is selected, 2 more sections become visible in the sidebar:

The Sidebar on the Analytics page with a campaign selected

3. **Export -** Using this, you can export an xlsx file of the analytics data for the selected campaign and date range. ## Sub Header

Sub header highlighted on the Analytics page with a campaign selected

When a campaign is selected in the sidebar, the analytics page will be populated with the Analytics data for that campaign. At the top of the page is the sub header, the functionality of this section is shown below:

Sub header on the Analytics page

1. Campaign Name 2. Campaign ID 3. This dropdown allows you select the data for a specific ad tag if you are using multiple tags. 4. Date Range Selector 5. This buttom copies the URL of the page to your clipboard. This page can be shared with anyone and does not require a login to access. 6. Timezone Selector ## Analytics Section

Analytics Area on the Analytics Page

The rest of the analytics page is for displaying the analytics data for the selected Campaign. To understand the analytics shown on this page, [learn more here](/analytics/basic-analytics). # Overview Creating Ads in Creative Studio This section covers everything from setting up your ads, whether from scratch or using a template, to importing Photoshop files. You'll learn about different ad formats, including the Fully-Fluid™ format, and how to design in the Fluid Ad Creator using various interface tools. The documentation provides best practices for ad creation, instructions for adding dynamic elements with the animation timeline, and details on creating ad variants, including condition and CSV variants, to cater to different audiences and testing needs. ## Learn more about
Setting up AdsLearn how to set up ads in Creative Studio /files/VdPsCGjtiKkGnRvWc8Nd/pages/S8zxb0PNWiav51lHnhYn
Designing your Ad in the Fluid Ad CreatorTools, Tips and Timelines/files/MNeAFxKqFqB4lU7Q0NyA/pages/V5WC4mq4XAtgY90hWhJd
# Setting up Ads With Responsive Ads, you can set up your ads in multiple ways, including from scratch, from a template, and from a PSD. Depending on your workflow, there are different ways which you can set up your ads with Responsive Ads:
Setting up an Ad from ScratchGo from a blank canvas to a fully responsive ad/files/5tviDwh989Tu0zthju0z/pages/wKs1jrCWPvwF07hoURza

Setting up an Ad from a Template

Start from a tried and tested template/files/HeU41ceed5qc3zg4z4hR/pages/CFEggk85AKBGKD0BGxdr
Using PSD files with ResponsiveAdsupload PSD files to our Responsive Templates and Creatives/files/dd96MC3o86tx2ygg4gEj/pages/jskPKPri3y4XHezXSv9t
Once you've learned how to set up from scratch and using a template, you might want to explore how to set up a PSD for import and learn about formats and the Fully-Fluid™ feature. ### Learn more:
Setting up a PSD for ImportBring your photoshop file straight into Creative Studio/files/VdPsCGjtiKkGnRvWc8Nd/pages/PAuIFk3IAs75LcvwiomS
Understanding Formats and Layouts (Coming Soon)Two important concepts to understand when using Responsive Ads/files/5tviDwh989Tu0zthju0z
How to use Fully Fluid (Coming Soon)Design with Aspect Ratios instead of breakpoints/files/MNeAFxKqFqB4lU7Q0NyA
# Setting up an Ad from Scratch A creative is the design file which will become your Ad The first step of setting up an Ad with Responsive Ads, is to create a new Creative. ## Launch the New Creative Wizard There are 3 different ways you can launch the wizard: 1. Header - Click the 'New Creative' button in the header to launch the set up wizard.

New Creative button in App Header

2. Dashboard- Click the 'New Creative' tile in the 'Getting Started' section on the App dashboard.

New Creative tile on App Dashboard

3. Creatives Page

New Creative button on Creative Page

## Creative Setup Wizard

The Creative Setup wizard first step

The Creative setup wizard guides you through the setup of a new Creative. There are 3 main steps of the Wizard: ### Step 1: Name Creative Give your Creative a name. Choose a name that includes the key features of this ad unit, so you and team will be able to find it again easily later. {% hint style="info" %} **Best Practice -** our ad production partners include **status**, **date**, **client name,** and **template name** in the name of the creative. “Status” is either Final, Test or Draft. Example name looks like this: \[Draft 01/13/21] NBC - Lightbox 6 Articles. {% endhint %} ### Step 2: Add Format **Add Format -** You will choose which formats you want associated with your ad unit. Formats define the set of sizes and behaviour of an ad. You can see a Demo of each format before choosing to add it to your Creative. There are 3 tabs here which allow you to choose between Standard IAB & Single-Size formats, Responsive (Multi-size) formats (selected on default), or choose one of your custom formats under “My Formats”.

Available Formats in the Add Format stage of the Wizard.

For more detailed information on formats, see How to use Formats (coming soon) and How to use Fully-Fluid (coming soon) Once you’ve chosen all formats you want to add to your Creative, scroll down to the bottom of the page and click “Next.”

Selected Formats and the 'Next' Button.

### Step 3: Details The final step of the Set up Wizard is to add some details which help you find it again easily by using the Filter in [the Sidebar](/navigating-the-app/creatives#the-sidebar) on the Creatives Page.

Details fields on the third step of the Creative set up wizard

* **Advertiser -** The “Advertiser” is the brand you are creating an ad for. The only **mandatory** detail. * **Agency / Account -** Note any agency or account the ad is affiliated with. * **Trafficking/Site/App -** You can organize your ads by where they are placed. Enter a site, app or placement the ad will run on. * **Ad Segment -** You can tag your creative by segment. For instance, you can note the targeted Demographic, Location, Time, etc. * **Ad Category -** You can also select an Ad Category, such as “Style”, “Business” “Beauty” etc. which will help you **catalog your Creative**. * **Notes -** This convenient function lets you leave notes for yourself or your team. Those notes are visible on the Creatives page when you hover over a creative, and on a Summary page. ## Proceed to Editor Once you’ve completed the Details step, click “Start Creating” This will open your new Creative within the [Fluid Ad Creator.](/creating-ads/designing-your-ad-in-the-fluid-ad-creator) # Setting up an Ad from a Template Each template setup is unique, but there are some key principles applicable to all templates ## Introduction to Templates Templates in Responsive Ads provide a quick and efficient way to start creating responsive ads. Each template comes pre-configured with design elements, breakpoints, and resizing behaviours tailored to specific types of ads. Once you select a template, it sets the foundation for your ad's structure and functionality. {% hint style="warning" %} **Please note** After choosing a template, you cannot switch to another template for that ad, so it's important to select the right one from the start. {% endhint %} ## Selecting a Template ### Accessing the Template Library 1\. **Navigate to the Template Library:** From the dashboard, click on the "Use a Template" card in the Getting Started section. Alternatively you can click on the Templates tab in the [App Header](/navigating-the-app/dashboard#header).

'Use a Template' card on the Dashboard

2\. **Browse Templates:** You will see a wide range of templates with the ability to filter the templates further [using the sidebar.](/navigating-the-app/templates#filter-by) 3\. **Preview Templates:** Hover over a template and click the ['Live Preview' button](/navigating-the-app/templates#hover-controls-on-a-template) to see a preview of how it looks and behaves across different devices. ### Template Tutorials The Template Tutorials section is designed to help you get started with Studio 4’s essential templates. Whether you’re creating your first ad or refining your approach, these tutorials will guide you through setting up each template step-by-step. Learn more about the tutorials [here](/quick-start-guides/template-tutorials)
Cover image
Static TemplateA simple, no-motion template perfect for straightforward messaging and brand visuals./files/wOQEs9ij4X2Q2oGEreFU/pages/HnT9x9P8Cf2oNelYaL0l
Shoppable CarouselAn interactive, scrollable carousel ideal for showcasing multiple products with direct purchase links./files/aUWxX7qgzxbOha6MpijU/pages/ajBD9oAhQPi26yJIVJBR
In Banner VideoA sleek video ad format that plays within a banner, balancing engagement and space efficiency./files/CXgi6mCLEfUYQjcd8TD3/pages/2sVmqGAGO06dR0DmcpwG
Full Bleed VideoA high-impact video template that fills the entire ad space for immersive storytelling./files/crKQzSrXhYyKmkpEQZdU/pages/waSKyAUw5aFTwv6abfE2

# Basic Templates Beautiful responsive templates which can easily be customised
Pull 'N Peel/pages/swuI8L4PtAVHZFyVqeAX
Scratch Off/pages/iU7mfVfo81SD3j0LyKXO
Overlay + Hero/pages/o9RGy94AABYFxsARHaau
In Banner Video/pages/rZEf7CnjvMywQ7QgCmSi
Product Guide Carousel/pages/nV2hvma5JC5rEKHyCKn5
Fluid 90H Adhesion/pages/ofpqZCzDkXLZxIH4lOsj
Shoppable 360 (5 Cards)/pages/1lkO3L5f3KVnLkElW0BK
# Pull 'N Peel # Scratch Off # Overlay + Hero # In Banner Video # Product Guide Carousel # Fluid 90H Adhesion # Shoppable 360 (5 Cards) # Advanced Templates # Blank Templates # Image Swap Templates # Using PSD files with Responsive Ads Setting up and uploading PSD files into Responsive Ads ## Overview of Functionality ResponsiveAds simplifies and speeds up the ad-creation workflow for companies using Adobe Photoshop by offering the option to upload PSD files to our Responsive Templates and Creatives. Quickly convert your static one-size design in Photoshop to a responsive ad unit! ### **Layers to Elements** Our PSD Upload functions transform your PSD layers to Fluid Ad Creator elements. We currently support Image and Text element generation from the respective Photoshop layers. ### **Replacing Elements with Layers** Our “Replace” function will instantly transform a template to match your Photoshop design. You can replace any existing image or text element with the content in your PSD file, to generate a new, fully laid out ad in a minute. ### **Grouping and Masking** When using the “Upload as a group” function, also Group elements will be generated from grouped layers. Set up your group with a square mask to create a boundary that hides any content outside of the edges. ### **Auto-position** Upload the PSD file to a size that matches the aspect ratio of your PSD design. The generated elements will be positioned exactly as they are positioned in Photoshop. The elements will be converted to % based size and position, automatically setting up the foundation for your responsive design. ### **Upload All Assets At Once** Skip manual upload of individual assets, and tedious copying of exact positions already defined once in Photoshop, by using PSD Upload as a Group functions. Or fill in a template with all the needed assets with the Replace from PSD functionality in just a few clicks. *** ## Learn More
How to Prepare Your PSD File This guide will show you the best practices to prepare your PSD files, making it easy to create responsive ads from your static layout./pages/PAuIFk3IAs75LcvwiomS/files/MNeAFxKqFqB4lU7Q0NyA
How to upload your PSD FileLearn how to upload your Photoshop file into the Fluid Ad Creator/pages/gPb3KXbfdE03ofheyTfa/files/5tviDwh989Tu0zthju0z
# How to Prepare your Photoshop PSD files for the Fluid Ad Creator Many companies use Adobe Photoshop to design layout mockups or final visual designs for their ads for approval before building the ad unit itself. You can upload your Photoshop PSD file directly to ResponsiveAds Fluid Ad Creator, and your layers will be converted into adjustable elements. There are some Photoshop features that are not supported by the Fluid Ad Creator, and some other considerations for moving from pixel-based design to a responsive design. Sometimes, you might not see what you expected when uploading a PSD to our tool. This page walks you through everything you need to know to get the best results when uploading your file.
*** ## File Size Avoid uploading large Photoshop files to the Fluid Ad Creator, as they may fail to process correctly, or take over a minute to upload. * Recommended Size: Keep your layered PSD under 20 MB. * Good: Less than 10 MB. * Best: Less than 4 MB. ## Design Size The size of your canvas in Photoshop will define the size and placement of the assets that are uploaded to the Fluid Ad Creator. It is good practice to verify which template or format the PSD will be uploaded to, and design at an aspect ratio that is included. Design your PSD as the largest size you need. Smaller sizes will be created from this main design following the resizing rules set up in the Fluid Ad Creator. ### **Recommended PSD Design Sizes for Common Formats** * Fully-Fluid Format: * PSD Design Size: 1920x1080 * Fluid 250 or Fluid 400 Fixed Height Fluid Formats: * PSD Design Size: 2560x600 (Maximum design size) * IAB ad size formats and packs: * PSD Design Size: 970x808 (Maximum asset quality for all sizes, laid out for 300x250 aspect ratio) * For the smallest IAB sizes only, a PSD Design Size of 728x600 works the same way ### Example PSD files Use this 1920x1080 Design size file with a creative that has a Fully Fluid Format selected. {% file src="/files/O5xBrQTNRJXFycxGiAjA" %} * TIP: jump to (replace link) for a step by step walkthrough Use this 970x808 Design size file with a creative that has the IAB Pack, with the size 300 selected. {% file src="/files/DMxGlKFtasLsPofg8feu" %} To fully understand design size and how it affects different formats and worksflows, read “[Design Size and why it matters](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/psd-design-size-and-why-it-matters)” ## Best Practices for Preparing your PSD Contents * Organize your layers for responsive design: Evaluate which elements of your design will be positioned together in all sizes, and which elements need to move independently. E.g. combine Headline and Sub-headline in a group, and merge your background layers to one set image. * Include Additional Elements for Mobile: Ensure your design includes elements suitable for mobile sizes to enhance flexibility and responsiveness. * Reference Images: Incorporate any existing reference images of the complete design for all intended ad sizes to guide the resizing process. ### Color Settings * Color Profile: Use sRGB IEC61966-2.1. * Color Space: Set to RGB/8. ### Layer Preparation Prepare all layers by following these guidelines: * Group or Merge Layers: Group layers when you want to have individually adjustable elements that resize as a group. Merge layers when you want a single image element. * Delete Hidden Layers: Remove any layers that are not visible. * Rasterize Layers: Rasterize layers with features like blending modes and adjustments to make sure your assets will appear as intended in the Fluid Ad Creator. Layers will be rasterized on upload, or discarded if unsupported. * Rename your Layers: Try to give descriptive names to your layers, so it is easier to identify them in the Fluid Ad Creator. Find the full guide with step by step instructions: {% content-ref url="/pages/te0NmfVC6JM7XJcojyUF" %} [Preparing Layers](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-prepare-your-photoshop-psd-files-for-the-fluid-ad-creator/preparing-layers) {% endcontent-ref %} {% hint style="success" %} If you only have one layer in the .PSD file, export it as a JPG or PNG file and upload as a single Image Element. {% endhint %} # Preparing Layers How to Prepare all Layers in Photoshop ## Merging several layers In Photoshop you can have as many layers as you want. Often one visual element will consist of multiple layers. It is important to merge these layers in Photoshop, so you have a single element to manipulate in the ResponsiveAds Fluid Ad Creator. Click Layers > Merge Layers or CTRL+E (CMD+E on Mac) **For example:** 1. You might have an element in your ad of a hand holding a smartphone, where one layer is the smartphone device, one layer is the smartphone's screen and one layer is the hand holding the device. You would never want these drifting to different positions or edited separately inside the Fluid Ad Creator, it is one visual element that should be merged to a single layer for the ad. 2. Text that lies upon a button can be combined with that button as a Smart Object. This causes the button to make up one element in the Fluid Ad Creator, that you can use as is, or as a reference image for building an interactive HTML button element. 3. If you have multiple text elements always shown together, set up with complex text effects (or otherwise have no need to edit or change the text in the Fluid Ad Creator), you can merge your layers of text to make up a final one rasterized element.

Merge layers in the Photoshop layer menu


*** ## Hidden layers If you have hidden layers in the .PSD, these will be added to the ad too, but set as hidden by default. If you're not using these layers in the final ad, we recommend deleting them in the editor to decrease ad weight and increase performance. *** ## Rasterizing Layers ResponsiveAds service does not currently support some of the more advanced features in Photoshop. Therefore you need to rasterize them before uploading to ResponsiveAds. These features include: 1. Layer styles (e.g. drop shadow or stroke) 2. Layer masks & vector masks 3. Layers as clipping masks (note that rectangular masks on groups are supported, see \[link]) 4. Layer blend modes (e.g. darken, multiply or overlay) 5. Adjustment layers If you don’t have any of the below features used - you are all set and can upload your .PSD file. #### **1. Layer styles (e.g. drop shadow or stroke)** Create a new empty layer (Layer > New > Layer OR click on plus button on the layers tab) on top of the layer with layer style. Merge the empty layer and the layer with layer style by clicking Layers > Merge Layers or CTRL+E (CMD+E on Mac)

Create a new layer

Merge new layer and layer with layer style

#### **2. Layer masks & vector masks** To rasterize masks, right-click on the mask in the layer list and select Apply mask.

Apply Layer Mask

#### **3. Layers as clipping masks** Right-click on the clipping mask in the layer list and select Release Clipping mask.

Release Clipping Mask

#### **4. Layer blend modes (e.g. darken, multiply or overlay)** Layer blend modes are a bit tricky to rasterize as these don't affect the layer itself but instead how the layer interacts with the other layers below it. However, it's possible to include the blend mode effect in a single layer. 1. If you have blend modes in multiple different layers, start rasterizing them from the topmost layer. 2. Select the content of the layer with the blend mode. Easiest way to do this is to select the layer from the layer list and select all (CTRL+A or CMD+A). Then select the Move tool (V) and nudge once to any direction with the arrow keys and nudge back to the opposite direction. This will change the selection to the actual content of the layer instead of the whole canvas. 3. In the layer list, toggle the layer with the blend mode and ALL the layers above it to invisible 4. Click active the layer directly below the layer with the blend mode. Select Edit > Copy merged and Edit > Paste special > Paste in place. 5. Select the new layer that was created (it will be directly below the layer with the blend mode) and the layer with the blend mode and merge the two layers (Layers > Merge Layers or CTRL+E / CMD+E) #### **5. Adjustment layers** Adjustment layers are not supported in ResponsiveAds and can't be rasterized as their visual effect is not related to a single layer. You can add the adjustment to each layer under the adjustment layer either by selecting each layer one by one and adding the same adjustment to that layer from Image> Adjustment. Another way is to duplicate the adjustment layer multiple times (right-click on the adjustment layer and select Duplicate layer) so that there is a copy above each layer that you want to add the adjustment and then one-by-one right click on all the adjustment layers and select Create clipping mask. You can then merge the clipping mask and the layer beneath it by right-clicking on the adjustment layer in the layer list and select Merge Down, or by selecting them from the layer list and selecting Layers > Merge Layers or CTRL+E / CMD+E.
*** ## Rasterize Type layers based on their use ResponsiveAds now generates text elements from text layers in Photoshop, but you will need to recreate the font styles for the live text in the Fluid Ad Creator. A rasterized version of the text layer will also be imported as a reference image. If you do not wish to work with live text elements, you can rasterize the text layers by selecting the text layer and using the menu to Rasterize Type.

Rasterize Type

{% hint style="info" %} **Want to use an image of your text instead of setting up editable text elements in the Fluid Ad Creator?** Best Practice: to have your text crisp on retina displays, rasterize the text layers in Photoshop, and before rasterizing make your text twice the original size. {% endhint %} # Color Settings ## What are Color Settings Color is interpreted and displayed slightly differently based on the color settings defined in Photoshop and other tools. To get a correct match on your colors when you upload a PSD file, make sure you are using the color settings that match the Fluid Ad Creator. *** ## How to Set Colour Profile & Color Space ### New PSD Color Profile To set color profile when creating new PSD file:

Color Profile Setting when creating a new PSD document

Best Color Profile for ResponsiveAds compatability

### Existing PSD Color Profile To check Color Profile in the existing PSD file click Edit > Assign Profile…

Assign Profile for current PSD file

In the Assign Profile section, you will see which profile is active Use the dropdown or radiobutton to change the profile to be sRGB IEC61966-2.1, if it is not selected.

Assign Color Profile to current PSD

\
*** ### Color Space The .PSD file must use RGB/8 color space. If not sure, check the Mode submenu of the Image menu to make sure that RGB Color and 8bits per channel are enabled.

Color Space Setting in Photoshop


# How to Upload Your PSD File into ResponsiveAds To ensure your PSD works correctly with the ResponsiveAds platform, please follow our guidelines ## PSD Document Setup Requirements We recommend keeping your file size as small as possible. Very large files may fail to upload or take a long time to process. **Recommended Size: under 20 MB.** Design your PSD at a size that matches the aspect ratio and/or largest dimensions of the ad unit, for example 1920x1080 pixels. Learn why[ here](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/psd-design-size-and-why-it-matters). * Check the type of format you are targeting and pick the correct canvas size Use the correct [Color Settings](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-prepare-your-photoshop-psd-files-for-the-fluid-ad-creator/color-settings), [rasterize layers](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-prepare-your-photoshop-psd-files-for-the-fluid-ad-creator/preparing-layers) using unsupported features (Layer Styles, Adjustment layers, Layer Blend Modes). For detailed instructions on how to set up your PSD file, read the page: {% content-ref url="/pages/PAuIFk3IAs75LcvwiomS" %} [How to Prepare your Photoshop PSD files for the Fluid Ad Creator](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-prepare-your-photoshop-psd-files-for-the-fluid-ad-creator) {% endcontent-ref %} Our suggested workflow for a company relying on designs in Photoshop files is to set up a **PSD Template** that would be used to generate correctly prepared **Primary PSD** files to be uploaded in to our tool. These can also be used to collect assets that follow the Asset Specs from any clients you may be working with. [Learn more](https://app.gitbook.com/o/egJoPkCUqyp6cPrgslrd/s/As6tyouSPGAAcvS6CYBG/~/changes/213/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/primary-psds-and-psd-templates-and-when-are-they-needed) about Primary PSD files and PSD Templates.
### Example PSD Files Download these example Primary PSD files to follow along with the examples below, and learn about suggested PSD structure. **Fully-Fluid Format - PSD Design Size: 1920x1080** {% file src="/files/O5xBrQTNRJXFycxGiAjA" %} Fluid 250 or Fluid 400 Fixed Height Fluid Formats - PSD Design Size: 2560x600 (coming soon) **IAB ad size formats and packs - PSD Design Size: 970x808** {% file src="/files/DMxGlKFtasLsPofg8feu" %} *** ## Uploading Your PSD File A PSD file can be uploaded to ResponsiveAds Fluid Ad Creator once you have first [set up your creative from scratch](/creating-ads/setting-up-ads/setting-up-an-ad-from-scratch), opened an existing creative, or started a creative from a template. This section outlines the options for uploading a PSD file to the Fluid Ad Creator. ### PSD Upload Drop-down Find the button on the top bar of the Fluid Ad Creator:

PSD Upload Drop down in the Fluid Ad Creator

There are two main ways to upload a Photoshop PSD file to the Fluid Ad Creator, adding assets as a new group, and uploading to replace assets: 1. **Adding as a group** - when you want to reproduce a Photoshop layout in the Fluid Ad Creator 1. [Add Photoshop PSD file as a Group of Images & Text ](#add-as-a-group-of-images-and-text) 2. [Add Photoshop PSD file as a Group of Images ](#add-as-a-group-of-images) 2. **Replacing assets** - when you start from a Template or are updating an existing creative with new assets / versions of assets 1. [Replace or create elements with layers from PSD](#replace-or-create-elements) ## Add a Photoshop PSD file as a Group The two menu options for adding as a group will create new elements from the (supported) layers in your Photoshop file. These elements will appear inside a group that is set to the pixel size defined in your Photoshop file, and named with the PSD file name. The size and position of the elements inside the group will be defined in percentages, and will match one to one with the designed layout in Photoshop. After selecting either of the two options, you will be presented with a dialog to choose a file by using the file browser, or by dragging and dropping a PSD file to the dialog.

Upload PSD Modal

### **Add as a Group of Images** Our original functionality, which adds all the layers into the Fluid Ad Creator as image elements. This means that all supported layers will be rasterized - they will become images. The group structure will be preserved, and the size and position of all the elements will match the original PSD file.

Photoshop layers shown as elements in ResponsiveAds

You will need to adjust some settings to finalize the transition from a static layout to a responsive design: #### Main Group setting 1. Select the main group added (name of your PSD file) and look at the Size section of the Design Panel. Change the size units from px to % by clicking on the unit button.

Click 'px' to change the units for size to %

2. If your size values are not 100% and 100%, click on the target icon to reset the group to the size you are working on. 3. Now the Fluid Ad Creator understands that you want this group of elements to always fully cover the whole ad slot, no matter if the ad displays at 1920x1080 px or 1900x1000. All of your design values are set to relative, percentage values, and every element will resize accordingly. #### Image settings Image settings need to be changed for background image(s) and text images. Set any background images that are meant to always cover the entire area of the element to \*cover\* mode.

Change any background images to 'Cover' mode in the size controls

This mode will not stretch or skew the image, but it will crop out any parts of the image that flow out of the element boundaries. Use the “focal point” feature to guide which part of your image will always be visible. Images of text or buttons that you wish to keep aligned should be set to the same alignment value, but kept at the \*contain\* setting. In the example, all the left hand content could be set to be left aligned, so as the size of the element containers shift with the responsively resizing canvas, the elements are all contained on the left side, and stay aligned.

Left aligning the content

In addition, you may want to **lock** some groups of elements (like the car and the shadow in the example), so that they resize “together” without changing position or size in relation to each other. Locked elements should be anchored so that they keep their intended position on the canvas. *** ### **Add as a Group of Images & Text** In this option, the type layers defined in your Photoshop file will also generate text elements, along with the rasterized image version of the text. Otherwise these options are the same in all functionality. Follow the steps above to set up the [main group](#main-group-setting) and[ images](#image-settings). The text element is always above the image element. The names start with “Text - “ for text and “IMG - “ for the rasterized image of the text layer.

Text Element above its Image equivalent in the Element list

The text comes in set to “Shrink” and our default font size. It will use the main color defined in the Photoshop file, but it will not bring in any additional styles or colors.

Text Controls

Next, set up the live text as you want to have it in your responsive creative. Use the rasterized image to check that your settings look like the design defined in Photoshop. Also remember to change the text alignment options if necessary. Hide the rasterized image of the text when you are done, by clicking on the eye icon in the Element list or the Design panel. You can also delete the image element, when you have no need for the reference image. *** ### **Replace or Create Elements**

Replace or create elements with layers from PSD

If you want to update an existing creative, for example replace placeholder images with final designs, you can use this function. This is also the correct method to use when starting from a [Template](/creating-ads/setting-up-ads/setting-up-an-ad-from-a-template). For best results, start by selecting a size and/or aspect ratio that matches your PSD file in the Formats section. Then select the replace function from the PSD options drop-down. \ First, you will be asked to select a file to upload. Selecting or dragging in a file will start the upload process.

File upload modal

Next, select what to do with each (supported) layer in the file - replace existing contents or create a new element. On the left you will see each layer in your Photoshop file showing the name of the layer, the size of the image asset (if used to replace an image), and a visualization of that layer.

Choose whether to replace or create elements for each layer in the PSD file

The first items in the “Select an element” drop down are all the image elements in this creative. Select one of these, when you wish to replace an existing image with an asset generated from the layer shown on the left. The seconds items are the text elements included in this creative. Selecting one of these will replace the text characters in the text element with the characters from the PSD file. It will keep the text settings that are defined in the creative. The third option will create a new element based on the selected layer type (either image or text). That new element will be added at the position and size defined in the PSD file. These are set to percentages, and anchored to the top left corner. Depending on how well your creative and PSD align to each other, you are either done immediately, or will need to do some final tweaks to organize and finalize the design. Copy settings to other sizes to reflect these changes to all your sizes.
# Step-by-Step Instructions: 1920x1080 Example PSD Upload # Step-by-Step Instructions: 970x808 Example PSD Upload On this page, you can follow a detailed walkthrough of the steps to take when uploading a Primary PSD file created for use with the full range of IAB sizes. {% file src="/files/pvCwkMH2fPv8xlo84uEy" %} You can look at an example end result on our preview page. ## Use 970x808 Design Size with an IAB Pack IAB packs and formats, for example the IAB Pack (Fully-Fluid™), are used when you are targeting IAB slots. Designing for IAB involves working with smaller ad slots, and thus a different size of PSD is better. Starting from a layout that is close to a square aspect will speed up generating all the other aspect ratios included in the IAB standard, so we recommend targeting the 300x250px. As the IAB standard also includes sizes ranging from 970x250 to 300x600, we recommend building the ad design in Photoshop at 970x808px size. This gives you assets that are large enough to display beautifully in all the IAB sizes. ## Getting Started Follow the below instructions to import the 3 times larger size correctly to the 300x250 size in your IAB Pack. {% stepper %} {% step %} ### Start a new creative using the IAB Pack (Fully-Fluid) If you're unsure of how to start a new creative, the steps are described in our section on [Setting up an Ad from Scratch](/creating-ads/setting-up-ads/setting-up-an-ad-from-scratch). To create IAB ads, either use the IAB Pack (Fully-Fluid) from ResponsiveAds or select a custom IAB Pack, if your account has one. In this tutorial, we are using the IAB Pack (Fully-Fluid). {% endstep %} {% step %} ### Select the 300x250 size When the Fluid Ad Creator loads, the size for 970x250 will be automatically selected. As your PSD file is designed for a square aspect ratio, you need to select and activate a different size. Select the size 300x250.

Two sizes are active (in blue) now: 970x250 and 300x250

For best results later on, you should only have the square layout for the size 300x250 selected and active. Go back to the 970x250 size and remove this layout from the button on the canvas, below the scrubber and the blue size indicator.
You will be moved to the 300x250 size, and are now ready to upload your PSD file. If you don't see the full layout on the canvas, click the [Zoom reset](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) button in the zoom controls on the top bar twice to center the ad on your canvas. {% endstep %} {% step %} ### Start the upload Select the button for PSD options on the top bar of the Fluid Ad Creator. Choose the option for "Add Photoshop PSD file as a Group of Images & Text" The upload dialog will open. ![](/files/vTRlkOobHiIbO2Uh6HPx) Drag in our example file or your own file (designed at the size 970x808) {% endstep %} {% step %} ### Wait while the tool generates elements from your file This will take longer, if your file is larger than 10MB. {% endstep %} {% step %} ### Set the generated group to the correct size Your layout will import at 3 times the size of the active layout, so it will not display fully.
In the Size section of the [Design Tab](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#design-tab), you will be able to adjust this with one click. Click the crosshairs icon next to the title "Size" to set the imported group to be 100% width and 100% height. ![](/files/0AnLnQ91F8CzZ55oN8tz) {% endstep %} {% endstepper %} ## Adjust the Imported Text Now your first size looks as it was designed in Photoshop, except for the fact that the text layers have generated both rasterised image layers and text layers. If you don't need editable text in your ad unit, you should rather use the "Add Photoshop PSD file as a Group of Images" option to avoid this step.
You will need to consider for each of the text layers whether you need to use editable (live) text, or if the rasterized image will be good enough. ### Setting up Text elements The default settings for text elements are currently applied to imported text layers. This means that the text is always set to Shrink mode, where the text will always fit into the marquee bounding box that it is in. If you want the text to wrap to multiple rows, this setting needs to be changed, along with changing the font from our default font Lato. In the end, you will use the image of the same text to verify your text element settings match the PSD. The below steps are for the text layer called "Content" in the Example PSD file. Repeat these for any other text that should wrap freely depending on the size of the ad. {% stepper %} {% step %} ### Select the text element You'll see two elements in the elements list for the "Content" text layer
Click the eye icon on the element "IMG - Content" to hide it for now Click on the "Text - Content" to select the text layer and see the text settings {% endstep %} {% step %} ### Set the text to "Wrap and Shrink" In the Design Panel, you will find a section for Text settings. These settings control how the text is displayed on this size. Click on the selector for "Wrap+Shrink" to enable wrapping on to multiple rows![](/files/RrAMIUxyldmaKWoKUlKj) {% endstep %} {% step %} ### Set the font size Apply the maximum font size that should be used for this text in the Max size field. The text element will always try to display the text as large as possible inside of the bounding box, so you can limit your body text to sensible upper limit to make sure it is never larger than the Title font. We will use the maximum size of 24 px If you hover over the text element in the canvas, you will see what the actual px size of the font is in this small 300x250 size. {% endstep %} {% step %} ### Set the font family and weight We support Google fonts out of the box, but you can upload your own fonts to use if you have a license to use the font in the ad. Select the font family drop down to begin ![](/files/7wIOEsG1vhJdMYJiUx0j) If you need to upload a font from your computer, click the button on the bottom of the font family picker. For this example, use the font Poppins (offered in Google Fonts) and set it to "Extra Light" as defined in the example file. {% endstep %} {% step %} ### Set the Line Height and Letter Spacing You may need to also apply a different Line Height and Letter Spacing value to match your design specification. In this example the correct value for line height is 140% {% endstep %} {% step %} ### Adjust the container size if needed Sometimes, the way that a web font is presented is slightly different from the presentation in Photoshop. Turn on the image asset "IMG - Content" and compare it to the text set up.
You will need to adjust the size of the text box slightly to create exactly the same size text as is in the original. Drag the middle handle of the bounding box up a little, until the font jumps to a matching size. Next, reposition the element so that the texts line up again. ![](/files/IAUARkq9P1XdjPY6r9Cz) The slight variation in fonts is normal. It is good design practice to verify that the design created for a triple sized layout makes sense in 300x250 size. It turns out that this text should be made slightly larger to be properly visible in a small ad. When you hover over the text on the canvas, you can see that it is displayed at 7px, which is too small. Set the element to display at 10px size by dragging the container to a larger size. TIP: You can use the anchor buttons to align Now you can delete the element "IMG - Content" or move it to the group "Background 1", which will hide it from the ad. {% endstep %} {% endstepper %} ### Working with Images of text For example in this case, the Title text always needs to be displayed on one row, so the image of the text is good enough. # PSD Design Size and Why it Matters ## PSD Design Size Design your PSD at a size that matches the largest dimensions of the ad unit. Smaller sizes will be created from this main design. The most common canvas sizes: * 1920x1080 (matches Fully-Fluid Format) * 2560x600 (maximum size needed for Fluid 250 or Fluid 400 formats) * 970x808 (approx. 3x the size of a 300x250 ad for IAB sizes) Select the correct size canvas when you start a new Photoshop file, or use the “Image size” or “Canvas size” tools in the “Image” menu to adjust the size later on.
*** ## Why does PSD design size matter? ### Creative Weight and image renditions We always want our ads to be as light-weight as possible. This allows them to load faster and ensures more people see them. The Responsive Ads image rendition \[link to the image rendition section] system will generate smaller versions of your images to create the lightest possible ads, but it works best with images that are no larger than needed. So to get the best results for image quality and ad weight, start with assets that are at the largest size needed, but no larger. For your Photoshop files, this means that it is important to start with a size that is as wide and tall as the widest and tallest size included in the format you will be using. Often, this is just the largest size included in your format, for example 1920x1080 for the Fully-Fluid Format. But for the IAB pack we suggest 970x808, which covers all the widest sizes (e.g. 970x250) and the tallest sizes (e.g. 300x600) at the same aspect ratio as the 300x250 size. ### Layout and positioning elements The design size of the PSD also determines the position and size of any new elements added to the Fluid Ad Creator. When uploading as a group, the main group will be set to be the fixed pixel size of your design size. If your design size does match the active size in the Fluid Ad Creator, the group will show up as a different size than your ad canvas. #### Image 1: PSD size matches the selected size

PSD matches the selected Size

#### Image 2: PSD and selected size mismatch

PSD and selected size mismatch

To fix this issue, you need to navigate to a size that matches the aspect ratio of your PSD design. When you are in that size, follow the instructions below to create the responsive resizing rules that will make sure your design is resized correctly. You should then remove any mistaken layouts with the '-' button

Remove layout '-' button

\ Select the size again now that you have defined the correct resizing rules, and see the correct layout show up instead of the mistaken one.

Correctly resized ad

*** ## Step-by-step instructions Use these instructions when you are starting a blank “New Creative”. (link to article) In the Creative Setup phase, you can select which format your creative uses.

set up + format selection pop up for Fully Fluid formats

You can also see and update the formats in the Fluid Ad Creator.

Formats in the left sidebar in the Fluid Ad Creator

Use the format information to determine the design size you need for your PSD file. ### Fully-Fluid Format selected - use 1920x1080px Set your PSD design size to 1920x1080 when working with a fully responsive creative using our Fully-Fluid Format. Most of our templates are built with the Fully-Fluid Format, as that gives you the 5 shapes you need to generate almost any other size or aspect ratio. {% hint style="info" %} Working with Fully-Fluid is the easiest way to get started with PSD upload. {% endhint %} Before you upload, verify your active size(s): The list should look like exactly like this (with 1920x1080 blue and bold, all the other sizes grey)

1920x1080 blue and bold, all the other sizes grey

Follow the [instructions here](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-upload-your-psd-file-into-responsiveads) to continue.
*** ### 2560x600 and Fixed-Height Fluid Formats Fixed-Height Fluid formats, for example the Programmatic Fluid 250, are used when the creative is for a high-impact masthead slot (a fixed height slot that changes only width responsively depending on the size of the page). These units don’t usually contain a 1920x1080 layout or aspect ratio, and require specialized assets to cover the widest breakpoints. There may also be a 300x600 layout or other IAB sizes included in the format, so that the single creative can display in any available ad slot. Check your format for the widest size (first one in the format) and the largest height included. Use those to calculate the canvas size for your PSD file. There should be no need for a size larger than the size 2560x600. It is easiest to lay out your Fixed-Height Fluid when the design size matches the first available size in the format (widest). Image 1: example when you don’t need the 600 height Image 2: When you might need the 600 height Before you upload, verify your active size(s) * More adjustments needed when not matching the exact size After uploading, adjust from pixels to percentages * More adjustments needed when not matching the exact size \ Select the next size and verify your adjustments
*** ### 970x808 with an IAB Pack IAB packs and formats, for example the IAB Pack (Fully-Fluid™), are used when you are targeting IAB slots. Designing for IAB involves working with smaller ad slots, and thus a different size of PSD is better. Starting from a layout that is close to a square aspect will speed up generating all the other aspect ratios included in the IAB standard, so we recommend targeting the 300x250px. As the IAB standard also includes sizes ranging from 970x250 to 300x600, we recommend building the ad design in Photoshop at 970x808px size. This gives you assets that are large enough to display beautifully in all the IAB sizes. Follow the below instructions to import the 3 times larger size correctly to the 300x250 size in your IAB Pack. {% stepper %} {% step %} ### Start a new creative using the IAB Pack (Fully-Fluid) If you're unsure of how to start a new creative, the steps are described in our section on [Setting up an Ad from Scratch](/creating-ads/setting-up-ads/setting-up-an-ad-from-scratch). To create IAB ads, either use the IAB Pack (Fully-Fluid) from ResponsiveAds or select a custom IAB Pack, if your account has one. In this tutorial, we are using the IAB Pack (Fully-Fluid). {% endstep %} {% step %} ### Select the 300x250 size When the Fluid Ad Creator loads, the size for 970x250 will be automatically selected. As your PSD file is designed for a square aspect ratio, you need to select and activate a different size. Select the size 300x250.

Two sizes are active (in blue) now: 970x250 and 300x250

For best results later on, you should only have the square layout for the size 300x250 selected and active. Go back to the 970x250 size and remove this layout from the button on the canvas, below the scrubber and the blue size indicator.
You will be moved to the 300x250 size, and are now ready to upload your PSD file. If you don't see the full layout on the canvas, click the [Zoom reset](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#reset-zoom-button) button in the zoom controls on the top bar twice to center the ad on your canvas. {% endstep %} {% step %} ### Start the upload Select the button for PSD options on the top bar of the Fluid Ad Creator. Choose the option for "Add Photoshop PSD file as a Group of Images & Text" The upload dialog will open. ![](/files/vTRlkOobHiIbO2Uh6HPx) Drag in our example file or your own file (designed at the size 970x808) {% endstep %} {% step %} ### Wait while the tool generates elements from your file This will take longer, if your file is larger than 10MB. {% endstep %} {% step %} ### Set the generated group to the correct size Your layout will import at 3 times the size of the active layout, so it will not display fully.
In the Size section of the [Design Tab](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools#design-tab), you will be able to adjust this with one click. Click the crosshairs icon next to the title "Size" to set the imported group to be 100% width and 100% height. ![](/files/0AnLnQ91F8CzZ55oN8tz) {% endstep %} {% endstepper %} Now your first size looks as it was designed in Photoshop, except for the fact that the text layers have generated both rasterised image layers and text layers. If you don't need editable text in your ad unit, you should rather use the ""Add Photoshop PSD file as a Group of Images" option to avoid this next step. *** ## Using Upload as a Group to generate parts of a layout You can upload directly from a PSD also parts of your creative, like slide contents, or a brand panel. This process is the same as above, but you will need to calculate the correct canvas size yourself based on the size of the panel you are adding. After you are done adjusting the first size, use the “copy element settings” function to add this panel correctly to the other sizes *** ## How design size affects replacing elements with layers In the option “Replace or create elements with layers from PSD”, the PSD layers are used to create image assets with the exact pixel size of the layer in Photoshop. These assets will be used to replace the existing images you select - so the quality and aspect ratio should match the assets in the creative you are working with. When creating new elements as a part of this option, the new elements will be placed and sized also as they are defined in the PSD design. So if the PSD design size is the same as the size you have active when selecting the option, they will display in their correct locations. But in a case of mismatch, the elements will not be created correctly for the size selected (as they will be created to match exactly the PSD design size instead of your selected size).
# Primary PSDs & PSD Templates and When Are They Needed? A Primary PSD or Master PSD (alternative term) is a structured Photoshop file, modified in Photoshop to match your company’s templates and/or ad formats. A set of instructions for the modifications needed should be saved for each different use case. A Primary PSD is the source of design assets used in Fluid Ad Creator - the starting point for creating a responsive ad creative from your static designs. When a Primary PSD is set up correctly, designers can more efficiently set up the responsive behaviors for resizing in the Fluid Ad Creator. This saves time later on, as mistakes in resizing rules are avoided. You can benefit from setting up a PSD Template, following the above guidelines. A PSD Template is a generic example file that has the correct structure and settings defined, including useful information like safe areas or content guidelines. Designers save the PSD Template as a new Primary PSD file, and add or replace relevant layers there for each campaign. You can request any bespoke ResponsiveAds Templates to include downloadable PSD Templates that match the asset specs for that template. This makes it easy to communicate asset specs with stakeholders and stay aligned on deliverables. ## Why create a Primary PSD? * Ensure the layout, grouping and elements generated match your formats & templates * Maintain consistency for designers across ad units, speeding up delivery * Avoid issues with unsupported Photoshop features, or image asset renditions ## Why create a PSD Template? * A single point of truth for all your designers to reference when building PSD files * Communicate and clarify your asset specifications for different types of ad units, by creating a matching PSD Template for each product you are offering to your clients. * TIP: match PSD Templates with ResponsiveAds Templates for different types of ad units, and use the "[Replace or Create elements from Layers"](https://docs.responsiveads.com/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-upload-your-psd-file-into-responsiveads#replace-or-create-elements) feature to automatically generate an ad unit with the clients assets. * Simplify asset collection from your clients and designers: the PSD template guides them on sizes and safe areas, and is easy to fill in with assets that match your specifications. # How to Generate Responsive Sizes from your PSD File ### ### 970x808 with an IAB Pack IAB packs and formats, for example the IAB Pack (Fully-Fluid™), are used when you are targeting IAB slots. Designing for IAB involves working with smaller ad slots, and thus a different size of PSD is better. Starting from a layout that is close to a square aspect will speed up generating all the other aspect ratios included in the IAB standard, so we recommend targeting the 300x250px. As the IAB standard also includes sizes ranging from 970x250 to 300x600, we recommend building the ad design in Photoshop at 970x808px size. This gives you assets that are large enough to display beautifully in all the IAB sizes. Follow the below instructions to import the 3 times larger size correctly to the 300x250 size in your IAB Pack. Before you upload, verify your active size(s) * Remove any unwanted layouts, keeping only the 300x250 active and selected
After uploading, adjust from pixels to percentages * Click the crosshairs to reset to 100%x100% * contain-> cover, text, anchors, locks, buttons Select the next size and verify your adjustments # Designing your Ad in the Fluid Ad Creator The Fluid Ad Creator is your hub for designing innovative, responsive ads with ease. This section will guide you through the tools, features, and workflows that make creating high-performing ads simple and efficient. ## Explore the Available Guides: ### Live Now
Interface and ToolsGet familiar with the Fluid Ad Creator interface. Learn where to find key tools and how to use them to bring your creative ideas to life./files/5tviDwh989Tu0zthju0z/pages/my7fV43l2gyzbKa9RrlR
Animation TimelineDiscover how to add motion to your designs using the animation timeline, with tools to create engaging transitions and effects./files/dd96MC3o86tx2ygg4gEj/pages/YLZsjG8NM0XsABWNkwAJ
### Coming Soon
ElementsExplore the core building blocks of your responsive ads with detailed instructions, tips, and tutorials for each element type, from design basics to rich media components./files/VdPsCGjtiKkGnRvWc8Nd
How to Use Formats and LayoutsLearn how to leverage ResponsiveAds’ formats and layouts to design ads that adapt seamlessly to various sizes and orientations./files/VdPsCGjtiKkGnRvWc8Nd
How to Use Fully Fluid™Master the unique capabilities of Fully Fluid™ formats to create dynamic, multi-size ads that fit any space perfectly./files/MNeAFxKqFqB4lU7Q0NyA
Check back soon for these updates as we expand this section to provide more detailed and practical insights. For now, start with the [**Interface and Tools**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interface-and-tools) page, or visit the rest of our User Documentation for additional resources. # Interface and Tools Understanding the Fluid Ad Creator ## Fluid Ad Creator Interface

Fluid Ad Creator in Studio 4

Reorganized with a new visual design for Studio 4, the Fluid Ad Creator allows you to create innovative, responsive ads, fast. This article will explain how to navigate to the different tools available in the Fluid Ad Creator. \
## **Header**

Header Section Highlighted in red

The header is used for navigation, help, and managing your whole creative. The specific controls can be seen in the image below:

Header Section Controls

### Help & Info When opened in the Fluid Ad Creator, there are different option available in this menu:

Fluid Ad Creator specific help & info menu options

#### New Features Guide * Guidance on recently added new features and how to find them * This is updated whenever larger changes are added in a release #### Onboarding Tutorial * Activates hotspots on the Fluid Ad Creator interface. * Click on the hotspots to see an explanation of the main areas of the tool and how to use them #### Keyboard Shortcuts * Access a list of the supported keyboard shortcuts in the Fluid Ad Creator. * You can also modify the shortcut keys if they don’t match your personal preference. The change is only applied to your account. ## Top Toolbar

Top Toolbar shown in red

The top toolbar contains controls which allow you to import PSD files, copy layouts & styling, zoom, undo/redo, and preview your creative on different device sizes.

Top Toolbar Controls

On the left of the top toolbar are the 'PSD Options' and 'Copy' tools. Most important for new users is the PSD Options button, where you will find all the tools for importing designs from Photoshop.

PSD Options Dropdown List

### PSD Options: 1. Add Photoshop PSD File as a Group of Images & Text (Beta) 2. Add Photoshop PSD File as a Group of Images 3. Replace or create elements with layers from PSD 4. Replace images with layers from PSD *** ### Copy Tools The **Copy Tools** in the Fluid Ad Creator help streamline your workflow by allowing you to reuse designs, layouts, and styling across multiple sizes and formats. These **Copy Layout** and **Copy Styles** tools are now located in the **top toolbar** in the Fluid Designer canvas. The **Copy Element Settings** button is visible on the edge of the marquee when an element is selected. Use these tools to quickly propagate design consistency throughout your creatives while saving time:

The Copy Layout (left) and Copy Style (right) buttons

The Copy Element Settings button

#### Copy Styles Use **Copy Styles** to instantly apply style properties from the current size to **all other sizes in all formats**. This tool is perfect when you’ve finalized your visual design in one size and want that style to be reflected across the board. **When to Use It** * You've styled a **CTA button** or **text element** and want to use the same colors, fonts, or effects in every layout. * You’ve defined your **brand color palette**, **shadow**, or **border style** and want consistency across all sizes in the creative. **What Gets Copied** **Copy Styles** transfers specific visual styling properties of each element, depending on the type of element: **For Text Box and Button (HTML) elements:** * Font * Font style (e.g., bold, italic) * Font color **For All visual elements:** * Background color * Border styles * Shadow styles **How to Use It:** 1. Ensure the current size has the visual styles you want to reuse. 2. Click the **“Copy all styles to other sizes”** icon in the **right-hand toolbar**. 3. The styles will automatically be applied to matching elements across **all other sizes and formats** in the creative. #### Copy Layout Use **Copy Layout** to apply the full layout structure of your current size to one or more other sizes in your creative. This includes all element positions, groupings, anchoring, and overall arrangement—effectively allowing you to design once and reuse that design across different aspect ratios. **When to Use It** * You’ve finished designing one size and want to use it as a base for other sizes. * You want to ensure consistent placement of elements (e.g., headline, logo, button) across multiple breakpoints. * You’re creating variations based on a master layout. **What Gets Copied** When using **Copy Layout**, the following layout-related properties are applied to your selected destination sizes: * Element positions * Anchoring and alignment * Element group structure * Size and constraints * Element order (Element List hierarchy) {% hint style="info" %} Unlike **Copy Styles**, **Copy Layout** focuses on structure and positioning, not visual styling. {% endhint %} **How to Use It:** 1. Open the size/layout you want to copy **from**. 2. Click the **“Copy Layout”** icon in the **right-hand toolbar**. 3. A popup will appear where you can select the **destination sizes** you want to apply the layout to. These can be: * Other sizes within the same format * Sizes in other formats 4. Confirm your selection by clicking **Copy Layout**. {% hint style="info" %} This will overwrite the layout in the selected sizes, so ensure you’re not replacing any layouts you wish to keep. {% endhint %} 5. After using **Copy Layout**, you can further customize each layout by adjusting elements or applying specific styles per size as needed. #### Copy Element Settings Coming soon *** ### Reset Zoom Button Another important button is the Reset Zoom button in the middle section. On first click, this button will set the zoom level to 100%, so you can see exactly pixel perfect what the ad will display as. A second click will set the ad at the biggest size that fits in your canvas

Zoom reset button

\ Always assume that a “crosshairs” icon button will reset the object to a sensible default - we use it across the UI for often used reset actions. Only the reset button above currently has two different click actions it toggles between. ## **Left Sidebar**

Left sidebar shown in the red circled area

This panel shows what is included in your creative and the tools for managing them. It includes the Layouts and Formats expandable drawers, as well as the Elements Controls & list. ### Elements Controls Above the list of elements are a set of controls:

Element List Controls

From left to right: 1. **Duplicate Selected Element-** clicking this will duplicate the selected element 2. **Create new group-** Clicking this will group the elements you have selected into a new group 3. **Delete Selected Element-** This will delete the selected element 4. **Search Element -** This will search your element list for a specific element. Can be searched by name or ID. 5. **Add new Element-** clicking this will show a list of elements which can be added into your creative. To learn more about different Element types, read the page ['Elements'.](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/elements) {% hint style="info" %} **Note:** Groups are primarily for organizing layers. Clicks and hovers are tracked on the **elements (layers)** inside, not the group itself. For a detailed explanation of how analytics events work with groups and layers, see [Groups, Layers, and Analytics Tracking.](/analytics/understanding-and-setting-up-engagement-analytics) {% endhint %} ### Elements List Most important for new designers is the elements list, where you see the design elements of your creative. Add new elements from the + button.

Elements List Expanded in the Left Sidebar with the selected element in the creative highlighted in the list

### Eye Icons

Element list with eye icons on far left

The eye icons on the left of the elements in the list are very important - these control what is loaded into the selected size. If the eye is greyed out (see image above) then the element is not going to be a part of that size in the final ad. It will not be visible in the editor when selected, except as a small indication on the top left corner of the ad on the canvas.

Hidden elements show this control on the canvas when slected in the element list


### Formats Panel The Formats panel shows which size is selected for design. A bold blue label means that this size is currently shown on the canvas. A blue label indicates the active size, which is used to create new layouts and any in-between sizes for the format. A grey label means the size is not included or active. However, you can click on a grey size to activate it, and the app will generate a new design for it based on the closest matching existing layout.

Formats list with Bold Blue (Shown on Canvas), Blue (Active) and Grey (not active) Labels shown


## Right Sidebar The right sidebar has two tabs which can be used to display either the design tools or the creative setup.

Right Sidebar

### Design Tab The Design panel contains all the styles and settings that are applied only to the active size. Use this to define sizes, positions, colors, etc for a specific size. For Figma users, the Design panel should be pretty self explanatory to use. #### **Design Tab Controls:** Below is the design panel in the editor. This controls shown and layout of these controls will change depending on the element type selected. This section will go through what the controls in this tab do.

The design tab tools in the Editor

#### Guidelines section

Guidelines section controls

1. Show/hide all guidelines temporarily 2. Toggle snapping to guidelines- this will turn on/off elements snapping to guidelines on the canvas 3. Add Horizontal guideline- this will add a horizontal guideline to the canvas 4. Add Vertical guideline- this will add a vertical guideline to the canvas 5. Manage guidelines- clicking this will launch the manage guidelines modal, where you can add and remove guidelines:

Manage guidelines modal

#### Alignment Section

Alignment controls

The controls in this section allow to to align an element to the different parts of the bounding box for that elements. From left to right the controls are: left align, center align, right align, top align, middle align, bottom align. #### Visibility Section

Visibility controls

1. This will control the opacity of the selected element. 2. This will turn on/off the visibility of the selected element. The grey number in the box above is the element ID. #### Position Section

Position controls

The **Position** controls allow you to set the exact placement of an element within your ad design. **X and Y Positioning** * The **X** and **Y** fields determine the element's position relative to its **group** (if inside one) or to the **ad/layout size** (if not grouped). * By default, positions are set in **percentages**, ensuring elements adjust dynamically across different sizes. * You can switch to **pixels (px)** for precise positioning. To do this, click on the 'px' button at the end of the input box. **Anchor Points** The **nine anchor points** let you decide **where** the position is calculated from. * **Default anchor:** Top-left corner. * **Example:** If you want an element to stay **20px from the top-right corner**, click the **top-right anchor**, set the units to **pixels**, and enter `20` for X and Y. * **Center anchors:** If an element is anchored to the center, it will always stay centered and cannot be moved elsewhere. **Why Use Anchor Points?** Anchor points help maintain **consistent layout and alignment** when the ad resizes: * **For responsive ads:** Anchor points ensure that elements stay correctly positioned, even at in-between sizes. * **For locked or pixel-sized elements:** The element will always maintain the set distance from the selected anchor, ensuring alignment with other content. By correctly setting anchor points, you ensure elements **stay in place, resize properly, and remain aligned across all sizes.** *** #### Size Section Depending on the element type which is selected, there are a number of different controls which will show in the size panel. The different controls you will see are explained below: **Width/Height** This can be set by either pixels or percentages by clicking on the percentage icon. **Lock/Unlock Proportions** When turned on, this will stop the image from distorting when resized. **Overflow** The **Overflow** setting applies to **Groups** and **Background** elements, determining how content that extends beyond their boundaries is handled. It offers three options: * **Visible** – Elements inside the group/background that extend beyond its bounds remain visible. * **Hidden** – Any content outside the group's defined area is clipped and not displayed. * **Scrollable** – Adds scrollbars, allowing users to navigate and view content that exceeds the group's size.

Width/Height, Lock Proportions and Overflow controls

**Fill/Cover/Contain** * **Fill** – Stretches the image/video to completely fill the container, ignoring its original aspect ratio. This may cause distortion if the container's aspect ratio differs from the media's. * **Cover** – Scales the image/video proportionally until it completely covers the container. Parts of the media may be cropped if the aspect ratio of the container is different. * **Contain** – Scales the image/video proportionally so that it fits entirely within the container. This ensures the entire media is visible, but may leave empty space if the aspect ratios don't match.

Fill, Cover, Contain Controls in size section

**Alignment Controls** These controls allow you to align text to the textbox it is contained within

Alignment controls in size section

**Focal Point** The **Focal Point** setting allows users to specify the most important part of an image or video. This affects how the media is positioned when using the **Cover** or **Contain** fit modes, ensuring that key content remains visible. * When set, the focal point remains centered as much as possible while the media resizes. * In **Cover** mode, this helps prevent important areas from being cropped out. * In **Contain** mode, it ensures the key part of the image/video stays positioned as intended within the available space. This is useful for keeping logos, faces, or other crucial elements in focus regardless of resizing or cropping.

Focal point in size section

**Padding Controls** These controls allow you to set the horizontal and vertical padding for an element. You can set it either by pixels or percentage by clicking on the px/% icon.

Padding controls in size section

**Textbox resizing** When a text box is set to **Wrap**, users can control how the box resizes when content or the container changes. There are three options: * **Fixed Size** – The text box maintains a set width and height. If the text exceeds the space, it may be clipped or require manual adjustments. * **Auto Size** – The text box expands or shrinks dynamically in both width and height to fit the text content. * **Auto Height** – The width remains fixed, but the height adjusts automatically to accommodate the text, ensuring all content remains visible without overflow. These settings help maintain design flexibility while ensuring text remains readable and properly formatted.

Textbox resizing in size section

*** #### Text The **Text** panel provides options for styling, resizing, and formatting textbox & html button elements. Below are the available controls: **Font & Style** * **Font Selector** – Choose a font from the available options. * **Style** – Adjust weight (Regular, Bold, Italic) and add underline. * **Max Size** – Set the maximum font size for the text element. **Resizing Options** * **Shrink** – Reduces text size if it exceeds the container, maintaining a single line if possible. * **Wrap** – Allows text to break onto multiple lines within the container. * **Wrap + Shrink** – Combines both behaviors: text wraps onto multiple lines but shrinks if needed to fit within the container. **Alignment & Spacing** * **Text Alignment** – Align text left, center, right, or justified. * **Vertical Alignment** – Align text to the top, middle, or bottom of the container. * **Line Height (%)** – Adjust the spacing between lines of text. * **Letter Spacing (px)** – Control spacing between characters. **Case Formatting** * **Aa (Titlecase)** – Converts all text to titlecase. * **AA (Uppercase)** – Converts all text to uppercase. * **aa (Lowercase)** – Converts all text to lowercase. **Truncate Text *****(Available only when Wrap is selected)*** * When enabled, truncates overflowing text with either an ellipsis instead of wrapping to a new line.

Text Controls

*** #### Background Controls These controls allow you to configure the background element type. You can choose the background type as well as selecting the colour used.

Background Controls

Background dropdown list

*** #### Border Controls The **Border Style** dropdown allows users to define the appearance of an element’s border. The available options are: * **None** – No border is applied. * **Solid** – A continuous, unbroken border. * **Dotted** – A border made of small dots. * **Dashed** – A border consisting of short dashes. * **Double Border** – Two solid borders with a small gap in between. * **3D Grooved** – Creates a carved, recessed effect. * **3D Ridge** – Similar to Grooved but appears raised instead of recessed. * **3D Inset** – Makes the element look embedded into the background. * **3D Outset** – Gives the element a raised appearance. These border styles help define the visual edges of an element and enhance design customization.

Border Control

Border Control Dropdown list

*** #### Effects The **Effects** panel provides interactive styling options for HTML buttons. These settings allow users to enhance button appearance and behavior. * **Shadow** – Adds a shadow effect to the button, creating depth and improving visibility. * **Hover State** – Enables styling changes when the user hovers over the button (e.g., color change, scaling, or shadow effects). * **Active State** – Allows styling changes when the button is clicked or pressed, providing visual feedback. These effects help improve user interaction and make buttons more visually engaging.

Effect Controls for HTML buttons

*** ### Setup Tab The Setup panel contains the settings that will target all of the sizes. These include things like Click throughs, triggered actions, micro animations and more.
### Bottom Bar **Add timeline animation and variants using the bottom bar** Turn on the toggle to activate animation for the selected size. Click the up icon to see the animation timeline controls and start adding animations. When adding animation, you should not try to change the designs you have set up for this size, so the Design panel is disabled.

Animation timeline shown in expanded bottom bar

Add new animations by adding an element to the timeline from the animation “film” icon in the elements list. Click the plus next to the element to start adding an animation. You can also add predefined animations to the selected element from the + icon. ## Beta Features ResponsiveAds also has a number of features in the Fluid Ad Creator which are still in Beta. To access these features you can turn them on and off from the Beta Features menu which is accessed by clicking your account dropdown in the header:

Beta Features in account dropdown

When you click on the Beta Features button, you will be taken to the page shown below. From here you can use the checkboxes to turn on and off the Beta Features you wish to use.

Beta Features page

To learn more about these Beta features, please contact your ResponsiveAds Customer Success Team member. # Interactions & Triggers Triggers define **what happens** in your ad when a user interacts, a media state changes, or the ad/page hits a condition.\ Use them to show/hide UI, navigate carousels, control video/audio, fire analytics, and more. *** ### Where to find triggers in the UI You’ll see trigger groups in the **Setup** panel: * **Element Triggers** (appear for every element) * **Click action** * **Mouse in/out action** * **Mouse in action** * **Mouse out action** * **Media Triggers** (appear when the selected creative includes media) * **Video** (Custom Video HTML, Vimeo, YouTube): * *Video playing action*, *Video paused action*, *Video ended action*,\ *Video time reached action*, *Video muted action*, *Video unmuted action*,\ *Unable to autoplay: action*, *Preview video started action*, *Preview video ended action* * **Audio**: * *Sound playing action*, *Sound paused action*, *Sound ended action* * **Other Triggers** * **Ad load action** (fires once when the ad loads) * **Component events** (e.g., *Playin Widget → Puzzle complete/incomplete*) Each trigger reveals an **Action picker** with the options below. *** ### Actions (what a trigger can do) and how to set them up #### 1) Show or hide an element Reveal or conceal any element (including groups, posters, controls). **Controls** * **Target**: *Select an element* (dropdown) * **Mode**: **Show** | **Hide** | **Toggle** * **Options** (where shown):\ *Automatically toggle for touchscreen devices* / *Disable this action for touchscreen devices* * **Delay**: seconds (and for *Video time reached* you can switch to **%**) *** #### 2) Micro-animation Apply a quick motion preset to any element (great for hover/tap feedback). **Controls** * **Target**: *Select an element* * **Type**:\ *Fade In/Out*; *Slide In/Out* (Top/Right/Bottom/Left); *Zoom In/Out*; *Scale In/Out*;\ *Rotate In/Out*, *Rotate*; *Wobble*, *Jump*, *Flash*, *Pulse*, *Shake*, *Tada*, *Heartbeat* > Note: Micro-animations don’t preview inside the editor canvas; check the **Preview** page. *** #### 3) Carousel navigation Control a **Carousel** element. **Controls** * **Carousel**: choose the Carousel element * **Action**: * **Next slide** / **Previous slide** * **Pause autoplay** / **Resume autoplay** * **Set slide** *(choose Slide ID)* * **Animate to slide** *(choose Slide ID)* * **Remove slide** *(choose Slide ID)* *** #### 4) Open/Close formats Control expandable formats from any trigger. * **Open/Close Pushdown** * **Open/Close Lightbox** * **Open/Close Sidekick**\ *Sidekick includes **Open direction**: Left | Center | Right* > Notes shown in the UI summarize format requirements and deployment behavior. *** #### 5) HTML5 Video controls (Custom Video element) Select the **Video** element and choose: * **Play HTML5 Video** * **Pause HTML5 Video** * **Restart HTML5 Video** * **Reset & Pause HTML5 Video** (seek to start and pause) * **Skip HTML5 Video to end** * **Mute HTML5 Video** / **Unmute HTML5 Video** * **Go to Full Screen HTML5 Video** **Video state triggers** you can listen to: * *Video playing / paused / ended* * *Video time reached* → **When**: **Every Video Play** | **Only on Autoplay** | **First Time Play**\ **Delay**: seconds **or** percentage of duration * *Video muted / unmuted* * *Unable to autoplay: action* (helpful to reveal a **Video Controls** overlay) * *Preview video started / ended* (use with **Preview/Low Power Mode** poster image) > **Vimeo / YouTube**: You get the same trigger group and action list, limited by each provider’s capabilities (play/pause/mute/fullscreen, etc.). *** #### 6) Animation timeline controls Drive your ad’s timeline animations. * **Play Animation** * **Pause Animation** * **Restart Animation** * **Seek Animation** → **Backward** | **Forward** + seconds *** #### 7) Audio controls Target any **Audio** element. * **Play Audio** * **Pause Audio** * **Restart Audio** * **Reset & Pause Audio** * **Seek Audio** → **Backward** | **Forward** + seconds **Audio state triggers**: * *Sound playing action* / *Sound paused action* / *Sound ended action* *** #### 8) Restart Playin Widget Reset a **Playin Widget** (e.g., puzzle) to its initial state. **Controls** * **Target**: *Select Playin Widget* **Component Events** (if a Playin Widget exists) * **Puzzle complete action** * **Puzzle incomplete action**\ (Both can fire any standard action—open URL, show/hide, analytics, etc.) *** #### 9) Set feed parameter Write a parameter into a connected element. **Controls** * **Target**: *Select an element* * **Parameter name** * **Parameter value** *** #### 10) Hide the ad Remove the ad from the page. **Controls** * **Animation**: **Hide Instantly** | **Fade Out** | **Slide Out** > **Hide the ad (Condé Nast)** is a specialized variant (no extra controls). *** #### 11) Add to calendar Create an event in the user’s calendar. **Controls** * **Calendar App**: *Google*, *Yahoo*, *iCalendar*, *Outlook*, *Office 365* * **Timezone** * **Start date / End date** * **Event Information**: *Title* (required), *Description*, *Organizer*, *Organizer email*, *Location* *** #### 12) Analytics & utility actions * **Open URL** (navigate to link) * **Custom Analytics Feed Event** — *Value*, *Additional Value*, *Additional Value 2* * **Custom Analytics Event** — *Value*, *Additional Value*, *Additional Value 2* * **Click-to-Call** — *Phone* (E.164 format, e.g., `+10002223333`) * **Add Hash Mark to URL** *(availability may be limited by account/config)* *** ### Which triggers appear on which elements? * **All elements** → Element Triggers (Click, Mouse in/out, Mouse in, Mouse out) + general actions (Show/Hide, Micro-animation, Open URL, Analytics, etc.) * **Video elements (Custom HTML, Vimeo, YouTube)** → All **Video** triggers and video control actions * **Audio elements** → **Sound** triggers and audio control actions * **Carousel Widget** → Carousel navigation actions (plus general actions) * **Playin Widget** → Component events (Puzzle complete/incomplete) + **Restart Playin Widget** * **Hot Spot** / **Buttons** / **Images** / **SVG** / **Text Box** / **Groups** → General actions (Show/Hide, Micro-animation, Open URL, Analytics, etc.) * **Scroll Element / App Canvas (iFrame)** → Commonly used as targets for Show/Hide and analytics > On each element’s page in **Elements**, you’ll also find a short **Supported Triggers for This Element** section linking back here. *** ### Practical recipes * **Show a CTA 5s into the first autoplay only**\ *Trigger*: **Video time reached action** → **When**: *First Time Play* → **Delay**: *5s* → **Show** CTA group * **Swap from poster to video when playback starts**\ *Video playing action* → **Hide** *Poster Image*\ *Video ended action* → **Show** *Poster Image* * **Mute on hover (desktop)**\ *Mouse in action* → **Mute HTML5 Video**\ *Mouse out action* → **Unmute HTML5 Video** * **Seek back/forward 10s on tap**\ *Click action on button* → **Seek Animation** or **Seek Audio** → *Backward/Forward 10s* * **Fire analytics when a puzzle completes**\ *Playin Widget → Puzzle complete action* → **Custom Analytics Event** (*value*: `puzzle_complete`) *** ### Tips & troubleshooting * If **Unable to autoplay** fires, use **Show/Hide element** to reveal a “Tap to Play” overlay or **Video Controls**. * **Micro-animation** doesn’t preview on-canvas; use the **Preview** page. * For **Video time reached**, use **%** when you want time-agnostic moments across varying durations. * **Hide the ad (Condé Nast)** and **Add Hash Mark to URL** may be restricted by environment/account; if disabled, they’ll appear without additional controls. *** ### See also * **Animation Timeline** (how to build motion that your triggers can play/pause/seek) * Element pages under **Designing your Ad → Interface and Tools → Elements**\ (each includes *Supported Triggers for This Element*, with links back to this page) # Elements Explore the core building blocks of your responsive ads with detailed instructions, tips, and tutorials for each element type, from design basics to rich media components. The Fluid Ad Creator offers a variety of elements that you can add to your responsive ads, enabling you to craft engaging and dynamic creatives. These elements are organized into categories such as Design Elements, Icon/Fonts/Social, Components, and Video/Rich Media, each serving a unique purpose in enhancing your ad's functionality and appearance. This page will guide you through each element type, their uses, and how to configure them. Each element also includes best practices, tips, and relevant instructional videos. *** ## **1. Design Elements** Design Elements form the foundation of your creative. They include basic visual and structural components that allow for extensive customization:
Cover image
Background (HTML)/files/MNeAFxKqFqB4lU7Q0NyA/pages/MB9PMVPjRocq6VXWqDZ0
Group Element (HTML/files/VdPsCGjtiKkGnRvWc8Nd/pages/f8dm13HepyTofmNHUNWI
Hot Spot Element/files/5tviDwh989Tu0zthju0z/pages/pYu6NwlW6UjBQOwUj91e
Scroll Element/files/dd96MC3o86tx2ygg4gEj/pages/PFACAMURghRpzWddW6St
Image (PNG, JPEG, GIF, SVG)/files/VdPsCGjtiKkGnRvWc8Nd/pages/MkjuCQL7pC0KwFLmbzje
SVG Element (Inline, HTML)/files/MNeAFxKqFqB4lU7Q0NyA/pages/f1a9aBJLGOGwTeF6l7sx
*** ## **2. Icon/Fonts/Social** These elements are designed to help you add buttons, text, and social media functionality to your ads:
Cover image
Button (HTML)/files/MNeAFxKqFqB4lU7Q0NyA/pages/khVT93DOA4Z7QWGhECW1
Button (Image)/files/VdPsCGjtiKkGnRvWc8Nd/pages/b9SjCRRRDVkwtz8w17Rp
Text Box (Web fonts)/files/5tviDwh989Tu0zthju0z/pages/Ya4rlOZsKriBhtgDyC62
*** ## **3. Components** Components provide advanced interactive features to make your ads stand out. These elements are ideal for adding functionality and engagement:
Cover image
App Canvas (iFrame)/files/5tviDwh989Tu0zthju0z/pages/HNFqRVlrhims80tlSZ5X
Carousel Widget/files/VdPsCGjtiKkGnRvWc8Nd/pages/3Iopd1IccyRq6cdalpy4
*** ## **4. Video/Rich Media** Video and rich media elements help you integrate dynamic and engaging content into your ads. These elements support a variety of playback options and settings:
Cover image
Video/files/VdPsCGjtiKkGnRvWc8Nd/pages/NxNI1vBTqUGv2p2GkIQX
Custom Video (HTML)/files/MNeAFxKqFqB4lU7Q0NyA/pages/lZRnK5KH3XhIO5uES7yo
Youtube/files/5tviDwh989Tu0zthju0z/pages/4075sRKBZipNSfEzqPv2
Vimeo/files/dd96MC3o86tx2ygg4gEj/pages/TJ237Vre3sMAmaUZPkQQ
# Background (HTML) ### **Background (HTML)** **How to Add and Configure:** * Drag the "Background" element from the Design Elements section onto the canvas. * Use the configuration panel to select colors, gradients, patterns, or images as your background. * Adjust the layer settings to ensure the background doesn’t overlap other elements. **Best Practices & Tips:** * Keep the background simple to avoid distracting from the main content. * Use high-resolution images to maintain visual quality. **Video Tutorial:** \[Background Configuration Video] # Group Element (HTML) ### **Group Element (HTML)** **How to Add and Configure:** * Select multiple elements on the canvas and choose "Group" from the toolbar. * Configure the group’s properties, such as alignment and padding, in the configuration panel. **Best Practices & Tips:** * Group elements that you want to move or resize together. * Use grouping to maintain consistent spacing between elements. **Video Tutorial:** \[Group Element Video] # Hot Spot Element ### **Hot Spot Element** **How to Add and Configure:** * Drag the "Hot Spot" element onto the canvas. * Configure the trigger action (e.g., navigation, pop-up) and link destination in the properties panel. **Best Practices & Tips:** * Place hotspots strategically to guide user interaction. * Test the functionality of each hotspot to ensure accuracy. **Video Tutorial:** **Setting up Clickthroughs for Videos using Video Hotspots** {% embed url="" %} {% hint style="info" %} **Tip:** Hotspot clicks are tracked on the hotspot layer, not the group container. Groups may still register hover events on desktop. To avoid duplicate events, enable [**Suppress Analytics Events**](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/interactions-and-triggers#id-12-analytics-and-utility-actions) on the group. Learn more in [Groups, Layers, and Analytics Tracking](/analytics/understanding-and-setting-up-engagement-analytics). {% endhint %} # Scroll Element ### **Scroll Element** **How to Add and Configure:** * Drag the "Scroll" element onto the canvas. * Use the properties panel to define the scrollable area’s dimensions and content. **Best Practices & Tips:** * Avoid making scrollable areas too small to ensure usability. * Use scrolling to present secondary content, like terms and conditions. **Video Tutorial:** \[Scroll Element Video] # Image (PNG, JPEG, GIF, SVG) ### **Image (PNG, JPEG, GIF, SVG)** **How to Add and Configure:** * Drag the "Image" element onto the canvas. * Upload an image file and adjust its size, position, and alignment in the configuration panel. **Best Practices & Tips:** * Optimize image file sizes to reduce load times. * Use descriptive alt text for better accessibility. #### **Video Tutorial:** How to Create Smaller size images using Image Renditioning In this video, Matt explains how to use Image Renditioning to reduce the file sizes of images in your ad. {% embed url="" %} # SVG Element (Inline, HTML) ### **SVG Element (Inline, HTML)** **How to Add and Configure:** * Drag the "SVG Element" onto the canvas. * Paste your SVG code into the configuration panel or upload an SVG file. **Best Practices & Tips:** * Use SVGs for logos or icons to ensure crisp visuals on any screen size. * Avoid overly complex SVGs that may slow down rendering. **Video Tutorial:** \[SVG Element Video] # Button (HTML) ### **Button (HTML)** **How to Add and Configure:** * Drag the "HTML Button" element onto the canvas. * Customize the button’s text, style, and action link in the configuration panel. **Best Practices & Tips:** * Use clear, actionable text on buttons. * Test button links to ensure proper functionality. **Video Tutorial:** \[Button Configuration Video] # Button (Image) ### **Button (Image)** **How to Add and Configure:** * Drag the "Image Button" element onto the canvas. * Upload a button image and configure its action link. **Best Practices & Tips:** * Use visually distinct button designs to draw attention. * Ensure the image button contrasts well with the background. **Video Tutorial:** \[Image Button Video] # Text Box (Web fonts) ### **Text Box (Web Fonts)** **How to Add and Configure:** * Drag the "Text Box" element onto the canvas. * Use the text editor to type and format text, selecting from various web fonts. **Best Practices & Tips:** * Keep text concise and readable. * Use a font size and color that stands out against the background. **Video Tutorial:** \[Text Box Video] # App Canvas (iFrame) ### **App Canvas (iFrame)** **How to Add and Configure:** * Drag the "App Canvas" element onto the canvas. * Paste the iFrame URL into the properties panel and adjust the dimensions. **Best Practices & Tips:** * Use App Canvas sparingly to avoid overwhelming users. * Ensure the iFrame content is mobile-friendly. **Video Tutorial:** \[App Canvas Video] # Carousel Widget ### **Carousel Widget** **How to Add and Configure:** * Drag the "Carousel Widget" onto the canvas. * Add images or slides and configure transition effects in the properties panel. **Best Practices & Tips:** * Limit the number of slides to maintain user attention. * Use clear navigation controls for the carousel. **Video Tutorial:** \[Carousel Widget Video] (Repeat similar sections for other components, each with specific instructions, tips, and videos.) # Custom Video (HTML) ### **Custom Video (HTML)** **How to Add and Configure:** * Drag the "Custom Video" element onto the canvas. * Upload your video file or paste the video source URL. Configure playback settings like autoplay and looping. **Best Practices & Tips:** * Keep video lengths short to maintain engagement. * Enable subtitles for accessibility. **Video Tutorial:** \[Custom Video Video] # Vimeo ### **Vimeo** **How to Add and Configure:** * Drag the "Custom Video" element onto the canvas. * Upload your video file or paste the video source URL. Configure playback settings like autoplay and looping. **Best Practices & Tips:** * Keep video lengths short to maintain engagement. * Enable subtitles for accessibility. **Video Tutorial:** \[Custom Video Video] # Youtube ### **Youtube** **How to Add and Configure:** * Drag the "Custom Video" element onto the canvas. * Upload your video file or paste the video source URL. Configure playback settings like autoplay and looping. **Best Practices & Tips:** * Keep video lengths short to maintain engagement. * Enable subtitles for accessibility. **Video Tutorial:** \[Custom Video Video] # Video ### Video Video elements in ResponsiveAds let you embed rich motion content in your creatives, supporting features like autoplay, loop, mute, and responsive behavior. You can use different video configurations for each size or breakpoint in your ad to ensure optimal playback across devices. #### Adding and Configuring a Video 1. **Add a Video Element** * Click **“+ Add Element”** and choose **Video** from the list. * The video will appear on the canvas and in the element list. 2. **Upload or Select a Video** * Open the **Setup** tab for the video element. * Upload a new MP4 file or select one from your existing library. * You can also enter a direct video URL. 3. **Set Playback Behavior** * Options include: * **Autoplay** * **Mute** (required for autoplay on most browsers) * **Loop** * **Show Controls** * **Click to Play** 4. **Responsive Behavior** * Videos can be turned on or off for different breakpoints. * Layout, size, and visibility are managed like any other element and can be customized per size. #### Video Renditions When a video is uploaded, ResponsiveAds automatically generates several **renditions** — alternate versions of the video at different resolutions and file sizes. You can choose which renditions to use for better performance and broader compatibility. **What Are Renditions?** A **rendition** is a compressed version of the original video file, optimized for different screen sizes, connection speeds, or browser requirements. **Why Use Renditions?** * **Autoplay Compatibility**: Browsers like Chrome may block autoplay for videos larger than \~3.3MB. * **Performance**: Smaller renditions load faster, improving the user experience. * **Fallback Support**: Multiple renditions increase the likelihood that at least one video can autoplay successfully. **How to Manage Renditions** 1. Select a video element and open the **Setup** tab. 2. Click into the **Video Renditions** panel. 3. You will see a list of automatically generated renditions, including: * Resolution (e.g., 1200×700) * File size * A status indicator (e.g., red if autoplay is not supported) 4. Enable or disable renditions based on your requirements: * **Enable** lighter versions (under 3MB) for autoplay support. * **Disable** heavier ones unless needed for specific use cases (like high-resolution desktop). {% hint style="info" %} Tip: You don’t need to manually compress your video before uploading. ResponsiveAds handles rendition generation automatically. {% endhint %} #### Best Practices for Video Elements | Goal | Recommendation | | -------------------- | ------------------------------------------------------------------------ | | Ensure autoplay | Enable at least one rendition under 3.3MB. | | Support all sizes | Add different videos or enable/disable visibility for breakpoints. | | Improve load times | Use the smallest effective rendition. | | Mobile optimization | Favor vertical formats (e.g., 9:16) and low file sizes. | | Desktop optimization | Use landscape formats (e.g., 16:9) and allow slightly larger renditions. | | Avoid video blocking | Always set videos to **muted** when using autoplay. | {% hint style="warning" %} #### Notes on Export Formats * **Stripped/Lightweight HTML5 exports** may not support video playback. [Read more](/deploying-ads/html5-export) * Always preview your creative using the **Preview tab** to ensure your selected renditions behave as expected across breakpoints. {% endhint %} *** ## Video Optimization for Ads Videos are a powerful way to enhance your ads, but they need to be optimized for both performance and compliance. Chrome flags any creative that exceeds the **“heavy ad” threshold** (4 MB in 30 seconds), so ResponsiveAds recommends preparing all video assets carefully before uploading. This guide covers the **recommended specs** and a **step-by-step workflow** using Adobe Media Encoder to create 15- and 30-second videos at 960×540 under 3.5 MB—optimized for use in ResponsiveAds. *** ### Recommended Specs * **Source file:** 1920×1080 uncompressed MOV (master) * **Target size:** ≤ 3.3 MB (safe margin below Chrome’s 4 MB limit) * **Duration:** 15s or 30s * **Resolution:** 960×540 * **Frame rate:** Match source * **Format:** H.264 (MP4) *** ### Step-by-Step Workflow (Adobe Media Encoder) 1. **Start with an HD source file** * Use a 1920×1080 uncompressed MOV master file. * Open the file in **Adobe After Effects**. 2. **Resize in After Effects** * Create a new composition at **960×540**. * Resize the 1920×1080 video to fit within that space. * Keep the same frame rate as your source. 3. **Export with Adobe Media Encoder** * Format: **H.264 (MP4)** * Preset: *Match Source – High Bitrate*, then customize as follows: **Video Settings** * Resolution: 960×540 * Frame Rate: Match source * Field Order: Progressive * Aspect: Square Pixels (1.0) * Profile: High * Level: 3.1 * Bitrate Encoding: VBR, 2-pass * Target Bitrate: **0.7 Mbps** * Max Bitrate: **1.0 Mbps** * Render at Maximum Depth: ON * Use Maximum Render Quality: ON **Audio Settings** * Codec: AAC * Sample Rate: 44.1 kHz * Channels: Stereo (or Mono if dialogue only) * Bitrate: 96–128 kbps (128 kbps if music-heavy, 96 kbps if just voice) **Multiplexer** * Format: MP4 * Standard settings *** ### Bitrate and File Size Guide To stay under 3.3 MB for a 30-second video: * **Target file size:** 3.3 MB = 26.4 Mb * **Duration:** 30 seconds * **Target bitrate:** ≈ 0.88 Mbps total * Video: \~700 kbps * Audio: \~128 kbps *** ### Tips for Best Quality * **VBR 2-pass** is crucial: first pass analyzes, second pass allocates bits more intelligently. * **Max Render Quality** reduces scaling artifacts when resizing. * **Static/talking head videos:** lower Max Bitrate to 0.8 Mbps, allocate more to audio. * **Motion-heavy videos:** keep video at 0.7–0.75 Mbps, trim audio to 96 kbps. * **Keyframe distance:** set GOP ≈ 60 for 30 fps (≤2× frame rate) for smoother playback. *** ### Output Expectation * **File size:** \~3.2–3.4 MB (depending on complexity) * **Quality:** optimized for sharp playback at 960×540 * **Compliance:** safely under Chrome’s 4 MB / 30s “heavy ad” threshold *** {% hint style="success" %} **Pro tip:** Add this workflow to your production checklist when preparing any ad creative that includes video. {% endhint %} # How to Use Formats and Layouts When creating ads with Responsive Ads, it's essential to understand formats and layouts, as they play different roles in your ad design. Let's break it down in simple terms: ## **What Are Formats?** **Formats** determine the overall **size** and **behavior** of an ad. Think of a format as the *container* that defines how your ad will look and act on different devices and screens. ### **Key Points about Formats** * **Size:** Formats include specific dimensions, like 300x250 or 728x90. These are the physical sizes of the ad on the screen. * **Behavior:** Formats also control how an ad behaves when the screen size changes or when users interact with it. ### **Types of Formats** 1. **Standard IAB Formats:** * These are fixed sizes, commonly used across websites. * Examples: * **970x250** (Billboard) * **300x250** (Medium Rectangle) * **160x600** (Wide Skyscraper) * **728x90** (Leaderboard) 2. **Responsive Formats:** * These are flexible and can adapt to multiple sizes and layouts. * **Example:** The **Fully-Fluid™ Format** can adjust to different sizes like 1920x1080 or 480x1920 in one format. ### **Behavior Examples** * **Flexible-Height Fluid:** Keeps its shape but resizes proportionally. It’s like stretching a rubber band: the shape stays the same, but it gets bigger or smaller depending on the space.

Flexible Height Fluid

* **Fixed-Height Fluid:** The height remains constant while the width can change. Imagine a banner that stretches horizontally but stays the same height.

Fixed Height Fluid

* **Fully-Fluid™:** Both the height and width can change, allowing the ad to fit any space.

Fully Fluid

## **What Are Layouts?** **Layouts** refer to how the elements inside the ad (like text, images, and buttons) are arranged. If the format is the *container*, the layout is the *contents* inside it. ### **Key Points about Layouts** * **Arrangement:** The position of images, logos, text boxes, etc., within the ad. * **Settings:** Includes properties like position, size, and anchoring of each element. * **Time-Based Arrangement:** How elements appear or animate over time. ### **Using Templates for Layouts** * **Pre-Made Templates:** These are ready-to-use layouts that you can choose from, saving you time and effort. * **Custom Templates:** You can create and save your own layouts as templates for future use. ## **Why Are Formats and Layouts Important?** * **Consistent Design:** They ensure your ads look good across all devices. * **Flexibility:** Responsive formats adapt to different screen sizes, maximizing your ad's reach. * **Efficiency:** Using templates allows you to create ads quickly without starting from scratch each time. ## **How to Choose the Right Format and Layout** 1. **Understand Your Audience:** Know where your ad will be displayed and what devices your audience uses. 2. **Select the Format:** Choose a responsive format if your ad needs to be flexible or a standard IAB format for specific sizes. 3. **Design the Layout:** Arrange elements to convey your message effectively. Use templates for a quick start or customize your own layout for a unique look. *** {% hint style="info" %} ### **Quick Reference** * **Formats = Container:** Determines size and behavior (e.g., Flexible-Height, Fixed-Height, Fully-Fluid™). * **Layouts = Content:** Arrangement and settings of elements inside the ad. * **Templates:** Pre-made or custom layouts to streamline ad creation. {% endhint %} ## Using Formats ## Using Layouts # How to Use Fully-Fluid Fully Fluid is the future in making truly Responsive Ads Formats determine the overall size and behavior of an ad. Think of a format as the *container* that defines how your ad will look and act on different devices and screens. Fully-Fluid™ is a type of format, whose layouts are infinitely adaptable to a range of sizes. Fully-Fluid™ ads can also adapt to infinite layout arrangements; that is, the responsive nature of the ad allows it to automatically choose from an array of layouts composed of different elements that you created. ![](https://support.responsiveads.com/hc/article_attachments/360080965131) ### Design Without Breakpoints Previous iterations of responsive ad design relied on breakpoints to tell the ad server which preset ad layout to choose. **Breakpoints are exact points, width and height, that must be set up in advance**, to trigger the correct layout choice from an ad server. However, a Fully-Fluid™ design **doesn’t require breakpoints**. #### How it works * Fully-Fluid™ format **bundles a group of layouts** in a range of sizes and deploys them as a unit by using the different aspect ratios of those layouts. * Bundles include a **minimum of 3 layouts** (horizontal, square and vertical shapes) that are the three core aspect ratios. * ResponsiveAds has set, by default, **five key shapes**: a max size **horizontal (10x1)**, **square (1x1)**, **vertical (1x4)**, **landscape (16x9)**, and **portrait (10x16)** shape. * This **range of sizes** and styles can be deployed selectively into different ad slots using **a single tag**. * Once deployed, the ad slot from the first-party ad server will be called upon to indicate **which size from the packaged group** should be delivered. ### Layouts in Fully-Fluid™ **Layouts are the precise arrangement of images, text elements, logos, and other elements in a given ad unit** (Creative), related to a given size (width x height). Responsive ad displays choose which layout of a Creative is appropriate for a given context. #### Key design concepts To design effectively in the Fully-Fluid™ format, elements must be anchored, contained, locked, and grouped effectively. **Anchoring Elements** **Anchoring** elements pins an element to the canvas at one of nine fixed points. To see a demonstration of element anchoring, watch [this RAD Academy video](https://www.youtube.com/watch?v=xmLs2dG6RvU\&list=PLoKRmtEBrymyiYOIgRhhEmMcBMCIjhTPV\&index=7). **Containing Elements** **Containing** an element sets that image or icon within a container, which lets you manipulate that element in a way that prevents the element from skewing when the fluid format shifts. A continued element can fill or cover its container. For more detailed information, see: *Elements - Containing (coming soon)*. **Locking Elements** **Locking** an element maintains its proportion within its container. For more detailed information, see: *Elements - Locking (coming soon).* **Grouping Elements** **Grouping** elements lets you to manipulate diverse elements as a single set, which lets you standardize applied actions across all elements in the group. For more detailed information, see: *Elements - Grouping (coming soon).* ### Fully-Fluid Templates You can also use a pre-loaded Templates, whose ratios are set using the best practices for Fully-Fluid design. To better understand Templates, see *Templates Overview (coming soon).* ### Applying Fully-Fluid™ format The **range of sizes** and styles can be deployed selectively into different ad slots using **a single tag**. Once deployed, the ad slot from the first-party ad server will be called upon to indicate which size from the packaged group should be delivered. Due to the infinite range of variants available, the exact, clean, correctly sized layout will be the one seen by the user at any given time. #### Emma's Notes- Fully-Fluid design best practices
The key difference when doing Fully-Fluid design is that you are defining a set of sizes relative to each other, instead of just single sizes that can shrink or grow proportionally to fill a slot.
The ad will adapt according to the rules you set up, so that it changes fluidly between each size, instead of being fixed to what you set up in a specific size.
As all the elements added to your creative are available for all your sizes (instead of duplicated layers) you need to approach the design process from the perspective of generalizing the design settings to be valid for all sizes using that aspect ratio layout * Use relative units - % percentages - to define your designs whenever possible * Set background images to “cover” mode and use a focal point for automatic cropping * Image renditions create automatic selection of the smallest size of image with highest needed image quality * Text elements use the same text content in each size, but can be styled differently for each defined size * Copy functionalities are used (if needed) to explicitly share (changed) design settings from one size to another These core principles are what makes it possible for our tool to generate such an astounding wealth of different types of ads. After you’ve got comfortable with these differences, expanding your usage of our tool is quite easy, and we are happy to support you with Brunner-specific templates and docs.
# Animation Timeline The Animation Timeline lets you create animations by changing element’s position, size, opacity, and rotation over time. This guide walks you through how to add, manipulate, and customize animations using the timeline. *** ## Understanding Animation Blocks: The Animation Timeline is built around **animation blocks**, which represent how an element’s property changes over time—for example, moving position, changing opacity, resizing, or rotating. These animation blocks are **always contained within a group**, and the type of group determines how much you can customize the animation.

The Animation Timeline with Animation Blocks

### Types of Animation Groups Animation blocks are never standalone—they always belong to a group, and there are two main types of groups: #### **1. Custom Groups** * Created by the user. * You control all aspects of each block, including timing and property values. * Blocks inside the group can be individually selected, moved, resized, or deleted. * You can create a Custom Group from scratch or by converting a Pre-made or Saved Group (see below).
#### **2. Pre-made and Saved Groups** These are predefined collections of animation blocks, bundled together for quick reuse: * 🪄 Pre-made Groups * Provided by the platform out of the box. * Include common animations like "Fade In", "Slide Up", or "Bounce". * Available immediately to all users.
* 💾 Saved Groups * Created by the user by saving a custom animation group. * Can be reused across other elements or creatives. {% hint style="info" %} **Note:** Pre-made and Saved Groups cannot be edited directly. However, you can convert them into a Custom Group to unlock full editing capabilities. {% endhint %}

This animation timeline contains pre-made and saved animations, as well as some regular animation blocks

### What is an Animation Block? An animation block defines the transition of a single property of an element (e.g., position, rotation) from a **Start Value** to an **End Value** over a set duration. **Each block contains:** * Start Value: The property's state at the beginning of the block. * End Value: The property's state at the end of the block. * Easing: Sets the speed of the transition between the start and end values. * Duration: How long it takes for the transition to occur. * Start Time: Where on the timeline the animation begins. {% hint style="info" %} **Example:** An Opacity block would fade an element in from Opacity: 0% to Opacity: 100% with “Linear” easing over 1.5 seconds starting at 1 second into the timeline. {% endhint %}

Animation block for Opacity change with Linear easing

*** ## How to Use the Animation Timeline: The next 10 sections explain how to make best use of the ResponsiveAds animation timeline functionality. ### 1. Adding/Removing Elements from the Timeline #### Adding Elements to the Timeline Before animating, you need to add an element to the timeline: 1. Select an element from the list (e.g., text, image, shape). 2. Click the Film icon. 3. The selected element is now available in the Animation Timeline.

Adding elements to the Animation Timeline

#### Removing Elements from the timeline To remove an element from the animation timeline: 1. **Click the filmstrip icon** next to the element’s name in the Element List. 2. A pop-up will appear titled **“Remove from Timeline”**. * By default, the **currently selected size** will be chosen. This means the element will be removed from the animation timeline for that size only. 3. If you want to remove the element from other sizes as well, **select additional sizes** from the list. 4. Click **“Remove from Selected Timelines”** to confirm and apply the changes. *** ### 2. Working with Pre-made Animations #### Adding Pre-made Animations * Click the “+” button next to the element you want to animate. * Select an animation from the comprehensive Pre-made list based on your needs.

Choosing a pre made animation

#### Manipulating Pre-made Animation * Move: Drag the group to adjust its start time. * Resize: Drag the group edges to change duration (this will proportionally resize all animation blocks). * Copy–Paste: Duplicate the group within the same element or apply it to other elements.

Adjusting a pre made animation

{% hint style="info" %} 🔒 **Note:** You cannot change the values of individual blocks within a Pre-made group. {% endhint %} *** ### 3. Creating Custom Animations You can create custom animations by manually adding animation blocks to an element. These blocks define how an element's properties (like position or size) transition over time. Custom animations can be added in several ways: #### **a. Using the “+” Button** 1. Click the + button next to the element you want to animate. 2. Select the property you wish to animate — such as Position, Size, Opacity, or Rotation. 3. A new animation block will appear at the current playhead position with a default duration of 1 second (this can be adjusted later). 4. The block’s Start and End values will initially match the element’s current design state — no visible animation will occur until you change one of these values. {% hint style="info" %} 💡 **Tip:** Move the playhead to your desired start time before adding the block. {% endhint %}

Creating a custom animation

#### **b. Using On-Canvas Actions** You can also create custom animations by interacting directly with elements on the canvas: * Dragging an element → creates a Position animation * Resizing an element → creates a Size animation * Rotating an element → creates a Rotation animation
These actions automatically generate an animation block at the current playhead position. **How values are assigned:** * The Start value is based on the on-canvas change (e.g., the position you drag to). * The End value defaults to the element’s original design state. {% hint style="info" %} This approach is ideal for creating “**animate-in**” effects — where the element transitions from an altered state into its final designed appearance. {% endhint %}

Dragging an element on the canvas to create an animation

#### **c. Double-clicking Timeline Rows** * Double-click a settings row (e.g., Position) in the timeline to add an additional block.\

Double clikcking on a row to create a new block at the playhead

*** #### Changing Start and End Values **Option 1: Top Bar Inputs** * Use input fields above the timeline to set specific values (e.g., position, size, opacity).
**Option 2: On the Canvas** * Move the playhead to the start of the block → adjust the element → sets Start state. * Selecting the block always moves playhead to the start position\
* Move the playhead to the end of the block → adjust again → sets End state. * Moving (dragging) the playhead to the start or to the end of the block will snap nicely to the exact position

Playhead at start of animation block

Playhead at end of animation block

*** #### Manipulating Animation Blocks * Move: Drag a block to adjust its start time. * Resize: Drag the block edges to change duration. {% hint style="info" %} **Tip:** adjust the duration of all the blocks together by resizing the Custom group (this will proportionally resize all animation blocks). {% endhint %} * Copy–Paste: Duplicate blocks within the same element or apply them to other elements.\

Moving & resizing animation blocks

*** ### 4. Saved Animations Save custom animations for reuse: #### Saving 1. Select an entire Custom group or several Animation blocks you want to save. 2. Click Save, name your animation, and confirm.
{% hint style="info" %} **Note:** Your selection is now saved and you can find it in the list of Saved animations under the “+” button. {% endhint %}

Step 1- Select group you wish to save and click 'Save'

Give your new animation a name

The animation you saved is now available in the list of saved animations

#### Using Saved Animations Saved animations are used in the same way as [Pre-made animations](#id-2.-working-with-pre-made-animations). *** ### 5. Customize Pre-made or Saved Animations If you would like to change a selected Pre-made or Saved animation, click on the “Customize” button on the top bar. * This creates a separate Custom animation, leaving the original Pre-made or Saved animation unchanged. * You can now adjust values of individual animation blocks without affecting the original. * Save your changes as a new Saved animation if needed. * Delete the old version of a Saved animation if no longer needed.

Selecting and customizing a pre made animation

*** ### 6. Controlling Time The **Playhead** indicates the current point in time in the animation. #### Moving the Playhead * **Drag** the playhead to move through the timeline * Playhead **snaps** to the start/end of blocks and groups. * **Type a time** to jump directly. * Click on the timeline to move the playhead. * Clicking on the whole numbers puts the playhead at the exact second position (1sec, 2sec etc.)

Moving the playhead by dragging, typing and clicking on the timeline.

#### Timing Animations * New blocks are inserted at the current playhead position when: * You click the + button * You make on-canvas changes * You double-click a row in the timeline

Adding new animation blocks at the playhead

{% hint style="info" %} *Pro-tip* **Reverse Snap** If you want to move or resize your animation block to certain time: * Select that block * Type in exact seconds to position the needle * Move or resize the block and it will snap to the needle {% endhint %}

Using a Reverse Snap to adjust an animation block

#### Adjusting Duration * Drag an animation block’s or group’s edge to set how long the animation runs.\
*** ### 7. Navigating and Zooming the Animation Timeline The animation timeline gives you full control over how you view and navigate your animation. Here’s how to work with it effectively: **Playback Controls** * **Play / Pause:** Preview your animation in real time. * **Jump to Start:** Click the back arrow to return the playhead to the beginning (0 sec). * **Jump to End:** Click the forward arrow to move the playhead to the end of your animation.\
🕓 **Animation Duration:**\ The total duration of the animation is automatically determined based on the end of the last animation block.

How to view the total duration of the animation

*** **Overview / Detailed view of all animations** You can collapse or expand all element timeline rows to simplify your view when working with many animated elements.

Overview vs detailed view of animation timeline

*** **Zooming and Scrolling the Timeline** Zooming helps you focus on specific parts of your animation or see the full sequence at a glance. * **Zoom In / Out:** Use the magnifying glass icons to zoom in or out. Each click adjusts the timeline scale by 1 second. * **Scroll:** When zoomed in, use the horizontal scrollbar to move across the timeline and inspect animation blocks at different time points. * **Slider:** Drag to zoom more precisely. * **Reset Zoom:** Click this button to fit the entire animation into the visible timeline area.\

Zooming & scrolling the animation timeline

*** ### 8. Working with Other Creative Sizes Animations you create are applied only to the currently selected size.

Animation only applied to the selected size (shown in red box)

If you want other sizes to be animated differently, go to the next size and start creating your animations. If you need to copy created animation across multiple sizes, you have two options:\
**Option 1: Copy the Entire Animation Timeline to Other Sizes**\ **This function copies all animations for all elements.** 1. Click the “Copy animation from size to size” button. 2. In the pop-up window, select the target sizes and confirm your selection. 3. Play the animation in the selected sizes to ensure it looks as expected, and adjust as needed.

Copy animation from size to size button

**Option 2: Copy Animations for Specific Elements**\ **This function lets you copy animations for specific elements only.** 1. Select the element(s) whose animations you want to copy. 2. Click the “Copy element animation from size to other sizes” button. 3. In the pop-up window, select the target sizes and confirm your selection. 4. Play the animation in the selected sizes to ensure it looks as expected, and adjust as needed.

Copy animation for specific elements


*** ### 9. Advanced Animation Timeline settings Animation timeline settings include: looping, restart on scroll into view and parallax scroll. You can find and define them under the “Animation timeline settings” button in the pop-up window.

Animation Timeline Settings button

1. **Looping** — allows you to keep restarting your animation timeline for as many times as you define or infinitely. 2. **Restart on scroll into view** — the animation will restart every time the viewer scrolls the page and the ad comes back into view. 3. **Parallax scroll** — adds depth to your ad by making background and foreground elements move at different speeds as the viewer scrolls. From the drop-down menu select when you want your parallax to start and end.

Animation Settings Dialogue box

*** ## Learn more about Animation Timeline:
Timed actionsThis article explains how to set up Timed Actions — actions triggered at specific times and set up via Animation Timeline./pages/mgPzEDLUeR95HtuadEoQ/files/VdPsCGjtiKkGnRvWc8Nd
Migration: Keyframes to Animation BlocksThis article explains when and how to convert keyframes into blocks in the updated Animation Timeline./pages/BGP01PPctWi2AGC6qyaD/files/MNeAFxKqFqB4lU7Q0NyA
# Timed Actions This article explains how to set up Timed Actions — actions triggered at specific times and set up via Animation Timeline. These can be synchronized with your animations for complex interactions. Timed actions can be used to create 'Complex Interactions' within your ads. This allows you to create ads which are truly engaging and memorable. To demonstrate how these ads can be setup, take a look at the example below: ### Example of a Complex Interaction Follow this [link](https://studio.responsiveads.com/creatives/678a5444f14ec64f6b533440/preview?#/responsive-all) to view the advert shown below uses complex interactions between animated elements to create an eye-catching and unique ad.

This advert contains complex interactions between clickable animated elements.


*** ## How to Add a Timed Action * On the **Actions row** of the timeline, click the “+” **button**. * A small square labeled “**0**” will appear at the position of the **playhead** (the current time). * Select the square, then click the “**Actions**” button in the **Animation Timeline (AT) top bar**. * In the pop-up window, choose the action you want to add from the dropdown menu.

How to add a timed action to the animation timeline

### Types of Timed Actions There are five types of timed actions available: * **Show / Hide Element**\ Display or hide a specific element at a chosen time.
* **Carousel Navigation**\ For example: Navigate to the next or previous slide at a specific time.\ (Requires a carousel component in your creative.)
* **Animation Actions**\ Useful when coordinating with element triggers. (i.e. you can use “Play Animation” or “Pause Animation) for interactive scenarios). Types of animation actions are: * Pause Animation * Restart Animation * Seek Animation (jump to a specific time in the animation)\
### Multiple Actions at the Same Time * You can add multiple actions to the same point in time. * The square on the timeline will display a number indicating how many actions are scheduled at that specific moment.

The grey squares with numbers in the 'Actions' row show how many actions happen at a specific point on the timeline


# Animation Scenes Animation Scenes let you break your animation into multiple independent timelines that can be played, looped, or triggered separately. This makes it easier to manage complex animations and create more interactive, event-driven ad experiences. This guide explains **when Animation Scenes are useful**, and **how to set them up and trigger them**. *** ## Overview There is a new way to structure your ad animations: **create multiple isolated animations (Scenes) and control when and how each one plays**. Each Animation Scene is a separate timeline that can: * Autoplay on ad load * Loop independently * Be triggered by user interaction * Start, pause, or restart other Scenes This allows you to build richer experiences while keeping each animation easy to manage. *** ## When to Use Animation Scenes Below are a few common scenarios where Animation Scenes shine. ### Case #1 — Looping a CTA Animation Use Animation Scenes to separate your main intro animation from a looping call-to-action.\ This keeps your CTA animation running without restarting the entire ad animation. Example setup: * Scene 1: Intro animation * Autoplays on ad load * Scene 2: CTA animation * Loops continuously
### Case #2 — Trigger Animations on click Use Scenes to add interactive animations triggered by user actions.\ This approach is ideal for creating engaging, responsive effects without overloading a single timeline. Example setup: * Scene 1: Intro animation * Autoplays on ad load * Scene 2: Interactive animation * Triggered when an image is clicked
*** ## How Animation Scenes Work ### What Is an Animation Scene? An Animation Scene is a **separate Animation Timeline** that contains its own animation blocks, groups, and settings. This means that when your creative has only one scene, it is built in the same way as with the previous Animation Timeline. If you don’t need additional scenes, you don’t need to change your workflow. Scenes can: * Play asynchronously (in parallel or sequentially) * Be triggered at different times * Use different playback rules (autoplay, loop, pause, etc.) {% hint style="info" %} 💡 Think of each Scene as a self-contained animation that you can control independently. {% endhint %}
Scene 1 example

Scene 1 example

Scene 2 example

Scene 2 example

### Default Scene Behaviour * Every creative starts with Scene 1 by default. * Scene 1 can be your only Scene for a simple animation. * By default, Scene 1 is set to Autoplay. * Additional Scenes are not set to Autoplay by default. To learn how to create animations *inside* a Scene, refer to the [Animation Timeline guide](/creating-ads/designing-your-ad-in-the-fluid-ad-creator/animation-timeline). ### Basic Scene Actions You manage Animation Scenes using the Scene tabs above the timeline. #### Adding a Scene * Click the “**+**” button next to the Scene tabs. * New Scenes are named automatically: Scene 2, Scene 3, etc.

Adding a Scene

#### Deleting a Scene * Click the **bin icon** next to the Scene tab. * Confirm deletion. {% hint style="warning" %} Note: Deleting a Scene permanently removes all animation content inside it. {% endhint %}

Deleting a Scene

#### Rename a Scene * Click the Scene name * Enter a more descriptive name for your scene
#### Copy Scene Animation from Size to Size * Click the **copy icon** next to the Scene tabs. * Copies animations within the selected Scene only to other sizes.

Copy Scene Animation from Size to Size

*** ## Scene Settings Each Scene has its own playback settings.

Scene Settings button

### Default Settings * Scene 1: Autoplay enabled * All other Scenes: Autoplay **dis**abled ### Available Scene Options * **Autoplay** — plays the Scene automatically on ad load. * **Enable restart on scroll into view** — the animation will restart every time the viewer scrolls the page and the ad comes back into view. * **Loop** — allows you to keep restarting your Animation Scene for as many times as you define or infinitely. * **Pause** — Add a Pause between each loop. * **Parallax scroll animation** — connects animation playback to the viewer’s scroll position: the animation progresses as the viewer scrolls the page. * From the drop-down menus select when you want your parallax to start and end.

Scene Settings menu

*** ## Triggering Animation Scenes Scenes can be triggered in multiple ways, giving you fine-grained control over playback. ### 1. Autoplay on Ad Load * Enabled by default on the first scene in the Scene settings. * Multiple Scenes can be set to Autoplay if needed. * A little play icon next to the scene name indicates that the scene is set to autoplay

Scene Settings: Autoplay enabled

### 2. Triggering Scenes from Element Click Actions You can trigger Scenes using element interactions. **Setup steps:** 1. Select an element. 2. Open the **Setup** tab. 3. Choose a **Click trigger**. 4. Select one of the following actions:
5. Choose the Scene you want to control.
### 3. Triggering Scenes from Other Scenes (Timed Actions) Scenes can also trigger other Scenes at specific times. **Example**: * Play Scene 2 halfway through Scene 1 * Start multiple Scenes in parallel * Chain Scenes one after another **Setup steps:** 1. Open the Scene that will trigger another Scene. 2. Move the playhead to the desired time. 3. Add a new Action. 4. In the Action settings pop-up, select one of the following actions:
5. Choose the Scene you want to control.

New Timed Action created

Timed Actions Settings menu

*** ## Previewing Animation Scenes Preview behaviour depends on where you are working. ### In the Fluid Ad Creator (Animation Pane controls) Select the Play button to start playing the selected scene from where the red playhead is positioned. * You can only view and play **one selected Scene** at a time. * This is true even if: * A Scene is set to Autoplay * A Scene is triggered by another Scene or element * You cannot preview: * Looping behaviour * Element Click actions triggering another Scene * Timed actions triggering another Scene
### On Preview Page Click the Preview button in the top navigation bar to open the Preview page. When the page loads, any animations set to Autoplay will begin playing for the size that matches your browser window. * To review **complex, multiple Scenes interactions** use the Preview Page. * You can preview all Scenes regardless of a trigger and setup: * Autoplay Scenes * Looping Scenes * Scenes triggered by timed actions and playing sequentially * Scenes triggered by user interactions
*** ## Migrating Animated Creatives from Studio 3 Animation Scenes are fully backward-compatible. ### Migration Behaviour * Animation Timeline in Studio 3 creatives is migrated as **Scene 1**. * Existing animations play as expected. * Existing **Animation actions** continue to work and are mapped to the actions:
{% hint style="warning" %} ⚠️ **Important**: These actions now affect **all Animation Scenes**. If you add additional Scenes to your creative, triggering one of these actions will play, pause, restart, or seek **every Scene at once**. {% endhint %} {% hint style="info" %} **Best practice**: If you plan to create multiple Scenes, **replace** old actions **with new actions**: Play / Pause / Restart / Rewind Animation Scene, and select the specific Scene you want to target. {% endhint %} ### ON / OFF Animation Toggle Changes Studio 4.2 no longer uses an ON / OFF animation toggle. * When the **Animation pane is open**, you can create and edit animations. * When the **Animation pane is closed**, you can adjust the ad design only — existing animations are not affected. #### **Migrating Previously Created Animations** * If animation was **ON** → **Scene 1** is set to **Autoplay**. * If animation was **OFF in some sizes** → **Scene 1** is still set to **Autoplay**. * If animation was **OFF in all sizes** → **Scene 1** is created with **Autoplay disabled**. {% hint style="info" %} **Tip**: Always use the Preview page with Breakout view to **review your migrated creative across all sizes** and confirm design and animation accuracy. {% endhint %} # Migration: Keyframes to Animation Blocks This article explains when and how to convert keyframes into blocks in the updated Animation Timeline. ## Overview If you're working with older creatives that use **keyframe-based animation**, here’s what you need to know: * ✅ **All keyframe animations will still work as before**. If you don’t need to make any changes, you can keep using them without converting. * You can continue to select, edit values, or move individual keyframes as needed.

Using Keyframe and Blocks concurrently

* ➕ If you plan to **add new animations**, we recommend converting your keyframes to **blocks** for full compatibility with the new system. * **All newly created animations** will be automatically added as blocks.\
* ⚠️ In cases where conversion is required, a **pop-up** will notify you and guide you through the process (shown below):

Conversion pop up

*** ## How to Convert Keyframes to Blocks You can manually select: 1. Keyframes for a specific property (e.g., position, opacity), 2. All keyframes for a particular element, 3. Or all keyframes in the animation. Then: * Click the “Convert to Blocks” button in the Animation Timeline (AT) top bar. * Once converted, the keyframes will appear as animation blocks in the timeline. {% hint style="warning" %} **Important:** Always play your animation after conversion. If the result isn’t as expected, you can undo the conversion. We've implemented comprehensive conversion rules to preserve the animation as closely as possible, but minor discrepancies may occasionally occur. {% endhint %}

Converting Keyframes to Blocks

*** ### What Happens During Conversion * Each keyframe will be treated as either the **start** or **end** of a block. * Whenever there’s a **transition between two values**, a block will be created to represent that change. * All **easing functions** applied to keyframes will be preserved and applied to the corresponding blocks. * Keyframes with **no value change** (i.e., value = original value) will be **discarded** during conversion, as they do not contribute to the animation. ### Other Creative Sizes Keyframe-to-block conversions are applied **only to the currently selected size** of your creative.\ If you have animations in other sizes: * Existing keyframe animations **will continue to work** as expected in all sizes.
* You **don’t need to convert** keyframes **in every size** unless you plan to modify the animation in those sizes.
* If you want to **edit animations** in a different size, you'll need to **select that size** and convert the keyframes there.
*** ## Summary | Feature | Behaviour | | ----------------------------- | -------------------------------------------------------------------------------------- | | Reuse existing keyframes | No conversion required | | Edit or move keyframes | Fully supported | | Add new animations | Will use the new block-based system | | Manual conversion | Available for specific properties, elements, or the whole animation | | Automatic conversion (forced) | Only occurs when required — you’ll be prompted via pop-up | | Post-conversion validation | Always play and use Undo if needed | | Animation in multiple sizes | Conversions are **per size** — only convert if you plan to edit animation in that size |
# Using Sprite Sheets & Animation in ResponsiveAds This page shows three reliable ways to deliver lightweight, transparent animations in HTML5 ads built with ResponsiveAds: * **Animated WebP** (fastest path for simple loops) * **Sprite sheets in Google Web Designer (GWD)** (visual authoring with a built‑in component) * **Sprite sheets from TexturePacker** (professional packing + JSON metadata for custom/GSAP workflows) > If your animation has transparency and must fit strict initial‑load limits (e.g., ≤150 KB), sprite sheets or animated WebP are typically the best choices. *** ### Picking the right approach **Choose Animated WebP when…** * You have a short, looping animation; one asset is easier to manage. * You don’t need per‑frame interactivity. * You’re fine providing a PNG fall‑back for older browsers. **Choose Sprite Sheets (GWD or TexturePacker) when…** * You want transparent overlays with tight file size control (trim + quantize). * You need deterministic frame stepping, looping, or syncing with other timeline events. * You may reuse frames across variants or export @2× assets. *** ### Prerequisites (for all workflows) 1. **Export a PNG sequence with alpha** from your motion tool (e.g., After Effects). Use sequential names: `walk_0001.png`, `walk_0002.png`, … 2. **Trim empty transparency** from each frame to reduce file size. 3. **Match target ad dimensions**, or plan to scale down. 4. Keep the animation concise (≤ 24 fps; short loops) to stay within initial‑load limits. *** ### Option A — Animated WebP (Ezgif) **Best for:** fastest path to a single animated asset with transparency. 1. Convert your MOV with alpha **or** upload your **PNG sequence** to an online converter (e.g., Ezgif → Video to WebP / Animated WebP Maker). 2. Set frame delay and loop count; enable transparency. 3. **Optimize**: adjust quality/compression; consider reducing dimensions or dropping redundant frames. 4. Export your `.webp` and add a static PNG/GIF fall‑back for older browsers. **Embed example** ```html Ad Animation ``` **Tips** * Aim for **≤150 KB initial load**. If over, reduce dimensions, frame count, or quality. * Test transparency and looping in Chrome, Firefox, Safari, and Edge. * Verify performance under network throttling (e.g., Fast 3G in DevTools). *** ### Option B — Sprite Sheets in Google Web Designer (GWD) **Best for:** no‑code/low‑code authoring with a native Sprite Sheet component. 1. **Build the sprite sheet** from your PNG sequence (any packer or exporter). Keep total sheet size at or below **2048×2048** when possible. 2. In **GWD → Components → Sprite Sheet**, drag the component to the stage. 3. In **Properties**: * **Source**: your sprite sheet image (PNG‑32 with alpha). * **Frame Width / Height**: dimensions of a single cell. * **Number of Frames** and **Duration (ms)**. * **Loops**: `0` for infinite. * **Autoplay** if desired. 4. Preview to confirm alignment, then **Publish** (HTML5/AMPHTML as required). **Optimization checklist** * Use PNG compression (TinyPNG/ImageOptim) while preserving alpha. * Split long animations into multiple sheets or lower resolution/frame count. * Keep total initial load under your ad platform’s limit (commonly **≤150 KB**). *** ### Option C — TexturePacker → Sprite Sheets (Pro Workflow) **Best for:** maximal packing efficiency, JSON metadata, custom code/GSAP control. 1. **Import PNG sequence** into TexturePacker. 2. Recommended settings for web ads: * **Trim Sprites**: remove excess transparency. * **Allow Rotation**: off (simplifies CSS/JS indexing). * **Max Size**: 1024–2048 px (pick the smallest that fits). * **Padding**: 1–2 px to prevent edge bleeding. * **Texture Format**: PNG‑32 (alpha preserved). * **Scale**: 0.5–0.75× if needed to hit size targets. * **Reduce Colors / PNGQuant / Zopfli** for smaller output. 3. **Export**: `animation.png` (sheet) + `animation.json` (metadata). Optionally export a second **@2×** sheet for retina. 4. **Integrate**: **A) Quick CSS background‑position animation** ```html
``` **B) GSAP steps‑based animation** ```html
``` **Pro tips** * Keep frame rate ≤ 24 fps; shorter loops pack smaller. * Reuse the same sheet across multiple ad sizes/variants where possible. * For trimmed sprites, read the JSON’s per‑frame offsets when positioning. *** ### Option D — SVG Sprite Container + Timeline Trigger **Best for:** authoring fades/overlays/impacts on a visual timeline while the **sprite playback** is controlled by code and starts **when the timeline plays**. #### Overview * The animated character/object lives inside an **SVG element**. * A parent **sprite container** holds a single `` that points to a packed **sprite sheet** (PNG with alpha) hosted in your **publish bucket**. * The timeline manages opacity/position effects; a **start trigger** fires to begin integer frame‑stepping of the sheet. Optional pause/complete triggers stop/reset playback. #### Build steps 1. **Prepare the sprite sheet** using Option B or C and upload it to a public path in your publish bucket. 2. **Create the SVG holder** sized to one frame. Place the full sheet as an `` and reveal a single frame with a clipPath. Move the sheet by one frame width each tick. ```html ``` > Example: `width="2880"` implies **24 frames × 120px** (single‑row sheet). 3. **Playback controller** — listen for timeline events and step the sheet by whole frames. ```html ``` 4. **Timeline triggers** * At **0 ms**: dispatch `ra:timeline:start`. * At a pause point: dispatch `ra:timeline:pause`. * At the end (after fade‑out): dispatch `ra:timeline:complete`. Example code for timeline actions: ```js // Start window.dispatchEvent(new Event('ra:timeline:start')) // Pause window.dispatchEvent(new Event('ra:timeline:pause')) // Complete window.dispatchEvent(new Event('ra:timeline:complete')) ``` #### Notes & gotchas * For **multi‑row** sheets, compute `col = i % cols`, `row = Math.floor(i / cols)` and set both `x` and `y`. * Add **1–2 px padding** between frames to prevent edge bleeding; snap to integer positions. * You can replace `setInterval` with **GSAP** animating the `` `x` property using `ease: steps(FRAMES)`. * Keep animation logic isolated; the timeline continues to control fades/motion separately from sprite stepping. *** ### Testing & Compliance Checklist * **Initial load**: ≤150 KB (GDN typical) — verify bundle + assets. * **Transparency**: confirm in all target browsers. * **Network**: test under Fast 3G to simulate real ad loads. * **Fallbacks**: static backup image for non‑animated/unsupported cases. * **Mobile**: check touch performance and layout. *** ### Troubleshooting **Sprite offset/misalignment** * Ensure each frame is the same width/height grid if using a simple sheet. * If using trimmed frames + JSON, apply the per‑frame origin/offset when drawing. **Edge bleeding/ghost lines** * Add 1–2 px padding between cells. * Snap background positions to whole pixels. **File size too large** * Reduce dimensions, quantize colors, drop redundant frames, lower fps. * Split long loops into several shorter sheets or use WebP where appropriate. **Stuttery playback** * Use `steps(N)` easing (GSAP) or integer frame stepping. * Avoid CSS transitions with fractional positions for frame indices. *** ### FAQ **Do I need both WebP and a sprite sheet?**\ No. Pick one per creative. Use WebP for simplicity; sprite sheets for control/reuse. **What about retina?**\ Export @2× sheets and scale CSS/JS positions accordingly, or serve based on DPR. **Will this work in AMPHTML?**\ Yes—with constraints. Prefer GWD export for AMP creatives, and mind inline script limits. **How do I count frames?**\ In TexturePacker/GWD you set the frame count explicitly; with WebP the timing is encoded in the asset. *** ### Deliverables to Engineering * **Animated WebP**: `animation.webp` (+ `fallback.png`), width × height, loop rules, target KB. * **GWD Sprite Sheet**: packed PNG sheet, frame dimensions, frame count, duration, loop policy, published bundle. * **TexturePacker Sprite Sheet**: PNG + JSON, intended fps, any offsets, example integration (CSS/GSAP). # Variants ResponsiveAds has a number of ways which you can easily and quickly create variants of your ads. ## Learn more:
Cover image
Condition Variants (Coming Soon)Change your ad based on user data such as location, weather or time of day./files/5tviDwh989Tu0zthju0z
Creating Ads with Dynamic Content Using a CSV FilePopulate variables in your Creative such as text, URLs, and images with a CSV./pages/C47tbbXI60D0a9zOmIFi/files/MNeAFxKqFqB4lU7Q0NyA
Creating Ads with Dynamic Content Using a JSON file/Media FeedBuild dynamic ads using Google Sheets or JSON feeds for easy updates and scale./pages/bbD2bPyWJJSYVUJAL5Fw/files/VdPsCGjtiKkGnRvWc8Nd
# Condition Variants Weather.com API key? # Creating Ads with Dynamic Content Using a CSV File ## **Overview** This guide explains how to set up dynamic ads using a CSV file to populate variables such as text, URLs, and images. The walkthrough uses the fictional car brand **Lucia** as an example, but the process can be adapted to suit your needs. Dynamic content enables you to create a single ad design and customize it for different locations, campaigns, or audiences by swapping out data from a CSV file. This is especially helpful for large-scale campaigns requiring multiple variations of the same ad. ### **What This Guide Covers** 1. Configuring your creative for dynamic content. 2. Preparing your CSV file and uploading it to the platform. 3. Reviewing and approving variants. 4. Exporting finalized ads. *** ### **Understanding the Workflow** Here’s a simplified overview of the process: 1. **Design & Setup**: * Create your ad in the editor and mark placeholders for dynamic fields. * Assign data variants to fields such as text, phone numbers, URLs, or images. 2. **Prepare Your Data**: * Download a CSV template to organize your data. * Populate the template with your campaign details (e.g., dealer names, phone numbers, etc.). 3. **Map, Review, and Approve**: * Upload the CSV, map columns to the placeholders, and preview each variant. * Adjust any design or data errors as needed. 4. **Export Ads**: * Finalize and export variants. *** ## **Step-by-Step Guide** ### **Step 1: Configure Your Creative** 1. **Design Your Creative** * Begin by creating your ad in the **Editor**. Use the tools available to design a visually appealing ad, ensuring that the layout works across all required sizes. * Identify areas where dynamic content is needed, such as: * **Text Fields** (e.g., dealership names, slogans). * **Contact Information** (e.g., phone numbers, URLs). * **Images** (e.g., logos or location-specific graphics).

Examples of dynamic content in the editor

2. **Assign Data Variants** * Select each placeholder in the creative (e.g., text or image). * In the **Data Source Settings** section of the editor, assign a name for the data field. * Example: For the dealer name, assign the field name `Name`. * Repeat this for all dynamic elements, including URLs and other fields. * Save your work. {% embed url="" %} Watch the Video on how to Assign a Data Source {% endembed %} *** ### **Step 2: Prepare and Upload Your Data** 1. **Download the CSV Template** * Navigate to the **Summary Page** in the platform. * Locate the **Details** section and then the **Data Feed** sub-section and download the CSV template. * The template will include headers that match the data variant names you assigned earlier.

Data Feed section and the "Download Template" button.

2. **Populate the Template** * Open the CSV template in Excel or another spreadsheet editor. * Fill in the columns with your campaign data: * **Variant Name**: A unique identifier for each variation (e.g., dealership name). * **URL**: The click-through link. * **Name**: The name of the dealership. * **Phone**: The contact number. * Example: | Variant Name | URL | Name | Phone | | -------------- | ---------------------------- | -------------- | ------------ | | Lucia Downtown | | Lucia Downtown | 123-456-7890 | | Lucia West End | | Lucia West End | 987-654-3210 | * Save the file as a CSV.

How this CSV would look in Google Sheets

3. **Upload the CSV** * Return to the platform and upload the completed CSV. * Ensure that the upload confirmation displays the correct number of variants.

Use this button in the Data Feed section to upload your completed CSV

*** ### **Step 3: Map, Review, and Approve Variants** 1. **Map Data Columns** * Verify that each CSV column is correctly mapped to the corresponding placeholder in the creative. Do this by using the drop-downs in the 'Map to Element Data Source Names' section. * Check the Data is correct by using the 'View Data Feed Table' in the 3rd section. * Adjust any mismatched mappings manually.

Mapping CSV Columns to Creative

2. **Preview Ad Variants** * Generate and preview ad variants for all sizes and data sets. To do this, navigate to the preview page for the creative. When on the preview page, use the 'Preview Data Variants' button to view a drop down of all your variants. * Review each variant to ensure the data is displayed correctly and the design works well across all sizes.

Data Variant Preview on the Preview Page

3. **Share for Approval** * You can use the platform to generate shareable preview links. * Send these links to stakeholders for approval and [comments](/collaboration/comments). * Stakeholders can also use the Variant Preview to view different versions of the creative.

Use the 'For Proofing' link in the 'Copy URL' menu to create a shareable proofing link

*** ### **Step 4: Export/Deploy Final Ads** 1. **Navigate to the Summary Page and choose export type for your Ad:** 1. [Image](/deploying-ads/image-exports) 2. [HTML5 Zip](/deploying-ads/html5-export) 3. [Video](/deploying-ads/video-animated-gifs) (in Beta) 4. [Ad Tags](/deploying-ads/ad-serving-tags) 2. Export or Deploy Approved Variants: 1. **Export Approved Variants** * Select the approved variants you wish to export. (See Gif below for example) * Specify the desired ad sizes and formats (e.g., IAB standard sizes). * Export the ads in your chosen export type. 2. **Deploy Approved Variants** * Publish and download the Ad Tags for the approved deployments.

Variant selection for HTML5 Exports

*** ## **Tips for a Smooth Workflow** * **Double-Check Data**: Ensure your CSV file is accurate and properly formatted before uploading. * **Plan Your Variants**: Use meaningful names for each variant to make it easy to identify them later. * **Preview Thoroughly**: Always review each ad size and data combination before sharing or exporting. * **Communicate with Stakeholders**: Share preview links early to gather feedback and approvals quickly. # Creating Ads with Dynamic Content Using a JSON file/Media Feed ResponsiveAds supports JSON/Media feeds to power creative variants with dynamic content. Instead of manually editing every version of your creative, you can connect a Google Sheet or JSON file and have images, text, and links automatically populate your ad. This is especially useful for ads like **image carousels**, **product showcases**, or **rotating offers**, where content changes frequently or at scale. *** ### Why Use Feeds? * **Dynamic updates** – edit content in a Google Sheet and it flows into the creative. * **Scalability** – manage many products, listings, or variations from a single feed. * **Consistency** – use the same feed across multiple ads or campaigns. * **Efficiency** – no need to re-edit or rebuild creatives for every content change. *** ### Example: Dynamic Image Carousel A **Dynamic Logo/Image Carousel** can be powered entirely by a Google Sheet feed. Each row in the sheet represents a slide and may include: * **Image** (recommended: 3414 × 1920, URL from Media Gallery or external host) * **Title** (≤ 40 characters) * **Price or details** (optional) * **CTA text** (≤ 15 characters) * **Click-through URL** * **Global Hotspot URL** (optional) Other assets you may include in your creative: * Brand logos (1000px long edge, PNG; vertical + horizontal) * Brand panel color (Hex/RGB) * Background color (Hex/RGB) *** ### Setting Up the Google Sheet 1. **Make a copy of the example sheet**\ Use the provided [Dynamic Carousel Example Sheet](https://docs.google.com/spreadsheets/d/1Nhgthc_2jFnFGA4C__Jx8egT5L49hKjQrGeEm6QP9Bo/). 2. **Fill in your content** * **Column A** – ID or index number * **Column B** – Title (e.g., product name, address) * **Column C** – Image URL (e.g., from Media Gallery) * **Column D** – CTA Button URL * **Column E** – Global Hotspot URL 3. **Publish the sheet** * Go to **File → Publish to the web** * Leave the default settings and click **Publish** * Copy the **Google Sheet ID** (the string of characters between `/d/` and `/edit` in the URL). *** ### Creating a Feed in Media Gallery 1. Open the **Media Gallery** → **Feeds** tab. 2. Click **Add a New Feed**. 3. Enter a name for your feed. 4. Set **Parser Type** to **Transform Google Sheet to JSON**. 5. Paste the Google Sheet ID into the field. 6. Choose an update interval (e.g., 1 hour). 7. Save, then run **Options → Force Update** to generate the JSON feed. 8. Copy the feed URL. *** ### Connecting the Feed to Your Creative 1. Open your creative in the editor. 2. Select the **Custom Code Editor**. 3. Replace the default feed URL in the JavaScript with your new feed URL. 4. Save the creative. Now your ad will automatically pull content from the feed. *** ### Updating the Content * Edit rows in your Google Sheet to add, remove, or update items. * In **Media Gallery → Feeds**, use **Force Update** to sync immediately. * Refresh the JSON link to verify updates. * Ads connected to the feed will reflect changes automatically. ℹ️ Feeds also update every **12 hours** by default. *** ### Styling and Customization * **Logos**: Replace brand logos by selecting the **Brand Logo** element in the editor and uploading your file. * **Click-throughs**: Update per-slide CTAs in the sheet, or apply a global click-through at the **Deployment** level. * **Colors**: Change background, brand panel, or CTA button colors in the right-hand panel, then copy style settings across sizes. * **Consistency across sizes**: Use **Copy element settings** → *Other style properties* to apply font, spacing, and color changes across all formats. *** ### QA and Preview 1. Save your creative. 2. From the **Summary Page**, click **Preview**. 3. Check the **Responsive view** by resizing your browser window. 4. Switch to the **Breakout view** to confirm each format size. 5. Verify there are no overlaps, missing assets, or broken links. *** ### Deploying the Creative 1. On the **Summary Page**, go to **Deployments**. 2. Click **Publish** to generate an ad tag. 3. Select your preferred serving platform. 4. Copy the ad tag to your clipboard and save it for trafficking. *** {% hint style="success" %} With JSON/Media feeds, you can create scalable, dynamic creatives like carousels and product showcases that update automatically, saving time while ensuring your ads always display the latest content. {% endhint %} # Creating Dynamic Carousels with the JSON Data Feed API (In-Editor) ResponsiveAds also supports connecting a carousel directly to a JSON feed from within the editor, without touching the Custom Code Editor. Using the Data Source Settings panel, you can map individual slide elements (images, CTAs, click-throughs, text) to properties in your JSON feed by name. The carousel then renders one slide per item in the feed, using a single template slide as the design reference. This approach is ideal when you already have a JSON endpoint and want a fast, no-code way to wire up dynamic slides. {% embed url="" %} ### Why Use the In-Editor JSON Feed API? * No custom code – elements are connected through the editor UI. * Template-driven – design one slide, the feed generates the rest. * Property-based mapping – fields in your feed map directly to elements by name. * Live updates – content changes in your feed flow into the creative automatically. ### How It Works A carousel contains one *template slide* that defines the layout. Each element inside that slide (image, CTA, click-through, text) is bound to a property in your JSON feed. When the ad serves, the carousel duplicates the template slide once per item in the feed and populates each copy with the corresponding values. Example feed item properties: * `image_url` – the slide image * `click_through_url` – the destination URL for the slide * `brand` – text used for the CTA label or other text fields * Additional custom properties as needed ### Preparing Your JSON Feed Your feed should return a list of items, where each item is an object containing the properties you want to bind to slide elements. The property names you use in the feed are what you'll reference inside the editor, so keep them consistent (e.g. `image_url`, `click_through_url`, `brand`). Once your feed is live, copy the feed URL to your clipboard. Enabling Dynamic Slides on the Carousel 1. Open your creative in the editor. 2. Select the Carousel element in the left-side panel. 3. In the right-side panel, open the Setup section and find Data Source Settings. 4. Enable the Dynamic Slides toggle. 5. Under Select Data Source Type, choose JSON Data Feed API. 6. Paste your feed URL into the input field at the top. The carousel is now connected to your feed. Next, bind each element inside the template slide to a property. #### Handling CORS Because the ad fetches your JSON feed directly from the browser at serve time, the feed's server must allow cross-origin requests (i.e. return the appropriate `Access-Control-Allow-Origin` headers). If your feed endpoint doesn't support CORS, the ad will fail to load the data and your slides won't populate. If you can't enable CORS on the source, you can route the request through the ResponsiveAds file cache, which acts as a CORS-friendly proxy: ``` https://file-cache.responsiveads.com/?url= ``` Replace `` with your original feed URL (URL-encoded if it contains special characters). Use this proxied URL as the feed URL when configuring the carousel's Data Source Settings. Notes: * Responses are cached based on the full request URL. If your feed updates frequently and you need fresher data, append a `cachebuster` parameter (e.g. `&cachebuster=1`) and change its value whenever you want to force a refresh. * The proxy is intended as a workaround — when possible, enabling CORS directly on the feed source is the cleaner option. ### Binding Slide Elements to Feed Properties For every element inside the template slide that should be dynamic, repeat the following: 1. Select the element in the left-side panel (e.g. Click-through, CTA, Image). 2. In the right-side panel, open Setup → Data Source Settings. 3. Toggle on the property you want to drive dynamically: * Click-through element → Click URL Action * CTA element → Text * Image element → Image 4. For Select Data Source Type, choose Parent Feed Carousel Slide. This tells the editor to pull the value from the current slide's item in the parent carousel's feed (rather than fetching a separate feed). 5. In the Data Source Name field, paste the exact property name from your feed (e.g. `click_through_url`, `brand`, `image_url`). Element-to-Property Mapping (Example) * Click-through URL element → `click_through_url` * CTA text element → `brand` * Image element → `image_url` #### Setting a Dynamic CTA Click-Through (Workaround) Binding a CTA's click-through URL via Data Source Settings is not currently supported. As a workaround, you can wire up a dynamic CTA destination using the standard Open URL field with a `feed://` reference. Instead of toggling on a data source for the CTA's click action, you point the CTA's Open URL directly at a property in the parent carousel slide's feed item using this syntax: ``` feed://{propertyNameFromFeed} ``` The carousel resolves `feed://` references against the current slide's feed item, substituting the value of the named property at serve time. Steps 1. Select the CTA element inside the template slide. 2. In the right-side panel, open the Setup section and find the click action / Open URL field (the standard one — *not* Data Source Settings). 3. Set the action to Open URL. 4. In the URL field, enter `feed://` followed by the exact property name from your feed. Example If your feed items contain a `click_thru_url` property: ``` feed://click_thru_url ``` Each slide's CTA will then link to the `click_thru_url` value from its corresponding feed item. ### Saving and Previewing 1. Save the creative and wait for the save to complete. 2. Open the Preview page from the Summary view. 3. Confirm that the carousel renders one slide per item in the feed, with each element populated from its mapped property. 4. Check the Responsive and Breakout views to verify the slides display correctly across formats. Tips * Property names are case-sensitive and must match the feed exactly. * Use Parent Feed Carousel Slide (not JSON Data Feed API) when binding elements *inside* a carousel slide — only the carousel itself points at the feed URL. * If a slide appears blank or shows the template value, double-check the Data Source Name spelling against your feed. * To change content, update your JSON feed at its source; the creative will reflect the new items on the next fetch. # Overview Manage your Ads in Responsive Ads Welcome to the Ad Management section of Responsive Ads. Here, you can access the various pages that provide in-depth guidance on different aspects of ad management. Whether you need to understand how to navigate the Summary Page, configure ad settings, preview ads, or utilize tagging and showcasing features, this overview will guide you to the right place. ## Learn more about
TaggingManage and organize your ads using tags. Applying tags to your ads to facilitates better organization and retrieval./pages/kGpYlUL7t4wlO1aK1Vrm/files/VdPsCGjtiKkGnRvWc8Nd
Summary PageThe Summary Page allows you to review detailed information about a specific ad./pages/Rh0whEZGsQO0BTvbQCvu/files/MNeAFxKqFqB4lU7Q0NyA
Preview PageThis page allows you to see how your ad will look in its final form. The Preview Page is crucial for verifying the appearance of ads before they are launched./pages/LLjDQeABAIRfHoTLaxxy/files/5tviDwh989Tu0zthju0z
Showcase PageCreate and manage showcases to group and share your ads, whether for internal review or client presentation./pages/PdqTNzhSMx6Xmexazsjd/files/HeU41ceed5qc3zg4z4hR
# Tagging Tagging in Responsive Ads Tagging in ResponsiveAds helps you organize your creatives and make it easier to locate specific ads. Tags can be applied during the “New Creative” flow and edited later on the Summary Page if necessary. This section outlines the types of tags available and how they can be used to improve the management of your ads. ## Why Use Tags? Tags allow you to quickly find and manage your creatives by categorizing them in ways that make sense for your business. Whether you're organizing by advertiser, project, or where the ad will run, tags help streamline the creative workflow. ## Types of Tags ### 1. **Custom Tags** Custom Tags are the only tags that act like traditional tags. You can add them to highlight special creatives or for any other custom categorization you need. Custom Tags show up directly on the creative tile in the Creative List page, making it easy to find specific ads. * **Example use case:** You might tag high-performing creatives as "Top Performers." * **Note:** Keep tag text short to ensure it fits on the tile. ### 2. **Advertiser** The Advertiser tag is a mandatory field and should ideally be used to signify the company or product the ad will promote. It is custom and allows you to type in any name, which will be added to your tag list. * **Best practice:** Ensure this tag is consistent across all creatives to avoid confusion in managing and reporting on campaigns. ### 3. **Agency/Account** This tag is used to group creatives based on the agency or team managing the ad, or to separate different projects under the same advertiser. * **Example use case:** If multiple agencies or teams are working on different creatives for the same advertiser, use this tag to distinguish them. ### 4. **Trafficking/Site/App** This tag helps you indicate where the ad will run—whether it's a particular site, app, or trafficking system. * **Example use case:** Use this when you have different creatives for specific placements (e.g., one version of an ad for a mobile app, another for a website). ### 5. **Ad Category** The Ad Category tag is selected from a preset list and helps segment your creatives into different ad types or industry categories. * **Example use case:** You might categorize ads based on industries like "Retail," "Automotive," or "Technology." ### 6. **Features** This tag identifies which specific ResponsiveAds features, like animations, videos, or interactive elements, are being used in a creative. These features are manually tagged by the user. * **Note:** Make sure to tag features correctly as they won’t be automatically added when saving the creative. ### 7. **Format Type** This tag helps you find creatives based on the size pack and resizing rules (formats) used. For example, if a creative targets IAB slots, you can tag it with "IAB" for easy reference. * **Automatic Tag:** The "Formats Used" tag is automatically applied, showing the specific format size pack in the creative. However, the Format Type tag can be customized to provide a broader grouping for easier search. *** ### Fixed Tags Some tags are automatically applied and cannot be edited by the user. These include: * **Formats Used:** Automatically generated based on the size pack applied to the creative. * **Feature Licenses:** Indicates the features used in the creative that require specific licenses. * **Origin:** Indicates whether the creative was started from scratch or from a template. ### Markets Tag (Conde-Specific) If you wish to use the Markets tag (currently reserved for Conde), please contact ResponsiveAds support for more information. # Summary Page Overview, export and ad tag options for individual ad creatives with device previews and analytics access. The Summary Page provides a detailed overview of an individual ad creative, allowing users to manage and export responsive designs efficiently. It includes tools for selecting formats, previewing ads across different devices, tagging your creative for easier organization, and customizing key settings. Users can export creatives in various formats, including images, HTML5 and video, and deploy ads using ad tags or via the ResponsiveAds 3rd party ad serving option. The page also offers a quick view of performance metrics via the Analytics Snapshot and allows for role-based access management through the Privileges section, facilitating collaborative work and easy ad deployment. ## Accessing the Summary Page The Summary Page for a creative can be accessed 3 different ways: 1. **Creatives Page** - From the Creatives Page, hover over a creative and click 'Summary Page'. [(see how here)](/navigating-the-app/creatives#hover-controls-on-a-creative) 2. **Fluid Ad Creator** - To access the summary page from the fluid ad creator, click on the 'Summary' button in the header.

Summary button on Fluid Ad Creator Page

3. **Preview Page** - To access the summary page from the Preview Page, click the 'Manage' button at the top right of the page.

Manage button on Preview Page

## Navigating the Summary Page The summary page is divided into drawers which can be expanded and closed to access specific controls. The following part of this user guide will explain each section in more detail:

The Summary Page

### **Overview**

The overview at the top of the summary page

There are a few things of note in this section on the summary page. 1. The nav menu is accessible from the down arrow next to the ResponsiveAds logo. 2. This is the Creative title and unique Creative ID. Clicking on the Title will allow you to edit it. To the left is a thumbnail preview of the Creative. 3. These links will quickly take you to the associated area of the summary page 4. The **'Edit Creative' button** will take you back into the [Fluid Ad Creator](/creating-ads/designing-your-ad-in-the-fluid-ad-creator) for the Ad. The drop down allows you to click the **'Duplicate Creative' button** and create a copy of the current Creative. The **'Preview' Button** will launch the [Preview Page](/ad-management/preview-page) for the Ad ### **Details Section**

Details Section on Summary Page

The **Details** section of the Summary Page provides key information about the selected creative, such as its ownership, format, and status. Here’s an overview of each field in the section: 1. **Creative Owner**:\ Displays the email address of the individual or team that owns or created the ad. This is where the primary contact for the creative is listed. 2. **Origin**:\ Indicates the source or starting point of the creative. In this case, the origin is “PSD/Blank Canvas,” signifying that the creative was made from scratch or imported from a Photoshop file. Alternatively this would read 'Template' if the creative had been created using a template. 3. **Creative Name**:\ The name assigned to the creative, in this case, "\[MASTER] Fully-Fluid Design." The name typically follows a convention to differentiate various versions or stages of creatives. 4. **Date Created**:\ The timestamp of when the creative was originally created. For instance, this creative was made on Sunday, June 16, 2024, at 1:09 PM PDT. 5. **Status**:\ Reflects the current state of the creative. In this case, the status is "Inactive," meaning it is not currently live or in use for deployment. 6. **Trafficking/Site/App:** This is a tag used to group creatives based on the site or app which you are running the ad on. 7. **Markets**:\ A placeholder field for specifying the target markets for this creative (currently empty). 8. **Ad category:** This tag is used for easier searching & filtering on the creatives page. 9. **Agency/Account**:\ Displays the associated agency or account that is responsible for or sponsoring the creative. 10. **Ad advertiser:** For this example, the advertiser listed is "Lucia." 11. **Formats Used**:\ Lists the specific formats utilized within the creative. This example includes multiple ad formats such as: * **Fully-Fluid™** * **Fluid 250H** * **Masthead (4x1-16x9)** * **Bill Board (970x250)** * **Page-Scroller™ (100%)** * **Square (300x250)** 12. **Features:** Shows any specific features tagged for the selected creative. 13. **Formats Type**:\ Shows the format type of the current creative. This is useful for grouping creatives by format type when analyzing performance. 14. **Template Type:** Shows which template type the ad has used if you are not building the ad from scratch or from a PSD. 15. **Custom Tags**:\ Shows any custom tags that have been applied to the creative. 16. **Feature Licenses**:\ Placeholder field for listing any additional feature licenses applicable to this creative. 17. **Layouts/Sizes**:\ Provides access to a list of the various layouts and sizes the creative is optimized for. Clicking this will expand to show the different resolutions and screen sizes.

Layouts & Sizes section

18. **Weights**:\ Displays the size of the creative in kilobytes for billing purposes. In this case, the creative's biggest size is 191 KB, which helps monitor file weight and ensure it complies with ad network restrictions. It also expands to show the k-weights of all of the different layouts & sizes.

Weights section

19. **Data Feed**:\ Shows whether any data feeds are connected to the creative. In this case, no elements are using a data feed, and no data variants have been defined yet. Data feeds are typically used for dynamic creatives where content changes based on external data. See [Variants](/creating-ads/variants) for more info on how to use this section.

Data field section

20. **Notes**:\ A freeform field where users can add any additional notes or relevant information about the creative. For example, you could put the name of who worked on the creative last and any updates. Or, you could list the purpose of the creative, eg. for testing only 21. **History**:\ This section logs changes made to the creative, including timestamps and the name of the user who made the edits. For example: * Tuesday, June 18, 2024, 8:57 AM PDT: Edited by "." * Tuesday, June 18, 2024, 8:56 AM PDT: Saved by "." ### Preview Section

Preview Section at the bottom of the Details Section

At the bottom of the details section, is an area which allows you to preview your ad. The controls allow you to change the preview shown in the preview area below. * **Select Format**:\ Use this drop down for selecting the desired format (e.g., Fully-Fluid™). * **Device Check**:\ Click on one of the devices either landscape or portrait (Phone SE, iPhone X, etc.) for previewing how the ad appears on different devices. * **Background Color Picker**:\ Click on one of the 5 color options to choose the background color for the preview area. ### Deployments Sections Following the preview section are a number of drawers. These Drawers allow you to take your Ad from the Responsive Ads platform to your chosen Ad deployment method. To learn more about these deployment sections, either click on one of the cards below or visit the [Deploying Ads section of the user guide.](/deploying-ads/overview)
Image ExportsGenerate and download static image exports of your creative./pages/Nc8Dniuz3zS2tDCYv3GU/files/qBbw8bsYm9tECGFNZU6N
Facebook Exportset up and export their ad creatives directly for Facebook campaigns/pages/TF8ufk3OmQ5DI4iOpTPq/files/mGXl5LxvB6oye4ciPzF1
HTML5 Exportexport your Creatives as zip files, compatible with most demand-side platforms/pages/aCruo49FqJcMpQ55fWEi/files/mZaGmLRW10rGYWgE5zJC
Video/Animated Gifsexport your creatives as video files or animated GIFs/pages/CnJT1URjtvXaFV9QC3se/files/vRE4PqgATRyDsV9dYccY
Ad Serving Tagscreate, manage, and publish ad tag deployments for a creative/pages/X76iaeVIoDT3ODoFuAtc/files/VdPsCGjtiKkGnRvWc8Nd
### **Analytics Snapshot**

Analytics Snapshot Section

The **Analytics Snapshot** section provides a quick overview of key performance metrics for the creative, including impressions, clicks, and click-through rates. This data is essential for understanding how well an ad is performing. Advanced analytics are available when using Ad Serving CPM or when enabling analytics by CPM in HTML5 zip packages. Here's how to interpret and use this section: 1. **Tabs - Impressions, Clicks, Click-through Rate**:\ The analytics snapshot provides three main metrics, each available as a clickable tab: * **Impressions**: Tracks the total number of times the creative has been displayed. * **Clicks**: Shows how many times users have clicked on the ad. * **Click-through Rate (CTR)**: Calculates the percentage of impressions that resulted in clicks. This is a critical metric for measuring ad engagement. 2. **Date Range Selector**:\ The date range selector, located in the upper right of the chart, allows users to select a specific time period for which they want to view performance data. Clicking on the calendar icon opens a dropdown to choose custom date ranges, helping users filter results to a specific campaign duration. 3. **Impressions Graph**:\ This graph visually represents the selected metric (Impressions, Clicks, or CTR) over the chosen date range. The example shows a timeline with dates on the horizontal axis and the total count on the vertical axis. If the graph displays **0 impressions**, it means the ad has not been viewed during the selected date range. 4. **Metric Total**:\ Below the graph, users will see the total count for the selected metric (e.g., "0 impressions in total"). This provides a quick summary of the ad's performance at a glance. 5. **Open Analytics Button**:\ Clicking the **Open Analytics** button provides access to the full analytics dashboard, which offers more detailed insights into ad performance. This is where users can explore more advanced metrics and break down the data by different dimensions, such as device type or location. Learn more about analytics [here.](/analytics/basic-analytics) ### **Privileges**

Privileges Section

The **Privileges** section allows the creative owner to assign different levels of access to other teams. This feature is useful for collaboration, enabling different teams to view, edit, publish, or take ownership of a creative. Here’s how to use the section: 1. **Creative Owner**:\ Displays the email of the current owner of the creative. In this example, the owner is ****. Only the owner or someone with ownership privileges can modify the privileges of other teams. Owners are also the only team who can delete a creative. 2. **Set Privileges for Other Teams**:\ To grant privileges to a new team: * Enter the email address of the team in the provided field (e.g., ""). * After entering the email, select the level of access using the drop-down menu located next to the field. 3. **Privilege List**:\ The drop-down menu provides four privilege levels: * **View**: The team can only view the creative but cannot make any changes. * **Edit**: The team can make changes to the creative inside the Fluid Ad Creator. * **Publish**: The team can publish the creative and manage its live deployments. * **Ownership**: The team will take full ownership of the creative, including all privileges. This also transfers the ability to manage privileges to the new owner. 4. **Add User Privilege**:\ Once a privilege level has been selected, click the **+** button to add the user to the privilege list. 5. **Save Privileges**:\ After assigning privileges, click the **Save Privileges** button to apply the changes. If this button is not clicked, the assigned privileges will not be saved. #### Video: Using the Privileges Section to Share/Move a Creative to a Different Account In this video, Caras explains how to use the Privileges section on the summary page to share or move a creative to a different account. {% embed url="" %} # 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

2. **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

3. **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

4. **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 {% embed url="" %} ### **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](/ad-management/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. # Showcase The Showcase Page in ResponsiveAds allows users to create a public-facing gallery of their ads. This feature is particularly useful for agencies, publishers, and marketers who wish to share a curated selection of their designs with clients, stakeholders, or the public.

The Showcase Page

## **Key Features** 1. **Curated Public Showcases**: * The Showcase Page allows users to select and present specific creatives for public viewing. * Each creative added to the showcase is viewable via a shareable public URL. 2. **Filters and Tags**: * The Showcase Page can be filtered by **tag** to categorize the work (e.g., by advertiser, format, or category). This allows the audience to sort through different types of creatives easily. 3. **Customization**: * Users can create multiple showcases, each with its own theme, purpose, or focus. For example, one showcase could display a collection of shoppable ads, while another could highlight dynamic video ads. * Custom showcases can also be tailored with filters, allowing for more control over what is displayed. 4. **Star Feature**: * In the **Creative List** page, users can add a creative to the showcase by selecting the **star** icon next to each creative. When the star is filled, the creative is included in the showcase. * Creatives can be added or removed from the showcase by simply toggling the star icon. 5. **Manage Showcases**: * The **Manage Showcases** section allows users to create, edit, and delete custom showcases. * The **Master List** includes all published creatives, and any item removed from the Master List is also removed from all showcases. * Custom showcases can be created to display subsets of creatives from the Master List, allowing for a focused presentation of selected work. 6. **Showcase URL**: * Each showcase is assigned a unique URL, which can be copied and shared with clients or teams. This public-facing URL allows others to view the showcase without needing a login. 7. **Usage Examples**: * **Agencies** can use the showcase to present their portfolio to clients or highlight specific campaigns. * **Publishers** can display the range of ad formats and creative capabilities they offer to potential partners. * **Marketers** may use the showcase to demonstrate successful campaigns or gather feedback on specific designs. *** ## **Managing Showcases** ### **Overview** The **Manage Showcases** page is where users can organize, create, and maintain their public showcases. This page gives users the ability to build custom showcases and manage the creatives included in each one.

Manage Showcases Page

### **Creating a New Showcase** Users can create a new showcase by selecting the **New Custom Showcase** button on the Showcase Page. This will take them to the "Create a New Showcase" page. The "Create a New Showcase" page allows users to build a custom showcase to display selected creatives publicly. A showcase is a curated list of creatives that can be shared with external stakeholders. It includes three main sections: Showcase, Creatives, and Access. *** **1. Showcase Tab**

Showcase Tab on the "Create a New Showcase" page

* **Slug (URL Identifier)**: This field auto-generates the URL for your showcase, where the slug can be customized. This identifier will be part of the final URL used to share the showcase with others. * **Title**: Provide a name for your showcase. This will be displayed on the showcase page and serve as the primary identifier for the showcase in lists. * **Note**: Use this field to add any relevant notes or descriptions about the showcase. This information will only be visible internally to users with access to manage the showcase. *** **2. Creatives Tab**

Creatives Tab on the "Create a New Showcase" page

* **Select Creatives**: In this section, you can add specific creatives to your showcase. The available creatives can be filtered by tags, such as format group, template type, and features. Check the boxes next to the creatives you wish to include. * **Filter Panel**: On the left, you have a panel with filtering options, allowing you to quickly find creatives based on various criteria like Format Group, Template Type, Format Used, Advertiser, Category, and more. The 'Show' checkbox also allows you to decide whether or not that tag type will be shown in the public showcase for users to filter by. *** **3. Access Tab**

Access Tab on the "Create a New Showcase" page

* **Open Access URL**: This section generates a public URL for your showcase, which can be shared with others. By default, anyone with this link can access the showcase. * **Restrict Access**: If necessary, you can restrict access by adding a passphrase. This will require anyone accessing the showcase to enter the passphrase, offering more control over who can view the content. * **Copy** : Easily copy the password to share the showcase externally with stakeholders or partners. *** Once the showcase is configured, you can save it, and it will be accessible via the generated URL. The showcase will then display the selected creatives in a clean, public-facing format. ### **Managing the Master List** * The **Showcase Master List** contains all published creatives. Removing a creative from the Master List will remove it from all custom showcases where it appears. * The **Edit Preview URLs** option allows users to configure how each creative's preview link appears in the showcase.this ### **Editing Custom Showcases**

Edit/Copy/Remove option when hovering on a Custom Showcase on the Manage Showcases page

Once a custom showcase is created, users can edit the content and settings by clicking on the **Edit** button next to the showcase name. Showcases can also be copied or removed by using the other buttons. ### **Sharing the Showcase**

Copy URL button to easily get the sharing link for a showcase

Each showcase is given a unique URL, which can be shared externally. This allows clients or team members to view the curated content without requiring access to the platform. ## **Example Use Case** A marketing agency could create multiple showcases to present different categories of work, such as one for **Video Ads** and another for **Interactive Playables**. By organizing creatives in this way, the agency can easily share tailored collections with different clients. # Overview Deploy your Ads with Responsive Ads Welcome to the Ad Management section of Responsive Ads. Here, you can access the various pages that provide in-depth guidance on different methods of ad deployment. Deployments in ResponsiveAds are managed from the [summary page](/ad-management/summary-page). The page is broken up into a number of drawers, which when expanded allow you to manage the various deployments you are using for a creative. ## Learn more about:
Image ExportsGenerate and download static image exports of your creative./pages/Nc8Dniuz3zS2tDCYv3GU/files/VdPsCGjtiKkGnRvWc8Nd
Facebook Exportset up and export their ad creatives directly for Facebook campaigns/pages/TF8ufk3OmQ5DI4iOpTPq/files/MNeAFxKqFqB4lU7Q0NyA
HTML5 Exportexport your Creatives as zip files, compatible with most demand-side platforms/pages/aCruo49FqJcMpQ55fWEi/files/5tviDwh989Tu0zthju0z
Video/Animated Gifsexport your creatives as video files or animated GIFs/pages/CnJT1URjtvXaFV9QC3se/files/dd96MC3o86tx2ygg4gEj
Ad Serving Tagscreate, manage, and publish ad tag deployments for a creative/pages/X76iaeVIoDT3ODoFuAtc/files/VdPsCGjtiKkGnRvWc8Nd
# Image Exports Statics Export & Fallbacks

Images section on Summary Page

The **Images (Statics Export & Fallbacks)** section allows you to generate and download static image exports of the creative, including fallback images for older browser versions like Internet Explorer 9 or below. This ensures compatibility across a variety of platforms. Below is an explanation of the available options and actions: 1. **Fallback generation mode**:\ Allows users to choose between two modes for generating fallback images: * **Auto**: Automatically generates fallback images based on the creative's settings. This is the recommended default mode. * **Manual**: Provides users with more control, allowing them to manually adjust and update the fallback images. 2. **Regenerate fallbacks button**:\ Clicking this button regenerates the fallback images. **Note**: Regenerating the fallbacks will overwrite any manually updated fallbacks, and the creative will need to be republished after the fallbacks are regenerated. A warning message will appear to remind users of this action. 3. **Image package generation**:\ This section allows users to set up and download image packages, which include a set of selected sizes for the static exports. It provides flexibility in choosing specific sizes for export based on the creative's needs. 4. **Export Package Name**:\ Shows the name of the export package, typically representing the images that will be downloaded. For example, "Images (Set of Selected Sizes)" indicates that multiple sizes of images will be included in the package. 5. **Data Variant**:\ Placeholder for any data variants used in the creative. If none are used, this field remains empty. 6. **Type**:\ Indicates the type of export, typically relating to static image formats. 7. **Actions**:\ Provides action buttons to manage image downloads: * **Download Export**: Downloads all the images in the export package at once. * **Copy Export**: Will copy the export. * **Delete Export**: This will delete the export 8. **Timestamp**:\ Displays the time and date when the export package was generated. This helps track the latest version of the exported images and manage updates. #### **New Download** Modal - **Images (Statics Export & Fallbacks)**

New Download Modal in Images section

This modal provides flexible options for exporting the creative in various sizes and formats. Here’s how to use the modal: 1. **Name**:\ Enter a name for the image export package. This name helps identify the package and organize different export configurations. Example: "My Campaign Ad Creative Package." 2. **Format**:\ Select the ad format from the drop-down menu. In this case, "Fully-Fluid™" is selected, which is the default format for responsive designs. * There’s also a checkbox to **Confirm Fully-Fluid™ completed to enable Export in any size**. This ensures that the creative has been fully completed and is ready for export in the desired sizes. 3. **Type**:\ Choose the type of image file for export (supported types are PNG, JPG, TIFF, PDF). You can set the DPI and color mode for PDF and TIFF exports. 4. **Creative Variant**:\ If the creative has multiple variants, this drop-down allows users to select the specific variant they want to export. If there are no variants, this field remains empty. Learn more about Variants [here](/creating-ads/variants). 5. **Data Feed Variants:** Users can choose to **Include in export** if the creative uses data feed variants. This option is used when you upload a CSV file to generate different variants of the creative, changing for example texts, colors or images per exported image. Each included Data Variant will generate an image per size using the data in the selected CSV row(s). Learn more [here](/creating-ads/variants/creating-ads-with-dynamic-content-using-a-csv-file). 6. **Create & Add - Choose Sizes**:\ This section allows users to select the sizes they want to include in the export package. * Users can type a size (e.g., 2550, extra large, desktop) into the search bar, or choose from the list of predefined creative sizes (e.g., 1920x1080, 1200x1200). * After selecting the sizes, click the **Add** button to include them in the export package. 7. **Added to Package**:\ Once sizes are added to the package, they will appear in this section for review. This ensures users can see exactly which sizes are included before proceeding with the export. 8. **Save/Close**:\ After finalizing the export configuration: * Click **Save** to create the export package. This action will generate the image files based on the selected sizes and formats. * Click **Close** to exit the modal without saving changes.

Contents of an exported Image Package

# Facebook Export (Beta Feature) The **Facebook (Export)** section allows users to set up and export their ad creatives directly for Facebook campaigns. This feature is in beta and supports integration with Facebook Ad Manager through the export of creative packages tailored to Facebook's ad placement requirements. Below is a breakdown of the available actions and how to use the section:

Facebook (Export) section

1. **Log in With Facebook**:\ Before setting up any campaigns, users must log in to their Facebook account. Clicking the “Log in With Facebook” button will initiate the process to link your Responsive Ads account with your Facebook Ad Manager account for seamless integration. 2. **Package Name**:\ Displays the name of any existing Facebook export packages. If none exist, this field will be empty. 3. **Sizes**:\ Displays the ad sizes included in each package. Facebook ads often require specific dimensions, and this section will show which sizes have been chosen for the campaign. 4. **Actions**:\ Provides actions to manage Facebook Export packages: * **Create an ad**: This feature is coming soon * **Add Creative to Ad account library:** this ads the creative to your business manager library * **Delete Facebook Package:** this deletes the export package 5. **Timestamp**:\ Shows the time and date when the export package was created or last modified. This helps track the latest version of the package and its relevance to the campaign. 6. **New Package Button**:\ Clicking the "New Package" button opens the [**Facebook Package Set-Up** ](#facebook-package-set-up-modal-screen)modal, where users can configure a new set of creatives for export to Facebook. ### **Facebook Package Set-Up - Modal Screen**

New Package Modal

This modal appears when the you click "New Package" on the main screen. It allows for detailed configuration of Facebook ad packages. 1. **Name**:\ You can assign a name to the Facebook ad creative package. This helps organize and identify various ad exports. 2. **Format**:\ The drop-down menu allows you to select the ad format they want to use for this package. In this example, "Fully-Fluid™" is selected, but you may choose other available formats as per the creative's design. 3. **Create Package - Choose Sizes**:\ You can select the ad sizes to include in the export package by either typing the dimensions in the search box or choosing from the predefined sizes (e.g., 1920x1080, 1200x1920). Once selected, click **Add** to include them in the package. 4. **Select Sizes for Facebook Ad Placements / Ad Account Library**:\ This section allows you to specify which ad placements within Facebook you want to target with these sizes: * **Feeds**: Standard Facebook News Feed ads. * **Stories**: Ads specifically for Facebook or Instagram Stories. * **Articles**: Ads that will appear in Facebook Instant Articles. 5. **Customize Sizes Option**:\ Checking this box enables you to upload custom ad sizes directly to the Facebook Ad Account Library, offering more flexibility in size customization. 6. **Don't include placement information in this package**:\ Checking this option means that the package will be created without specific placement information, and Facebook ads cannot be created directly from this package. 7. **Save/Close**:\ After configuring the package, you can click **Save** to finalize the package or **Close** to exit the set-up without saving. # HTML5 Export Export .Zip Packages

HTML5 Section

The **HTML5 (Export .Zip Packages)** section allows you to export your Responsive Creatives as zip files, which are compatible with most demand-side platforms (DSPs) or can be used as standalone HTML5 ad creatives. This section provides options for configuring the export package, including selecting formats, sizes, K-weight, optimization, previewing and layout variants. Here's how to use this section: 1. **Export Package Name**:\ This column lists the name of any existing HTML5 export packages. If no packages have been created, this field will remain empty until a new package is generated. 2. **Formats and Sizes**:\ Displays the formats and sizes that have been included in the export package. This ensures that you can see which dimensions are being exported for use in their campaigns. 3. **Layout Variant**:\ Lists the specific layout variant used in the export, if applicable. Layout variants allow different configurations of a creative based on how the ad adapts to various sizes and placements. 4. **Type**:\ Indicates the type of export (HTML5 in this case). You can expect this section to consistently reflect the format for which the export is prepared. 5. **Actions**: Provides action buttons to HTML5 Exports: * **Preview Export:** This launches the ad sizes exported in a new window on your internet browser * **Download Export**: Downloads all the images in the export package at once. * **Copy Export**: Will copy the export. * **Delete Export**: This will delete the export 6. **Timestamp**:\ Shows the time and date when the export package was created or last modified. This helps you keep track of the latest version and make sure you are using the most recent files in your campaigns. 7. **New Export Button**:\ Clicking the **New Export** button opens the [**HTML5 Package Set-Up**](#html5-export-package-set-up-modal) modal. This allows you to configure a new HTML5 export package, where you can select formats, sizes, and optional layout or data variants for the export. #### HTML5 Export- Package Set-Up modal

Export Package Set Up Modal

The **Export Package Set-Up** modal allows users to configure and export HTML5 ad creatives as zip files. This provides options for customizing the export format, sizes, layout variants, and other configurations. Here's how to use the modal: 1. **Name**:\ Enter a name for the export package. This name helps to organize and identify different export configurations. Example: "My Campaign Ad Creative Package." 2. **Format**:\ Choose the ad format from the drop-down menu (e.g., "Fully-Fluid™"). * There is an optional checkbox to **Confirm Fully-Fluid™ completed to enable Export in any size**, ensuring the creative has been completed for export in all selected sizes. 3. **Layout Variant**:\ If the creative has layout variants, users can select a specific variant to export. This feature allows flexibility in exporting different versions of the creative based on varying layouts. 4. **Data Feed Variants**:\ Users can choose to **Include in export** if the creative uses data feed variants. This option is particularly useful for dynamic creatives where data-driven elements may vary. 5. **Type**:\ Select the export type. Users can choose from options like **Google DV360** or other DSPs, and configure settings such as **Max size** for optimizing the export file size. 6. **Include fallback images in the zip package**:\ If enabled, fallback images will be included in the export package. This ensures the ad is displayed correctly on platforms that may not support advanced formats like HTML5. 7. **Compress**:\ Users can enable font compression by checking the **Subset fonts** option, which will compress fonts (e.g., .woff, .woff2, .ttf, .otf) to reduce file size. This feature is currently in Beta. 8. **Create & Add ZIP Files - Choose Formats and/or Sizes**:\ Users can select the formats and sizes for the export: * Enter specific sizes in the search box (e.g., "2550, extra large, desktop") or choose from the predefined list of creative sizes (e.g., 1920x1080, 1200x1200). * Click the **Add** button to include these sizes in the export package. {% hint style="warning" %} #### Info: Stripped HTML5 (Lightweight) Export Limitations This section will soon include a step-by-step tutorial on how to export ZIP packages. In the meantime, please note that **HTML5 Lightweight (Stripped)** export versions do not support many of the advanced RAD features. These exports are optimized for file size and speed, and therefore exclude certain widgets and components. **Unsupported Features in Stripped HTML5 Exports:** * Analytics integrations * Page Scroller functionality * Conde-specific formats * Data Layer * Conditions Table * YouTube widget * Carousel widget * Seeker widget * Countdown widget * Playin widget * HTML5 Video widget * Adsonica component * Brightcove integration * Image360 * iFrame * Social Icon widget * Social Group widget * Skin widget * Twitter feed * Vimeo widget * Expand Lightbox These stripped exports are ideal when a simplified, faster-loading ad is required, but keep in mind that key interactive or tracking features may be missing. {% endhint %} 9. **Added to Package**:\ After selecting the sizes, they will appear in this section for review before proceeding with the export. This helps users verify the selected sizes are correct. 10. **Save/Close**: * Click **Save** to finalize and create the export package. The system will generate the HTML5 zip files based on the selected configurations. * Click **Close** to exit the modal without saving changes. # Video/Animated Gifs (Beta) ## **Video/Animated GIF (Export)** section

Video/Animated Gif Section

The **Video/Animated GIF (Export)** section allows users to export their responsive ad creatives as video files or animated GIFs. This feature is currently in **beta**, and direct video exports require contacting Responsive Ads support to enable this functionality. Here’s an overview of how to use the section: 1. **Video Package Name**:\ This column lists the name of any existing video or animated GIF export packages. If no packages have been created yet, this field will remain empty until a new package is generated. 2. **Formats and Sizes**:\ Displays the formats and sizes that have been included in the export package. This ensures that users can see which dimensions are being exported as video or animated GIF files. 3. **Variant**:\ Lists any specific variants of the creative that have been included in the export. Variants allow users to export different creative versions, such as those with dynamic content or alternative designs. 4. **Type**:\ Indicates whether the export is a video or animated GIF. The file type will be specified here based on the user's selection during the export process. 5. **Actions**:\ Placeholder for any actions related to the export package, such as downloading or managing the package after it has been generated. 6. **Timestamp**:\ Displays the time and date when the export package was created or last modified, helping users track the latest versions of their video or animated GIF exports. 7. **New Export Button**:\ Clicking the **New Export** button opens the [**Video/Animated GIF Package Set-Up**](#video-animated-gif-package-set-up-modal) modal, allowing users to configure a new export package. Users can select formats, sizes, and other relevant options before creating the final video or GIF files. ### Video/Animated GIF Package Set-Up modal

Export Package Set-Up modal

The **Export Package Set-Up** modal allows users to configure their export settings for video or animated GIF files. This modal provides options for selecting formats, sizes, and customizing video settings. Below is a breakdown of how to use the modal: 1. **Name**:\ Enter a name for the export package. This will help identify the specific package for future use. Example: "My Campaign Ad Creative Package." 2. **Format**:\ Select the ad format from the drop-down menu. For example, "Fully-Fluid™" is the responsive format available here. * There’s also a checkbox to **Confirm Fully-Fluid™ completed to enable Export in any size**, which ensures that the creative is finalized before proceeding with the export. 3. **Creative Variant**:\ If the creative has multiple variants, select the desired variant from this drop-down menu. 4. **Type**:\ Select the export type from the drop-down menu. Options may include: * **MP4 Video**: For video exports. * **Animated GIF**: For creating GIF exports. * **MOV Video:** For video exports. MOV files can be exported as a Video with an Alpha Layer which allows for transparency. 5. **Video Settings - Duration (s)**:\ Enter the duration of the video or GIF in seconds. This field controls how long the final exported video or GIF will run. Example: "10.01" seconds. The maximum allowed length is 89 seconds. 6. **Create & Add .ZIP Files - Choose Formats and/or Sizes**:\ Users can select the creative sizes they want to include in the export. Available sizes are listed (e.g., 1920x1080, 1200x1200), and users can search for specific sizes using the input field or select from the list and click **Add** to include them in the export package. 7. **Added to Package**:\ Once sizes are added, they will appear in this section for review. This ensures that users can verify the sizes being exported before finalizing the package. 8. **Save/Close**: * **Save**: After configuring the package, click **Save** to generate the video or animated GIF export. * **Close**: Click **Close** to exit the modal without saving any changes. ## Video Examples ### How to Export an animated ad into mp4 Video (Social Ad Formats) In this Video, Matt explains how an ad using a set of social media formats can be exported into mp4 files. {% embed url="" %} ### How to Export an animated ad into mp4 (IAB Ad Formats) In this video Matt explains how to export an ad which uses IAB or social formats to mp4. {% embed url="" %} # Ad Serving tags Deployments & Ad Serving

Ad Tags Section

The **Ad Tags (Deployments & Ad Serving)** section allows users to create, manage, and publish ad tag deployments for their creative, which can be third-party served through ResponsiveAds. {% hint style="danger" %} For Ads served through RepsonsiveAds p**lease note that Ad Serving fees apply**. {% endhint %} There are differences in how multi-size formats are served depending on the platform: * **Publisher Ad Servers** (e.g., Google Ad Manager - GAM): Multi-size formats can expand to fit the page's width and display edge-to-edge, providing a fluid experience. * **Agency Ad Servers or Demand-Side Platforms (DSPs)**: Serving multi-size formats via these platforms can require specific setup. For assistance with multi-size programmatic ad configurations, please contact ****. This section also supports the integration of custom trackers and third-party ad servers, offering advanced control over fluid, responsive multi-size ads. It includes premium features such as custom analytics and licensed web fonts. {% hint style="warning" %} **Note**: If you plan to use a **Fully-Fluid™ creative** for deployment, please consult with ResponsiveAds support. Not all DSPs are compatible with fully-fluid tags. {% endhint %} **Buttons at the top of the table:** * **Download All Tags**:\ Clicking this button downloads all ad tags related to the selected deployments. This is useful for batch export of all tags associated with the creative. * **Dynamic Test Tag**:\ This button generates a dynamic test tag for the creative, allowing users to test and validate ad performance and behavior in real-time before finalizing the deployment. * **Preview All**:\ Clicking this button allows users to preview all the creative formats in the selected deployments to check responsiveness and behavior before publishing. [(Opens the Preview Screen)](/ad-management/preview-page) **Table Headings and buttons:** 1. **Deployment Name**:\ By default you will have 1 deployment per each format you used in your creative. Those default deployments are called "default". You can customize these by clicking "edit deployment", or alternatively you can create a new deployment and customize it to your needs. 2. **Format**:\ Indicates the ad format for each deployment (there can be only one format per deployment), such as: * **Page-Scroller™ (100%)** * **Fully-Fluid™** * **Masthead (4x1-16x9)** * **Bill Board (970x250)** * **Fluid 250H** * **Square (300x250)** 3. **Layout Variant**:\ Displays the layout variant used for the creative deployment. This field remains empty unless a specific layout variant is defined for the deployment. 4. **Market**:\ Placeholder for targeting specific markets. This field remains empty unless market targeting has been set up for a specific deployment. 5. **Actions**:\ Each deployment has several action icons: * **Edit Deployment (Pencil Icon)**: Opens the deployment for editing, allowing users to configure or modify the deployment details. * **Configure (Settings Icon)**: Allows users to access detailed settings related to ad serving and tracking. * **Tag (Tag Icon)**: Clicking on this button opens a pop-up with a tag that you can copy and place on your page. In order to get an ad tag, you need to publish your ad. * **Preview (Arrow Icon)**: Provides a live preview of the creative to ensure proper rendering before publication. [(Opens the Preview Screen)](/ad-management/preview-page) * **Delete (Trash Icon)**: Deletes the deployment from the list. Users should confirm before deletion as it cannot be undone. 6. **Status**:\ Displays the current status of the deployment. In this case, all deployments are marked as **Draft**, indicating that the deployment has not been published yet. 7. **Publish All**:\ Once all the configurations are finalized, users can click the **Publish All** button to make the ad deployments live. This will push the ads to the selected ad server or deployment platform. 8. **New Deployment**:\ Clicking this button opens a [create new deployment configuration modal](#create-new-deployment-configuration-modal) where users can create a new ad tag deployment for the creative. It allows the selection of formats, sizes, and other options specific to the deployment. ### Create New Deployment Configuration Modal

Create New Deployment Configuration Modal

The **Create New Deployment** modal allows users to configure a new ad tag deployment for their creative. This modal provides options for selecting formats, layout variants, markets, and adding trackers for impression and clickthrough metrics. Here's how to use the modal: 1. **Name**:\ Enter a name for the deployment. By default, the system provides a name like "Deployment 7," but users can customize this name to better describe the deployment. 2. **Format**:\ Select the ad format for this deployment from the drop-down menu. Available formats include options such as **Fully-Fluid™**, ensuring the creative adjusts responsively across different devices and sizes. 3. **Layout Variant**:\ When variant is set to Dynamic, the conditions table is used to select which variant is displayed. Learn more about variants and condition tables [here](/creating-ads/variants/condition-variants)[.](/creating-ads/variants) 4. **Market**:\ Select the market for which this deployment is intended. If market targeting is not required, this field can be left blank. 5. **Impression Tracker**:\ Add one or more impression trackers to the deployment. This feature allows users to track the number of times an ad is viewed: * **Tracker Name**: Enter a name for the tracker (e.g., "Tracker 1"). * **URL or Markup**: Choose whether the impression tracker will use a URL or custom markup for tracking. * **Add New Impression Tracker**: Click this link to add additional impression trackers if needed. 6. **Clickthrough URL**:\ Enter the URL where users will be redirected when they click anywhere on the ad. Setting a Clickthrough URL in this deployment doesn't overwrite any individual clickthrough URLs you’ve set up in the editor for specific elements (e.g., CTA buttons or Carousel slides), you will see those in the pop-up to edit deployment. However, if you’ve set an overall Clickthrough URL in the Deployment Settings inside the editor, this deployment-level URL will take precedence and overwrite it. 7. **Save/Cancel**: * **Save**: After configuring the deployment, click **Save** to create the new deployment. * **Cancel**: Click **Cancel** to close the modal without saving changes. *** ## Related Guides on Tracking & Tag Integration These guides help you set up and troubleshoot tracking tags in ResponsiveAds for different use cases and platforms:
Cover image
Using CM360 Floodlight TagsConfigure impression, click, and conversion tracking with Campaign Manager 360 and ResponsiveAds./files/VdPsCGjtiKkGnRvWc8Nd/pages/OCLLt5rAQN6D4IEoVcDS
Google Ad Manager (GAM) Setup: Custom CreativesDeploy ResponsiveAds tags in GAM as Custom Creatives./files/MNeAFxKqFqB4lU7Q0NyA
# Using CM360 Floodlight Tags with ResponsiveAds Ad Tags ## Overview This guide walks you through integrating Google Campaign Manager 360 (CM360) Floodlight tags within ResponsiveAds ad deployments. These tags enable impression, click, and conversion tracking using standard CM360 workflows and are fully compatible with Google Tag Manager. ### Prerequisites * Access to a Campaign Manager 360 account with Advertiser-level permissions. * Access to a ResponsiveAds account. * Access to your site’s codebase or Google Tag Manager (GTM) container. * A Campaign Tag Sheet from CM360 listing all required tags. * A list of final destination URLs. *** ### Step-by-Step: Setting Up Floodlight Tracking in ResponsiveAds #### Step 1: Plan Tracking * Identify creatives that need: * Impression tracking * Click tracking * Conversion tracking (e.g., "Thank You" page) * Collect landing page URLs for attribution #### Step 2: Set Up Floodlight Activities in CM360 1. Log into [Campaign Manager 360](https://cm360.google.com) 2. Navigate to **Advertisers > Floodlight Activities** 3. Click **+ New Floodlight Activity** 4. Configure the new activity: * **Name**: Example - *Spring Campaign – Impressions* * **Activity Type**: Counter (for impressions/clicks) or Sales (for conversions) * **Counting Method**: Standard 5. Click **Save**

Setting up in CM360

#### Step 3: Generate Floodlight Tags 1. Go back to the Floodlight Activities list 2. Select your activity 3. Click **Generate Tags** 4. Copy the following: * Impression Tag * Click Tracker Tag * Conversion Tag

Download Tags Page in CM360

#### Step 4: Add Tags to ResponsiveAds **Impression Tracking** 1. Open the creative’s **Summary Page** in ResponsiveAds 2. Scroll to **AdTags & Deployments** 3. Click the pencil icon to edit the deployment 4. Paste the **Impression Floodlight Tag** into the **Impression Tracker** field 5. Save the deployment **Click Tracking** 1. Replace the creative’s destination URL with the CM360 Click Tracker 2. Ensure the final landing page URL is added after the ? in the click tracker URL. 3. Example: ``` https://ad.doubleclick.net/ddm/trackclk/N123.456789CLIENT/B12345678.123456789;...?https://yourlandingpage.com ```

Cickthrough URL with appended destination URL

*** **Conversion Tracking** 1. Place the **Floodlight Conversion Tag** on the landing or "Thank You" or confirmation page of your site 2. Use Google Tag Manager or embed directly in your site’s HTML 3. Validate with Tag Assistant, browser tools, or the CM360 Tag Validator

Tag Config in CM360

#### Step 5: Test Tags * Load an ad preview in ResponsiveAds * Confirm the following: * The impression tag fires when the ad loads * The click tracker fires when clicked * The conversion tag fires on the thank-you page * Use tools like Google Tag Assistant or browser developer tools to validate #### Step 6: Monitor in CM360 * Log into CM360 * Go to **Reporting** * Confirm tracking for: * Impressions * Clicks * Conversions *** ### Creating a Click Tracker URL in CM360 #### Step 1: Log into CM360 Go to #### Step 2: Create a Click Tracker Creative 1. Navigate to your advertiser 2. Go to **Campaigns** 3. Open the campaign and select **Creatives** 4. Click **New Creative** 5. Choose **Click Tracker** as the creative type 6. Fill in the fields: * Name: Example - *Spring-Sale-CTA* * Landing page URL: e.g., `https://yourlandingpage.com` * Compatibility: Select **Display** 7. Save the creative

Click Tracker Config

#### Step 3: Generate the Click Tracker URL 1. Open the Click Tracker creative 2. Go to the **Ad Tags** section 3. Choose: * **Tag Type**: Standard * **Format**: Click tracker 4. Copy the complete click tracker URL Example: ``` https://ad.doubleclick.net/ddm/trackclk/N123.456789CLIENT/B12345678.123456789;...?https://yourlandingpage.com ``` #### Step 4: Use the Click Tracker * Insert the full click tracker URL into ResponsiveAds or other ad platforms * Make sure it links to the correct final landing page #### Step 5: Test the Click Tracker * Paste the URL in your browser * Confirm it redirects correctly * Monitor CM360 reporting to confirm click tracking #### Optional: Add UTM Parameters Append UTM tags for Google Analytics: ``` https://yourlandingpage.com?utm_source=cm360&utm_medium=display&utm_campaign=spring_sale ``` *** ### Adding Impression Tags in ResponsiveAds #### Step 1: Open the Creative * Go to the **Creatives** tab in ResponsiveAds * Open the **Summary Page** of your creative #### Step 2: Edit the Deployment * Scroll to **AdTags & Deployments** * Click the **Edit** (pencil) icon on the relevant deployment #### Step 3: Add Floodlight Tag(s) * In the **Impression Tracker** field, paste the CM360 Floodlight Tag(s) * You can add multiple trackers if needed #### Step 4: Add Additional Deployments (if needed) * Click **Add Deployment** * Repeat tag configuration for each deployment #### Step 5: Save and Test * Save your deployments * Preview your creative to ensure tracking is active * Use testing tools to verify tag firing #### Video Walkthrough Watch this walkthrough to see how to add impression tracking:
{% embed url="" %} *** ### Adding CM360 Floodlight Tags in Google Tag Manager (GTM) #### Step 1: Get Floodlight Details from CM360 1. Log in to Campaign Manager 360 (CM360). 2. Navigate to your Advertiser > Floodlight Activities. 3. Select the Floodlight Activity (conversion or counter). 4. Click Generate Tags. 5. Choose Google Tag Manager as the tag type (or use Standard tags if GTM isn’t listed). 6. From your CM360 Tag , copy: * Advertiser ID (e.g., `DC-1234567`) * Group Tag String (e.g., `example.com/page`) * Activity Tag String (e.g., `signup`, `purchase`) * Counting Method (e.g., `standard`, `unique`) #### Step 2: Log into GTM * Go to * Select your GTM container #### Step 3: Create the Tag 1. Click **Tags > New** 2. Under **Tag Configuration**, choose: * Floodlight Sales * Floodlight Counter 3. Enter the Floodlight parameters: * Advertiser ID * Group Tag String * Activity Tag String * Counting Method 4. Optional fields: * Revenue * Order ID * Custom parameters #### Step 4: Add a Trigger * Click **Triggering > + New Trigger** * Choose your trigger type: * Page View (e.g., for `/thank-you`) * Custom Event (e.g., form submission) * Example trigger: * Trigger type: Page View * URL contains: `/thank-you` or `/confirmation` #### Step 5: Save and Test * Name your tag clearly (e.g., `Floodlight - Signup Conversion`) * Click **Preview** to test in a live environment * Use **Tag Assistant**, **Chrome DevTools**, or **CM360 Validator** to confirm firing #### Step 6: Publish 1. Once tested, click Submit in the top-right of GTM. 2. Add a version name and description (e.g., “Added Floodlight tag for signup”). 3. Click Publish. #### Optional: Add Multiple Tags * Repeat the steps for each additional Floodlight event * Assign a separate trigger and unique activity string to each # Google Ad Manager (GAM) Setup: Custom Creatives Follow this guide to integrate your ResponsiveAds creative into GAM as a Custom Creative. Covers tag setup, pixel tracking, and click-through verification. ## **Step 1: Retrieve Your ResponsiveAds Tag** 1. Log in to your **ResponsiveAds dashboard**. 2. Navigate to the **Summary Page** for your creative. 3. Scroll to the **Ad Tags and Deployments** section. 4. Confirm that the **Clickthrough field** in your Deployment includes a backup or default URL. 5. Select **Save Deployment**. 6. Select **Publish**. 7. Locate and select your **GAM Custom Tag**.
8. Choose the appropriate tag type. 9. Click **Copy to Clipboard** to copy the one-tag code. 10. *(If a tag was provided by your team, retrieve it from your shared Tag Sheet in Google Drive.)* *** ## Step 2: Custom Creative in GAM ### Prerequisites * You have an **Advertiser** set up in GAM. * You know the **ad size** (e.g., 300×250) and have any assets ready (images/JS/HTML). * All third-party pixels/trackers support **HTTPS**. (GAM requires SSL for macro expansion in many cases.) ### Create the Custom Creative 1. In GAM, go to **Delivery → Creatives → New creative**. 2. Select the **Advertiser**, then choose **Custom (Display creative type)**.
3. Enter a **Name** and select the **Target ad unit size**. 4. For **Code type**, choose **Standard**. 5. Deselect **SafeFrame**. 6. Click **Save**. *** ### Step 3: Add Your ResponsiveAds Tag 1. Open the Custom Creative you just created. 2. Paste your **ResponsiveAds GAM Custom Ad Tag** into the **Code field**. 3. Save your changes. *** ### Step 4: Add Tracking Pixels You can add third-party tracking pixels in two ways: **Option A: No-code (recommended)** * In the creative, use the **Third-party impression tracking URLs** field. * Add one or more pixel URLs. * You can include macros such as `%%CACHEBUSTER%%`. **Option B: Inline (advanced)** * Add `` or `