[ad_1]

在您的页面上显示着陆项目时,确保人们知道他们可以选择一个项目并单击它很重要。 最明显的方法之一是包含一个按钮,但如果您正在寻找一种额外的交互方式来鼓励点击您的页面,那么您会喜欢本教程。 今天我们将向您展示当您将鼠标悬停在特定的可点击元素(如图像)上时如何将光标变成按钮。 这将为您增加额外的动力 游客 并将产生良好的页面交互。 您还可以免费下载 JSON 文件!

让我们去。

概观

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

办公室

光标按钮

联络号码

光标按钮

免费下载版面

要获得免费布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用以下方式订阅我们的 Divi Daily 邮件列表: 形式 以下。 作为新订阅者,您将在每周一收到更多 Divi 好处和免费的 Divi Layout 包! 如果您已经在列表中,只需在下方输入您的电子邮件地址并单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1.创建一个元素结构

添加新部分

背景颜色

我们将通过在Divi页面中构建元素的结构来开始本教程。 添加一个新部分,并为其使用白色背景色。

  • 背景颜色:#ffffff

光标按钮

间距

转到“截面设计”选项卡,并如下更改间距设置:

  • 上边距:80px
  • 底部填充:0px

光标按钮

添加新行

列的结构

使用以下列结构继续添加新行:

光标按钮

浆纱

尚未添加任何模块,请打开行设置并更改尺寸设置中的最大宽度。

光标按钮

间距

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

  • 上边距:0px
  • 底部填充:0px

光标按钮

将图像模块添加到列1

下载图片

让我们从第1列中的图像模块开始,进行模块化。上传所选图像。

光标按钮

Ajouter联合国留置权

然后将链接添加到图像模块。

光标按钮

天桥规模

然后转到“设计”选项卡并更改模块悬停比例设置。

光标按钮

CSS类

通过在“高级”选项卡中应用以下CSS类来完成模块参数:

光标按钮

将文本模块#1添加到1列

添加H3内容

让我们继续下一个模块,这是一个文本模块,其中包含 内容 您选择的 H3。

光标按钮

H3文字设定

切换到模块设计选项卡,并相应地更改H3文本设置:

  • 标题3警察:演员
  • 标题3文字颜色:#000000
  • 标题3文字大小:
    • 桌面:35px
    • 平板电脑:28px
    • 电话:22px
  • 标题3线高:1,4em

光标按钮

间距

然后添加底边距。

光标按钮

将文本模块#2添加到1列

添加内容

然后在前一个文本模块下方添加另一个文本模块,并带有 内容 您的选择的描述。

光标按钮

文字设定

如下更改模块的文本设置:

  • 文字字体:演员
  • 文字颜色:#75baff
  • 文字大小:
    • 桌面:22px
    • 平板电脑:18px
    • 电话:15px
  • 文字字母间距:0.5px
  • 字母线高度:2

光标按钮

将按钮模块添加到1列

添加副本

在此列中,我们需要的下一个和最后一个模块是按钮模块。 添加您选择的副本。

光标按钮

按钮设定

切换到模块设计选项卡,并相应地更改按钮设置:

  • 对按钮使用自定义样式:是
  • 按钮文字颜色:#000000
  • 按钮边框的宽度:0px
  • 按钮边框的半径:1px

光标按钮

  • 按钮字体:演员
  • 显示按钮图标:是
  • 按钮图标位置:向左
  • 仅将鼠标悬停在该按钮上的图标上:否

光标按钮

间距

还添加自定义间距值。

  • 底边距:80px
  • 底部填充:20px
  • 右填充:30px

光标按钮

影盒

并通过应用以下框阴影设置来完成模块设置:

  • 框阴影的水平位置:0px
  • 垂直框阴影位置:2px
  • 阴影颜色:#000000

光标按钮

删除第2列

完成第一列及其中的所有模块后,请从该行中删除第二个空列。

光标按钮

克隆列1

并通过克隆一次来重用第一列。

光标按钮

克隆整行

继续克隆整个行一次。

光标按钮

编辑所有重复的内容,图像和链接

然后确保编辑所有 内容每个重复列中的 、图像和链接。

光标按钮

2.添加一个游标

在该部分添加新行

列的结构

现在我们已经有了元素结构,是时候创建滑块设计了。 为此,我们将使用以下列结构将新行添加到本节中:

光标按钮

间距

打开行设置,并删除所有默认的顶部和底部填充。

  • 上边距:0px
  • 底部填充:0px

光标按钮

将光标文本模块添加到新的行列

添加内容

然后将文本模块添加到新行。 该文本模块将专用于创建光标按钮设计。 在内容区域中添加您选择的副本。

光标按钮

背景颜色

然后添加背景色。

  • 背景颜色:#47669b

光标按钮

文字设定

切换到“设计”选项卡,并相应地设置文本样式:

  • 文字字体:演员
  • 文字字体粗体:粗体
  • 文字字体样式:大写
  • 文字颜色:#ffffff
  • 文字字母间距:2px
  • 对齐文本:中心

光标按钮

浆纱

然后将宽度和高度值添加到尺寸调整参数中。

  • 宽度:150px
  • 高度:150px

光标按钮

接壤

我们通过更改边框设置将这个模块变成一个圆圈。

光标按钮

影盒

我们还将添加一个微妙的盒子阴影。

  • 框阴影模糊强度:0px
  • 箱影传播力:20px
  • 阴影颜色:rgba(7,213,255,0.14)

光标按钮

CSS类

接下来,我们将为我们的模块提供一个CSS类。

光标按钮

CSS主要元素

我们还将CSS代码行添加到模块的主要元素中。

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

display: flex;
justify-content: center;
align-items: center;

光标按钮

位置

我们将通过更改高级选项卡中的位置来完成模块的参数:

  • 位置:固定
  • 位置:左上方
  • Z指数:2

光标按钮

在文本模块下添加一个代码模块

现在我们已经设计了滑块,是时候开始使用该功能了。 为此,我们将在光标文本模块下方添加一个新的代码模块。

光标按钮

添加样式和脚本标签

将样式和脚本标签添加到您的代码模块。

光标按钮

添加CSS代码

在样式标签之间插入以下CSS代码行:

.hide-cursor {
cursor: none;
}

.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;

visibility: hidden;
opacity: 0;
}

.show-cursor {
visibility: visible !important;
opacity: 1;
}

光标按钮

添加JQuery代码

并在脚本标记之间使用以下几行JQuery代码:

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

var cursor = $('.cursor');

$('.image-cursor').mousemove(function(e){

cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');

});

$('.image-cursor').mouseleave(function() {

cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');

});

});

光标按钮

概观

现在我们已经完成了所有步骤,让我们最后看一下它在不同屏幕尺寸下的外观。

办公室

光标按钮

联络号码

光标按钮

最后的想法

在本教程中,我们向您展示了如何向页面上的可点击元素添加更多交互。 具体来说,我们向您展示了当有人将鼠标悬停在您选择的项目上时如何触发光标按钮。 这为您的页面设计增加了额外的交互作用,可以帮助提高点击率! 您还可以免费下载JSON文件。 如果您有任何疑问或建议,请随时在下面的评论部分中发表评论。

如果您想更多地了解Divi并获得更多Divi赠品,请确保 订阅我们的通讯 et YouTube频道 因此,您将永远是最早了解和享受此免费内容的人之一。



[ad_2]

来源链接