In this section of the Beginner’s Guide, we will cover everything that you need to know in order to add dynamic elements to your ad.
Ads that display content from a dynamic feed can be extremely valuable. These ads are often used for (but not limited to) remarketing campaigns, as they let you display dynamic information such as price, discount value, and the product descriptions that your website visitor is most interested in.
Option 1: Adding a new, dynamic element
First, open your ad set and click on the “Add element” button in the top left of the scene. In the dropdown menu, click on “dynamic”.
Now, you have to select a reference (for example “price”). When working with smart dynamic ads, you can’t add the same reference in the same slide twice.
Please note that the references that are available in the dropdown menu are based on the feed mapping set up. This process takes place when you add your feed to Bannerwise. If you want to learn more about the feed mapping settings, read this article first.
Time to get creative! The elements from your feed will show in the canvas. You can now adjust its size and place it correctly. In the property panel on the right, you can see the dynamic reference the element belongs to:
Option 2: Making an existing element dynamic
Aside from adding a new element, you can also make an existing element dynamic. For this, open your ad set. Select in the canvas the element you want to turn into a dynamic. Navigate to the property panel and click on the “dynamic” toggle. Then, select a reference.
Features of dynamic elements
When you have added your dynamic element, it’s easy to improve its layout. For this, we offer three key features:
Scale to fit text
When you use dynamic elements, they often contain text. For example the “price” reference or the “name” reference. When you display text, it is handy to use the “Scale to fit text” feature. This makes sure that when your dynamic text is longer, and it doesn’t fit in its container, the font size decreases within a minimum size as set up in the properties. It also works the other way around: it automatically increases the font size if there’s room left in the container and the font size is smaller than the maximum font-size value.
You can find the “scale to fit” toggle in the property panel under the “text tab”. Every text element will automatically scale its font size according to the boundaries set by its container and the minimum and maximum font-size values.
Image scale mode
When you add dynamic elements, you often want to show images too. For example products or services that you want to sell to your customers. When you use dynamic images, you are more likely to want to show them as a whole, without distorting or stretching the image. That’s why we, by default, select the “scale to fit” mode when adding a dynamic image element.
It’s not the only scale option though. You can also decide to choose “scale to stretch” or “scale to fill”. These options stretch the image to fit its container exactly (stretch) or make sure the image always fills its container without distorting the image scale ratio (fill).
When you add dynamic elements, you often want to show the prices of the products that you want to sell to your customers. To make sure each price shows correctly in its placeholder, we recommend making use of text alignment properties "center" and "middle".
Great! Now that you understand how to work with dynamic elements and design your Facebook DPA, is time to preview your ads.
Previewing your custom DPA layouts
If you wish to preview what your other ads will look like, you can click on "Preview" at the top of the toolbar. This will lead you to the preview page. Here, you can quickly preview the other products in your feed with the designs you have currently applied.
On the left side of the toolbar you can see “Default”. That’s the original design you have built and where no conditions apply. Click on “Default”. You can now see a list with the name of all the conditions you have created for this set.
Simply click on one condition name. The ads showing in the preview now are applying the rule(s) from the specific condition that is selected. For example, the following image, shows the layout of our ads that contain a sale price.
Clicking on the “size” in the toolbar allows you to preview a specific size on your set.
If you have built a "Carousel" type of ad for a social channel, Bannerwise gives the possibility of previewing all the items at the same time or navigate through the different items one by one using the arrows that are displayed on top.
Option 1: Preview your ads and click on "Single view". All the items will display in the screen. On the left, you can select the conditions you have created and check the layout for that specific condition.
Option 2: Preview your ads and click on "All view". You will be able to check the different layouts using the arrows displaying on the top center.
Make sure your changes are saved and when you're happy with the result, proceed to the next step: Creating Dynamic Rules and Conditions.