上海市高端网站设计:如何使用Divi的选择性同步来定制整个网格布局

2019.05.28 关键词:

设计一个令人印象深刻的网格布局可能很棘手。无论你是展示你的投资组合,还是在网上展示产品,你都希望这个网格布局是清晰的,并吸引游客的眼球。因为网格有重复的内容块,一个小的修改就会对整个设计产生巨大的影响。这就是为什么有一个像Divi的可视化构建器这样的设计工具是有帮助的。借助全局库项目和选择性同步的强大功能,使用可视化构建器完善网格布局的设计非常容易。也很有趣。

上海市高端网站设计在本教程中,我将向您展示如何利用选择性同步的力量来简化网格布局的设计过程。我将带您通过一个设置,让您创建漂亮的网格布局比以往任何时候都快。

偷窥

下面是一些我们将创建的示例设计。然而,最令人印象深刻的是,对整个网格进行更改是多么容易!

上海市高端网站设计

关于全局项目和选择性同步的提醒

divi允许您将模块保存到DiviLibrary作为全局库项。一旦模块是全局的,您就可以选择模块的设置选项中的哪一个进行同步(这称为选择性同步)。因此,如果在整个页面/站点中多次添加全局模块,则对其中一个模块上的同步选项所做的任何更改都将同时推送到该模块的所有实例。这是一个很好的节省时间和方便的设计工具。它是设计网格布局的完美选择。

由于网格布局通常包含大量模块,因此我们可以同步所有模块的设计元素,因此您只需更新一个模块就可以将更改应用于所有模块。

当你有机会的时候,去看看关于如何使用选择性同步的文档想了解更多信息。

我们开始吧。

第1部分:为网格布局创建四列行

我们的第一部分很简单。如果您还没有创建一个新页面并部署可视化构建器。默认情况下,您将在构建器中看到一个节和一行。单击行上的列布局图标,并将其更改为四列布局。

上海市高端网站设计

在添加第一个模块之前,转到“设计”选项卡下的行设置,并选择“让这个行满宽”。那就保存设置。

第2部分:为内容块创建全局模块

在下一部分中,我将添加一系列功能丰富的内容,类似于带有图像模块(添加顶部图像)和操作模块(添加标题、正文和按钮)的博客帖子布局。这个设置有很多不同的应用程序。许多投资组合和产品页面都是这样构造的。

创建全局图像模块

首先,向左列添加一个图像模块,并上传至少500 px宽的图像。那就保存你的设置。

一个很好的技巧是尝试让你所有的图像在整个网格中保持相同的宽度和高度,这样你的图像就能均匀地排列起来。

现在,您可以使您的图像模块成为一个全局项目。为此,单击灰色菜单上的“保存到库”图标,该图标在图像模块上悬停时显示。给模块一个类似于“全局网格图像”的布局名称。然后单击选项“让这是一个全局模块”旁边的复选框,然后将其保存到库中。

既然图像模块是一个全局项目,它将被高亮显示为绿色悬停作为一个有用的提醒。现在我们可以更新图像模块设置,以选择要同步的选项。从弹出的图像设置模式中,您应该注意到现在每个选项的左边都有绿色同步图标。要取消一个选项,只需单击图标,它将从绿色变为红色,让你知道它不再同步。

对于图像模块,我们希望保持打开选项以更改整个网格中的图像(我们不希望每个列的图像相同),因此我们需要取消对ImageURL选项的同步。

您也可能希望取消“打开在光箱”选项,以防您想要选择一些图像,而不是其他。但是如果你想为所有的图像切换这个开关,你需要保持这个同步。

我们肯定希望取消“链接URL”选项的同步,这样我们就可以通过网格为每个图像创建唯一的链接。

创建“全球行动呼吁”模块

在图像模块下,添加对操作模块的调用,并输入一些模拟内容,如下所示:

标题:毛里士
按钮文本:了解更多信息
内容:SED porttitor lectus nibh.库拉比图尔非明星族同席。
按钮URL:#(这很重要,因为没有URL按钮就不会显示)

在实际添加官方内容之前,在设计布局时添加这个模拟内容是很有帮助的。

保存你的设置。

正如我们对图像模块所做的那样,将对Divi库的调用保存为名为“GlobalGridCTA”的全局项。

现在回到对操作设置的调用,并取消对以下内容的同步:

标题(不同步)
按钮文本(不同步)
内容(不同步)
按钮URL(不同步)

保存设置。

我们现在可以在整个网格中为每个模块输入不同的内容。由于其余选项是同步的,这些选项可以用于一次更新所有模块。

复制全局模块和行

我们创建内容元素的两个模块已经设置好,可以设计了。但是首先,让我们复制(或复制和粘贴)这些模块来填充我们行的所有四列。然后复制行,以了解我们的网格将是什么样子。这样,一旦您开始对全局模块进行设计更改,您将能够看到这些更改在整个网格(而不仅仅是一个模块)上的外观。这是一个伟大的设计工具!

第3部分:设计您的全球模块

上海市高端网站设计现在是时候开始有趣的部分了。这个设置的美妙之处在于,当您对一个模块进行调整时,您可以实时地看到您所有的自定义,并在所有模块上看到。

我们开始吧。

调整图像模块设置

对于图像模块设置,为“图像下方的显示空间”选项选择“no”。

注意:在保存模块设置之前,您不会看到对所有其他模块的更改。

在“设计”选项卡下,更新以下内容:

框影:见截图
框影水平位置:-20 px
盒影垂直位置:-20 px
阴影颜色:#379e94

保存设置。

这是我们现在要做的所有,但稍后我们将能够利用这些过滤器选项,以创造一些酷的图像效果。

行动调用模块的设计

若要设计对操作模块的调用,请按以下方式更新设置:

背景颜色:RGBA(255,255,255,0)

注意,我将背景颜色设置为透明(而不是白色),因为我稍后想做一些事情。请继续关注。

在“设计”选项卡…下

文字颜色:深色
文本方向:左

标题字体:Poppin
标题线高度:1.3em
车身字体:Poppin
正文大小:16 px

为按钮使用自定义样式:是
按钮文本大小:16 px
按钮文本颜色:#ffffff
按钮背景颜色:#379e94
按钮边框颜色:#379e94
按钮边框半径:0px
按钮字母间距:1 px
按钮Hover背景色:RGBA(0,0,0,0.3)
按钮Hover边框颜色:RGBA(0,0,0,0.3)
按钮Hover边框半径:0 px
按钮Hover字母间距:1 PX
按钮盒阴影:见截图
框影水平位置:8 px
框影垂直位置:-8 px
阴影颜色:RGBA(0,0,0,0.2)
按钮字体:Poppin

定制填充:8%顶部,8%右边,8%底部,8%左

框影:见截图
框影水平位置:20 px
盒影垂直位置:20 px
阴影颜色:RGBA(0,0,0,0.2)

这是在我添加产品图片并将按钮文本更改为“立即购买”之后的样子。

让我们继续进行更多的设计调整。

第4部分:创建列背景

使用此设置,您可以通过向每个行列添加背景颜色,轻松地向每个内容块添加背景。这是可能的,因为我们对动作模块背景颜色的调用是透明的,允许列背景显示。此外,在图像后面的列背景下,您可以添加混合模式到您的图像模块,以创建更加丰富多彩的设计。

若要向列添加背景,请转到顶部行中的行设置并更新以下内容:

第1栏背景:#379e94
第2栏背景:#379e94
第3栏背景:#379e94
第4栏背景:#379e94

保存设置

继续使用右键单击选项复制行的样式,并将其添加到下面的第二行,以便传输所有新的背景色。

现在,我们可以做一些小的调整,我们的一个全球呼叫行动模块设计设置,以减轻文本和按钮,以很好地工作在较暗的背景。

转到对操作模块设置的调用,并更新以下内容:

文本颜色:光
按钮文本颜色:#379e94
按钮背景颜色:#ffffff
按钮边框颜色:RGBA(255,255,255,0)

第5部分:向全局图像模块添加过滤效果和混合

有了您的列背景颜色到位,您现在有一个颜色,以混合您的形象。这是一个伟大的方式,以添加颜色到您的图像,将匹配您的网页的颜色方案。

第一次改变图像边框颜色

由于我们将混合我们的图像模块与我们的列背景颜色,图像边框颜色也将混合和混乱的设计。因此,我们需要将图像模块的边框颜色从绿色更改为与调用动作模块的浅灰边框颜色相匹配。

阴影颜色:RGBA(0,0,0,0.2)

使用光度混合模式

要将背景颜色与图像混合,可以将亮度混合模式添加到图像模块设置中。另外,将亮度滤波器设置为88%,以使其稍微变暗。

亮度:88%
混合模式:光度

由于光产品图像不像这个效果那样工作,我使用了更深的景观图像来显示这一效果的力量。

调整新颜色的列背景色!

现在,通过调整列的背景色来更改内容块的整个颜色是多么容易。

使用Sepia过滤器

下面是通过将全局图像模块筛选效果中的一个调整为以下内容而创建的另一个示例设计:

亮度:73%
败血症:100%

使用深色背景的彩色道奇滤波器

下面是一个简单的示例设计,方法是向行列添加一个深灰色(#333)背景,并在图像模块上设置颜色道奇混合模式。

好吧,我现在得停下来,但我想你明白重点了。

最后思想

上海市高端网站设计使用选择性同步作为设计工具对网格布局进行调整是非常容易的。一旦设置正确,你就有能力调整整个布局,只需点击几下。本教程中创建的网格布局设计旨在进行教育和启发,因此即使您不关心这些示例,我也希望您能够对选择性同步作为一种设计工具有一个新的欣赏。

我期待着在评论中听到你的意见。

干杯!

 


关键词
最新推荐
联系电话 400-6065-301

微信咨询 寒总监