WordPress中添加横幅四种方法

2025-05-25 0 37

网站横幅或许大家脑海中没有具体的位置,但是banner大家都非常的熟悉,WordPress网站中最能吸引用户视觉的存在,一般用来展示限时优惠、发布更新、还有强化品牌形象等,可以通过WordPress内置的站点编辑器、插件、页面构建器、手动编写代码等四种方式来添加,接下来就来介绍一下这四种方法,大家可以认证学习一下。

一、使用WordPress站点编辑器

如果WordPress网站支持完整站点编辑(FSE),默认的如Twenty Twenty-Four。可以轻松通过WordPress内置编辑器添加横幅。

步骤:

1.登录到WordPress仪表盘。

2.转到外观 > 编辑器。

WordPress中添加横幅四种方法

3.打开想放置横幅的模板(如主页或页眉)。

4.点击+(添加块)按钮,选择封面块。

WordPress中添加横幅四种方法

5.上传或选择横幅图片。

WordPress中添加横幅四种方法

6.自定义文本、颜色和对齐方式。

7.点击保存。

WordPress中添加横幅四种方法

二、使用WordPress插件

通过使用插件,可以轻松添加横幅,还可以对横幅进行更多的控制,如定时、轮播或带有按钮的横幅。

推荐插件:

  • Simple Banner:适合公告横幅。
  • WPFront Notification Bar:适合固定促销横幅。
  • Smart Slider 3:适合动画横幅。

步骤:

1.转到插件 > 安装插件。

2.搜索并安装Smart Slider 3。

WordPress中添加横幅四种方法

3.启用插件并进入插件仪表板创建新项目。

WordPress中添加横幅四种方法

4.上传横幅图片并保存更改。

WordPress中添加横幅四种方法

Smart Slider 3很方便,可以直接使用自带的模板。

WordPress中添加横幅四种方法

三、使用页面构建器(如Elementor)

页面构建器提供了更多的自定义选项,可以通过可视化界面添加横幅。

步骤:

1.安装并启用Elementor。

2.编辑想添加横幅的页面。

3.添加一个新部分并插入横幅小部件(搜索“图像”)。

WordPress中添加横幅四种方法

4.上传或设计横幅并进行自定义。

WordPress中添加横幅四种方法

5.点击更新/发布。

四、通过代码手动添加

如果精通代码,可以直接通过HTML和CSS手动添加横幅。

步骤:

1.转到外观 > 主题文件编辑器。

2.打开header.php或其他模板文件。

WordPress中添加横幅四种方法

3.插入以下HTML代码:

这段代码的作用是:

创建一个 div 区块,类名叫 custom-banner。

4.在这个区块中插入了一张图片(横幅图)。

your-banner-image-url.jpg 是图片链接,实际使用时要替换为自己的横幅图片地址。

在外观 > 自定义 > 额外CSS中添加样式:

WordPress中添加横幅四种方法

5.点击发布。

通常不建议直接在主题文件编辑器中修改代码,可以使用Code Snippets插件找到Functions进行添加

WordPress中添加横幅四种方法

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 WordPress中添加横幅四种方法 https://www.kuaiidc.com/6527.html

相关文章

发表评论
暂无评论