Elementor 提供了一个强大的轮播(カルーセル)小工具,允许你轻松地创建动态且美观的产品展示画廊。在本指南中,我们将详细介绍如何使用 Elementor 的轮播小工具来创建一个引人注目的产品展示画廊,并通过具体示例帮助你理解和应用这些步骤。
步骤 1:安装并激活 Elementor Pro
要使用 Elementor 的轮播小工具,需要安装并激活 エレメンタル・プロ 版本。免费版 Elementor 没有提供内置的轮播功能,因此升级到 Pro 是必要的。
步骤 2:创建一个新页面或编辑现有页面
- 登录到的 WordPress 仪表板,转到“ウェブページ「をクリックしてください。新しいページを追加”或编辑想要添加轮播的现有页面。
- 在页面编辑器中点击“Elementorエディタの使用".
![图片[2]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106072181.png)
步骤 3:添加产品图片
- 在 Elementor 页面编辑器的左侧栏中,搜索“回す".
![图片[3]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106111773.png)
- 意志"イメージ回転”小工具拖放到页面上的所需位置。
- 单击轮播中的“添加图片”选项,选择并上传想要展示的产品图片。可以选择多张图片,确保这些图片清晰,并且尺寸一致,以便保持一致的视觉效果。
![图片[4]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106125121.png)
例
假设在经营一家珠宝店,可以上传多张不同角度的手镯或项链图片,每个产品都有细节图。通过轮播,访问者可以轻松查看产品的不同细节。
![图片[5]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106212584.png)
步骤 4:配置轮播设置
- で "エレメント”选项卡中,可以设置轮播的布局。设置图片每次展示的数量(如显示 3 张图片),并设置轮播的滚动方式(如每次滚动 1 张图片)。
![图片[6]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106233970.png)
- 还可以配置轮播的动画效果,如滑动或淡入淡出,来增强产品展示的视觉吸引力。
![图片[7]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106251510.png)
例
为了展示你的产品详情,可以选择“フェードイン・フェードアウト”效果,这样当客户滚动浏览产品图片时,会有一种平滑的过渡感,营造出更高级的视觉体验。
步骤 5:自定义样式
Elementor 可以完全自定义轮播的样式,以确保其与你的品牌风格一致。在“タイプ”选项卡中,可以设置:
- 写真边距、间距
![图片[8]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106280480.png)
- 边框和阴影效果
![图片[9]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106304271.png)
- 轮播箭头和导航圆点的样式
![图片[10]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091106292974.png)
步骤 6:添加产品链接或信息
除了展示图片外,还可以为每个产品添加链接,点击产品图片即可跳转到产品详情页。在“エレメント”设置中,单击每个图片,可以为其添加自定义链接。
![图片[11]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091107003545.png)
步骤 7:预览并发布
完成轮播设置后,别忘了点击页面底部的“プレビューの変更”,检查轮播的效果是否符合预期。确认无误后,点击“ポスト「ボタン
![图片[12]-如何使用Elementor轮播创建产品展示画廊-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/09/2024091107011372.png)
实际应用场景
- 时尚类电商:服装、鞋类等可以通过多角度轮播展示产品细节,增强客户的购买信心。
- 珠宝或奢侈品展示:通过精美的图片和缓慢切换的轮播效果,营造出奢华感,让客户更好地欣赏产品的精致细节。
- エレクトロニクス・ショーケース:通过轮播展示不同功能和外观细节,增强客户对产品的全面了解。
概要
Elementor 的轮播小工具为产品展示提供了灵活且美观的解决方案。无论是时尚、电子产品还是奢侈品行业,使用图像轮播都可以显著提升页面的视觉吸引力,并为用户提供更好的浏览体验。通过上述简单的步骤,可以轻松创建一个动态且专业的产品展示画廊。
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttps://www.361sale.com/ja/19450この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。
コメントなし