下載 Divi 的免費 CTA 列滑動英雄部分設計

已發表: 2019-08-31

您頁面的英雄部分值得所有關注。根據您網站的內容以及目標受眾的行為方式，有無數種方法可以為您的英雄部分設置樣式。對於某些網站，放置多列 CTA 卡可以派上用場，而不會產生壓倒性的體驗。一個很好的方法是創建列刷卡 CTA 卡。在今天的 Divi 教程中，我們將向您展示如何從頭開始創建一個解決此技術的令人驚嘆的設計。您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

列滑動 CTA

移動的

列滑動 CTA

免費下載英雄章節

要了解免費英雄部分，您首先需要使用下面的按鈕下載它們。要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新部分

漸變背景

向您正在處理的頁面添加一個新部分，打開部分設置並插入漸變背景。

顏色 1：#ffffff
顏色 2：#f5ede5
梯度方向：90度
起始位置：17%
結束位置：17%

列滑動 CTA

間距

轉到設計選項卡並在不同的屏幕尺寸上添加一些自定義的頂部和底部填充。

頂部填充：5vw（桌面）、10vw（平板電腦）、13vw（手機）
底部填充：5vw（桌面）、10vw（平板電腦）、13vw（手機）

列滑動 CTA

添加第 1 行

列結構

繼續使用以下列結構添加新行：

列滑動 CTA

背景顏色

尚未添加任何模塊，打開行設置並更改背景顏色。

背景顏色：#fff6ed

列滑動 CTA

漿紗

移至設計選項卡並更改行的大小設置。

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：60vw（桌面），100%（平板電腦和手機）
最大寬度：100%
行對齊：右

列滑動 CTA

間距

我們還在間距設置中添加了一些自定義填充值。

頂部填充：6vw
底部填充：6vw
左填充：5.5vw
右填充：24vw

列滑動 CTA

邊界

接下來轉到邊框設置並使用以下設置添加左邊框：

左邊框寬度：6px
左邊框顏色：#FFFFFF

列滑動 CTA

盒子陰影

添加一個微妙的框陰影以在英雄部分創建深度。

框陰影模糊強度：100px
陰影顏色：rgba(0,0,0,0.22)

列滑動 CTA

CSS 類

並在高級選項卡中使用 CSS 類。在這篇文章的後面，我們將使用這個 CSS 類來隱藏滾動條。

CSS 類：滑動滾動條

列滑動 CTA

主要元素

要創建水平滾動/滑動，我們需要水平放置列。我們將通過在行的主要元素中添加一些自定義 CSS 代碼來實現。

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

列滑動 CTA

溢出

轉到可見性設置並更改行的溢出。

水平溢出：滾動
垂直溢出：隱藏

列滑動 CTA

列設置

完成行設置後，您可以打開第一列的設置。

列滑動 CTA

漸變背景

添加漸變背景。

顏色 1：rgba(245,237,229,0.91)
顏色 2：rgba(219,34,65,0.84)
起始位置：35%
結束位置：81%
將漸變放在背景圖像上方：是

列滑動 CTA

背景圖片

連同背景圖片。

背景圖片尺寸：封面
背景圖片位置：中心
背景圖像重複：不重複

列滑動 CTA

間距

轉到設計選項卡並在不同的屏幕尺寸中添加一些自定義填充值。

頂部填充：4vw（桌面）、10vw（平板電腦）、12vw（手機）
底部填充：4vw（桌面）、10vw（平板電腦）、12vw（手機）
左填充：2vw（桌面）、5vw（平板電腦）、7vw（手機）
右填充：2vw（桌面）、5vw（平板電腦）、7vw（手機）

列滑動 CTA

邊界

繼續向邊框設置中的每個角添加“20px”邊框半徑。

列滑動 CTA

主要元素

完成這項工作的另一個重要部分是向列的主要元素添加一行 CSS 代碼。

width: 100% !important;

列滑動 CTA

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

添加H3內容

是時候開始添加模塊了！您可以根據需要添加任意數量的模塊，並根據自己的喜好設置它們的樣式。但是，如果您想重新創建與本文預覽中共享的完全相同的示例，請從文本模塊開始並插入一些 H3 內容。

列滑動 CTA

H3 文本設置

轉到設計選項卡並相應地更改 H3 文本設置：

標題 3 字體：Poppins
標題 3 字體粗細：輕
標題 3 文本顏色：#e92640
標題 3 文字大小：1.5vw（桌面）、3.5vw（平板電腦）、4.5vw（手機）

列滑動 CTA

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

添加內容

我們需要的下一個模塊是另一個文本模塊。輸入您選擇的一些段落內容。

列滑動 CTA

文字設置

接下來轉到文本設置並進行一些更改。

文字字體： Poppins
文字字體粗細：輕
文字顏色：#e92640
文字大小：0.8vw（桌面）、1.9vw（平板電腦）、2.8vw（手機）

列滑動 CTA

間距

我們還添加了一些底部邊距以在我們的列刷卡中創造空間。

下邊距：18vw（桌面）、30vw（平板電腦）、42vw（手機）

列滑動 CTA

將按鈕模塊添加到第 1 列

添加副本

進入下一個模塊，即按鈕模塊。輸入您選擇的一些副本。

列滑動 CTA

按鈕設置

轉到設計選項卡並相應地更改按鈕設置：

為按鈕使用自定義樣式：是
按鈕文字大小：0.8vw（桌面）、1.8vw（平板電腦）、2.5vw（手機）
按鈕文字顏色：#f5ede5
按鈕邊框寬度：1px
按鈕邊框顏色：#f5ede5
按鈕邊框半徑：5px
按鈕字體： Poppins

列滑動 CTA

間距

通過在不同的屏幕尺寸上添加一些自定義填充值來增加按鈕的大小。

頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
左填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）
右填充：3vw（桌面）、5vw（平板電腦）、7vw（手機）

列滑動 CTA

將分頻器模塊添加到第 1 列

能見度

我們需要的下一個模塊是分頻器模塊。確保啟用了“顯示分隔線”選項。

顯示分隔線：是

列滑動 CTA

線

移至設計選項卡並更改線條顏色。

線條顏色：#f5ede5

列滑動 CTA

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

添加內容

本專欄中我們需要的下一個也是最後一個模塊是另一個文本模塊。輸入您選擇的一些段落內容。

列滑動 CTA

文字設置

轉到設計選項卡並相應地更改文本設置：

文字字體： Poppins
文字字體粗細：輕
文字顏色：#f5ede5
文字大小：0.8vw（桌面）、1.9vw（平板電腦）、2.8vw（手機）
文本行高：2.3em

列滑動 CTA

間距

添加一些上邊距。

最高利潤率：2vw

列滑動 CTA

最多可克隆列 5 次並重複用於其他 CTA

完成第一列及其中的所有模塊後，您最多可以克隆整列 5 次，具體取決於要顯示的列刷卡 CTA 卡片的數量。確保您更改了每列副本的所有副本以及按鈕鏈接。

列滑動 CTA

添加第 2 行

列結構

到第二排！我們將使用這一行與前一行創建重疊。選擇以下列結構：

列滑動 CTA

漿紗

尚未添加任何模塊，打開行設置並相應地調整大小設置：

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：100%
最大寬度：100%

列滑動 CTA

間距

在這篇文章的後面，我們將添加我們需要的模塊並創建一個負頂部重疊，使模塊看起來像是第一行的一部分。這意味著我們根本不需要第二行佔據我們設計中的任何空間。這就是為什麼我們要刪除所有默認的頂行和底行填充。

頂部填充：0px
底部填充：0px

列滑動 CTA