标签: 古腾堡教程

  • 古腾堡编辑器教程:如何使用WordPress画廊区块

    古腾堡编辑器教程:如何使用WordPress画廊区块-1

    当您想将单个媒体文件插入WordPress网站上的文章或页面时,了解如何使用图片区块会派上用场。但是,如果您想添加一组照片怎么办?为此,您可以使用画廊区块

    WordPress画廊区块可以轻松快捷地将多个图像添加到WordPress文章和页面。在本教程中,我们将解释画廊区块是什么以及它是如何工作的。我们还将提供一些提示和最佳实践,以便在您的网站上有效地使用它。

    如何将画廊区块添加到页面或文章

    要将画廊区块添加到WordPress网站,首先导航到任何页面或文章(新的或现有的)。接下来,单击“添加块”按钮 – 加号 (+) 图标 – 并搜索“画廊”:

    古腾堡编辑器教程:如何使用WordPress画廊区块-2 您可以单击画廊区块以将其插入,或将图标拖放到编辑器中。或者,您可以直接在编辑器中输入“/gallery”,然后按 Enter键。

    插入画廊区块后,您将有几个添加照片的选项。您可以单击上传按钮从计算机中选择图像,或选择媒体库选择已上传到您网站的照片:

    古腾堡编辑器教程:如何使用WordPress画廊区块-3 使用任一选项,您都可以搜索并选择要使用的所有照片。之后,它们将出现在区块中:

    古腾堡编辑器教程:如何使用WordPress画廊区块-4 如您所见,顶部工具栏中有一个选项可以调整块的对齐方式,右侧菜单中还有各种设置。让我们仔细看看每个选项是什么以及如何使用它们。

    画廊区块设置和选项

    在画廊区块的工具栏中,您可以单击对齐图标来更改图库在页面上的位置。默认为左对齐,但您可以将区块移动到页面的右侧或中心:

    古腾堡编辑器教程:如何使用WordPress画廊区块-5 您还可以选择全幅或宽幅- 后者会将画廊扩展到主题的典型内容部分宽度之外。如果您单击三个垂直点,您会发现一些其他选项,包括以下选项:

    • 复制区块
    • 在当前区块之前或之后插入另一个区块
    • 移动画廊区块
    • 作为HTML编辑
    • 将画廊区块添加至可重用

    画廊区块最有用的事情之一是它不仅让您将多张照片添加到您的WordPress页面或同时发布。您还可以使用它根据自己的喜好排列这些图像。例如,您可以自定义包含的列数和画廊中图像的大小。

    您可以在右侧菜单的画廊设置部分下更改画廊列的数量:

    古腾堡编辑器教程:如何使用WordPress画廊区块-6 要更改列数,您可以使用滑块或在文本字段中输入所需的值。您还可以使用裁剪图像切换选项:

    古腾堡编辑器教程:如何使用WordPress画廊区块-7 默认情况下启用此设置,以便均匀裁剪图像。但是,如果您将其关闭,图像将自动以其原始版本显示。

    在链接到下拉菜单下,您可以选择将画廊超链接到附件页面或媒体文件。使用图像尺寸下拉菜单,您可以调整照片的尺寸,选项包括缩略图、 全尺寸

    最后,通过单击图库中的单个图像,您会发现更多选项:

    古腾堡编辑器教程:如何使用WordPress画廊区块-8 如果要编辑单张照片,只需单击铅笔图标即可。您可以选择X图标将其从画廊区块中完全删除。要在照片系列中向前或向后移动,您可以使用箭头按钮。

    有效使用画廊区块的提示和最佳实践

    现在我们已经介绍了画廊区块的基础知识,您已经准备好学习如何有效地使用它。您可以牢记一些最佳实践,以充分利用此WordPress功能。

    首先,我们建议确保在插入画廊区块后启用裁剪图像功能。当您拥有各种大小和形状的图像时,此选项特别有用 – 默认情况下有时会显得凌乱。

    当您启用此功能时,它可以确保图库中的所有图像看起来都是统一的。这有助于使其看起来更专业、更有条理和美观。

    接下来,确保您上传到WordPress画廊的每张图片都经过适当优化非常重要。这包括:

    遵循这些图像优化最佳实践有助于提高您网站的性能。它还可以提高您的搜索引擎排名。

    最后,您可以考虑为画廊中的每张图片添加标题。这有助于在访问者浏览时向他们提供必要的上下文和背景信息。

    关于画廊区块的常见问题

    此时,您应该牢牢掌握Gallery块以及如何使用它。为确保涵盖所有基础知识,让我们看看有关此元素的一些常见问题。

    在哪里可以找到WordPress中的画廊区块?

    要找到画廊区块,请导航到任何文章或页面。接下来,单击加号 (+) 图标并在搜索字段中键入“画廊”。只需单击画廊选项,或将其拖放到编辑器中即可插入区块。或者,您可以通过直接在编辑器中键入“/gallery”,然后键盘上的Enter来找到画廊区块。

    画廊区块有什么作用?

    画廊区块可以让你在一个位置添加多张照片到您的文章。您可以直接在WordPress区块编辑器中以美观的方式轻松调整大小和排列它们。例如,您可以决定要使用的列数并调整图像的大小。

    可以在WordPress的任何地方添加画廊区块吗?

    您可以将画廊区块添加到任何页面或在您的WordPress网站上发布。此外,您可以使用WordPress小工具在站点的其他区域(例如页脚)中添加画廊区块。

    小结

    将图像插入WordPress文章或页面的过程非常简单。但是,有时您可能希望将多张照片分组并一次性添加所有照片。在这种情况下,您可以利用画廊区块的优势。

    正如我们在这篇文章中所讨论的,您可以轻松地将此区块插入文章和页面(以及通过小工具的侧边栏和页脚区域),以轻松地一次上传和排列多个图像。此区块可让您根据自己的喜好无缝调整照片大小和组织照片。您可以使用它来增强页面的整体外观和感觉,而无需退出编辑器或使用第三方画廊插件

  • 古腾堡编辑器教程:如何使用Twitter嵌入区块

    古腾堡编辑器教程:如何使用Twitter嵌入区块-1

    WordPress的Twitter嵌入区块可让您在WordPress文章和页面中嵌入Twitter推文。虽然这仅适用于公开推文,但知道您不需要Twitter帐户即可使用此功能会很有帮助。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-2

    想要在您的WordPress文章或页面中嵌入推文的原因有很多:

    • 为您的网站或博客内容添加社交资料
    • 与其他人互动,无论他们是行业专家还是粉丝
    • 丰富您的内容,使其看起来更具吸引力并提供更多信息
    • 用现实生活中的例子来支持你所说的

    在本教程中,我们将向您介绍如何将Twitter嵌入区块添加到WordPress文章或页面,包括该区块包含的所有不同选项。我们还将介绍一些提示、最佳实践和常见问题解答,以帮助您顺利上路。

    如何将Twitter嵌入区块添加到文章或页面

    查找推文的URL

    找到您要嵌入的推文。要获取特定推文的链接,您有三个选项:

    1. 将鼠标悬停在推特名称右侧的空白处,然后单击以在其自己的页面中打开推文。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-3

    2. 右键单击​​时间或日期戳,然后选择复制链接(或类似)。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-4

    3. 单击推文窗口底部的向上箭头。这将打开一个菜单,将链接复制到推文可能是选项之一。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-5

    在WordPress中添加Twitter嵌入区块

    使用Gutenberg区块编辑器,添加Twitter嵌入区块。将鼠标悬停在页面上的空白区域上,您会看到一个黑色框内的白色加号(当您将光标移到它上面时,框会变成蓝色,如下图所示)。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-6

    单击该加号将显示您可以添加到WordPress文章或页面的所有区块。在搜索框中输入“Twitter”,然后选择出现的Twitter嵌入区块。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-7

    这会将Twitter嵌入区块添加到您的WordPress文章或页面。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-8

    将推文的URL添加到Twitter嵌入框

    现在,获取您从推文中保存的URL并将其粘贴到嵌入框中。完成后单击嵌入。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-9

    Twitter嵌入框的最终结果(或错误消息)

    这是添加后的样子:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-10

    但是,如果您抓取了无法嵌入的链接,您可能会收到错误消息。您可以再次尝试链接或选择转换为链接选项,但如果两者都不起作用,则必须使用其他链接。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-11

    Twitter嵌入区块设置和选项

    当您单击Twitter嵌入区块时,嵌入推文顶部上方的工具栏中会显示六个选项:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-12

    从左到右分别是:

    • 更改区块类型或样式
    • 拖动
    • 向上或向下移动
    • 更改对齐方式
    • 修改网址
    • 更多选项

    更改区块类型或样式

    此选项允许您从三种块类型中进行选择:栏目、组和段落。您(可能)想要使用的唯一两个是栏目和组;段落只会将您嵌入的推文变成直接链接。

    列选项很棘手。在我的主题中,只添加两列最终切断了推文:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-13

    我在组布局上运气更好,它将两条推文并排放置并完整显示它们:

    古腾堡编辑器教程:如何使用Twitter嵌入区块-14

    您还可以将背景颜色更改为纯色或渐变色。要在右侧边栏中显示该工具栏,请单击“更多选项”按钮(带有三个垂直点),然后选择“显示更多设置”

    古腾堡编辑器教程:如何使用Twitter嵌入区块-15

    知道块样式工具非常喜怒无常。当你点击时弄清楚发生了什么并不容易,你必须继续玩弄它,直到推文按照你的意愿出现。

    拖动

    将鼠标悬停在拖动选项上将使您的光标变成一只手。然后,您可以拖动块以将其放置在页面上所需的位置。请注意,当您拖动该框时,它会变成一个小黑框,直到您重新定位它为止。

    向上或向下移动

    上移或下移箭头可让您将Twitter嵌入框向上或向下移动一个空间,除非您已经位于页面的顶部或底部。

    更改对齐方式

    您有五个对齐选项:

    • 左对齐
    • 右对齐
    • 居中对齐
    • 宽幅
    • 全幅

    选择向左或向右对齐将使Twitter嵌入框更小。选择其他三个选项中的任何一个都会使其更大。

    修改网址

    如果您想替换推文的URL,您可以在这里进行。这比删除Twitter嵌入框并从新开始更容易。

    更多的选项

    更多选项的选择,这是三个点,有许多可供选择的方案:

    • 隐藏更多设置:隐藏右侧编辑边栏。
    • 复制:将块复制到剪贴板。将其粘贴到您当前文章/页面上的另一个位置或另一个文章/页面。
    • 创建副本:在当前嵌入块下方创建Twitter嵌入区块的副本。
    • 在之前或之后插入:在当前块之前或之后添加一个块。
    • 移动到:调整出现的蓝线,然后按键盘上的Return将推文重新定位到那里。
    • 作为HTML编辑:编辑块的HTML代码。
    • 添加至可重用区块:从当前Twitter嵌入区块创建一个可重用区块。
    • 组合:将块样式更改为组。
    • 移除区块:删除块。

    有效使用Twitter嵌入区块的提示和最佳实践

    保持纵横比

    如果您单击Twitter嵌入区块工具栏中的“更多选项”按钮,您将看到右侧边栏中显示一个菜单。如果您单击顶部的区块(如果尚未选择),您将看到媒体设置部分。切换为较小的设备调整大小按钮,使其为蓝色。

    古腾堡编辑器教程:如何使用Twitter嵌入区块-16

    这意味着当浏览器调整大小时,比如在移动设备而不是计算机上查看时,嵌入的推文的纵横比也会自动调整。这可以使推文更容易被看到。

    不要太担心背景颜色

    我认为能够以几种不同的方式更改列或组布局的背景颜色是一个不错的选择,但是这个工具非常敏感,我不确定是否值得麻烦。此外,当我能够改变颜色时,它看起来不太好。假设您的网站已经设置为展示您的品牌颜色,则可能不需要调整您的Twitter嵌入的背景。在这种情况下,更简单的方法可能是最好的方法——添加Twitter嵌入区块并保留布局。

    嵌入您自己的推文!

    在您的WordPress内容中嵌入您自己的推文是鼓励交叉推广的好方法。例如,如果您正在举办Twitter竞赛,嵌入的推文将很容易将博客阅读引导至他们可以参与的平台。您可以根据文章或页面上的主题嵌入不同的推文,或者如果您有特别吸引人或相关的推文,则可以在所有内容中嵌入相同的推文。

    关于Twitter嵌入区块的常见问题

    为什么要嵌入推文?

    嵌入推文的原因有很多,无论是您自己的、您公司的还是其他人的。嵌入的推文可以帮助您分享客户推荐、增加社交媒体资料的流量、宣传活动或表示对其他Twitter用户的支持。

    可以在WordPress中嵌入最近的推文吗?

    要嵌入您最近的推文(并始终更新它们),您需要使用插件,因为Twitter嵌入区块没有此功能。

    小结

    Twitter是一个强大的社交工具,用于展示您的想法、内容和他人的支持,并突出您最喜欢的推文——无论是您自己的还是其他人的——将帮助您创建更丰富的 WordPress 内容。商业成功和创造力都不是泡沫,向其他人张开你的(虚拟)手臂只会帮助你的部落成长。此外,您越习惯使用WordPress区块,学习曲线就越平缓,您会发现让您的网站看起来像您想要的样子变得越来越容易。

  • 古腾堡编辑器教程:如何使用WordPress引文区块

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    引文是文章中引起注意的一个小片段。它非常适合为您的文本添加重点或突出显示一个短语。它为读者提供视觉帮助。WordPress有一个专为此目的设计的引文区块。

    在本教程中,我们将介绍引文区块,了解如何将其添加到文章和页面,查看使用它的提示和最佳实践,以及常见问题。

    如何将引文区块添加到文章或页面

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    要添加引文区块,请单击要放置块的位置或左上角的块插入器。搜索“引文”并选择它。或者,您可以输入/pullquote并在要放置块的位置按 Enter 键。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    引文区块将添加到您的内容中,您可以在其中添加文章中的引用。

    古腾堡编辑器教程:如何使用WordPress引文区块-4

    要使用它,只需输入您希望它在显示添加引用的位置显示的文本。在此下方是另一行标记为添加引述的文本,您将在其中添加您要引用的人的姓名,对于引文,它是文章的作者。引述对于引文是可选的。

    您的引用显示在两条水平线之间,并在其上加上引号。默认设置以大字体显示引文,而引文则以常规粗细的较小字体显示。

    引文区块设置和选项

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    引文区块包括块本身和右侧边栏中的设置和选项。

    引文区块工具栏

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    引文区块工具栏位于区块上方。当您选择块时它会出现。让我们仔细看看。

    更改区块类型或样式

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    您有多种选项可以将块转换为其他区块、样式等。将其转换为段落、列、组、标题、引用或列表。每个都提供了使用您的内容的效果的预览。它还具有样式选项。将鼠标悬停在选项上会显示它在您的内容中的外观预览。在本例中,我将鼠标悬停在样式下的纯色选项上。

    拖动和移动

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    拖动工具由6个点表示。抓住点并将区块拖动到您想要的任何位置。移动工具是向上和向下箭头。单击它们以在您的内容中上下移动区块。

    更改对齐方式

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    对齐选项包括左对齐、右对齐、宽幅和全幅。宽幅和全幅选项仅在您的主题支持它们时才可用。选择向左或向右将其放置在屏幕的那一侧。取消选择您的选项以将其恢复为居中的默认设置。它适用于段落块。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    例如,将其设置为左对齐或右对齐会将其下方的段落置于引文区块内。在此示例中,我将其设置为居左对齐,并且下一段中的文本现在环绕它。

    粗体和斜体

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    粗体和斜体选项会影响您突出显示的文本。它们可以一起使用或独立使用。在这个例子中,我在引文中独立使用了它们,并在引文中一起使用。

    链接

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    将链接添加到您突出显示的任何文本。当您输入URL时,您会看到基于您之前使用过的建议的建议。您还会看到在新标签页中打开链接的选项。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    在这个例子中,我添加了引文的链接。它在文本下划线以显示它是一个链接。

    下拉选项

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    单击更多选项会打开一个下拉框,其中包含7个用于设置文本样式的选项。我已经在上面的例子中添加了它们中的每一个。当您单击它们时,它们都会影响您突出显示的文本。它们包括:

    • 内联代码– 将文本样式设置为看起来像代码并阻止代码执行。这个词是格式化为内联代码。
    • 内嵌图像– 将媒体库中的图像添加到鼠标光标所在的位置。
    • 键盘输入– 使用键盘HTML格式设置文本样式。单词quote使用键盘输入样式进行样式设置。
    • 删除线– 在文本中放置一行,就像上图中的“很棒”这个词。
    • 下标– 使文本比其他文本更低更小,就像上面引文中的字母R一样。
    • 上标– 使文本比其他文本更高更小,就像上面引文中的字母A一样。
    • 文本颜色– 允许您更改文本的颜色,例如上面引文中的单词Brown。当工具栏处于活动状态时,设置图标会更改为工具栏。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    对于颜色选项,从预先选择的颜色中选择或创建自定义颜色。从颜色选择器中选择自定义颜色或输入十六进制代码、RGB代码或HSL代码。

    选项

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    包括所有标准选项:

    • 隐藏更多设置 – 隐藏右侧边栏。
    • 复制– 复制 Pullquote 块,以便您可以将其粘贴到内容中的任何位置。
    • 创建副本– 在原件下添加引文区块的副本。
    • 在当前区块前插入– 在引文区块块之前添加一个空格,您可以在其中添加一个区块。
    • 在当前区块后插入– 在引文区块之后添加一个空格,您可以在其中添加一个区块。
    • 移动至– 在您的内容中放置一条蓝线,您可以将其移动到要移动引文区块的位置,从而轻松移动区块。
    • 作为HTML编辑 – 打开代码编辑器,您可以在其中编辑HTML。
    • 添加至可重用区块– 将引文区块添加到您的可重用区块中,使其易于重用。
    • 组合– 将区块添加到可以作为单个单元进行调整的组中。
    • 移除区块– 删除引文区块。

    引文区块侧边栏设置

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    侧边栏设置包括样式、颜色和高级。单击右上角的齿轮以打开或关闭侧边栏。单击该块会将侧栏更改为引文区块选项。

    样式

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    样式显示两个选项:默认样式和纯色样式。样式显示了引文外观的预览。您可以通过在标有默认样式的下拉框中单击它来设置默认样式

    颜色

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    颜色选项包括主色和文本颜色。有几种颜色可用作默认颜色,您也可以选择自定义颜色。对于自定义颜色,请从颜色选择器中进行选择或输入所需的十六进制、RGB或HSL颜色。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    主要颜色会影响线的上方和引文的第一个样式下方。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    对于第二种样式,主要颜色会影响背景。当您为背景选择深色时,它会变为浅色文本。如果您选择难以阅读的颜色组合,它会让您知道。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    文本颜色影响引号,引用来源,和引文。它不会覆盖工具栏设置中设置的文本颜色。

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    您可以使用文本颜色设置来调整引号,然后使用工具栏中的颜色设置来单独调整文本。

    高级

    古腾堡编辑器教程:如何使用WordPress引文区块-1

    高级设置包括HTML锚点和附加CSS类。锚点提供了一个URL,因此您可以直接链接到该区块。CSS类字段包括您选择的样式,您可以根据需要添加其他类。

    有效使用引文区块的技巧和最佳实践

    • 使用文章本身的文本。
    • 谨慎使用它们。
    • 不使用标题也没关系。
    • 使用右对齐或左对齐使您的引文包裹您的文本。
    • 使用宽幅和全幅对齐选项来创建有趣的标题。
    • 尝试两种样式,默认样式和纯色样式,看看哪种样式最适合您的内容。使用纯色并更改背景颜色以突出显示。
    • 使用颜色使引文更加突出。

    关于引文区块的常见问题

    引文区块和引用区块有什么区别?

    引用显示外部内容。引文突出显示了它所在文章中的一部分文本。 引文区块包含更多对齐选项并且样式不同。

    使用引文区块有什么好处?

    它使文本具有更加突出的图形外观。它还突出显示文本中的一行以引起注意。

    它们可以转换成引用区块吗?

    是的,还有一个段落区块、栏目区块、组区块、标题区块或列表区块。

    它们可以用于其他用途吗?

    是的,还有简短的教程、脚注、标题等。

    小结

    这就是我们对WordPress引文区块的看法。引文是为文本添加一些视觉重点的好方法,引文区块做得很好。此区块易于使用,并为您提供足够的选项来创建突出的独特外观。它的布局选项适用于您的文本,允许您分割文本、用文本换行,甚至将其用作标题。

  • 古腾堡编辑器教程:如何使用WordPress预格式区块

    How to Use the WordPress Preformatted Block-1

    预格式区块显示您键入的文本。这意味着您可以在文本中包含空格和换行符。了解如何使用预格式区块可为您提供多种优势,例如将文本的各个部分分开并创建突出的元素。幸运的是,此区块包含多个样式选项,并且易于使用。

    在本教程中,我们将介绍WordPress预格式区块。我们将了解如何将其添加到文章和页面,并查看其选项和设置。我们还将看到一些使用它的最佳实践,以及最常见的问题。

    如何将预先格式区块添加到文章或页面

    How to Use the WordPress Preformatted Block-1

    通过单击区块插入器工具将预格式化区块添加到您的内容中。您会在左上角和内容区域中找到它。搜索预格式并单击Enter

    How to Use the WordPress Preformatted Block-1

    您还可以通过键入/preformatted并在您希望它出现的内容区域中按 Enter来添加区块。在您键入时,WordPress会根据您输入的字母提供建议,因此您只需在看到该区块时单击它即可。

    How to Use the WordPress Preformatted Block-1

    预格式区块现在已添加到文章或页面。预格式区块类似于段落区块诗篇区块和代码区块。这是它们之间的一种交叉,但它也简化了它们。它显示您键入的文本,但不会更改格式,而是保留它。这包括所有空格和换行符。它以等宽字体显示。

    预格式区块设置和选项

    与大多数WordPress区块一样,该区块包含一个设置工具栏和侧边栏中的选项。这是两者的近距离观察。

    预格式区块工具栏设置

    How to Use the WordPress Preformatted Block-1

    工具栏位于区块上方,包含大多数标准工具。

    更改区块类型或样式

    How to Use the WordPress Preformatted Block-1

    此区块可以转换为其他几个区块,包括段落区块、组区块、栏目区块和代码区块。突出显示选项会显示您的内容的外观预览。

    拖动和移动

    How to Use the WordPress Preformatted Block-1

    拖动工具显示为6个点。抓住这个区域,您可以将区块拖放到内容中的任何位置。每次单击箭头时,向上和向下移动箭头都会在内容中向上或向下移动一个区块。

    粗体、斜体和链接

    How to Use the WordPress Preformatted Block-1

    粗体、斜体和链接设置控制单击按钮时突出显示的文本。您可以单独或一起使用它们。您可以通过在链接弹出窗口底部启用链接来在新选项卡中打开链接。

    How to Use the WordPress Preformatted Block-1

    带有链接的文本带有下划线以表明它是可点击的。单击编辑器中的文本会打开链接编辑器,您可以在其中更改链接。

    下拉选择

    How to Use the WordPress Preformatted Block-1

    “更多”下拉按钮包括多个格式选项,这些选项适用于您单击该选项时突出显示的文本。选项包括:

    • 内联代码– 这使您的文本看起来像代码,并防止区块中的任何代码执行。预格式这个词是上图中的内联代码。
    • 内嵌图像– 这使您可以将媒体库中的图像放置在鼠标光标所在的位置。
    • 键盘输入– 使用键盘HTML格式设置文本样式。文字文字在上图中使用键盘输入样式进行样式设置。
    • 删除线– 这会在文本中放置一行。上图中的等宽字有删除线。
    • 下标– 这会将文本设置为比其他文本更低更小。上图中的这个词是一个下标。
    • 上标– 这将比其他设置更高和更小。上图中的字线是上标。
    • 文本颜色– 这让您可以更改文本的颜色,就像我在上图中对单词Divisions所做的那样。

    更多选项

    How to Use the WordPress Preformatted Block-1

    预格式区块选项包括:

    • 隐藏更多设置– 这将隐藏或显示右侧边栏。
    • 复制– 这会复制预格式区块,以便您可以将其粘贴到内容中的其他位置。
    • 创建副本– 这会将预格式区块的副本放在原始区块下。
    • 在当前区块前插入– 这会在区块上方为另一个区块添加一个空格。
    • 在当前区块后插入– 这会在区块下方为另一个区块添加一个空格。
    • 移动至– 这会放置一条蓝线,您可以使用箭头向上或向下移动,并将您的区块移动到您选择的位置。
    • 编辑作为HTML编辑 – 这将打开代码编辑器,以便您可以将内容编辑为HTML。
    • 添加至可重用区块– 这会将您的预格式化区块添加到您的可重用区块中。
    • 组合– 这会将区块添加到组中,以便您可以将它们作为单个区块进行调整。
    • 移除区块– 这将删除区块。

    预格式区块设置

    How to Use the WordPress Preformatted Block-1

    预格式区块设置位于右侧边栏中。如果未显示,请单击右上角的齿轮。单击区块内的任意位置以查看其侧边栏选项。

    排版

    How to Use the WordPress Preformatted Block-1

    排版可让您选择整个区块的字体大小。从下拉框中选择尺寸或输入自定义尺寸。单击重置可恢复为默认设置。

    颜色

    How to Use the WordPress Preformatted Block-1

    颜色选项可让您设置文本和背景颜色的样式。背景可以是纯色或渐变色。您可以从多种预选颜色中进行选择或选择自定义颜色。如果颜色组合可能难以阅读,您会在右下角看到一条消息。在本例中,我将背景设置为橙色,将文本设置为白色。这表明它可能难以阅读。

    How to Use the WordPress Preformatted Block-1

    渐变背景可以设置为线性或径向。使用颜色选择器选择两种颜色或输入颜色为 RGB 或 HSL 代码。颜色可以包括不透明度。对于线性,您可以设置角度,就像我在上面的示例中所做的那样。将它们靠近在一起以在它们之间创建一条清晰的线,就像我所做的那样,或者进一步分开以控制它们的混合方式。

    高级

    How to Use the WordPress Preformatted Block-1

    高级设置包括一个 HTML锚点选项,因此您可以直接链接到预格式区块。它还包括一个用于添加CSS 类的字段,以便您可以使用自定义CSS来设置区块的样式。

    有效使用预格式区块的技巧和最佳实践

    任何时候您想在您的内容中添加空格或分行时,都可以使用此区块。段落区块不保留该格式。

    为文本和背景使用颜色以将其与其他内容区分开来。这也防止它看起来与代码区块相同,这很重要,因为两者都使用等宽类型。

    用它来强调你的文本。由于它可以保留空格和行分割,因此可以用来将文本的一部分与其余部分分开。

    使用间距和分割以及字体和背景选项来创建独特的标题来分隔您的内容。

    关于预格式区块的常见问题

    预格式区块的目的是什么?

    显示带有换行符和空格的文本,同时能够更改字体大小、颜色和背景,并添加链接。

    它与诗篇区块有何不同?

    诗篇区块有点复杂。它包括对齐选项并且不以等宽显示文本。它还包括一些间距功能并为链接添加颜色选项。

    它与代码区块有何不同?

    它包括背景的样式选项。虽然代码区块在“更多选项”中有一个字体颜色选项,在侧边栏中有一个字体颜色选项,但它在侧边栏选项中不包括字体和颜色

    它与段落区块有什么不同?

    段落区块不会保留您的换行符。在预格式化块中,您可以通过单击Enter向文本添加新行。对于段落区块,这会将您带到一个字段以添加新区块。段落区块还包括更多文本设置。

    它可以用来做什么?

    间距和分行显示的文本与您的其余内容不同。字体和背景颜色可以为服务、引用(尽管引用区块和引文区块可能是更好的选择)、推荐、号召性用语等创建卡片。

    小结

    这就是我们对WordPress预格式区块的看法。该区块通过保留间距和线划分为您提供了一些有趣的设计功能。与代码区块不同,您仍然可以使用背景颜色工具。这个区块是一个很好的选择,可以帮助你的文本脱颖而出,它甚至可以用来创建设计元素来展示你的服务并引起人们对某些东西的注意。

  • 古腾堡编辑器教程:如何使用WordPress表格区块

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    WordPress表格区块允许您为文章或页面创建表格。这非常适合显示表格数据。它易于使用,并且可以根据您的网站设计进行样式设置。

    在本教程中,我们将仔细研究表格区块。我们将了解如何将其添加到文章和页面、其设置和选项、最佳实践以及常见问题。

    如何将表格区块添加到文章或页面

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    单击要添加区块的区块插入器并搜索表。当表格区块出现时,单击它以将其添加到您的内容中。或者,您可以使用屏幕左上角的插入器,或输入/table并按 Enter。

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    这会添加表格区块,您可以在其中指定列数和行数。输入表所需的列数和行数,然后单击“创建表”。

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    您的表格将出现在屏幕上,您可以在其中向单元格添加内容并在底部添加标题。默认样式将根据您使用的 WordPress 主题而有所不同。我在示例中使用了 22-1 WordPress 主题。

    表格区块设置和选项

    让我们看看设置和选项。

    表格区块工具栏

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    单击表格时,表格区块工具栏会出现在表格上方。

    更改区块类型或样式

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    这使您可以将表格添加到组中,设置布局的列数(不是表格列),并为表格选择所需的样式。样式有两种选择。默认样式具有纯色背景,而条纹则每隔一行添加一条灰色条纹。将鼠标悬停在选项上提供预览。

    更改对齐方式

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    将表格设置为左、中、右、宽幅或全幅。并非所有主题都支持宽幅和全幅。在此示例中,我已将其设置为宽幅。

    列对齐

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    分别为每一列选择对齐方式。将它们设置为左对齐、居中对齐或右对齐。在本例中,我将左栏设置为右栏,并将其余栏设置为中心。

    粗体和斜体

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    粗体和斜体设置调整您突出显示的文本。表格或标题中的任何文本都可以设为粗体、斜体或两者兼而有之。您必须独立选择每个单元格。

    链接

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    添加指向表格或标题中任何内容的链接。我在此示例的标题中添加了指向手表名称和标题的链接。当您键入URL时,它会在您的网站上搜索您以前使用过的 URL,并提供它们作为建议。

    更多下拉选项

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    这将打开一个包含多个选项的下拉框。以下每个选项都添加到上图中:

    • 内联代码– 显示样式为代码的文本。
    • 内嵌图像– 打开媒体库,您可以在其中选择要内嵌在光标位置的图像。您可以选择图像以更改其宽度。
    • 键盘输入– 向您的内容添加键盘标签以定义键盘输入。它以浏览器的默认等宽字体显示。
    • 删除线– 在您突出显示的文本中放置一行。
    • 下标– 将您突出显示的文本设为下标。
    • 上标– 将您突出显示的文本设为上标。
    • 文本颜色– 可让您更改突出显示的文本的颜色。您可以从预制颜色中进行选择,使用颜色选择器工具选择一种颜色,或者以十六进制或RBG代码的形式输入值。

    编辑表

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    编辑表选项打开一个下拉框,您可以在其中插入或删除行和列。在您选择的行或列之前或之后添加它们。这样可以随时轻松更改表格的大小。我在这个例子中添加了两者。

    区块选项

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    表格区块选项按钮会打开一个下拉框,其中包含更多可供选择的选项。表选项包括:

    • 隐藏更多设置– 此选项隐藏右侧边栏,为您提供更干净的工作区。
    • 复制– 将表格区块复制到剪贴板。然后,您可以将其粘贴到该页面或文章中您想要的任何位置。
    • 新建副本– 在表下创建表格区块的副本。
    • 在当前区块前插入– 在表格区块之前为区块插入空间。
    • 在当前区块后插入– 在表格区块之后为区块插入空间。
    • 移动至– 在区块编辑器中放置一条蓝线。您可以使用箭头键向上或向下移动线。将蓝线移到您想要移动表格区块以按 Enter 键的位置后,您的区块将自动移动到新位置。
    • 作为HTML编辑 – 此选项更改为代码编辑器,因此您可以将内容作为HTML。
    • 添加至可重用区块– 此选项将您的表格区块添加到可重用区块中,以便您可以在任何页面或文章上再次使用它。
    • 组合– 这会创建一个组,以便您可以一起调整所有区块。
    • 移除区块– 此选项删除表格区块。

    表格区块设置

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    表格区块设置与右侧栏中的其他设置一起放置。如果侧边栏未打开,请单击右上角的齿轮图标,然后单击表格区块中的任意位置以显示设置。您将看到带有图标和简短说明的“表格”一词。您还将看到样式、颜色、表格设置和高级选项。单击每个标题以打开其设置。

    样式

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    表格区块样式让您可以在非条纹或条纹表格之间进行选择。也可以在两种样式下的下拉框中设置默认样式,也可以不设置。样式提供预览

    颜色

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    颜色使您可以控制表格区块的文本、网格和背景颜色。从多种预选颜色中进行选择,或从颜色选择器中选择一种自定义颜色。

    对于文本和网格,选择一个。对于背景,选择纯色或创建渐变。文本和背景颜色都允许您输入十六进制或 RGB 代码。背景渐变可以是线性的或径向的。线性包括允许您控制方向的设置。

    在上面的示例中,我为文本和网格选择了白色,并为径向渐变选择了一些蓝色阴影。

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    如果您选择了条纹样式,背景颜色将控制背景的条纹颜色。条纹可以是纯色或渐变色背景。

    表格设置

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    表格设置提供了可以打开或关闭的选项。设置包括:

    • 定宽单元格– 使单元格大小相同,因此表格看起来一致。它阻止单元格适应其内容的大小并使其大小不同。
    • 页眉章节– 用粗体文本在顶部添加一行。它用粗线与其他单元格隔开。这些独立并用作列的标签。
    • 页脚章节– 在表格底部添加一行作为页脚。它用粗线与其他单元格分开,但默认情况下文本不是粗体。这对于汇总信息、提供总数或为大表重复标题很有用。

    高级

    古腾堡编辑器教程:如何使用WordPress表格区块-1

    高级表格区块设置包括用于 HTML 锚点的选项和用于添加其他 CSS 类的字段。锚点用作特殊 URL,因此您可以直接链接到表区块。CSS classes 字段允许您添加自定义 CSS 类来设置区块的样式。默认情况下,它为您在样式设置中选择的样式提供了一个类。

    有效使用表格区块的提示和最佳实践

    任何时候需要显示表格数据或内容时,都可以使用表格区块。不要使用它们来创建列。列区块最适合于此。

    使用段落区块为表格添加标题。

    通过添加标题为行创建标题。使用易于理解的清晰标签。

    使用固定宽度使桌子看起来更精致和专业。

    为较大的表格选择条纹以使其更易于阅读。

    如果表格很大,请使用页脚来总结信息或再次显示标题。

    关于表格区块的常见问题

    表格区块的最佳用途是什么?

    这个区块非常适合创建表格和图表。

    可以使用表格区块块来创建栏目吗?

    是的,但它不能让您对栏目进行足够的控制。最好为此使用栏目区块。

    以后可以更改表格大小吗?

    是的。使用表格的选项插入或删除行或列。

    小结

    这就是我们对WordPress表格区块的看法。这是创建基本表格的绝佳区块,您甚至可以在某种程度上对它们进行样式设置以匹配您的网站。此区块是区块编辑器的优势之一。使用此区块创建的表很简单,但它们运行良好且易于构建。

  • 古腾堡编辑器教程:如何使用WordPress分页符区块

    分页符样式

    分页是将冗长的内容分解为更易于阅读的绝妙方法。如果你环顾网络,分页无处不在。搜索引擎使用它来分离结果,在线商店利用它来简化浏览,您甚至可以为博客文章添加分页。多亏分页符区块,WordPress使您能够轻松地做到这一点。

    在本教程中,我们将讨论如何将分页符区块添加到您的网站,并向您展示它的外观。然后我们将讨论一些提示和技巧,以确保您正确使用分页符。

    如何将分页符区块添加到文章或页面

    区块编辑器包含构建现代页面和将复杂文章(包括分页符)放在一起所需的所有元素。当您在WordPress上使用分页符区块,你基本上添加该页面或文章内的新选项卡。您可以添加多个分页符并使用户能够在这些部分之间移动,如下所示:

    文章分页演示

    使用区块编辑器添加分页符非常简单。首先,打开编辑器并添加您希望该文章包含的段落、列表和其他元素。

    准备好要分割的内容后,单击加号图标以添加新区块。在“设计” 选项卡下 查找“分页符”选项并选择它:

    分页符区块插入

    如您所见,我们的页面上已经有几个分页符区块。添加区块后,单击它,您将看到拖动它的选项,或在整个页面布局中上下移动它:

    分页符区块移动

    单个页面或文章可以根据需要包含任意数量的分页符区块。正如您在本节开头所见,WordPress会自动将分页符区块之间的内容分成单独的页面。

    尽管大多数WordPress区块提供多种自定义设置,但分页符区块不是其中之一。默认情况下,您无法更改区块的样式或其工作方式。不同的WordPress主题都有自己的分页样式。但是,区块本身被设计为尽可能易于使用。

    有效使用分页符区块的技巧和最佳实践

    使用分页符区块非常简单。但是,在向WordPress网站添加分页时,您应该记住一些提示和技巧。让我们一一回顾这些技术:

    • 使每一页尽可能统一。 理想情况下,页面之间的切换应该是无缝的。如果一页与下一页的内容存在很大差异,则可能会让读者感到不快。为简单起见,我们建议每个部分使用相同的结构,并使它们的长度相似。
    • 适度使用分页符。 尽管分页符很有用,但很少有人会在一个页面(即使是在网上商店)中点击其中的一打分页符。理想情况下,您应该只在情况需要时使用分页。
    • 为每个子页面添加副标题。 在子页面中,正确的格式和副标题的使用仍然必不可少,因此读者知道每个部分涵盖的内容。此外,搜索引擎仍会将带有中断的页面视为一个整体。
    • 不要在分页后隐藏关键信息。 每当您对页面设计进行更改以使其更难以导航时,都会对参与度产生负面影响。例如,如果您在五个或十个分页符区块之后“隐藏”重要信息,那么某些用户可能会错过它是理所当然的。为避免这种情况,我们建议不要在着陆页或旨在推动转化的文章中使用分页符。

    如果您牢记这些提示,您将能够在WordPress中使用分页符区块,而不会影响您网站的参与度。请记住,网络上的大多数人都习惯于看到分页符。换句话说,他们已经知道这个元素是如何工作的。只要您让访问者有理由期待该分页符背后有吸引人的内容,他们就更有可能点击它。

    关于分页符区块的常见问题

    如果您对WordPress分页符区块以及如何使用它有任何疑问,让我们来看看用户对这个特定元素的一些常见问题。

    无限滚动比分页更好吗?

    当您的网站拥有庞大的内容库时,无限滚动可以很好地工作。社交媒体平台几乎一致使用无限滚动是有原因的——它鼓励用户在您的网站上花费更多时间。

    对于非社交媒体平台,分页符提供了一种更结构化的替代方案,使访问者能够在各个部分之间跳转并保持控制。如果他们想返回到较早的点,他们可以随时这样做,这在您使用无限滚动时并不那么简单。

    什么时候应该使用分页符区块?

    大多数现代博客不使用分页符,即使是很长的文章。除非您有充分的理由在博客文章中添加分页符,否则我们建议您只制作每篇文章,只要它不需要分页即可。

    当您需要提供在单个屏幕内可能难以消化的信息时,添加分页符非常有效。例如,如果您想提供推荐文章和页面的列表,分页效果非常好。这同样适用于产品列表,甚至常见问题 (FAQ) 部分。

    小结

    分页符区块为您提供了一个令人难以置信的简单的方法来添加分页到任何网页或网站中的文章。分页是将大量信息分解为读者更容易消化的部分的绝佳方式。

    但是,我们建议不要在常规博客文章中使用此技术。总的来说,大多数现代博客不对其内容使用分页,即使是冗长的文章。在分离产品和推荐的文章列表、用户推荐、评论和类似元素时,分页符更有用。

  • 古腾堡编辑器教程:如何使用Spotify嵌入区块

    如何使用Spotify嵌入区块

    WordPress的Spotify嵌入区块可让您向WordPress文章和页面添加各种音乐好东西。您可以嵌入专辑、播放列表、播客或曲目,任何人在访问您的网站时都可以收听它们。在提示他们进行下一步(例如登录或注册)之前,他们会听到30秒的预览。此外,您实际上并不需要付费的Spotify帐户来嵌入音乐或播客,这意味着您可以迎合您的观众,而无需在您的每月预算中添加其他订阅。

    想要在您的WordPress文章或页面中嵌入Spotify链接的原因有很多:

    • 推广您自己(或其他人)的创意项目
    • 将您的观众与您知道他们会喜欢的内容联系起来
    • 提供您正在评论或评论的音乐样本或播客
    • 用多媒体增强您的页面,让您的访问者享受聆听的乐趣

    在本文中,我们将向您介绍如何将Spotify嵌入区块添加到WordPress文章或页面,以及如何向其添加各种Spotify链接。我们还将介绍技巧、最佳实践和常见问题解答。

    如何将Spotify嵌入区块添加到页面或文章

    在将Spotify链接添加到WordPress之前,您必须知道如何设置Spotify嵌入区块并为它们做好准备。首先,登录到您的WordPress仪表盘。以Gutenberg编辑器创建或打开页面或文章

    将鼠标悬停在页面上的空白区域,您会看到一个加号。单击它会显示您可以添加到WordPress文章或页面的所有区块。在搜索框中输入“Spotify”,然后选择出现的Spotify区块。这会将Spotify嵌入区块添加到WordPress文章或页面。

    WP添加区块

    搜索Spotify嵌入区块

    添加Spotify音乐链接

    现在让我们添加一些音乐或播客!

    如何文章或页面中嵌入Spotify音乐

    让我们从嵌入单个曲目开始,因为嵌入专辑或播放列表将遵循类似的过程。

    如何将Spotify曲目嵌入文章或页面

    打开Spotify网络播放器并登录。找到您要嵌入的曲目(1)。单击最右侧的三点图标(2)。将鼠标悬停在“Share(3)”上以显示第二个菜单。选择Select Copy Song Link(4)。

    Spotify音乐链接

    返回WordPress,将该链接粘贴到Spotify嵌入框中,然后单击嵌入。

    Spotify音乐链接嵌入

    这是嵌入轨道的样子:

    Spotify音乐播放轨道

    如何将Spotify专辑或播放列表嵌入文章或页面

    要在WordPress中嵌入整个专辑,请转到Spotify上的专辑。(确保您实际上是在专辑上,而不是在艺术家的页面上——当您复制链接时,您是否在错误的地方会很清楚。)点击三点图标(1),将鼠标悬停在Share(2)上,然后选择Copy Album Link(3)。

    Spotify专辑或播放列表链接

    将链接粘贴到WordPress的Spotify嵌入框中,然后单击嵌入。所有专辑曲目都会显示出来,用户可以滚动查看更多。

    Spotify播放列表

    要嵌入Spotify播放列表(您的或其他人的),请导航到播放列表,单击三点图标(1),选择Share(2),然后选择Copy Link to Playlist(3)。

    Spotify播放列表链接

    这将显示为与专辑相同的曲目列表和右侧的滚动条以查看更多内容。

    嵌入Spotify播放列表

    如何将Spotify播客嵌入文章或页面

    嵌入播客遵循类似的过程。首先,您必须转到主播客页面,而不仅仅是单个剧集的页面。如果您正在观看一集,单击“See All Episodes”会将您带到主节目页面。

    Spotify播客全部剧集

    从那里,单击“Follow”链接右侧的三点图标(1)。将鼠标悬停在Share(2)上,然后从弹出的菜单中单击Copy Show Link(3)。

    Spotify播客链接

    返回WordPress的Spotify嵌入区块,粘贴链接并点击嵌入。

    Spotify播客

    如何将Spotify播客剧集嵌入文章或页面

    要嵌入单个播客剧集,您将遵循类似的过程。转到剧集,单击加号右侧的三点图标(1),将鼠标悬停在Share(2)上并选择Copy Episode Link(3)。

    Spotify播客剧集链接

    转到WordPress,将链接粘贴到Spotify嵌入框中,然后点击嵌入。

    Spotify播客剧集

    Spotify嵌入区块错误消息

    如果您以某种方式获取了无法嵌入的链接,或者您不小心只粘贴了链接的一部分,您将收到一条错误消息。您可以选择再次尝试链接或选择转换为链接选项,但如果两者都不起作用,则必须使用不同的链接。

    Spotify嵌入区块设置和选项

    当您单击Spotify嵌入区块时,顶部上方的工具栏中会显示四个选项。

    Spotify嵌入区块设置和选项

    从左到右分别是:

      • 更改区块类型或样式:这使您可以将块转换为列或组布局。这个选项很挑剔,但如果你想尝试一下,你可以添加更多的Spotify区块(或其他区块)并以有趣的方式排列它们,你还可以调整颜色设置。不过,不要理会段落选项 – 它会将您的URL变成纯文本。
      • 更改对齐方式:将嵌入框向左、居中或向右对齐,或选择全幅或宽幅。选择Left或Center将使框变小,而选择Wide或Full将使其与页面一样宽。
      • 编辑URL:更改嵌入框中的Spotify链接。
      • 更多选项:复制或复制嵌入框、在它之前或之后添加另一个区块、在页面上移动它、编辑区块的HTML、将其添加到您的可重用区块、将布局变成一个组或完全删除区块。

    如果页面上有任何其他区块,您还会看到六点拖动图标,可让您单击并将框拖动到页面上的其他位置,以及向上和向下箭头图标,可让您移动块每次点击向上或向下一个位置。

    有效使用Spotify嵌入区块的提示和最佳实践

    使用标题字段

    在嵌入框下方是添加标题的空间。使用它,以便访问者确切地知道他们在单击媒体时将播放什么。如此多的Spotify嵌入看起来都一样,以至于很难区分音乐曲目和播客曲目、专辑或播放列表等。

    限制您添加到单个页面或文章的Spotify内容数量

    每次访问者单击Spotify曲目上的播放时,它都会一直播放到曲目结束或他们手动停止播放。如果他们在页面上的另一首曲目上点击播放,它也会开始播放,与已经播放的曲目一起播放。对于无法找到他们想要停止播放的其他曲目的人来说,这可能会很烦人。在可能的情况下,将Spotify嵌入每个WordPress文章或页面限制为一个是最方便用户的,以避免混淆和嘈杂。

    为更多选择创建播放列表

    现在,我们知道有时您想要向Spotify嵌入区块添加多个曲目。这是拥有播放列表派上用场的时候。由于您可以将音乐曲目和播客片段添加到播放列表中,因此您可以在一个用户友好的盒子中拥有想要共享的所有媒体。

    关于Spotify嵌入区块的常见问题

    如何使Spotify嵌入框更小?

    虽然Spotify嵌入区块的大小是自动确定的,无法进行太多调整,但您可以使用列、组或对齐方式来查看是否会使其在您的主题中变小。

    如何更改Spotify上的嵌入音乐?

    进入您的WordPress文章或页面进行编辑,然后转到您要更新的Spotify嵌入框。单击它可使菜单出现在其上方。单击铅笔图标以编辑URL。将要嵌入的URL粘贴到已有的URL上,然后单击“嵌入”以更新它。然后确保实时发布更改,以便它们显示在您网站的前端。

    嵌入式Spotify曲目会自动播放吗?

    不,嵌入的Spotify曲目仅在访问者手动播放时才开始播放。

    小结

    无论您现在是否是Spotify用户,很高兴知道该服务似乎包含您可以想到的任何音乐搜索。当谈到播客时,它也支持许多播客。WordPress的Spotify嵌入区块的主要缺点是,在将用户定向到他们的Spotify帐户之前,只播放30秒的剪辑。但是,如果您只想提供预览,例如您想让人们在Spotify上收听您的完整专辑或订阅您的播客,那么这就是完美的方式。无论哪种方式,添加令人耳目一新的媒体都是让您的网站具有吸引力(和现代)提升的绝妙方式。

  • 古腾堡编辑器教程:如何使用WordPress栏目区块

    如何使用WordPress栏目区块

    栏目是大多数现代网站和页面构建器的关键组件。幸运的是,WordPress区块编辑器使您能够同时使用列和行,因此您可以完全控制每个页面的布局。然而,尽管Builder将自动添加行,你需要选择在哪里以及如何使用栏目区块添加栏目。

    在本教程中,我们将向您展示如何在 WordPress中添加此区块以及如何配置它。然后,我们将介绍一些提示,以便您可以充分利用您的专栏,以及一些有关区块的常见问题 (FAQ)

    如何将栏目区块添加至页面或文章

    首先,打开要处理的页面或文章的区块编辑器。单击您添加的最后一个区块下方的加号图标 (1),或使用屏幕顶部的菜单,然后选择“栏目” 选项 (2):

    添加栏目区块

    区块编辑器为您提供了多个选项,供您选择要在所选行中包含的栏目数:

    栏目区块预设列数量

    默认情况下,区块编辑器仅允许您选择在一行中最多包含三列的预设。但是,一旦您放置了这些预设之一,您就可以单击它们之间的加号以向该行添加更多元素:

    栏目区块添加列

    可以这么说,编辑器将每一列视为自己的“部分”。例如,如果您有一行包含三列,您可以在每列中添加单独的区块以创建定价表:

    定价套餐栏目

    您可以将编辑器中可用的任何区块添加到您正在处理的每一列。放置所需的区块后,您可能还想花一些时间自定义列的设置。

    栏目区块设置和选项

    当您将鼠标悬停在区块编辑器中带有列的行上时,将出现一个格式菜单。该菜单包括用于移动列 (1)、更改其对齐方式 (2) 和修改行宽 (3) 的选项:

    栏目区块设置选项

    您看到的格式菜单会随着您添加区块而改变。当您将鼠标悬停在包含区块的列上时,该元素的格式菜单将替换默认菜单。

    对于此示例,我们向所有列添加了表格区块。当我们将鼠标悬停在其中任何一个上时,会出现以下格式菜单:

    栏目区块示例

    除了格式菜单之外,还有另一组选项可让您自定义栏目区块。要访问它,请选择包含要编辑的栏目的行,然后单击屏幕右上角的齿轮图标 (1)。将弹出一个侧边栏,包括更改该行颜色 (2)、填充 (3) 和列宽 (4) 的选项:

    栏目区块设置选项

    颜色设置使您能够更改行内文本和链接的颜色,以及其背景的颜色。请记住,您在此处选择的设置适用于行中的所有列。但是,您可以通过调整每列中的各个区块设置来取代这些选项。

    如果您想进一步自定义此区块,您还可以从设置菜单的“高级”选项卡中设置HTML锚点和其他CSS类:

    栏目区块高级设置

    这就是您需要了解的有关如何使用和配置这个重要区块的所有信息。现在让我们回顾一些提示,以帮助您有效地使用栏目。

    有效使用栏目区块的提示和最佳实践

    栏目是网页设计中的通用元素。您几乎可以在任何情况下使用它们,因为它们有助于为任何页面或文章提供结构。

    在视觉上,栏目可帮助您分解长段的段落,并将列表、表格甚至图像并排放置。这是默认WordPress主题之一的示例,使用列来实现与图片区块的重叠效果:

    图片区块

    在大多数情况下,您不希望列重叠。但是,对于如何使用列并没有一成不变的规则。只要结果看起来美观,您就可以随意使用此区块进行试验。

    关于栏目区块的常见问题

    到目前为止,您已经对如何在WordPress中使用栏目有了扎实的掌握。为确保您没有遗漏任何内容,让我们回顾一些常见问题。

    栏目区块可与页面构建器插件一起使用吗?

    一般情况下,第三方页面构建器插件取代了默认的WordPress编辑器。这意味着您将无法访问栏目区块。但是,大多数页面构建器插件都包含自己的行和列,因此您可以使用类似的功能。

    可在页面或帖子中添加多少列?

    栏目区块允许您在预设行内添加到三列。但是,您可以手动添加更多行。请记住,如果添加太多列,它们可能没有足够的空间来正确显示其内容。

    可以在小部件中使用栏目区块吗?

    WordPress支持使用区块编辑器自定义小部件区域,例如页脚或侧边栏。这意味着您可以访问与处理页面或文章时相同的所有区块。请记住,由于您的工作空间可能会减少,因此在小部件区域中使用多个列会使您的内容看起来很拥挤。

    小结

    对于现代页面构建器工具而言,仅行是不够的。创建和自定义行和列的选项使您可以完全控制网站上每个元素的位置。

    WordPress栏目区块使用起来非常简单。您可以在任何单行中添加任意数量的列。此外,您可以在列中放置任何您想要的区块,并自定义其内容、样式等。

  • 古腾堡编辑器教程:如何使用WordPress多个按钮区块

    WordPress多个按钮区块

    您网站上的按钮在其外观和可用性方面发挥着重要作用。它们帮助访问者浏览不同的页面,并使他们能够轻松地执行重要操作(例如下载内容或订阅您的时事通讯)。拥有一种简单而有效的方法来插入和自定义此基本元素,这一点至关重要。幸运的是,WordPress多个按钮区块可以提供帮助。

    在这篇文章中,我们将解释如何将WordPress多个按钮区块添加到文章和页面,以及如何使用它。我们将讨论它的每个设置和配置选项,并为您提供一些有效使用区块的最佳提示。然后我们将通过回答一些常见问题来结束这篇教程。

    如何将多个按钮区块添加至文章或页面

    要向WordPress内容添加按钮,首先导航到要插文章或页面编辑。接下来单击添加区块图标 (1),在文本字段中搜索“按钮”,然后选择多个按钮选项 (2):

    添加多个按钮区块

    您还可以通过在文本编辑器中键入“/buttons”并按键盘上的Enter键来添加按钮区块。插入区块后,您将可以访问一个新的工具栏菜单,我们将在下面讨论。

    多个按钮区块设置和选项

    每个WordPress区块都有自己的一组控件和配置选项。添加按钮时,有很多选项可用于链接、对齐和设置它们的样式。我们将从探索文本和链接设置开始。

    文本和链接

    当您第一次插入多个按钮区块时,将添加一个带有占位符内容的默认按钮:

    多个按钮区块样式

    当您单击文本字段时,您可以将文本更改为您希望按钮显示的任何内容。例如,您可以添加行动号召 (CTA),例如“了解更多”。

    第二个工具栏选项是链接图标,您可以使用它来确定按钮将引导用户的位置:

    按钮链接设置

    您可以通过在文本字段中键入来搜索要链接到的内部页面。您还可以输入或复制/粘贴外部页面的 URL。然后您可以选择箭头图标或按Enter键插入链接。

    请注意,您还可以切换在新标签页中打开选项。这将决定用户是被带到同一窗口中的新页面还是新选项卡中。

    按钮格式

    添加按钮文本并将其链接到正确的目标页面后,您就可以开始对其进行格式化和自定义。首先,您可以使用工具栏上的相应图标选择粗体或斜体按钮的文本:

    按钮区块格式化

    如果单击向下箭头,您还会看到一些其他选项。例如,您可以更改文本颜色,并包括下标或上标文本。

    样式、排版和颜色

    自定义按钮的最后一步是选择其样式、排版和颜色。您可以使用区块侧边栏菜单中的控件来完成这一切:

    按钮区块排版、颜色及样式

    您拥有的两个样式选项是填充Fill和轮廓Outline。Fill将使按钮成为纯色,而轮廓将提供带有可选彩色边框的透明按钮。您可以通过单击带有预览的图标进行选择,或从默认样式下拉菜单中选择所需的外观。

    接下来,在排版部分下,您可以为按钮文本选择字体大小:

    按钮区块字体设置

    选项范围从超小到巨大。您还可以输入自定义尺寸。

    在“颜色”面板中,您可以找到用于更改文本和按钮颜色的选项。对于两者,您可以从可用选项列表中进行选择或选择自定义阴影:

    按钮区块颜色设置

    请注意,对于您的背景颜色,您可以选择纯色Solid或渐变色Gradient:

    按钮区块背景色设置

    如果选择渐变色Gradient,则可以从各种混合过渡颜色中进行选择。您可以使用颜色滑块来确定每种颜色的流行程度以及渐变的方向。

    有效使用多个按钮区块的提示和最佳实践

    这里有很多的,你可以在你的WordPress网站使用的按键方式,但他们最常用的商品交易顾问。这些可以包括提示访问者的按钮:

    • 阅读/了解更多
    • 立即购买
    • 下载
    • 添加到购物车
    • 现在预订

    当您创建CTA或任何其他类型的重要按钮时,确保它在页面上突出很重要。否则,您的访问者可能会忽略它,并且您可能无法获得您想要的参与度或转化率。

    因此,我们建议在将它们插入您的帖子和页面时利用 WordPress 的内置按钮样式选项。例如,将按钮背景颜色更改为与主题背景具有高对比度的阴影可以使其更易于区分。

    此外,对按钮的放置具有战略意义也是明智之举。通常,将它们放在页面上访问者的视线自然会落下的某个位置是有意义的。例如,当您准备好将用户指向新页面时,您可以在博客文章的末尾添加一个按钮。

    根据按钮的用途,将它们添加到侧边栏中也可能是有意义的,以便在用户浏览您的网站时它们始终可见。如果您正在创建联系人或订阅按钮,这是一个特别好的主意。

    关于多个按钮区块的常见问题

    到现在为止,您可能已经对多个按钮区块是什么以及如何使用它有了深入的了解。但是,为了确保我们已经涵盖了所有基本信息,让我们回顾一下有关此区块的一些最常见问题。

    如何查找多个按钮区块?

    您可以通过导航到要添加按钮的文章或页面(或小部件区域)来找到此区块。接下来,您可以搜索“/buttons”并按Enter 键,或单击“添加区块”图标并在文本字段中搜索“按钮”。

    多个按钮区块在文章和页面中有什么作用?

    按钮区块可以让你在视觉上独特的方式链接到的内部和外部网页。您可以插入一个按钮,将访问者指向您网站或第三方网站上的另一段内容,并对其进行自定义以使其完全符合您的喜好。

    可以在哪里添加多个按钮区块?

    您可以在任何文章和页面上添加按钮。更重要的是,您可以将它们插入到您可以访问区块编辑器的任何位置。例如,这意味着您通常可以在页脚或侧边栏中插入一个按钮(取决于您的主题选项)。

    小结

    按钮是有效网页设计的重要元素。他们引导您的访问者前往他们想去的地方,并帮助您提高参与度和转化率。因此,必须有一种在整个站点中快速无缝地插入和编辑它们的方法。

    正如您现在所知,按钮区块可以使将这些元素添加到您的站点变得更加容易。插入区块后,您可以使用设置和控件来自定义其外观,并确定访问者单击它时将被发送到的位置。您甚至可以向可重用区块添加自定义按钮,以便您可以在整个站点中重复使用它。

  • 古腾堡编辑器教程:如何使用WordPress空格区块

    如何使用WordPress空格区块

    您在网站上组织和排列元素的方式会对网站的整体外观甚至用户体验 (UX) 产生重大影响。WordPress空格区块是一个简单的工具,可以帮助您更有效地做到这一点。顾名思义,它在区块之间创建空间,这可以使您的页面和文章更具吸引力且更易于阅读。

    在本教程中,我们将解释如何将空间区块添加到您的WordPress文章或页面以及如何使用它。我们将探索区块的各种设置和选项,并提供一些有效使用它的最佳提示和最佳实践。然后我们将通过回答一些常见问题来结束。

    如何将空格区块添加到文章或页面

    如果您想为WordPress内容添加一些额外的空间,您可以先导航到任何文章或页面。接下来,单击编辑器中的“添加区块”按钮,该按钮由加号图标 (1) 标记。在那里您可以搜索“spacer”,然后选择第一个选项 (2):

    添加空格区块入口

    或者,您可以通过在编辑器的文本字段中输入“/spacer”来将区块添加到文章或页面。打你的输入键,空间区块将自动添加。

    插入区块后,您会注意到顶部有一个新工具栏。我们将在下一节探讨它提供的各种选项。

    空格区块设置和选项

    如果您熟悉使用WordPress区块,您可能已经知道每个区块都有自己的一组控件,可用于配置它。所述空格区块是没有什么不同。

    在区块工具栏中,有三个主要选项:

    1. 转换按钮,它可以让你转换成区块一组或栏目
    2. 移动手柄(和/或拖动图标),使您能够在页面或文章上向上或向下移动区块
    3. 更多选项(三个垂直点),打开带有附加设置的菜单

    您可以在此处找到这些按钮:

    空格区块设置和选项

    在更多选项菜单下,您可以复制或复制区块:

    复制空格区块

    还有用于将空白区块添加至可重用块、作为HTML编辑等的设置。

    WordPress区块编辑器的有用之处之一是它还允许您调整区块的大小。例如,如果要调整区块的高度,可以在右侧菜单中进行:

    空格区块调整

    在“间隔设置”部分下,您将找到以像素为单位调整区块高度的选项。您可以使用滑块或在文本字段中手动输入所需的值。然后您可以查看高级部分以配置HTML锚点和其他CSS类。

    有效使用空格区块的提示和最佳实践

    空格区块是比较容易的WordPress区块使用的一个。它没有大量的设置或配置选项。

    但是,在使用它时,您可能需要牢记一些提示。例如,请记住,有效利用空白(也称为“负空间”)可以在您的网页设计中大有帮助。它可以帮助使您的页面看起来更干净,从而更专业。因此,在您的内容看起来过于拥挤或难以阅读的区域中考虑使用空格区块是明智之举。

    此外,我们还建议您仅在要向页面上的特定区域添加空白时才使用此区块,而不是在段落之间添加空格。对于后者,我们建议改用段落区块

    最后,为了确保页面的外观保持一致,您可能需要考虑为您使用的每个空格区块设置相同的高度。默认情况下,它设置为100像素,但您可以随意使用最适合您网站设计的任何内容。

    关于空白区块的常见问题

    在这一点上,您应该对这个WordPress区块以及如何使用它感到非常熟悉。但是,让我们回顾一些关于它的流行和常见问题,以确保我们已经涵盖了所有基础知识。

    如何调用空格区块?

    要在WordPress中找到这个区块,您有几个选择。第一步是导航到您想要将其添加到的文章或页面。接下来,单击“添加区块”按钮(或加号图标),然后在文本字段中搜索“空格”。或者,您可以直接在文本编辑器中键入“/spacer”,然后按Enter键。

    空格区块在文章和页面中有什么作用?

    正如它的名字一样,这个区块在你的WordPress页面和文章上的其他区块之间增加了空间。当您想在页面上创建更多空白或只是想扩大默认设置的区块之间的区域时,它可以是一个有效的工具。

    可在任何地方添加空格区块吗?

    您可以在WordPress站点上的任何位置使用空格区块,以授予您对区块编辑器的访问权限。当然,您最有可能使用它的地方是您的页面和文章。但是,您也可以在编辑WordPress工具时添加它。

    小结

    有很多方法可以组织您网站上的页面和文章,使其既实用又美观。如果您希望在页面上的区块之间创建更多空白,则空格区块是一个重要的工具。

    正如我们所见,此区块是一种分离WordPress内容中元素的简单方法。您可以根据需要轻松地将其多次插入您的文章和页面,然后以像素为单位自定义其高度。