莆田网络公司:4布局设计提示优化您的Divi Web内容

2019.04.29 |
标签

布局设计并不像在页面中添加文本和图像那样简单,而是希望得到最好的结果。一个出色的布局可以帮助吸引观众,并引导他们找到你内容中最重要的部分。值得庆幸的是,您可以使用大量的策略来简化设计过程。

在本文中,我们莆田网络公司将提供四个技巧来为您的网站创建一个平衡的布局,例如使用空白和重复重要的设计元素。自始至终,我们还将告诉您如何使用迪维功能把一些元素带到生活中去。我们开始吧!

为什么您的页面布局是重要的

您的页面布局可以是人与人之间的区别。离开你的网站几乎立即,或者坚持阅读你的内容。简而言之,正确的布局可以吸引访问者,引导他们到最重要的内容,并鼓励他们留在你的网站上。

当然,人们会宁愿花时间看一个设计精美的网站,而不是普通的网站。很简单,一个没有吸引力的网站就足以失去访问者的参与。

虽然获得网站访问者是一回事,但让他们在登陆时以某种方式行事完全是另一回事。最终,您希望您最重要的内容被消耗,并且您的行动呼吁(Cta)有待遵循。事实上,人类的头脑期待并想要一个CTA-所以你所要做的就是用正确的布局引导读者走向正确的方向。

优化Web内容的4种布局设计技巧

虽然这篇文章的技巧将涵盖无数的设计元素让你开始,也有无数的网站帮助你找到布局灵感。诸如阿瓦展示伟大的,高质量的例子-和偶数Pinterest可以成为灵感的源泉。至于小费,让我们来看看!

1。使用网格系统

莆田网络公司在web设计的上下文中,网格是一组可见的或虚构的横线和垂直线。作向导帮助您组织和安排您的内容。在绘制网格系统时,还可以结合其他设计技术,例如使用焦点第三条规则.

一个好的焦点,无论是图像的一部分还是文本块,都应该有助于吸引读者的注意力。它通常放在页面的中心,或者网格的中心部分。

第三条规则的基础是将页面分成三个垂直和/或水平的概念。但是,这并不一定意味着单独的内容部分必须出现在三列中,有些可能跨越两列。例如,许多网页-例如我们的博客-有一个侧边栏,占右第三,而主要文本跨越左和中三。

使用divi Builder使创建元素网格变得容易。例如,要应用三分之二规则,您可以创建三行,每一行有三列:

莆田网络公司

要创建此网格,首先进入DiviBuilder并单击插入栏:

莆田网络公司

在弹出窗口中,选择三列选项:

The Insert Columns screen with the three column option highlighted

接下来,在“复制”按钮上单击两次,您将有一个三乘三的网格,为您的内容做好准备:

The Divi Builder with the row copy button highlighted

当然,这并不是一个伟大布局的唯一元素。在哪里你指导读者也是至关重要的。

2。将内容结构为“Z-模式”或“F-模式”。

根据您显示的内容类型,大多数人以某种方式阅读网页。使用热图进行的眼睛跟踪研究表明,最常见的模式是F-模式和Z-模式。您可以利用这些知识来帮助读者了解页面中最重要的部分。

莆田网络公司当一个读者从左到右扫描你的网站的顶部,然后从上到下查看你的页面,这是一个F型。它们通常适用于更多的文本重的页面,比如博客文章,它展示了在内容中使用副标题的重要性。

相反,那些从左到右、对角线向下到底部,然后再从左到右扫描你的站点顶部的读者,据说是以Z模式阅读的。它们适用于更简单的页面,特别是那些带有CTA的页面。这就是为什么我们经常建议把你的CTA放在页面的右下角。当然,页面底部的其他信息也应该为读者提供足够的信息来吸引他们点击CTA。这个快芽主页就是一个很好的例子:

The Quicksprout homepage

徽标和导航菜单引导您越过页面顶部。然后将目光吸引到页面中间的粗体文本和面部图像,希望这将吸引您阅读销售副本。最后,明亮的白色地址栏引导你穿过主内容底部的CTA按钮。

在Divi中,模块化系统使创建F-模式和Z-模式变得简单.您可以从divi Builder若要创建一般布局和内容,请使用可视化生成器.

当然,CTA本身可点击也很重要。我们的diviCTA模块可以帮助说服读者点击:

A Divi CTA Module example

在这个模块中,您几乎有无限的选择来创建难以置信的CTA。您可以在其他选项中控制大小、字体和颜色,甚至可以把它们粘起来这样他们就被永久地塞住了。

3。重复重要的设计元素

元素重复是我们经常在设计中添加的东西。为副标题保持相同的字体和大小,或者在整个片段中使用相同的符号点样式,都是元素重复的常见例子。然而,它也可以扩展到图像,图形,颜色,空间关系,以及几乎任何你能想到的设计组件。

元素的重复为您的布局注入了一致性,它统一了各个组件,从而创建了一个更有凝聚力和吸引力的设计。它还可以帮助读者以最少的混乱浏览页面。例如,以缓冲区主页:

The Buffer homepage

这显示了在屏幕的焦点图像中重复的徽标。纸飞机也类似于标志上的纸张,使整个页面更有意义,看起来更有凝聚力。

复制Divi中的元素是非常容易的。只需导航到DiviBuilder中选定的元素,然后单击“复制”按钮复制该元素。在这里,您可以将元素拖放到页面的其他位置,并在不影响原始元素的情况下对其进行调整:

The Divi Builder with a module copy button highighted

类似地,您可以保存布局,以便将来在您的站点上创建一致性-稍后我们将有更多的介绍。

4。适当使用空白

空白-或者称为“负空格”-只是页面中不被内容占用的空白部分。空白的使用常常被忽视。许多设计师发现尝试尽可能多地插入信息是很有诱惑力的。然而,当谈到维持观众的参与时,似乎少真的可以多的适当使用空白是关键.

以下是适当使用空白的一些提示:

  1. 调整复制周围的边距。

    增加页边距可以帮助分离复制的各个部分。这使得页面看起来不那么杂乱,文本更容易阅读。
  2. 在段落之间添加空格。

    增加段落之间的间距可以分解文本,使较长的文章看起来不那么吓人。
  3. 调整行高和字母间距。

    您可以调整行和字母之间的空格,以确保您的文本尽可能可读。
  4. 用空白包围你的焦点。

    在焦点周围添加空白,如图像或标题,可以使其更加突出。

对于一个真实世界的例子,谷歌主页和其他网页一样是一个很好的例子-事实上,它把事情带到了极致:

莆田网络公司

苹果是另一家使用焦点(通常是产品图片和标题)的公司,其周围有大量的空白:

Apple's Mac Mini promotional page

divi可以通过允许在节、行和模块中调整页边距和填充来帮助您创建适当数量的空白。例如,若要调整行,请单击菜单按钮,它显示您需要的无数选项:

A section of the Row Module Settings screen

当模块中有文本时,通常有调整行高和文本间距的选项。例如,在文本模块,进入高级设计设置屏幕,在这些功能中,您将看到您有高度和间距选项:

A section of the Text Module Settings screen

你可以相应地调整它们,直到你高兴为止。您还可以选择使用VisualBuilder进行这些更改,以查看您的更改将如何实时显示。

最后,甚至更多空白,您可以使用分频器模块。这使您能够在各个模块之间创建一行或一些空白,几乎在页面上的任何地方都是如此。

Divi如何帮助您保持布局设计的一致性

一旦您完成了完美的布局,您可能不想只使用它一次。保存布局意味着您可以将其用于站点上的多个页面。这不仅节省了大量的时间和精力,而且在您的页面中创建了一种统一和熟悉的感觉,这有助于读者的体验。

这在Divi内部很简单。一旦您满意您的布局,选择保存到图书馆在Divi Builder的左上角:

The Divi Builder interface including the Save to Library button

在弹出窗口中,输入要用于新设计的名称,然后按下。存钱:

The Save To Library popup

若要检索布局以供将来使用,请选择来自图书馆的负载在divi Builder…中

The Divi Builder with the Load From Library button highlighted

…然后去从图书馆添加选项卡,并选择要使用的布局:

The Add From Library tab in the Load Layout screen

要编辑布局,可以从WordPress仪表板访问它们。选择迪维然后点击divi库若要查看保存的布局列表,请执行以下操作。

结语

您的布局选择是一个非常重要的组成部分,总体设计的网站。然而,这可能是一个严重的压倒性任务,特别是如果你没有计划投入。

值得庆幸的是,这一领域已经得到了广泛的研究,并且有大量的策略可以用来确保最完美的结果。这篇文章提供了四个技巧,帮助您为您的网站创建完美的布局设计。让我们快速回顾一下:

  1. 使用网格系统。
  2. 将内容构造为Z-模式或F-模式。
  3. 重复重要的设计元素。
  4. 适当地使用空白。


相关推荐

莆田公司网站设计:如何将标志添加到额外的辅助菜单中
 

莆田公司网站设计:如何将标志添加到额外的辅助菜单中

不久前,我创造并放弃了我们的第一个免费额外类别布局包。反应很好,所以我已经开始了我的下一个工作:一个视频博客的额外类别布局。在创建它的过程中,莆田公司网站设计意识到我在演示站点上做的事情可能是社区也想...
2019.04.29
莆田制作网站:如何从WordPress文章中删除作者和日期信息
 

莆田制作网站:如何从WordPress文章中删除作者和日期信息

默认情况下,大多数WordPress主题在已发布的博客文章中显示一组元数据。大多数情况下,作者和日期是突出的,类别和标签也经常出现。这个信息当然是有用的,但是在某些情况下,您可能希望删除作者和日期。(例如,较...
2019.04.29
莆田网站开发:如何为WordPress主题的导航菜单设置样式
 

莆田网站开发:如何为WordPress主题的导航菜单设置样式

顾名思义,你的WordPress导航菜单是你的访问者引导他们通过你的网站的一种方式。因此,至关重要的是,您的菜单很容易找到,甚至更容易使用。然而,尽管确保用户友好是很重要的,但您的菜单也需要看起来很好。莆田网...
2019.04.29
莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素
 

莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素

拼贴制作工具使您能够产生美丽的视觉创作,显示蒙太奇的照片或图形在一个图像。您可以轻松地添加效果,过滤器,文本,和更多,以产生惊人的拼贴在任何时候。这些突出的图片可以在整个网络上使用,以推广您的网站,吸...
2019.04.29
莆田网络公司:4布局设计提示优化您的Divi Web内容
 

莆田网络公司:4布局设计提示优化您的Divi Web内容

布局设计并不像在页面中添加文本和图像那样简单,而是希望得到最好的结果。一个出色的布局可以帮助吸引观众,并引导他们找到你内容中最重要的部分。值得庆幸的是,您可以使用大量的策略来简化设计过程。在本文中,我...
2019.04.29
莆田做网站:如何有信心地把一个完整的网站交给你的客户
 

莆田做网站:如何有信心地把一个完整的网站交给你的客户

辛苦的工作结束了。您已经编写了代码,您已经对…进行了设计调整你客户的网站准备好了。只剩下一件事要做…把完整的网站交给你的客户。但…你怎么做到的?你只是给他们发电子邮件,告诉他们用户名和密码,然后说:“...
2019.05.06

最新文章

莆田做网站:如何有信心地把一个完整的网站交给你的客户
 

莆田做网站:如何有信心地把一个完整的网站交给你的客户

辛苦的工作结束了。您已经编写了代码,您已经对…进行了设计调整你客户的网站准备好了。只剩下一件事要做…把完整的网站交给你的客户。但…你怎么做到的?你只是给他们发电子邮件,告诉他们用户名和密码,然后说:“...
2019.05.06
莆田网络公司:4布局设计提示优化您的Divi Web内容
 

莆田网络公司:4布局设计提示优化您的Divi Web内容

布局设计并不像在页面中添加文本和图像那样简单,而是希望得到最好的结果。一个出色的布局可以帮助吸引观众,并引导他们找到你内容中最重要的部分。值得庆幸的是,您可以使用大量的策略来简化设计过程。在本文中,我...
2019.04.29
莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素
 

莆田网页设计:15个拼贴制作工具,用于创建有趣的视觉元素

拼贴制作工具使您能够产生美丽的视觉创作,显示蒙太奇的照片或图形在一个图像。您可以轻松地添加效果,过滤器,文本,和更多,以产生惊人的拼贴在任何时候。这些突出的图片可以在整个网络上使用,以推广您的网站,吸...
2019.04.29
莆田网站开发:如何为WordPress主题的导航菜单设置样式
 

莆田网站开发:如何为WordPress主题的导航菜单设置样式

顾名思义,你的WordPress导航菜单是你的访问者引导他们通过你的网站的一种方式。因此,至关重要的是,您的菜单很容易找到,甚至更容易使用。然而,尽管确保用户友好是很重要的,但您的菜单也需要看起来很好。莆田网...
2019.04.29
莆田制作网站:如何从WordPress文章中删除作者和日期信息
 

莆田制作网站:如何从WordPress文章中删除作者和日期信息

默认情况下,大多数WordPress主题在已发布的博客文章中显示一组元数据。大多数情况下,作者和日期是突出的,类别和标签也经常出现。这个信息当然是有用的,但是在某些情况下,您可能希望删除作者和日期。(例如,较...
2019.04.29
莆田公司网站设计:如何将标志添加到额外的辅助菜单中
 

莆田公司网站设计:如何将标志添加到额外的辅助菜单中

不久前,我创造并放弃了我们的第一个免费额外类别布局包。反应很好,所以我已经开始了我的下一个工作:一个视频博客的额外类别布局。在创建它的过程中,莆田公司网站设计意识到我在演示站点上做的事情可能是社区也想...
2019.04.29

热门推荐

选择您希望莆田网站设计成品的风格偏好,让我们通过精确的分析与筛选,为您推荐合适的版式布局,
为此,您可以节省最基本的沟通时间,
让我们把有限的时间,充分的用在对行业的分析及您企业网站建设的自身分析上吧
联系电话 400-6065-301

建站咨询 星星-总监

投诉