wordpress自学笔记 第三节 独立站产品和类目的三种展示方式

发布于:2025-05-12 ⋅ 阅读:(17) ⋅ 点赞:(0)

wordpress自学笔记 

摘自

超详细WordPress搭建独立站商城教程-第三节 独立站产品和类目的三种展示方式,2025 WordPress搭建独立站教程#WordPress建站教程https://www.bilibili.com/video/BV1rwcteuETZ?spm_id_from=333.788.videopod.sections&vd_source=a0af3bbc6b6da748faaab91bd4d5688e


第三节 独立站产品和类目的三种展示方式

产品类目的三种展示方式

图片排列

首先创建一个排列的列元素,这里我们使用四列

在引入图片之后,再设置一些宽度、高度、添加按钮等操作实现如此效果

之后,我们再给四个图片之间加一些间距,在选中最大的列后,在布局里面找到柱间隙就可以调整了

图片错落

首先创建一个列,这里的列数可以根据自己的需求决定,这里我们就先用2列

我们还是先对左边的列进行一些设置,如背景图与大小

对于右边来说呢,就是在右边的这个内列中点击左上角的加号,之后找到图像,通过拖动的方法,将两个图像拖动进去,形成错位

之后就是对其进行一些基本的调整,也可以加一些按钮等

滑轨展示

添加一个列,这里选择一列即可

我们点击加号,搜索“水平滚动条”,加入进去即可

在左侧选中水平滚动条后,在右侧可以选择一些基本的设置,如列,这里可以加入或减少图片的数量

之后添加一些类目图片,并且添加一些链接与按钮即可

在风格这里也可以对样式进行一些设置

产品的展示

产品展示

在创建一列的列后,左上角加号搜索"product"找到产品"Hand-Picjed Products"并拖入尽列中

拖动进来后没有展示,在右边找到“精选“,下面就是你店铺产品的名称了,目前这些产品都是模板自带的,后面我们创建产品之后,就可以加入我们自己的产品了

在我们选择了四个之后,就看到如上效果,我们也可以在右边设置堆叠以及网格的布局样式

目前没有占满,我们可以在右边调整一下列数等等操作

之后我们就可以对其中的标题、价格等进行个性化修改

按类目展示

之后我们要做到对商品进行过滤,我们在右边找到过滤器,通过点开三个点之后,对产品的一些属性进行过滤性的展示

选上之后,下面就出现了一个产品类别,我们可以输入你想要放置的类目

从后台看到,这个模板是有三个类目的

进行筛选了之后,就可以看到商品类别的变化了

单品展示

接下来就是单品的展示,在右侧搜索之后,选择单个产品并拖拽过来

可以从下面找到你要选择展示的单品

这样的话就展示到里面了

之后就是在选项卡中找到对应的元素进行自定义更改

之后也不要忘了移动端的展示方式


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