Now that you know how to add elements, it’s time to learn how you can adjust them properly. Please note that we still work in the “single view”, so if you somehow navigated away from this, first go back to continue your learning process.
Part I: Adjusting elements
Positioning, resizing and rotating your elements
When you add an element to the canvas, the drag-and-drop editor immediately selects the element and displays a “transform tool”. This grid consists of 6 handles to resize your element, and 1 handle to rotate it.
In order to reposition an element, you just have to click it and drag the element towards its preferred position.
To resize an element, you simply have to move one of the resize handles. Up to increase, down to decrease.
By dragging and dropping the rotation handle (located just above the element) you can adjust the angle of the element.
The property panel
When you click an element, all its properties show up in the “property panel”. This is located on the right of your screen. The property panel is divided into 3 sections by a tabular menu at the top of the panel. From left to right the menu items are:
- Style: in the “style tab”, you can find all the different styling properties of an element. Each element has its own styling properties. For example, if you select a button element, you’ll be able to adjust the background color.
- Logo, Image, Text, Button, Shape, Video or Click Area:
- Arrange: in the “arrange tab" you can find all the properties to position your elements with by exact value. You can do this by, for example, fill in the exact width and height of an element.
We will describe the properties for a number of element types, so you have a clear understanding of all possibilities and where to find them.
Buttons can be adjusted on several levels. You can use the “style tab” to set up its default color, or the color it gets on a mouseover. When you add this so-called hover effect, you have to preview the ad to see it in action.
Aside from setting a button color, you can adjust the padding. In the “text tab”, you can edit the text that is displayed on your button. You can also change the font or adjust the text alignment: left, centered or right. Last but not least, the “arrange tab” is used to position your button.
Please note that you can also “auto-size” buttons. This feature allows you to set minimum and maximum values of the width and height of a button element. It’s called “auto-size buttons”. With this toggled on, your button will automatically scale up or down depending on the size of your text. This comes in handy when you use translations, but also when you want to add dynamic content.
When you upload a video to your ad, you use the video properties to set up your video’s settings. You can, for example, use the “video tab” to upload a thumbnail or to let your video loop endlessly.
You can use the “style tab” to make your video less or more transparent. The “arrange tab” is used to position your video on the canvas.
Click area properties
When you select a Click area element, you will see there are only two tabs available. You can either use the tab named “Click area” to set a URL. The “arrange tab” is used to position your click area, or to bring it forward or to the background of your ad.
The text element consists of three property tabs: style, text and arrange. In contrast to what you might think, the “style tab” is not used to style your text. It is used to style the box in which your text is displayed. You can, for example, set a background color or a border to your text box.
In the “text tab”, you can change the font, font color, and text alignment.
Please note that in text elements, the “scale to fit” property is automatically toggled on. This means that the font size automatically scaled up or down depending on the element width and height. Also notice that you are able to set up a minimum and maximum font value to scale between.
You can also decide to toggle on the “hyphenation” property. This automatically and correctly breaks off your text, by adding hyphens where needed.
Part II: Replacing elements
Now you know how to adjust the elements in your HTML5 ads, we can also explain how you can easily replace the elements. For example when you want to replace an image, or when you want to change a text completely.
Replacing images, logos, and videos
The tab in the middle contains properties that are only available for the selected element type. For images, logos, and videos you’ll find the possibility to replace the source of the element. You can replace the source by clicking on the “replace” button and selecting a different source in the library.
In order to replace text, you have to double click on a text element. This will enable an inline text editor which you can use to adjust the text. When you select a part of the text and choose to adjust the font properties, this change will only apply to the selected text.
As you might have noticed, not all the options you have in the property panel are mentioned in this Beginner’s Guide. The more you explore, the more you’ll discover. So have fun playing around with all the properties and possibilities! If you are ready to learn more, you can also read the next section of our Beginner’s Guide: Adding Animations.