如何使用 Divi 創建滾動時尚目錄

在這篇文章中，我們將向您展示如何創建滾動時尚目錄。 使用這種方法將幫助您與觀眾建立聯繫，就像將紙質目錄交給他們一樣。 創建在線滾動時尚目錄可能有助於增加您從目錄中獲得的結果。 例如，通過包含指向商店商品的直接鏈接，購買過程也將得到改進。

結果

我們將逐步向您展示如何創建的結果在桌面上看起來像這樣：

在手機和平板電腦上是這樣的：

如何使用 Divi 創建滾動時尚目錄

訂閱我們的 YouTube 頻道

使用 Photoshop 為圖像添加透明形狀

我們將向您展示的第一件事是如何使用 Photoshop 為圖像添加透明部分。 Photoshop 有一個免費的替代品 GimpShop，但在本教程的這一部分，我們將僅使用 Photoshop。 我們需要兩張具有兩種不同形狀的圖像； 一種用於台式機，一種用於手機和平板電腦。 在這一部分，我們將簡單地向您展示如何為圖像添加透明形狀。 之後，您可以自己製作所有需要的圖像。

打開 Photoshop

首先在您的計算機上打開 Photoshop。

打開圖片

接下來，打開您要編輯的第一張圖片。 對於您將在本教程中使用的所有三個圖像，該方法保持不變。 這就是為什麼我們只解釋一次。

雙擊圖像並創建圖層

打開要編輯的圖像後，雙擊該圖像並為其創建一個新圖層。

添加另一層

繼續在它上面添加另一個空層。

選擇圖層 1 和多邊形套索工具

選擇圖層 1 並開始使用多邊形套索工具。

做一個形狀

在激活多邊形套索工具的同時，繼續在圖像中創建透明形狀。

使圖層 1 不可見並在選擇圖層 0 時按 Delete

選擇要變得透明的區域後，繼續使圖層 1 不可見，再次選擇圖層 0，然後按鍵盤上的刪除按鈕。

選擇矩形選框工具並單擊圖像上的某處

完成後，選擇矩形選框工具並單擊圖像上的某處。

將圖像另存為 PNG

最後，您需要將圖像另存為 PNG，並對您將在整個佈局中使用的所有四個圖像重複相同的過程。

主菜單欄設置

我們正在創建的佈局所需的主菜單欄設置如下：

• 隱藏徽標圖像：啟用
• 菜單高度：30
• 文字大小：15
• 字母間距：-1
• 字體：拉托
• 字體樣式：粗體和大寫
• 文字顏色：#FFFFFF
• 活動鏈接顏色：#FFFFFF
• 背景顏色：rgba(255,255,255,0)
• 下拉菜單背景顏色：rgba(255,255,255,0)

版本介紹

修改主菜單欄後，您可以繼續添加一個新頁面，使用 Divi Builder 並切換到 Visual Builder。

添加新部分

在該頁面中，首先添加一個標準部分。

部分背景顏色

該顏色的背景需要是“#d6d6d6”。

自定義填充

移至該部分的“設計”選項卡。 在 Spacing 子類別中，將“24px”添加到頂部填充，將 0px 添加到底部。

添加一列行

完成後，您可以繼續向該部分添加一列行。

漿紗

轉到“設計”選項卡並修改“尺寸”子類別：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：1

自定義填充

向下滾動並將“0px”添加到行的頂部填充。

第一個文本模塊

完成後，您可以向該行添加一個文本模塊。 輸入要顯示的文本後，轉到“設計”選項卡並確保以下更改適用於“文本”子類別：

• 文本字體：舊標準 TT
• 字體樣式：大寫
• 文本字體大小：72（桌面）、41（平板）、29（手機）
• 文字顏色：#000000
• 文字字母間距：11px
• 文本行高：1em
• 文字方向：居中

打開間距子類別並將“30px”添加到頂部和底部填充。

分頻器模塊

在文本模塊的正下方，添加一個分隔線模塊並啟用“顯示分隔線”選項。

轉到“設計”選項卡並選擇“#FFFFFF”作為分隔線顏色。

接下來，在樣式子類別中選擇“實心”作為分隔線樣式和“頂部”作為分隔線位置。

然後，打開 Sizing 子類別並應用以下設置：

• 分隔線重量：10px
• 高度：23px
• 寬度：100%
  

第二個文本模塊

在分隔模塊的正下方，添加另一個文本模塊。 在字符映射表 (Windows) 或字符調色板 (Mac) 中選擇您想要的任何圖標並將其放置在內容選項卡中。 對於此示例，我們使用了以下符號：“↓”。 然後，轉到“設計”選項卡並應用以下設置：

• 文字字體大小：42px
• 文字顏色：#000000
• 文字方向：居中

桌面時尚目錄（新版塊）

現在，添加另一個標準部分。 此部分將包含兩行，它們將在桌面上顯示目錄的不同部分。

部分設置

背景顏色

使用“#FFFFFF”作為本節的背景色。

自定義填充

然後，轉到“設計”選項卡並將“15px”添加到頂部填充。

第一排

列結構

對設置進行更改後，添加具有以下列結構的行：

背景顏色

打開行設置並添加 'rgba(255,255,255,0.14)' 作為背景顏色。

背景圖片

添加您在本文的 Photoshop 部分製作的圖像之一，並使用“色調”作為背景圖像混合。

漿紗

最後，對 Sizing 子類別進行以下更改：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

第一個文本模塊

完成行設置後，將文本模塊添加到第二列。 對 Text 子類別使用以下設置：

• 文字字體：苦澀
• 文字字體大小：63px
• 文字顏色：#000000
• 文字方向：居中

分頻器模塊

在第一個文本模塊的正下方，添加一個分隔器模塊並啟用“顯示分隔器”選項。

轉到“設計”選項卡並使用“#000000”作為分隔線顏色。

在樣式子類別中，使用“實體”作為分隔線樣式，使用“頂部”作為分隔線位置。

向下滾動同一選項卡，並將以下設置應用於 Sizing 子類別：

• 分隔線重量：3px
• 高度：23px
• 寬度：57%
• 模塊對齊：左

最後，添加“30px”的頂部邊距和“50px”的底部邊距。

第二個文本模塊

一旦分隔線就位，繼續並添加將包含標題的第二個文本模塊。 首先，在“內容”選項卡中使用“#000000”作為其背景色。

然後，轉到“設計”選項卡並將以下設置應用於“文本”子類別：

• 文字字體：苦澀
• 文字字體大小：92px
• 文字顏色：#000000
• 文本行高：1em
• 文本方向：左

打開 Border 子類別並使用以下邊框：

• 使用邊框：是
• 邊框顏色：#000000
• 邊框寬度：3px
• 邊框樣式：純色

此外，使用“77%”的寬度和左模塊對齊。

最後，將“15px”添加到文本模塊的頂部、右側、底部和左側填充。

第三個文本模塊

在上一個文本模塊的正下方添加另一個文本模塊。 這將代表描述。 轉到“設計”選項卡並為“文本子類別”使用以下設置：

• 文字字體：Lato
• 文字字體大小：16px
• 文字顏色：#000000
• 文本行高：1em
• 文本方向：左

打開 Sizing 子類別，使用“70%”作為寬度並選擇左側模塊對齊。

最後，添加“20px”的頂部邊距。

第五課文模塊

第五個文本模塊用作簡約按鈕。 在“內容”選項卡中，使用“→”符號 + 文本並在其後面放置一個鏈接。

然後，轉到“設計”選項卡。 對 Text 子類別使用以下設置：

• 文字字體：苦澀
• 文字字體大小：23px
• 文字顏色：#000000
• 文本行高：1em
• 文本方向：左

向下滾動相同的選項卡，直到您遇到 Sizing 子類別。 在該子類別中，使用“49%”的寬度和正確的模塊對齊方式。

最後，添加“80px”的頂部邊距。

第六課文模塊

我們將需要的第六個也是最後一個模塊與前一個模塊幾乎相同。 使用“→”+ 文本並在其後面放置一個鏈接。

文本子類別的設置如下：

• 文字字體：苦澀
• 文字字體大小：23px
• 文字顏色：#e02b20
• 文本行高：1em
• 文本方向：左

將寬度更改為“39%”並使用正確的模塊對齊方式。

第二排

背景顏色

打開行設置並添加 'rgba(255,255,255,0.14)' 作為背景顏色。

背景圖片

添加您在本文的 Photoshop 部分製作的圖像之一，並使用“色調”作為背景圖像混合。

列結構

您需要添加到標準部分的第二行與前一行正好相反。

克隆模塊

我們在前一行中使用的模塊與我們在這一行中需要的模塊相同，所以繼續，克隆它們並將它們放在第一列而不是第二列中。 我們需要在本文的下一部分中進行一些對齊更改。

第一個文本模塊修改

打開第一個文本模塊並添加“20px”的頂部邊距。

分頻器模塊修改

然後，打開分隔器模塊並將大小調整子類別中的模塊對齊更改為右側。

第二個文本模塊修改

將第二個文本模塊的文本方向設置為右側。

並在 Sizing 子類別中選擇正確的模塊對齊方式。

第三個文本模塊修改

第三個文本模塊也需要正確的文本方向。

以及正確的模塊對齊。

第五個文本模塊修改

對於第五個文本模塊，您唯一需要做的就是將寬度更改為“82%”。

第六文本模塊修改

第六個文本模塊的計數相同，但使用“87%”代替。

隱藏平板電腦和手機部分

完成兩行後，您可以繼續在手機和平板電腦上禁用整個部分。

平板電腦和手機目錄（新版塊）

為了讓平板電腦和手機上的一切都看起來很棒，我們將創建一個新的標準部分。

部分設置

背景顏色

添加“#FFFFFF”作為該部分的背景顏色。

自定義填充

轉到“設計”選項卡並添加“15px”的頂部填充。

第一排

列結構

然後，向該部分添加一個兩列的行。

漿紗

轉到該行的 Sizing 子類別並進行以下更改：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

圖像模塊

我們不使用背景圖像，而是使用圖像模塊。 這樣，我們將確保文本和圖像不會重疊。 繼續將圖像模塊添加到行的第一列並上傳圖像。

克隆桌面版第一行模塊

然後，克隆您在桌面版本第一行中使用的所有模塊，並將它們放在第二列中。

更改第二個文本模塊字體大小

只有一件事需要改變； 第二個文本模塊的字體大小。 將其更改為 65px。

第二排

列結構

然後，繼續向該部分添加另一個兩列行。

漿紗

此行也需要修改大小子類別：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

圖像模塊

將圖像模塊也添加到第一列並上傳圖像。

桌面版第二行的克隆模塊

然後，繼續克隆放置在桌面版本第二行中的模塊。 克隆它們後，將它們放在此行的第二列中。

更改第二個文本模塊字體大小

第二個文本模塊的文本大小也需要更改。 繼續並給它一個'65px'的字體大小。

隱藏桌面部分

完成兩行後，您可以繼續在桌面上禁用整個部分。

結果

瞧，按照本文中的所有步驟操作後，您應該在桌面上獲得以下結果：

以及手機和平板電腦上的以下內容：

最後的想法

在這篇文章中，我們向您展示瞭如何創建一個漂亮的滾動時尚目錄。 為了讓我們的設計發揮作用，我們首先向您展示瞭如何使用 Photoshop 在您的圖像中製作透明形狀。 之後，我們在 Divi 教程中使用這些圖像來創建設計。 如果您有任何問題或建議； 確保您在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

精選圖片來自Rvector / shutterstock.com