作為終身會員和今年黑色星期五的新客戶，我們為您提供的獨家登陸頁面之一是令人驚嘆的 UI Kit 登陸頁面。 這種佈局包含一些 Divi 最好的內置設計組合和高質量的模型，將您的網站提升到一個新的水平。 在這篇文章中，我們將向您展示如何掌握它並有效地使用它。

如果您是當前的終身客戶，或者如果您在我們的黑色星期五促銷期間購買了新帳戶或升級了，您可以立即下載此佈局。

獲取獨家黑色星期五 UI 套件登陸頁面

在進入此用例之前，您需要了解獨家的黑色星期五 UI 套件登陸頁面，您可以通過成為新的優雅主題會員、升級您現有的帳戶或已經成為我們的終身會員來獲得該頁面。 如果您確實已經是終身會員，您可以登錄我們的會員區並在此處下載我們所有的專屬登陸頁面。 其他所有人都需要使用下面的按鈕購買或升級，然後才能學習我們教程的其餘部分。

在它消失之前聲明交易！

使用 Divi 的列結構精美地列出產品和功能

對於本文的其餘部分，我們假設您已經利用了我們的黑色星期五優惠，或者您已經是終身會員並且可以訪問黑色星期五 UI 套件登陸頁面。

從我們的會員區下載新的 UI Kit Landing Page 後，您可以觀看下面的視頻，看看它的設置有多簡單。 我們還鼓勵您按照本教程進行操作，以使您的網站為進一步定製做好準備。

在這個用例帖子中，我們將向您展示如何使用 Divi 的新列結構驚人地列出您的功能和/或產品。 我們將處理的設計與 UI Kit Landing Page 一起看起來很棒，並允許您以有效和美觀的方式使用頁面上的空間。

預覽

讓我們來看看不同屏幕尺寸的結果。

懸停和動畫

我們還將為各種設計元素添加一些微妙的懸停和動畫設置。 這將提供以下交互：

讓我們開始吧！

使用 UI Kit 登陸頁面添加新頁面

您需要做的第一件事是使用您下載並上傳的 UI Kit Landing Page 創建一個新頁面。 如果您不確定如何操作，請務必查看本文前一部分中的視頻，該視頻將逐步指導您完成此操作。

在頁面上找到功能部分

上傳布局後，向下滾動，直到看到頁面上的功能部分。

刪除現有行

刪除您可以在本節中找到的最後兩行。 我們將用我們的功能/產品​​列表替換這些行的內容。

在包含行的行下方添加新行

列結構

使用以下列結構向該部分添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並在設計選項卡中修改大小設置。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：是
• 均衡柱高：是

間距

為了確保這個設計在所有屏幕尺寸上看起來都很棒，我們將使用不同的自定義邊距和填充值：

• 上邊距：100px
• 下邊距：100px
• 頂部填充：87px
• 第 1 列頂部填充：100 像素（桌面）、0 像素（平板電腦和手機）
• 第 2 列頂部填充：100 像素（桌面）、0 像素（平板電腦和手機）
• 第 3 列頂部填充：100 像素（桌面）。 0px（平板電腦和手機）
• 第 3 列底部填充：50 像素（平板電腦和手機）
• 第 4 列左填充：10px（僅限手機）
• 第 4 列右填充：10px
• 第 5 列左填充：5px（桌面和平板電腦），10px（手機）
• 第 5 列右內邊距：5px（桌面和平板電腦），10px（手機）
• 第 6 列左填充：10px
• 第 6 列左填充：10px（僅限手機）

將文本模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將文本模塊添加到帶有數字的第一列。

默認背景顏色

為該模塊添加背景顏色。

• 背景顏色：#0f0f0f

懸停背景顏色

並在懸停時更改背景顏色。

• 背景顏色：#ff5400

背景圖片

您還可以將可以在媒體庫中找到的圖標圖像之一添加到背景中：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中心
• 背景圖像重複：不重複

默認文本設置

繼續修改文本設置。

• 文字字體：Muli
• 文字字體粗細：輕
• 文字顏色：#ffffff
• 文字大小：80px（桌面和手機），40px（手機）
• 文本行高：1em

• 文字陰影顏色：##ffffff
• 文本方向：左

默認間距

添加一些自定義填充來創建一個正方形。

• 頂部填充：200px
• 左填充：50px（僅限手機）
• 右填充：50px（僅限手機）

懸停間距

修改懸停時的間距設置。

• 左填充：100px

邊界

為了與 UI Kit Landing Page 相匹配，我們還添加了一些微妙的圓角。 在每個角上添加“20px”。

盒子陰影

使用以下框陰影也為模塊添加一些顏色：

• 框陰影水平位置：20px
• 框陰影垂直位置：-50px
• 框陰影傳播強度：17px
• 陰影顏色：#593aff

動畫片

最後但並非最不重要的一點是，向文本模塊添加一個非常微妙的幻燈片動畫。

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫強度：3%

將分隔模塊添加到第 2 列

能見度

我們需要的下一個模塊是分頻器模塊。 繼續並在第二列中添加一個。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

接下來更改分隔線顏色。

• 顏色：#ffffff

間距

為了重疊第一列中的文本模塊，我們將使用一些自定義邊距值，我們將根據不同的屏幕尺寸進行調整。

• 上邊距：30px
• 左邊距：-200px（桌面和平板電腦），0px（手機）
• 右邊距：200px（桌面和平板電腦），0px（手機）

將文本模塊 #1 添加到第 3 列

添加內容

進入下一欄！ 在這裡，我們需要的第一個模塊是標題文本模塊。 繼續並添加您的第一個功能或產品的標題。

標題文字設置

然後，轉到標題文本設置並進行一些更改以匹配 UI Kit Layout Pack。

• 標題 3 字體：Muli
• 標題 3 字體粗細：輕
• 標題 3 文本顏色：#ffffff
• 標題 3 文字大小：30px（桌面和平板電腦），18px（手機）

間距

為了將此模塊推向左側，我們將使用一些自定義間距值。

• 上邊距：20px
• 下邊距：20px
• 左邊距：-180px（桌面和平板電腦），0px（手機）
• 左填充：20px（桌面和平板電腦），50px（手機）
• 右內邊距：20px（桌面和平板電腦），50px（手機）

將文本模塊 #2 添加到第 3 列

添加內容

我們需要的下一個模塊是描述文本模塊。 繼續並輸入您的功能或產品的描述。

文字設置

接下來更改文本設置。

• 文字顏色：rgba(255,255,255,0.5)
• 文本行高：2.2em

間距

使用一些自定義間距值也將這個模塊推到左邊。

• 左邊距：-180px（桌面和平板電腦），0px（手機）
• 左填充：20px（桌面和平板電腦），50px（手機）
• 右內邊距：20px（桌面和平板電腦），50px（手機）

在第 3 列中克隆和放置按鈕模塊

我們在第 3 列中需要的最後一個模塊是按鈕模塊。 為了節省時間，我們將克隆頁面上的現有按鈕，並將副本放置在我們添加的其他兩個模塊的正下方。

更改內容

更改按鈕模塊的內容。

更改間距

我們也將這個模塊推到左邊。 如您所見，第 3 列中的所有模塊都佔用了兩列的空間。 這種方法允許我們創建另一個與我們想要的結果相匹配的列結構。

• 上邊距：50px
• 左邊距：-160px（桌面和平板電腦），50px（手機）
• 右邊距：50px（僅限手機）

將圖像模塊添加到第 4 列

上傳圖片

進入下一欄！ 將圖像模塊添加到第 4 列並上傳選擇的圖像。 在這個例子中，我們使用了 500×500 的圖像尺寸，但也可以隨意使用其他圖像尺寸。

盒子陰影

為這個模塊添加一個微妙的框陰影。

• 陰影顏色：#ffffff

動畫片

最重要的是，還要為圖像添加幻燈片動畫。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：100ms
• 動畫強度：3%

將文本模塊 #1 添加到第 4 列

添加內容

在圖像模塊的正下方，繼續添加帶有一些選擇內容的標題文本模塊。

默認背景顏色

更改此模塊的背景顏色。

• 背景顏色：#0f0f0f

懸停背景顏色

並在懸停時使用另一種背景顏色。

• 背景顏色：#593aff

標題文字設置

繼續更改標題文本設置以匹配 UI Kit Landing Page。

• 標題 4 字體：Muli
• 標題 4 字體粗細：輕
• 標題 4 文本顏色：#ffffff
• 標題 4 文字大小：23px（桌面和平板電腦），18px（手機）

默認間距

接下來添加一些自定義間距值。

• 頂部填充：50px
• 左填充：30px
• 右填充：30px

懸停間距

並在懸停時更改這些值以創建一個很好的過渡。

• 下邊距：50px
• 頂部填充：20px
• 底部填充：20px

將文本模塊 #2 添加到第 4 列

添加內容

我們在第 4 列中需要的第二個也是最後一個模塊是描述文本模塊。 輸入一些選擇的內容。

背景顏色

接下來更改背景顏色。

• 背景顏色：#0f0f0f

文字設置

並修改文本設置。

• 文字顏色：rgba(255,255,255,0.5)
• 文本行高：2.2em

間距

要創建乾淨的外觀和感覺，請向此模塊添加一些自定義填充。

• 底部填充：50px
• 左填充：30px
• 右填充：30px

邊界

最後但並非最不重要的是，將“20px”添加到模塊的底部兩個角。

克隆第 4 列中的所有模塊兩次並放置在剩餘的列中

更改圖像和內容

既然您在第 4 列中擁有所需的所有模塊，您可以繼續克隆所有這些模塊兩次，並將重複項放置在剩餘的兩列中。 更改內容和圖像以創建多樣性。

根據需要多次克隆行（根據列表項的數量）

我們完成了我們的第一個列表項！ 現在，您可以根據需要多次克隆該行，具體取決於您要展示的功能和/或產品的數量。

更改克隆內容

對於每個重複項，您都需要更改內容。

查找和替換顏色

您還可以使用 Divi 的查找和替換功能快速更改列表項的調色板。

更改懸停背景顏色

確保在更改調色板後，也會更改數字文本模塊的懸停背景顏色。

• 背景顏色：#593aff

更改背景圖像

最後但並非最不重要的一點是，您還可以根據您允許顯示的功能和/或產品在列表中選擇另一個圖標。

最後的想法

此用例是我們黑色星期五交易的一部分，我們與黑色星期五客戶和終身會員共享 6 個免費的限量版登錄頁面。 通過在這些天加入我們授權的社區並成為會員，您將獲得：

• 25% 關閉一切
• 所有 6 個登陸頁面都是免費的
• 訪問我們很棒的主題和插件
• 獎金獎品

抓住機會，今天就成為會員！