Improving how your Native ad zones are displayed can help the ads blend more into the style of your website. This creates a better user experience and can increase eCPMs. It’s easy to use custom CSS code to improve the impact of how your Native ad zones are displayed and this blog post contains 10 ideas with the code you need to apply the changes.

1 - Reduce the height of the text box

You can use CSS code to change the size of the text box below the image of your native ad zone.

Native CSS 1

  1. .exo-native-widget-item-content {
  2. height: 50px !important;
  3. }

2 – How to place the text box over the image

In your admin panel the default setting in the Native zone set up will display an image and then below the texts for Title and Description. But you can also use CSS code to move the text to show over the image.

Native CSS 2

  1. .exo-native-widget-item-content {
  2. position: absolute !important;
  3. bottom: 0px !important;
  4. z-index: 3 !important;
  5. top: unset !important;
  6. height: 50px !important;
  7. }

3 – Place the text box over the image with a background opacity

If you want to place the text over the image, sometimes it can be hard to read the text so this CSS code allows a transparent/semi-transparent background behind the text.

Native CSS 3

  1. .exo-native-widget-item-content {
  2. position: absolute !important;
  3. bottom: 0px !important;
  4. z-index: 3 !important;
  5. top: unset !important;
  6. height: 50px !important;
  7. background-color: black !important;
  8. opacity: 0.7 !important;
  9. }

4 – Customize the background color of the text box

You can change the text boxes background color while keeping the space between each image and text box transparent or with a different color with this CSS code, we kept it transparent in our example below:

Native CSS 4

  1. .exo-native-widget-item-content {
  2. background-color: #ABE1FA !important;
  3. }
  5. .exo-native-widget-outer-container {
  6. background-color: white !important;
  7. padding: 10px !important;
  8. }

5 – Customize the text font

You can set the font used for the Title and Description to the same font you use on your website using this CSS code.

Native CSS 5

  1. .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
  2. font-family: fantasy !important;
  3. }

6 – Set the color of “Powered by ExoClick”

If an end user knows that they are viewing an ad because the Native zone features ‘Powered By ExoClick’ you will generate more quality clicks, which is better for advertisers, because the end user will only click if they are interested in the ad. This CSS code enables you to change its color.

Native CSS 6

  1. .exo-native-widget-header{
  2. color: #0073B7 !important;
  3. }

7 – Place the “Powered By ExoClick” over the image

If space is an issue you can place it over the image with this CSS code.

Native CSS 7

  1. .exo-native-widget-header {
  2. position: absolute !important;
  3. z-index: 3 !important;
  4. }

8 – Make the corners of the images rounded

The default setting in your admin panel is a squared image, but you can make the corners rounded with this CSS code.

Native CSS 8

  1. .exo-native-widget-item-image {
  2. border-radius: 5% important;
  3. }

9 – Change the padding

You can change the padding between the image and the text, so that the text is closer or further away from the image.

Native CSS 9

  1. .exo-native-widget-item-content {
  2. padding-top: 30px !important;
  3. }

10 – Set a border around each image and text box within the Native widget

Native CSS 10

  1. .exo-native-widget-item-container {
  2. border: 2px #0073B7 solid !important;
  3. }