原生广告设置

创建 本地广告 区域非常简单，但却具有强大的自定义功能。您可以根据自己的需要，使用略有不同的流程来设置本地广告区：

• 方案 A：您只需设置一个广告区，选择原生广告区图片的宽高比，然后设置网站上广告区的大小以匹配。
• 情景 B：您想设置广告区以匹配自定义图片大小或比例，这样广告区看起来就会与您的网站一样，并能完美匹配。
• 情景 C：您的网站上有一个特定大小的区域，您希望创建一个既适合又美观的广告区域。

无论您选择哪种方案，首先要做的就是创建原生广告区。

创建原生广告区

以发布商身份登录后，点击网站和区域、新区域，并展开本地部分，选择本地广告格式推荐小部件，然后点击下一步。

填写区域详细信息，然后点击下一步。

方案 A：快速布局：设置长宽比

在这种情况下，您可以在管理面板中设置图片的宽高比，而无需设置广告区域的总大小。使用快速布局时，您创建的广告区将自动适应您所放置容器的大小。

步骤 1：

选择快速布局选项卡。在桌面布局部分，设置希望在桌面上显示的广告列数和行数。

步骤 2：

接下来，从图像设置下拉菜单中选择图像的宽高比。您可以选择1:1、4:3或16:9，以匹配您网站上的缩略图。

步骤 3：

• 选择宽高比后，使用复选框选择是否显示文字，然后决定文字显示的位置。
• 该文本由标题和描述组成。如果需要，您可以在标题和描述部分分别打开或关闭这两个选项。
• 查看右侧的预览，了解广告区域的外观，必要时再次调整设置。

步骤 4：

• 重复上述移动版面部分的 1-3 步骤，设置移动广告区。

步骤 5：

• 查看屏幕右侧的桌面和移动预览。您可以在高级选项的移动断点下拉菜单中设置桌面和移动视图之间的断点位置。
• 断点可以设置为 iPad 的800px、手机的450px和无响应。更改断点后，我们在 "桌面布局 "部分的设置会影响桌面和 iPad，还是只影响桌面本身。
• 预览效果满意后，点击创建。

步骤 6：

• 复制 Zone HTML 标签，并将其添加到您的网站。
• 广告区域将自动调整为您放入标签的容器的 100%，即容器越大，区域和广告都将越大。

情景 B：快速布局：设置自定义图像大小

在这种情况下，您希望能够改变图片大小和广告间距，使其与您的网站相匹配。如果您真的想让原生广告看起来像是网站编辑内容的一部分，您就可以这样做。

步骤 1：

• 选择快速布局选项卡。在桌面布局部分，设置希望在桌面上显示的广告列数和行数。

步骤 2：

• 在图片设置下拉菜单中，选择自定义尺寸，然后设置图片的宽度和高度，使其与网站相匹配。如果网站包含一个元标签，并且是响应式的，那么在浏览网站时，图片也会随着屏幕尺寸的减小而响应。有关小工具尺寸和图像尺寸的信息将显示在预览上方的右上角。

步骤 3：

• 设置好图片大小后，使用 Text 复选框选择是否显示文字，并选择文字显示的位置。
• 查看右侧的预览，了解广告区域的外观，必要时再次调整设置。

步骤 4：

• 重复移动版面部分的步骤 1-3，设置移动广告区。

步骤 5：

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

---

注意：更改这些设置将改变广告区域的整体大小。

---

步骤 6：

• 查看屏幕右侧的桌面和移动预览。您可以在高级选项的移动断点下拉菜单中设置桌面和移动视图之间的断点位置。
• 断点可以设置为 iPad 的800px、手机的450px和无响应。更改断点后，我们在 "桌面布局 "部分的设置会影响桌面和 iPad，还是只影响桌面本身。
• 预览效果满意后，点击创建。

步骤 7：

• 复制 Zone HTML 标签，并将其添加到您的网站。
• 确保您网站上的广告区域大小与您刚刚创建的区域大小一致。

方案 C：自定义布局：设置固定区域大小

在这种情况下，您希望能够设置广告区域的大小以满足您网站的需求，并调整设置以确保广告显示效果良好。

步骤 1：

选择 "自定义布局"选项卡。在 "桌面布局"部分，设置要创建的广告区域的宽度和高度。

步骤 2：

接下来，选择您希望在广告区显示多少列和行的广告。查看右侧的预览，了解哪些设置适合您选择的尺寸。

步骤 3：

选择好所需的列数和行数后，使用文本复选框选择是否显示文本，并使用文本位置下拉框选择显示文本的位置。

步骤 4：

重复移动版面部分的步骤 1-3，设置移动广告区。

步骤 5：

• 查看屏幕右侧的桌面和移动预览。您可以在高级选项的移动断点下拉菜单中设置桌面和移动视图之间的断点位置。
• 断点可以设置为 iPad 的800px、手机的450px和无响应。更改断点后，我们在 "桌面布局 "部分的设置会影响桌面和 iPad，还是只影响桌面本身。
• 预览效果满意后，点击创建。

步骤 6：

复制 Zone HTML 标签，并将其添加到您的网站。

在 "移动突破点 "中选择反应迟钝者

• 当 "高级选项 "下的 "移动断点 "设置为 "无响应 "时，屏幕上将出现以下模式。

• 点击模式上的继续，将在包括手机和平板电脑在内的所有设备上为广告提供桌面布局。
• 选择 "无响应 "时，用户将无法再编辑移动布局。
• The image settings are updated to default custom size (Width - 200px and height - 200px) if not saved previously.  

在本地广告中使用自定义 CSS

在自定义 CSS 部分，您可以添加自定义 CSS，以确保广告区在您的网站上正确显示。我们提供了最重要的 CSS 类作为起点。了解有关 CSS 的更多信息 此处。

---

注意：请注意，对自定义 CSS 的更改不会显示在预览中：它们只会显示在网站上。

---

原生广告的 CSS 类别

方框中首先提供了五个 CSS 类，您可以根据需要粘贴其他样式。这五个 CSS 类可对本地广告中最重要的元素进行如下样式设置：

班级	行动
.exo-native-widget-outer-container	为整个 widget 容器设计样式。
.exo-native-widget-item	为单个物品的容器设计样式。
.exo-native-widget-item-image	为图像设计样式。
.exo-native-widget-item-title	为标题文本设计样式。
.exo-native-widget-item-text	为描述文本设计样式

其他 CSS 类

您还可以使用这些额外的 CSS 类来设置本地广告的样式：

班级	行动
.exo-native-widget	包裹整个 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 样式。

1. 将文本框置于图像上方。

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

1. 修改文本框大小

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

1. 在图像上放置文本框，并为文本框添加不透明背景。

 .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: 15px;
    color: white !important
    }
.exo-native-widget-item-text {
  margin-left: 15px;
  color: white !important
}

1. 使图像边框弯曲。

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

1. 为字体设置样式。这样，发布者就可以使用其网站上提供的字体，而不是 Zone 设置中提供的字体。

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

1. 在图片和文字之间添加填充，这样文字就可以离图片很近或很远。还可以使用 padding-bottom 在文字下方添加填充。

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

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

 .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: 15px;
}

.exo-native-widget-item-text {
margin-left: 15px;
}

1. 添加覆盖图片及其文本框的边框。这将有助于分隔原生 Widget 中的每张图片。

 .exo-native-widget-item-container {
  border: 2px #0073B7 solid !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important
}

.exo-native-widget-outer-container {
  margin-bottom: 10px !important;
  margin-right: 10px !important
}