如何在没有插件的情况下使用 Divi 中的任何模块创建翻转卡

已发表: 2019-02-09

翻转卡片是用户与您的网站互动的一种有趣方式。它不仅提供了一个很酷的翻转动画，还允许您在一个简洁的位置提供附加信息。在本教程中，我将向您展示如何在不使用插件的情况下将 Divi Modules 变成翻转卡！使用这种方法，您将能够将一个 Divi 模块用作卡的正面，将另一个 Divi 模块用作卡的背面。您甚至可以使用 divi builder 随意设计每个模块（正面和背面）。该功能仅通过几个 CSS 片段（无 jquery）即可完成。

我想你会惊讶于制作这些卡片是多么简单和有趣。

让我们潜入吧！

潜行高峰

这是我们今天将要构建的设计的一个先见之明。

迪维翻转卡

订阅我们的 YouTube 频道

本教程需要什么

本教程只需要 Divi！不需要插件。我们还将使用免费的 App Developer Layout Pack，可在 Divi Builder 中使用。

基本思想解释

这个概念的灵感实际上来自这个关于如何设计翻盖的基本例子。只需稍微重新设计即可将 div 类分配给 Divi 行、列和模块，然后稍微清理 CSS。

Divi 布局由具有四个单列行的常规部分组成。在每一行中，我添加了两个相互堆叠的简介模块（尽管任何 Divi 模块都可以工作）。顶部宣传语用作翻转卡的正面，底部宣传语用作翻转卡的背面。通过将“display:flex”应用于该部分，行将像列一样水平结构化。这允许卡片并排对齐成四列。

这是我们添加自定义 CSS 之前的设置。

迪维翻转卡

然后我将自定义 CSS 添加到页面设置中，并将相应的 CSS 类添加到每个行、列和模块。

就是这样！

使用预制布局创建 Divi 翻转卡

将预制布局添加到您的页面

为了让事情顺利进行，继续创建一个新页面，给你一个页面标题，然后单击以使用 Divi Builder。选择“选择预制布局”选项。从 Load from Library 弹出窗口中，选择 App Developer Layout Pack，然后单击以使用 App Developer Landing Page 布局。

迪维翻转卡

布局加载到页面后，发布您的页面，然后单击“在前端构建”按钮。现在您已准备好开始创建翻转卡。

设置部分、行和模块

在布局的第一部分下，添加一个具有一列行的新常规部分。暂时不要添加任何模块。打开行设置并更新以下内容：

自定义边距：底部 20px
自定义填充：0px 顶部，0px 底部

保存设置。

然后将该行复制 3 次，以便在该部分中总共有四行。

迪维翻转卡

现在打开部分设置并将以下自定义 CSS 添加到主元素：

display:flex;

迪维翻转卡

这将行更改为水平显示，这基本上将我们的行转换为四列，即使从技术上讲它们仍然是每列一列的 Divi 行。

将模块添加到行

这是我们的预制布局在本教程中派上用场的地方。我们将使用布局顶部的四个简介模块来快速启动翻转卡的设计。使用右键单击选项或快捷键 ctrl+c 和 ctrl+v (windows) 和 cmd+c cmd+v (mac)，将预制模块复制并粘贴到我们刚刚创建的每一行中。确保每一行都有相同模块的重复版本。

迪维翻转卡

现在你的部分应该是这样的。

迪维翻转卡

设计正面和背面翻转卡模块

每排堆叠的两个模块将用作翻转卡的正面和背面。每行中的顶部模块将用作前部，底部模块将用作后部。由于我们的预制布局已经完成了前卡（顶部模块）的设计，我们需要做的就是调整后卡（底部模块）的设计和内容。

使用Divi多选功能，选中每一行底部的所有模块，然后打开元素设置，同时自定义所有四个模块。

迪维翻转卡

现在我们可以更新元素设置选项来设计我们翻转卡片的背面版本。更新元素设置如下：

内容：“这是说明。”
背景颜色：#00a2fa
文字颜色：浅

迪维翻转卡

添加自定义 CSS 和 CSS 类

现在是时候使用自定义 CSS 为我们提供翻转卡片功能了。打开页面设置并添加以下自定义 CSS：

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

迪维翻转卡