【转载】给WordPress文章和页面添加背景图片图文教程

转载3个月前发布 SanS三石
17 0 0
【转载】给WordPress文章和页面添加背景图片图文教程

你想给你的网站进行美化吗?一种方法是在你的WordPress页面上添加一个背景图片。毕竟背景图片是放在页面内容后面的图片或设计,以美化页面。如何给WordPress文章和页面添加背景图片?在WordPress网站上添加背景图片有不同的方法。

原文引用:给WordPress文章和页面添加背景图片图文教程 – 搬主题

在本图文教程中,搬主题将介绍三种很容易做到的方法。

一、为什么要在WordPress中添加背景图片

简单地说,它们美化了你的网站。相对于在整个网站上使用普通的背景,在你的网站背景上显示一个图像会增加一些美感和专业性。

在过去,人们试图保持他们的网站设计尽可能的简单。虽然这在当时很有效,但后来情况发生了变化。随着全球网站数量的增加,确保你在竞争中脱颖而出是很重要的。实现这一目标的方法之一是改善你的网站设计。使用背景图片就可以为你的WordPress网站做到这一点。

二、添加背景图片的弊端

正如一切有优点的事物一样,如果使用不当,也必然会有弊端。下面我们将讨论其中的一些问题。

首先,一些背景图片可能会出现在完全不合适的地方,并扰乱你的页面内容。这将导致用户错过你打算在你的页面上传递的信息。其次,不对移动端负责的背景图片可能会影响你网站的移动可用性。大多数用户从他们的移动设备访问互联网。出于这个原因,作为一个网站所有者,移动友好性应该是你最关心的问题。

最后,如果你使用的是大文件尺寸的图像,这可能会增加你网站的加载时间。因此,加载时间的增加会导致高跳出率,这反过来又会影响你的页面SEO。当然,你可以通过使用图像压缩插件或在上传到你的网站之前简单地在线压缩图像来避免这种情况。

三、如何在你的WordPress文章和页面上添加背景图片

有三种方法可以在WordPress网站上添加背景图片。那就是使用默认的主题选项、使用插件或使用自定义CSS代码。下面,我们将告诉你如何使用它们中的每一个。

1、默认主题选项

一些WordPress主题支持使用图片作为页面的背景。如果你的主题支持它,你可以在你的管理面板上的自定义页面启用它。首先登录到你的WordPress仪表板,然后进入外观>>自定义。这将会出现WordPress主题定制器页面。

【转载】给WordPress文章和页面添加背景图片图文教程

在右边,你会看到你的网站的实时预览和最近的变化。左边的面板包含了你的主题所提供的各种自定义功能。要设置背景图片,请点击背景。

【转载】给WordPress文章和页面添加背景图片图文教程

在 “背景”菜单上,你可以使用一个图像或颜色作为你的背景。要使用图像,请点击 “选择图像”按钮。

【转载】给WordPress文章和页面添加背景图片图文教程

接下来,从你的WordPress媒体库中选择一张图片。要上传一个新的图像,选择 “上传文件 “标签。然后点击 “选择文件”,从你的电脑中选择图像。

【转载】给WordPress文章和页面添加背景图片图文教程

将图像上传到你的网站后,点击选择图像按钮。

【转载】给WordPress文章和页面添加背景图片图文教程

要改变图像的大小和显示,请点击 “预设 “下拉菜单并从可用的选项中选择。你可以测试每个选项,以确定哪个选项对你的图像效果最好。

【转载】给WordPress文章和页面添加背景图片图文教程

在 “图像位置 “下,你可以选择你想要对齐图像的角度。当你完成了对图像的定制后,点击 “发布”来实现这些变化。你可以访问你网站上的任何一个页面,看看背景看起来如何。

默认主题背景选项的弊端

使用大多数主题提供的默认背景选项的弊端是它没有提供很大的灵活性和控制背景图片在你的页面上的外观。此外,背景图片是全局性的,适用于你整个网站的帖子和页面。因此,如果你想为其他页面和帖子使用不同的背景,你可能会发现这很困难。幸运的是,有了WordPress的添加背景图片的插件,你在为网站的任何部分或页面添加背景照片时,可以得到很大的控制和灵活性。

2、使用WordPress插件

如果你的主题设置中没有添加背景图片的选项,你可以使用一个插件来添加它。在本节中,我们将展示如何使用两个插件来做到这一点。

如何用Elementor在WordPress中添加背景图片

Elementor是WordPress最受欢迎的拖放式页面生成器插件之一。该插件有很多功能,让你使用交互式仪表盘建立一个完整的网站,而不需要写一行代码。

【转载】给WordPress文章和页面添加背景图片图文教程

在这里,我们将使用背景功能为WordPress网站上的部分添加背景图片。要开始,你需要从你的WordPress仪表板上安装并激活Elementor插件。

这里可以从搬主题站点下载汉化中文版《Elementor Pro完美汉化中文版|页面拖动自定义设计WordPress插件介绍》

激活该插件后,你可以使用直观的仪表盘来编辑你的WordPress文章和页面。首先,进入页面>>所有页面,然后在你想修改的页面下面选择编辑。

【转载】给WordPress文章和页面添加背景图片图文教程

在页面编辑器上,点击 “用Elementor编辑 “按钮,打开仪表板。Elementor仪表板有很多功能,可以帮助你编辑网站的任何部分。你可以在 “内容 “选项卡中添加文本、标题、图片、视频等。

假设我们想在你的页面上的某个部分添加一个背景图片,点击六点图标,突出整个部分,如下图所示。

【转载】给WordPress文章和页面添加背景图片图文教程

在 “风格”选项卡上,点击背景下拉菜单。接下来,选择钢笔图标,然后点击选择图像。

【转载】给WordPress文章和页面添加背景图片图文教程

现在从你的WordPress媒体库中选择一张图片或上传一张新图片。

添加背景叠加

在选择图像后,你可以添加一个背景覆盖,这样图像就不会扰乱你的内容。为此,点击背景叠加下拉菜单。

【转载】给WordPress文章和页面添加背景图片图文教程

然后在 “颜色 “部分选择你要使用的颜色。

【转载】给WordPress文章和页面添加背景图片图文教程

当你完成添加图像和效果后,点击更新按钮,保存你的变化。通过这种方法,你可以在网站的任何部分或页面添加无限的背景图片。只需选择页面,然后用Elementor插件编辑,添加你的背景图片。

Advanced WordPress Backgrounds(AWB)插件添加背景图片

另一个你可以用来在WordPress中添加背景图片的插件是Advanced WordPress Backgrounds插件。除了添加背景图片外,你还可以使用视频作为你的背景元素。这些视频可以来自你的媒体库、YouTube或Vimeo视频。

还有一些特殊的效果,你可以应用到你的图片上,如视差滚动效果。在这里,我们将专注于添加一个背景图片,但如果你想了解更多关于背景效果的信息,请查看我们关于在WordPress添加视差效果的详细指南。要开始,你需要在你的WordPress仪表板上安装和激活该插件。为此,进入插件>>新增。在搜索框中,输入 “advanced WordPress backgrounds”。接下来,点击立即安装按钮,在安装完成后激活该插件。

【转载】给WordPress文章和页面添加背景图片图文教程

如何使用AWB插件

要使用这个插件,请进入页面>>所有页面。然后在你想添加背景的页面下面选择编辑。

【转载】给WordPress文章和页面添加背景图片图文教程

在编辑器上,点击添加块图标,然后在搜索框中输入 “AWB”。当它出现时,选择背景(AWB)块。

【转载】给WordPress文章和页面添加背景图片图文教程

接下来,在右侧选择你想添加的背景类型。你可以使用背景颜色、图像或视频。选择 “图像 “选项卡并点击选择图像。

【转载】给WordPress文章和页面添加背景图片图文教程

之后,从你的媒体库中选择一张图片。

【转载】给WordPress文章和页面添加背景图片图文教程

你可以分别使用 “尺寸 “和 “背景尺寸 “选项来改变图像和背景的大小。添加图片后,点击 “更新 “按钮,保存你的更改。如果你使用的是经典编辑器,导航到你想添加背景图片的页面或帖子。一旦到达那里,点击高级WordPress背景图标。

【转载】给WordPress文章和页面添加背景图片图文教程

在 “常规 “选项卡上,点击背景类型下拉菜单,然后选择图像选项。

【转载】给WordPress文章和页面添加背景图片图文教程

接下来,点击选择图像按钮,然后从你的WordPress媒体库中选择一个图像。

【转载】给WordPress文章和页面添加背景图片图文教程

你也可以更新图像的大小和位置。如果你想添加一个覆盖层,点击 “覆盖颜色 “下面的 “选择颜色”。接下来,选择你想使用的颜色。

【转载】给WordPress文章和页面添加背景图片图文教程

而现在,在自定义背景图片后,点击插入。

【转载】给WordPress文章和页面添加背景图片图文教程

这将生成一个短码,并自动将其插入你的编辑器中。在这个简码中,你可以输入你希望在背景图片上显示的文字。一旦完成,点击 “发布/更新 “按钮就可以实现改变。现在你可以在你的网站上查看该页面,看看背景图片的样子。

3、使用CSS手动添加背景图片

如果你是技术控,你可以使用自定义CSS代码来为你的网页和文章添加自定义背景。使用自定义CSS可以让你对图像的外观和位置有很大的灵活性和控制。

使用CSS方法,有许多背景图片的位置可供选择。首先,我们可以创建一个全局性的CSS背景图片,它将显示在所有页面上。很像一些WordPress主题所提供的选项。另外,我们可以添加特定类别的背景图片,或者创建一个带有背景图片的CSS类。然后,你可以将该类应用于单个帖子和页面。

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...