首页 » 博文 » wpbeginner » 最佳教程 » 如何在 WordPress 中的图像顶部添加文本(3 种方法)

如何在 WordPress 中的图像顶部添加文本(3 种方法)

您想在 WordPress 中的图像顶部添加文本吗?

文本叠加是提供有关图像的一些额外信息的好方法。这也是创建横幅、标题甚至在线广告的快速简便的方法。

在本文中,我们将向您展示如何在 WordPress 中的图像顶部添加文本。

如何在 WordPress 中的图像顶部添加文本

在 WordPress 中在图像上添加文本

图像可以让您的 WordPress 网站看起来更有趣,并有助于分解大段落的文本。

然而,有时您的图像可能需要更多解释。例如,您可以在图像顶部添加文本来解释图像显示的内容以及将其添加到帖子中的原因。

许多WordPress 博客还在图像顶部添加文本,以创建引人注目且信息丰富的横幅和标题。

在这篇文章中,我们使用三种不同的方法在 WordPress 中的图像上添加文本。如果您喜欢直接跳转到特定方法,那么您可以使用以下链接:

在 WordPress 中的图像顶部添加文本的一种方法是使用 Cover 块。您可以使用此块显示任何图像,然后在图像上键入文本。这使得封面块非常适合创建英雄图像、标题和横幅。

要将封面块添加到页面或帖子,只需单击 WordPress块编辑器中的加号 (+) 即可。

您现在可以输入“封面”并在出现时选择正确的块。

WordPress 封面块

默认情况下,封面块有一个占位符图像和一些占位符文本。

要替换默认图像,只需单击以选择图像即可。完成后,单击“替换”按钮。

如何在 WordPress 中的图像顶部添加文本

如果您想使用WordPress 媒体库中已有的图像,只需单击“打开媒体库”即可。然后您可以选择现有图像。

如果您想上传新图像,请单击“上传”。

将图像上传到 WordPress 封面块

这将打开一个窗口,您可以在其中选择计算机中的任何文件。

选择图像后,您可以使用块设置来创建一些有趣且引人注目的效果。例如,您可以在访问者滚动页面时将图像固定在适当的位置,或者向图像添加颜色叠加层。

彩色封面覆盖

如果您确实使用叠加层,则可以使用“不透明度”滑块更改其不透明度。不透明度设置控制背景图像的透明度。

当您对图像的外观感到满意时,您就可以添加一些文本了。

默认情况下,封面块有一个标题和一个段落块,您可以在其中在图像顶部添加文本。

如何在 WordPress 中的图像顶部添加文本

要添加一些文本,只需单击以选择标题或段落块。然后,继续输入您要使用的文本。

当您在图像顶部添加文本时,该文本有时可能难以阅读。对于视力不佳的游客来说尤其如此。要了解更多信息,请参阅我们有关如何提高 WordPress 网站可访问性的指南。

话虽这么说,您可能希望对文本进行样式设置,使其更易于阅读。

如果您正在使用标题块,那么您还可以尝试不同的标题样式,看看哪一种最容易阅读。

在 WordPress 图像上设置文本样式

您还可以使用对比色来帮助您的文本脱颖而出。

要选择不同的颜色,请选择右侧菜单中的“块”选项卡。然后,继续并单击“颜色”以展开此部分。

完成后,点击“文本”。这将打开一个弹出窗口,您可以在其中为块中的所有文本选择新颜色。

更改图像顶部文本的颜色

通常,较大的文本更容易阅读。

要使文本更大,请继续单击“大小”旁边的字段,然后在此字段中输入更大的数字。

在 WordPress 中的图像顶部添加文本

一旦您对封面块的外观感到满意,您就可以像平常一样发布或更新您的页面。现在,如果您访问WordPress 网站,您将在图像顶部看到文本。

方法 2:使用图像块在图像顶部添加文本

封面块非常适合创建横幅和标题。但是,您也可以在标准 WordPress 图像块上添加文本。

首先,您需要向页面或帖子添加图像块。为此,只需单击 WordPress 块编辑器中的加号 (+) 即可。

然后,您可以输入“图像”并选择正确的块将其添加到您的帖子中。

WordPress 图像块

然后,您可以从计算机上传图像,或单击“媒体库”从 WordPress 媒体库中选择图像。

选择图像后,您可以按照上述相同过程更改其焦点、添加叠加层并更改不透明度。

您还可以尝试不同的“固定背景”和“重复背景”滑块,看看哪种最适合您的图像块。

如果您对图像的外观感到满意,只需单击“在图像上添加文本”按钮即可。

在 WordPress 中的图像顶部添加文本

这会添加一个可以输入文本的区域。

根据您的图像,访问者可能很难阅读您的文字。在这里,按照上述相同的过程将文本加粗或更改其颜色可能会有所帮助。

更改 WordPress 中的文本颜色

您还可以将文本放大。

为此,请在右侧菜单中找到“尺寸”部分。然后,您可以继续单击不同的数字来放大或缩小文本。

增加文字大小

如果您对文本和图像的外观感到满意,请继续并单击“保存草稿”、“更新”或“发布”以保存更改。

方法 3:创建自定义页面布局,在图像顶部添加文本

内置 WordPress 块是在 WordPress 中的图像顶部添加文本的快速且简单的方法。但是,如果您想要自由地创建完全自定义的页面设计,那么您将需要一个页面构建器插件。

SeedProd是市场上最好的 WordPress 页面构建器插件。它允许您在整个网站的任何图像上添加文本。

注意:SeedProd有一个免费版本,但对于本指南,我们将使用 Pro 版本,因为它具有更多功能。

首先,您需要安装并激活 SeedProd 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

激活后,您需要输入 SeedProd 许可证密钥。您可以通过登录您的SeedProd 帐户来获取此密钥。然后,单击“下载”选项卡。

完成此操作后,您可以复制“许可证密钥”部分中的密钥。

SeedProd 下载页面

现在,您可以通过转到SeedProd » 设置页面,将此密钥粘贴到您的 WordPress 管理区域。

到达此处后,将您的密钥粘贴到“许可证密钥”字段中。

验证您的 SeedProd 许可证

然后您只需单击“验证密钥”即可。

之后,我们将前往SeedProd »登陆页面并单击“添加新登陆页面”。

SeedProd 的页面设计模板

您的下一个任务是选择一个模板,这将是您页面的起点。无论您选择哪种 SeedProd 模板,您都可以自定义模板的每个部分,以完美适合您的网站和品牌。

如果您喜欢从空白画布开始,则可以单击“空白模板”。

SeedProd 现成模板

在我们的所有图像中,我们都使用 Tasty Squeeze 页面模板,该模板非常适合吸引更多订阅者活动。

找到您可能想要使用的模板后,将鼠标悬停在其上。然后您可以单击“预览”图标。

SeedProd 专业设计的模板

这将显示模板的预览。

如果您对此模板的外观感到满意,请继续并单击“选择此模板”按钮。

潜在客户开发和挤压模板

在“页面名称”字段中,输入页面的名称。

默认情况下,SeedProd 将使用此名称作为页面的 URL。如果您想更改此自动创建的 URL,只需编辑“页面 URL”字段中的文本即可。

使用 SeedProd 创建自定义页面布局

当您对输入的信息感到满意时,请单击“保存并开始编辑页面”按钮。这将在 SeedProd 的拖放编辑器中打开模板。

在左侧菜单中,您将看到可以通过拖放添加到页面的所有块和部分。

将模块添加到您的 SeedProd 设计中

除非您使用空白模板,否则您的 SeedProd 页面将已经有一些块和部分。要编辑任何此内容,只需单击以选择块或部分。

SeedProd 的左侧菜单现在将显示可用于自定义此块或部分的所有设置。如下图所示,如果单击标题块,则可以更改该块中显示的文本。

定制现成的 SeedProd 页面设计

在图像顶部添加文本的最简单方法是使用 SeedProd 的现成 Hero 部分之一。

这些部分有一个占位符背景图像,并在顶部添加了一些占位符文本。您可以简单地用您自己的内容替换默认的背景图像和文本。

首先,单击 SeedProd 左侧菜单中的“部分”选项卡。

然后,您可以单击“英雄”来查看可以添加到页面的所有现成的英雄部分。

SeedProd 部分模板

要预览任何这些部分模板,只需将鼠标悬停在模板上,然后单击放大镜图标即可。

要继续将此英雄部分添加到您的设计中,只需单击“选择此部分”。

SeedProd 英雄模板

接下来,您需要将模板的库存图像替换为您自己的图像。为此,只需单击库存图像即可将其选中。

然后,在 SeedProd 的左侧菜单中,将鼠标悬停在“背景图像”预览上,直到出现垃圾桶图标。

然后,您可以继续并单击此图标来删除占位符图像。

在 SeedProd 中删除背景图像

接下来,单击“使用您自己的图像”。然后,您可以从 WordPress 媒体库中选择图像或使用库存图像。

SeedProd 可让您轻松访问数千张免版税库存图片。要查看 SeedProd 的库存图像库,请单击“使用库存图像”。

在搜索栏中,输入描述您要查找的图像的单词或短语,然后单击“搜索”按钮。

选择 SeedProd 库存图片

SeedProd 现在将显示与您的搜索词匹配的所有库存图像。

当您找到想要添加到设计中的图像时,只需单击一下即可。

SeedProd 的库存图片库

添加图像后,您就可以替换占位符文本了。

为此,请单击以选择文本块。然后在“文本”区域中,只需输入您要使用的文本即可。

使用 SeedProd 在图像顶部添加文本

SeedProd 的一些英雄模板具有额外的内容,例如号召性用语按钮。

想要更改此内容吗?然后只需单击选择该块,然后在 SeedProd 的左侧菜单中进行更改。

编辑 SeedProd 文本

另一种选择是从英雄模板中删除该块。

为此,只需单击以选择该块,然后单击垃圾桶图标。

删除 SeedProd 部分和块

当您对页面设计感到满意时,可以单击“保存”按钮。

从这里,您可以选择发布页面或将其保存为模板。

发布 SeedProd 设计

有关使用 SeedProd 创建自定义页面布局的更多详细信息,您可以参阅我们有关如何在 WordPress 中创建登陆页面的指南。

我们希望本文能帮助您了解如何在 WordPress 中的图像上添加文本。您可能还想查看我们有关如何批量编辑特色图像的指南以及我们专家精选的最佳网页设计软件

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top