WordPress divi主题

6 个让您的 Divi 网站更愉快的微交互(教程 + 免费下载)

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

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

微交互是在用户与您的网站交互时增强用户体验的好方法。 图标、按钮或图像的轻微动画可以提示用户以有趣和有目的的方式采取行动。 您可以在您的网站上包含无数的微交互,但一个好的经验法则是让它们保持“微”。 你不想做得过火。

google广告开户

今天我将向您展示一些简单的微交互,您可以使用 Divi Builder 和自定义 CSS(无 jquery)添加到您的 Divi 网站。 我将专注于用户通常与之交互的那些元素——按钮、图标、图像。

让我们开始吧。

抢先看

下面是我们将在本教程中构建的微交互的快速浏览。

#1 在悬停时缩放图像

divi 微交互

开始构建微交互 #1

#2 弹跳向下滚动图标

divi 微交互

开始构建微交互 #2

#3 悬停时旋转模糊和按钮图标

divi 微交互

divi 微交互

WordPress divi主题

divi 微交互

开始构建微交互 #3

#4 滑动按钮图标来显示和隐藏按钮文本

divi 微交互

divi 微交互

开始构建微交互 #4

#5 3D 图像透视旋转

divi 微交互

开始构建微交互 #5

#6 按钮滑块微交互

divi 微交互

开始构建微交互 #6

fiverr建站WordPress程序员

订阅我们的 Youtube 频道

你需要什么开始

要开始,您真正需要的是 Divi。 我们将使用前端的 Divi Builder 从头开始​​成为我们的示例。

下载文件以便于访问

我在本文底部提供了一个下载,供那些希望以快速简便的方式在您的网站上运行这些微交互的工作示例的人使用。 这样,您就可以在按照教程进行操作时获得一个工作示例。

下载

#1 在悬停时缩放图像

divi 微交互

独立站选品工具

缩放是指调整元素的大小。 因此,如果我们想让图像在悬停时更大(例如),我们需要做的就是添加一个小 CSS 片段来将图像缩放一定比例。 这使我们能够在用户将鼠标悬停在图像上时创建一个小而有效的微交互。 让我向您展示如何将其应用于三个使用图像的流行 Divi 模块——图像模块、模糊模块和人员模块。

继续创建一个包含三列行的新部分,以便我们可以将每个示例添加到每一列。

使用图像模块在悬停时缩放图像

要使用图像模块将缩放图像微交互添加到图像,首先将图像模块添加到第一列。

divi 微交互

然后将图像添加到您选择的模块。

高质量外链购买

divi 微交互

接下来,在图像设置的高级选项卡下添加以下 CSS 类:

CSS 类:缩放图像

这允许我们在将自定义 CSS 添加到页面设置时定位此特定模块。 要添加缩放图像所需的 CSS,请打开页面设置并添加以下自定义 CSS:

/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
  overflow:hidden;
}
.scale-image img{
 transition: all 0.2s;
}
.scale-image:hover img {
  transform: scale(1.3)
}

现在查看结果。

JasperAI 10000字免费额度试用

divi 微交互

在悬停时缩放模糊模块图像

要将相同的效果添加到简介模块中的图像,首先将简介模块添加到第二列。

divi 微交互

然后将您选择的图像添加到简介模块。

divi 微交互

WordPress备份工具updrafplus

然后将以下 CSS 类添加到 blurb 模块。

CSS 类:scale-blurb-image

divi 微交互

有了这个 CSS 类,我们现在可以添加我们的自定义 CSS 以定位到简介图像。 打开页面设置并添加以下自定义 CSS:

/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/

.scale-blurb-image .et_pb_main_blurb_image {
  overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
  transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
  transform: scale(1.3);
}

divi 微交互

这是结果。

divi 微交互

在悬停时缩放人物模块图像

要在悬停时缩放人物模块图像,请将人物模块添加到第三列并添加上传您选择的图像模块。

divi 微交互

然后将以下 CSS 类添加到 person 模块。

CSS 类:比例人图像

divi 微交互

现在打开页面设置并添加以下自定义 CSS。

/**This scales the image in the person module with the CSS class "scale-person-image" **/

.scale-person-image .et_pb_team_member_image {
  overflow:hidden;
}
.scale-person-image img {
  transition: all 0.2s;
}
.scale-person-image img:hover {
  transform: scale(1.3);
}

使用缩放图像微交互查看所有三个模块的结果。

divi 微交互

#2 弹跳向下滚动图标

divi 微交互

下一个微交互为内置在全角标题模块中的向下滚动图标添加了一个弹跳动画。 这是一种微妙的方式,可以进一步告知访问者页面下方还有更多信息。 您可以选择默认或悬停时具有这种弹跳效果。

这是如何做到的。

首先添加一个带有全角标题模块的新全角部分。

divi 微交互

然后更新以下内容:

文字和标志方向:中心
显示向下滚动按钮:是
图标: [select icon of choice]

然后添加以下 CSS 类:

CSS 类:bounce-scroll-icon

此类将允许我们使用 css 定位滚动图标,以在页面加载时默认为图标设置动画。

divi 微交互

然后复制全角标题模块并将 CSS 类更新为以下内容:

CSS 类:bounce-scroll-icon-hover

divi 微交互

此类将允许我们使用 css 定位滚动图标,以在悬停时为图标设置动画。

然后打开页面设置并添加以下自定义 CSS 以激活我们两个示例的弹跳动画。


.bounce-scroll-icon-hover .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}

.bounce-scroll-icon .et-pb-icon {
  position: absolute;
  top:-10px;
  left:0;
  right:0;
  animation-duration: 2s;
  animation-name: bounce;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
  animation-name: none;
}

@keyframes bounce {
      0%   {top: -10px; opacity: 1;}
    50%  {top: 15px; opacity:0;}
    100% {top: -10px;opacity:1;}
}


divi 微交互

查看两个示例的结果。 默认情况下,顶部标题滚动图标将动画,底部标题滚动图标将在悬停时动画。

divi 微交互

#3 悬停时旋转图标

divi 微交互

为图标添加轻微的旋转可能是一种有效的微交互,可以吸引用户点击元素。 由于两个最流行的内置图标的 Divi 模块是按钮模块和简介模块,我想我会向您展示如何在悬停时为这些图标添加旋转。

在悬停时旋转按钮图标

默认情况下,Divi 已经为按钮图标提供了有用的微交互。 将鼠标悬停在按钮上时,按钮图标出现并向右移动,表示单击该按钮您将被重定向到另一个页面。 但是,如果您想用它获得更多创意,您可以旋转图标以获得全新的微交互。

要在悬停时旋转按钮图标,首先添加一个具有单列行的新部分。 然后在该行中添加一个按钮模块。

然后更新按钮设置如下:

为按钮使用自定义样式:是
仅在悬停按钮时显示图标:否
按钮图标: [choose icon of choice]

然后添加以下 CSS 类:

CSS 类:旋转按钮图标

divi 微交互

有了我们的图标和 CSS 类,我们需要做的就是将以下自定义 CSS 添加到页面设置中:


/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}

.rotate-button-icon:hover:after {
transform: rotate(0deg);
}

这将最初将图标逆时针旋转 90 度,然后在悬停时返回 0 度。

divi 微交互

这是结果。

divi 微交互

旋转模糊模块图标

要旋转一个简介模块图标,让我们首先创建一个具有三列行的新部分。 然后将简介模块添加到第 1 列并更新以下简介设置。

使用图标:是
图标: [add icon of choice]
文字方向:居中
CSS 类:旋转模糊图标

divi 微交互

现在将以下自定义 CSS 添加到页面设置:

/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/

.rotate-blurb-icon .et-pb-icon {
  transition:  0.2s ease-out;
  transform: rotateZ(-90deg);
}

.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
  transform: rotateZ(0deg);
}

divi 微交互

这是结果。

divi 微交互

这也适用于标题左侧的图标。 您需要做的就是更新简介设置,如下所示:

图像/图标位置:左
标题行高度:1.7em

divi 微交互

检查结果。

divi 微交互

#4 滑动按钮图标来显示和隐藏按钮文本

divi 微交互

悬停时按钮文本到图标

此微交互默认显示带有图标的按钮文本,然后在悬停时移动图标以覆盖文本。

这是如何做到的。

添加具有一列行的新部分。 然后将一个按钮模块添加到该行并更新以下按钮设置:

为按钮使用自定义样式:是
按钮背景颜色:#0c71c3
按钮边框宽度:0px
按钮图标颜色:#ffffff
CSS 类:按钮文本到图标

divi 微交互

现在将以下自定义 CSS 添加到页面设置:

/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-text-to-icon:after {
  width: 1em;
  transition: all .3s !important;
  margin-left: 0;
  border-left: 1px solid #dddddd;
  left: calc(100% - 1em);
}

body #page-container .et_pb_button.button-text-to-icon:hover:after {
  border-left: 1px solid transparent;
  left: calc(50% - 0.5em);
  transform: scale(1.3);
}

body #page-container .et_pb_button:hover:after {
    color: #ffffff;
    margin-left: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scale(1.5);
}

现在查看结果。

divi 微交互

悬停时将按钮图标转换为文本

您还可以创建相反的效果,首先显示按钮图标,然后将图标滑过以显示按钮文本。 为此,请复制按钮模块并更新以下按钮设置:

按钮文本颜色(默认):#0c71c3
按钮文本颜色(悬停):#ffffff

divi 微交互

然后将 CSS 类替换为以下内容:

CSS 类:按钮图标到文本

divi 微交互

然后将以下自定义 CSS 添加到页面设置中:

/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/

body #page-container .et_pb_button.button-icon-to-text:after {
    width: 1em;
    transition: all .3s !important;
    margin-left: 0;
  border-left: 1px solid transparent;
      left: calc(50% - 0.5em);
    transform: scale(1.3);
}

body #page-container .et_pb_button.button-icon-to-text:hover:after {
  border-left: 1px solid #dddddd;
    left: calc(100% - 1em);
  transform: scale(1);
}

divi 微交互

现在查看结果。

divi 微交互

#5 3D 图像透视旋转

divi 微交互

此微交互从默认设置为具有 3D 图像透视和旋转样式的图像模块图像开始。 然后在悬停时,图像恢复正常显示。

这是如何做到的。

首先,创建一个包含三列行的新部分。 然后将图像模块添加到第 1 列,并将图像添加到您选择的图像模块。

divi 微交互

对于这个效果,我们可以直接将我们的自定义 CSS 添加到模块中。 转到高级选项卡并在主元素下添加以下自定义 CSS:

主元素 CSS(默认):

transform: perspective(700px) rotateY(45deg);
transition: all .2s;

divi 微交互

这个 CSS 使用 Transform CSS 属性对我们的图像做两件事。 首先,它添加了一个 700px 的透视图,这是图像与用户查看页面时的透视图之间的距离。 CSS 还为图像添加了旋转。 rotateY(45deg) 将图像在 Y 轴上旋转 45 度(顺时针)。 有了透视,图像现在具有 3D 外观。

主元素 CSS(悬停):

transform: perspective(700px) rotateY(0deg);

这消除了悬停时图像的旋转,使其看起来正常,因此用户可以更好地查看图像。

divi 微交互

现在让我们看看结果。

divi 微交互

让我们再举几个这个微交互的例子。 继续复制图像模块并将其粘贴到第 2 列和第 3 列中。在第 2 列的重复图像模块中,更新自定义 CSS…

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