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

Elementor 专业教程 21 - Blockquote小工具的设置和使用方法

Elementor Blockquote小工具是一个用于在网站上添加引用区块的工具。使用它可以方便地在网站上添加引用、名言、评论等内容,并以引用区块的形式展示。

Blockquote小工具提供了多种不同的样式和选项,可以根据网站的整体设计风格进行调整。你还可以自定义样式或使用自定义的CSS。

使用Blockquote小工具可以为网站增添一些文艺气息,同时也有助于网站内容的传播和分享。

本篇教程将详细说明Blockquote小工具的功能设置和使用方法。

Elementor Blockquote 小工具

首先,将Blockquote小工具拖放到编辑栏内。如下图所示:

拖放小工具到编辑栏后,你会看到如下画面:

1. Blockquote小工具的内容标签

Blockquote小工具的内容标签包含以下的设置选项:

  1. Skin
  2. Content
  3. Author
  4. Tweet Button
  5. View
  6. Skin
  7. Label
  8. Username
  9. Target URL
1-1 Skin

Skin是用来指定引用块外观样式的设置选项。你可以在以下四个预设样式中进行选择:

  • Border
  • Quotation
  • Boxed
  • Clean
1-2 Content

Content是输入引用文本内容的设置选项。你可以输入名言、参考文献、语句等。

1-3 Author

Author是设置引用文本的作者信息的选项。你可以根据需要添加或修改作者的名称。

1-4 Tweet Button

Tweet Button是选择是否在引用区块中添加推特分享按钮的设置选项,默认是开启的。

启用推特分享按钮后,用户可以快速分享引用内容。

1-5 View

View是用来设置推特分享按钮显示方式的选项。您可以从以下三种预设中选择:

  • Icon&Text:显示图标和文本标签
  • Icon:仅显示图标
  • Text:仅显示标签文本
1-6 Skin

Skin是用来选择分享按钮样式的设置选项。您可以从以下三种预设中选择:

  • Classic:默认显示
  • Bubble:气泡显示
  • Link:链接显示
1-7 Label

Label是用来自定义分享按钮文本标签的设置选项。您可以自定义输入文本设置。

例如,默认是“Twitter”,可以更改为中文的“推特”。

1-8 Username

Username名是用来在分享按钮中添加引用源推特账号ID的设置选项。

例如,如果上图中的丘吉尔有一个推特账号ID为“@qiujier”,用户在分享该内容时,丘吉尔的ID也会显示在分享内容内。

1-9 Target URL

Target URL是用来设置分享目标链接的选项。您可以从以下三种预设中选择:

  • Current Page:用户分享内容时,该页面的链接会显示在推文中
  • None:用户分享内容时,不会显示任何链接
  • Custom:用户分享内容时,指定的URL链接会显示在推文中

2. Blockquote 小工具的样式标签

Blockquote 小工具的样式标签主要包含以下三个设置项:

  1. 内容
  2. 按钮
  3. 边框
2-1 内容

内容是用来设置引用Block文本样式的选项。具体包含以下设置选项:

  • Text Color:选择和替换引用文本的颜色
  • 排版:自定义引用文本的样式,如字体、大小、粗细、行高等
  • Cap:设置引用文本和作者名称之间的间距

Author

  • Text Color:选择和替换作者名称的颜色
  • 排版:自定义作者名称的样式,如字体、大小、粗细、行高等
2-2 按钮

按钮是用来设置分享按钮外观样式的选项。具体包含以下设置选项:

  • Size:设置分享按钮的大小,可以设置0-2之间的数值,数值越大,按钮越大
  • Border Radius:设置分享按钮边框四角的半径大小,可以设置0-50之间的数值,数值越大,越接近圆形
  • Color:选择分享按钮的颜色,可以在“Official”和”Custom“中选择
  • Color选择Custom时
  • Backgroud Color:选择和替换分享按钮的背景颜色
  • TextColor:选择和替换分享按钮图标和文本的颜色
  • 排版:自定义分享按钮的文字样式,如字体、大小、粗细、行高等

※ 当选择Color为Custom时,可以设置“标准状态”和“悬停状态”的颜色和文本设置,设置方法相同。

2-3 Border

Border是用来自定义侧边框外观样式以及周围元素之间的间距的设置项。具体包含以下设置选项:

  • Color:选择和替换侧边框的颜色,可以设置“标准”和“悬停”状态下的颜色
  • Width:设置侧边框的宽度,可以设置0-100之间的数值,数值越大,边框越宽
  • Gap:设置侧边框和首位元素之间的间距,可以设置0-100之间的数值,数值越大,间距越大
  • Vertical Padding:设置侧边框的高度,可以设置0-100之间的数值,数值越大,侧边框的高度就越高

关于样式标签的颜色,排版,以及间距等详细设置,可以参考《Elementor 通用教程 – 小工具样式标签的通用设置和使用方法》。

3. Blockquote 小工具的高级设置

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

以上就是 Blockquote 小工具的功能设置和使用说明。希望本篇内容能帮助您更好地使用Elementor。

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

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - JetEngine 通用教程 2 - Labels和Advance Setting的设置方法 - 特色图片
JetEngine 通用教程 2 - Labels和Advance Setti...
Wordpress插件与设计 - Elementor 专业教程 29 - Video Playlist小工具的设置和使用方法 - 特色图片
Elementor 专业教程 29 - Video Playlist小工具...
Wordpress插件与设计 - Elementor 基础教程 18 - 进度条小工具的设置和使用方法 - 特色图片
Elementor 基础教程 18 - 进度条小工具的设置和...
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 16 - 一步步教你如何创建诱人的导航菜单
Wordpress插件与设计 - Elementor 专业教程 13 - Flip Box小工具的设置和使用方法 - 特色图片
Elementor 专业教程 13 - Flip Box小工具的设置...
Wordpress插件与设计 - WP教程 27 - 提高网站文件管理效率! 掌握WP媒体库的实用技巧 - 特色图片
WP教程 27 - 提高网站文件管理效率! 掌握WP媒体...
google-sheets-to-wordpress-table-sync-plugin tumnail
告别手动更新?如何用Google Sheets打造动态数...
Wordpress插件与设计 - WP教程 7 - 掌握添加、编辑图片以及常规设置的技巧 - 特色图片
WP教程 7 - 掌握添加、编辑图片以及常规设置的...
Wordpress插件与设计 - WP教程 21 - WordPress插件!打造个性化网站的必备工具 - 特色图片
WP教程 21 - WordPress插件!打造个性化网站的...
Wordpress插件与设计 - Elementor 基础教程 12 - 图标框小工具的设置和使用方法 - 特色图片
Elementor 基础教程 12 - 图标框小工具的设置和...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - Elementor 专业教程 9 - Animated Headline小工具的设置和使用方法 - 特色图片

Elementor 专业教程 9 - Animated Head...

Wordpress插件与设计 - WP教程 9 - 如何轻松添加文件下载功能以提升用户体验? - 特色图片

WP教程 9 - 如何轻松添加文件下载功能...

Wordpress插件与设计 - JetEngine 使用教程 2 - Custom Taxonomies的制作和设置以及使用方法 -特色图片

JetEngine 使用教程 2 - Custom Taxono...

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

Elementor 专业教程 21 - Blockquote小...

Wordpress插件与设计 - Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法 - 特色图片

Elementor 基础教程 23 - 社交媒体小工...

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

Elementor 专业教程 29 - Video Playli...

AI工具 与服务
YYP-2024-06-29-07-59-50

Swifty - 拥有AI出行助理,最快5分钟预...

AI工具与服务推荐 - G3D.AI - 游戏AI创作平台 - 特色图片

G3D.AI - 想象力赋予游戏生命,想到即...

AI工具与服务推荐 - 讯飞星火大模型 - 科大讯飞认知智能大模型 - 特色图片

讯飞星火大模型 - 认知智能大模型,激...

AI工具与服务推荐 - 金山文档 - 企业级在线协作平台 - 特色图片

金山文档 - AI智能云端办公,协作更高...

AI工具与服务推荐 - Flair - AI产品摄影设计工具 - 特色图片

Flair - AI魔法,简化产品摄影,呈现专...

AI工具与服务推荐 - 美间 - 家居设计营销平台 - 特色图片

Meijian - 家居设计师的云端助手,高端...

Canva教程 与技巧
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片

Canva 相关教程 2 - Canva免费版与付费...

Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片

Canva新手指南6 - 无需专业软件!用Can...

Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片

Canva新手指南8 - 提升设计效率!使用...

Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片

Canva 相关教程 1 - 未来的设计在这里...

Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片

Canva新手指南3 - 无需编程!用Canva创...

社媒运营 与营销
社媒运营推广 - Youtube - 一文读懂YouTube Premium会员权益!让你不再犹豫 - 特色图片

一文读懂YouTube Premium会员权益!让...

社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片

YouTube运营全攻略:从零到一打造你的油...

社媒运营推广 - Youtube - 特色图片设计终极指南,打造吸睛的视频门面! - 特色图片

缩略图设计终极指南,打造吸睛的视频门...

社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片

YouTube频道交易的大揭秘:机遇还是陷...

社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片

一文带你解析海外版小红书Lemon8!Z世...

AI工具 分类筛选
AI Main Category checkbox