Elementor为网站添加社交分享按钮

社交分享是WordPress网站中非常重要的部分,可以促进用户把网站分享给朋友,在本文中来分享下如何用Elementor为网站添加社交分享功能

创建分享按钮

因为社交按钮为Elementor Pro中的模块,确保你已升级到Elementor Pro

打开 Templates – 添加一个新的模板

1589197464-f9d3608dcdde40b

类型选 Section,名称随意,不过最好设置一个容易识别的

1589197465-4c87601665b0fe7

然后找到 Share Buttons,将其拖拽到编辑区域

1589197467-008264472c11bff

点击社交元素,即可管理分享按钮,可以通过面板添加、删除、调整已有按钮的排列顺序

1589197468-f8f439ca2dc3ac6

底部选项为样式调整区域,包括图标文字样式、标签、形状、对齐等选择,可适配大部分网站

1589197469-acf355ecd9ec5c1

如果你需要调整细节,还可以到样式和高级设置中调整更多选项

然后发布并保存,到 Templates 列表中获取短代码(Shortcode)

1589197471-8725e3669e42dc7

集成到WordPress站点

获取到短代码后,就可以将其添加到网站了,可以用代码或Hooks,这里以Astra主题的Hooks演示添加

打开 外观 – Custom Layouts,添加一个新的内容

把刚刚的短代码复制到编辑器中,如下图

1589197472-b1af5798d87cc78

然后设置Hooks选项,重点是 Action 和 Dispaly 两个选项,分别代表显示位置和显示的范围,比如你可以设置显示在内容前还是内容后,设置在所有文章页或特定页面显示等,更多可以参考Astra Hooks教程

1589197473-e49e304dae7f2bb

最后保存,就可以在网站上看到社交分享按钮了

1589197475-b9379acf61ebee5
免责申明:
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流,可进群讨论!
2. 如有无法查看或链接失效,烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 欢迎大家帮助本站出力,赞助费用仅维持本站的日常运营所需!故不接受任何形式的退款。
5. 搜5G网无法保证文章教程或资源的完善与安全,请自行检测解决。
6. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。
本站资源素材仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本作品采用BY-NC-SA 4.0 《国际知识共享署名许可协议4.0》 进行许可 。
本站所有图片素材均享自由版权下创作共用CC0协议。
搜5G资源网,5G资源网 » Elementor为网站添加社交分享按钮

发表评论

搜5G网永久会员限时优惠中,不限下载,免费更新

立即查看 了解详情