# 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)