In Banner Video
Build Guide: Creating an Ad from a In-Banner Video Template
Last updated
Was this helpful?
Build Guide: Creating an Ad from a In-Banner Video Template
Last updated
Was this helpful?
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
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
You can find the templates in the templates tab in the top navigation. Here you will find all the templates available in your account:
For this tutorial we will use the βIn-Banner Videoβ template.
Hover the template and click on use.
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.
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
If you have read other build guides, you can skip to Step 4
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: 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: Sitting on the right side, this is where you can modify the properties of the creative and elements.
Tool bar: 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: 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.
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.
We have included a set of demo assets that you can use for this tutorial. Download using the link below.
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.
Customize the Video
Select the Video layer from the Elements Panel
Click on βReplace Videoβ from Assets Tab of the Settings Panel
Choose your video from the library
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.
Once the video is ready, you should repeat steps 1-3.
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 Text
Select the Text Headline layer from the Elements Panel
Double Click the text element to enter edit mode.
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
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.
Please note that the url set up here for the CTA can be overwritten when generating tags for trafficking.
You can modify the position, color or size of the elements from the Settings Panel.
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.
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:
Select the element you want to copy styles for
Under the element, click on the Copy Settings to Other Sizes
Select the sizes that you want to copy the styles to, then click next
Select the properties you want to copy
Click on Copy Settings
All the settings selected from your element should have been copied to other styles
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.
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
Want to explore more templates? Head back to the Templates Tutorials page and try another design!