如何在WordPress中设置图像背景

如何在WordPress中设置图像背景
带有其他元素的主页的 WordPress 背景图像。

在 WordPress 中添加背景图片的方法有很多。随着主题代码的变化,从基础到最高级。然而,我们很高兴推出一款用户友好的工具,非常适合没有编码和设计知识的网站管理员。 Citadela Pro插件 带有许多用于网站定制的功能和设置。

免费尝试 Citadela Pro 插件中强大的块、设置和功能。我们提供包含所有高级功能的 7 天试用版。您可以探索完美的工具,它允许您将背景图像添加到 WordPress 页面、帖子和自定义帖子类型。

Cluster 是 WordPress 中的一个古腾堡块,允许您添加背景图像。多功能元素使您能够更改 WordPress 的默认背景。您不仅可以添加背景图像,还可以将其与其他块组合。您将获得许多变化和多功能性。

结合 页面标题块,您可以轻松获得一个精美的网站。您可以在 WordPress 中添加更多古腾堡块并自定义背景图像。此外,您还可以保存一组块(例如可重复使用的块),并在网站上的任何位置添加主题。这样您就可以立即更改 WordPress 网站的后台。

如何使用古腾堡块在 WordPress 中添加背景图像

现在就开始

立即开始无风险试用。无需信用卡。

通过 Cluster 块的 WordPress 背景图像

我们向您介绍我们为 WordPress 古腾堡背景图像制作的方便块 - 集群块。它是我们自己的块组的一部分。 Citadela Pro插件有很多功能可以帮助您创建漂亮的网站。所有 AitThemes 自定义块均可在 Citadela Pro插件.

请阅读 集群块文档 进行详细设置。

集群块允许您将多个块分组为一个。您可以有效地处理整个集群组,因为它是一个块。簇宽度可以设置为整页宽度,这意味着您有超大的空间来添加各种块。

如果出现以下情况,簇将不会拉伸至全宽:

  • 您有一个活动侧边栏
  • 如果您使用的列会限制 Cluster 的空间

由于一些核心 WordPress 块只能与内容宽度对齐,因此 Cluster 块在构建网站时提供了更大的可变性。另一个很棒的功能是,您可以为 WordPress 设置背景图像,更改其颜色或设置背景图像叠加。因此可以将背景配置到网站设计中。

在这篇文章中,我们将向您展示:

如何添加簇块

集群块是高级块,仅在安装并激活后才可用 Citadela 块插件。安装插件后,Cluster 块将自动添加到 WordPress 块编辑器中,您可以立即开始使用它。

集群块可以添加到帖子和页面中。只需单击顶部栏中或编辑器桌面上任意位置的“+”符号即可。之后只需搜索 Cluster 块即可。

单击“+”将 Cluster 块添加到 WordPress 编辑器
单击“+”添加 Cluster 块

添加 Cluster 块的第二个选项是输入“/”并在其后键入块名称。然后簇块就可以使用了。

添加带有斜杠“/”的 Cluster 块
使用斜杠“/”添加 Cluster 块

使用 Cluster 对块进行分组

Cluster block的主要特点是将多个块组合为一个。让我们看看它是如何工作的。如果将 Cluster 块插入页面,您将立即看到一个占位符 “在此处插入更多块”。 如果单击它,您将获得所有可用块的列表。您还可以使用列表顶部的搜索栏搜索请求的块。

选择嵌套块的过程
选择和插入嵌套块的过程

所有嵌套块都将具有所有可用的默认选项和设置。例如,如果您插入图像块,您将可以选择上传图像或从媒体库中选择图像。

例如,使用 Cluster 块,您可以在网站上创建引人注目的部分来展示您最近的工作。从您的作品集中添加图像,然后在其下方设置背景图像。您刚刚创建了一个指向您的投资组合的良好链接。

嵌套在 Cluster 块中的图像块
在 Cluster 块的帮助下创建的投资组合网站

簇块还可用于创建有吸引力的产品展示。您可以将产品图片设置为部分背景并选择其颜色。 服务区 也可以嵌套在 Cluster 块内。

嵌套在 Cluster 块中的服务块
使用 Cluster 块中的 Service 块以更具吸引力的方式展示您的产品(及其功能)

多个块合二为一

如果要将多个嵌套块添加到 Cluster 中,可以使用 Columns 块。使用列块,您可以并排添加多个块。每列可以有不同的内容类型,例如图像、段落、列表或按钮。

多列与 Cluster 块结合的典型示例是一页网站。

嵌套在 Cluster 块中的列块
如何在一页网站中使用 Cluster block

工具栏中的基本设置:内容对齐选项

默认情况下,簇块宽度设置为内容大小。您可以在工具栏中更改此行为。有以下选项可用:

  • 内容大小 – 默认选项,簇块与内容具有相同的宽度。
  • 宽尺寸 - Cluster 内的内容比内容宽度更宽。
  • 全宽尺寸 - 在本例中,簇宽度是浏览器窗口从一侧到另一侧的宽度。

请务必注意,如果您当前活动的主题支持此设置,则它只会影响集群内容。所有嵌套块都可以根据其选项的可用性进行配置。

下载 Citadela WordPress 主题和插件

立即开始无风险试用。无需信用卡。

标题和分隔符颜色设置

标题颜色变化

从 WP 5.3 开始,您可以通过标题块切换标题的颜色。这是一个非常有用的功能 - 特别是如果您有深色布局和配色方案,最好将默认文本颜色(黑色)更改为较浅的颜色。

在新版本发布之前无法更改标题颜色,这导致其在深色底座上的可见性出现问题。因此,标题经常会与您添加的 WordPress 背景图像或照片混合在一起。现在您可以选择正确的标题颜色以使您的网站闪闪发光。

您网站上使用的分隔符的新颜色

当您向 WP 添加背景图像或任何其他类型的内容时,有时可能需要将其与网站的其余部分分开。为此,您可以使用称为分隔符的特殊块。通过插入分隔符,您可以:

  • 分离特定的块
  • 将整个文本分成较小的部分
  • 突出重要部分
  • 确保内容更好的可读性
  • 简化网站上的导航

此外,您现在可以使用更新的 WordPress 更改分隔线颜色。彩色分隔符非常适合完成您的网站配色方案。

如何在分组块下添加背景图像

Cluster 块的真正强大之处在于您可以在分组块下方添加背景图像并设置背景颜色。一切都可以在 WordPress 检查器中轻松配置。让我们看看如何做。

  1. 单击背景图像并激活“显示背景图像”功能。
  2. 单击“选择图像”。媒体库将打开。您可以选择现有图像或将新图像上传到您的库。
  3. 背景图像也可以设置为固定。这意味着如果您滚动页面,背景不会随内容移动,并且其位置将被固定。
  4. 您还可以使用“焦点选择器”选择应显示背景图像的哪一部分。还可以使用百分比选择图像的一部分。
如何在分组块下添加背景图像
如何添加背景图像的分步指南

现在就开始

立即开始无风险试用。无需信用卡。

背景叠加

Cluster 中的高级选项之一是背景图像叠加。您可以选择默认颜色之一或使用颜色选择器选择自定义颜色。还可以设置颜色不透明度。这些集群块设置可帮助您创建真正有吸引力的网站演示。

WordPress 背景图像叠加
设置背景叠加并更改其不透明度以创建引人注目的设计

核心中提供了新的组块

Group 块和 AitThemes Cluster 块有什么区别?

我们定制的 Cluster 块比 Group 块更早发布,并提供更复杂的解决方案。您可以使用组块来对多个块进行分组,但它的功能仍然有限。例如,您无法在块中设置颜色叠加 - 您只能选择图像周围而不是图像上方的基本背景颜色。

背景图像编辑在我们的 Cluster 块中是小菜一碟。

您可以上传到 WordPress 背景图像,为其设置背景颜色以及背景颜色叠加(也可以自定义叠加不透明度!)。只需几分钟。

4 对“How to set image background in WordPress”的思考

  1. 感谢ait主题对所有网站管理员的帮助
    你的网站很好

  2. 是否可以让访问您网站的访问者使用 Cluster 块从一系列图像中选择背景图像和覆盖图像?

    1. 你好约翰,

      感谢您对 Citadela 产品感兴趣。是的,为了设置背景,您可以选择不同的选项。详细信息可参见:https://www.ait-themes.club/citadela-doc/cluster-block/

      亲切的问候!
      兹拉特科
      艾特团队

评论已关闭。