• 注册
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:3211 内容:12

    如何制作一个图文分离的漂亮banner,这就安排!

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 16
    • wordpress主题
    • MA·6
      大会员
      冲向2023

      前言

      经常听到小伙伴抱怨,为什么我的幻灯区域不能制作一个文字背景分离的焦点图呢?总是千篇一律的设计banner图,有点审美疲劳了,那今天飞小优就带你玩转图文分离的banner,来走起!

      来先看看效果图:

      如何制作一个图文分离的漂亮banner,这就安排!

      焦点图banner展示

      再看看视频效果demo:


      是不是挺帅的?那究竟是如何实现图文分离的漂亮banner呢?

      教程

      实现起来不难,找到后台》外观布局》SNS首页下的添加幻灯片,如下,添加前2处代码即可。

      如何制作一个图文分离的漂亮banner,这就安排!

      后台位置

      ①处代码

      <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!!!

      隐藏内容需要回复可以看见

      回复
      MA·6
      大富豪
      我要制作

      真正走掉那次,关门声最小。

      回复
      MA·1

      谢谢分享 看看

      回复
      MA·1
      我要制作


      回复
      MA·2
      比心

      灰尽暗夜燎前线,烟起迷雾挂蓝巾。

      回复
      MA·5
      精神小伙
      感谢

      谎言不会伤人,真相才是快刀。

      回复
      MA·2
      比心
      回复
      MA·5
      精神小伙
      比心

      亲近你的朋友,但更要亲近你的敌人。

      回复
      MA·5
      精神小伙
      辛苦了

      有情人终成眷属,没钱人亲眼目睹。

      回复
      MA·5
      精神小伙
      辛苦了

      I'm nothing without you.

      回复
      MA·5
      精神小伙
      辛苦了

      从来不会生气的人,注定终生遭受欺凌和压制,直至被摧毁和消灭。

      回复

      请登录之后再进行评论

      登录
      和我们一起在QQ上讨论Hot
      官方人员的回复时间
      小于5分钟
      >
      弹幕互动暂停滚动
      发表

      热门作者

    • 龇牙咧嘴你干
      龇牙咧嘴你干
      龇牙咧嘴你干
    • 骑猪Δ追太
      骑猪Δ追太
      骑猪Δ追太
    • 风伴终
      风伴终
      风伴终
    • 颓废美堕落
      颓废美堕落
      颓废美堕落
    • 青春还年
      青春还年
      青春还年
    • 青春命葬校
      青春命葬校
      青春命葬校
    • 陌生的挚
      陌生的挚
      陌生的挚
    • 错过是一种遗
      错过是一种遗
      错过是一种遗
      • 总打赏排行
      • 今日收益排行
    • 小助手
      小助手
      回首向来萧瑟处,归去, 也无风雨也无晴。
    • 翰林学士
      翰林学士
      内心湛然,则无往而不乐。
    • 诸子百家
      诸子百家
      物质与意识的辩证关系:物质决定意识,意识反作用于物质。
    • 文韬武略
      文韬武略
      真正走掉那次,关门声最小。
    • 运营者
      运营者
      常记溪亭日暮,沉醉不知归路。兴尽晚回舟,误入藕花深处。
    • MA
      MA
      上飞优 认识更多营销同行者
    • 诸葛大V
      诸葛大V
      上飞优 认识更多营销同行者
    • 清风徐来
      清风徐来
      上飞优 认识更多营销同行者
    • 耳东人圭
      耳东人圭
      耳东人圭
    • IoT物联网
      IoT物联网
      IoT物联 连接未来
    • 小助手
      小助手
      回首向来萧瑟处,归去, 也无风雨也无晴。
    • 诸子百家
      诸子百家
      物质与意识的辩证关系:物质决定意识,意识反作用于物质。
    • 翰林学士
      翰林学士
      内心湛然,则无往而不乐。
    • 文韬武略
      文韬武略
      真正走掉那次,关门声最小。
    • 那甜腐心蚀骨
      那甜腐心蚀骨
      梦想和现实,中间隔着一条泥泞的路,什么样的结果,取决于脚!
    • 微微安37℃
      微微安37℃
      黑色世界唯有东方的曙光。
    • 十八是只猫
      十八是只猫
      人性一个最特别的弱点就是:在意别人如何看待自己。
    • 小曦北
      小曦北
      你说过,人最大的敌人是自己。
    • 咕噜是只猫!
      咕噜是只猫!
      然后知生于忧患,而死于安乐也。
    • 歡喜
      歡喜
      人总是贪婪的,就像最开始,我也只是想知道你的名字。
    • 赞赏我们

      • 打赏我们
      • 加入微信群
      • 加入QQ群
      社群时间有限请加微信:tye10w
    • 赚金币
    • 换头衔
    • 新动态
    • 客服
    • 购物车
    • VIP权益
    • 帖子间隔 侧栏位置: