在这期 DIVI 教程中,我们要讲一讲 Divi 主题的全宽菜单功能。有不少的客户咨询我有没有什么主题可以制作出小米产品介绍的那种菜单。这个菜单主要用于丰富的产品介绍,我们先看看小米产品介绍菜单的截图:

divixiaomi

就是左边是产品名称,右边是产品参数分类介绍,然后有个立即购买按钮。这个在产品每一个页面都如此。下面我们就通过 DIVI 主题来仿制一个:

divixiaomi2

下面步骤如下:

一、构建页面

在我们的示例里创建一个父级页面:小米平板电脑,在这个父级页面创建两个子页面:概述和功能。另外我们需要把小米平板电脑这个页面重定向到子页面:概述。也就是点产品即进入产品概述页面。

divixiaomi2

二、创建菜单

进入外观,菜单,创建一个用于这个页面的菜单。

divixiaomi3

接下来添加两个 css,在小米平板电脑加个 css,如 mititle,在立即购买力加个 css 如 buybutton 。这个目的是为了后面适当调整风格。

buybutton4

三、通过 DIVI 构建器添加模块:全宽菜单

进入产品介绍的子页面,概述,添加一个全宽选区,并添加一个全宽菜单。

divixiaomi5

点开全宽菜单设置,选择刚才创建的菜单:

divixiaomi6

文本方向选择右对齐。

四、添加自定义 css

转到后台主题选项,添加下面的 css:

divixiaomi8