[ad_1]
让我们去。
概观
在开始学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。
办公室
联络号码
免费下载版面
要获得免费布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用以下方式订阅我们的 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]