如果您熟悉 ElegantThemes，你会知道他们最受欢迎的主题是 二。这是迄今为止最灵活、最成功的保费 WordPress主题 周围有无数的在线教程、提示和技巧，介绍如何优化、管理和根据您的需求优化它。今天我们将讨论“优化您的布局设计的 4 个技巧” 优雅的主题‘迪维内容’。
布局设计并不只是向页面添加文本和图像并希望得到最好的结果那么简单。出色的布局有助于吸引观看者并引导他们到达内容中最重要的部分。值得庆幸的是，您可以采用多种策略来简化设计过程。
在本文中，我们将提供为您的网站创建平衡布局的四个技巧，例如使用空白和重复重要的设计元素。在整个过程中，我们还将告诉您如何使用 Divi 的功能来使一些元素变得栩栩如生。让我们开始吧！
为什么页面布局很重要
您的页面布局可能会决定人们是立即离开您的网站，还是继续阅读您的内容。简而言之，正确的布局可以吸引访问者，将他们引导至最重要的内容，并鼓励他们留在您的网站上。
当然，人们宁愿花时间浏览设计精美的网站，也不愿浏览简单的网站。很简单，一个没有吸引力的网站足以失去访问者的参与度。
虽然吸引网站访问者是一回事，但让他们在登陆后以某种方式行事则完全是另一回事。最终，您希望最重要的内容能够被消费，并且您的号召性用语 (CTA) 得到遵循。事实上，人类的大脑实际上期望并想要 CTA - 因此您所要做的就是用正确的布局引导读者朝正确的方向前进。
优化 Web 内容的 4 个布局设计技巧
虽然本文中的提示将涵盖无数的设计元素来帮助您入门，但还有许多网站可以帮助您找到布局灵感。 Awwwards 等网站展示了精彩、高质量的示例，甚至 Pinterest 可以成为灵感的源泉。至于小技巧，我们一起来看看吧！
1.使用网格系统
在网页设计中，网格是一组可见或想象的水平和垂直线，可作为指导来帮助您组织和排列内容。在绘制网格系统时，您还可以结合其他设计技术，例如使用焦点和三分法则。
一个好的焦点，无论是图像的一部分还是文本块，都应该能够吸引读者的注意力。它通常放置在页面的中心或网格的中心部分。
三分法则基于将页面垂直和/或水平分成三部分的概念。然而，这并不一定意味着单独的内容部分必须出现在三列中，有些可能跨越两列。例如，许多网页（例如我们的博客）都有一个占据右侧三分之一的侧边栏，而正文则占据左侧和中间三分之一。
使用 Divi Builder 可以轻松创建元素网格。例如，要严格应用三分法，您可以创建三行，每行三列：
要创建此网格，首先进入 Divi 生成器并单击 插入列：
在弹出窗口中选择三列选项：
接下来，点击复制按钮两次，您将获得一个三乘三的网格，准备好您的内容：
当然，这并不是优秀布局的唯一元素。引导读者的方向也很重要。
2.以“Z-模式”或“F-模式”构建内容
根据您显示的内容类型，大多数人都会以某种方式阅读网页。使用热图的眼动追踪研究表明，最常见的模式是 F 模式和 Z 模式。您可以利用这些知识来引导读者到达页面最重要的区域。
当读者从左到右浏览您网站的顶部，然后从上到下查看您的页面时，这就是 F 模式。它们通常适用于文本较多的页面，例如博客文章，它展示了在内容中使用副标题的重要性。
相比之下，如果读者从左到右浏览网站顶部，然后沿对角线向下浏览到底部，然后再从左到右浏览，则被认为是在以 Z 型模式阅读。它们适用于较简单的页面，尤其是带有 CTA 的页面。这就是为什么通常建议将 CTA 放在页面的右下角。当然，页面底部的其他信息也应该为读者提供足够的信息来吸引他们点击 CTA。 Quick Sprout 主页就是一个很好的例子：
徽标和导航菜单引导您穿过页面顶部。然后，眼睛会被页面中间的粗体文字和脸部图像所吸引，这有望吸引您阅读销售副本。最后，亮白色的 URL 栏将引导您穿过主要内容的底部，到达 CTA 按钮。
在 Divi 中，模块化系统使创建 F 图案和 Z 图案变得简单。您可以从 Divi Builder 创建您的总体布局和内容，然后使用 Visual Builder 实时调整它。
当然，CTA 本身可点击也很重要。我们的 Divi CTA 模块可以帮助说服您的读者点击：
在这个模块中，您几乎有无限的选择来创建令人难以置信的 CTA。您可以控制大小、字体和颜色等选项，甚至可以使它们具有粘性，以便它们永久固定到位。
3.重复重要的设计元素
重复元素是我们经常不假思索地添加到设计中的东西。保持副标题相同的字体和大小，或在整篇文章中使用相同的项目符号样式，都是元素重复的常见示例。然而，它也可以扩展到图像、图形、颜色、空间关系以及几乎任何你能想到的设计组件。
元素重复为您的布局注入了一致性，并且它统一了各个组件以创建更具凝聚力和吸引力的设计。它还可以帮助读者以最小的混乱浏览页面。以 Buffer 的主页为例：
这显示了屏幕焦点图像中重复的徽标。纸飞机也类似于徽标中的纸张，使整个页面有意义并且看起来更有凝聚力。
在 Divi 中复制元素非常简单。只需导航到 Divi Builder 中您选择的元素，然后单击复制按钮即可复制该元素。从这里，您可以将元素拖放到页面上的其他位置，并在不影响原始元素的情况下对其进行调整：
同样，您可以保存布局以供将来使用，以在整个网站上保持一致性 - 我们稍后将对此进行更多介绍。
4.适当使用空白
空白——也称为负空间——只是页面上未被内容占据的空白部分。空白的使用常常被忽视。许多设计师发现尝试塞入尽可能多的信息很诱人。然而，当谈到保持观众参与度时，似乎少即是多，而适当使用空白是关键。
以下是适当使用空白的一些提示：
- 调整副本周围的边距。 增加页边距大小有助于分隔副本的各个部分。这使得页面看起来不那么混乱，文本更易于阅读。
- 在段落之间添加空格。 增加段落之间的间距可以分解文本，并使较长的文章看起来不那么令人生畏。
- 调整行高和字母间距。 您可以调整行和字母之间的间距，以确保文本尽可能可读。
- 用空白包围你的焦点。 在焦点（例如图像或标题）周围添加空白可以使其更加突出。
举一个现实世界的例子，谷歌主页就是一个很好的例子——事实上，它把事情推向了极端：
Apple 是另一家使用由大量空白包围的焦点（通常是产品图片和标题）的公司：
Divi 可以帮助您调整节、行和模块中的边距和内边距，从而创建适量的空白。例如，要调整行，请单击 菜单 按钮，它显示您需要的无数选项：
当模块中有文本时，通常可以选择调整行高和文本间距。例如，在文本模块中，进入 高级设计设置 屏幕，在功能中您会看到有高度和间距选项：
您可以相应地调整它们，直到您满意为止。您还可以选择使用 Visual Builder 进行这些更改，以实时查看更改的外观。
最后，即使 更多 空白区域，可以使用 Divider 模块。这使您可以在页面上几乎任何位置的各个模块之间创建一条线或一些空白。
创新中心 Divi 可以帮助您保持布局设计的一致性
一旦设计出完美的布局，您可能不想只使用一次。保存布局意味着您可以将其用于网站上的多个页面。这不仅节省了大量的时间和精力，而且还能在页面上营造一种统一和熟悉的感觉，从而有助于读者的体验。
这很容易在 Divi。对布局感到满意后，选择 保存到图书馆 在 Divi Builder 的左上角：
在弹出窗口中，输入您想要用于新设计的名称，然后点击 保存:
要检索您的布局以供将来使用，请选择 从库中加载 在 Divi Builder 中...
...然后转到 从库添加 选项卡，然后选择您要使用的布局：
要编辑布局，您可以从 WordPress 仪表板访问它们。选择 迪维， 并点击 迪维图书馆 查看已保存布局的列表。
结论
您选择的布局是网站整体设计的一个非常重要的组成部分。然而，这可能是一项非常艰巨的任务，尤其是如果您没有计划就投入其中。
值得庆幸的是，这个领域已经得到了广泛的研究，您可以采用多种策略来确保获得最佳结果。本文提供了四个技巧来帮助您为您的网站创建完美的布局设计。让我们快速回顾一下：
- 使用网格系统。
- 以 Z 模式或 F 模式构建内容。
- 重复重要的设计元素。
- 适当使用空白。
[su_button url=”https://www.toptut.com/elegantthemes” icon=”icon: cloud-download”]立即获取 Divi！[/su_button]