Text is a critical component of a creative. The color, size and width, all convey a message to the viewer of a display ad.
In this quick tutorial, we’ll cover the basics of using the Text tool, as well as advanced features.
We can access the Text tool by clicking the “Plus” button.
BannerNow comes pre-loaded with beautiful fonts so you can start designing quickly. Pick your favorite style. You can use this text as it is or customize it any way you need.
To edit an existing text element, double-click inside the text box.
At the top of the Properties panel is an alignment section that you can use to align text relative to the canvas.
Below, there is the transform section, where you can set the position: the X, the Y positions, Width, Height and Rotation.
Next, there are the Hover and Down tabs for changing the text style for mouse hover and down events.
Then, we have the Feed text connection button. It is now disabled because our creative is not connected to any feed yet. Dynamic creatives using a feed allow you to display multiple texts, as well as conduct A / B testing.
Other useful function is the drop down menu where you can select a new font. You can also type in this field to search. Let’s search for Roboto font. Below select a font style: bold, medium, regular, etc. Also, change size by pressing down/up arrow and color inside the color picker.
Above we have additional upload option. You’ll simply need a .ttf or a .otf file. After the upload, let’s type in the name of the new font to search and as you can see, it is already ready to go.
You can also change the font style, or the style of specific characters. For example, apply bold, italic or strikethrough, and if you want to reset all these changes, just click “Clear style” button.
Advanced settings includes:
Spacing – we can change the amount of space between characters;
Line Height – to change the amount of space between each line of your text;
Padding – is the space between the content and the border of our text box;
Skew – is when twist it vertically or horizontally;
Opacity – adds transparency to the text element;
RTL – means right to left text direction.
Now, let’s adjust the alignment to determine where the text should be placed within the text box. Our options are: left, center, right, top, middle, bottom.
Next, by default we have a Fixed text container, where the text will be automatically scaled to fit the container. For example, if we input more text, it will scale down inside the container.
But, we can change this behavior by setting the text alignment to Fixed Width, Dynamic Height. This allows the height of the text box to grow along with your text.
Another option is Dynamic Width and Height. Now, if I will type more text, the container will resize.
These features are super useful when preparing for the translation or for the dynamic feeded ad.
For example, I can place the text container fit to the bottom right corner, set the dynamic width and height, align it from right within the text box, vertical alignment set to bottom.
Now, if I translate this creative into a different language or connect the dynamic feed, the text will automatically scale to the left and top.
Next, let’s set a background color for the text container. It can be solid, linear or radial gradient.
We can add a stoke by editing the fill stroke, text box shadow, border size and also border radius to create nice round corners.
Also, you can set the hyperlink for the text element. The hyperlink should be always and absolute URL with the “https://…” . If your creative will be connected to a feed, you will also be able to connect the hyperlink to the feed data.
Another feature is the visibility mode. It’s usually used when you have a feeded text. For example, you can create 2 texts and display the first one only when there is the feed data; and the second one when there is no feed data as a fallback.
The ID can be used when interacting with this element via banner API.
Finally, you can save your text style as a preset, so the next time when you will add a new text, you will be able to use one of your saved text styles.