> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/sites-and-zones/native-ad-setup.md).

# Native Ad Setup

Creating a [Native Ad](/publishers/sites-and-zones/create-zone.md#recommendation-widget) zone is simple and yet powerfully customizable. You are able to use slightly different processes for setting up a native ad zone depending on your needs:

* **Scenario A**: You simply want to set up an ad zone, choose the aspect ratio of the native ad zone’s images and then set the size of the ad zone on your site to match.
* **Scenario B**: You want to set up the ad zone to match a custom image size or ratio, so that the ad zone looks the same as your site and fits in perfectly.
* **Scenario C**: 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.

Whichever scenario you choose, the first thing you need to do is to create a Native Ad zone.

## Creating a Native Ad Zone

When logged in as a Publisher, click on **Sites & Zones**, **New Zone**, and expand the **Native** section, select the Native Ad format **Recommendation Widget** and click **Next**.

![Create Zone Native](/files/6248a5fb9ae7f9d95aba65622feb34666f724dab)

Fill out the zone details and click **Next**.

{% tabs %}
{% tab title="Scenario A: Quick Layout: Set aspect ratio" %}
In this scenario, you set the aspect ratio for the images in the Admin Panel, and there is no need to set the total ad zone size. When using the **Quick Layout**, the ad zone you create will adapt itself automatically to the size of the container you place it in.

{% stepper %}
{% step %}

### Step 1

![Native Step 1](/files/e803c1699f441252e1e4214569c4a807cd92dac9)

Select the **Quick Layout** tab. In the **Desktop Layout** section, set the number of columns and rows of ads you want on desktop.
{% endstep %}

{% step %}

### Step 2

![Native Step 2](/files/ed44568121344d8ef62601707a4e11648608d621)

Next, choose the aspect ratio for your images from the **Image Settings** drop-down. You can choose between **1:1**, **4:3** or **16:9**, to match the thumbnails on your site.
{% endstep %}

{% step %}

### Step 3

![Native Step 3](/files/af0b8982d565ec5d0a5d3e666baad3f617f24a4d)

* Once you have chosen the aspect ratio, use the checkbox to choose whether you want to show text or not, and then decide where it shows.
* This text consists of a **Title** and a **Description**. You can turn those on and off individually in the **Title** and **Description** sections if you wish.
* Check the preview on the right to see how your ad zone looks, and tweak the settings again if necessary.
  {% endstep %}

{% step %}

### Step 4

![Native Step 4](/files/3869b2b343b5c59c7881da69ddc30fe56875e603)

* Repeat steps 1-3 above in the **Mobile Layout** section to set your ad zone up for mobile.
  {% endstep %}

{% step %}

### Step 5

![Native Step 5](/files/f6a31b5db3c9c4df180d38208d5cf23ba671175e)

* Check the preview for both **Desktop** and **Mobile** on the right side of the screen. You can set where the breakpoint between desktop and mobile view occurs in the **Mobile Breaking Point** drop-down of **Advanced Options**.
* The breakpoint can be set to **800px** for iPad, **450px** for mobile and **Unresponsive**. When we change the breakpoint this changes whether our settings in the Desktop Layout section affect desktop and iPad, or just desktop itself.
* When you’re happy with how the preview looks, click **Create**.
  {% endstep %}

{% step %}

### Step 6

![Native Step 6](/files/c19165c6d044241359411c8d7a4d1b95de02027d)

* Copy the **Zone HTML Tag** and add it to your site.
* The ad zone will automatically adjust to 100% of the container that you put the tag into. i.e. the larger the container, the larger both the zone and the ads will be.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scenario B: Quick Layout: Set a custom image size" %}
In this scenario, you want to be able to change the image size and the spacing of the ad to match your site. You would do this if you really want the native ads to look like they are part of the editorial content of your site.

{% stepper %}
{% step %}

### Step 1

![Native Step 7](/files/f4ffc5defdaa9df8562e1175a04c5b324e1e0024)

* Select the **Quick Layout** tab. In the **Desktop Layout** section, set the number of columns and rows of ads you want on desktop.
  {% endstep %}

{% step %}

### Step 2

![Native Step 8](/files/7ddf49cd7eda0b2e8c6770f511cc03e22956be7d)

* In the **Image Settings** drop-down, select **Custom Size** and set the width and height of the images to match your site. If the site contains a meta tag and is responsive, when the site is viewed, the images will respond also as the screen size decreases. Information about the **Widget Size** and the **Image Size** will display in the top right corner above the preview.
  {% endstep %}

{% step %}

### Step 3

![Native Step 9](/files/bb4e10ebeba1833e5d84f1ac3e7855058ffde889)

* Once you have set the image size, choose whether you want to show text or not, using the **Text** checkbox, and choose where it shows.
* Check the preview on the right to see how your ad zone looks, and tweak the settings again if necessary.
  {% endstep %}

{% step %}

### Step 4

![Native Step 10](/files/028c4fb1c922fac96a2f2b6fa5444fc1e961dc7e)

* Repeat steps 1-3 in the **Mobile Layout** section to set your ad zone up for mobile.
  {% endstep %}

{% step %}

### Step 5

![Native Step 11](/files/98e426c3314ba489e48d19ef736ea27d498b60d8)

* In the **Advanced Options** section, you can set how many pixels of **Vertical Spacing** and **Horizontal Spacing** you want around each ad.

{% hint style="info" %}
**Note**: Changing these settings will change the overall size of the ad zone.
{% endhint %}
{% endstep %}

{% step %}

### Step 6

![Native Step 12](/files/f6a31b5db3c9c4df180d38208d5cf23ba671175e)

* Check the preview for both **Desktop** and **Mobile** on the right side of the screen. You can set where the breakpoint between desktop and mobile view occurs in the **Mobile Breaking Point** drop-down of **Advanced Options**.
* The breakpoint can be set to **800px** for iPad, **450px** for mobile and **Unresponsive**. When we change the breakpoint this changes whether our settings in the Desktop Layout section affect desktop and iPad, or just desktop itself.
* When you’re happy with how the preview looks, click **Create**.
  {% endstep %}

{% step %}

### Step 7

![Native Step 13](/files/c19165c6d044241359411c8d7a4d1b95de02027d)

* Copy the **Zone HTML Tag** and add it to your site.
* Ensure that the ad zone size on your site matches the size of the zone that you just created.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scenario C: Custom Layout: Set a fixed zone size" %}
In this scenario, you want to be able to set the size of the ad zone to match what your site needs, and tweak the settings to ensure that the ads display well.

{% stepper %}
{% step %}

### Step 1

![Native Step 13](/files/c885bf9430ddab409fe279b662aab836e26fd269)

Select the **Custom Layout** tab. In the **Desktop Layout** section, set the **Width** and the **Height** of the total Ad Zone which you wish to create.
{% endstep %}

{% step %}

### Step 2

![Native Step 14](/files/f34609bc4dc32a7d4aa927e0bcd9e81a122ce19e)

Next, choose how many **Columns** and **Rows** of ads you wish to display in the ad zone. Check the preview on the right to see what settings work for the size you have chosen.
{% endstep %}

{% step %}

### Step 3

![Native Step 15](/files/dec5fda9da561366716d0f5fd970c9ac38721031)

Once you’ve chosen how many columns and rows you want, choose whether you want to show text or not, using the **Text** checkbox, and choose where it shows using the **Text Position** drop-down.
{% endstep %}

{% step %}

### Step 4

![Native Step 15](/files/3b94dea24a21cc6dbc38f635933d3f6c4f9c28cc)

Repeat steps 1-3 in the **Mobile Layout** section to set your ad zone up for mobile.
{% endstep %}

{% step %}

### Step 5

![Native Step 16](/files/f6a31b5db3c9c4df180d38208d5cf23ba671175e)

* Check the preview for both **Desktop** and **Mobile** on the right side of the screen. You can set where the breakpoint between desktop and mobile view occurs in the **Mobile Breaking Point** drop-down of **Advanced Options**.
* The breakpoint can be set to **800px** for iPad, **450px** for mobile and **Unresponsive**. When we change the breakpoint this changes whether our settings in the Desktop Layout section affect desktop and iPad, or just desktop itself.
* When you’re happy with how the preview looks, click **Create**.
  {% endstep %}

{% step %}

### Step 6

![Native Step 17](/files/c19165c6d044241359411c8d7a4d1b95de02027d)

Copy the **Zone HTML Tag** and add it to your site.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## Selecting the Unresponsive in Mobile Breaking Point

* When the Mobile Breaking Point is set to Unresponsive under Advanced Options, the below modal will appear on the screen.

![Unresponsive2](/files/0fef84fc7f5cc5c29f3eb9a9ee9b48d9a4d404fe)

![Unresponsive3](/files/5c439cd1e603bb906ffe934fc1f0b7d08828412c)

* Clicking **CONTINUE** on the modal will serve the desktop layout for ads on all devices including mobile and tablet.
* The Mobile layout will no longer be editable by the user when Unresponsive is selected.
* The image settings are updated to default custom size (Width - 200px and height - 200px) if not saved previously.

## Using Custom CSS with Native Ads

![banner](/files/d13fca015e9b4c9900bd3b39b4060fa23b8dc513)

In the **Custom CSS** section, you can add custom CSS to ensure that the ad zone displays correctly on your site. The most important CSS classes are provided as a starting point. Find out more about CSS [here](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**Note**: Be aware that changes to the Custom CSS won't show in the preview: they will only show on your site itself.
{% endhint %}

### CSS classes for native ads

There are five CSS classes provided in the box to begin with, and you can paste in additional styling as you see fit. These five CSS classes style the most important elements of the native ad as follows:

![native ad CSS](/files/48d96ea540e9b51e9eb31d20302d8bec5a016a51)

| Class                              | Action                                         |
| ---------------------------------- | ---------------------------------------------- |
| .exo-native-widget-outer-container | Styles the entire widget container.            |
| .exo-native-widget-item            | Styles the containers of the individual items. |
| .exo-native-widget-item-image      | Styles the image.                              |
| .exo-native-widget-item-title      | Styles the title text.                         |
| .exo-native-widget-item-text       | Styles the description text                    |

### Additional CSS classes

You can also style the native ad using these additional CSS classes:

| Class                                 | Action                                                         |
| ------------------------------------- | -------------------------------------------------------------- |
| .exo-native-widget                    | Wraps the whole widget.                                        |
| .exo-native-widget-header             | Wraps the header elements.                                     |
| .exo-native-widget-outer-container    | Wraps all ads.                                                 |
| .exo-native-widget-item-container     | Wraps the adbox.                                               |
| .exo-native-widget-item-image-wrapper | Wraps the image in the adbox.                                  |
| .exo-native-widget-item-image-ratio   | Sets the ad image aspect ratio.                                |
| .exo-native-widget-item-content       | Wraps all the adbox text.                                      |
| .exo-native-widget-item-content-box   | This wraps the title, description and brand of the ad wrapper. |
| .exo-native-widget-item-brand         | Styles the ad brand.                                           |

**Examples**

* The following examples show how Publishers can adapt CSS styles on Native Ad Zone setup based on their needs.

{% stepper %}
{% step %}

#### 1. To place the text box over the image.

![native ad CSS example](/files/a1619a0dee4c9269e162825274408a7b69637529)

```css

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

```

{% endstep %}

{% step %}

#### 2. To modify the size of the text box.

![native ad CSS example](/files/4453ea901c3655de9c452c4e9d85f0b53f90ceb5)

```css

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

```

{% endstep %}

{% step %}

#### 3. To place the text box over the image and add a background to the text box with opacity.

![native ad CSS example](/files/af400f58938c7fd083d2d5dfff97891cd271fbc6)

```css

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 4. To curve the image borders.

![native ad CSS example](/files/7294038269d88437f6c95768516e66fc87ae836d)

```css

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

```

{% endstep %}

{% step %}

#### 5. To set a style for the font. This way the Publisher can use fonts available on their website and other than those available on Zone setup.

![native ad CSS example](/files/6b0b5991d6b33cd898dabff387fe1ad07e38dc65)

```css

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

```

{% endstep %}

{% step %}

#### 6. To add padding between the image and text, so the text can be either close or far from the image. You can also use padding-bottom to add padding below the text.

![native ad CSS example](/files/820fad6db5f9abe4a1043ca210d94c4d7d2379b0)

```css

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

```

{% endstep %}

{% step %}

#### 7. To customize the background colour of the text box so it only affects the text box that is below each image, leaving the space between images and boxes transparent or with a different background colour.

![native ad CSS example](/files/c356c9bb6709176c4ea0ed208d7e2f8e89d420b6)

```css

 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 8. To add a border that covers an image and its text box. This will help separate each image within that Native Widget.

![native ad CSS example](/files/6bd2f4adf0c181b1c73e4a6f8511948bc7bf02b2)

```css

.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}

```

{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/publishers/sites-and-zones/native-ad-setup.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.