标签: 古腾堡教程

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

    如何使用WordPress文件区块

    WordPress文件区块可以轻松地为您的页面和文章中的文件添加下载链接。这是最独特的WordPress区块之一,因为它根据所选文件的类型添加了不同的选项。知道如何很好地使用这个区块可以引起人们对下载的注意。

    在本教程中,我们将查看文件区块并了解如何将其添加到您的文章和页面。我们还将查看它的设置和选项,查看使用它的提示和最佳实践,并查看常见问题。

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

    添加文件区块

    要添加文件区块,首先,单击要放置区块的位置或编辑器左上角的区块插入器工具。接下来,搜索“文件”并选择它。

    快速添加文件区块方式

    您还可以按类型 /file 添加块,然后在您希望块出现的位置按 Enter 键,或从您键入时出现的选项中选择文件。

    文件区块初始化

    然后文件区块将被添加到您的内容区域。

    文件区块PDF预览

    要使用它,只需选择上传文件或选择媒体库来选择文件。PDF将显示文件的预览。PDF的工具会因浏览器而异。我正在Chrome中查看 PDF,其中包括用于显示或隐藏PDF菜单、查看标题、页码、比例、适合页面、旋转、下载、打印和查看PDF查看选项的PDF工具。

    文件区块下载按钮

    其他文件,例如图像,将显示文件名和下载按钮。

    文件区块设置和选项

    文件区块设置和选项

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

    文件区块工具栏

    文件区块工具栏

    当您选择区块时,文件区块工具栏位于块上方。

    文件区块文本设置

    选择文件中的文本,例如按钮的文件名,为文本添加新设置。

    更改区块类型或样式

    更改区块类型或样式

    您可以将区块样式更改为栏目或组合。栏目更改列数,而组合允许您将多个区块的样式控制为单个区块。

    拖动和移动

    拖动和移动文件区块

    拖动工具可让您将区块拖动到您想要的任何位置。您还可以使用移动工具的向上和向下箭头在您的内容中向上或向下移动区块。

    文件更改对齐

    文件更改对齐

    对齐选项包括左、右、宽幅和全幅。将其左右放置在屏幕的那一侧,并用其下方段落中的文本将其包裹起来。

    文件区块对齐方式

    这是宽幅。它将区块放置在内容区域的左侧。

    粗体和斜体

    文件区块下载按钮文字粗细

    选择文件名或下载按钮会显示粗体和斜体选项。这些会影响您突出显示的文本,它们可以一起使用或单独使用。我将文件名设为粗体,按钮文本设为斜体。

    更多选择

    文件区块工具栏下拉选项

    更多选项可打开用于设置文本样式的选项。我在示例中添加了其中的几个。它们包括:

    • 内联代码– 将文本样式设置为看起来像代码。
    • 内嵌图像– 将媒体库中的图像添加到鼠标光标所在的位置。我在按钮上添加了一个图像。
    • 键盘输入– 使用键盘 HTML 格式设置文本样式。
    • 删除线– 在文本中放置一行,如上图中的文件标题。
    • 下标– 使文本成为下标。
    • 上标– 使文本上标。
    • 文本颜色– 允许您更改文本的颜色,如上面的文件标题。图标在使用时移动到工具栏。

    文件区块下载按钮文字颜色

    对于颜色选项,包括预先选择的颜色或创建自定义颜色选择器。颜色选择器包括一个用于十六进制代码、RGB代码或HSL代码的字段。

    文件替换

    更换文件区块下载文件

    此选项可让您将文件与库中的另一个文件或您上传的文件交换。

    复制网址

    复制文件区块下载链接

    这会将文件的URL复制到剪贴板。您会在左下角看到一条消息,表明URL已被复制。

    选项

    文件区块更多选项

    选项包括:

    • 隐藏更多设置– 隐藏侧边栏。
    • 复制– 复制文件区块,以便您可以将其粘贴到您的内容中。
    • 新建副本– 在原始文件下放置文件区块的副本。
    • 在区块前插入– 在文件区块之前放置一个空格,您可以在其中添加区块。
    • 在区块后插入– 在文件区块之后放置一个空格,您可以在其中添加区块。
    • 移动到– 放置一条蓝线,让您控制将文件区块移动到的位置。
    • 作为HTML编辑 – 打开区块的代码编辑器版本,您可以在其中编辑HTML。
    • 添加至可重用区块– 将文件区块添加至可重用区块中。
    • 组合– 将区块添加到可以一起调整的组中。
    • 删除块– 删除文件区块。

    文件区块大小调整工具

    文件区块大小调整工具

    如果文件是PDF,您将在PDF预览下看到一个调整大小工具。抓住此工具并将其向上或向下拖动以调整预览区域的高度。

    文件区块侧边栏设置

    文件区块侧边栏设置

    侧边栏设置包括文本链接、下载按钮设置和高级。通过单击右上角的齿轮打开或关闭侧边栏。单击块会将侧栏更改为“文件区块”选项。

    文件区块PDF设置

    如果文件是PDF,则将添加一组新的PDF选项。

    PDF设置

    PDF显示内联嵌入

    显示内联嵌入允许您启用或禁用PDF预览。它默认启用。禁用它只会显示标题和下载按钮。此示例显示它已禁用。

    文件区块PDF预览高度

    以像素为单位的高度提供了一个滑块和一个字段,您可以在其中调整PDF预览的高度。使其小于其实际大小会在侧面添加滚动条。

    文本链接设置

    文件区块文本链接设置

    文本链接设置让您选择文件名链接的工作方式。您可以将其链接到媒体文件或文件的附件页面。您也可以在同一选项卡或新选项卡中打开它。

    文件下载按钮设置

    文件下载按钮设置

    此选项可让您隐藏或显示下载按钮。如果您使用文件名作为下载链接,这将非常有用。

    高级

    文件区块高级设置

    高级设置包括HTML锚点和附加CSS类。锚点会创建一个唯一的URL,因此您可以直接链接到该区块。CSS类字段允许您添加自定义CSS类以设置文件区块的样式。

    文件组合颜色设置

    文件组合颜色设置

    如果您已将文件区块转换为组合,那么您将看到文本、背景和链接颜色的设置。您仍然可以通过选择区块来访问常规设置。

    有效使用文件区块的提示和最佳实践

    为显示的标题链接命名,以便通过选择文本并键入新标题使链接对用户有意义。

    标记按钮,以便用户知道会发生什么。如果不需要,请禁用该按钮。

    设置按钮和标题文本的样式,使下载与其余内容区分开来。请务必使用易于阅读且与背景形成鲜明对比的颜色。

    如果要设置背景样式,请将区块转换为组合。

    调整PDF预览的大小以使其适合内容的设计区域。如果您想隐藏内容或第一页在您的内容中看起来不太好,请禁用PDF预览。

    关于文件区块的常见问题

    文件区块的目的是什么?

    提供下载按钮,以便访问者可以下载文件。

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

    它允许您提供可以设置样式和控制的链接和按钮。将链接粘贴到下载会将链接转换为嵌入区块,它可以以您想要的方式显示片段或预览。

    可以用于什么类型的文件?

    它可用于可下载的任何类型的文件,包括PDF、音频、视频、图像、文档、插件、子主题等。

    是否支持所有文件类型?

    不能。它不能上传WordPress不支持的压缩文件或其他扩展。

    可以下载多个文件吗?

    不能。每个文件区块一次只能连接一个文件。

    你能更新可下载的文件吗?

    是的。选择替换选项以选择新文件。您可以将其命名为与原始文件相同的名称。

    文件区块可以转换成另一个区块吗?

    是的。它也可以变成栏目或组合。

    小结

    这就是我们对WordPress文件区块的看法。这是一个简单的区块,可让您提供多种文件类型并包含链接的文本和按钮选项。两者都可以独立设计。如果文件是PDF并且它是可调整的,我喜欢它添加预览。此块非常适合从您的网站提供可下载文件的链接。

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

    如何使用WordPress视频区块

    WordPress视频区块使您可以轻松地将视频上传和添加到您的页面和文章。它为您提供了大量控制大小和功能的选项。使用此区块添加视频使内容看起来更专业和可取。幸运的是,视频区块易于使用。

    在本教程中,我们将探索视频区块。我们还将看到它的设置和选项,查看有关如何使用它的一些提示和最佳实践,以及常见问题。

    如何将视频区块添加至文章或页面

    将视频区块添加至文章或页面

    要将视频区块添加到您的内容中,首先,将光标放在您希望区块出现的位置,然后选择插入器工具。接下来,将打开一个搜索框,您可以在其中搜索区块或滚动查看选项。搜索视频并在结果中显示时选择它。

    视频区块插入快捷方式

    如果您愿意,可以在要放置区块的位置键入/video并按 Enter 键或从选项中选择它。

    视频区块初始化

    视频区块将放置在内容区域内。插入媒体的工作方式与图片区块相同。上传视频、从库中选择视频或插入要显示的视频的URL。如果URL来自YouTube等来源,则该区块将转换为该类型的区块。在您上传视频之前,选项很少。

    视频区块插入视频示例

    视频播放器包括所有基本播放选项,包括播放/暂停按钮、进度条、音频、全屏以及下载和画中画按钮。画中画将视频放置在右下角,以便在用户滚动浏览网站时可以播放。您可以在视频下方放置标题。

    视频区块设置和选项

    视频区块设置和选项

    选项和设置包括工具栏和侧边栏。在上传视频之前,您不会看到所有这些设置。

    视频区块工具栏

    视频区块工具栏

    单击视频区块内的任意位置以查看工具。在您在此区块下添加区块区域之前,某些工具可能不会显示。让我们详细看看每个设置。

    视频更改区块或样式

    视频更改区块或样式

    选择视频播放图标会打开一个下拉框,您可以在其中将区块转换为其他类型的区块。此示例显示封面。

    • 组合– 这会将区块添加到组中,以便您可以将它们作为单个区块进行调整。
    • 栏目– 这会将区块放置在列中。
    • 媒体和文本– 这会在媒体旁边添加文本,创建两列。
    • 封面– 这会在视频上放置一个标题。您可以将标题从段落区块更改为其他类型的文本区块或按钮。
    • 文件– 这会将视频更改为带有标题的按钮,允许用户下载视频而不是从网站播放。

    视频区块拖动工具

    视频区块拖动工具

    用鼠标抓住拖动工具将其移动到内容中的任何位置。将出现一条蓝线,指示在您四处拖动区块时将放置该区块的位置。

    更改视频区块位置

    然后视频区块将被放置在其新位置。

    视频区块移动

    视频区块移动

    使用向上和向下箭头将视频区块移动一个内容部分。

    视频区块对齐方式

    视频区块对齐方式

    对齐选项包括左、中、右、宽幅和全幅。左右对齐将下一个区块中的文本环绕在视频周围。我已将此示例设置为右对齐。

    视频区块宽幅对齐方式

    这是宽幅。它占据了大部分屏幕。

    视频区块文本轨道

    视频区块文本轨道

    文本轨道在视频播放时显示字幕。它们的格式为WebVTT(Web视频文本轨道).vtt文件。文件从媒体库加载。

    视频区块文本轨道选项

    上传 .vtt 文件后,您将看到编辑曲目的选项。添加标签,选择语言,然后选择曲目类型。

    标签是用户在查看可用轨道时将看到的文本轨道的标题。

    源语言是文本轨道的语言。

    种类是指将显示的轨道类型。选项包括:

    • 字幕– 对话的翻译。
    • 说明文字– 对话、音效、音乐等的转录。
    • 内容描述– 描述正在发生的事情的文本。
    • 章节– 用于导航的章节标题。
    • 元数据– 供JavaScript使用的数据。

    视频区块字幕选项

    然后将字幕添加到用户可以选择的播放器选项中。

    视频区块替换

    视频区块替换

    这使您可以用不同的视频替换视频。

    视频区块选项

    视频区块更多选项

    选项包括隐藏更多设置、复制、复制、在之前或之后插入、移动到、作为HTML编辑、添加至可重用区块、组合和删除区块。

    以下是选项的作用:

    • 隐藏更多设置– 这会隐藏右侧边栏,消除干扰并扩展您的工作空间。
    • 复制– 这会将视频区块复制到剪贴板,以便您可以将其粘贴到内容中的任何位置。
    • 创建副本– 这会在原始区块下添加区块的副本。
    • 在区块前插入– 这会在此区块上方添加一个区块区域,以便您可以放置​​另一个区块。
    • 在区块后插入– 这会在此区块下方添加一个区块区域,您可以在其中放置另一个区块。
    • 移动至– 这使您可以向上或向下移动区块。它是通过使用箭头键在您想要区块的位置放置一条蓝线并按Enter来移动的。
    • 作为HTML编辑 – 这仅显示此区块的HTML,其他区块保持正常。
    • 添加至可重用区块– 将区块添加到您的可重用区块中,以便您可以在其他页面或文章上重用它。
    • 组合– 这会将区块添加到组中,以便您可以将所有区块作为一个单元进行调整。
    • 删除区块– 这将删除区块。

    视频区块字幕选项

    视频区块字幕选项

    标题也有一组选项。单击标题区域内的任意位置会打开一个带有粗体、斜体和链接选项的小工具栏。它还包括格式化选项。选项包括:

    • 内联代码
    • 内嵌图片
    • 键盘输入
    • 删除线
    • 下标
    • 上标
    • 文字颜色

    每个都会影响您突出显示的文本。

    视频区块设置

    视频区块设置

    视频区块的设置包括视频和高级。让我们看看两者。

    视频设置

    WordPress视频区块视频设置

    视频设置可让您控制播放器的工作方式。选项包括:

    • 自动播放– 当页面加载时自动播放视频。
    • 循环– 连续循环播放视频。
    • 静音– 使音频静音。
    • 回放控制– 隐藏或显示播放器控件。当控件隐藏时,用户将无法控制视频。必须启用自动播放。
    • 内联播放 – 在元素的播放区域内播放视频。
    • 预加载– 设置加载页面时下载的视频量。选择自动(整个视频)、元数据(仅基本信息)或无(不自动下载任何内容)。
    • 海报图像– 可让您用特色图像替换视频第一帧的屏幕截图。除非您停用它们,否则它仍会显示播放器控件。我在上面的例子中添加了一个新图像。

    高级

    WordPress视频区块高级设置

    高级视频设置包括HTML锚点和其他CSS类。

    • HTML锚点– 允许您指定用作此特定区块的自定义URL的文本。
    • 附加CSS类– 提供一个字段来添加要用于此区块的任何CSS类。

    有效使用视频区块的提示和最佳实践

    如果您要嵌入来自YouTube或Vimeo等来源的视频,请使用它们的区块而不是视频区块。

    压缩视频并减少其大小和加载时间。

    使用在线字幕生成器或类似应用程序创建 .vtt 轨道。

    如果您想提高页面速度,请将预加载设置为无。自动下载的数量会影响您的页面加载速度。

    使用左右宽度选项在视频周围放置文本,使其在视觉上看起来很有趣。使用宽和全宽选项来强调视频。

    不要使用视频图像的第一帧,而是创建您想要点击的特色图像。

    关于视频区块的常见问题

    这个区块的目的是什么?

    此区块使您可以轻松地在您的网站上托管视频,并让您控制播放器的工作方式。

    视频区块和视频嵌入区块有什么区别?

    来自YouTube和Vimeo等来源的嵌入视频无法让您控制播放器的功能。

    使用此区块的最佳方法是什么?

    使用循环自动播放并删除产品演示和简短教程剪辑的播放器控件。对于较长的视频,请禁用自动播放并保持启用控件。

    小结

    这就是我们对WordPress视频区块的看法。我喜欢它提供的控制水平。左右对齐特别适合周围的内容,宽宽度是吸引人们注意视频的好方法。添加海报图片可以吸引用户的注意力。此区块是产品演示、教程、音乐等的绝佳选择。

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

    如何使用WordPress分隔符区块

    您在网站上安排和显示内容的方式会显着影响您的参与度和转化率。为了增强用户体验 (UX)并使您的页面和文章更易于使用,拆分大块文本是一个明智的主意。有多种方法可以做到这一点,但最简单的选择是使用WordPress分隔符区块。

    在这篇文章中,我们将向您介绍如何将分隔符区块添加到您的WordPress文章或页面。我们将解释它提供的每个设置和选项,为您提供有效使用它的技巧,并回答一些常见问题。

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

    在您的内容中添加任何WordPress区块是一个快速而简单的过程。首先,导航到要插入分隔符的页面或文章。

    单击添加区块按钮 (1),然后在文本字段 (2) 中搜索“分隔符”。这将是第一个选项 (3):

    添加分隔符区块

    您还可以通过在任何段落块的编辑器中键入“/separator”来插入此区块。当您按Enter键时,将自动插入区块。

    分隔符区块设置和选项

    每个WordPress区块都有其各自的设置和控件。例如,分隔符区块提供了几种直接在编辑器中配置它的方法。

    将区块插入文章后,将出现一个工具栏菜单:

    分隔符区块设置和选项

    让我们来看看每个选项的含义:

    1. 转换允许您将区块转换为组合或栏目。
    2. 对齐方式可用于将线的对齐方式更改为左对齐、居中对齐或左对齐
    3. 更多选项提供了一些额外的设置

    更多选项菜单下,您可以复制块并在其前后插入另一个元素。

    在屏幕的右侧,您可以找到其他块设置。例如,在样式部分下,您可以选择默认样式或创建粗线或虚线:

    分隔符区块样式设置

    您还可以在下拉菜单中设置默认样式

    颜色部分下,您可以更改分隔线的颜色:

    分隔符区块颜色设置

    您可以从调色板中包含的一种预设颜色中进行选择。但是,如果您想应用自定义颜色,您也可以单击自定义颜色链接。

    如果您想添加自己的CSS,可以通过单击“高级”选项卡来实现。然后您可以在文本字段中输入您喜欢的任何内容。

    有效使用分隔符区块的提示和最佳实践

    分隔符区块是一个相对简单的和直接的WordPress的功能。一旦您弄清楚如何将其插入文章中,您就应该能够轻松使用和自定义它。

    但是,我们确实有一些建议,您可能需要考虑更有效地使用此元素。例如,记住谨慎使用分隔符很重要。

    如果您有一篇冗长的博客文章,最佳做法是最多每隔几段添加一行。过于频繁地使用它们可能会分散注意力,而不是无缝分解文本的一种方式。

    此外,如果您计划在您的站点中经常使用分隔符并希望保持统一的样式,您可能需要将分隔符添加到您的可重用区块中。这样,您就不必经常应用所需的样式和颜色。相反,您可以简单地从保存的集合中插入它。

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

    到目前为止,您应该对WordPress分隔符区块以及如何使用它有一个深入的了解。但是,让我们回顾一下有关此区块的一些最常见问题,以确保我们已涵盖所有基本信息。

    如何调用WordPress分隔符区块?

    您可以通过导航到任何文章或页面在WordPress中找到此区块。接下来,在要添加线条的文本区块之间单击,然后选择加号图标。

    在搜索字段中,输入“分隔符”,然后单击第一个选项。或者,您可以通过在段落块中键入“/separator”,然后按 Enter键来找到它。

    分隔区块和空格区块有什么区别?

    如果您是块编辑器的新手,您可能想知道分隔符区块和空格区块之间有什么区别。这两个功能都可用于在内容区块之间添加空间。

    但是,空格区块只是添加了白色或负空间。分隔符区块,则主要是增加了一个可见的线。

    在哪里使用WordPress分隔符区块?

    您可以在WordPress中可以访问区块编辑器的任何位置插入此元素。因此,您可以在页面和文章中使用它,也可以在编辑WordPress小工具时使用它

    小结

    为了让您的网站内容和博客文章美观且易于使用,最好将大块文本分解为更小、更易消化的文本。有几种不同的方法可以解决这个问题。但是,最简单的选择之一是使用分隔符区块。

    这个WordPress区块将在内容区块之间添加一条极简线条。它还提供各种样式和颜色选项,让您可以将其与当前的主题和品牌无缝集成。您可以将其插入到您的任何WordPress文章和页面中,以使您的内容看起来更好、更易于阅读。

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

    如何使用WordPress更多区块

    保持网站页面上的内容简洁和有条理很重要,尤其是在您的主页上。幸运的是,WordPress更多区块可让您向访问者展示您的帖子以及全文链接。知道如何正确使用它可以帮助您获得更干净、更有效的WordPress页面。

    在这篇文章中,我们将解释如何将此区块添加到您的WordPress文章中。然后我们将讨论它的每个设置和选项、有效使用它的技巧和最佳实践,以及一些常见问题。

    如何在WordPress文章中添加更多区块

    向您的WordPress内容添加区块既快速又简单。首先,导航到要插入更多区块的文章。请注意,您只能将此元素添加到您的文章中。不幸的是,它不适用于您的WordPress页面。

    此外,请务必注意,您需要在希望读者看到的摘要文本之后插入此区块。例如,也许您想在第一段之后切断文章。如果是这种情况,您可以在第一段和第二段之间插入此区块。

    为此,请单击“添加区块”图标 (1),在搜索字段 (2) 中键入“更多”,然后选择第一个选项 (3):

    如何添加更多区块

    或者,您可以直接在WordPress编辑器的段落区块中输入“/more” 。然后按 Enter,块将自动插入到文章中。

    您可能已经知道每个WordPress区块都有自己独特的一组控件和设置。

    更多区块设置和选项

    将此区块插入文章后,顶部会出现一个工具栏。它只有两个图标。第一个是更改区块类型或样式:

    更多区块设置和选项

    此选项可让您更改去块的样式。您可以使用它来创建栏目或组。

    第二个图标通向区块的选项:

    更多区块选项内容

    在这里,您会发现可以采取的各种其他操作。例如,您可以复制该区块,在其前后插入另一个元素,或者将其添加到您的可重用区块中。

    您还可以编辑默认文本。为此,您可以单击文本,然后将其更改为您想要的任何内容:

    更多区块样式展示

    右侧边栏中还有一个附加设置。如果它不可见,您可以通过单击右上角的齿轮图标访问此设置面板。然后选择区块选项卡。

    更多区块设置项

    有一个选项可以隐藏完整内容页面上的摘要。如果您打开此开关,您的访问者在单击“阅读更多”后将无法看到摘要。

    有效使用更多区块的提示和最佳实践

    既然您了解了此区块及其各种设置的工作原理,您可能想知道如何使用它。有几个因素可以帮助您有效地利用它。

    首先,请记住您可以更改显示的文本。默认情况下,该区块使用“阅读更多”作为链接文本。但是,您可以根据需要对其进行编辑,以匹配您网站的风格和基调。一些例子包括:

    • 继续
    • 阅读全文
    • 下一页

    此外,我们建议您对您选择包含在“阅读更多”链接上方的摘要保持战略性。由于您无法展示全文,因此确保您提取或撰写引人入胜的内容非常重要,以吸引访问者的注意力。这样做可以极大地激励读者实际点击链接,从而提高您的参与度和转化率。

    更多区块功能的目的是提供一种简单而有效的方式来截断您的博客条目。但是,此元素可用于多种情况。许多WordPress用户将其严格应用于博客存档页面或主页。

    但是,还有一些其他情况可以派上用场。例如,如果您有一个FAQ页面,这个块可以让您轻松地为每个问题添加一个简洁的答案,以及一个指向详细解释的链接。

    更多区块的常见问题解答

    在这一点上,您应该几乎了解有关此 WordPress 元素的所有信息,包括它是什么以及如何使用它。在我们开始之前,让我们通过回答有关此块的一些最常见问题来回顾一下关键信息。

    在哪里找到更多区块?

    您可以通过导航到您网站上的任何文章来找到此区块。然后,在您希望显示“阅读更多”链接的摘要段落之后,单击加号图标(“添加区块”按钮)。您可以在文本字段中搜索区块。

    或者,您可以通过在段落块中键入“/more”来找到它。然后按 Enter自动将此元素插入文章中。

    这个区块有什么作用?

    简而言之,此元素为您提供了一种简单易用的方式来呈现文章的预览或摘要,而实际上不必包含全文。相反,您可以在内容预告之后插入区块以及“阅读更多”链接。您还可以自定义链接文本以说出您想要的任何内容,例如“阅读全文”。

    应该在哪里添加这个去块?

    您可以将此区块添加到您的任何WordPress文章中。不幸的是,您目前无法将其插入您的页面。同样重要的是要提到某些主题可能不支持此元素。如果您无法找到它,您可以尝试切换到默认主题以查看您当前的主题是否有问题。

    小结

    创建主页和存档页面时,您可能希望包含指向许多不同文章的链接。然而,为了吸引访问者实际点击并阅读完整的文章,插入每篇文章的简短摘录以吸引他们的注意力是有帮助的。

    正如我们在这篇文章中所讨论的,“更多”区块是一项有用的功能,您可以使用它为用户提供全文文章的预览。您可以将其添加到任何WordPress文章中,并根据需要自定义默认文本。

  • 古腾堡编辑器教程:如何使用WordPress媒体和文本区块教程

    如何使用WordPress媒体和文本区块教程

    WordPress使您能够分别添加段落区块图片区块。但是,借助媒体和文本区块,您也可以并排放置两种类型的元素。如果您知道如何导航其设置,它甚至包括多种布局供您选择。

    在本教程中,我们将向您展示如何将这个媒体和文本多功能区块添加到文章和页面。我们将介绍配置选项,并讨论充分利用此元素的提示和技巧。

    如何将媒体和文本区块添加到文章或页面

    在媒体和文本区块,您可以添加书面内容,视频和图像文件通过使用多个布局并排。要使用它,请打开您要编辑的文章或页面。单击加号并选择媒体和文本 选项:

    将媒体和文本区块添加到文章或页面

    默认情况下, 媒体和文本区块将使用将图像或视频文件放在左侧并将写入的内容放在右侧的布局。您可以单击“上传” 或“媒体库” 选项来选择文件:

    上传媒体至文本和媒体区块

    放置图像或视频文件后,您可以移动到区块的内容… 一侧并开始编写。以下是添加一些内容后的外观示例:

    文本和媒体区块编辑器显示预览

    请注意,区块的每个部分都有单独的格式菜单。默认情况下,WordPress会在您的媒体文件旁边放置一个段落元素。但是,您可以将其替换为其他基于文本的元素:

    媒体和文本区块设置选项

    在多种类型的书写元素之间进行选择的能力使媒体和文本区块成为一个令人难以置信的多功能选项。在下一节中,我们将向您展示如何配置其设置。

    媒体和文本区块设置和选项

    使用媒体和文本区块时,您可以使用两组配置选项。一个是格式化工具栏,为您使用的每个区块提供自定义选项。第二个是设置菜单,具有更全面的样式调整。让我们从格式工具栏开始。

    工具栏设置

    如果您将鼠标悬停在媒体和文本区块的图像或视频部分上,您将看到一个格式菜单,其中包含以下选项:

    1. 将区块转换为另一种类型的元素
    2. 通过从两个选项中进行选择来更改区块的布局
    3. 在区块内添加指向媒体文件的链接
    4. 用不同的选项替换媒体文件

    这是一个快速备忘单,显示了每个选项在格式工具栏中的位置:

    媒体和文本区块工具栏设置

    如您所见, 媒体和文本区块使您可以在多个布局选项之间进行选择。每种情况下的主要区别在于视频或图像的位置:

    媒体和文本区块布局

    与图片区块不同,媒体和文本元素的格式工具栏不包括用于编辑图像的选项。但是,我们将在一分钟内向您展示如何进一步调整您的图片。

    现在,让我们转向媒体和文本区块的写入部分。默认情况下,它将使用段落元素,但您可以将其更改为区块编辑器支持的任何其他基于文本的选项。

    您选择的基于文本的区块将更改您将鼠标悬停在其上时出现的格式选项。在这里您可以看到与段落区块相对应的设置:

    媒体和文本区块段落元素

    如果您想详细了解每种文本元素的不同格式选项,我们建议您查看我们的WP教程。我们有最重要的区块编辑器元素的完整指南,向您展示如何添加和配置单个区块。

    其他选项

    接下来,在选择媒体和文本区块的同时单击编辑主菜单右上角的齿轮图标。在那里,您可以访问带有其他配置选项的侧边栏:

    媒体和文本区块其他选项

    让我们来看看每个设置所涵盖的内容:

    1. 样式:这使您可以为区块添加边框。请记住,边界的格式将取决于您的主题设置。
    2. 颜色:这使您可以更改区块及其背景中的文本和链接颜色。
    3. 媒体和文本设置:您可以在图像文件中添加替代文本并在此处调整其大小。此部分还包括用于为移动显示调整区块和裁剪图像的选项。

    以下是区块的颜色选项的快速浏览:

    媒体和文本区块颜色设置

    继续,如果您在“媒体和文本”设置 选项卡中启用“在移动设备上堆叠显示” 选项,当访问者从移动设备查看您的网站时,它会折叠区块。这是它的外观:

    在移动设备上堆叠显示媒体和文本区块内容

    这涵盖了您需要了解的有关更改媒体和文本区块的格式和设置的所有信息。现在是时候讨论这个元素的实际应用了。

    有效使用媒体和文本区块的技巧和最佳实践

    在媒体和文本区块是直接使用,并且可以完美集成到大多数文章和页面。本质上,您正在处理两个分组区块和两个布局选择。

    您可以使用列复制区块的外观和样式以并排添加图像和段落区块。但是,当存在媒体和文本功能时,几乎没有理由选择这种方法。

    由于这是一个如此简单的区块,我们唯一的建议是格式化元素的写入部分以与您选择的媒体文件完美匹配。例如,您可能不想在单个单词的段落或小列表旁边放一张大照片。您会希望这两个元素看起来平衡。请记住,您可以在区块内调整图像大小。

    最后,请记住,您使用媒体和文本区块添加的任何图像仍可用于搜索引擎优化 (SEO) 目的。这意味着您仍然应该考虑遵循基本的图像搜索引擎优化指南。

    关于媒体和文本区块的常见问题

    尽管使用媒体和文本区块相对简单,但您可能仍然对这个特定元素有一些疑问。考虑到这一点,让我们回顾一下有关此功能的一些最常见问题。

    什么时候应该使用媒体和文本区块?

    在媒体和文本区块可以展示旁边写内容的图像或视频的最佳方式。请记住,区块编辑器允许您在多种类型的基于文本的元素之间进行选择。

    可以将这个区块的媒体和文本部分分开吗?

    您可以将媒体和文本区块转换为栏目。这样做会将两个元素分成单独的区块,但保留原始布局。

    可以更改媒体和文本区块的字体设置吗?

    在媒体和文本区块您不可以更改字体设置。但是,您可以更改文本和任何包含的超链接的颜色。如果要访问更高级的字体相关配置,则需要将区块转换为栏目。

    小结

    在媒体和文本区块可能成为WordPress的您最常用的元素之一。图像和文本完美地搭配在一起,此区块使您可以将它们并排放置,并采用适合任何主题和页面的简单布局。

    使用此 功能时,请记住您不必坚持使用简单的段落。默认情况下,该区块会在您的图像或视频文件旁边添加一个段落元素。但是,您可以将其替换为区块编辑器库中的其他基于文本的选项(例如列表或标题)。

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

    如何使用WordPress组区块

    使用区块编辑器将单个元素添加到您的文章或页面很简单。但是,如果您打算在整个网站中使用类似的区块,则将它们放在一起并将它们保存为模板是有意义的。一旦你掌握了组区块,这样做就变得简单了。

    在这篇文章中,我们将谈论哪些组区块原理,以及如何将它添加到您的文章和网页。我们还将向您展示如何配置其设置,并讨论有关分组元素的一些提示和最佳实践。

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

    添加此区块很简单,但需要的过程与您将用于其他区块的过程不同。首先,打开您要处理的文章或页面,选择添加新区块,然后选择“组” 选项:

    将组区块添加至文章或页面

    放置此区块时,将出现一个新部分,包括添加多个元素的选项。请注意,现在有两个用于添加区块的按钮。如果您使用第一个,您将在集合中添加一个项目。第二个按钮将在组区块之后 添加新模块:

    添加组区块操作

    您可以在组区块中插入多个任何类型的元素。在我们的示例中,我们添加了三个表块。乍一看,可能不清楚该组中包含哪些元素。为避免混淆,您可以单击块编辑器主菜单中的列表视图 按钮:

    组区块表格管理

     

    这是将组区块添加到文章和页面的第一种方法。另一种方法是在组中添加您想要的所有区块,然后在编辑器中选择它们。如果您选择多个元素,块编辑器将为您提供链接它们的选项:

    转化为组区块

    一旦您的块准备就绪,请记住您可以将特定分组保存为模板或可重复使用的区块。我们将在下一节中向您展示如何做到这一点。

    组区块设置和选项

    由于组区块可以包含多个不同的元素,因此您可能会看到多个格式菜单。本节将向您展示如何使用此区块的可自定义选项和常规设置。

    工具栏设置

    如果将多个表格放在一起,则可以选择每个表格区块并访问其格式设置和选项:

    组区块工具栏设置

    如果您选择整个组区块,您可以查看不同的、更直接的格式菜单。以下是它包含的选项:

    1. 将区块转换为栏目
    2. 使用拖放功能移动区块,或向上或向下移动元素的位置
    3. 修改区块的宽度
    4. 其他选项,包括分解集合或将其保存为可重复使用的区块

    让我们看看在组区块的格式菜单中在哪里可以找到每个设置 :

    组区块工具栏功能说明

    这里的大多数选项都相对简单。您可能会花更多时间调整集合中各个区块的格式。这里的两个突出设置是将组区块保存为可重用元素 (1) 或将其分解 (2) 的选项:

    组区块更多选项

    如果您选择取消组,则块将分成单独的元素。将添加到可重复使用的区块选项将让您保存独特的分组和它的设置,这样你就可以在其他的文章或网页重用它:

    创建可重用区块

    保存块后,当您向任何文章或页面添加新元素时,它会显示在“可重用” 选项卡下:

    可重用区块列表

    您可以将可重复使用的区块添加到WordPress中的任何页面或文章。但是,您可能需要更改元素的一些样式设置以使其适合。

    其他选项

    每个WordPress区块都带有各种设置,您可以通过单击区块编辑器主菜单右上角的齿轮图标来访问这些设置。

    组区块是改变你的设定(1)风格的街区,提供设置,修改它的颜色(2),和边框与内部元件(3)之间添加填充物:

    组区块设置

    组区块,您可以两种风格之间进行选择:有边框或者无边框。如果您选择“边框” 选项,它将在内部组件周围添加一个边框。但是,设置菜单不允许您更改边缘的样式或颜色:

    组区块边框设置

    继续,您可以为文本、背景和区块内的链接设置新颜色。但是,请记住,每个内部元素的单独设置将覆盖这些全局选项:

    组区块颜色设置

    然后,您可以单击“间距” 选项卡来更改区块边框与其内部元素之间的填充。为此,您需要以像素为单位指定距离:

    组区块边框距离设置

    一旦您对区块的配置和样式感到满意,您就可以转到该文章或页面中的其他元素。

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

    您可以使用组区块来链接您想要的任何元素。但是,我们建议您仅在有令人信服的理由时才将项目分组。使用此 块的一些重要原因包括:

    1. 自定义一组具有相似设置的区块。
    2. 在文章或页面布局中移动选定的区块,同时将它们保持在一起
    3. 保存一组区块以便稍后在另一个文章或页面上重用它们。

    如果您改变了将一组区块链接在一起的想法,请记住,您始终可以将它们分开,并且不会影响它们的单独设置。一旦您熟悉了区块编辑器,您就可以创建华丽而复杂的元素,您可以在整个网站中重复使用这些元素。

    关于组区块的常见问题

    到目前为止,您几乎了解了有关WordPress组区块的所有信息。最后,我们汇总了有关此元素的最常见问题的集合,以确保您不会遗漏任何关键细节。

    我可以将任何WordPress区块组合在一起吗?

    使用组区块,您可以链接任何WordPress的区块。因此,您可以使用它来组合包含多个元素的复杂设计。

    我可以编辑组内的单个区块吗?

    区块编辑器使您可以访问包含您正在处理的整个组区块的“全局”选项 。此外,您仍然可以访问集合中每个元素的格式设置和样式设置。

    组区块与可重用元素相同吗?

    您可以将大多数块保存为区块编辑器中的可重用元素。但是,组区块使您能够将整组区块组件保存为单个可重复使用的项目。

    小结

    组区块的WordPress的区块编辑器中最有趣的功能之一。它使您可以将它们链接在一起并同时自定义它们,而不是单独处理区块。

    您可以将组区块保存为可重复使用的元素,您可以将这些元素添加到整个站点中,如果要使用单个组件,则可以拆分等等。考虑到WordPress区块编辑器使您能够对任何类型和数量的区块进行分组,因此您几乎无法使用此功能。

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

    如何使用WordPress封面区块

    WordPress封面区块很有趣。它允许您在背景中放置图像、视频或纯色,并将内容区块添加到前景。这意味着您可以将区块放置在其他块上。它比大多数块有更多的选择。了解如何使用封面区块可以极大地增强您网站的设计。

    在本教程中,我们将了解封面区块的功能并查看其设置和选项。我们还将看到有关如何使用它的一些最佳实践以及常见问题解答。

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

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

    要将封面区块添加到您的页面和文章,请选择您的内容中或页面左上角的区块图标,输入区块的名称,然后选择它。

    添加WordPress封面区块快捷方式

    您也可以输入/cover并按 Enter 键或选择区块。

    封面区块上传媒体

    然后,您的内容中将有一个封面区块,您可以在其中添加图像或视频等媒体,或使用颜色作为背景,并将文本置于前景中。从媒体文件夹或颜色中选择内容后,文本选项会出现在前景中。

    封面区块编辑器示例

    我从我的媒体库中添加了一张图片,并在图片上添加了一个标题。标题是一个段落区块。您可以将其更改为其他类型的区块、嵌入视频等。

    封面区块与其他区块组合

    您还可以通过按 Enter 键添加多个区块。像往常一样从区块中选择。

    无图封面区块

    您还可以从一种预选的背景颜色中进行选择。

    封面区块背景颜色

    该颜色可用作图像的叠加层。

    封面区块设置和选项

    封面区块设置和选项

    封面区块有两个带有设置和选项的区域。第一个是封面区块工具栏。第二个是右侧栏中的封面区块选项。

    封面区块工具栏

    封面区块工具栏

    单击封面区块中的任意位置可打开其工具栏。

    更改封面区块类型或样式

    更改封面区块类型或样式

    第一个设置更改栏目,让您分组、更改图像,以及从默认样式或边框中选择样式。悬停显示预览。我将鼠标悬停在图像上。图像删除您在叠加层中的内容区块。

    拖动或移动

    拖动或移动封面区块

    抓住拖动工具(6 个点)将块拖动到您想要的任何位置。移动工具允许单击箭头向上移动区块或内容中的文本。

    对齐方式

    封面区块对齐方式

    对齐选项包括左、中、右、宽幅和全幅。左右包裹区块和它下面的段落。

    宽幅封面区块示例

    这是全幅图像。这可用于创建标题、划分部分等。

    更改内容位置

    更改封面区块内容位置

    这将选择内容位置。它打开一个带点的 3×3 网格。选择一个点会将内容移动到图像中的那个位置。

    切换全屏

    全屏显示封面区块

    这会将图像设置为其全屏,而不是调整其大小。

    应用双色调滤镜

    封面区块应用双色调滤镜

    从预先选择的选项中选择双色调。一种适用于阴影,另一种适用于高光。

    封面区块双色调设置

    在滑块上选择一种颜色进行调整。

    封面区块颜色阴影设置

    在滑块下选择一种颜色以选择预选的颜色。

    代替

    WordPress封面区块代替

    这将打开媒体选项,以便您可以上传或从库中选择其他图像。

    更多选项

    封面区块更多选项

    更多选项包括:

    • 隐藏更多设置 – 隐藏右侧边栏。
    • 复制– 复制封面区块,以便您可以将其粘贴到页面或文章中的任何位置。
    • 创建副本– 创建封面区块的副本并将其放置在原件下方。
    • 在区块前插入– 在封面去块上方为另一个区块添加空间。
    • 在区块后插入– 在封面区块下方为另一个区块添加空间。
    • 移动到– 让您通过使用箭头键向上或向下移动蓝线来移动区块。按回车键,你的方块就会移动到蓝线的位置。
    • 添加至可重用区块– 将区块添加到您的可重用区块中,以便您可以在任何页面或文章中使用它。
    • 组合– 将区块添加到组中,以便您可以将它们作为一个单元进行调整。
    • 删除区块– 删除区块。

    封面区块内容

    封面区块内容

    选择内容会打开另一组仅用于内容的工具。默认是一个段落区块,包括工具栏和侧边栏设置的所有标准选项。您可以对其进行转换或添加任何区块。这为您提供了许多内容选择。

    选择封面

    封面区块选择封面

    这将关闭内容工具栏并打开封面区块工具栏。

    封面区块调整大小

    封面区块调整大小

    通过拖动图像底部的圆圈来调整图像大小。

    封面区块设置

    封面区块设置

    封面区块设置位于右侧边栏中。单击区块或齿轮以显示侧边栏。如果您选择块内容中的区块,则会显示其侧边栏设置。

    样式设置

    封面区块样式设置

    显示带或不带边框的区块。您还可以设置默认值以显示边框。它包括一个预览,因此您可以在选择它之前查看它的外观。

    间距

    封面区块间距设置

    为所有侧面或特定侧面增加空间。单独选择每一面或将它们链接在一起以一次调整它们。

    媒体设置

    封面区块媒体设置

    选择区块内显示的图像部分。您可以选择一个固定的背景(视差),如果背景对于该区域来说太小,则可以重复该背景,并通过移动一个圆圈或指定左侧和顶部位置来指定焦点。您也可以从这里清除媒体。只有焦点选择器可用于视频。

    封面区块样式设置

    此示例显示固定背景。当文本滚动时,图像保持原位,从而产生视差效果。

    封面区块视差效果

    这是重复的背景。它非常适合用小图像创建有趣的图案。

    分辨率

    封面区块分辨率设置

    通过在字段中输入高度以像素为单位指定高度。这与图像底部的拖动工具相同。

    覆盖

    封面区块覆盖设置

    封面区块有很多覆盖选项。选择一种预制颜色并选择其不透明度。从纯色或渐变中选择。您将实时看到变化。如果您选择显示颜色而不是图像,您可以在此处更改颜色。此示例显示纯色。

    封面区块纯色或渐变色覆盖

    您还可以选择自定义颜色。这将打开一个颜色选择器,您可以在其中使用窗口中的颜色、使用滑块选择色阶或输入十六进制、RGB或HSL代码。

    封面区块覆盖颜色设置

    渐变选项可让您选择将显示的两种颜色。在线性或径向之间进行选择。您还可以设置颜色的不透明度。我在这个例子中选择了径向。

    高级

    封面区块高级设置