大家好
我叫吴斌
欢迎大家观看我的视频
我的视频呢
主要是讲解
有关网站制作的相关内容
如果大家对于这方面内容比较感兴趣呢
还请关注我
并订阅我的视频
在上一个视频中
我已经给大家讲解了
怎么布局这个网站的分类页和侧边栏
那 在今天的这个视频中呢
我就要给大家讲解
怎么布局这个网站的产品页
现在呢 我们就进入它的后台
我这里呢
已经提前地登陆到了它的后台
咱们点击 仪表盘
找到文章 / 所有文章
在 WordPress 里
咱们写文章 也就是发布产品
点击 写文章
也就是 发布产品
在这里 就填写你产品的标题
比如 我随便填写一个吧
最新设计
滑板车
我这里是随便举例子阿
大家可以根据自己的产品 填写标题
然后这里
记得优化一下它的固定链接
如果大家的标题比较长呢
它这里也会比较长
大家需要把它的链接改短一些
比如这个
我就保留一个
后面这一个
点击确定
在这里呢
咱们就用 这个模板
默认的一个插件来排版
也就是这一个
点击它
然后 往下滑
找到这里 点击这个 + 号
点击第一个
然后 再点击一下 插入模块
往下滑
找到这一个
Slider
点击它
在这里
添加图片滑块
咱们就添加 5 个吧
这里的标题咱们就留空白
什么都不用写
咱们只需要在这个背景图片里添加图片
点击 上传图片
点击 选择文件
把咱们事先准备好的
产品的图片上传上来
这里呢
我已经事先准备好了一款产品
咱们先把这 5 张产品图片上传上来
可以看到
这 5 张图片的尺寸
是 600*500px
咱们添加第一张进来
然后 设置为背景
然后 点击保存
添加第二个
一样的
在这里上传第 2 张图片
这里呢
刚才我已经把 5 张图片一起上传上来了
现在这 5 张图片就在媒体库这里
我只需要选择第 2 张
点击 设置为背景
点击保存
继续添加
这里 就是添加第 3 张图片
也在媒体库这里
设置为背景
保存
还有两张图片 添加的方式都是一样
在这里呢 我就快速地添加进来
好
5 张图片
咱们都已经添加进来了
可以看到
这里是 5 张图片
然后
往下滑
找到这里
背景图片的尺寸
咱们选择第二个
也就是适应
继续往下滑
然后
点击 保存
然后
在这里
选择这个产品所属的分类
也就是
这个产品是属于哪个类别的
在这里
就选择它的相应类别
好 我就选择第一个吧
点击发布
在这里
如果你觉得
这个地方 不方便辨识的话
那咱们就把这个文字
改为
咱们方便辨识的文字说明
点击这个设置图标
往下滑
滑到最底端
然后
把这个改为
产品首图浏览
点击 保存
这样子呢
咱们一眼就可以看出
这个模块是什么内容
方便以后咱们要修改的时候
能够快速的找到
点击更新
然后
咱们查看一下这个产品的布局
点击 查看文章
往下滑
这里
就是刚才咱们添加的那个首图浏览
咱们可以点击右侧的这个小箭头试一下
但是呢
这张浏览图
在这里就显得图片尺寸有点大
我们需要把它缩小一下
那要怎么缩小它的产品浏览图呢
在这里
大家就要仔细地跟着我的操作步骤了
在浏览器的右上角
也就是这里
点击它
找到更多工具
找到下面的这个开发者工具
点击它
然后
再找到这里的一个小箭头
点击它
然后
再选择这个产品浏览图
点击它
这样子
咱们就可以找到
这个产品浏览图
所对应的
html 和 css 代码
然后
咱们就寻找
可以修改这个产品模块的 CSS
好
是这一个
大家偿试修改一下这里
大家要记住
在这里
无论你修改什么数值
都不会影响你的网站
它这里只是起到一个预览的效果
当你刷新过后
你在这里
修改的所有的数值
都会返回原值
在这里咱们就偿试修改一下这里
比如这里我就写一个 80
大家可以看到这里
这样子呢 它就缩小了
或者我写一个 70
它又缩小了
那好
那我就先写一个 70
然后
双击一下这个代码
把它复制过来
复制在哪儿呢
在自定义这里
咱们新起一个页面
然后
往下滑
找到这里的一个
额外 CSS
把刚才咱们复制的那个
CSS 代码
粘贴过来
在这里 加一个
咱们先把这里往下滑一下
让咱们可以浏览这个产品图片的尺寸变化
在这里呢
咱们刚才的尺寸调节是70 (口误)
咱们返回来看一下
也就是这里 是70
这个高度是 70vh
把它的高设置为 70vh
可以看到
这里它的尺寸大小就跟着缩小了
这里阿
这里要加一个分号
点击发布
这些代码呢
如果大家需要
大家可以在我的评论区里留言
我可以直接发给大家
这样子
当大家用到这个模板的时候
只需要把这个代码
复制 粘贴到这里来
然后 修改这里的数值
这里布局好了过后
咱们继续添加它的产品内容
咱们回到这个产品页的后台来
在这里 继续添加区域
这里标准区域
这里可以添加这第一个模块
当然 如果大家要布局别的模块
也可以选择这些地方
在这里呢 我就用这一个
然后 添加模块
这里呢 还是添加这个 文本模块
在这里大家发现 这里是编辑不了
这时候呢
先把这个关掉
再重新打开一下
现在呢 它就可以编辑了
这个呢 很奇怪
但是呢 大家只要知道怎么操作就可以了
比如在这里 我写产品简介
然后 这个地方
就可以简单地描述一下你的产品
我这里就随便写一下阿
好 这个我只是随便写一下
这个地方的产品简介
大家可以根据自己的产品来编写
然后 在这里我再给它加一张图片
点击添加媒体
点击选择文件
在这里
咱们就选择一张提前已经准备好的产品图片
这里我就选择这一张
点击插入至文章
点击保存
点击更新
然后到这里来刷新看一下效果
把这个关掉
刷新
可以看到 这张图片咱们就已经添加进来了
但是呢 如果你觉得这里比较偏左的话
你想让这张产品图片居中的话
咱们可以这么操作
到这里来
点击这里的设置图标
往下滑
在这里 咱们可以让它居中
点击保存
但是呢 这个文本模块
咱们不知道它是干嘛的
咱们一样的
把这个文本模块的标识
用咱们熟悉的中文来编写
这里是产品简介
点击保存
这样子 当你进入(网站)后台的时候
你就可以知道 这一部分就是产品简介
然后 咱们继续添加它的区域
点击这里
选择第一个
往下滑一下
点击插入模块
咱们一样的 还是插入这个文本模块
往下滑
在这里 咱们就写它的产品参数
产品参数的话
咱们可以先在 Excel 表格先编辑好
然后再从 Excel 表格复制 粘贴进来
比如这里
比如这一个
大家自行去 Excel 表格对
产品参数进行编写
用 Excel 表格来编排产品参数是很容易的
把这一部分
复制 粘贴过来
好 这就是它的产品参数
咱们点击保存
咱们忘记了把这个也改一下
点击保存
点击 更新
然后到这里来看一下效果
点击刷新
这里就是它的产品参数
也可以对它这个表格进行设置
在哪儿设置呢
在后台这里
这个产品参数这里
点击设置图标
中间这里
这里 可以设置它的字体
可以设置它的文字大小
它的文字颜色
它文字字母的间隔
它的行高
它的背景颜色
背景图片
是否有边框
等等
这些地方呢
大家可以一个一个地去偿试一下
然后点击保存看一下效果
在这里呢 我就不去偿试了
因为这个东西比较多
我如果偿试的话
就会花很多时间
这个是属于细调
这个细调呢 我就不去做了
大家自己去调一下
大家只要知道 这个地方 细调是在哪里细调
产品参数添加了过后
咱们下一项
咱们可以继续从这里添加标准区域
也可以在这里 直接插入
可以直接插入图片
但是呢 这里呢 我还是插入文本
这里就是产品展示了
这底下就放产品图片
我先放 5 张吧
点击插入至文章
点击保存
这里还是把它标签改一下
产品展示
点击保存
点击 更新
然后到首页去看一下
点击刷新
这样子 它就出来了
当然 咱们可以让这个图片居中
返回来
点击这里
这里没有看到内容
没关系
关掉 重新打开
把这个字体的颜色改为亮一点的
这里可以直接更改 点击这里
颜色改为黑体
在这里 可以让这些图片居中
选择上面这里
把这个 改为中间
然后点击保存
更新
刷新看一下效果
这样子呢 它的内容就居中了
当然 这些地方也可以让它居中
一样的道理 一样的设置
我把这个也居中吧
保存
更新
刷新看一下
可以看到 它的内容也居中了
我这里的布局呢 比较简单阿
就是一个 产品的一个简单的布局
大家可以去细调
细调也就是我告诉大家的这些地方
就是到这些地方去细调
这些细节
可以调节的地方很多
在这里
如果大家看不懂这些呢
可以用百度翻译 或者谷歌翻译
这些都很好理解
对于这个产品页的细调呢
需要花更多时间去细调
等我把我们的产品
细调了过后
我会再来给大家讲解一下
细调了哪部分
因为 当我们在细调的时候
每细调一个步骤
都要来看一下大概的效果是什么样子的
这样子呢 就比较花时间
那这个细调的部分呢
我就不在这里讲解了
等我把这个产品细调了过后
我会拿来展示给大家
现在呢 只是一个大概的产品布局
大家要知道 这些布局都是在哪里布局就可以了
那这个布局完了过后
咱们回过来
把这个关掉
点这个 所有文章
那是不是 我们新发布一个产品
都要这么布局呢
是不是都要这么复杂地去布局
这么复杂地去细调呢
其实不是的
咱们可以安装一个插件
点击插件
安装插件
安装这个插件
Duplicate
也就是这个
Duplicate Page
点击 现在安装
点击启用
好 启用了
咱们再到 文章
所有文章
记住阿 文章就是我们的产品
我们发布产品 就是写文章
只不过 当我们发布产品的时候
我们需要把它的分类
设置到我们的产品分类
好 这时候呢
咱们就可以看到这里
这里就出现了这一个
复制这个
就有了 这一个选项
这是因为
咱们刚才安装了那个插件
这时候咱们才可以复制这一个
比如 复制这一个
这样子
和它一模一样的一个产品就出来了
这时候
咱们只需要在这一个的基础上去修改就可以了
比如 点击编辑
去修改它的产品标题
它的链接
它这里面的内容
修改了过后 再去查看产品
去看效果
这也就是说
咱们只需要
花时间 花精力
把一个产品的布局
设置好
细调好
等以后的产品
都可以通过这种方式
这种 复制的方式
去修改它
这样子呢 就比较地高效
而且 产品看起来也比较地统一
所以 我们在发布第一个产品的时候
可以把这个产品
作为一个模板
可以去细调
觉得哪个地方的视觉需要改善的
都要去细调
细调了过后 再来看这个效果
这个产品页呢
我下去 我还要花时间去细调
这里只是初步的一个布局
让大家看一下怎么去布局
好 那今天的这个视频呢
就先讲到这里
谢谢大家的观看