最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】wordpress的Fortuna主题中如何配置全局悬浮框

WordPress crifan 1855浏览 0评论
一个基于Fortuna主题的wordpress网站,希望弄一个悬浮的框,在右下角
显示出 一个官方微信的二维码和联系方式:
去看看如何实现。
wordpress 悬浮框
一款侧边栏小工具浮动(固定)于浏览器窗口的WordPress 插件 | DeveWork
WordPress Fixed / Sticky / Scrolling Widget – YouTube
WordPress 添加漂亮的可定制悬浮信息框/订阅框/公告框 | WordPress大学
Q2W3 Fixed Widget — WordPress Plugins
WordPress 添加漂亮的可定制悬浮信息框/订阅框/公告框 真心漂亮呀 ! – 米问外贸论坛
WordPress添加前台悬浮/弹框登录窗口 – 何敏杰博客
有没有实现客服浮框效果的wordpress 插件? – 知乎
边栏小工具悬浮固定插件:Q2W3 Fixed Widget_百度经验
搜:
Q2W3 Fixed Widget
去安装:
但是添加完毕后,此处主题的自己的小工具中并没有那个选项:
看看自定义的边栏小工具是否有:
结果想要拖动过来自定义html,结果无法拖动:
只能拖动到 已有的几个分类中才行。
所以好像没法添加全局页面的 浮动的东西?
或许是主题中支持这方面的功能?
去看看
没找到。
wordpress  客服 插件
wordpress  悬浮 插件
WP Floating Menu – One page navigator, sticky menu for WordPress — WordPress Plugins
是按钮的悬浮,点击只能跳转,没有二维码和内容显示
WordPress外贸企业网站左右浮动在线客服按钮 | DIYzhan.com-从零开始自己做外贸网站和海外网络营销
http://www.diyzhan.com/2017/02/floating-customer-service/
这个是最像的,但是要收费:150
WordPress客服插件(QQ旺旺Skype微信电话二维码QQ群微博邮箱自定义) | WordPress大学
收费:65
WordPress不用插件实现侧边栏小工具悬浮跟随效果 – 答曰
要自己折腾,而且效果不是我们要的。
[¥2]为网站添加客服框的WordPress插件 | WordPress主题之家
-》
WordPress客服插件_刘荣焕
如何给wordpress增加QQ、旺旺客服插件_百度经验
WordPress 添加漂亮的可定制悬浮信息框/订阅框/公告框 真心漂亮呀 ! – 米问外贸论坛
去搜试试:
Dreamgrow Scroll Triggered Box
Scroll Triggered Box
默认设置的效果是:
开始没有:
滚动到底部,出现了:
继续去优化:
html代码:
<div class="section">
  <div class="col span_1_of_2" style="margin: 0;width: 50%">
    <h3 style="text-align: center;padding: 10px 0;margin: 0;">联系方式</h3>
    <div class="boc_contact_icon" style="padding-left: 6px;">
      <span style="margin-right: 6px;" class="icon icon-mobile3"></span>+86 13812345678
    </div>
    <div class="boc_contact_icon" style="padding-left: 6px;">
      <span style="margin-right: 6px;" class="icon icon-mail2"></span>
HR@xxx
    </div>
    <div class="boc_contact_icon" style="padding-left: 6px;">
      <span style="margin-right: 6px;" class="icon icon-location2 bigger "></span> 上海市xxx1楼
    </div>
  </div>
  <div class="col span_1_of_2" style="text-align: center;margin: 0;width: 50%">
      <h3 style="padding: 10px 0;margin: 0;">官方微信</h3>
      <p style="text-align: center;margin: 0;">
        <img src="
http://www.xxxx.com/wp-content/uploads/2018/03/xxx_weixin.jpg
" width="170px" height="170px" alt="官方微信">
      </p>
  </div>
</div>
效果:
关闭后,显示:

转载请注明:在路上 » 【已解决】wordpress的Fortuna主题中如何配置全局悬浮框

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.197 seconds, using 22.09MB memory