使用 Divi 為下一個關於頁面創建交互式問題卡網格

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 為下一個關於頁面創建交互式問題卡網格。 我們將使用 Internet Service Provider Layout Pack 的 about 頁面，但您可以在您正在處理的任何頁面上使用該方法。 它為訪問者提供了不同的用戶體驗，並允許您與他們就您共享的信息進行交互。 掌握方法後，您可以通過使用 Divi 的內置選項來創建您選擇的替代問題卡網格設計。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下我們將從頭開始重新創建的問題卡網格。

桌面

移動的

讓我們開始創作吧！

使用 ISP 佈局包的關於頁面創建新頁面

要創建我們上面顯示的設計，我們將使用 Internet 服務提供商佈局包的關於頁面，因此繼續使用此佈局創建一個新頁面。 像往常一樣，您可以在預製佈局中找到它。

刪除英雄部分和頁腳之間的所有部分

我們將用問題網格卡替換所有當前內容。 為此，我們首先需要刪除英雄部分和頁腳之間的所有部分。

在中間添加新部分

我們將創建的問題卡網格可以包含您想要回答的任何類型的公司問題。 您還可以使用網格來展示常見問題。 繼續在頁面的英雄部分和頁腳之間添加一個新的常規部分。

添加新行

列結構

在不對部分設置進行任何更改的情況下，使用以下列結構添加新行：

漿紗

我們將刪除列之間的所有默認空間。 打開行設置並對大小設置進行一些更改。

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

間距

我們仍然需要在列之間留出一些空間才能有一個漂亮的設計。 轉到間距設置並添加一些自定義填充值。

• 頂部填充：10px
• 底部填充：10px
• 第 1 列左填充：10 像素（桌面）、5 像素（平板電腦和手機）
• 第 1 列右填充：5px
• 第 2 列左填充：5px
• 第 2 列右填充：5px
• 第 3 列左填充：5px
• 第 3 列右內邊距：10 像素（桌面）、5 像素（平板電腦和手機）

將新的 Blurb 模塊添加到第 1 列

添加內容

要創建懸停效果，我們唯一需要的模塊是 Blurb 模塊。 我們將從創建一個開始，然後克隆它以創建整個結果。 將 Blurb 模塊添加到第一列。 將您要回答的問題添加到標題字段和內容框中的答案。

選擇圖標

然後，在圖像和圖標設置中選擇一個合適的圖標。 此圖標將幫助您的訪問者了解他們必須將鼠標懸停在問題卡上才能看到答案。

默認圖標設置

繼續更改設計選項卡中的圖標設置。

• 圖標顏色：#aaaaaa
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：40px

懸停圖標設置

並在懸停時修改圖標顏色。 我們在懸停時使用完全透明的顏色來使圖標在懸停時消失。

• 圖標顏色：rgba(255,255,255,0)

文字設置

接下來，在文本設置中更改文本方向。

• 文字方向：居中

默認標題文本設置

也對標題文本設置進行一些更改。

• 標題字體: Poppins
• 標題字體粗細：粗體
• 標題文字顏色：#333333
• 標題文字大小：40px
• 標題字母間距：-3px

懸停標題文本設置

並在懸停時更改標題文本顏色。 我們再次使用完全透明的顏色來確保當有人將鼠標懸停在 Blurb 模塊時不會出現問題。

• 標題文字顏色：rgba(255,255,255,0)

默認正文設置

繼續更改正文設置。

• 正文字體：Open Sans
• 正文字體重量：輕
• 正文顏色：rgba(255,255,255,0)
• 正文文字大小：25px
• 正文字母間距：-2px
• 車身線高：1.6em

懸停正文設置

並在懸停時更改正文顏色。

• 正文顏色：#000000

間距

要將我們的模塊塑造成正方形，我們將添加一些自定義填充值。

• 頂部填充：9vw
• 底部填充：9vw
• 左填充：50px
• 右填充：50px

默認圓角

我們還為我們的模塊提供了圓角的“30px”。

懸停圓角

我們將在懸停時移除這些圓角。

默認邊框

我們將添加一個底部邊框。

• 底部邊框寬度：0px
• 底部邊框顏色：#0ffeb

懸停邊框

更改懸停時的底部邊框寬度以使其顯示。

• 底部邊框寬度：10px

盒子陰影

為了增加一些深度，我們還將使用框陰影。

• 陰影顏色：rgba(0,0,0,0.05)

過渡

最後但並非最不重要的一點是，我們將減少高級選項卡中的過渡持續時間。

• 轉換持續時間：250ms

克隆 Blurb 模塊兩次並放置在剩餘的列中

現在您的第一個 Blurb 模塊已完成，您可以通過克隆它並將重複項放置在剩餘的兩列中來節省時間。

更改內容

確保更改每個重複項的內容。

更改底部邊框顏色

與底部邊框顏色一起。

克隆整行兩次

您可以根據需要最多克隆該行，從而創建問題卡網格。

單獨更改每個項目的內容和底部顏色

但是不要忘記更改內容和底部顏色，使每一張問題卡都獨一無二！

預覽

現在我們已經完成了所有步驟，讓我們最後看看在不同屏幕尺寸上的最終結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的 Internet 服務提供商佈局包創建交互式問題卡網格。 儘管我們已確保設計與佈局包的樣式相匹配，但您可以使用此方法將任何 about 頁面轉換為具有交互性的頁面。 如果您有任何問題或建議，請務必在下方評論區留言！