网站的背景图片可以使网站看起来更具吸引力和活力。在本文中,我们将展示如何轻松地将背景图像添加到WordPress网站。
![How to add a background image in WordPress 如何在WordPress中添加背景图像](https://img.itaoda.cn/wp-content/uploads/2023/08/how-to-add-a-background-image-in-wordpress.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
为什么要添加WordPress背景图像?
将图像添加到WordPress网站可以使其对访问者更具吸引力。可以快速吸引用户的注意力,并让他们与内容互动。
它还允许根据品牌个性化网站设计。例如,可以在背景中上传产品或品牌吉祥物的精美照片。
此外,还可以添加YouTube视频作为完整背景或图像幻灯片,使内容栩栩如生。
但是,我们建议选择不会分散注意力或难以阅读WordPress博客上的内容的背景图像。背景应增强用户体验,并有助于将信息传递给访问者。
选择适合移动设备且不会影响网站速度的背景图像也很重要。否则,它会影响WordPress SEO。
也就是说,让我们看看添加WordPress背景图像的不同方法。我们将介绍多种方法,包括使用 WordPress 主题定制器、完整站点编辑器、插件、主题构建器等。
方法 1.使用WordPress主题定制器添加背景图像
最流行的WordPress主题都带有自定义背景支持。此功能可以轻松设置背景图像,如果主题支持,我们建议使用此方法。
但是,如果定制器菜单选项缺失,则主题可能已启用全站编辑。在下一节中,我们将介绍如何使用完整的站点编辑器来更改背景图像。
要使用定制器,需要访问WordPress管理员中的外观»自定义页面。这将启动WordPress主题定制器,可以在查看网站的实时预览时更改不同的主题设置。
![Background image option in WordPress theme customizer WordPress主题定制器](https://img.itaoda.cn/wp-content/uploads/2023/08/wordpress-customizer-theme.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
要记住的一件重要事情是,看到的选项将根据使用的WordPress主题而有所不同。在本教程中,我们使用 Astra 主题。
在 Astra 主题的定制器选项中,需要单击左侧面板中的“全局”。
![Select background image 转到 Astra 中的全局设置](https://img.itaoda.cn/wp-content/uploads/2023/08/go-to-global-settings-in-astra.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,将看到不同的全局选项来自定义 Astra 主题。
继续并单击“颜色”部分。
![Click on colors options 点击颜色选项](https://img.itaoda.cn/wp-content/uploads/2023/08/click-on-colors-options.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在这里,可以更改主题颜色,包括背景颜色。还可以自定义链接、正文文本、标题、边框等。
要添加背景图片,请向下滚动到“表面颜色”部分。然后,可以单击“网站背景”选项并切换到“图像”选项卡。
![Select a background image 选择背景图像](https://img.itaoda.cn/wp-content/uploads/2023/08/select-a-background-image.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,只需单击“选择背景图像”按钮。
这将打开WordPress媒体库,可以在其中从计算机上传图像或选择之前上传的图像。
为背景选择图像后,需要单击“选择”按钮。
这将关闭媒体弹出窗口,将在主题定制器中看到所选背景图像的预览。
![Background image settings 保存背景图像](https://img.itaoda.cn/wp-content/uploads/2023/08/save-your-background-image-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
不要忘记单击顶部的“发布”按钮以存储设置。
方法 2.使用完整站点编辑器添加自定义背景图像
如果使用的是基于块的 WordPress 主题,则可以使用完整站点编辑器 (FSE) 添加自定义背景图像。
完整的站点编辑器允许使用块编辑网站设计。这就像使用WordPress块编辑器编辑博客文章或页面一样。
在本教程中,我们将使用默认的 Twenty Twenty-Twenty 主题。要启动完整的站点编辑器,只需从WordPress仪表板转到外观»编辑器。
![Go to full site editor 转到完整的站点编辑器](https://img.itaoda.cn/wp-content/uploads/2023/08/go-to-full-site-editor.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
进入完整站点编辑器后,需要向模板添加封面块以上传背景图像。
只需单击顶部的“+”号并添加一个覆盖块。
![Add a cover block to theme template 将封面块添加到主题模板](https://img.itaoda.cn/wp-content/uploads/2023/08/add-a-cover-block-to-theme-template.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
继续并单击封面块中的“上传”或“媒体库”按钮,将背景图像添加到块中。
这将打开WordPress媒体上传器弹出窗口。
![Upload your image to cover block 将您的图像上传到封面块](https://img.itaoda.cn/wp-content/uploads/2023/08/upload-your-image-to-cover-block.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
可以选择要用作网站背景的图像。
选择图像后,只需单击“选择”按钮。
将图像添加到封面块后,下一步是将其设置为页面的背景。
为此,请单击顶部的列表视图图标(带有 3 个破折号的图标)以打开主题元素的大纲视图,例如网站页眉和页脚。
![Open list view in FSE 在 FSE 中打开列表视图](https://img.itaoda.cn/wp-content/uploads/2023/08/open-list-view-in-fse.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,只需将所有模板元素拖放到列表视图中的封面块下即可。
当它们都在那里时,封面块的图像将显示为网站的背景。
![Add theme parts to cover block 将主题部件添加到覆盖块](https://img.itaoda.cn/wp-content/uploads/2023/08/add-theme-parts-to-cover-block.gif?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,可以通过单击来调整背景图像 封面 块并选择屏幕右上角的齿轮图标。这将打开“阻止设置”面板。
将找到使图像成为固定背景、重复背景、调整其叠加层、编辑颜色等的选项。
![Edit background image settings 编辑背景图像设置](https://img.itaoda.cn/wp-content/uploads/2023/08/edit-background-image-settings.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
完成后,不要忘记单击“保存”按钮。
以上就是简单的添加背景图像的方法,其他的主题也可以使用类似的方法,我们希望本文能帮助学习如何在WordPress中添加背景图像。
原文链接:https://www.itaoda.cn/blog/13487.html,转载请注明出处。
评论0