如何使用 Divi 顯示處於粘性狀態的列 CTA
已發表: 2020-10-15在創建頁面設計的某個時刻，您可能會遇到要以交互方式共享的服務、課程或類似內容的列表。 您用於列表內容的設計對訪問者如何消化內容起著非常重要的作用。 對於大多數列表，您還需要包含連接點的號召性用語。 如果您正在尋找一種創造性的方式來做到這一點，那麼您會喜歡本教程。
今天，我們將向您展示如何使用 Divi 顯示處於粘性狀態的列 CTA。 一旦 CTA 觸及列的末尾，粘性效果就會停止，這提供了一種輕鬆的體驗，在這種體驗中，人們可以繼續閱讀列表項並決定隨時採取行動，而無需向上或向下滾動以找到 CTA . 我們也將免費共享 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載粘滯欄 CTA 部分佈局
要了解免費的粘性列 CTA 部分佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
讓我們開始重建吧！
添加新部分
背景顏色
首先向您正在處理的頁面添加一個新部分。 打開部分設置並應用白色背景色。
- 背景顏色：#ffffff
添加第 1 行
列結構
繼續使用以下列結構添加新行：
間距
尚未添加任何模塊，打開行設置並應用一些底部邊距。
- 底邊距：5%
將文本模塊添加到列
添加 H2 內容
添加帶有您選擇的一些 H2 內容的文本模塊。
H2 文本設置
轉到模塊的設計選項卡並相應地更改 H2 文本設置：
- 標題 2 字體：Alata
- 標題 2 字體粗細：粗體
- 標題 2 文本對齊：居中
- 標題 2 文本顏色：#000000
- 標題 2 文字大小：
- 桌面：55px
- 平板電腦：40px
- 電話：30px
將分隔模塊添加到列
能見度
在文本模塊的正下方，添加一個分隔器模塊並確保啟用“顯示分隔器”選項。
- 顯示分隔線：是
線
轉到模塊的設計選項卡並按如下方式更改線路設置：
- 線條顏色：#3a7a84
- 線型：雙
漿紗
通過相應地修改大小設置來完成模塊的設置：
- 分隔線重量：10px
- 寬度：8%
- 模塊對齊：居中
- 高度：10px
添加第 2 行
列結構
繼續使用以下列結構在前一行的正下方添加另一行：
漿紗
打開行設置並修改大小設置如下：
- 使用自定義裝訂線寬度：是
- 天溝寬度：2
- 均衡柱高：是
- 寬度：95%
- 最大寬度：2580px
間距
接下來刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
第 1 列設置
背景圖片
然後，打開第 1 列設置並應用背景圖像。
- 背景圖片尺寸：封面
邊界
移至列的設計選項卡並應用一些圓角。
- 所有角落：20px
將 Blurb 模塊添加到第 2 列
添加內容
是時候添加模塊了，從第 2 列中的 Blurb 模塊開始。添加一些您選擇的內容。
選擇圖標
接下來選擇一個圖標。
背景顏色
然後，應用白色背景色。
- 背景顏色：#FFFFFF
圖標設置
轉到模塊的設計選項卡並相應地更改圖標設置：
- 圖標顏色：#3a7a84
- 圖像/圖標放置：左
標題文字設置
然後，設置標題文本設置的樣式。
- 標題標題級別：H3
- 標題字體：阿拉塔
- 標題字體粗細：粗體
- 標題文字顏色：#000000
- 標題文字大小：
- 桌面：35px
- 平板電腦：30px
- 電話：20px
正文設置
也對正文文本設置進行一些更改。
- 正文字體：Karla
- 正文大小：
- 桌面：17px
- 平板電腦：15px
- 電話：14px
- 車身線高：2.5em
漿紗
接下來更改大小設置。
- 內容寬度：100%
間距
並將一些自定義填充值應用於間距設置。
- 頂部填充：20%
- 底部填充：20%
- 左填充：10%
- 右填充：10%
邊界
接下來，我們將為邊框設置添加一些圓角。
- 所有角落：20px
盒子陰影
我們將包括一個微妙的框陰影。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(59,120,130,0.14)
動畫片
接下來在動畫設置中移除 Blurb 模塊的默認動畫。
- 圖像/圖標動畫：無動畫
模糊標題 CSS
並通過在高級選項卡中的模糊標題 CSS 框中添加一行 CSS 代碼來完成模塊設置。
margin-bottom: 20px;
克隆 Blurb 模塊兩次
完成第一個 Blurb 模塊後，可根據需要多次復制 Blurb 模塊。
更改內容
更改每個重複模塊中的內容。
將 CTA 模塊添加到第 1 列
添加內容
在第 1 列中，我們唯一需要的模塊是 Call to Action 模塊。 添加一些您選擇的內容。
添加按鈕鏈接
接下來添加一個按鈕鏈接。
漸變背景
然後，應用漸變背景。
- 顏色 1：RGBA(59,120,130,0.53)
- 顏色 2：#112730
- 漸變類型：線性
- 梯度方向：161度
標題文字設置
轉到模塊的設計選項卡並對標題文本設置進行以下更改：
- 標題標題級別：H3
- 標題字體：阿拉塔
- 標題字體粗細：粗體
- 標題文字顏色：#ffffff
- 標題文字大小：
- 桌面：50px
- 平板電腦和手機：30px
按鈕設置
接下來設置按鈕樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：
- 桌面：20px
- 平板電腦：17px
- 電話：15px
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：0px
- 按鈕字體：Alata
- 按鈕字體粗細：粗體
- 頂部填充：20px
- 底部填充：20px
- 左填充：20px
- 右填充：20px
- 框陰影水平位置：0px
- 框陰影垂直位置：3px
- 陰影顏色：#ffffff
漿紗
轉到模塊的大小設置並應用以下更改：
- 寬度：
- 台式機：95%
- 平板電腦和手機：100%
- 模塊對齊：居中
間距
也添加一些自定義的頂部和底部填充。
- 頂部填充：150px
- 底部填充：150px
邊界
還包括一些圓角。
- 所有角落：20px
轉換 翻譯
通過應用以下轉換轉換設置來完成模塊設置：
- 對：
- 桌面：-25px
- 平板電腦和手機：0px
將粘性效果應用於 CTA 模塊
粘性設置
現在所有元素都已就位，是時候應用粘性效果了。 打開 CTA 模塊並應用以下粘性設置：
- 粘性位置：
- 桌面：堅持到頂部
- 平板電腦和手機：請勿粘貼
- 粘性頂部偏移：50px
- 底部粘性限制：列
- 從周圍的粘性元素偏移：是
- 過渡默認和粘性樣式：是
不透明度
現在模塊變成了粘性，我們可以應用粘性樣式。 轉到過濾器設置並應用以下不透明度過濾器設置：
- 默認不透明度：
- 台式機：0%
- 平板電腦和手機：100%
- 粘性不透明度：100%
過渡
最後但並非最不重要的一點是，我們將更改高級選項卡中的過渡設置。 就是這樣！
- 轉換持續時間：800ms
- 過渡速度曲線：輕鬆
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的粘性選項發揮創意。 更具體地說，我們向您展示瞭如何使用粘性列 CTA 精美地顯示列表項。 這種方法允許您直觀地顯示所有項目，並在您的訪問者通過您的服務、課程或其他類型的列表準備好時在附近進行號召性用語。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。