# Interface Overview

# Navigation and Layout

##### <span style="color: windowtext;">The Adctv Studio interface is designed for ease of use, with a clean layout and intuitive navigation.</span>

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

##### Left-Hand Navigation Menu:

<span style="white-space: pre-wrap;">On the left side of the screen, you’ll find the </span>****Navigation Menu****, which allows quick access to key modules within the platform:

<span style="white-space: pre-wrap;">· </span>****Dashboard****<span style="white-space: pre-wrap;"> – Your homepage showing campaign stats, updates, and quick links.</span>

<span style="white-space: pre-wrap;">· </span>****Campaigns****<span style="white-space: pre-wrap;"> – View, create, and manage all your advertising campaigns.</span>

<span style="white-space: pre-wrap;">· </span>****Creatives****<span style="white-space: pre-wrap;"> – Manage and build your ad creatives here.</span>

<span style="white-space: pre-wrap;">· </span>****Templates****<span style="white-space: pre-wrap;"> – Access pre-built templates to speed up creative development.</span>

<span style="white-space: pre-wrap;">· </span>****Brand Kits****<span style="white-space: pre-wrap;"> – Store your brand assets such as logos, fonts, and color palettes.</span>

<span style="white-space: pre-wrap;">· </span>****Team****<span style="white-space: pre-wrap;"> – Manage your team members and their roles.</span>

<span style="white-space: pre-wrap;">· </span>****Schedule Reports****<span style="white-space: pre-wrap;"> – Set up and view scheduled campaign performance reports.</span>

<span style="white-space: pre-wrap;">· </span>****Trash****<span style="white-space: pre-wrap;"> – Recover or permanently delete removed items.</span>

##### Top Navigation Bar:

<span style="white-space: pre-wrap;">At the top, you’ll find: - A </span>****Search Bar****<span style="white-space: pre-wrap;"> to find templates or campaigns quickly. - A </span>****Notification Bell****<span style="white-space: pre-wrap;"> to view alerts. - Your </span>****User Profile****<span style="white-space: pre-wrap;"> dropdown (click on your name) to access profile settings. - A </span>****“New Creative”****<span style="white-space: pre-wrap;"> button to start building a creative from any screen.</span>

##### ****Dashboard****

The Adctv Dashboard provides a summary of campaign performance over the last 7 days within your organization, displaying key metrics such as impressions and CTR.

It also lists recently created creatives along with performance indicators and offers quick actions like preview and edit. Additionally, the dashboard highlights newly added templates, making it easy to start building creatives right away.

##### ****Campaigns****

<span style="color: rgb(0, 0, 0);">From here, you can create a new campaign. All previously created campaigns will be displayed here as individual cards.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfdEy-BkXt-EI1werW4TpwEgoDS_c-D3l6q2RWq1CaiZ2phf322b-vW4jEBDUbK6jj4PC4ed0nAIgIC0sClrySG3uA248NcAoGoaxmSHoKecH9b9gmhFF0_SlUyEqa1A_uuX84LAQ?key=O-0IfCqV3YaN6MPNlqaI_xOP)

##### ****Creatives****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Here, all creatives belonging to an organization will be listed. </span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd047WhwV6SK34B16MJMgpNPeXWPYgVDt2C1SKr3sRAmRezw_J7ync97ooFQpZ84uKiryfLQvPLU8mwe4KSpAhaxDuvS3C45FJJxWUfxhAHDjhd0OPKCWi2hHpUxqnGe_K50ztEpA?key=O-0IfCqV3YaN6MPNlqaI_xOP)

##### ****Templates****

<span style="color: rgb(0, 0, 0);">We offer a variety of predefined templates for ease of use, which will be listed here. Users can also create and save custom templates, and these will be displayed as well.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXf1abwowqRw-vhsctBVBgNY1S3Y_Fb1I3ljWsbaKOu-wTD33f1q-RpFqbH7X-pxbc17ak7VWohS7K5kuEy0K9LH9UJO96ugRPf2IcHQWFXhW1CqqKL4GgeWSVroeMExuu1E0EHoNg?key=O-0IfCqV3YaN6MPNlqaI_xOP)

##### ****Brand Kits****

<span style="color: rgb(0, 0, 0);">The Brand Kits module allows you to store assets for multiple brands.</span>

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

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Users can effortlessly share their Brand Kit with collaborators via a unique link, granting them access to brand assets. Collaborators can upload logos, save color palettes, add fonts, and include other assets like images and videos. </span>

<span style="color: rgb(0, 0, 0);">This can be done by the Adctv user, or, once the kit is shared, the brand can upload assets themselves. No username or password is required for the brand to add items.</span>

##### ****Team****

<span style="color: rgb(0, 0, 0);">This module allows you to manage team members. You can create new users, edit existing user details, delete users, and change passwords for team members as needed. This module helps you maintain control over your organization's user access and permissions</span>

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

##### ****Trash****

<span style="color: rgb(0, 0, 0);">This module contains all deleted creatives, campaigns, and brand kits. Users can either permanently delete these items or restore them for future use.</span>

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

# Toolbar and panels

##### <u>****Adctv Creative Builder****</u>

<span style="color: rgb(0, 0, 0);">Here is a quick walkthrough of the Adctv Creative Builder.</span>

****1. Canvas****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Let’s start with the drag-and-drop ad builder. Here’s your canvas where you’ll be creating your ads. </span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeYO7yFM_xCTAInq-PgVX53lsEUIX20z7yoJdoF0fBXheWzWnmMlL76rhkRQYER6yLfRccTWnwtvPTIDJvt6wS5ZE6QN3S3tDJ0NqotyrY0xy5p9NphhZFjSidXJPVJRnqkEmgi?key=O-0IfCqV3YaN6MPNlqaI_xOP)

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">It’s simple to get started, just drag and drop components from the </span>****Components(Interactive Widgets) list**** <span style="color: rgb(0, 0, 0);">at the top directly into your canvas.</span>

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

<span style="color: rgb(0, 0, 0);">You can add new pages, view, and edit different pages/screens all in a single view.</span>

****2. Toolbar****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">The toolbar with various icons, each serving a unique purpose: </span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdm7dAFaKeFuZgQwfXq9diyaLQOwQROaqS6RwylaJOR2JnlCTQxXVnmuXJWgSRmcOaBlpwzhqGxZDdpahq3Bg5Iu1ZbI33Ra_EFDfA_UPYIi1anxA6GPMy4beTu5u8qBdM9t__Q5g?key=O-0IfCqV3YaN6MPNlqaI_xOP)

<span style="color: rgb(0, 0, 0);">1 - Selector icon</span>

<span style="color: rgb(0, 0, 0);">2 - Add Basic elements</span>

<span style="color: rgb(0, 0, 0);">3 - Add Screens</span>

<span style="color: rgb(0, 0, 0);">4 - Add Interactive Widgets</span>

<span style="color: rgb(0, 0, 0);">5 - Text Element</span>

<span style="color: rgb(0, 0, 0);">6 - Asset Uploader</span>

<span style="color: rgb(0, 0, 0);">7 - Move Canvas</span>

****3. Layers Panel****

<span style="color: rgb(0, 0, 0);">Each component added to the canvas is automatically placed as a separate layer.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeWEMVkJdKBXwqCigiM1_w4YmNIyr6z5VAbSkSgZMbr1HOhSM1Us6N7968kUCJOC39C2YXNUuGmW7K-uDgCYcQaFTkkRS2KmscPJEZO8NF2UVBleQZmsm3lOQoC_7Lp1B32iznfCw?key=O-0IfCqV3YaN6MPNlqaI_xOP)

<span style="color: rgb(0, 0, 0);">You can reorder layers by selecting the desired layer and dragging it to the preferred position.</span>

<span style="color: rgb(0, 0, 0);">Layers can be locked to prevent selection or editing. Locked layers are uneditable.</span>

<span style="color: rgb(0, 0, 0);">You have the option to hide or unhide a layer. Hidden layers become invisible on the canvas and cannot be selected or modified. To toggle visibility, click the corresponding icon.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcoOrMsyZuV89kmxIrxRGEDvslLx3tid7WbsxxC6GpB_xHX7fGL9EqQFviFuPPt5LCK-fXJeiRU-BogVKqA_sPIblEer8ghshtsRPwOtQKbOUXIIdNLxQTx52ow7HIVuFwL1uh5xg?key=O-0IfCqV3YaN6MPNlqaI_xOP)

<span style="color: rgb(0, 0, 0);">Additionally, by right-clicking on any component within the canvas, you can duplicate it, delete it, undo or redo changes, copy its style, apply a quick animation, or send the layer to the front or back.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd6bVxQz0cxLFxWRupbRAFtCN7jC82bgpGejjNTeORwlXCMfhSJdsn6xkA7lekiV_6gMlZUnWEtAXOAy5IVBaUWmy9HW80SiMFf5VTeXtBLc4-DvJtaFIYUzUot5RIc6qeWokyVIA?key=O-0IfCqV3YaN6MPNlqaI_xOP)

****4. Properties Panel****

<span style="color: rgb(0, 0, 0);">After adding a component, click on it to open the properties panel on the right. Here, you can easily adjust settings such as size, color, position, and more.</span>

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

****5. Events Panel****

<span style="color: rgb(0, 0, 0);">You can add events to control the behavior of your ad, such as defining actions triggered when a user clicks on an image or a button.</span>

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

****6. Animation Panel****

<span style="color: rgb(0, 0, 0);">Adctv offers a range of predefined Quick Animations for ease of use. From the Animation Panel, you can easily apply these animations to any element in your ad.</span>

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

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">All the configured events will be listed here in the </span>****Events**** <span style="color: rgb(0, 0, 0);">module.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd3c4efxcQ6eJq76YHeo0ov52-IQHSOwjDbw2cPgqkNeI1etv41tAgAC9P7xMwc2rmoV7cPOQwCfVV5pRwU4Wj2CU_dUzqTV1a4gxJxVcSRdBodgJfJx8A5kZ5E7KCE9wEmDcrXUQ?key=O-0IfCqV3YaN6MPNlqaI_xOP)

 ****8. CSS Panel****

<span style="color: rgb(0, 0, 0);">The CSS Block allows you to add custom styling to any element in your ad.</span>

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

****8. Timeline Panel****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;"> Here, you can create complex animations and set up time-based events. Each component is represented as a layer on the timeline, allowing you to animate elements individually.</span>

<span style="color: rgb(0, 0, 0);">You can add keyframes to the timeline to indicate where your animation starts and ends.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdMQeaKURDps0BbuJfCND-LDDc1qbxPFEMYkscIrRg2ZW4eVAy192nvJ_ws6mEfbpdoqcPRMVYGIPs2uqPM5vkNLl1mDHHNcrfiwzkVQXdEMvKimDBJ-DPsRF69RS3N8XEJnwwDnw?key=O-0IfCqV3YaN6MPNlqaI_xOP)

 ****9. Library****

<span style="color: rgb(0, 0, 0);">The Library panel displays the images, videos, and other assets that you're using or planning to use in your creative.</span>

<span style="color: rgb(0, 0, 0);">You can upload new assets anytime and store them for future use, making it simple to manage and reuse content across multiple pages.</span>

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcTFT27k-BoYg8shJjVib5gECEllBN0lNtZD4J7YPl3h1mW9Ir82aAxcLdCnfqecZkC1ChK31be_GgAC0X_f3xU_udziVX21yM2gUU4rkuJrD8dOXPxQ496pZw2hU5Bp2k3S_Sitw?key=O-0IfCqV3YaN6MPNlqaI_xOP)

****10. Layouts****

<span style="color: rgb(0, 0, 0);">You can select and group multiple components to create a layout. The layout can be named, saved, and reused at any time.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">This is especially useful for creating reusable sections, like a header or footer, that you can save and bring into your ads whenever you need them. </span>[Know More..](https://docs.adctv.com/books/product-guide/page/layouts)

****11. Templates****

<span style="color: rgb(0, 0, 0);">Here you’ll find templates that match your selected canvas size, so you can quickly pick one and start customizing it for your needs.</span>

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">Just browse through the list and click ‘Add to Page’ to instantly add a template to your current creative. </span>[Know More..](https://docs.adctv.com/books/product-guide/page/building-ads-from-adctv-templates)

****12. Brand Kit****

<span style="color: rgb(0, 0, 0); white-space: pre-wrap;">With the </span><span style="white-space: pre-wrap;">BrandKit </span><span style="color: rgb(0, 0, 0); white-space: pre-wrap;">module, you can easily store and manage assets for multiple brands. You can effortlessly share the Brand Kit with collaborators via a unique link, granting them access to brand assets. You can upload logos, save color palettes, add fonts, and include other assets like images and videos. </span>[Know More..](https://docs.adctv.com/books/product-guide/page/brand-kits)