WordPress divi主题

使用 Divi & Slick 将您的博客模块变成高级可拖动/滑动轮播

by | May 5, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

对于许多网站而言,博客已成为其 SEO 策略的重要组成部分。 但除了创建高质量的内容外,简化访问者的帖子导航过程也很重要。 这样,他们可以从一个帖子跳到另一个帖子,并花更多时间在您的网站上阅读您发布的内容。 在 Divi 中,有一个博客模块,您可以使用它来动态显示您的博客文章并设置它们的样式。 如果您正在寻找一种将帖子搜索体验提升到新水平的方法,那么您一定会喜欢这篇文章。 我们将向您展示如何使用 Divi 的内置元素和免费的 slick js 库将内置的 Divi 博客模块变成高级的可拖动/滑动轮播。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

可拖动的滑动轮播

移动的

可拖动的滑动轮播

免费下载博客模块可拖动的滑动轮播布局

要使用免费的博客模块可拖动滑动轮播布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1. 创建博客页面

添加新页面

首先向您正在处理的网站添加一个新页面。 给你的页面一个标题,发布页面并切换到 Visual Builder。

可拖动的滑动轮播

可拖动的滑动轮播

上传室内设计公司博客页面布局

在本用例教程中,我们将使用 Interior Design Company 博客布局,但您可以自由使用您选择的任何其他布局。

WordPress divi主题

可拖动的滑动轮播

2. 使用 Blurb 模块创建上一个和下一个箭头设计

将新行添加到部分顶部

立柱结构

进入博客页面后,我们可以开始构建高级可拖动的滑动轮播。 第一部分致力于设计我们需要允许访问者在帖子之间来回走动的箭头。 箭头将不是访问者必须在轮播中导航的唯一选项。 他们将能够在桌面上拖动轮播并在移动设备上滑动。 为了设计箭头,我们将使用 Divi 的内置 Blurb 模块,但您可以自由使用您选择的任何其他模块。 使用以下列结构在博客部分的顶部添加一个新行:

可拖动的滑动轮播

浆纱

在不添加任何模块的情况下,打开行设置并通过如下更改大小设置让行接触部分的左侧和右侧:

  • 宽度:100%
  • 最大宽度:100%

可拖动的滑动轮播

添加模糊模块

添加标题

然后,添加一个模糊模块并插入一个标题。

可拖动的滑动轮播

选择图标

接下来选择一个图标。

可拖动的滑动轮播

图标设置

转到设计选项卡并更改图标设置,如下所示:

fiverr建站WordPress程序员
  • 图标颜色:#000000
  • 圆圈图标:是
  • 圆圈颜色:#f2f2f2
  • 图像/图标位置:顶部
  • 图像/图标对齐:居中

可拖动的滑动轮播

标题文本设置

然后,修改标题文本设置。

  • 标题字体:木里
  • 标题字体粗细:半粗体
  • 标题文本对齐方式:居中
  • 标题文字颜色:#000000

可拖动的滑动轮播

浆纱

接下来,我们将在不同的屏幕尺寸上更改模块的尺寸设置。

  • 宽度:10%(台式机)、20%(平板电脑)、30%(手机)
  • 模块对齐:右

可拖动的滑动轮播

独立站选品工具

CSS 类

我们还将添加一个 CSS 类。 这个 CSS 类将帮助我们在本教程后面的点击中触发轮播动作。

可拖动的滑动轮播

主要元素 CSS

最后但同样重要的是,我们还将在模块的主要元素中添加一行 CSS 代码,以将光标更改为指针。

cursor: pointer;

可拖动的滑动轮播

克隆行并放在部分底部

完成第一个箭头后,您可以克隆整个行容器并将重复的行放在博客部分的末尾。

高质量外链购买

可拖动的滑动轮播

可拖动的滑动轮播

更改标题

打开重复行中的 Blurb Module 并更改标题。

可拖动的滑动轮播

更改图标

连同图标。

JasperAI 10000字免费额度试用

可拖动的滑动轮播

更改 CSS 类

并修改 CSS 类。

可拖动的滑动轮播

3. 准备博客模块

打开包含博客模块的行

浆纱

一旦箭头到位,是时候开始调整博客模块了,从它所在的行开始。打开行设置并相应地修改大小设置:

  • 宽度:100%
  • 最大宽度:100%

可拖动的滑动轮播

WordPress备份工具updrafplus

能见度

然后,将该行的溢出设置为隐藏。 这将有助于确保轮播不会导致任何水平滚动条出现在我们的页面中。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

可拖动的滑动轮播

修改博客模块

隐藏分页

行设置到位后,打开博客模块设置。 确保在元素设置中禁用分页。

可拖动的滑动轮播

布局

然后,转到设计选项卡并将布局更改为全角。

可拖动的滑动轮播

覆盖

我们也在添加一个叠加层。

  • 特色图像叠加:开
  • 覆盖图标颜色:#ffffff
  • 叠加背景颜色:rgba(1,0,66,0.33)

可拖动的滑动轮播

CSS 类

接下来,我们将在我们的博客中添加一个 CSS 类,这将有助于我们稍后在教程中启用轮播。

可拖动的滑动轮播

发布元 CSS

我们将通过在高级选项卡中的 post meta CSS 元素中添加一些底部边距来在 post meta 和 excerpt 之间生成一些空间。

margin-bottom: 50px;

可拖动的滑动轮播

4.添加Slick JS功能

在博客模块下添加代码模块

一旦所有的 Divi 设置到位,就该添加 slick js 功能了! 在博客模块正下方(或页面上的任何其他位置)添加一个代码模块。

可拖动的滑动轮播

添加 Slick JS 脚本标签

然后,添加 slick js 库 在脚本标签内 (您可以在下面的打印屏幕中看到)。 您也可以在 Divi 主题设置中自由地将这些添加到您网站的头部。

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

可拖动的滑动轮播

添加幻灯片 CSS 代码

我们将使用一些 CSS 代码在个人级别上稍微修改每篇博客文章。 确保放置代码 样式标签之间 如下面的打印屏幕所示。

.slick-slide {
float: left;
margin: 2vw;
}

可拖动的滑动轮播

添加 jQuery 代码

最后但并非最不重要的一点是,我们将添加一些 JQuery 代码以允许高级可拖动滑动轮播呈现其形式。 在下面的代码中,我们还将我们设计的按钮添加到轮播的功能中。 确保放置代码 在脚本标签内 正如您在下面的打印屏幕中看到的那样。

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

可拖动的滑动轮播

5. 保存页面并退出 Visual Builder 以查看结果

在 Visual Builder 中,您不会看到结果。 所以,一旦你完成了,保存你的页面,退出 Visual Builder 并在你的网站上查看结果!

可拖动的滑动轮播

可拖动的滑动轮播

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

可拖动的滑动轮播

移动的

可拖动的滑动轮播

最后的想法

在这篇文章中,我们向您展示了如何将您的博客模块设计提升到一个新的水平。 更具体地说,我们向您展示了如何使用免费的 slick js 库将 Divi 的内置博客模块变成高级可拖动的滑动轮播。 我们还免费提供了 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题