前言
经常听到小伙伴抱怨,为什么我的幻灯区域不能制作一个文字背景分离的焦点图呢?总是千篇一律的设计banner图,有点审美疲劳了,那今天飞小优就带你玩转图文分离的banner,来走起!
来先看看效果图:
焦点图banner展示
再看看视频效果demo:
是不是挺帅的?那究竟是如何实现图文分离的漂亮banner呢?
教程
实现起来不难,找到后台》外观布局》SNS首页下的添加幻灯片,如下,添加前2处代码即可。
后台位置
①处代码:
<h2 style="font-size:40px;margin: -64px 0 10px 0;font-weight: 600;">你的文案标题</h2>
②处代码:
<p style="font-size:20px;color:#888">我是文案1</p>
<p style="font-size:20px;color:#888;">我是文案2</p>
<button type="btn2 btn-effect" href="javascript:void(0);" onclick="jinsom_pop_login_style();">注册登录</button>
<style type="text/css">
button {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
outline: 0;
margin: 20px;
border-radius: 30px;
background: #014dff;
color: #fff;
width: 115px;
height: 40px;
line-height: 20px;
border: none;
}
</style>
③处随意随意添加一个深色背景图,这样可以强调文字(若添加背景比较亮色的图当然你也可以通过css添加遮罩或者图层蒙版实现,这里不强调了,感兴趣的可以折腾下)
三处搞完后保存收工,查看前台即可。
祝你们的网站越来越好看,越来越好!!!
文章下回复“我要制作”即可免费体验demo!!!
隐藏内容需要回复可以看见
真正走掉那次,关门声最小。
谢谢分享 看看
灰尽暗夜燎前线,烟起迷雾挂蓝巾。
谎言不会伤人,真相才是快刀。
亲近你的朋友,但更要亲近你的敌人。
有情人终成眷属,没钱人亲眼目睹。
I'm nothing without you.
从来不会生气的人,注定终生遭受欺凌和压制,直至被摧毁和消灭。