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主，白小菌-外贸跨境