WordPress Gutenberg编辑器的10个有用的技巧和技巧

已发表: 2025-04-17

Gutenberg编辑已经改变了人们使用WordPress的方式。它比旧的经典编辑器更视觉,基于块和灵活。但是,如果您是新手,即使您已经使用了一段时间,有些事情仍然会感到有些棘手。

好消息?有很多有用的技巧和技巧可以使事情变得更快,更轻松,更有趣。

在这篇文章中,我们将分享10个实用的Gutenberg技巧。这些将帮助您创建更好的内容,并在没有通常的挫败感的情况下完成更多工作。

WordPress Gutenberg编辑的演变

WordPress Gutenberg编辑

古腾堡(Gutenberg)于2018年12月首次在WordPress 5.0中引入。它取代了经典编辑,该编辑已经存在了多年。 Gutenberg背后的主要思想是通过基于块的系统使用户更多地控制其内容。

起初,许多用户不确定更改。界面感觉不同。花了一些习惯了。但是随着时间的流逝,古腾堡有了很多进步。它变得更快,更稳定,更灵活。

随着每个WordPress的更新,Gutenberg都获得了新功能。现在,您可以使用块构建整个页面布局。您可以重复使用自定义块。您甚至可以使用网站编辑器(用于块主题)设计标题,页脚和模板。

今天,古腾堡不仅仅是内容编辑。它已成为一个完整的编辑工具。每个版本都会变得更好。

WordPress Gutenberg编辑器的10个有用的技巧和技巧

Gutenberg提供的不仅仅是基本内容块。一旦学习了一些智能技巧,就可以更快地工作并创建看起来更好的页面而无需触摸任何代码。

这是一系列有用的技巧列表,可以提高您的古腾堡体验:

  1. 使用Slash命令快速插入块
  2. 将任何块变成可重复使用的块
  3. 拖放块以重新排列内容
  4. 使用列表视图以获取易于块导航
  5. 小组块将它们移动或造型
  6. 锁定块以防止意外变化
  7. 使用键盘快捷键节省时间
  8. 使用图案进行现成的布局
  9. 在页面之间复制和粘贴块
  10. 将自定义CSS添加到特定块

现在,让我们了解细节!

01。使用斜杠命令快速插入块

假设您正在写博客文章,并且您想在段落后立即添加图像。您将光标向下移动,击中Enter键,然后…伸手拿到鼠标,单击Little Plus图标,滚动浏览块选项,最后选择图像块。听起来很熟悉吗?

现在,让我们变得更聪明。

击中Enter后,只需立即键入前向斜杠( /),而不是单击所有这些。当您做的那一刻,出现了一个块列表。键入/image ,然后再次击中输入。完毕。您只是插入一个图像块而没有触摸鼠标。

此图显示了Gutenberg编辑器的斜线技巧

这个技巧不仅用于图像。尝试/heading/quote/table ,甚至/columns 。一旦习惯了它,就会感觉就像将命令输入增压写作工具一样。

它快速,平稳,并保持您的写作流程。没有更多的重点。只需键入并构建即可。

02。将任何块变成可重复使用的块

是否曾经编写要在多个帖子中重复使用的通话行动或通讯注册框?每次抄袭它并不理想。您调整一个,忘记更新另一个,而繁荣 - 您的网站最终获得了五个不同版本的同一内容。

这是可重复使用的块派上用场的地方。

假设您设计了一个完美的CTA部分。也许是标题,简短的句子和一个按钮。选择所有这些块,单击三点菜单(⋮),然后选择“添加到可重复使用的块”。给它一个名字,例如“ Post Pooter CTA”并保存。

可重复使用的块

现在,每次您撰写新帖子时,只需搜索可重复使用的块即可。一点击插入。这是最好的部分 - 如果您有史以来更新该块,则它在使用它的任何地方都会更改。

没有更多的矛盾。不再浪费时间。

就像拥有自己的自定义模板一样,随时准备就绪。

03。拖放块以重新排列内容

有时,您的内容不会像您想的那样流动

也许该图像在文本上方看起来更好。也许这句话在结尾处感觉更强大。 Gutenberg中的重新安排内容与拖放块一样容易。

这是它的工作方式。

悬停在任何街区上。您会在左侧看到一个六点手柄。抓住它,然后将块拖动到您想要的任何地方。想要移动由多个块制成的完整部分吗?首先将它们分组,然后将整个组拖动一个平滑的运动。

此图显示了WordPress Gutenberg编辑器的六个点尖端

这使您可以完全控制布局 - 没有切割,粘贴或处理任何混乱的代码。

感觉就像是使用构建块。移动东西,直到一切都合适。

简单的。视觉的。立即的。

04。使用列表视图进行轻松块导航

是否曾经构建了一篇长的博客文章,其中包含大量图像,文本,按钮以及几列?在某个时候,上下滚动以找到特定的块变成头痛。

这就是列表视图节省一天的地方。

单击编辑器顶部的左角中的三个堆叠线的小图标。这将打开一个面板,显示您帖子中的每个块。您会看到一个干净,结构化的轮廓 - 就像内容块的目录一样。

列表查看WordPress Gutenberg编辑器的技巧

您可以单击列表中的任何块以直接跳到它。您还可以直接从列表视图拖动块。是否需要选择一个组或列内的块?列表视图可让您立即找到它,不再狩猎。

使用复杂的布局或嵌套块时,它特别有用。

05。小组块移动或将它们造型

想象一下,您已经建立了一个带有标题,段落,按钮以及背景颜色的部分。看起来很棒。但是现在您想将整个内容移至页面上的另一个位置。一次一个街区?没有。太慢了。

只是分组。

选择要保持在一起的所有块。然后单击三点菜单,然后选择“组”。现在,这些块被包裹在一个单个容器中。

WordPress Gutenberg编辑的组块

您可以将它们作为一个单位移动。在小组中添加背景。调整填充。更改对齐。甚至一键重复整个部分。

组使复杂的布局简单。它们还可以使事情井井有条,尤其是当您在登陆页面或定制部分上工作时。

06。锁定块以防止意外变化

您的设计就像想要的方式一样。一切都完美排列。但是随后,在编辑时,您不小心删除了一个块或将某些内容移出位置。烦人,对吧?

这是解决方案:锁定块

单击任何块,打开设置(三点菜单),然后选择“锁定”。您可以防止运动,防止拆除或两者兼而有之。这样,没有人,包括您在内,可以不先解锁它就可以弄乱它。

古腾堡编辑的锁块

当您使用可重复使用的布局和共享页面或只想保护自己的辛勤工作时,这非常有用。

07。使用键盘快捷键节省时间

单击作品,但是键盘快捷键吗?那是下一个级别的效率。

与其每隔几秒钟移动鼠标每隔几秒钟,就可以学习一些快速的连击,您会浏览内容。例如:

  • Ctrl + Shift + D(Mac上的CMD):重复一个块
  • Ctrl + Alt + T:在上方插入一个块
  • ctrl + alt + y:在下面插入一个块
  • Shift + Alt + Z:删除一个块
  • /(前向斜线):立即打开块插入器

还有更多,但即使只有几个可以为您节省几分钟,尤其是当您定期构建长帖子或页面时。

就像知道秘密作弊代码一样。一旦您的手指记住了它们,您就会想知道没有它们的工作方式。

08。使用图案进行现成的布局

从头开始设计页面会感到不知所措。您知道您想要什么,但是Block到达那里需要时间。那就是模式进来的地方。

模式是预设的块布局。 WordPress默认包含一堆 - 例如英雄部分,推荐,CTA等。您只需选择一个并将其放入您的页面。完毕。

单击加号图标以添加新块。然后切换到“模式”选项卡。您会发现诸如文本,图像,列,标题之类的类别 - 您将其命名。选择一个,整个布局立即出现。

古腾堡编辑的模式

您可以编辑文本,替换图像和调整样式。但是结构已经存在。

这就像让设计师将入门套件交给您。伟大的部分。没有压力。没有空白页焦虑。

09。在页面之间复制和粘贴块

在一个页面上构建了一些不错的东西,并想要另一个东西吗?不要从头开始。只需复制并粘贴块即可。

这比您想象的要容易。

单击块(或一组块),然后击中CTRL + C (或Mac上的CMD + C )。转到您的另一页或帖子。单击您想要的位置,然后按Ctrl + V。繁荣 - 一切都像这样。

所有格式,样式,按钮,图像 - 一切都会出现。

是的,它甚至可以在浏览器选项卡上工作。因此,您可以并排打开两个帖子,并在几秒钟内将内容移动。

10。将自定义CSS添加到特定块

有时,内置样式不会削减它。您想要更独特的东西。这是Custom CSS发挥作用的地方。

Gutenberg使您可以将自定义CSS应用于各个块,因此您可以使内容的特定部分突出而不会影响整个页面。

这是这样做的方法:

  • 选择要自定义的块。
  • 在右侧的块设置中,找到高级部分。
  • 其他CSS类中,添加自定义类名称(例如, my-custom-style )。
  • 然后,转到主题中的WordPress自定义器或自定义CSS部分,然后使用该类添加样式(例如, .my-custom-style { color: red; } )。
这就是您可以使用Gutenberg编辑器添加其他CSS的方式

这样,您就不会对全球风格感到困惑,而只是为该区块量身定制它。

当您想要特定的按钮,标题或部分以具有不同的外观而不会影响其余内容时,这是完美的。

结论

有了这些技巧和窍门,您就可以掌握WordPress Gutenberg编辑器。从用斜杠命令加速工作流程到轻松添加自定义样式,Gutenberg为内容创建者提供了很大的灵活性。

请记住,关键是要尝试并找到最适合您风格的工具。无论您是创建简单的帖子还是复杂的布局,这些功能都将帮助您节省时间,保持井井有条并为您的网站增添个人风格。

如果您想将Gutenberg与Elementor进行比较,可以查看我们有关Elementor vs Gutenberg的博客文章,以了解谁导致了路线。

是否想分享您与此博客文章有关的反馈?请使用下面的评论框进行。我们很想知道您的反馈。小心!

订阅Wedevs博客

我们每周发送新闻通讯,肯定没有垃圾邮件