如何设计带有翻转动画的名片单击以在 Divi 中展示您的团队

设计可在点击时翻转的名片可以是您网站上任何团队成员部分或页面的创造性补充。 名片已经是一种熟悉且直观的方法，用于提供有关在公司工作的人员的简明信息。 因此，在网络上提供相同的设计是有意义的。 此外，每张卡片上提供的信息可以变得更加动态和互动，允许用户复制信息和/或单击名片内的链接。

在本教程中，我们将向您展示如何在 Divi 中设计独特的名片，该名片还具有单击翻转以显示有关人员的信息的功能，就像真正的名片一样。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

设计一张在 Divi 中点击即可翻转的名片

行和列设置

首先，为常规部分创建一个单列行。

打开行设置并更新以下内容：

• 均衡柱高：是
• 宽度：90%
• 最大宽度：1200px

打开列的设置并为其添加一些填充，如下所示：

• 填充（桌面和平板电脑）：顶部 30 像素，底部 30 像素，左侧 50 像素，右侧 50 像素
• 填充（手机）：顶部 15 像素，底部 15 像素，左侧 15 像素，右侧 15 像素

在高级选项卡下，将以下 CSS 类添加到列中：

• CSS 类：卡片列

这个类将在我们的代码中作为一个目标来触发点击事件，这将导致稍后的翻转动画。

重复列

现在我们有一个列设置，复制该列，以便我们有一个两列布局，每列具有相同的填充和 CSS 类。

建立后卡

名片设计的第一个元素是我们将要调用的背面卡片，它将作为带有卡片信息的名片背景。 要创建正面卡片，请向第 1 列添加分隔符。

打开分隔线设置并单击以使分隔线不可见。 我们仅将分隔线用于名片的背景图像。

然后更新以下选项：

背景颜色

• 背景颜色：#322b3f

背景渐变

• 背景渐变左颜色：rgba(50,43,63,0.72)
• 背景渐变右颜色：#322b3f
• 渐变类型：径向
• 结束位置：34%
• 将渐变放在背景图像上方：是

背景图片

• 背景图片：【上传团队成员图片或肖像】
• 背景图片尺寸：适合
• 背景图片位置：中心

浆纱

• 宽度：100%
• 最小高度：300px
• 高度：100%

盒子阴影

• 盒子阴影：见截图
• 框阴影垂直位置：0px
• 框阴影模糊强度：50px

CSS 类和绝对位置

接下来将以下 CSS 类添加到分隔符：

• CSS 类：背卡

并将位置更新为绝对：

• 位置：绝对

创建背面卡片徽标

背面卡片（分隔线）到位后，我们可以开始添加卡片信息元素。 首先，我们将在左上角添加一个徽标。

在分隔/背卡模块下添加图像模块。

然后上传大约 60 像素 x 60 像素的徽标图像。

然后使用 CSS 类和绝对位置更新图像，如下所示：

CSS 类

• CSS 类：卡片内容

位置

• 位置：绝对
• 垂直偏移：30px（桌面和平板电脑），15px（手机）
• 水平偏移：50px（桌面和平板电脑），10px（手机）

名字

要为名片创建名称，请在徽标图像下添加一个新的文本模块。

使用您希望在名片上展示的人的姓名更新正文内容。

在设计选项卡下，更新段落文本样式选项，如下所示：

• 文字字体： Poppins
• 文字文字颜色：#ffffff
• 文字文字大小：28px（桌面和平板电脑），22px（手机）
• 字母间距：1px
• 文本对齐：右

工作职位（或角色）

要在卡片上添加此人的职位（或角色），请使用名称复制之前的文本模块。

然后用人的位置（或角色）更新正文内容。

然后更新位置文本模块的设计设置，如下所示：

• 文字字体样式：TT
• 文字文字大小：16px（桌面和平板电脑），14px（手机）
• 边距：底部 15px

公司

为了将公司名称添加到名片，复制之前的（职位）文本模块。

然后用公司名称更新正文内容。

然后按如下方式更新公司文本设置：

• 文字字体粗细：轻
• 文本字体样式：默认
• 文字文字大小：22px（桌面和平板电脑），18px（手机）
• 文本对齐方式：左

电话号码

要为名片创建电话号码，请在（公司）文本模块下添加一个简介模块。

使用您希望在卡片上展示的电话号码更新（电话）简介的正文内容。

单击以使用电话图标作为简介。

在设计设置下，更新以下内容：

• 图标颜色：rgba(162,71,232,0.6)
• 图像/图标放置：左
• 使用图标字体大小：是
• 图标字体大小：20px
• 正文字体： Poppins
• 正文颜色：#ffffff
• 正文文字大小：16px
• 边距：底部 10px

电子邮件地址

要在卡片上显示电子邮件地址，请复制（电话）简介模块并使用电子邮件地址更新正文内容。

然后将图标更新为信封图标。

网站

要在卡片上展示网站，请复制（电话）简介模块并使用网站更新正文内容。

然后用更合适的图标更新图标。

社交媒体关注图标

对于我们的最后一块卡片内容，我们将向卡片添加社交媒体关注图标。 为此，请在（网站）简介下添加社交媒体关注模块。

在社交媒体关注设置模式中，使用透明背景更新每个社交网络。

（您也可以稍后根据需要添加链接网址）

然后给模块一个正确的对齐方式。

向所有卡片内容模块添加相同的 CSS 类

一旦我们为名片创建了所有的卡片内容模块，我们需要为所有这些模块提供相同的 CSS 类。 为此，请使用多选功能选择所有卡片内容模块（徽标、名称、职位、电话、电子邮件、网站和社交媒体图标），然后打开元素设置，并添加以下类：

• CSS 类：卡片内容

我们将针对这个类的自定义 CSS 代码来隐藏和显示前卡片翻转动画前后的内容。

前卡

既然我们的背面卡片已完成所有卡片内容，我们就可以创建位于背面卡片和背面卡片内容之上的正面卡片。 为此，我们将使用第 2 列中的图像模块设计正面卡片。然后我们将其移到第 1 列中的背面卡片顶部。

首先，将图像模块添加到第 2 列。

上传与用作图像的背面卡片徽标相同的徽标图像（60 像素 x 60 像素）。

然后打开背卡（分隔线）模块的设置，复制背景设计。

然后打开我们正在设计的前卡的图片设置，将背景设计粘贴到图片模块背景选项中。

在设计选项卡下，更新图像的间距如下：

• 填充（桌面和平板电脑）：顶部 30 像素，左侧 50 像素
• 填充（电话）：顶部 15 像素，左侧 10 像素

高级设置

在高级选项卡下，为图像提供以下 CSS 类：

• CSS 类：前卡

将以下自定义 CSS 添加到主元素：

[/css]
高度：100%；
宽度：100%；
[/css]

更新位置选项：

• 绝对位置
• Z指数：13

自定义高度和宽度（结合绝对位置）使包含图像（或徽标）的模块跨越父列的整个高度和宽度。 因此，即使它是一个图像模块，我们也使用它来显示两个分层图像（徽标和背景图像）作为我们名片设计的漂亮正面卡片。

不要忘记更换新的背景图像。 在这种情况下，我使用的是同一个人的不同肖像。

完成后，将正面卡片图像模块拖到第 1 列。它应该完全覆盖背面卡片。

自定义代码

最后一步是添加一些自定义 CSS 和 JQuery 以完成实际制作名片翻转动画的功能。

要添加代码，请在第 1 列中的社交媒体关注模块下方添加代码模块。

自定义 CSS

在样式标签之间粘贴以下 CSS 代码：

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

JQuery

在 CSS 下，将以下 JQuery 粘贴到脚本标签之间

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

创建额外的名片

要创建其他名片，您需要做的就是复制包含我们用来构建它的所有模块的列。 复制该列后，您将需要删除额外的代码模块。 有两个具有重复代码的代码模块是行不通的。

复制列/卡片后，只需根据新名片的需要使用模块更新背景图像和卡片内容。

最后结果

这是名片设计的最终结果，单击时具有翻转动画。 当您单击前面的卡片图像时，它会翻转并消失，后面的卡片分隔符也会翻转但保持可见。 翻转动画完成后，卡片信息会逐渐消失。 要将卡片翻转回来，您需要做的就是在包含卡片的列之外单击。 我不想在单击卡片时再次翻转卡片（如切换），以便用户可以单击卡片中的元素。

最后的想法

希望这种交互式名片设计将帮助您在如何在网站上显示团队成员部分或页面方面获得更多创意。 事实上，这种技术不仅限于名片。 您几乎可以将它用于您想要显示的任何信息。 尝试一下，看看它是否适合您的下一个项目。

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

干杯!