如何在古腾堡中创建具有总主题的英雄网站部分

Total WordPress 主题带有商业网站可能需要的一整套工具。

该主题通过 WordPress Customizer 为您提供可视化编辑和快速演示数据导入，这对于构建出色的首页特别有用。

如您所见，Total 的免费版本不会使用任何额外的 WordPress 页面构建器来锁定您，而是提供了一种 WordPress 原生的方式来设计您的网站。

随着基于块的 WordPress 编辑器 Gutenberg 的到来，任何 WordPress 主题，包括 Total，都可以进一步定制。 内容元素（块）的选择为我们提供了我们在 WordPress 核心中从未见过的自定义自由，这很难否认。

然而，一些块样式设置在默认编辑器中仍然非常有限。 因此，如果您正在使用新的 Gutenberg 编辑器和 Total ，希望构建和设计更好的内容，您会在本教程中找到一些有用的提示。

更准确地说，在这篇文章中，我们想展示一些示例，说明如何在 Gutenberg 中构建和自定义诸如 hero、subhero 和号召性用语部分等关键网站元素。 通常帮助企业的人：

• 创建介绍/欢迎网站部分
• 宣传重点产品或活动
• 专注于特定的投资组合项目或服务等。

为了增强 Gutenberg 的定制可能性，我们将使用我们推荐给 Total 主题用户的 Getwid WordPress Blocks 插件。 我们确信一些 Total 用户已经尝试过 Getwid。

但是对于那些想知道 Getwid 是什么的人，以下是简要说明。

简而言之，它是一个免费的古腾堡原生插件，带有迄今为止最大的类似高级块的库和一系列为古腾堡定制的挑选和粘贴设计。 这不是我们推荐它的唯一原因。

我们特别喜欢这个插件，因为它与默认的 Total 样式很好地融合在一起，允许您关闭不需要的任何块，并且功能非常丰富。

当您激活 Total 时，该插件会作为推荐插件弹出 - 这是一个临时解决方案，看看它是否适合我们的客户。

但是，您需要自己尝试一下，看看它是否是您的解决方案。 同时，让我们看一下我们设法创建的示例。

使用 Getwid 创建的英雄和号召性用语部分示例总计

我们在 Total 主题的免费版本中进行了这些测试，可以肯定地说几乎没有任何限制。

但是，总网站容器宽度选项是有限的，因此如果您正在寻找全屏沉浸式布局，您可能需要考虑 Total Plus。

首先，您几乎总是需要使用 Getwid WordPress 块的 Section块。 它是一个可以处理任意数量的任何其他块的容器。 因此，您的英雄部分可以显示任何类型的内容。

Section 容器的另一个突出之处是它为您提供了许多背景类型：图像、颜色、视频（来自您的 WP 媒体库或 YouTube）、多色渐变等等。

因此，在使用 Section 块设计网站区域时，您的主要任务是：

• 选择并自定义背景类型，使其上的内容保持可读和清晰。
• 按首选顺序插入所需的块。
• 调整间距（有可拖动的角度，就像在视觉构建器中设置内部和外部空间一样）。
• 可选：添加动画、形状分隔线和其他装饰元素。

现在让我们举个例子。

示例 1. 产品展示

此示例中的所有块都放置在 Section 块中：

1. 高级标题
2. 高级标题
3. 高级标题
4. 按钮组
5. 部分背景：图像（定位 > 右上角；大小 > 自动）

标题块允许您使用任何 Google 字体、文本大小、字体粗细等。按钮也有多种样式（填充或轮廓）。

可能发生的最大挑战是找到正确的背景图像并选择正确的图像位置，因为它会根据视口自动调整大小。

示例 2. 投资组合提取物

所有的块都放在 Section 块内：

1. 高级标题
2. 高级标题
3. 三列（段落、图像、图像、图像）
4. 部分背景：渐变

您还可以放置一个号召性用语按钮以链接到完整的投资组合页面。

示例 3. 功能或事件卡

在这样的英雄部分中，您可以展示产品、事件、服务、事物、人等。

高级标题块允许您选择任何字体：

在此示例中，我们使用了渐变背景和背景底部形状分隔线（Waves Multilayered）。

1. 两个高级标题
2. 段落
3. 按钮
4. 图片
5. 部分背景：渐变+形状分隔线

示例 4. 号召性用语部分

同样，您需要从 Section 块开始。 要像下面的示例那样放置标题，您可以使用 Getwid 模板库中的模板或从头开始创建模式。

这是一个非常简单的部分，带有背景图像、几个标题和一个集中的按钮。

1. 三个高级标题块
2. 按钮块
3. 部分背景：不透明的图像（大小>封面）

您还将享受使用可拖动角度调整内容对齐的容易程度：

通过将标题放在图像上来创建偏移布局也是一种趋势：

在 Getwid 中，您可以通过为文本行设置适当的背景图像和一些空白来实现这一点。

示例 5. 次要英雄部分

很多时候，子英雄部分会提供有关项目或个人的更多信息。 它适合展示您的简历、故事或主要目标。

作为视觉元素，我们使用了 Getwid 的 Image Stack Gallery 块，它带有多种样式。 但是，您可以将其替换为图像、视频或任何其他内容元素。

1. 两个高级标题
2. 段落
3. 按钮
4. 图像堆栈库块
5. 部分背景：纯色

示例 6. 视觉重音

图像库、滑块和视频是用于创建引人注目的部分的非常常见的视觉工具。

例如，您可以使用 Getwid 的 Media & Text Slider 块来构建带有可选文本内容的幻灯片：

1. 媒体和文本滑块
2. 部分背景：渐变+具有自定义高度的顶部和底部分隔线

还有许多基于帖子的 Getwid 块可以显示在滑块中（它们将自动从您的网站内容中获取）。 想要以滑块或网格/列表格式呈现一些最新或手动选择的帖子？ 它有一个块。

示例 7. 横幅

Getwid 带有一个方便的横幅块，它提供图像和文本默认容器。 它还可以选择动画效果，使您可以使带有横幅的部分更加动态。

该街区是临时销售和持续亮点的完美搭配。

1. 横幅
2. 部分背景：单色渐变

示例 8. 信息部分

如果您想以结构化和紧凑的方式显示更多信息，Getwid 为此提供了三个专用块：Tabs、Accordion 和 Toggle。

这是一个包含 Accordion 块和旁边的图像的两列布局：

这些块的独特之处在于能够在选项卡式小部件中包含任何块。 这意味着，除了文本之外，您还可以将图像、列表、视频、画廊、滑块添加到选项卡中。

还有更多块可以为您的营销部分添加独特的功能，例如用于构建信息图像部分的图像热点、用于服务的图标框、实时 Instagram 画廊提要等等。

您可以从空白的古腾堡页面构建和设计类似的部分，在总页面设置中选择所需的页面布局。

总结

您知道在免费的 Total 主题中使用 Gutenberg 和 Getwid 组合的最佳之处是什么吗？ 不，重要的不仅仅是块的数量。

更重要的是，您不需要拥有设计师的眼光（或开发人员的技能）来创建好看的内容。 有很多预制的皮肤、块状图案和现成的设计可以帮助您。 Getwid WordPress Blocks 对于那些使用免费版 Total 的人来说也是页面构建器的一个很好的替代品。

在块编辑器不够成熟之前，一个额外的古腾堡原生插件可能是一个很好的起点。

你试过古腾堡或Getwid吗？ 让我们在评论中知道。