CREATING A TEMPLATE FROM SCRATCH

Templates form the visual foundation of an ad, shaping its creative presentation with essential elements like images and text. While Adacado provides ready-made templates, the Creative Editor allows you to craft a unique design from scratch. Let’s explore how to design your template.

Contents

Creating a Template

Step 1: Add a Blank Template

To initiate template creation, the first step is to add a blank template, which can be achieved through various paths.

From the Adacado Campaign Solutions Library:

• Click on the “No thanks, I want to create a new blank campaign” text link in the lower right corner of the Campaign Solutions Library.

• Name your campaign.

• On the “Select a template to use” page, click “Create New” and select an ad format.

• A blank template of the selected ad format is then added to the Creative Editor, enabling you to start designing ads by adding widgets tailored to your specific ad type (e.g., static, dynamic).

In the Creative Editor

1. Use the “Add a Blank Template”:

• Click on the ‘+’ icon in the upper section of the Creative Editor and choose an ad format.

2. Use the “Select a template to use” Panel:

• Click on the ‘+’ inside the box in the upper part of the Creative Editor or in the left toolbox.
• Then, click the “Create New” button in the “Select a template to use” panel.

Step 2: Design the Template

Following the addition of the blank template, it’s time to shape your design by incorporating widgets such as images, text, product images, and CTA buttons into the template.

Widgets – Creative Elements

Widgets serve as the fundamental building blocks of ad content, comprising individual creative elements such as images, text, CTA buttons, product images, and more. They collectively define the visual and functional aspects of each ad template.

Adacado offers a diverse set of image and text widgets categorized into five groups, providing you with complete flexibility to choose the right elements for your template:

• Basic Elements
• Data Placeholders
• General Icons
• Lines & Patterns
• Social Media Logos

To design your template, simply drag and drop widgets from the toolbox onto the template. Once a widget is added, customize its style, color, or alignment in the individual widget settings. This enables you to tailor each element precisely to your design preferences.

Example: Static Templates

In this example, we’ll guide you through the process of creating a static template using widgets like Image, Promotion Text, Company Logo, and CTA Button Text that operate independently of product data and incorporate placeholder images and text.

Step 1: Add a Background Image

• Click the “Basic Elements” icon in the toolbox.
• Drag and drop the “Image” widget to add a background image placeholder.

Step 2: Add a Company Logo

• Click the “Data Placeholder” icon.
• Choose the “Company Logo” widget to upload your logo. 
• Adjust the logo size and alignment in the widget settings.

Step 3: Add a Promotional Message

• Select the “Promotion Text” widget from the “Data Placeholders.”
• Drag it to the template and input your placeholder message.
• Customize font style and text alignment.

Step 4: Add the CTA Button

• Include the “CTA Button Text” widget.
• Enter the text and customize font style and text alignment. 
• The “CTA Button Text” widget creates rectangular or square buttons. If you need a different shape, use the shape widget in the “Basic Elements” or the “CTA Image Button” widget to upload a custom CTA button image.

Step 5: Review the Ad

• Play the “Ad Preview” to review the ad.

Step 6: Edit the Template Name

• After reviewing the ad, name your template.

Step 7: Locate the Template

• For future use, locate the template by filtering templates based on their names in the “Previously Used Templates” section.

Example: Dynamic Templates

In this example, let’s create a dynamic template with placeholder images and text using data placeholder widgets such as Product Image, Product Title, and Product Price to showcase product data from your data feed, along with a company logo and CTA Button.

IMPORTANT:
The placeholder images and text of data placeholder widgets will be displayed in your ads if no corresponding product data is available in product data generated from your data feed.

Step 1: Add a Company Logo

• Follow the steps from the static template example.

Step 2: Add a Product Image

• Select the “Product Image” widget from “Data Placeholders.”
• Drag it to the template and upload a placeholder image. 
• The placeholder image will be replaced with product data if available in your data feed.

Step 3: Add Product Title and Product Price

• Drag and drop the “Product Title” and the “Product Price” widgets.
• Input placeholder text.

Step 4: Add the CTA Button

• Follow the steps from the static template example.

Step 5: Review the Ad with Product Data

• After completing the template design, upload and configure your data feed.
• Once product data is added to your campaign, play “Ad Preview” to review the ad. Ensure your product displays correctly by toggling on “Show ad with product data” to view the ad with your product data. 
• If no product data is available, the ad will display the placeholder image and text.

For the subsequent steps, proceed with Steps 6 and 7 as outlined in the static template example.

Template Duplication

Creating Templates for Multiple Ad Formats with Copy & Paste

After crafting a template for a specific ad format, effortlessly replicate it for other formats through the copy-and-paste functionality.

Step 1: Add a Blank Template

• Click on the ‘+’ icon in the upper section of the Creative Editor.
• Select a new ad format to add a blank template.

Step 2: Select the Template and Widgets for Replication

• Once a blank template is in place, click on the template to duplicate.
• Select all widgets to copy at once by grabbing them from beyond the template’s borders
• Execute a right-click and choose “Copy” to replicate the entirety of your chosen widgets.

Step 3: Paste Copied Widgets into Another Ad Format

• Select another ad format’s blank template.
• Execute a right-click and choose “Paste” to seamlessly integrate the copied widgets into the selected template.

Step 4: Customize the Template

• After integrating the widgets, fine-tune their position and dimensions to align with the new ad format template.

Step 5: Add Multiple Ad Formats

• Repeat steps 1 to 4 to add templates for multiple ad formats.
• Name each template.

Adding Multiple Templates within an Ad Format

To dynamically showcase products from your data feed in your ads, add multiple templates within each ad format using copy-and-paste features and create a multi-frame ad. You have complete control over adding and removing templates.

Step 1: Add Blank Templates within the Same Ad format

• Click on the ‘+’ icon to the left of the initially created template repeatedly to add the desired number of templates within the same ad format.

Step 2: Select the Template and the Widgets for Replication

• Once blank templates are in place, click on the template to duplicate.
• Select all widgets to copy at once by grabbing them from beyond the template’s borders.
• Execute a right-click and choose “Copy” to replicate the entirety of your chosen widgets.

Step 3: Paste Copied Widgets into Blank Templates

• Choose a blank template.
• Execute a right-click and select “Paste” to seamlessly integrate the copied widgets into the selected template.

Custom Template Upload

The feature to upload a custom HTML template is now deprecated, and customer support is no longer available for this functionality. We recommend its usage only for users who are already familiar with the process.

Sample Zip File

Download this sample HTML template zip file for reference.

Upload Requirements

To successfully upload a custom template, follow these guidelines:

• Upload a zip file containing HTML code, all image assets (company logo, main product image, navigation, etc.), and font files. 
• The template zip folder size must not exceed 10 MB.
• All files in the template zip folder must be at the root level (no subdirectories).
• External .js and .css files must be under 2.5 MB, named template.js and template.css, respectively.
• Third-party URLs are not allowed; all URLs must be relative to files within the template zip folder (excluding rich placeholders of type URLs).

Rich Placeholders

Examples:

• productLink
• productTitle
• price
• salePrice
• description
• productID

Details:

• type: text, image
• truncate: number (integer) – Applies only to text-type placeholders. Indicates the maximum length at which the data value is truncated with an ellipsis(…).
• width and height: number (integer) – Required for images. Applies to image and video type placeholders, indicating the size of the image used in the template design.
• inventoryIndex: number (integer) – The index of the data to use (index 0), i.e., the first set of data (0), second set of data (1), third set of data (2), and so on. This applies only to inventory data; static data does not contain this attribute.
• codeType: Required. Depending on the context, there are 5 code types:
  • “html“: Used when substituting the inner text of DOM, e.g., <div>{{}}</div>.
  • “javascript“: Used when using a placeholder anywhere in JavaScript.
  • “attribute“: Used when substituting attributes of the DOM, e.g., <div data-id=”{{}}”></div>.
  • “url“: Used when retrieving any URL or files, e.g., <img src=”{{}}” />.
  • “clean“: Remove any possible breaking characters, currently defined as ‘, “, <, >.

*IMPORTANT*
Custom HTML templates are not editable within the Creative Editor. If modifications are needed, create a new template with an updated HTML code and assets packaged in a new zip file.