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

# 原生广告设置

创建一个 [原生广告](/publishers/zh/wang-zhan-yu-ban-wei/create-zone.md#recommendation-widget) 广告位很简单，同时又具有强大的自定义能力。根据你的需求，你可以使用略有不同的流程来设置原生广告位：

* **场景 A**：你只想设置一个广告位，选择原生广告位图片的宽高比，然后将你网站上的广告位尺寸设置为匹配。
* **场景 B**：你希望设置广告位以匹配自定义图片尺寸或比例，使广告位看起来与网站一致并完美契合。
* **场景 C**：你的网站上有一个特定尺寸的区域，并希望创建一个适合其中且效果良好的广告位。

无论你选择哪种场景，首先都需要创建一个原生广告位。

## 创建原生广告位

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

![创建原生广告位](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/1lsZ4Ki3CIL173vBDbzo/assets/hires/create-zone-native.png)

填写广告位详细信息并点击 **下一步**.

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

{% stepper %}
{% step %}

### 步骤 1

![原生步骤 1](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/i4nnDybTXZj0jYx8l8ie/assets/hires/native/sca-step1.png)

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

{% step %}

### 步骤 2

![原生步骤 2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/XcQLr7Fi2GR8u2O7oLcD/assets/hires/native/sca-step2.png)

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

{% step %}

### 步骤 3

![原生步骤 3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/5LzyX7rTkfZEucmCbY04/assets/hires/native/sca-step3.png)

* 选择宽高比后，使用复选框选择是否显示文本，然后决定其显示位置。
* 此文本由一个 **标题** 和一个 **描述**组成。你可以在 **标题** 和 **描述** 部分中分别单独开启或关闭它们（如果你愿意）。
* 查看右侧预览，看看你的广告位效果如何，如有必要可再次调整设置。
  {% endstep %}

{% step %}

### 步骤 4

![原生步骤 4](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/pXcT9dbHa7ocZdeuSgGC/assets/hires/native/sca-step4.png)

* 在以下部分中重复上面的步骤 1-3： **移动端布局** 部分，以将你的广告位设置为移动端。
  {% endstep %}

{% step %}

### 步骤 5

![原生步骤 5](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

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

{% step %}

### 步骤 6

![原生步骤 6](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

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

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

{% stepper %}
{% step %}

### 步骤 1

![原生步骤 7](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/esjgXHOuLYDy2kSfiWXV/assets/hires/native/scb-step1.png)

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

{% step %}

### 步骤 2

![原生步骤 8](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/9knI85T5uv4S2k0ennMD/assets/hires/native/scb-step2.png)

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

{% step %}

### 步骤 3

![原生步骤 9](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/YWchSf0txs1p9pbnCBXb/assets/hires/native/scb-step3.png)

* 设置好图片尺寸后，使用 **文本** 复选框选择是否显示文本，并选择其显示位置。
* 查看右侧预览，看看你的广告位效果如何，如有必要可再次调整设置。
  {% endstep %}

{% step %}

### 步骤 4

![原生步骤 10](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/A8dhcTNINaI7ni1fz9Ho/assets/hires/native/scb-step4.png)

* 在以下内容中重复步骤 1-3： **移动端布局** 部分，以将你的广告位设置为移动端。
  {% endstep %}

{% step %}

### 步骤 5

![原生步骤 11](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4EatUeZ6VmU4VsaUQpfE/assets/hires/native/scb_advance1.png)

* 在 **高级选项** 在该部分中，你可以设置以下项目周围的像素数： **垂直间距** 和 **水平间距** 你希望每个广告周围留出的空间。

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

{% step %}

### 步骤 6

![原生步骤 12](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

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

{% step %}

### 步骤 7

![原生步骤 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

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

{% tab title="场景 C：自定义布局：设置固定广告位尺寸" %}
在此场景中，你希望能够设置广告位的尺寸以匹配网站需求，并调整设置以确保广告显示良好。

{% stepper %}
{% step %}

### 步骤 1

![原生步骤 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/JEhQvAhXNjExOj7GXOyw/assets/hires/native/scc-step1.png)

选择 **自定义布局** 选项卡。在 **桌面布局** 部分，设置 **宽度** 和 **高度** ，即你希望创建的广告位总尺寸。
{% endstep %}

{% step %}

### 步骤 2

![原生步骤 14](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/WVwRdNmMUtNGQnymV67U/assets/hires/native/scc-step2.png)

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

{% step %}

### 步骤 3

![原生步骤 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/oObBcmxtsFqPjD2pa1fl/assets/hires/native/scc-step3.png)

选择好你想要的列数和行数后，使用 **文本** 复选框选择是否显示文本，并使用 **文本位置** 下拉菜单选择显示位置。
{% endstep %}

{% step %}

### 步骤 4

![原生步骤 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/wdY8i3TWgXoyIWW3SYrW/assets/hires/native/scc-step4.png)

在以下内容中重复步骤 1-3： **移动端布局** 部分，以将你的广告位设置为移动端。
{% endstep %}

{% step %}

### 步骤 5

![原生步骤 16](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

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

{% step %}

### 步骤 6

![原生步骤 17](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

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

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

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

![不响应式2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/AHKGWus2UFehm3E9QMTe/assets/hires/unresponsive2.png)

![不响应式3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/MbemiUHb7Szd9C1r4JWZ/assets/hires/unresponsive3.png)

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

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

![横幅](https://117853814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGoSwRYjxsR1XS6va6yLj%2Fuploads%2FbUrcdZCax7qachURBVTS%2Fimage.png?alt=media\&token=75616bc9-e5e7-42a2-8c9b-34707a1e0bc2)

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

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

### 原生广告的 CSS 类

起始框中提供了五个 CSS 类，你也可以根据需要粘贴其他样式。这五个 CSS 类用于设置原生广告中最重要元素的样式，如下：

![原生广告 CSS](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ThwwsRHFlTOSbIoMqI1E/assets/hires/native-ad-css-class.png)

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

### 其他 CSS 类

你还可以使用以下附加 CSS 类来设置原生广告样式：

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

**示例**

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

{% stepper %}
{% step %}

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

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/QFAzxUnKNOild5gSn0VS/assets/hires/native-ad-css-text-on-image.png)

```css

 .msg-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 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/qx3YHuopQjx13mXCcF6v/assets/hires/native-ad-css-size-of-text-box.png)

```css

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

```

{% endstep %}

{% step %}

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

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rrwKCULO65AOG3mF2Y5z/assets/hires/native-ad-css-text-on-image-with-background.png)

```css

 .msg-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;
    }
.msg-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 4. 将图片边框设为圆角。

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/FwVaN0LAs4cUEaw1RaTy/assets/hires/native-ad-css-round-the-corners.png)

```css

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

```

{% endstep %}

{% step %}

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

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4VgfwQ8IQHImagcqHtFr/assets/hires/native-ad-css-other-options.png)

```css

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

```

{% endstep %}

{% step %}

#### 6. 在图片和文本之间添加内边距，使文本可以更靠近或更远离图片。你也可以使用 padding-bottom 在文本下方添加内边距。

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/zusqVYVxOAml6RhFfaHw/assets/hires/native-ad-css-change-padding.png)

```css

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

```

{% endstep %}

{% step %}

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

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/H08catOYIpWoAcmXJHoh/assets/hires/native-ad-css-customise-background-color.png)

```css

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

```

{% endstep %}

{% step %}

#### 8. 添加一个同时覆盖图片及其文本框的边框。这将有助于分隔该原生组件中的每张图片。

![原生广告 CSS 示例](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ZPr4F1I8Cbu9MhAnXpGy/assets/hires/native-ad-css-set-border.png)

```css

.msg-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.msg-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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.exoclick.com/publishers/zh/wang-zhan-yu-ban-wei/yuan-sheng-guang-gao-she-zhi.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.