6 个让您的 Divi 网站更有趣的微交互（教程 + 免费下载）

已发表: 2019-02-14

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

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

让我们开始吧。

抢先看

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

#1 在悬停时缩放图像

微交互

开始构建微交互 #1

#2 弹跳向下滚动图标

微交互

开始构建微交互 #2

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

微交互

开始构建微交互 #3

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

微交互

开始构建微交互 #4

#5 3D 图像透视旋转

微交互

开始构建微交互 #5

#6 按钮滑块微交互

微交互

开始构建微交互 #6

订阅我们的 YouTube 频道

你需要什么开始

首先，您真正需要的是 Divi。我们将在前端使用 Divi Builder 从头开始我们的示例。

下载文件以便于访问

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

下载

#1 在悬停时缩放图像

微交互

缩放是指调整元素的大小。因此，如果我们想在悬停时使图像变大（例如），我们需要做的就是添加一个小的 CSS 片段来按特定百分比缩放我们的图像。当用户将鼠标悬停在图像上时，这允许我们创建一个小而有效的微交互。让我向您展示如何将其应用于三个使用图像的流行 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)
}

现在看看结果。

微交互

在悬停时缩放 Blurb 模块图像

要将相同的效果添加到模糊模块中的图像，首先将一个模糊模块添加到第二列。

微交互

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

微交互

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

CSS 类：缩放模糊图像

微交互

有了这个 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);
}

微交互

这是结果。

微交互

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

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

微交互

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

CSS 类：比例人图像

微交互

现在打开页面设置并添加以下自定义 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);
}

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

微交互

#2 弹跳向下滚动图标

微交互

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

这是如何做到的。

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

微交互

然后更新以下内容：

文字和标志方向：中心
显示向下滚动按钮：是
图标：[选择选择的图标]

然后添加以下 CSS 类：

CSS 类：bounce-scroll-icon

这个类将允许我们使用 css 定位滚动图标，默认情况下在页面加载时为图标设置动画。

微交互

然后复制全角头模块并将 CSS 类更新为以下内容：

CSS 类：bounce-scroll-icon-hover

微交互

这个类将允许我们使用 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;}
}

微交互

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

微交互

#3 悬停时旋转图标

微交互

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

在悬停时旋转按钮图标

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

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

然后更新按钮设置如下：

为按钮使用自定义样式：是
仅在悬停按钮时显示图标：否
按钮图标：[选择选择的图标]

然后添加以下 CSS 类：

CSS 类：旋转按钮图标

微交互

有了我们的图标和 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 度。

微交互

这是结果。

微交互

旋转模糊模块图标

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

使用图标：是
图标：[添加选择的图标]
文字方向：居中
CSS 类：旋转模糊图标

微交互

现在将以下自定义 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);
}

微交互

这是结果。

微交互

这也适用于放置在标题左侧的图标。您需要做的就是更新模糊设置，如下所示：

图像/图标放置：左
标题行高度：1.7em

微交互

检查结果。

微交互

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

微交互

悬停时按钮文本到图标

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

这是如何做到的。

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

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

微交互

现在将以下自定义 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);
}

现在看看结果。

微交互

按钮图标到悬停时的文本

您还可以创建相反的效果，即最初显示按钮图标，然后将图标滑过以显示按钮文本。为此，复制按钮模块并更新以下按钮设置：

按钮文字颜色（默认）：#0c71c3
按钮文字颜色（悬停）：#ffffff

微交互

然后用以下内容替换 CSS 类：

CSS 类：按钮图标到文本

微交互

然后将以下自定义 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);
}

微交互

现在看看结果。

微交互

#5 3D 图像透视旋转

微交互

此微交互从默认使用 3D 图像透视和旋转样式的图像模块图像开始。然后在悬停时，图像求助于图像的正常显示。

这是如何做到的。

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

微交互

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

主元素 CSS（默认）：

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

微交互

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

主要元素 CSS（悬停）：

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

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

微交互

现在让我们看看结果。

微交互

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

主元素 CSS（默认）：

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

主要元素 CSS（悬停）：

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

注意这里唯一的区别是“旋转”后面的字母“X”。这告诉图像在 x 轴上旋转 45 度。然后我们在悬停时将度数值设置为 0 以使其恢复正常。

微交互

这是结果。

微交互

在第 3 列的重复图像模块中，按如下方式更新自定义 CSS：

主元素 CSS（默认）：

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

主要元素 CSS（悬停）：

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

微交互

请注意，此 CSS 与第 1 列图像中使用的 CSS 之间的唯一区别是“-45deg”值。这将逆时针旋转 Y 轴上的图像。

这是使用透视和旋转的所有三个图像微交互的最终结果。

微交互

不要忘记使用图像模块的内置设置添加更多内置悬停效果和设计。例如，这也是添加框阴影效果的好地方。

#6 按钮滑块微交互

微交互

对于最后一个微交互，我们将创建一个按钮滑块，在悬停时显示附加信息（实际上是一个全新的按钮）。基本思想是为您的列提供自定义高度，然后在列内堆叠两个按钮模块。默认情况下，顶部按钮将是用户看到的内容，但第二个按钮将是带有“附加信息”的按钮，用户将鼠标悬停在该按钮上时将看到该按钮。

这是创建它的方法。

此按钮将跨越行列的整个宽度，因此如果您将按钮添加到列不会太宽的行，则效果最佳。在这个例子中，我将使用一列行，然后为我的行设置一个最大宽度，这样按钮在大型浏览器上不会变得太宽。

创建一个具有一列行的新部分。然后向该行添加一个按钮模块并更新以下按钮设置：

按钮文字：“下载”

按钮对齐：居中
为按钮使用自定义样式：是
按钮文字颜色：#ffffff
按钮背景颜色：#0c71c3
按钮边框宽度：0px
按钮边框半径：0px
按钮图标：见截图
按钮图标颜色：#ffffff
按钮图标位置：左
仅在悬停按钮时显示图标：否

自定义边距：底部 0px

微交互

接下来，复制您刚刚创建的按钮，以便复制品堆叠在您刚刚创建的按钮下方。然后按如下方式更新重复按钮设置：

按钮文字：MP3(3.5 mb)

按钮文字颜色：#0c71c3
按钮背景颜色：#ffffff
按钮图标：见截图
按钮图标颜色：#0c71c3

微交互

在我们继续为我们的行设置样式之前，我们需要向顶部按钮添加一个 CSS 类。打开顶部按钮设置并添加以下 CSS 类：

CSS 类：顶部按钮

微交互

现在两个按钮都已就位，让我们使用自定义宽度更新行设置，该宽度将用作我们按钮的最大宽度和我们将添加到页面设置的自定义 CSS 的列 CSS 类。打开行设置并更新以下内容：

自定义宽度：200px
列 CSS 类：滑块按钮

确保将 CSS 类添加到列而不是行。

微交互

现在我们准备添加自定义 CSS。打开页面设置并添加以下CSS：

/** This styles the slider button **/

.slider-button {
  height: 50px;
  overflow:hidden;
  border:2px solid #0c71c3;
}

.slider-button .et_pb_button {
  display:block;
  margin: 0 !important;
}

.slider-button:hover .top-button {
  margin-top: -48px !important;
}

此 CSS 仅适用于默认大小的按钮。这是因为我们必须给列一个固定的高度才能隐藏第二个按钮直到悬停。现在，列高度（带有“滑块按钮”类）的高度为 50 像素。这也说明了给列的 2px 边框。在悬停时，顶部按钮（带有“top-button”类的按钮被向上移出视图，顶部边距为 -48px（按钮的高度减去 2px 边框之一）。但是，如果您更改字体 -按钮的大小或填充，您需要相应地调整滑块按钮类的高度以及顶部按钮边距。

这是最终结果。

微交互

不要忘记，您可以使用不同的文本/信息和图标为按钮设置样式以供自己使用。这是通过独特的号召性用语向用户提供附加信息的一种很好的方式。

免费下载：获取本教程的预制布局和 CSS 文件

如果您想快速了解这些微交互在您的网站上的样子，您可以下载下面的 zip 文件。下载 zip 文件后，在硬盘驱动器上找到该文件。它将被称为“microinteraction-examples.zip”。解压缩文件后，您将看到两个文件。名为“microinteraction-examples.json”的文件是 Divi 布局。它需要上传到您的 Divi 库。您可以通过导航到 Divi > Divi 库，然后单击页面顶部的导入按钮，从 WordPress 仪表板执行此操作。名为“microinteractions.css”的文件包含教程中使用的自定义 CSS。需要将此 CSS 复制到页面设置自定义 CSS 或主题定制器附加 CSS 框中。加载布局后，您还可以使用 Divi 的拖放功能将 microinteractions.css 文件直接拖到 Divi Builder 中。这将自动将 css 添加到您的页面设置中。

下载文件

免费下载

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

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

最后的想法

我希望你发现这些微交互很有用。它们在整个站点中与 Divi（仅使用 CSS）一起使用很简单。为了时间和简单起见，我使用了模块的基本默认样式，但可以根据需要随意调整设计选项以获得更多创意样式。此外，不要犹豫，调整这些示例的 CSS 以满足您的需求或提出全新的内容。

我期待在评论中收到您的来信。

干杯!

6 个让您的 Divi 网站更有趣的微交互（教程 + 免费下载）

抢先看

#1 在悬停时缩放图像

#2 弹跳向下滚动图标

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

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

#5 3D 图像透视旋转

#6 按钮滑块微交互

你需要什么开始

下载文件以便于访问

#1 在悬停时缩放图像

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

在悬停时缩放 Blurb 模块图像

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

#2 弹跳向下滚动图标

#3 悬停时旋转图标

在悬停时旋转按钮图标

旋转模糊模块图标

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

悬停时按钮文本到图标

按钮图标到悬停时的文本

#5 3D 图像透视旋转

#6 按钮滑块微交互

免费下载：获取本教程的预制布局和 CSS 文件

免费下载

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

最后的想法

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