腾讯社交联盟广告

Bidding Android iOS 快应用 SDK H5 SDK Media API 常见问题

模板广告自定义样式说明

版本 时间 信息
1.0.1 2019-07-23 新增自定义模板广告编辑区、预览区说明
1.0.0 2018-12-30 模板广告自定义样式说明

1 模板广告概述

原生模板广告(又称自定义模板广告)支持支持GIF、视频、图片、图文 、文字链、H5富媒体;既能够满足您对大量曝光的需求,也支持应用直达,满足您对用户转化的需求。同时模板广告开放自定义编辑能力,开发者可以在优量汇平台调整广告文字、图片、宽高比、边距、渐变色等编辑,更好的满足开发者自身需求。

2 模板广告在线编辑器

2.1 编辑器介绍

模板广告在线编辑器(下称:编辑器)分为编辑区和预览区,编辑区用于广告属性值调整,预览区可以设置不同尺寸,自动实时渲染广告预览效果。

2.2 编辑器功能介绍

编辑区

具体模板广告可编辑内容已实际模板广告编辑效果为准。

预览区

3 模板广告样式调整

3.1 广告元素样式规则

3.1.1 文字类

3.1.2 图片类

3.1.3 背景类


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)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

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)模板

 文档反馈

腾讯公司 版权所有