WordPress divi主题

使用 Divi 创建具有可扩展内容的“便签”

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

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

使用 Divi 的内置选项,有很多方法可以在您的网站上展示服务和/或处理步骤。 为了帮助您获得灵感,我们将向您展示如何仅使用 Divi 的内置选项创建具有可扩展内容的便签。 这是一种有趣的方式,可以在访问者触发互动后立即分享其他内容。 您可以将此设计用于您正在处理的任何网站,并且还可以免费下载 JSON 文件!

google广告开户

让我们开始吧!

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

便利贴

移动的

便利贴

免费下载粘滞便笺布局

要掌握免费的便笺布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

让我们开始重建吧!

订阅我们的 Youtube 频道

添加新的常规部分

您需要做的第一件事是向您正在处理的页面添加一个新的常规部分。

便利贴

WordPress divi主题

添加新行

立柱结构

继续添加新行,使用以下列结构:

便利贴

过渡时间

在不添加任何模块的情况下,打开行设置。 我们通过更改高级选项卡中的过渡持续时间来创建即时过渡。

便利贴

将文本模块 #1 添加到第 1 列

添加内容

是时候开始添加模块了! 在该行的第一列添加一个新的文本模块,然后输入您希望在便笺设计中出现的 H2 内容。

便利贴

背景颜色

然后,转到背景设置并相应地更改背景颜色:

  • 背景颜色:#ffd800

便利贴

H2 文本设置

转到 H2 文本设置并在那里进行一些更改:

  • 标题 2 字体:Indie Flower
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:#3a0cf2
  • 标题 2 文字大小:40px

便利贴

fiverr建站WordPress程序员

间距

为了创建便笺的外观和感觉,我们将向模块添加一些自定义填充值:

  • 上边距:150px
  • 底部填充:150px
  • 左填充:20px
  • 右内边距:20px

便利贴

边界

我们还使用以下设置添加了顶部边框:

  • 顶部边框宽度:20px
  • 顶部边框颜色:#ffc300

便利贴

将分隔模块添加到第 1 列

能见度

第一列中我们需要的下一个模块是 Divider Module。 确保启用了“显示分隔线”选项。

独立站选品工具

便利贴

颜色

然后,转到设计选项卡并更改分隔线颜色。

便利贴

风格

修改分隔线的样式设置。

便利贴

高质量外链购买

浆纱

并更改尺寸设置。

  • 分隔线重量:5px
  • 高度:0px

便利贴

间距

为了在前一个模块和这个模块之间创建一些空间,我们添加了一些上边距。

便利贴

变换旋转

正如您在这篇文章的预览中看到的那样,我们正在寻求创建一个垂直分隔线而不是水平分隔线。 为此,我们将更改 Divider 模块的变换旋转设置中的左侧值:

JasperAI 10000字免费额度试用

便利贴

能见度

我们还想确保 Divider Module 出现在 Text Module 的下方。 为此,我们将减少高级选项卡中分隔线的 z 索引。

便利贴

将文本模块 #2 添加到第 1 列

向内容框添加符号

第一列中我们需要的下一个也是最后一个模块是另一个文本模块。 将“●”字符添加到内容框中。

便利贴

WordPress备份工具updrafplus

文字设置

然后,转到设计选项卡并更改文本设置。

  • 文字字体:Open Sans
  • 文字颜色:#3a0cf2
  • 文字大小:100px
  • 文本行高:1em
  • 文本方向:中心

便利贴

间距

接下来通过添加一些负上边距来创建所需的重叠。

便利贴

将文本模块 #3 添加到第 2 列

添加H3内容

让我们继续第二列。 在这里,我们需要的第一个模块是一个文本模块。 输入您选择的一些 H3 内容。

便利贴

H3 文字设置

转到设计选项卡并相应地更改 H3 文本设置:

  • 标题 3 字体:Indie Flower
  • 标题 3 文本颜色:#3a0cf2
  • 标题 3 文字大小:30px

便利贴

间距

接下来添加一些自定义上边距:

  • 上边距:400px(台式机)、200px(平板电脑)、150px(手机)

便利贴

将文本模块 #4 添加到第 2 列

添加内容

进入下一个模块,这是另一个文本模块。 输入您选择的一些段落内容。

便利贴

文字设置

然后,转到设计选项卡并更改文本设置。

  • 文字字体:Open Sans
  • 文字大小:13px
  • 文本行高:2em

便利贴

浆纱

接下来修改模块的宽度。

便利贴

间距

并添加一些顶部和底部边距。

  • 上边距:10px
  • 下边距:50px

便利贴

将按钮模块添加到第 2 列

添加副本

第二列中我们需要的最后一个模块是按钮模块。 输入您选择的一些副本。

便利贴

按钮设置

然后,转到设计选项卡并设置按钮样式。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:20px
  • 按钮文字颜色:#3a0cf2
  • 按钮背景颜色:#ffd800
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字体:Abhaya Libre

便利贴

便利贴

间距

还添加一些自定义填充值。

  • 上边距:20px
  • 底部填充:20px
  • 左填充:60px
  • 右内边距:60px

便利贴

克隆行两次

添加完所有模块后,您可以继续克隆该行两次。

便利贴

修改重复行#1

更改文本模块 #1 背景颜色

我们正在更改两个副本的调色板,从第一个开始。 打开第 1 列中的第一个文本模块并更改背景颜色。

  • 背景颜色:#00ffee

便利贴

更改文本模块 #1 顶部边框颜色

修改顶部边框颜色。

  • 顶部边框颜色:#00e0c2

便利贴

更改分隔线颜色

然后,为分隔线使用以下颜色代码:

便利贴

更改按钮模块背景颜色

并更改按钮背景颜色。

  • 按钮背景颜色:#00ffee

便利贴

修改重复行#2

更改文本模块 #1 背景颜色

移动到第二个重复行,打开第 1 列中的第一个文本模块并更改背景颜色。

  • 背景颜色:#42ff21

便利贴

更改文本模块 #1 顶部边框颜色

修改顶部边框颜色。

  • 顶部边框颜色:#1de524

便利贴

更改分隔线颜色

然后,打开 Divider Module 并使用以下分隔线颜色:

便利贴

更改按钮模块背景颜色

最后但并非最不重要的一点是,更改按钮背景颜色:

  • 按钮背景颜色:#42ff21

便利贴

创建可扩展内容

为所有行添加默认行大小

现在我们已经自定义了部分中的所有行,是时候让内容可扩展了。 为此,打开每一行并应用以下最大高度:

便利贴

将悬停行大小添加到所有行

将悬停时的最大高度修改为“100%”。 这将允许该行再次占用其初始大小。

便利贴

所有行的更改溢出

确保你也隐藏了每一行的溢出,你就完成了!

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

便利贴

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

便利贴

移动的

便利贴

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项创建带有可扩展笔记的便签。 这是在您的网站上展示服务的一种创造性和有趣的方式。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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