spot_img
HomeDivi主题使用教程如何重叠模块和行以在 Divi 中创建独特的布局

如何重叠模块和行以在 Divi 中创建独特的布局

重叠是一种有用的技术,通常用于创建独特的网页设计和布局。 而且很容易与Divi重叠内容。 基本概念包括为您的模块、行和部分添加自定义边距和间距,使它们相互重叠。 您可能已经在我们的某些 Divi 布局上注意到这种重叠技术。

在本教程中,我将向您展示使用自定义边距和间距来重叠模块与模块、模块与行以及行与行的基础知识。 之后,我将向您展示如何通过重叠两行来创建独特的重叠联系表单布局。

让我们开始吧。

抢先看

这是我们将使用重叠技术一起创建的独特联系表单布局。

最终布局

WordPress divi主题

可以使用 Divi Builder 以多种创造性方式设计 Divi 的联系表格。 使您的联系表脱颖而出的一种独特方法是将其与其他内容重叠。 您可以轻松地将内容与 Divi 重叠。 但今天我要向您展示一些您以前在 Divi 中可能从未见过的东西。

在本教程中,我将向您展示如何使用这些重叠方法创建独特的联系表单布局

方法一:模块与模块重叠

将一个模块与另一个模块重叠非常简单。 这是一个如何设置的示例。

创建一个具有二分之一二分之一列结构的常规部分。 然后向每一列添加一个模块。

添加模块

对于左列中的模块,更新以下内容:

自定义边距(桌面):-20% 右,20% 左
自定义边距(平板电脑):0px Right,0px Left(设置平板电脑边距会在移动设备上清理)

左边距

对于右列中的模块,更新以下内容:

自定义边距(桌面):顶部 20%,右侧 20%,左侧 -20%
自定义边距(平板电脑):顶部 0px,右侧 0px,左侧 0px

谷歌SEO优化服务

正确的模块

而已。

根据您使用的模块,您可能需要添加一些自定义背景颜色、填充、框半径等,以使其看起来正确。 您还可以添加框阴影以在重叠模块时创建深度。

方法 2:用行重叠模块

您可能会问为什么需要将行与模块重叠。 原因是您可能希望将一组模块作为单个内容移动。 使用 Divi 构建站点时,这种情况很常见。 例如,下面屏幕截图中的联系信息由一个文本模块、3 个简介模块和一个社交媒体关注模块组成,这些模块相互堆叠以创建一个内容块。

堆叠模块

H10的年终大促

您可以为每个模块创建自定义边距和间距以与另一个模块重叠,但您会有限制。 为您的模块组添加边界半径会更加困难。 不可能将框阴影作为一个整体添加到模块组中,因为您将被迫为每个模块设置框阴影。 因此,移动一组模块的最简单方法是让它们排成一行并移动该行。 这样您就可以轻松地将边框样式和框阴影添加到行中,并在行中添加任意数量的模块。

我发现将模块与一行重叠的最好方法是使用专业部分。 为此专门设置了一个专业部分,因为所有专业部分布局的一侧都有一个指定的侧边栏区域/列(用于模块),另一侧有一个指定的区域/列用于行。 将模块添加到侧边栏并将行内容放置到位后,您可以使用自定义边距和间距来移动行或模块以使其重叠。

这是一个如何设置的示例。

创建一个具有二分之一列结构且行位于右侧的专业部分。

创建部分

然后在右列中插入一列行。

添加行

向该行添加一个(或多个)模块。

然后将一个模块添加到您的专业部分的左栏。

高质量外链购买

添加模块

更新左侧栏中模块的设置,如下所示:

自定义边距(桌面):右侧 -20%,左侧 20%
自定义边距(平板电脑):右 0px,左 0px

模块设置

更新右列中行的设置,如下所示:

writesonic

自定义边距(桌面):顶部 20%,右侧 20%,左侧 -20%
自定义边距(平板电脑):顶部 0px,右侧 0px,左侧 0px

右行设置

而已。

现在您所要做的就是自定义行设置以添加背景颜色、边框半径、填充、框阴影等。您可以在自定义行中添加多个模块。

方法三:行与行重叠

将一行与另一行重叠有点复杂。 我们需要想办法让两行并排。 我在 Divi 中尝试了多种方法来做到这一点,我发现最好的方法是创建两个专业部分。 由于每个专业部分都有一列指定给行的部分,您可以创建一个在左列上有一行的部分,然后在下面创建另一个部分,在右列上有一行。 之后,您需要做的就是将底部的行移动到与顶部的行重叠。

从技术上讲,您也可以使用两个常规部分来执行此操作,但是要让行的位置在不同的浏览器尺寸上正确呈现(至少以我的经验而言)更加困难。 专业部分的两列设置有助于做到这一点,而不必费心使用自定义 CSS。

这是如何做的。

创建一个具有二分之一列结构且行位于左侧的专业部分:

创建部分

然后在左列中插入一列行。

WordPress花园粉丝福利

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

添加行

向该行添加一个(或多个)模块。

添加模块

然后在当前部分下方创建另一个专业部分,并为其提供二分之一的列结构,并在右侧设置行。 在右列中插入单列行。

添加行

然后向该行添加一个(或多个)模块。

添加模块

接下来,我们需要为每一行添加自定义边距,以使它们重叠。 首先,将以下自定义边距添加到第一部分左列中的行:

自定义边距(桌面):剩余 15%
自定义边距(平板电脑):0px left

保存设置并将以下自定义边距添加到第二部分右列中的行:

自定义边距(桌面):顶部 -300 像素,左侧 -15%(您可能需要根据行/模块的大小调整这些值。如果额外空间过多,您可能还需要为底部边距添加负值在行下方)
自定义边距(平板电脑):顶部 0px,底部 0px,左侧 0px

添加边距

创建具有重叠行的独特 Divi 联系表单布局

现在您了解了重叠的力量,让我们通过构建一个独特的联系表单布局来使用这些技术。 对于此布局,我将使用两个专业部分重叠两行。 这样你就可以轻松地向这个布局添加额外的模块。

为了节省时间,我将使用我们在“Overlapping Rows with Rows”下创建的布局。

布局到位后,转到顶级专业部分的部分设置并更新以下内容:

在内容选项卡下
背景颜色:#fd7978

在设计选项卡下
使用自定义宽度:是
自定义宽度:1350px
使用自定义装订线宽度:是
排水沟宽度:1

这将为我们的内容和行提供一些喘息机会。

现在复制顶部的样式并将其粘贴到下面的部分。

粘贴部分

对于顶部左列中的行,按如下方式更新行设置:

在内容标签下

背景颜色:#ffffff
在设计选项卡下

自定义边距(桌面):剩余 20%
自定义边距(平板电脑):0px left
自定义填充(桌面):顶部 10%,右侧 20%,顶部 10%,左侧 10%
自定义填充(平板电脑):顶部 10%,右侧 10%,顶部 10%,左侧 10%

边框圆角:10px

tiktok siteground

行设置

接下来向该行添加一个联系表单并更新以下设置:

首先使用以下内容向您的表单添加一个新字段:
字段标识:服务
标题:感兴趣的服务
类型:单选按钮
选项 1:设计
选项 2:开发
选项 3:定制

联系表

在你的新领域的设计标签下……
制作全角:否

保存字段选项并返回联系表单设置的内容选项卡并更新以下内容:

在内容选项卡下…

标题:给我们留言
显示验证码:否

在“设计”选项卡下…

标题标题级别 h2
标题字体:Karla
标题字体粗细:粗体
标题字体样式:大写 (TT)
表单字段背景颜色:#ffffff
表单字段字体:Karla
表单字段文本大小:16px

为按钮使用自定义样式:是
按钮文字颜色:#ffffff
按钮背景颜色:#ff7875
按钮边框颜色:#ff7875
按钮边框半径:5px
按钮字体:Karla
字体粗细:粗体
字体样式:TT

输入圆角:5px
输入边框宽度:1px
输入边框颜色:#cccccc

表单设计

在高级选项卡下…

将以下自定义 CSS 添加到联系人按钮框:

margin-top: 45%

这将通过将按钮向下放置一点来调整您的表单。

利润

保存设置

现在您已准备好将模块添加到第二部分右列中的行并进行编辑。 首先让我们按如下方式更新行设置:

背景颜色:#444444

在“设计”选项卡下…
宽度(桌面):70%
宽度(平板电脑):100%
自定义边距(桌面):顶部 -620 像素,底部 -620 像素,左侧 10%
自定义边距(平板电脑):顶部 0px,底部 0px,左侧 0px
自定义填充:顶部 15%,右侧 10%,底部 15%,左侧 10%
圆角:10px
盒子阴影: [first selection]

第 2 行

保存行设置

接下来向该行添加一个文本模块并更新以下内容:

内容:

<h2>Contact Me</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex sem, facilisis sed viverra nec, sagittis vel quam nulla nisi mi scelerisque quis.

文字颜色:浅色
文字字体:卡拉
文字 文字大小:16px
文本行高:1.5em

标题文本 H2 选项卡
标题 2 字体:Karla
标题 2 字体粗细:粗体
标题 2 文字大小:32px
标题 2 字母间距:3px
标题 2 行高:1.1em
自定义边距:底部 20px

添加 Blurb 模块以显示您的联系信息

在文本模块下添加一个 blurb 模块。 通过给它标题“地址”来更新简介设置,然后将地址添加到内容框中。 然后选择使用导航图标。

更新设计选项卡设置…

5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

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

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