Constraints Panel

Constraints indicate how layers/elements should respond when you resize their frames. This helps you control how designs look across different screen sizes and devices.

There are Horizontal and vertical constraints.

Horizontal constraints define how a layer behaves as you resize the frame along the x-axis.

• Left maintains the layer’s position, relative to the left side of the frame.
• Right maintains the layer’s position, relative to the right side of the frame.
• Left and right maintains the layer’s size and position relative to both sides of the frame. This may cause layers to grow or shrink along the x axis, when resized.
• Center maintains the layer’s position, relative to the horizontal center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Vertical constraints define how a layer behaves as you resize the frame along the y-axis.

• Top maintains the layer’s position, relative to the top of the frame.
• Bottom maintains the layer’s position, relative to the bottom of the frame.
• Top and bottom maintains the layer’s size and position relative to the top and bottom of the frame. This may cause layers to grow or shrink along the y axis, when resized.
• Center maintains the layer’s position, relative to the vertical center of the frame.
• Scale will define the layer’s size and position as a percentage of the frame’s dimensions. It will then maintain those proportions as you resize it.
• Relative means that these constraints depend on the relative positioning, or comparison with other layers

Horizontal : Left Vertical: Top

Horizontal : Right Vertical: Bottom

Horizontal : Scale Vertical: Scale

Horizontal : Left and Right Vertical: Top and Bottom

Relative position

Let’s now explore the Relative feature, which enables you to create constraints based on relative positioning in comparison with other layers.

Consider a product price feed. Each price consists of three elements: currency, product cost, and payment frequency. When the price changes, it should retain its relative structure.

Let’s connect each element of the price to the data feed.

Connect payment frequency:

Connect product cost:

Connect currency:

Next, let’s set Constraints to each layer.

Let’s say we want the price to be always positioned to the right bottom corner of our creative.

First set the “per MO” text to the right bottom and also the text container – Dynamic Width and Height. In case there is more text, the container will resize.

The second price element “499” should remain adjacent to the “per MO” text, maintaining a 2px distance between them.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and bottom Y position relative to “per MO”.

For horizontal, set offset -2px, separating “499” element from the “per MO”.

The third currency element “$” should remain adjacent to the “499” text, maintaining a 2px distance between them and aligned to the top.

Set the Relative option for both horizontal and vertical axes.

For horizontal and vertical select the anchor points: left X position and top Y position relative to “499”.

For horizontal set offset -2px, separating “$” element from “499”.

Let’s see the result.

This feature is very useful for creatives connected to feeds because it ensures that ads are always well-structured and prevent elements from sliding out of place or becoming misaligned.

Publish Responsive HTML5 ads

To publish the Responsive banner always select the Responsive Width & Height option and place the AdTag/Embed code in a responsive div container on your page or use a responsive placeholder in DSP/SSP:

Here’s how it works:

1. Create a new banner (click on Add Size).

2. You can select one of the predetermined templates or create a banner from scratch. When done save and exit the editor.

3. The banner you just created will be available in the dashboard.

Now, let’s create a new banner based on this one, but differing in size.

Click on Add Size, select or enter the new size (for example, 728×90). At this point, you’ll see 3 options. Click on Reuse.

Reuse design – will copy the contents of your previously created banner into a new one (if not selected then the new banner will simply be created from scratch – blank canvas).

Select Reuse in 200×200 size and keep the Auto Resize option turned on.

Auto resize will do its best to properly adjust all items into the new banner’s size accordingly. It’s not always perfect, so you might still need to make a few adjustments manually. This option still saves a lot of time.

4. Same way you can create more banners with new sizes based on original banner design.

If you need to reuse design in a different bannerset, use the Duplicate bannerset option.

In this quick tutorial, we’ll cover the basics of uploading and using custom fonts in BannerNow. Custom fonts are a great way to personalize your designs and give them a unique touch.

Note: Bannernow supports multi-lingual custom fonts (Latin, Asian, etc…).

To upload a font, first, click on Library and then on the Fonts tab. Below, you will see a list of your previously uploaded fonts. Next, click the Add Font button. To upload, simply name your font and select a .ttf or .otf file from your computer. It will appear automatically in your custom font list.

Now, let’s go back to the Banner page and open the editor. Select any text element. Open font selection drop down and you’ll see the font we’ve just uploaded.

Great news! When you export your creatives as HTML5, BannerNow will automatically subset your font to optimize the final size of your creative.

In order to use an existing template click the Create Banner button in the Dashboard.

The Create new banner modal will pop up right away.

Easily create a new size with 3 options: Blank, Reuse & Templates.

To select an option simply click on the green icon or title.

Blank – create a banner from scratch by setting predefined dimensions;

Reuse – reuse a banner design that you created like a preset to quickly start designing a new one;

Templates – alternatively, you can jump-start your banner designs with a high-quality template.

 When the template loads in the editor, you will be able to replace, modify and add text items of your own.