Wordpress插件与设计 - Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法 - 特色图片

Elementor 专业教程 20 - Share Buttons小工具的设置和使用方法

Elementor Share Buttons 小工具是一个用于在网站上添加社交媒体分享按钮的工具。

使用此工具,你可以在网站上添加 Facebook、Twitter、LinkedIn、Pinterest 等多种社交媒体平台的分享按钮,使用户能轻松分享网站内容。此外,该工具还提供了多种分享按钮样式和设计选项,你可以根据网站的设计风格进行自定义。

Elementor Share Buttons 小工具能帮助你增加网站的社交媒体曝光度,提高用户参与度,同时也有助于网站的推广。

本教程将说明 Share Buttons 小工具的功能设置和使用方法。

Elementor Shar Buttons 小工具

首先,将 Share Buttons 小工具拖放到编辑栏中,如下图所示。

拖放工具到编辑栏后,你会看到以下画面。

在编辑栏中,你可以看到默认预设的 Facebook,Twitter,LinkedIn 的分享按钮。

1. Share Buttons 工具的内容标签

Share Buttons 工具的内容标签主要包含以下设置选项:

  1. Share Buttons
  2. View
  3. Label
  4. Skin
  5. Shape
  6. Columns
  7. Alignment
  8. Target URL
1-1 Share Buttons

Share Buttons 是用于添加或删除社交媒体分享按钮的设置选项。

可以根据需求添加多个不同社交媒体平台的分享按钮,如 Facebook、Twitter、LinkedIn、Pinterest 等。

  • 复制项目:点击项目名称旁边的“叠纸”按钮以复制该项目。
  • 删除项目:点击项目名称旁边的“×”号按钮以删除该项目。
  • 新增项目:点击下方的“+新增项目”按钮以添加一个新的项目。

→ 编辑项目

点击任意项目,可以看到项目编辑页面的下拉菜单,如下图所示。

从上图中可以看到,项目的编辑页面中包含以下两个设置选项:

  • Network
  • Custom Label

Network

点击 Network 的下拉按钮,会弹出可用分享平台列表。列表包含以下社交媒体平台:

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Reddit
  • VK
  • OK
  • Tumblr
  • Digg
  • Skype
  • StumbleUpon
  • Mix
  • Telegram
  • Pocket
  • XING
  • WhatsApp
  • Email
  • Print

你可以在列表中选择任意的分享平台。上图中选择的是默认的 Facebook。

Custom Label

Custom Label 是用于自定义分享按钮标签的设置选项。

通过 Custom Label,你可以自定义按钮标签,例如将 “Facebook” 更改为中文 “脸书”。

1-2 View

View 是分享按钮显示方式的设置选项。你可以在以下三种预设中选择。

  • Icon&Text:同时显示图标和文本标签
  • Icon:仅显示图标
  • Text:仅显示文本标签
1-3 Label

Label 是设置是否显示分享按钮标签文本的选项。默认是显示,你可以选择不显示。

注意:在View当中选择“Icon”或者“Text”时,Label选项将无效。

1-4 Skin

Skin 是选择分享按钮预设皮肤的设置选项。你可以在以下五个预设皮肤中选择。

  • Gradient
  • Minimal
  • Framed
  • Boxed Icon
  • Flat
1-5 Shape

Shape 是选择分享按钮形状的设置选项。你可以在以下三个预设中选择。

  • Square:方块
  • Rounded:方圆
  • Circle:椭圆
1-6 Columns

Columns 是设置分享按钮列数的选项。默认是Auto,你可以在1到6列之间选择。

注意:选择Auto时,会根据分享按钮的数量自动调整列数。

1-7 Alignment

Alignment 是设置分享按钮对齐方式的选项。

你可以选择”左边对齐“,”居中对齐“,”右边对齐“,”两端对齐“。默认是左边对齐。

1-8 Target URL

Target URL 是设置分享按钮目标URL的选项。

  • Current Page:用户可以分享当前页面到社交媒体
  • Custom:自定义特定的页面URL,用户可以将它分享到社交媒体。

在自定义链接时,选择Custom后,你只需在下方输入框中输入要分享的页面URL链接地址。

2. Share Buttons 小工具的样式标签

Share Buttons 小工具的样式标签用于自定义分享按钮的外观样式。它包含以下设置选项。

  • Columns Gap:设置分享按钮列间距。你可以设置0到100的数值,数值越大间距也越大。
  • Rows Gap:设置分享按钮行间距。你可以设置0到100的数值,数值越大间距也越大。
  • Button Size:设置按钮大小。你可以设置0到2的数值,数值越大按钮也越大。
  • Icon Size:设置社交图标按钮大小。你可以设置0到3的数值,数值越大社交图标也越大。
  • Button Height:设置分享按钮高度。你可以设置0到7的数值,数值越大按钮高度也越大。
  • Color:设置分享按钮的颜色,包括文本颜色和图标颜色。
  • Primary Color:自定义选择和替换分享按钮的主要颜色。
  • Secondary Color:自定义选择和替换分享按钮的次要颜色。
  • Typography:自定义分享按钮的文本样式设置,如字体,大小,粗细,行高等。

3. Share Buttons小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是Share Buttons小工具的功能设置和使用说明。希望本篇内容能对你使用Elementor时有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

相关 文章
Wordpress插件与设计 - Elementor 基础教程 17 - 计数器小工具的设置和使用方法 - 特色图片
Elementor 基础教程 17 - 计数器小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 3 - Portfolio小工具的设置和使用方法 - 特色图片
Elementor 专业教程 3 - Portfolio小工具的设置和使用方法
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 17 - 轻松添加和编辑小工具,让网站与用户的互动更加有趣!
Wordpress插件与设计 - Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法 - 特色图片
Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法
Wordpress插件与设计 - Elementor 专业教程 6 - Login小工具的设置和使用方法 - 特色图片
Elementor 专业教程 6 - Login小工具的设置和使用方法
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 16 - 一步步教你如何创建诱人的导航菜单
Wordpress插件与设计 - Elementor 专业教程 9 - Animated Headline小工具的设置和使用方法 - 特色图片
Elementor 专业教程 9 - Animated Headline小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 32 - Progress Tracker小工具的设置和使用方法 - 特色图片
Elementor 专业教程 32 - Progress Tracker小工具的设置和使用方法
Wordpress插件与设计 - WP教程 25 - 提升博客吸引力的秘密武器! 全面解析小工具区块的魔力 - 特色图片
WP教程 25 - 提升博客吸引力的秘密武器! 全面解析小工具区块的魔力
Wordpress插件与设计 - Elementor 专业教程 4 - Gallery小工具的设置和使用方法 - 特色图片
Elementor 专业教程 4 - Gallery小工具的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - 天工智码SkyCode - AI编程助手 - 特色图片
SkyCode - 天工智码助力编码之路如虎添翼,效率翻倍实现梦想!
YYP-2024-06-28-14-01-59
Claros - AI助力,发现精品,购物无需纠结!
AI工具与服务推荐 - DreamStudio - AI图像生成工具 - 特色图片
DreamStudio - Stability.ai出品的AI绘图工具,文本输入即可生成惊艳画作
AI工具与服务推荐 - PromptBase - AI提示词市场 - 特色图片
PromptBase - 10万+优质提示词交易平台,释放AI创作力
AI工具与服务推荐 - 无界AI - AI创作平台 - 特色图片
Wujie AI - 在这里,您将成为艺术创作界的下一个"毕加索",展现无尽才华!
AI工具与服务推荐 - CodeGPT - AI编程助手平台 - 特色图片
CodeGPT - AI编程助手,为开发者提供全方位支持
Canva Post
Canva使用教程 - Canva 新手指南 4 - 告别平庸!用Canva打造与众不同PPT演示文稿 - 特色图片
Canva新手指南4 – 告别平庸!用Canva打造与众不同PPT演示文稿
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Canva使用教程 - Canva 新手指南 2 - 告别PS!全面解析Canva 图像编辑功能及其使用方法 - 特色图片
Canva新手指南2 – 告别PS!全面解析Canva 图像编辑功能及其使用方法
Canva使用教程 - Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品 - 特色图片
Canva 相关教程 3 - 设计初体验!用Canva打造你的第一个创意作品
Smm Post
社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片
YouTube Shorts!解析短视频创作和收益的秘密
社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片
缩略图设计终极指南,打造吸睛的视频门面!
社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片
YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里!
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片
YouTube运营全攻略:从零到一打造你的油管频道
社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片
从零到一!创建YouTube频道并上传视频的全流程
AI工具 分类筛选
AI Main Category checkbox