提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

如何使用Elementor制作面包屑?

文章导航

本文介绍如何使用Elementor制作面包屑,通常SEO插件比如Rankmath会帮助我生成面包屑,我直接用就可以了,本文介绍在不使用SEO插件和其他插件的前提下如何使用Elementor制作面包屑,包含了2个制作方法,基于我的方法你也可以进行扩展出其他方法。

我使用Elementor制作了2个面包屑,如下:

如何使用Elementor制作面包屑?

1:使用Icon List元素制作的面包屑

2:使用icon Box元素制作的面包屑

这里是做的产品页面的面包屑,如果是其他页面可参照教程制作对应的面包屑。

下文内容中设计Elementor动态数据相关的知识,如果你不熟悉,请阅读文章《Elementor动态内容是什么?如何使用?》

使用Elementor制作面包屑:Icon List元素

1、拖拽一个Icon List元素到页面

在Elementor页面编辑器左侧元素库中找到Icon List元素。将元素拖拽到对应的位置。

image 167 - 如何使用Elementor制作面包屑? - NUTSWP

2、设置Icon List元素的Layout(布局)

Icon List默认的布局是纵向的,需要修改成横向的效果。

image 169 - 如何使用Elementor制作面包屑? - NUTSWP

3、添加Items到列表中

添加你对应页面的面包屑的结构到Icon List的Items中,我这里添加了Home、Products、产品分类、产品名称。

image 170 - 如何使用Elementor制作面包屑? - NUTSWP

设置首页的链接和图标,图标直接在图标库中选择即可,链接使用/即代表网站首页链接地址。

image 171 - 如何使用Elementor制作面包屑? - NUTSWP

设置Products的链接和图标,Products如果是一个页面,我通常会使用Elementor的动态数据来设置,通过选择动态数据中的Internal URL(内部链接),然后点开Internal URL设置Type为Content,搜索和选择Products页面即可。

image 172 - 如何使用Elementor制作面包屑? - NUTSWP

在链接中选择动态数据的Internal URL

image 173 - 如何使用Elementor制作面包屑? - NUTSWP

你也可以使用相对路径来添加页面链接,打开对应页面浏览并复制地址栏中的URL,删除域名及之前的内容保留域名后/开始的内容即为相对路径。

image 174 - 如何使用Elementor制作面包屑? - NUTSWP

设置产品分类的链接和图标,这里我使用的也是动态数据的Post Term(因为我的产品是用Post内容类型做的,如果你是用Woocommerce做的产品,那么Elementor会基于Woocommerce提供可以直接用的面包屑元素),点开Post Term,设置Taxonomy为产品分类,并删除分隔符,开启链接。

说明:这里Taxonomy选择产品分类,是因为我使用CPTUI插件自定义的分类,如果你是使用的文章默认的分类,直接选择Category即可。

image 175 - 如何使用Elementor制作面包屑? - NUTSWP

这里有一点需要说明,如果你的产品选择了多个分类,按照如上设置会全部显示出来。

image 177 - 如何使用Elementor制作面包屑? - NUTSWP

我通过一段CSS代码来显示第一个分类,其他的分类则不显示。

image 178 - 如何使用Elementor制作面包屑? - NUTSWP
 div > ul > li:nth-child(3) > span.elementor-icon-list-text>a:nth-child(n+2) {
    display: none;
}

li:nth-child(3):代表Icon list里面的第三个itme,你设置的产品分类在第几个item,就将3改成对应数值。

设置产品名称,产品名称直接用动态内容Post Title展示,不需要添加链接。

image 176 - 如何使用Elementor制作面包屑? - NUTSWP

使用Elementor制作面包屑:IconBox元素

这个方法 需要多个IconBox元素组合使用,比使用Icon List 元素在风格设置上更加灵活一些,我推荐使用这个方法来制作。

1、拖拽一个Icon Box元素到页面

image 179 - 如何使用Elementor制作面包屑? - NUTSWP

2、设置面包屑结构中的首页

image 180 - 如何使用Elementor制作面包屑? - NUTSWP

修改样式

image 181 - 如何使用Elementor制作面包屑? - NUTSWP

在这里你可以单独修改首页的文字颜色

image 182 - 如何使用Elementor制作面包屑? - NUTSWP

设置Icon Box元素的宽度。默认的元素宽度是撑满布局的,我们需要所有的icon Box都排列在一行,就需要将整个元素的宽度设置为【Inline(Auto)】,就是自动的意思,元素内容多款,元素就多宽。

image 183 - 如何使用Elementor制作面包屑? - NUTSWP

3、设置面包屑结构中的Products

复制一个首页Icon Box元素

image 184 - 如何使用Elementor制作面包屑? - NUTSWP

复制之后直接修改复制元素的内容即可。

image 185 - 如何使用Elementor制作面包屑? - NUTSWP

4、设置面包屑结构中的产品分类

复制Products的Icon box元素进行修改。

将标题修改成动态数据Post Term,并在Post Term下选择产品分类,删除分隔符,开启链接。

image 186 - 如何使用Elementor制作面包屑? - NUTSWP

同时,删除Icon Box的链接。

image 187 - 如何使用Elementor制作面包屑? - NUTSWP

这里和Icon List一样,如果产品属于多个分类则会显示多个分类的名称。

image 188 - 如何使用Elementor制作面包屑? - NUTSWP

通过CSS代码来实现只显示第一个分类。

image 189 - 如何使用Elementor制作面包屑? - NUTSWP
span.elementor-icon-box-title>span>a:nth-child(n+2){
    display: none;
}

添加代码之后的效果

image 190 - 如何使用Elementor制作面包屑? - NUTSWP

5、设置面包屑结构中的产品名称

产品名称的设置和Icon List一样,使用动态数据的Post title 即可,不需要添加链接。

image 191 - 如何使用Elementor制作面包屑? - NUTSWP

使用Elementor制作面包屑总结

使用Elementor制作面包屑,不是一个自动的过程,你需要通过使用元素获取动态数据来实现,每个页面都需要单独设置,当然你可以复制来实现。

Elementor其他元素或许也能实现制作面包屑,你可以参照我写的方法进行扩展测试。

2 1 投票
文章评分
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
文章分类
文章标签

最新文章

0
希望看到您的想法,请您发表评论x
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!