WordPress divi主题

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

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

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

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

google广告开户

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

让我们潜入吧!

潜行高峰

这是我们今天将要构建的设计的先睹为快。

迪维翻转卡

迪维翻转卡


订阅我们的 Youtube 频道

本教程需要什么

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

基本思想解释

这个概念的灵感实际上来自这个如何设计翻转卡片的基本示例。 只需对 div 类分配给 Divi 行、列和模块进行一点重新设计,然后稍微清理一下 CSS。

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

WordPress divi主题

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

迪维翻转卡

迪维翻转卡

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

就是这样!

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

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

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

迪维翻转卡

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

设置部分、行和模块

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

自定义边距:底部 20px
自定义填充:0px 顶部,0px 底部

fiverr建站WordPress程序员

保存设置。

然后将该行复制 3 次,使该部分总共有 4 行。

迪维翻转卡

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

display:flex;

迪维翻转卡

独立站选品工具

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

将模块添加到行

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

迪维翻转卡

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

迪维翻转卡

高质量外链购买

设计前后翻转卡模块

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

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

迪维翻转卡

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

内容:“这是一个描述。”
背景颜色:#00a2fa
文字颜色:浅色

JasperAI 10000字免费额度试用

迪维翻转卡

添加自定义 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);
}
}

迪维翻转卡

请注意,上述 CSS 类的命名方式应该可以帮助您理解每个类的作用。 对于我们需要将这些 CSS 类添加到我们的 Divi 元素的位置,它也是一个有用的指示符。 例如,“flip-box-row”类旨在为四行中的每一行设置样式; 因此,每一行都需要有那个 CSS 类。

将 CSS 类添加到 Divi 元素

使用多选,选择每行中的所有四个顶部模块(前卡)。 然后添加以下 CSS 类:

WordPress备份工具updrafplus

CSS 类:翻转框正面

迪维翻转卡

然后,使用多选选择每行中的所有四个底部模块(后卡),并将以下 CSS 类添加到这些模块中:

CSS 类:翻转盒返回

迪维翻转卡

最后,使用多选选择所有四行并为它们提供以下 CSS 类:

CSS 类:翻转框行
列 CSS 类:翻转框列

迪维翻转卡

桌面上的最终设计

添加了所有的 CSS 类后,我们的翻转卡片功能齐全。 在桌面上查看最终设计。

迪维翻转卡

为移动设备定制设计

在我们已经添加到页面设置的自定义 CSS 代码中,有一个媒体查询将翻转卡功能仅限于桌面。 但是,我们仍然需要在平板电脑和智能手机上隐藏翻盖卡的正面版本,并确保在调整浏览器宽度时我们的行很好地堆叠。

要隐藏我们的前端卡片简介模块,请使用多选来选择每行中的所有顶部模块(前端卡片)(这在线框视图模式下会更容易,因为前端构建器中会移动)并更新以下内容:

禁用:手机和智能手机

迪维翻转卡

然后打开部分设置,在主元素的基础上再添加一行 CSS:

flex-wrap:wrap;

迪维翻转卡

这将确保行将在移动设备上堆叠。

现在让我们看看平板电脑和智能手机的最终设计。

迪维翻转卡

迪维翻转卡

奖励选项:垂直翻转卡!

如果您希望翻转卡片垂直翻转而不是水平翻转,您只需在自定义 CSS 中更改两个字母(字面意思)。 打开页面设置,找到使用“transform: rotateY(180deg)”的两个地方。 然后将“Y”替换为“X”。 如果您还没有猜到,这会将旋转更改为在 X 轴而不是 Y 轴上旋转。

迪维翻转卡

很酷的东西! 检查结果。

迪维翻转卡

最后的想法

您无需借助插件即可在 Divi 中创建精美的翻转卡。 通过本教程,您将拥有一个框架来创建无数设计和翻转卡片内容的组合。 不要忘记,您可以选择任意两个模块作为卡片的正面和背面。 所以随意发挥创意!

我希望这会有所帮助,我期待在下面的评论中收到您的来信。

干杯!