spot_img
HomeDivi主题使用教程如何在 Divi 中设计几何网格布局

如何在 Divi 中设计几何网格布局

为您的网站设计几何网格布局会非常漂亮。 我最喜欢的几何设计元素之一是六边形。 六边形可用于设计平衡和谐的网格布局(想想蜂巢)。 但设计可能会带来挑战。 您已创建形状作为内容的背景。 然后你必须让你的内容适合形状。 然后你必须确保这些形状在不同的屏幕尺寸上正确间隔。 不过别担心。 这并不像您想的那么难。

至于创建那些几何形状,有一些方法可以使用一些高级自定义 CSS 来实现,但我认为最简单的方法是创建图像。 然后你可以使用 Divi 的力量来休息。

在本教程中,我将向您展示创建六边形图像以使用 Divi 设计几何网格布局是多么容易。

让我们开始吧!

谷歌SEO优化服务

抢先看

这是我们将在本教程中构建的几何网格设计的一瞥。

几何网格

你需要什么

  • 照片编辑器(我将使用 Sketch)创建六边形图像。 或者现在,您可以将此图像拖到桌面上并使用它。
    几何网格
  • Divi 主题(已安装并激活)

创建六边形背景图像

要构建六边形背景图像,我将使用照片编辑器 Sketch(仅适用于 Mac)。 然而,这应该是一个很容易在任何数量的照片编辑器(如 Photoshop、Illustrator 或 Gimp)上创建的形状。

如果您不想打扰本教程的这一部分,您现在可以随时将此图像拖到桌面上。 这是一个深色半透明的六边形图像,应该适用于多种设计,考虑到它会允许其背后的背景颜色显示出来。

以下是如何在草图中创建图像。 首先,单击右上角的插入图标。 然后将鼠标悬停在形状选项上并选择六边形。

WordPress divi主题

几何网格

现在按住 shift 键并在画布上单击(并按住)并拖动鼠标以创建形状,然后松开鼠标。 按住 shift 键可以为形状创建完美的正方形尺寸。 现在在右侧边栏中更新形状的属性,如下所示:

尺寸:360宽,360高
侧面:6
填充颜​​色:000000 hex, 0 R, 0 G, 0 B, 30 A(基本上这是一种不透明度为 30% 的黑色)

几何网格

然后将您的图像导出为 png 并将其导入您的 WordPress 媒体库以备后用。

创建具有三列的第一部分

该设计将三个部分堆叠在一起,每个部分都有一行包含我们不同的列结构。 第一部分将具有我们的三列结构,第二部分将具有两列,而第三部分将只有一列。

要创建第一部分,请创建一个新页面并部署可视化构建器以从头开始构建新布局。 将为您创建一个新的常规部分,可视化构建器将提示您为您的部分选择栏结构。 选择三列结构(三分之一三分之一三分之一)。

几何网格

现在,在我们开始编辑我们的行并添加我们的模块之前,让我们通过使用以下内容更新部分设置来为我们的部分提供背景颜色渐变:

背景渐变左颜色:#2b87da
背景渐变右颜色:rgba(0,0,0,0.6)

H10的年终大促

几何网格

自定义行设置并将六边形图像添加到您的列背景

为了实现我们正在寻找的设计,我们需要将背景图像添加到我们的三列行的每一列。 因此,对于每一列,将六边形图像(应为 360 像素 x 360 像素)添加到每一列。 然后将背景图片大小设置为“实际大小”,背景图片重复设置为“不重复”。

几何网格

确保对第 1、2 和 3 列背景图像执行此操作。

接下来我们需要自定义我们的行设置来创建我们六边形背景图像在每一列中正确显示所需的间距。 这种间距也将有助于保持事物的响应性和最大化移动设备上的水平空间。

更新行设置如下:

使用自定义宽度:是
单元: %
自定义宽度:100%
使用自定义装订线宽度:是
排水沟宽度:2
均衡列高:是

自定义填充(桌面):顶部 0px,底部 0px,左侧 10%,右侧 10%
自定义填充(平板电脑):0% 左,0% 右

几何网格

现在保存您的行设置。

高质量外链购买

将您的 Blurb 模块添加到每一列

添加一个新的 blurb 模块到你的第一列并更新 blurb 设置如下:

内容:“你的内容在这里。 内联或在模块内容设置中编辑或删除此文本。” (保持简短,因为六边形图像中的空间有限)
使用图标:是
选择图标(显然你想要的任何人)

然后按如下方式更新设计设置:

图标颜色:#66d1ff
图标字体大小:66px
文本方向:居中
文字颜色:浅色
宽度:360 像素(与六边形背景图片的宽度相同)
模块对齐:居中
自定义填充:顶部 85 像素,底部 85 像素,左侧 10%,右侧 10%

几何网格

JasperAI 10000字免费额度试用

重要的是首先添加要显示在六边形前面的内容,这样您现在就可以调整宣传模块的间距以完全显示背景图像。 请注意,我添加了 85px 的顶部和底部填充。 这足以显示六边形背景,即使在将浏览器调整为移动设备尺寸时也是如此。

保存宣传模块后,继续复制并将其粘贴到第 2 列和第 3 列,以便所有三个宣传模块都存在。

现在我们已经成功地将六边形背景添加到我们的第一行宣传语中。

创建具有两列的第二部分

要创建我们的第二部分,请继续并复制第一部分,然后使用以下背景颜色更新部分设置:rgba(0,0,0,0.6) 并删除现有的渐变。

然后将行的列结构更改为两列,并删除右下角列中的额外模块。

几何网格

更新行设置如下:

排水沟宽度:3
自定义边距(桌面):-145px 顶部
自定义边距(平板电脑):-70px 顶部
自定义填充(桌面):24% 左,24% 右

几何网格

我在左侧和右侧添加了更多填充,以将六边形背景定位在上面部分中的宣传语之间(每边 24% 的填充使我们非常接近)。 我还将装订线宽度改回 3 以适应由于更多行填充而减少的列空间。 然后我使用 -145px 边距将行拉高一点。

WordPress花园粉丝福利

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

正如您所看到的,网格布局正在融合在一起。

用一栏创建第三部分

对于最后一部分,继续复制该部分。 然后转到第一部分并复制背景渐变并将其粘贴到刚刚创建的第三部分。 然后将鼠标悬停在渐变颜色预览上时单击“切换”图标来翻转渐变。 然后删除第三部分中的背景颜色。

几何网格

现在将行列结构更新为一列并删除额外的 blurb 模块。

几何网格

为了让六边形图像背景在较小的浏览器窗口上与其他广告一起缩放,我们需要向该行添加更多的填充。 这将使六边形图像挤压在一起以匹配其他图像。 这只是使设计更加一致的一个小细节。

在行设置中,按如下方式更新自定义填充:

自定义填充(桌面):左 37%,右 37%

几何网格

现在让我们检查一下几何网格布局的最终​​结果。

几何网格

这是它在手机上的样子。

几何网格

这是它如何适应不同的屏幕尺寸。

几何网格

最后的想法

本教程向您展示如何通过向列添加六边形背景来创建几何网格,但您可以轻松地应用相同的技术来添加您想要的任何背景图像。 这为设计漂亮的布局打开了很多大门,让您的网站与众不同。

我希望你觉得它对你的下一个项目有帮助,我期待着在评论中听到你的消息。

干杯!

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

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

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