模板广告自定义样式说明
版本 | 时间 | 信息 |
---|---|---|
1.0.1 | 2019-07-23 | 新增自定义模板广告编辑区、预览区说明 |
1.0.0 | 2018-12-30 | 模板广告自定义样式说明 |
1 模板广告概述
原生模板广告(又称自定义模板广告)支持支持GIF、视频、图片、图文 、文字链、H5富媒体;既能够满足您对大量曝光的需求,也支持应用直达,满足您对用户转化的需求。同时模板广告开放自定义编辑能力,开发者可以在优量汇平台调整广告文字、图片、宽高比、边距、渐变色等编辑,更好的满足开发者自身需求。
- 具体模板广告分类见附录:5.1 模板广告分类
2 模板广告在线编辑器
2.1 编辑器介绍
模板广告在线编辑器(下称:编辑器)分为编辑区和预览区,编辑区用于广告属性值调整,预览区可以设置不同尺寸,自动实时渲染广告预览效果。
2.2 编辑器功能介绍
编辑区
- 广告图片
- 边距调整
- 宽高比
- 圆角调整
- 广告标题
- 字号调整
- 边距调整
- 字体颜色编辑
- 单行或多行显示选择
- 广告描述
- 字号调整
- 边距调整
- 字体颜色编辑
- 单行或多行显示选择
- 广告背景
- 背景颜色值调整,支持纯色、渐变色
- 关闭按钮
- 部分模板广告关闭按钮默认为关闭,需要开发者开启。
- 文字遮罩
- 遮罩颜色调整,支持渐变色
- 遮罩边距编辑
- 遮罩宽高编辑
具体模板广告可编辑内容已实际模板广告编辑效果为准。
预览区
- 预览视窗
- 用于调整广告播放宽度,模拟手机不通屏幕宽度效果,例如:320,375等值
- 广告预览
- 当确认预览视窗的宽度后,广告将会在此宽度下进行广告渲染,模拟手机效果
- 下载预览区
- 提供广告渲染效果下载功能
3 模板广告样式调整
3.1 广告元素样式规则
3.1.1 文字类
- 联盟平台支持对广告文字类标签设置字号、边距、颜色、是否单行显示操作
- 字号:调整文字大小,单位为px,整数型;
- 边距:调整文字标签四周外边距,边距包括:上边距、右边距、下边距、左边距,单位为px,整数型;
- 颜色:可调整文字显示颜色,使用3位或者6位标准16进制表示,例如:
#FF0
、#FF0000
; - 单行显示:联盟广告开放了标题单行显示选项,开启后,无论字数多少,默认只能显示一行标题,多余字符使用
…
表示,关闭后,文字自动换行显示。
3.1.2 图片类
- 联盟平台支持对图片类标签设置尺寸、高宽比、外边距、圆角操作
- 尺寸:在左右图文类广告,提供开发者对广告图片设置长度和宽度,但我们也同时限制了尺寸最大值和宽高比值,具体尺寸请使用左右图文广告设置参考,单位为px,整数型输入;
- 高宽比:在上下图文、双图文、文字浮层和三小图类广告,我们提供开发者对广告图片进行高宽比设置,允许开发者对图片在合理范围内进行调整;
- 外边距(边距):提供所有广告图片外边距设置,单位为px,整数型输入。
- 圆角:开发者可以在所有类型广告对广告图片设置图片圆角,可以分别对图片左上、右上、右下、左下四个方向分别设置圆角,单位为px,整数型输入。
3.1.3 背景类
- 为保证广告和流量上下文融入,支持广告背景色设置,背景色支持纯色和渐变色输入
- 背景色:模板广告支持纯色背景和渐变色背景色输入,纯色使用3位或6位16进制颜色值,或者CSS3 渐变色值,例如:
#FFF
,#FF0000
,linear-gradient(to right, red , blue)
- 背景色:模板广告支持纯色背景和渐变色背景色输入,纯色使用3位或6位16进制颜色值,或者CSS3 渐变色值,例如:
4 CSS样式介绍
为了方便开发者快速使用样式规则,本文将常见的样式规则说明收集如下,方便开发者阅读和使用
4.1 CSS颜色定义
CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。
4.2 颜色值
十六进制值使用三个双位数来编写,并以 # 符号开头。
颜色 | 色块 | 16进制 |
---|---|---|
黑色 | #000000 | |
红色 | #FF0000 | |
绿色 | #00FF00 | |
蓝色 | #0000FF | |
黄色 | #FFFF00 | |
青色 | #00FFFF | |
灰色 | #C0C0C0 | |
黑色 | #000000 | |
白色 | #FFFFFF |
4.3 CSS渐变色
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
- CSS3 定义了两种类型的渐变(gradients):
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
4.4 线性渐变
创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
- 语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
颜色 | 色块 | 渐变值 |
---|---|---|
红蓝渐变(竖) | linear-gradient(red, blue) | |
红蓝渐变(横) | linear-gradient(to right, red , blue) | |
红蓝渐变(对角) | linear-gradient(to bottom right, red , blue) | |
红蓝渐变(自定义角度) | linear-gradient(70deg, red, blue) | |
三色渐变(竖) | linear-gradient(#FF0000, #00FF00, #FFFF00) | |
多色渐变(横) | linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet) |
径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
- 语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
颜色 | 色块 | 渐变值 |
---|---|---|
自适应径向渐变 | radial-gradient(red, blue); | |
圆形径向渐变 | radial-gradient(circle, red, yellow, green) |
5 附录
5.1 模板广告分类
模板广告目前分为六类11种模板,具体的广告类型和模板关系如下:
广告类型 | 广告模板 | 广告预览 |
---|---|---|
左右图文 | 左图右文模板 | |
- | 右图左文模板 | |
上下图文 | 上图下文模板 | |
- | 上文下图模板 | |
双图文 | 双图双文模板 | |
文字浮层 | 上文下图浮层模板 | |
- | 上图下文浮层模板 | |
- | 纯文浮层模板 | |
三小图 | 三小图模板 | |
纯图 | 横图(1280*720)模板 | |
- | 竖图(800*1200)模板 |