如何使用Elementor制作面包屑? |
您所在的位置:网站首页 › wordpress产品页面分类导航 › 如何使用Elementor制作面包屑? |
本文介绍如何使用Elementor制作面包屑,通常SEO插件比如Rankmath会帮助我生成面包屑,我直接用就可以了,本文介绍在不使用SEO插件和其他插件的前提下如何使用Elementor制作面包屑,包含了2个制作方法,基于我的方法你也可以进行扩展出其他方法。 我使用Elementor制作了2个面包屑,如下: ![]() 1:使用Icon List元素制作的面包屑 2:使用icon Box元素制作的面包屑 这里是做的产品页面的面包屑,如果是其他页面可参照教程制作对应的面包屑。 下文内容中设计Elementor动态数据相关的知识,如果你不熟悉,请阅读文章《Elementor动态内容是什么?如何使用?》 使用Elementor制作面包屑:Icon List元素 1、拖拽一个Icon List元素到页面在Elementor页面编辑器左侧元素库中找到Icon List元素。将元素拖拽到对应的位置。 ![]() Icon List默认的布局是纵向的,需要修改成横向的效果。 ![]() 添加你对应页面的面包屑的结构到Icon List的Items中,我这里添加了Home、Products、产品分类、产品名称。 ![]() 设置首页的链接和图标,图标直接在图标库中选择即可,链接使用/即代表网站首页链接地址。 ![]() 设置Products的链接和图标,Products如果是一个页面,我通常会使用Elementor的动态数据来设置,通过选择动态数据中的Internal URL(内部链接),然后点开Internal URL设置Type为Content,搜索和选择Products页面即可。 ![]() 在链接中选择动态数据的Internal URL ![]() 你也可以使用相对路径来添加页面链接,打开对应页面浏览并复制地址栏中的URL,删除域名及之前的内容保留域名后/开始的内容即为相对路径。 ![]() 设置产品分类的链接和图标,这里我使用的也是动态数据的Post Term(因为我的产品是用Post内容类型做的,如果你是用Woocommerce做的产品,那么Elementor会基于Woocommerce提供可以直接用的面包屑元素),点开Post Term,设置Taxonomy为产品分类,并删除分隔符,开启链接。 说明:这里Taxonomy选择产品分类,是因为我使用CPTUI插件自定义的分类,如果你是使用的文章默认的分类,直接选择Category即可。 ![]() 这里有一点需要说明,如果你的产品选择了多个分类,按照如上设置会全部显示出来。 ![]() 我通过一段CSS代码来显示第一个分类,其他的分类则不显示。 ![]() li:nth-child(3):代表Icon list里面的第三个itme,你设置的产品分类在第几个item,就将3改成对应数值。 设置产品名称,产品名称直接用动态内容Post Title展示,不需要添加链接。 ![]() 这个方法 需要多个IconBox元素组合使用,比使用Icon List 元素在风格设置上更加灵活一些,我推荐使用这个方法来制作。 1、拖拽一个Icon Box元素到页面![]() ![]() 修改样式 ![]() 在这里你可以单独修改首页的文字颜色 ![]() 设置Icon Box元素的宽度。默认的元素宽度是撑满布局的,我们需要所有的icon Box都排列在一行,就需要将整个元素的宽度设置为【Inline(Auto)】,就是自动的意思,元素内容多款,元素就多宽。 ![]() 复制一个首页Icon Box元素 ![]() 复制之后直接修改复制元素的内容即可。 ![]() 复制Products的Icon box元素进行修改。 将标题修改成动态数据Post Term,并在Post Term下选择产品分类,删除分隔符,开启链接。 ![]() 同时,删除Icon Box的链接。 ![]() 这里和Icon List一样,如果产品属于多个分类则会显示多个分类的名称。 ![]() 通过CSS代码来实现只显示第一个分类。 ![]() 添加代码之后的效果 ![]() 产品名称的设置和Icon List一样,使用动态数据的Post title 即可,不需要添加链接。 ![]() 使用Elementor制作面包屑,不是一个自动的过程,你需要通过使用元素获取动态数据来实现,每个页面都需要单独设置,当然你可以复制来实现。 Elementor其他元素或许也能实现制作面包屑,你可以参照我写的方法进行扩展测试。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |