As a Publisher, you want your native ads to look as good as possible on your site. That’s why we added many options for customizing your Native ad zones, so you can control everything from the image to the font size, color, branding, and many other things.
In this article, we will look at a few things you might want to consider as a Publisher when setting up your Native ad zones.
Quick Layout vs Custom Layout
There are two ways of setting up a Native ad zone, the Quick Layout and the Custom Layout:
- You can use Quick Layout if you simply want to set up a responsive ad zone and choose the aspect ratio of the native ad zone’s images. When you choose the image aspect ratio, the size of the image will be adapted to the container the ad zone is placed in.
- You can use Quick Layout if you want to match a custom image size so that the ad zone looks the same as your site and fits in perfectly. When you choose a custom image size, that image size will be fixed, whatever container the ad zone is placed in.
- You can use the Custom Layout if you have a zone on your site of a specific size and want to create an ad zone that fits in it and looks good. For example, you might have a zone of 700 by 400 and create your ad zone to match that.
Ensuring Your Text is Visible
Many users just use the default text colors. However, if the background is dark, this may mean the text doesn't stand out or isn’t visible.
- The default text color is designed to show well on light backgrounds, so if you are putting it on a site with a dark background, it might not be readable. It is useful to keep this in mind and adjust the text color accordingly.
- Of course, some sites give their users the option to choose between a dark/light layout. If your site does this, the text color you choose might work for one but not for the other. In this situation, you could either:
- Pick a text color that looks good in both settings.
- Set a native background color in Advanced Options, so that the widget is not affected by the background color of the site.
- The default font size for the title is 16px. Of course, if you have a lot of rows and columns of ads in your zone this might look a bit strange. In the Text Formatting section, expand the Title section and change the font size to something smaller.
Advanced Options
You can use the Advanced Options to further customize your native ad zone. Note that the settings in Advanced Options will apply to both Desktop and Mobile.
Vertical Spacing and Horizontal Spacing set the number of pixels between the ads vertically and horizontally. These are useful for ensuring that the ad zone fits in with the site, especially if you want your native ads to match exactly.
You can turn on and off the Powered by logo, and choose where it appears. This does not affect the total size of the widget itself, but it does add a <div> with the Powered by logo at the top or the bottom.
Using Custom CSS
In the Custom CSS section, you can add custom CSS to ensure that the ad zone displays the way you want it on your site. Be aware that changes to the Custom CSS won't show in the preview, only on your site.
Alignment
The Native ad zone can default to the left when it's put on your page, you can use some custom CSS to align it to the center if you wish.
.exo-native-widget-outer-container {
text-align:center;
}
Text Spacing
By default, the text in the title shows at a height of 90px. If this doesn't meet your needs, you can use custom CSS to set it to the size you need:
.exo-native-widget-item-content{
height: 50px !important;
}
Image Settings
When using the Quick Layout, you set the aspect ratio for the image (1:1, 4:3, 16:9) and the size of the widget is set automatically. In some cases, this may result in the images not displaying correctly, depending on the size of the container or the CSS style applied. You can use the Custom CSS section to fix this issue also.
Adjusting Mobile and Desktop Independently
As you know, you can adjust how your native ads look on mobile and desktop independently, to ensure that they look their best in each format. But space between thumbnails is set only once for all devices in Advanced Options. Set the Vertical Spacing and Horizontal spacing, and ensure that it works well on both, by looking at the preview.
Adjusting the Mobile Breakpoint
The breakpoint can be set to 800px for iPad, 450px for mobile, and Unresponsive. For example, imagine you set up desktop and tablet to display in a 4x1 grid. The breakpoint is between tablet and mobile, which is small. If we set it to medium, now the breakpoint is between desktop and tablet, so tablet and phone are displaying a 1x2 grid. So, if we had a grid of 4x1, and we have a grid of 2x2 on a phone, we might decide that while that looks good on a phone, it doesn't look so good on a tablet. We would put the breakpoint lower, making desktop and tablet roughly the same.
So as you can see, there are many ways to ensure that your Native ad zones look their best on all devices. If your native ad zones aren't quite displaying the way you want them to, trying a few of these tips could bring them more into line with your needs.
Video
Further Reading