# Creative Builder Fundamentals

# Project Set Up

#### ****Building a new creative****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">To set up a new creative, click the </span>****'New Creative'****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> button, which is available globally on the Adctv platform. </span>

![](https://docs.adctv.com/uploads/images/gallery/2025-08/embedded-image-rwvgjodk.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">This will open the </span>****'New Creative'****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> pop-up window.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-08/embedded-image-bh6hl8yg.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> 1. You will see a list of available </span>****Ad Types****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">—select the one that best suits your campaign. </span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> The available options include </span>****Rich Media Display****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">, </span>****Interactive Video****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">, </span>****Interstitial Ads****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">, and </span>****Interactive Connected TV (CTV)****<span style="color: rgb(0, 0, 0);">.</span>

****Rich Media Display****  
<span style="color: rgb(0, 0, 0);">Rich media display ads are visually engaging and include advanced elements like video, audio, and interactive features to capture user interest more effectively.</span>  
****Interactive Video****  
<span style="color: rgb(0, 0, 0);">Interactive video ads provide a dynamic platform for storytelling, allowing brands to convey their message thereby offering an effective way to capture audience attention, drive engagement, and achieve marketing objectives.</span> ****Interstitial Ad****  
<span style="color: rgb(0, 0, 0);">An interstitial ad is a type of full-screen ad that covers the interface of its host app or website.</span>  
****Interactive CTV Ads****  
<span style="color: rgb(0, 0, 0);">Interactive Connected TV ads are tailored for streaming platforms accessed via smart TVs, gaming consoles, and streaming devices (like Amazon Fire TV or Apple TV). These ads often incorporate interactive components to enhance viewer engagement.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">2. Enter the </span>****Creative Name****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">3. Enter the </span>****Campaign Name****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">, </span>****Advertiser Name,****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> and </span>****Publisher Name****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">. - If the campaign name you enter already exists, the advertiser and publisher fields will auto-populate. </span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">4. Enable </span>****Responsive Layout****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> (optional) – Check this box if you want the creative to be built with a responsive layout that adapts to various screen sizes.</span>

<span style="color: rgb(0, 0, 0);">5. Choose</span> ****Canvas Size****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">: Select from </span>[predefined ad dimensions](https://drive.google.com/file/d/1lvkSawOp1FeJtlF-hxWb8uweseK62rnI/view)<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> or input </span>[custom dimensions](https://drive.google.com/file/d/18H83z7dKUR3t1VlvVSXZWFOLBJ5KVU_x/view?usp=drive_link)<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> as required.</span>

<span style="color: rgb(0, 0, 0);">Once all necessary details are filled out, click the "</span>****Create****<span style="color: rgb(0, 0, 0);">" button. You will then be redirected to the Drag and Drop Ad Builder, where you can begin building your ad.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">👉 Want to customize your projects? Know about the </span>[Adctv Creative Builder](https://docs.adctv.com/books/product-guide/page/toolbar-and-panels)<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to get started.</span>

# Working with Components

<span style="white-space: pre-wrap;">The Components (Interactive Widgets) panel is accessible from the top toolbar. </span>

[![Toolbar2.png](https://docs.adctv.com/uploads/images/gallery/2025-11/scaled-1680-/toolbar2.png)](https://docs.adctv.com/uploads/images/gallery/2025-11/toolbar2.png)

Getting started is easy—simply drag and drop any component from the list onto your canvas based on the needs of the creative you’re building.

[![image.png](https://docs.adctv.com/uploads/images/gallery/2025-11/scaled-1680-/image.png)](https://docs.adctv.com/uploads/images/gallery/2025-11/image.png)

Below is the list of widgets available within the Adctv platform.

[Adctv Widgets](https://docs.google.com/spreadsheets/d/1z4pD1dsh02L-U4CAciNr5zZKmUaElVPxYSrTKhSaz84/edit?gid=1590277982#gid=1590277982 "Adctv Widgets")

# Design Tools



# Building Ads from Adctv Templates

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> Adctv offers a collection of built-in templates for both </span>****Rich Media Display****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> and </span>****Connected TV (CTV)****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> ad formats. If starting from a blank canvas feels complex or time-consuming, you can simply select a pre-designed template that suits your creative needs, customize it with your own assets, and quickly build your ad with minimal effort.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Even when using a template, you have </span>****full creative flexibility****<span style="color: rgb(0, 0, 0);">. You can:</span>

- <span style="color: rgb(0, 0, 0);">Move and reposition elements such as logos</span>
- <span style="color: rgb(0, 0, 0);">Rearrange components to match your desired layout</span>
- <span style="color: rgb(0, 0, 0);">Add or remove elements as needed</span>
- <span style="color: rgb(0, 0, 0);">Incorporate animations for enhanced visual impact</span>

#### ****Selecting a Template****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Within the </span>****Template****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> module, browse and select your preferred template. </span>

**Screenshot Pending**

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Templates are organized by </span>****Ad Type****<span style="color: rgb(0, 0, 0);">, and you can use filters to narrow your options by:</span>

- ****Ad Size****
- ****Ad Category****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> (e.g., responsive, expandable)</span>
- ****Components Used****

**Screenshot Pending**

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Click on any template to view its details in a pop-up. To preview the template, simply click </span>****‘Preview Template’****<span style="color: rgb(0, 0, 0);">.</span>

**Screenshot Pending**

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Once you've found the right template, click </span>****‘Use This Template’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">. You’ll be prompted to enter your creative details in the </span>****New Creative****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> pop-up. After filling in the necessary information, click </span>****‘Create’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to get started with customizing your ad using the Drag-and-Drop Builder.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">When your creative is complete, click </span>****‘Export’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to generate the final ad tag.</span>

****Saving a Creative as a Template****

<span style="color: rgb(0, 0, 0);">You have two options to save a creative as a template:</span>

****1. From the Editor Page:****

<span style="color: rgb(0, 0, 0);">While on the editor page of your creative, open the navigation menu and select ‘Save as Template’. A pop-up will appear prompting you to enter a name for your template. Click ‘Create’ to save it. All templates you create will be stored under Templates &gt; My Templates, where you can view or customize them as needed.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-grpgmuka.png)

****2. From the Creative Card****

<span style="color: rgb(0, 0, 0);">You can also save a creative as a template without opening the editor. Open your campaign and locate the creative you want to convert. On the creative card, click the ‘Save as Template’ icon. A pop-up will appear, allowing you to name the template. Click ‘Create’ to save it.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-mgqc5box.png)

****Adding a Template to Your Creative****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Within the builder, you have the option to add a template to your current creative. On the left-hand side, you’ll find the </span>****Templates****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> module.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-qqcftuqp.png)

<span style="color: rgb(0, 0, 0);">This module displays templates that match your selected canvas size, making it easy to choose one that fits your layout.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Simply browse through the available templates and click </span>****‘Add to Page’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to instantly insert it into your creative for further customization.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-tvkmayzt.png)

# Brand Kits

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">The </span>****BrandKit**** <span style="color: rgb(0, 0, 0);">module allows you to seamlessly store and manage assets for multiple brands in one place.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Share your Brand Kit with collaborators through a unique link, giving them access to view or upload brand assets as needed. </span>

<span style="color: rgb(0, 0, 0);">Easily upload logos, define color palettes, add fonts, and include other media such as images and videos.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">On the Dashboard, click </span>****‘Brand Kits’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> from the navigation bar on the left.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-7qafdbc4.png)

<span style="color: rgb(0, 0, 0);">To create a new Brand Kit, click on ‘New Brand Kit’, enter a name, and then click ‘Create’.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-izwmxqbx.png)

<span style="color: rgb(0, 0, 0);">You're now inside the Brand Kit. Here, you can add logos, fonts, colors, images, and videos to customize your brand kit.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Click </span>****‘Add Logo’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to upload your brand logos.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-xec3unjf.png)

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-jw6hfhnb.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Click </span>****‘Add Fonts’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to select and upload font files.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-1avnbklo.png)

<span style="color: rgb(0, 0, 0);">For each font added to the kit, users can create a variant, duplicate it, or delete it. Fonts can also be categorized by setting them as Heading, Subheading, Body, Button Text, Custom, or None.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-y59hgoj2.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Under the </span>****Color Palette****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> section, use the color picker to select and save individual colors, or create complete color palettes.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-vlshjlit.png)

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-beg2baep.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">In the </span>****Images**** <span style="color: rgb(0, 0, 0); white-space: pre-wrap;">section, users can upload and save image assets for the brand. </span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-demuwgyy.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">These assets can also be organized into different groups. To create a group, click on ‘Create Group’, enter a name, and upload images directly from the popup. </span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-oduisn0v.png)

<span style="color: rgb(0, 0, 0);">Each uploaded image includes options to Rename, Move to Group, Replace, Duplicate, or Delete.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-ejkmcgtv.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">In the </span>****Videos**** <span style="color: rgb(0, 0, 0);">section, users can upload and save video assets for the brand. These assets can also be organized into different groups.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-ladugqtg.png)

<span style="color: rgb(0, 0, 0);">To create a group, click on ‘Create Group’, enter a name, and upload videos directly from the popup. Each uploaded video includes options to Rename, Move to Group, Replace, Duplicate, or Delete.</span>

<span style="color: rgb(0, 0, 0);">Each Brand Kit comes with the following options:</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-duvb0m0e.png)

****1. Rename****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – Change the name of a Brand Kit.</span>

****2. Copy****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – Create a duplicate of the Brand Kit.</span>

****3. Move to Folder****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – Organize Brand Kits into folders. To create a new folder, click </span>****‘New Folder’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> and enter a name. Then, use the </span>****‘Move to Folder’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> option to place the Brand Kit into an existing folder.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-pilrsl4d.png)

****4. Share****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – Collaborate by sharing your Brand Kit via a unique link. No login is required for users to access it. When you click </span>****‘Share Brand’****<span style="color: rgb(0, 0, 0);">, a popup will display two links:</span>

- ****Edit Link****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – Allows collaborators to upload assets to the Brand Kit.</span>
- ****View Link****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – Grants view-only access to the kit without the ability to upload or edit assets.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-myg5ub4q.png)

****5. Delete****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> – to remove the Brand Kit.</span>

# Layouts

<span style="color: rgb(0, 0, 0);">You can select and group multiple components to create a custom layout. Once created, the layout can be named, saved, and reused anytime.</span>

<span style="color: rgb(0, 0, 0);">This is particularly helpful for building reusable sections—such as headers or footers—that you can easily insert into your ads whenever needed.</span>

****For example, here I have a description text, a QR code, and a CTA text.****

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-2etzr4th.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">To turn these into a custom layout, start by selecting all three elements—hold the Shift key while clicking on each one. Then, click the </span>****‘Create Group’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> icon at the top to group them together.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-grrwkk75.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Next, click on the </span>****‘Create or Edit Component’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> button to begin creating your custom layout. </span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-z04omh3u.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Give your layout a name and upload a thumbnail image. Once you're done, click </span>****‘Create’****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> to save it.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-n9hmxzkr.png)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">The saved layout will be available in the </span>****Layouts****<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> module within the creative editor page and can be reused in any future creatives.</span>

![](https://docs.adctv.com/uploads/images/gallery/2025-09/embedded-image-myevqwtj.png)