WordPress divi主题

使用 Divi 使用粗体全角切换模块构建页面

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

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

Divi 的切换模块允许您在点击时显示其他内容,而无需额外的 jQuery 代码。 与手风琴模块类似,切换模块通常用于共享分组内容,例如常见问题。 但是,您也可以将它们用于其他事情——例如构建您的页面。 在本教程中,我们将使用全角切换模块来创建一个简单的页面设计,该设计在点击时会表现出来。 我们正在处理的设计风格大胆而干净。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

全角切换

移动的

全角切换

免费下载粗体全宽切换布局

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

订阅我们的 Youtube 频道

让我们开始重新创建

添加新部分

间距

首先创建一个新页面(或打开现有页面)并向其添加常规部分。 您需要在部分设置中做的唯一一件事是删除间距设置中的所有默认顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

全角切换

WordPress divi主题

添加新行

立柱结构

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

全角切换

浆纱

在不添加任何模块的情况下,打开行设置并通过修改大小设置确保行接触到部分容器的左侧和右侧。 这是本教程中的重要一步; 它允许我们稍后将在本教程中添加的切换模块变为全角。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

全角切换

间距

我们还将删除该行的默认顶部和底部填充。 这将删除切换模块和它所在的行/列容器之间的所有空间。

  • 顶部填充:0px
  • 底部填充:0px

全角切换

将切换模块添加到列

插入标题和内容

是时候开始添加模块了! 我们在这一行中唯一需要的模块是一个切换模块。 我们将使用标题框添加标题并将我们想要共享的所有内容放在正文内容框中。 随意在内容框中放置您想要的任何内容; 从文本到图像等等。

全角切换

状态

我们正在使用关闭的切换状态,但也可以随意将其保持打开状态。

全角切换

fiverr建站WordPress程序员

默认图标设置

转到设计选项卡并相应地更改模块的图标设置:

  • 图标颜色:#570fff
  • 使用自定义图标大小:是
  • 图标字体大小:6vw

全角切换

悬停图标设置

修改悬停时的图标颜色。

全角切换

默认切换设置

接下来更改关闭的切换背景颜色。

独立站选品工具
  • 关闭 切换背景颜色:#ffffff

全角切换

悬停切换设置

并更改悬停时的颜色。

  • 关闭 切换背景颜色:#000000

全角切换

标题文本设置

继续修改标题文本设置,如下所示:

  • 标题文字颜色:#000000
  • 标题标题级别:H2
  • 标题字体:蒙特塞拉特
  • 标题文本对齐:左
  • 标题文字大小:8vw(桌面)、10vw(平板电脑和手机)
  • 标题字母间距:-1vw(桌面),-0.5vw(平板电脑和手机)
  • 标题行高度:0.7em

全角切换

高质量外链购买

默认封闭式标题文本设置

然后,转到关闭的标题文本设置并相应地修改设置:

  • 封闭的标题字体:蒙特塞拉特
  • Closed Title Text Size: 18vw (Desktop), 16vw (Tablet & Phone)
  • 封闭式标题行高度:0.8em

全角切换

悬停关闭的标题文本设置

更改悬停时关闭的标题文本颜色。

  • 关闭标题文本颜色:#f4f4f4

全角切换

正文文本设置

继续进行正文设置并在那里进行一些更改。

JasperAI 10000字免费额度试用
  • 正文字体:Fira Sans
  • 正文字体粗细:Light
  • 正文文本对齐:对齐
  • 正文文本大小:1.2vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 车身线高:2.1em

全角切换

间距

为模块添加一些自定义的顶部、底部和左侧填充。

  • 顶部填充:10vw
  • 底部填充:10vw
  • 左填充:6vw

全角切换

边界

继续在边框设置中删除模块的默认边框。

全角切换

WordPress备份工具updrafplus

切换内容 CSS

通过将以下几行 CSS 代码添加到桌面来完成切换模块的设置:

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

修改平板和手机上的宽度CSS代码行:

width: 85vw;

全角切换

根据需要多次克隆整个部分

完成第一部分、行和切换模块后,您可以根据需要克隆整个部分; 取决于您希望在页面上显示多少内容。

全角切换

更改内容

确保更改每个重复切换模块中的所有切换内容。

全角切换

更改图标颜色

然后,分别打开每个切换模块并更改图标颜色。 下面提到了我们在本教程中使用的那些:

  • 图标颜色 1:#ff9000
  • 图标颜色 2:#00ffd4

全角切换

预览

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

桌面

全角切换

移动的

全角切换

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的切换模块发挥创意。 进一步来说; 我们将它们设为全角,并以创造性的方式使用它们来显示不同的部分内容。 本教程将展示当您考虑各种容器时,您可以轻松地在盒子外使用 Divi 的模块。 您还可以免费下载教程的 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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