建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程

GG网络技术分享 2025-03-18 16:16 0


在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程插图

大家都知道WordPress默认的编辑器是Gutenberg古腾堡编辑器,这是一个用户友好的基于区块的编辑器,它为创建具有视觉吸引力的网页提供了一种流畅的编辑方法。在日常编辑文章的过程中,在顶部吸引用户注意力的方法之一是在标题中使用两种不同颜色。

本文将向您展示如何在Gutenberg古腾堡编辑器中创建两种不同颜色标题,而无需借助任何第三方插件的图文教程。

在古腾堡中创建两种不同颜色标题的步骤

第 1 步:添加标题文本

首先,您需要添加标题文本。进入古腾堡 WordPress 编辑器,创建新内容(页面/文章)或选择现有内容。然后,选择标题块,添加所需的文本,并根据自己的喜好调整样式。确保标题至少有两个单词。

在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程插图1

步骤 2:应用 HTML 标签

添加标题文字后,我们继续本教程的核心内容,应用简单的 HTML 标签制作两种不同颜色标题。

单击选项按钮 (⋮) -> 编辑为 HTML,导航到块工具栏。

在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程插图2

在本示例中,我们想让标题文字 "COLOR EVERYWHERE "的每个单词都有不同的颜色(见上图)。

请按照以下步骤操作:

  • 指定要使用不同颜色的单词/字母(例如,"COLOR "和 "EVERYWHERE")。
  • 在 EVERYWHERE 前输入<span style="color:#ff00bf;">
在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程插图3
在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程插图4

如上图所示,接下来转换为区块,一旦应用了简单的HTML标签,标题就会变成两种不同颜色。

您可以通过替换颜色的十六进制代码或输入任意颜色名称来更改颜色。在本例中,我们将十六进制颜色代码替换为 "green"(见下面的 GIF)。

在Gutenberg古腾堡编辑器中设置两种颜色标题图文教程插图5

就是这样。现在你已经在Gutenberg古腾堡编辑器中成功创建了一个两种不同颜色标题。不要忘记保存或发布您的文章。

最后总结

本文将介绍如何在 Gutenberg 中轻松创建两种不同颜色标题,在Gutenberg古腾堡编辑器中制作两种不同颜色标题非常简单,而且有助于为内容增添风格和独特性。通过使用 HTML 标签,您可以毫不费力地制作出引人注目的标题。基本只需借助 Gutenberg 的用户友好界面,即使是初学者也能很快制作出视觉效果极佳的两种不同颜色标题,让您的内容脱颖而出,给网站访客留下深刻印象。

标签:

提交需求或反馈

Demand feedback