本公司致力于为客户提供设计、开发、生产、销售和服务,
通常为购买高级定制服务的客户提供一些个性化模块的开发功能。
近来,
我们的客户是WordPress网站的建站客户,
希望仿效大疆无人机产品详细页面中的固定菜单二级目录样式,
呈现个性化产品参数及技术支持子页面。
经过对divi主题模块功能的深入研究,WP花园技术小组,
发现实现此divi模块的途径,
下面我们就来分享一下这个小技巧,一起学习,一起成长。
二次菜单效果展示。
假如顾客的产品是高科技产品,
然后肯定会有许多详细的参数和帮助文档。
如果我们都将这些信息放在同一个页面,
然后,产品的详细页面将变得非常冗长和臃肿。
“大疆无人机”网站产品展示页面,
正是采用了这种固定的二级菜单,
使访问者更容易找到与产品相关的信息。
滚动下移:
浏览地址:
http://www.dji.com/cn/mavic-mini?网站=brandsite&from=nav。
利用divi主题实现WordPress网站中的布局。
经过对用户建站需求的仔细分析之后,WP花园与WordPress的divi主题相结合的方案是,为一个产品创建3个子页面:
详细的产品页面:woocommerce的产品包装。
Post参数页面:WordPress默认的Post文章类型(产品参数文章分类category)
ProductHelp:WordPress默认的Post文章类型(创建一个产品帮助分类category)
由于稍后可能会以列表的形式显示所有产品参数页面和产品帮助页面,因此不使用WordPress页面页面类型,而使用文章post类型。
[相关教程]
如何在WordPress中发布文章呢?
如何在WordPress中创建分类。
怎样用divi主题定制产品的详细信息页面。
与产品有关的页面命名说明。
为便于后续管理,请各页保持良好的命名规范。
例如,有一次
商品名是xxxx,
然后,产品参数页名为xxxx参数,
该产品帮助页的名称是xxxx帮助手册。
用menu菜单来关联多个页面。
是的,
设想一下,我们现在已经创建了多个产品子页,
把它们作为二级菜单显示在产品详细信息页面上,
怎样做呢?
登入WordPress后台appreance内的菜单menu,
接着点击“创建新菜单”按钮,为xxx产品创建一个名为“xxx子菜单”的菜单。
把相应的产品子页面,拖到这个子菜单上,保存这个菜单。
将固定的二级菜单添加到divi编辑器中。
为divi打开可视编辑器,
添加section版块中的一部分,然后选择“全宽”
弹出模块,选择“全宽菜单”
接着,选择您为该产品创建的子菜单xxx子菜单。
与此同时
单击“高级”版块上的按钮,
输入一个英文字符sticky并保存到CSSID中:
在保存后,
若“退出视觉编辑器”位于网站页面的前端,
现在可以看到这个固定菜单:
二层菜单。
上图显示了一个固定的菜单样式,
在此菜单模块中,我们可以在“设计”栏中,
样式,如字体颜色、背景颜色等菜单的设计:
花园花园的结束语
当我们利用WordPress和woocommerce开发一个独立外贸站点时,
通常是根据客户的需要,定制一些小的功能。
本文所提及的悬浮二级菜单基本思想如下:
建立产品子页。
创建每个产品的菜单Menu。
将此菜单添加到divi编辑器,并使用sticky字符固定它。
设计菜单风格。
有了divi主题,就可以灵活地创建多姿多彩的功能模块,而不需要编写任何代码。
假如你还不知道divi的主题,
有一篇关于divi主题的好处的文章在WP花园中有详细介绍。
通过对divi主题的使用,