• 注册
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:1505 内容:11

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

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 16
    • wordpress主题
    • 全栈营销师
      大会员
      推荐官

      前言

      经常听到小伙伴抱怨,为什么我的幻灯区域不能制作一个文字背景分离的焦点图呢?总是千篇一律的设计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·神人
      大会员
      靓号:1888888
      大富豪
      我要制作

      若教眼底无离恨,不信人间有白头

      回复
      MA·新手

      谢谢分享 看看

      回复
      MA·新手
      我要制作


      回复
      MA·小生
      比心

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

      回复
      MA·大咖
      精神小伙
      感谢

      找不到自己的位置,是很可怕的事情,就好比天黑了不知道睡觉。

      回复
      MA·小生
      比心
      回复
      MA·老炮
      精神小伙
      比心

      我希望兜兜转转之后那个人还是你。

      回复
      MA·老炮
      精神小伙
      辛苦了

      如果你在的时候,会不会伸手拥抱我

      回复
      MA·老炮
      精神小伙
      辛苦了

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

      回复
      MA·老炮
      精神小伙
      辛苦了

      实变函数学十遍,泛函学完心泛寒。

      回复

      请登录之后再进行评论

      登录

      推荐圈子

    • 数字营销
      数字营销
      B2B数字营销研究与分析
    • 营销百科
      营销百科
      数字营销专有名词介绍
    • 推式营销
      推式营销
      Outbound Marketing
    • 集客营销
      集客营销
      Inbound Marketing
    • 赚金币
    • 发布
    • VIP权益
    • 帖子间隔 侧栏位置: