wordpress自学笔记 第二节: 3种独立站商城横幅的制作

wordpress自学笔记

摘自

超详细WordPress搭建独立站商城教程-第二节: 3种独立站商城横幅的制作,2025 WordPress搭建独立站教程#WordPress建站教程https://www.bilibili.com/video/BV15xc1e2EpQ?t=1.8


第二节: 3种独立站商城横幅的制作

在点击查看站点后,可以看到我们的界面

点击"Edit Page"可以进入编辑界面

点击左上角的三横,可以看到我们可以用到的东西

在工具里,"列"通常为我们常用的选项,可以理解为一个容器,将我们的东西全都放在里面

在拖动进来之后,就可以对列进行编辑了

我们可以看到,我们选择的模板就是由一列中的两个模块构成的

1.图片横幅

我们先添加一个列,在这里我们先添加一个大的

布局的更改一般在右边,像我们这里将列设置为3,则列中就会有3个小框,其中一些比例、间距都可以从其中调整

而风格就会涉及到一些字体、边框、尺寸、颜色等等

我们先将其设置为1列,如此操作,再上传添加一个背景图片

可见,我们的图片已经添加了进去,这时在布局中调整块宽度实现全宽

之后,找到最小高度选项,来调节高度,使其图片展现出来

点击保存后,就可以在前台实现预览啦

图片横幅就如此做好了

回到编辑页面,这时实在电脑端的,可是用时候手机端会因此不适配

因此,我们就要对一些端的情况进行个性化设置,方法与上述类似

2.图文横幅

我们还是先创建一个列

这里我们先选择7:3,在重命名之后,上传背景图片

之后,重复之前的操作,设置一些高度与宽度

在其左侧的内列里,添加一个标题选项

在添加完文字之后,可以在右侧调整大小

之后我们在其下边添加一个按钮

在添加完文字之后,可以对其风格做一些更改

在关联这一栏,可以链接一些产品网页,连接好之后,还可以设置是否在新窗口打开

之后就是调整一下内块的位置问题,我们选择好大块,之后再布局中找到"块大小与间距"设置

通过设置"内容垂直对齐"来让内块实现在中间的位置

在保存预览之后,我们看到这个文字只在一排

我们就要按住shift+回车键来实现换行

我们想让这个整体往右移动一些,就要选中两个整体的内列,选择布局选项的"边距"选项来调整

边距就是外边距,而填充就是内边距,这个学过css的应该都知道

这样,在前台预览的就好很多

之后还是别忘了设置手机端等等的样式

3.轮播横幅

还是先创建一个列

我们可以直接去搜索轮播,来找到轮播选项卡

在选项卡中,打开轮播选项卡,就会出现3个内列,有几个内列,就说明有几个轮播选项

在选中一个内列之后,通过对风格的调整,上传背景图,然后调整宽度高度

在第二个内列上接着上传图片

保存并预览之后就可以实现轮播图的效果了

我们也可以在轮播选项卡的风格里面,自定义一些东西,箭头按钮偏移、颜色等等

也可以对点进行个性化设置

在布局里面也可以设置自动播放、轮播类型等等设置

之后也是别忘了手机端的修改

也可以在其中添加一些文字与按钮等,操作是一样的


特别鸣谢:bilibili平台UP主,白小菌-外贸跨境

相关推荐
西岭千秋雪_1 小时前
计算机网络学习笔记:TCP可靠传输实现、超时重传时间选择
网络·笔记·学习·tcp/ip·计算机网络
Web极客码1 小时前
Proxmox VE与VMWare ESXi:选择适合您的虚拟化平台
服务器·虚拟化·vmware esxi·proxmox ve
小开心大王1 小时前
嵌入式学习笔记——day36-多路IO复用
笔记·学习
Wilber的技术分享1 小时前
【机器学习实战笔记 12】集成学习:AdaBoost算法
人工智能·笔记·算法·决策树·机器学习·分类·集成学习
云资源服务商1 小时前
探索阿里云网络与CDN产品:解锁高效网络体验
服务器·网络·阿里云·云计算
mooyuan天天2 小时前
pikachu靶场通关笔记40 反序列化(三种方法渗透)
笔记·安全·web安全·反序列化漏洞·pikachu靶场
缘友一世3 小时前
创业知识概论
经验分享·笔记·职场和发展·创业创新
陈壹~东莞高迪电子4 小时前
门锁开关;与我们生活中紧密联系!
服务器·网络·安全
小李学不完4 小时前
HCIP-华为VRP系统基础
服务器·网络·hcia
Rancemy4 小时前
Redis03
java·服务器·redis·spring