> 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/zh/zhan-dian-yu-guang-gao-wei/yuan-sheng-guang-gao-she-zhi.md).

# 原生广告设置

创建一个 [原生广告](/publishers/zh/zhan-dian-yu-guang-gao-wei/create-zone.md#recommendation-widget) 版位既简单又具有强大的可定制性。根据您的需求，您可以采用略有不同的流程来设置原生广告版位：

* **场景 A**：您只需设置一个广告版位，选择原生广告版位图片的宽高比，然后将您网站上的广告版位尺寸设为匹配即可。
* **场景 B**：您希望将广告版位设置为匹配自定义图片尺寸或比例，这样广告版位看起来与您的网站一致，并能完美契合。
* **场景 C**：您网站上有一个特定尺寸的版位，并希望创建一个能适配其中且看起来美观的广告版位。

无论您选择哪种场景，首先需要做的就是创建一个原生广告版位。

## 创建原生广告版位

以发布者身份登录后，点击 **网站和版位**, **新广告位**，并展开 **原生** 部分，选择原生广告格式 **推荐组件** 并点击 **下一步**.

![创建原生版位](/files/0001095a440de004caa400f21c52b23ee05e39e7)

填写版位详情并点击 **下一步**.

{% tabs %}
{% tab title="场景 A：快速布局：设置宽高比" %}
在这种场景下，您在管理面板中设置图片的宽高比，无需设置广告版位的总尺寸。使用 **快速布局**时，您创建的广告版位会自动适应您放置它的容器大小。

{% stepper %}
{% step %}

### 步骤 1

![原生步骤 1](/files/32aee9e1f114e0bdc6b3ee88b3cf28a986a8c2bb)

选择 **快速布局** 选项卡。在 **桌面布局** 部分，设置您希望在桌面端显示的广告列数和行数。
{% endstep %}

{% step %}

### 步骤 2

![原生步骤 2](/files/7d983d49cfbd0a4cd67996c936f291e6f46be087)

接下来，从 **图片设置** 下拉菜单中选择图片的宽高比。您可以在 **1:1**, **4:3** 还是 **16:9**之间进行选择，以匹配您网站上的缩略图。
{% endstep %}

{% step %}

### 步骤 3

![原生步骤 3](/files/afd2604f8483a5f701d0052b993541c2e8ca27ad)

* 选择好宽高比后，使用复选框决定是否显示文本，然后决定文本显示的位置。
* 该文本由 **标题** 和 **描述**组成。若需要，您可以在 **标题** 和 **描述** 部分分别开启或关闭它们。
* 查看右侧预览以了解您的广告版位外观，如有需要再调整设置。
  {% endstep %}

{% step %}

### 步骤 4

![原生步骤 4](/files/c58f73bf9e7883c51b9b72653ede28447d3f47f4)

* 在 **移动布局** 部分重复以上步骤 1-3，以为移动端设置您的广告版位。
  {% endstep %}

{% step %}

### 步骤 5

![原生步骤 5](/files/225fd13ba2c07eac868bccf2191640877991605e)

* 查看屏幕右侧 **桌面端** 和 **移动端** 的预览。您可以在 **移动断点** 下拉菜单中的 **高级选项**.
* 里设置桌面与移动视图之间的断点。 **800px** 用于 iPad， **450px** 用于移动端，以及 **不响应式**。当我们更改断点时，这会影响“桌面布局”部分中的设置是作用于桌面端和 iPad，还是仅作用于桌面端本身。
* 当您对预览效果满意后，点击 **创建**.
  {% endstep %}

{% step %}

### 步骤 6

![原生步骤 6](/files/fa060b9deec7fb80abf6ac2f827ebe10c6272d8b)

* 复制 **版位 HTML 标签** 并将其添加到您的网站。
* 广告版位会自动调整为您放入该标签的容器的 100%。即容器越大，版位和广告也会越大。
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="场景 B：快速布局：设置自定义图片尺寸" %}
在这种场景下，您希望能够更改图片尺寸和广告间距，以匹配您的网站。如果您确实希望原生广告看起来像是您网站编辑内容的一部分，就会这样做。

{% stepper %}
{% step %}

### 步骤 1

![原生步骤 7](/files/5181b899d8cfbb8dbf483fdaa07223e10721d47d)

* 选择 **快速布局** 选项卡。在 **桌面布局** 部分，设置您希望在桌面端显示的广告列数和行数。
  {% endstep %}

{% step %}

### 步骤 2

![原生步骤 8](/files/e5c83881d0df3fedc395960531e9e7b06d720c7d)

* 在 **图片设置** 下拉菜单中，选择 **自定义尺寸** ，并设置图片的宽度和高度以匹配您的网站。如果网站包含 meta 标签且是响应式的，那么当网站被查看时，随着屏幕尺寸减小，图片也会相应变化。有关 **组件尺寸** 和 **图片尺寸** 的信息将显示在预览上方的右上角。
  {% endstep %}

{% step %}

### 步骤 3

![原生步骤 9](/files/a4623606ae8fa536630e9c1e02317e1c8bd836b4)

* 设置好图片尺寸后，使用 **文本** 复选框决定是否显示文本，并选择其显示位置。
* 查看右侧预览以了解您的广告版位外观，如有需要再调整设置。
  {% endstep %}

{% step %}

### 步骤 4

![原生步骤 10](/files/6730749de32c58b2c880f13b70d217b7469729e6)

* 在 **移动布局** 部分重复以上步骤 1-3，以为移动端设置您的广告版位。
  {% endstep %}

{% step %}

### 步骤 5

![原生步骤 11](/files/d8574a4265b752f45197f0cdbef1d2667058173c)

* 在 **高级选项** 部分中，您可以设置每个广告周围需要多少像素的 **垂直间距** 和 **水平间距** 。

{% hint style="info" %}
**注意**：更改这些设置会改变广告版位的整体尺寸。
{% endhint %}
{% endstep %}

{% step %}

### 步骤 6

![原生步骤 12](/files/225fd13ba2c07eac868bccf2191640877991605e)

* 查看屏幕右侧 **桌面端** 和 **移动端** 的预览。您可以在 **移动断点** 下拉菜单中的 **高级选项**.
* 里设置桌面与移动视图之间的断点。 **800px** 用于 iPad， **450px** 用于移动端，以及 **不响应式**。当我们更改断点时，这会影响“桌面布局”部分中的设置是作用于桌面端和 iPad，还是仅作用于桌面端本身。
* 当您对预览效果满意后，点击 **创建**.
  {% endstep %}

{% step %}

### 步骤 7

![原生步骤 13](/files/fa060b9deec7fb80abf6ac2f827ebe10c6272d8b)

* 复制 **版位 HTML 标签** 并将其添加到您的网站。
* 确保您网站上的广告版位尺寸与您刚刚创建的版位尺寸一致。
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="场景 C：自定义布局：设置固定版位尺寸" %}
在这种场景下，您希望能够设置广告版位的尺寸以符合您网站的需求，并微调设置以确保广告展示良好。

{% stepper %}
{% step %}

### 步骤 1

![原生步骤 13](/files/8497a16971d5345db63311ef2300c68ea55a1b6e)

选择 **自定义布局** 选项卡。在 **桌面布局** 部分中，设置您要创建的整个广告版位的 **宽度** 和 **高度** 。
{% endstep %}

{% step %}

### 步骤 2

![原生步骤 14](/files/62b952585a64dfcff2497e0d40b785d01eca1447)

接下来，选择您希望在广告版位中显示多少 **列** 和 **行** 广告。查看右侧预览，了解哪些设置适合您所选择的尺寸。
{% endstep %}

{% step %}

### 步骤 3

![原生步骤 15](/files/35772cbd46c04fb0d2790ba5efb7c90217afc74a)

在选择好所需的列数和行数后，使用 **文本** 复选框 **文本位置** 下拉菜单。
{% endstep %}

{% step %}

### 步骤 4

![原生步骤 15](/files/fa37a94b7f8412d3c7b9ea5fa9b453f6131ac53f)

在 **移动布局** 部分重复以上步骤 1-3，以为移动端设置您的广告版位。
{% endstep %}

{% step %}

### 步骤 5

![原生步骤 16](/files/225fd13ba2c07eac868bccf2191640877991605e)

* 查看屏幕右侧 **桌面端** 和 **移动端** 的预览。您可以在 **移动断点** 下拉菜单中的 **高级选项**.
* 里设置桌面与移动视图之间的断点。 **800px** 用于 iPad， **450px** 用于移动端，以及 **不响应式**。当我们更改断点时，这会影响“桌面布局”部分中的设置是作用于桌面端和 iPad，还是仅作用于桌面端本身。
* 当您对预览效果满意后，点击 **创建**.
  {% endstep %}

{% step %}

### 步骤 6

![原生步骤 17](/files/fa060b9deec7fb80abf6ac2f827ebe10c6272d8b)

复制 **版位 HTML 标签** 并将其添加到您的网站。
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## 在移动断点中选择不响应式

* 当在“高级选项”下将“移动断点”设置为“不响应式”时，下面的弹窗将出现在屏幕上。

![不响应式2](/files/cd3de56fe5980f842f740b5af9f1cb3a6208a7aa)

![不响应式3](/files/2933f850b449d0c3dccd064f44d53fc56a0f8d48)

* 点击 **继续** 弹窗上的按钮将为所有设备（包括移动端和平板）上的广告提供桌面布局。
* 选择“不响应式”后，移动布局将不再可由用户编辑。
* 如果之前未保存，图片设置将更新为默认自定义尺寸（宽度 - 200px，高度 - 200px）。

## 在原生广告中使用自定义 CSS

![横幅](/files/ac3bf2b11811d7158dfcc8525073e6f20d655d69)

在 **自定义 CSS** 部分中，您可以添加自定义 CSS，以确保广告版位在您的网站上正确显示。这里提供了最重要的 CSS 类作为起点。了解更多关于 CSS [这里](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**注意**：请注意，对自定义 CSS 的更改不会显示在预览中：它们只会显示在您的网站上。
{% endhint %}

### 原生广告的 CSS 类

框中初始提供了五个 CSS 类，您可以根据需要粘贴额外样式。这五个 CSS 类分别为原生广告中最重要的元素设置样式，如下所示：

![原生广告 CSS](/files/7d7bff453dae22a2b9bb2ea3eb40f513c616fee5)

| 类                                  | 操作           |
| ---------------------------------- | ------------ |
| .exo-native-widget-outer-container | 设置整个组件容器的样式。 |
| .exo-native-widget-item            | 设置各个项目容器的样式。 |
| .exo-native-widget-item-image      | 设置图片样式。      |
| .exo-native-widget-item-title      | 设置标题文本样式。    |
| .exo-native-widget-item-text       | 设置描述文本样式     |

### 其他 CSS 类

您还可以使用这些其他 CSS 类来设置原生广告样式：

| 类                                     | 操作                  |
| ------------------------------------- | ------------------- |
| .exo-native-widget                    | 包裹整个组件。             |
| .exo-native-widget-header             | 包裹标题元素。             |
| .exo-native-widget-outer-container    | 包裹所有广告。             |
| .exo-native-widget-item-container     | 包裹广告框。              |
| .exo-native-widget-item-image-wrapper | 包裹广告框中的图片。          |
| .exo-native-widget-item-image-ratio   | 设置广告图片的宽高比。         |
| .exo-native-widget-item-content       | 包裹广告框中的所有文本。        |
| .exo-native-widget-item-content-box   | 这会包裹广告包装器的标题、描述和品牌。 |
| .exo-native-widget-item-brand         | 设置广告品牌样式。           |

**示例**

* 以下示例展示了发布者如何根据自身需求在原生广告版位设置中调整 CSS 样式。

{% stepper %}
{% step %}

#### 1. 将文本框放在图片上方。

![原生广告 CSS 示例](/files/df755068d192fa3624a89770965f48169bfeffa3)

```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. 修改文本框的大小。

![原生广告 CSS 示例](/files/e9dc21e5859c25486f8efcdd154e5d79f1856331)

```css

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

```

{% endstep %}

{% step %}

#### 3. 将文本框放在图片上方，并为文本框添加带透明度的背景。

![原生广告 CSS 示例](/files/149a98b056d4040af59da1cb0a6908e27b5b1e4c)

```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. 将图片边框设为圆角。

![原生广告 CSS 示例](/files/3fee5eb60243614c4e8bf3d84bf7581281e478de)

```css

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

```

{% endstep %}

{% step %}

#### 5. 设置字体样式。这样发布者就可以使用其网站上可用的字体，而不必局限于版位设置中可用的字体。

![原生广告 CSS 示例](/files/82745f69da0642ff64ac59366d5f6cde78b3622b)

```css

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

```

{% endstep %}

{% step %}

#### 6. 在图片和文本之间添加内边距，这样文本就可以与图片靠近或保持距离。您也可以使用 padding-bottom 在文本下方添加内边距。

![原生广告 CSS 示例](/files/d0e34aa48b619ffb04419eeb2bdf90ccef5fca23)

```css

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

```

{% endstep %}

{% step %}

#### 7. 自定义文本框的背景颜色，使其只影响每张图片下方的文本框，而图片与文本框之间的空间保持透明或使用不同的背景颜色。

![原生广告 CSS 示例](/files/dcc130610d0a59b7edae60271d93782ff2c3c40d)

```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. 添加一个同时覆盖图片及其文本框的边框。这有助于在该原生组件中区分每张图片。

![原生广告 CSS 示例](/files/aa97fec0b88e9a944b6ce3f7b64e55c24377ffed)

```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/zh/zhan-dian-yu-guang-gao-wei/yuan-sheng-guang-gao-she-zhi.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.