在這期 DIVI 教程中,我們要講一講 Divi 主題的全寬菜單功能。有不少的客户諮詢我有沒有什麼主題可以製作出小米產品介紹的那種菜單。這個菜單主要用於豐富的產品介紹,我們先看看小米產品介紹菜單的截圖:

divixiaomi

就是左邊是產品名稱,右邊是產品參數分類介紹,然後有個立即購買按鈕。這個在產品每一個頁面都如此。下面我們就通過 DIVI 主題來仿製一個:

divixiaomi2

下面步驟如下:

一、構建頁面

在我們的示例裏創建一個父級頁面:小米平板電腦,在這個父級頁面創建兩個子頁面:概述和功能。另外我們需要把小米平板電腦這個頁面重定向到子頁面:概述。也就是點產品即進入產品概述頁面。

divixiaomi2

二、創建菜單

進入外觀,菜單,創建一個用於這個頁面的菜單。

divixiaomi3

接下來添加兩個 css,在小米平板電腦加個 css,如 mititle,在立即購買力加個 css 如 buybutton 。這個目的是為了後面適當調整風格。

buybutton4

三、通過 DIVI 構建器添加模塊:全寬菜單

進入產品介紹的子頁面,概述,添加一個全寬選區,並添加一個全寬菜單。

divixiaomi5

點開全寬菜單設置,選擇剛才創建的菜單:

divixiaomi6

文本方向選擇右對齊。

四、添加自定義 css

轉到後台主題選項,添加下面的 css:

divixiaomi8