C. 常用元素组件 Widgets

Estimated reading: 1 minute 25 views

组件（Widgets）

在 Elementor 中，**Widgets（小工具）**是构建网页的基本组成部分。它们允许您添加各种内容和功能，如文本、图像、视频、按钮、表单等。熟悉这些小工具及其使用方法，将帮助您更高效地创建专业、美观的网站。

组件（Basic Widgets）

基础小工具是 Elementor 免费版本中提供的核心组件，满足大多数网页设计需求。

Heading（标题）

功能：添加页面标题或子标题。
使用技巧：
- 使用不同的 HTML 标签（H1-H6）来组织内容结构，优化 SEO。
- 在 Style（样式）选项卡中自定义字体、颜色和对齐方式。

Text Editor（文本编辑器）

功能：添加段落文本，支持基本的文本格式化。
使用技巧：
- 利用格式工具（粗体、斜体、列表等）增强文本可读性。
- 可以在文本中插入链接或图像，丰富内容。

Image（图片）

功能：在页面中插入图像。
使用技巧：
- 上传高质量、优化后的图片，确保页面加载速度。
- 使用 Image Size（图像尺寸）选项选择合适的分辨率。
- 搜索技巧：在小工具搜索栏中输入“image”，即可找到与图像相关的小工具，如 Image、Image Carousel（图片轮播）、Image Gallery（图片库）。

Image Carousel（图片轮播）

功能：创建一组图片的轮播效果。
使用技巧：
- 调整轮播的过渡效果和速度，提升视觉体验。
- 添加导航箭头或分页器，方便用户浏览。

Image Gallery（图片库）

功能：以网格形式展示图片集合。
使用技巧：
- 选择不同的布局风格，如网格、拼贴或瀑布流。
- 启用 Lightbox 功能，允许用户点击查看大图。

Video（视频）

功能：嵌入来自 YouTube、Vimeo 或自托管的视频。
使用技巧：
- 设置 Start Time（开始时间）和 End Time（结束时间）来播放视频的特定部分。
- 在移动设备上禁用自动播放，提升用户体验。

Button（按钮）

功能：添加可点击的按钮，引导用户执行特定操作。
使用技巧：
- 使用明确的 CTA（Call to Action）文本，如“立即购买”或“联系我们”。
- 在 Style（样式）选项卡中自定义按钮的颜色、大小和形状。

Divider（分隔线）

功能：在内容之间添加水平或垂直线，分隔不同部分。
使用技巧：
- 调整 Line（线条）样式，如实线、虚线或点线。
- 设置间距和对齐方式，使其与页面布局协调。

Spacer（间距）

功能：在元素之间添加空白空间。
使用技巧：
- 在不同设备模式下调整 Spacer 的高度，确保响应式设计。
- 使用多个 Spacer 来创建更大的空白区域。

通用小工具（General Widgets）

这些小工具提供了更高级的功能，允许您添加更多类型的内容和布局。

Image Box（图片框）

功能：结合图像、标题和文本，适用于展示服务或产品。
使用技巧：
- 统一图像尺寸，保持页面整洁。
- 添加链接，使整个框可点击，提升用户互动。
- 搜索技巧：在小工具搜索栏中输入“image”，可以找到 Image Box 以及其他与图像相关的小工具。

Icon Box（图标框）

功能：使用图标、标题和文本来传达信息。
使用技巧：
- 从内置的图标库中选择符合主题的图标。
- 调整 Icon Position（图标位置），如在标题上方或左侧。

Progress Bar（进度条）

功能：展示技能水平、任务进度等。
使用技巧：
- 使用不同的颜色表示不同的进度状态。
- 添加百分比或标签，提供更多信息。

Testimonials（推荐语）

功能：展示客户或用户的评价和反馈。
使用技巧：
- 包含客户的头像、姓名和职位，增加可信度。
- 使用 Slider（滑块）效果，展示多个推荐语。

Tabs（选项卡）

功能：在有限空间内展示大量内容，用户可点击标签切换查看。
使用技巧：
- 将相关内容分组，提高信息组织性。
- 自定义选项卡的样式和动画效果，增强用户体验。

Accordion（手风琴）

功能：以折叠形式展示内容，适用于 FAQ 等场景。
使用技巧：
- 默认展开最重要的部分，吸引用户注意。
- 使用图标指示展开和折叠状态。

专业版小工具（Pro Widgets）

这些小工具需要 Elementor Pro 版本，提供更高级和动态的功能。

Form（表单）

功能：创建自定义表单，用于收集用户信息。
使用技巧：
- 添加不同类型的字段，如文本、邮箱、电话号码等。
- 设置 Confirmation Message（确认信息）或 Redirect（重定向）到特定页面。

Slides（幻灯片）

功能：创建图片或内容的幻灯片轮播。
使用技巧：
- 设置 Autoplay（自动播放）和 Transition（过渡）效果。
- 添加 Overlay（覆盖层）和文本，丰富幻灯片内容。
- 搜索技巧：在小工具搜索栏中输入“image”或“slider”，可以找到 Slides 小工具。

Posts（文章）

功能：动态显示博客文章或自定义文章类型。
使用技巧：
- 使用 Query（查询）选项筛选特定类别或标签的文章。
- 自定义文章的布局和风格，匹配网站主题。

Portfolio（作品集）

功能：展示项目、案例或作品。
使用技巧：
- 添加分类过滤器，方便用户浏览。
- 使用 Hover Effects（悬停效果）增加互动性。

Price Table（价格表）

功能：展示不同的产品或服务套餐及其价格。
使用技巧：
- 突出推荐的套餐，如添加 Popular（热门）标签。
- 列出每个套餐的特性和优势，帮助用户比较。

Countdown（倒计时）

功能：创建倒计时计时器，用于促销、活动等。
使用技巧：
- 设置截止日期和时间格式。
- 在倒计时结束后触发特定操作，如显示消息或重定向。

第三方小工具（Third-Party Widgets）

通过安装 Add-ons（插件扩展），您可以获得更多第三方开发的小工具，进一步扩展 Elementor 的功能。

ElementsKit 常用小工具

ElementsKit 是一款功能强大的插件，提供了大量高级小工具和模块，增强 Elementor 的功能性和设计选项。

常用小工具

Advanced Tab（高级选项卡）
- 功能：创建更复杂的选项卡布局，支持嵌入模板和自定义内容。
- 使用技巧：
  - 利用图标和图片作为选项卡标题，提升视觉吸引力。
  - 在选项卡内容中嵌入其他小工具，实现丰富的交互。
Advanced Accordion（高级手风琴）
- 功能：提供更多样式和功能的手风琴效果。
- 使用技巧：
  - 设置多项同时展开或自动折叠功能，控制内容展示。
  - 自定义展开和折叠的动画效果，增强用户体验。
Image Gallery（图片库）
- 功能：创建高度自定义的图片库，支持滤镜和悬停效果。
- 使用技巧：
  - 添加类别过滤器，方便用户按类别查看图片。
  - 应用悬停动画和叠加层，增加视觉层次。
Image Slider（图片滑块）
- 功能：展示图片滑块，支持多种导航和过渡效果。
- 使用技巧：
  - 调整滑块的布局和样式，使其适应不同的页面设计。
  - 添加文字和按钮覆盖在图片上，提供更多信息或链接。
Style List（风格列表）
- 功能：创建带有图标或图片的列表，提供丰富的样式选项。
- 使用技巧：
  - 使用不同的图标或编号，增强列表的层次感。
  - 自定义列表项的间距、颜色和字体，匹配网站风格。
Image Box（图片框）
- 功能：与 Elementor 自带的 Image Box 功能类似，但提供了更多的样式和选项。
- 使用技巧：
  - 使用高级悬停效果，如图像翻转、放大等。
  - 在图片上添加遮罩或滤镜效果，增强视觉吸引力。
Icon Box（图标框）
- 功能：增强的图标框小工具，支持更多的图标库和样式。
- 使用技巧：
  - 选择 Lottie 动画或 SVG 图标，提升页面动态效果。
  - 自定义图标的颜色、大小和动画，匹配网站主题。

搜索小技巧

在 Elementor 的小工具搜索栏中，您可以输入关键字快速找到所需的小工具。

搜索 “image”：
- 将显示与图像相关的小工具，如 Image、Image Box、Image Carousel、Image Gallery 等。
- 如果安装了第三方插件，如 ElementsKit，还会显示相关的高级图像小工具。
搜索 “slider”：
- 将显示滑块相关的小工具，如 Slides、Image Slider（来自 ElementsKit）等。
搜索 “gallery”：
- 将显示图库相关的小工具，如 Image Gallery、Gallery（来自第三方插件）等。