AVADA网站实现SNS一键分享的方法

网站加上SNS分享功能，可以很好的帮助网站推广，让网站用户帮助我们去营销，今天Hunk就讲下AVADA网站实现SNS(社交媒体)一键分享的方法

注： 本文基于AVADA 5.22版本， AVADA5系的应该可以通用

常见的SNS包括faceboook, twitter, linkedin, pinterest, instagram, youtube等。

AVADA主题功能强大，它的element中有一个sharing box，就是一键分享的工具，今天我们要使用这一方法实现在网站顶部和底部分别加上SNS一键分享功能

随便打开一个page，切换到可视化操作模式，然后添加container 和 column, 在element里面点击sharing box，然后进行一些编辑

Tagline 这里把里面share this story, choose your platform删除

Social icons color type  选择brand colors

Social icon tooltip position 如果你要把SNS分享放网站顶部，那这里就选择bottom， 如果你要放底部，那这里就选择top

CSS class 这里填上share，然后点击SAVE

然后再点击USE Default editor切换到代码模式

再点击右上角这个visual功能，然后再找到如下图所示的这一段代码， 复制保存下来

举一反三：此方法可以用于获取avada的element代码，进行不同网站间的数据复制

注意：如果之前已经在顶部加过google翻译的功能，不建议把SNS分享功能加在顶部，可以加在网站底部，参考第三节内容

进入theme  options – Header – Header content, 首先要确保你的网站使用了header中的如下图所示的这几种layout，才可以在顶部加上SNS分享的功能

在此选项中，拉到最下面，把header content1和header content2按如下图所示选择

并把phone number for contact info和email addresss for contact info清空

然后在phone Number for contact info这个框里面粘贴以下代码，把标红的部分改成你的电话或邮箱

Call Us Today! +86-000000000 | <a href=”mailto:xx@你的域名.com“>xx@你的域名.com</a>

然后再加上你刚才复制的那一串代码，直接粘贴在上面代码的后面

最后，再把下面的CSS代码

.share{background:transparent!important;margin-bottom:0!important;padding:0!important;height:auto!important;width:auto!important;display:inline-block!important;float:right!important;}
.share .fusion-social-networks{display:inline-block!important;}

加到theme options – custom css中保存，刷新即可看到顶部SNS分享加载成功了！

进入theme options – footer，在copyrigh text这个框里面的原有内容后面加上本文第一节中复制的sharing box的代码，然后点击save changes保存

最后，再把下面的CSS代码

.share{background:transparent!important;margin-bottom:0!important;padding:0!important;height:auto!important;width:auto!important;display:inline-block!important;float:right!important;}
.share .fusion-social-networks{display:inline-block!important;}

加到theme options – custom css中保存，刷新即可看到底部SNS分享加载成功了！