如何使用 Elementor 在 WordPress 上创建垂直图像轮播

Muneeb WordPress Tutorials Jan 25, 2022

观看者可以通过按下在幻灯片中向前或向后移动它们的按钮来选择照片或信息的幻灯片,称为图像轮播。 它使您网站的整体外观更加明亮,并有助于推广基本服务。

有吸引力的照片可能会立即吸引新访问者的注意力,从而吸引他们访问您的网站。 本教程将向您展示如何利用Elementor在 WordPress 上创建垂直图片轮播。

如何创建 Elementor 垂直图像轮播

首先为您的Elementor Vertical Smooth Carousel 创建合适的图片。 您需要一张已经包含所有照片的图像。 使用类似 Canva的程序 Crello,您可以制作一个,但任何图像编辑软件都应该足够了。

当然,这也有不动态的缺点,当只需要更改几张照片时可能会很不方便。 但是,它确实提供了几个好处。 它产生一个没有 JS 要求的纯 CSS 轮播。 动画非常流畅,CPU占用率很低。 简而言之,它非常有效,虽然有点不方便。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

然后,将您的列作为一个类的垂直名称
Column and Layout settings中将该列的Widgets Space设置为 0。

Add an image element to that column and choose the picture you made.将图像元素添加到该并选择您制作的图片。 Assign the class carousel vertical to the picture element .将类carousel分配给图片元素

完全按照您的意愿制作所有内容,然后复制它。 在该列中,您需要其中两个,每个参数都相同。 然后,您可以继续使用下面给出的 CSS 代码。 您可以在任何地方使用此代码进行更改。

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

代码中有大量注释,可以让您充分理解并在需要的地方进行更改。 使用此代码,您可以成功创建Elementor垂直轮播。

5 个最佳图像轮播插件

1. 为 Elementor 发布轮播

iThemelandCo 为 Elementor 发布轮播是一个 Elementor 插件插件,可让您使用其现成的轮播布局创建令人惊叹的创意媒体轮播。 该插件与 Elementor 完美集成,并提供 19 种预建布局。 这些布局是完全可定制的,可以使用 Elementor 的拖放机制根据您的需要轻松定制。

Elementor 的产品轮播

Product Carousel For Elementor 是另一个 Elementor 插件插件,专门为电子商务商店设计,以在轮播中展示他们的产品。 该插件提供 12+ 轮播控件,例如自动播放、滑动滚动、悬停暂停等。该插件对所有类型的设备都具有高度响应性,您可以根据需要创建任意数量的轮播。 此外,它是一个 100% 多语言插件,这意味着即使您的网站被翻译成另一种语言,它也能正常工作。

3. Elementor 的快速轮播

Fast Carousel For Elementor 是一个 Elementor 插件插件,它声称足够快,可以在一分钟内为您构建一个轮播。 听起来令人印象深刻,它还提供不同类型的画廊以及十多种独特的风格。 除了为每个轮播提供自定义颜色选项外,该插件还配备了五个以上的轮播控件。 对于快速解决方案,这可能是图像轮播的最佳选择。

我们希望您发现本教程有助于增强您的网站。 请务必在我们的FacebookTwitter上加入我们,以不断获得让您的 WordPress 之旅变得有趣和轻松的教程。

Divi WordPress Theme