如何向您的 Divi 页面添加样式和反向光标

已发表: 2021-03-03

与您网站上的访问者互动的最快方式之一是通过他们的光标。 这通常是一切开始的地方。 桌面上的用户交互几乎完全基于访问者使用光标浏览页面的方式。 这也是允许他们触发事件的一件事，无论是悬停效果还是点击。 这就是为什么您会遇到大量网站，这些网站根据特定目标自定义光标。 例如，如果您想突出显示号召性用语，则设计光标样式会很有帮助。 今天，我们将向您展示如何在 Divi 中做到这一点。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

光标

移动的

光标

免费下载布局

要使用免费布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

1. 创建新页面/打开现有页面

创建新页面或打开现有页面

首先创建一个新页面或打开一个现有页面。

光标

上传您选择的布局

为了专注于本教程的精髓，我们将使用 Bike Repair Layout Pack，但也可以随意使用您选择的任何其他布局。

光标

将新部分添加到页面底部

上传布局后，导航到页面底部并添加一个新部分。 我们将使用本节来构建我们的游标。

光标

间距

要创建自定义光标，我们将在教程后面添加一个文本模块。 该模块将放置在节内，但我们不希望实际的节容器出现在我们的设计中。 为了避免显示该部分，我们将删除间距设置中的默认顶部和底部填充。

  • 顶部填充：0px
  • 底部填充：0px

光标

添加新行

列结构

继续使用以下列结构向该部分添加一行：

光标

浆纱

在尚未添加模块的情况下，打开行设置并删除大小设置中的所有自定义装订线宽度。

  • 使用自定义装订线宽度：是
  • 天沟宽度：1

光标

间距

也删除所有默认的顶部和底部填充。

  • 顶部填充：0px
  • 底部填充：0px

光标

添加文本模块（光标）

将内容框留空

是时候添加一个文本模块了，我们稍后会将其用作光标！ 将内容框留空。

光标

浆纱

转到设计选项卡，并在不同屏幕尺寸上使用自定义宽度和高度塑造模块：

  • 宽度：
    • 桌面：100px
    • 平板电脑：60px
    • 电话：40px
  • 高度：
    • 桌面：100px
    • 平板电脑：60px
    • 电话：40px

光标

边界

要将光标变成圆形，正如您在这篇文章的预览中所注意到的，我们将使用圆角和边框。

  • 所有角落：100%
  • 边框宽度：3px
  • 边框颜色：#ffffff

光标

混合模式

在这篇文章的预览中，您可能会注意到光标的倒置效果，尤其是在悬停按钮模块时。 为了达到这种效果，我们将为我们的文本模块使用混合模式。

  • 混合模式：差异

光标

主要元素 CSS

通过将以下这些 CSS 代码行添加到模块的主元素中，我们将帮助准备模块以备将来用作光标： 

transition: all .1s linear;
pointer-events: none;

光标

位置

我们还将为模块使用固定位置。

  • 位置：固定
  • 位置：左上角
  • Z指数：2

光标

CSS 类

我们将通过在高级选项卡中分配自定义 CSS 类来完成模块设置。

  • CSS 类：光标

光标

2. 添加功能

在光标文本模块下方添加代码模块

现在我们已经有了光标文本模块，是时候关注功能了！ 在新部分的光标文本模块正下方添加一个代码模块。

光标

添加样式和脚本标签

我们将结合一些 CSS 和 JQuery 代码，所以继续向您的代码模块添加样式和脚本标签。

光标

JQuery 代码开放

接下来，在脚本标记之间复制粘贴以下 JQuery 代码开始行： 

jQuery(document).ready(function($){
});

光标

重新定位光标文本模块

现在我们的代码模块中的基础已经创建，我们将一步一步地进行。 我们要做的第一件事是将我们创建的文本模块放在构建器的内部内容之后。 这将允许我们在页面范围内使用光标。 

$('.cursor').insertAfter('.et_builder_inner_content');

光标

删除页面的默认光标

接下来，我们将使用一些我们将放置在样式标记之间的自定义 CSS 代码移除页面的默认光标。 

body {
cursor: none;
}

光标

将光标文本模块设置为光标

接下来，我们将使用以下 JQuery 代码行允许光标跟随访问者的移动： 

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

光标

悬停特定模块时的切换效果

添加增加 CSS 类

正如您在这篇文章的预览中所注意到的，只要悬停按钮模块，光标样式就会发生变化。 为了实现这一点，我们将在我们的样式标签之间添加一个新的 CSS 类。 

.increase-size {
transform: scale(5);
background-color: white;
}

光标

所有按钮模块

我们将使用一些 JQuery 代码来切换这个 CSS 类。 下面的代码一一针对您的 Divi 页面中的所有按钮模块。 

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

光标

特定按钮模块

如果您希望效果特别适用于一个模块，则需要一种不同的方法。 首先，打开要应用效果的按钮模块并包含自定义 CSS 类。

  • CSS 类：光标按钮

光标

然后，替换您在上一步中使用的代码中的 CSS 类。 就是这样！ 

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

光标

预览

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

桌面

光标

移动的

光标

最后的想法

在这篇文章中，我们向您展示了如何为您的 Divi 页面创建自定义光标。 我们还向您展示了如何使用此自定义光标在有人将号召性用语悬停在您的页面上时触发悬停效果。 一旦掌握了创建自定义光标的方法，您就可以创建任何类型的设计或效果！ 您也可以免费下载 JSON 文件。 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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