分类： WordPress设计入门

介绍

采用以区块为先的思维进行设计。在本课中，我们将探讨 WordPress 区块主题的区块组合。学完本课后，你将理解如何以区块为先的思维进行设计，为你的网站创建模块化且可复用的组件。

模块化

在 WordPress 区块主题的世界中，我们需要将思维从传统的页面布局转向更模块化的方法。以区块为先的设计意味着将你的网站分解成更小、可复用的组件，这些组件可以混合搭配以创建多样化的布局。把区块想象成乐高积木。就像你可以用简单的乐高积木搭建复杂的结构一样，你也可以使用基础区块创建复杂的网站设计。这种方法不仅简化了你的设计流程，还增强了整个网站的一致性。

区块

区块让你无需编写一行代码就能创建复杂的设计。区块连接到一个名为 theme.json 的文件，该文件设置了默认样式。如果你在站点编辑器中并选择全局样式，你可以使用可视化控件调整这些默认设置，从而在保持设计一致性的同时维持灵活性。区块还遵循开放网络标准，让你可以在不同平台之间携带它们。此外，区块的结构化特性也使它们与 AI 工具兼容。这为自动化设计建议开启了可能性。

可复用组件

接下来，让我们看看一些你可能创建为模式或可复用组件的典型设计。区块模式或可复用组件是一组区块，你可以将其插入到你的网站中，并用你自己的内容进行自定义。让我们看几个例子。第一，特色项目。这可以是产品亮点、关键博客文章或定价表。设计一次，然后在你的整个网站中使用它。第二是新闻通讯注册。创建一个视觉吸引人的新闻通讯注册表单，可以轻松放置在不同页面上。第三是客户评价。设计一个用于客户引言的区块，可以单独使用或分组使用，或者最后，创建引人注目的行动号召。

区块组合原则

接下来，让我们看看应用区块组合原则，这将帮助你为你的 WordPress 区块主题创建一个连贯且灵活的设计系统。从小处着手，从你的样式书中的基本元素开始。从文本、图像和按钮等基础元素开始。这些构成了你设计系统的基础。然后开始构建。将这些基本元素组合成更复杂的区块。在这个例子中，我正在创建一个媒体和文本模式，然后我会将其保存为不同步模式，然后设计布局。同时，记得考虑响应式设计。设计你的区块，使其在所有屏幕尺寸上都能良好运行。让我们看一个列区块的例子，它允许在移动设备上堆叠。在移动设备上堆叠指的是像图像、文本块或按钮这样的内容元素在移动设备上查看时如何垂直重新排列。然后，你可以预览以检查你的设计在平板和移动设备上的效果。让我们看看这个模式的结构，了解我们使用了哪些区块来构建它。顶部是组区块，即我们的容器区块，然后是列区块。在左列中，我们有一个段落区块、一个标题区块、另一个段落区块，然后是按钮区块或行动号召，而在右列中，我们添加了一个图像区块。

结论

总之，当你采用以区块为先的思维时，你不仅仅是在设计页面，而是在创建一个灵活的组件系统。记住，关键是要以模块化的方式思考，并使用区块和模式为可复用性进行设计。

介绍

在本课中，我们将学习如何将样式手册作为设计指南来使用。课程目标是理解样式手册的目的和功能，并能够浏览和利用样式手册来预览和优化设计选择。

样式手册

要查看样式手册，请前往外观，点击编辑器，然后进入样式。在左侧，我们将看到样式变体和调色板，然后当你点击眼睛图标时，你将能够查看样式手册。WordPress 样式手册是一个强大的工具，它弥合了传统设计实践与 WordPress 基于块的编辑系统之间的差距。你可以把它想象成你的数字风格指南，展示你网站的不同块或组件将如何呈现以及相互交互。

要打开样式，请点击铅笔图标，现在我们将在左侧看到样式手册，在右侧看到全局样式设置。样式手册与 WordPress 的全局样式功能紧密相连，我们将在未来的课程中深入探讨。这些被称为样式部分。目前，重要的是要理解样式手册是预览你在全局样式中做出的设计决策的一种不同方式。当你更新全局样式时，你可以直接在样式手册中查看更改，从而专注于特定块；或者你也可以直接在站点编辑器中查看你在全局样式中做出的更改，从而在模板或页面中看到这些更改。因此，在下一个示例中，我们可以更改网站的背景颜色，并查看它在主页上的显示效果。所以，如果你的网站内容不多，样式手册会很有帮助。例如，即使你还没有包含画廊的文章，你也可以对画廊进行样式设置。

样式手册的组织方式

样式手册分为几个选项卡：首先是文本，在这里你可以预览标题、段落、列表和其他文本元素。然后我们进入媒体，在这里你可以看到图像和其他媒体将如何显示。第三是设计，查看按钮、列和其他布局元素。接下来是小工具，例如日历、最新文章甚至社交图标。最后是主题，包括站点徽标、站点标题、查询循环和特色图像等块。

实际示例

在设计时，你可以使用样式手册来可视化不同元素上的设计选择，确保设计系统的一致性，尝试不同的样式变体，并识别需要改进的区域。那么，让我们来看一些实际示例，了解如何将样式手册用作风格指南并测试你的设计选择。

首先，当你选择样式手册时，你可以测试和预览主题附带的样式变体。或者你可以开始添加自己的样式。所以，我将前往样式手册，选择排版，然后你可以安装或上传自定义字体。我已经添加了两种自定义字体：Frauncis 和 Rubik。现在我们可以更新字体了。所以，我将把文本字体改为 Frauncis，更新行高，然后将标题字体改为 Rubik。然后我们可以立即在样式手册中看到更改，当你保存时，你会看到这些更改是全局性的。接下来，你可以进一步自定义 H1 到 H6 标题。在这个示例中，我将更改所有标题的大小。对于 H3 和 H4，我还会将外观改为浅色。当你更新这些更改时，你可以在左侧的样式手册中预览。当然，你可以对所有单独的块执行此操作。

然后，我将选择媒体，并将图像块的圆角半径更改为 10 像素，这也会应用于画廊块。接下来，我们可以探索颜色。所以，我将前往颜色，点击调色板，然后你会注意到你可以添加自己的自定义调色板。我将添加一些颜色。第一种是深绿色。当我的其他颜色就位后，我将返回元素，更新背景颜色、文本颜色、按钮块的颜色以及标题颜色。然后我们可以预览更改，并进一步自定义块，例如，根据我们的设计需求设置按钮块的样式。在整个过程中，你会不断参考样式手册，以确保所有元素和谐地协同工作。

结论

总之，样式手册是你的视觉指南。用它来实验、优化和完善你的设计。

简介

欢迎来到为设计师准备的 WordPress 快速展示。WordPress 是创意自由的理想平台。无论您是经验丰富的设计师还是刚刚起步，WordPress 都能为您提供将想法变为现实的工具。

WordPress 工具

凭借其强大的块编辑器、丰富的模式库和站点编辑器功能，WordPress 让您无需编写任何代码即可设计出精美的网站。站点编辑器允许您使用块来设计网站的每个方面，从页眉到页脚。全局样式帮助您在整个站点中定义一致的设计。设置颜色、布局和字体，以确保统一的视觉效果。您可以轻松地从 Google Fonts 或任何其他字体库上传网络字体。直观的样式手册让您控制单个块的外观，包括标题和按钮等交互元素。从自定义布局到复杂的排版和动态媒体，您可以创建展示独特风格和愿景的网站。使用可重复的区块或模式，轻松地将设计元素应用到网站的不同区域。

插件和块

通过插件扩展网站的功能。例如，您可以使用插件向网站添加表单、高级图库甚至滑块。您还可以使用网格块创建像这样的独特设计。或者选择一种优先考虑直观且可访问用户体验的简洁现代设计。封面块还允许显示带有叠加文本的图像。它通常用于页眉、横幅或分区分隔线，让您添加媒体和内容的组合，并具有可自定义的样式。查询循环块支持强大的内容分段，为新闻网站、杂志和内容密集型块提供复杂的布局。

结论

WordPress 允许您在制作创新设计和表达创意技能时利用各种块。开始使用这个为超过 40% 的网站提供支持的开源平台进行设计。