spot_img
HomeDivi主题使用教程如何使用 Divi 将水平分隔线变成垂直分隔线

如何使用 Divi 将水平分隔线变成垂直分隔线

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将网站提升到一个新的水平。

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将以 Divi 的 Moving Company Layout Pack 为例,向您展示如何将我们都知道的标准水平分隔模块变成垂直分隔模块。 如果您尝试在页面上创建时间轴,这种方法会特别方便。 它也非常适合用于“工作原理”部分,等等。 设置垂直分隔线后,我们将在其顶部添加 Blurb 模块以创建时间轴效果。 本教程不需要任何 CSS 代码,仅基于 Divi 的内置选项。

让我们开始吧!

预习

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

垂直分隔线

谷歌SEO优化服务

让我们开始创建:添加新页面并上传移动公司布局包的着陆页

添加新页面并切换到 Visual Builder

让我们从添加一个新页面开始,添加一个标题并切换到 Visual Builder。

垂直分隔线

选择预制布局

完成后,您将能够从头开始构建、选择预制布局或克隆现有页面。 我们将使用 Moving Company Layout Pack 的登录页面来创建最终结果,因此请继续浏览预制布局。

垂直分隔线

选择搬家公司布局包的着陆页

向下滚动预制布局,直到遇到移动公司布局包并将登录页面上传到您的页面。

WordPress divi主题

垂直分隔线

开始创建垂直分隔时间线

查找时间轴部分

我们现在准备开始将水平分隔线变成垂直分隔线,并使用该分隔线创建时间线。 继续并在您的着陆页上找到以下部分:

垂直分隔线

在下面添加一个新的标准部分

在此部分的正下方,添加一个标准部分。

垂直分隔线

在新部分中放置“工作原理”行

继续将上一部分的“工作原理”行拖到新部分。

垂直分隔线

添加新行

列结构

在您刚刚放置在您的部分中的行的正下方,添加另一个具有以下列结构的行:

垂直分隔线

间距

在添加任何模块之前,打开您的行设置并将“60px”添加到上边距。

H10的年终大促

垂直分隔线

将分频器模块添加到第 1 列

隐藏分隔线

我们现在可以开始添加模块了! 我们将从第一列开始,完成后,我们将继续进行第二列。 在第一列中,我们首先需要的是一个分隔模块。 如前所述,我们要把它变成一个垂直的。 实现我们想要的结果的第一步是禁用 Show Divider 选项。

垂直分隔线

渐变背景

我们不使用实际的分隔线,而是使用分隔线模块的背景创建一个分隔线。 我们正在使用以下渐变背景:

  • 颜色 1:#e0aa25
  • 颜色 2:#c11000

垂直分隔线

浆纱

现在,我们已经确保分隔线不可见。 创建垂直分隔线的下一个关键步骤是大幅减小分隔线的宽度。 我们使用的是“2%”,但您可以根据需要使其显示得尽可能粗。 我们还启用了中心模块对齐。

垂直分隔线

间距

要垂直拉伸分隔模块,我们将向分隔模块的顶部和底部自定义填充添加“480px”。 Et voilà,我们有了垂直分隔线!

垂直分隔线

将上一节的 Blurb 模块添加到第 1 列

接下来我们要做的是使用这个垂直分隔线创建一个时间轴。 在上一节中,您将找到三个 Blurb 模块。 继续将它们中的每一个放在您正在处理的行的第一列中,就在分隔模块的正下方。

高质量外链购买

垂直分隔线

修改 Blurb 模块 #1

添加背景颜色

我们将使用 Divi 的一项效率功能来加快编辑 Blurb 模块的过程。 我们将对第一个 Blurb 模块应用所有更改,之后,我们将简单地复制模块样式并单击一次将它们添加到其他 Blurb 模块。 打开您的第一个 Blurb 模块并添加“rgba(255,255,255,0.73)”作为背景色。

垂直分隔线

更改图标字体大小

接下来您需要做的是将图标字体大小更改为“65px”。

垂直分隔线

JasperAI 10000字免费额度试用

删除间距

我们还将删除间距设置中的所有边距。 稍后,我们将分别向每个 Blurb 模块添加边距,因为值不同。

垂直分隔线

复制 Blurb 模块样式并将其添加到剩余的 Blurb 模块

复制 Blurb 模块样式

我们完成了第一个 Blurb 模块的修改。 右键单击它并选择“复制模块样式”。 这将复制我们刚刚所做的所有修改。

垂直分隔线

将模块样式粘贴到剩余的 Blurb 模块上

并将模块样式粘贴到剩余的两个 Blurb 模块上。 您会注意到它不会更改内容,只会更改设计设置,从而为您节省大量时间。

垂直分隔线

间距模糊模块

简介模块 #1

如前所述,Blurb 模块的间距不同。 第二个没有,但第一个使用“-900px”作为上边距。 添加此负边距后,您会注意到 Blurb 模块成为时间线的一部分。 在 Visual Builder 中,Divider 模块似乎位于 Blurb 模块之上。 但是一旦退出 Visual Builder,您就会看到一切都准备就绪,所以不用担心。

垂直分隔线

简介模块 #3

接下来打开你的最后一个 Blurb 模块并在底部边距添加“150px”。

垂直分隔线

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

将图像模块拖放到第 2 列

定位图像

我们现在可以进入第 2 列! 我们唯一需要的模块是图像模块。 我们正在重复使用我们页面上已有的一个,因此请继续并找到它:

垂直分隔线

在第 2 列中放置图像

将其拖放到下一个第二列。

垂直分隔线

更改间距

要使其垂直居中,我们要为其添加一些边距:

  • 顶部边距:300px(桌面),30px(平板电脑和手机)
  • 底部边距:50px(平板电脑和手机)

垂直分隔线

删除上一节和下一节

我们已经完成创建我们的部分! 剩下要做的最后一件事是删除多余的部分。

垂直分隔线

垂直分隔线

预习

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

垂直分隔线

最后的想法

在此用例博文中,我们向您展示了如何使用 Divi 的 Moving Company Layout Pack 将垂直分隔线变成垂直分隔线。 如果您想在页面上创建时间轴而无需使用任何额外代码,则此方法非常理想。 它完全基于 Divi 的内置选项。 如果您有任何问题或建议,请确保在下面的评论部分发表评论!

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

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES