• 注册
  • 发布
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:4 内容:6

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

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 3
    • wordpress主题
    • MarTech·神人
      2
      大富豪

      前言

      经常听到小伙伴抱怨,为什么我的幻灯区域不能制作一个文字背景分离的焦点图呢?总是千篇一律的设计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!!!

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

      回复
    • 生成海报
    • MarTech·大咖
      3
      有为青年
      我要制作
      回复
      MarTech·小白

      谢谢分享 看看

      回复
      MarTech·小白
      我要制作


      回复

      请登录之后再进行评论

      登录

      推荐圈子

      暂没有数据

    • 做任务
    • 签到中心
      小黑屋
      举报中心
    • 关闭窗口
      下载海报