如何使用 Elementor Slider 小部件使您的网站更具吸引力

已发表: 2021-10-08

您想向 Elementor 网站添加响应式滑块吗? 它肯定会使您的网站设计复杂。 此外,结构良好的滑块设计可以帮助您获得更好的用户参与度。

在本博客中,我们将分享使用 Elementor 向网站添加滑块的最简单方法。 我们还将讨论有关 Elementor 滑块及其用法的一些重要方面。

让我们从一个简单的问题开始,为什么滑块对您的网站至关重要。

Slider 如何让您的网站看起来优雅

Create Engaging Slider Using Elementor Silder Widget

滑块是指图像幻灯片,这是您在现代网站中经常看到的重要网络元素。 它可以用于不同的目的。 在大多数情况下,您会在着陆页顶部或网站的英雄部分找到一个滑块。

但是,您也可以使用滑块来展示您的电子商务商店产品,以快速吸引客户的注意力。 或者,您可以使用滑块显示客户的推荐或共享其他品牌的徽标。

滑块可以帮助您-

  • 让您的网站更具视觉吸引力
  • 建立用户参与度
  • 最适合显示推荐
  • 展示在线商店产品
  • 用于显示博客文章
  • 能够分享交易或其他营销推广

如何在您的 WordPress 网站中使用 Elementor Slider 小部件

在我们博客的以下部分中,我们将指导您如何使用 Elementor Slider Widget 的强大功能以三种简单的方式为您的网站创建滑块。

假设您已经准备好 WordPress 网站。 现在,在我们开始之前,您需要在您的网站上安装以下插件:

  • 元素(免费)
  • 元素(专业版)

确保您已安装并激活 Elementor免费高级版。

如果您是 Elementor 的新手,请查看本指南并了解如何使用 Elementor(初学者分步指南)。

第 1 步:添加滑块小部件

您需要将 Elementor Slides 小部件添加到您网站的合适区域以创建滑块。 您可以从左侧的小部件库中找到小部件。 只需从搜索栏中输入小部件的名称并将其拖放到正确的位置即可。

Add Elementor Slider Widget

第 2 步:管理滑块内容

内容部分,您将获得添加幻灯片内容的基本选项。 您可以在此处添加幻灯片内容并管理滑块选项

Content of Elementor Slides

添加和管理幻灯片内容

您可以通过单击添加项目按钮来添加幻灯片项目。 此外,如果需要,您可以删除该项目。 您可以在此处复制项目并管理滑块的高度

Manage Slides Content

设置幻灯片背景

让我们为幻灯片添加背景图像。 首先打开单个幻灯片。 在这里,您将获得一个背景选项。 您可以添加图像,管理背景颜色,并设置图像大小,如封面、容器自动。

您可以激活Ken Burns 效果,这将允许您将缩放效果设置为幻灯片图像。 在此区域中,您还可以打开背景叠加并设置其颜色,并选择合适的混合模式模式。

注意:确保您的幻灯片图像应该很漂亮并且尺寸合适。

Set Slides Background

写幻灯片内容

您可以编写标题和说明来描述幻灯片,并在幻灯片内容区域中添加按钮文本。 如果您想在幻灯片中添加自定义链接,可以在此处进行。 您可以在整个幻灯片或仅按钮上设置应用链接

Add Slides Content

添加自定义幻灯片样式

如果要为单个幻灯片添加自定义样式,只需转到样式选项。 然后激活自定义样式。 最后,根据需要设置样式。 您可以设置幻灯片的水平位置、垂直位置、文本对齐、内容颜色和文本阴影

Add Custom Slides Style

第 3 步:自定义 Elementor 滑块

这些是可用于自定义 Elementor 滑块的样式选项。 在这里,你会得到..

  • 幻灯片
  • 标题
  • 描述
  • 按钮
  • 导航

让我们探索这些样式设置是如何工作的。

Style Options of Elementor Slides

幻灯片

Style–>Slides中,可以管理全局Content Width ,添加Padding ,设置 Horizo​​ntal Position 、 Vertical PositionText Align 。 您还可以为幻灯片内容添加文本阴影

Style Slides

打开Style–>Title选项并以您自己的方式设计幻灯片标题。 您可以管理间距文本颜色并添加新的排版

与 Title 选项一样,您也可以设置滑块Description的样式。

Style Slider Title

按钮

想要重新设计你的滑动按钮,让它对你的用户更有吸引力。 转到Style –> Button ,您将拥有自定义滑块按钮所需的所有选项。 您可以管理按钮大小、版式、边框宽度边框半径。 还可以添加文本颜色、背景类型、颜色边框颜色以获得更好的设计。

Style Slider Button

导航

您可以在样式->导航区域中设置滑块导航的样式。 您可以更改幻灯片内部或外部的箭头位置,还可以管理箭头大小 添加箭头颜色

与导航箭头一样,您也可以更改导航

Style Slider Navigations

最终预览

完成设计后,这是我们 Elementor 滑块的终极外观:

Elementor Slider Final Preview

奖励:引入快乐插件的滑块小部件,用于设计独家滑块

如果您想为滑块添加更多功能,可以考虑使用其他 Elementor 插件。 在这里,我们谈论快乐插件,超快速的第 3 方 Elementor 插件。

这个独家插件在其免费版本中带有一个滑块小部件,它先进、易于使用且完全可定制,因此新手 Elementor 用户可以从头开始设计一个独特的滑块。

您还可以获得更多功能,例如……

  • 为您的滑块添加精美的动画
  • 使用预制的惊人滑块设计
  • 提供更好的定制选项
  • 获取适当的文档和视频教程

您还可以观看 Happy Addons 的 Slider 小部件的简短演示视频。

让我试试快乐插件

Elementor Slider 的常见常见问题解答

人们在计划设计 Elementor 滑块时通常会问以下问题。 但是,我们已经介绍了有关使用 Elementor 制作自定义滑块的所有细节。 为了进一步帮助您,我们还将回答这些问题。

如何将图像插入 Elementor 幻灯片?

您需要转到Content-> Slides区域。 然后打开要插入图像的单个幻灯片。 最后,转到此处的背景,您将获得图像添加选项。 您可以从您的网站媒体部分选择图像或从您的设备上传。

我可以使用 Elementor 免费版为我的网站创建滑块吗?

不,如果您想使用 Elementor 滑块小部件,您的站点上必须有 Elementor Pro 版本。

如何全宽我的 Elementor 滑块?

单击已添加滑块的部分处理程序。 之后,您将获得布局选项。 最后选择Content Width–> Full Width

如何增加 Elementor 中的滑块高度?

打开内容->幻灯片选项。 在这里,您可以使用“高度”选项轻松管理滑块的高度。

如何将图像链接到 Elementor Slider?

转到内容 - >幻灯片并打开要链接幻灯片图像的合适幻灯片。 然后单击“内容”选项卡并将“喜欢”添加到“链接”区域。

你准备好设计你的第一个 Elementor 滑块了吗

在此博客中,我们展示了从头开始创建自定义 Elementor 滑块的所有可能方法。 我们已经回答了人们在制作 Elementor Slider 时经常被问到的一些常见问题。

我们还推出了 Happy Addons 滑块小部件,可让您向您的网站添加令人惊叹的滑块,并讨论了为什么滑块很重要。

好吧,如果您对此博客或 Elementor 或 Happy Addons 滑块小部件有任何疑问,您可以在下面的评论框中提问。

不要忘记订阅我们的时事通讯。 免费!

订阅我们的新闻