使用 Divi 為移動設備創建無盡的水平刷卡

瀏覽內容幾乎是每個人每天都會做的事情。 它基本上已成為第二天性，因此不用說，將它添加到您的網站可以幫助改善整體用戶體驗。 在這篇文章中，我們將向您展示如何創建無休止的水平刷卡，主要針對涉及觸摸的移動和平板設備。 雖然這是一個移動優先的教程，但結果在桌面上也能很好地工作。 人們可以使用將包含的滾動條或使用他們的觸摸板向左和向右“滑動”。

讓我們開始吧！

預覽

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

示例 1：一列行

桌面

移動的

示例 2：“滑動列”中的兩列行 + 多個模塊

桌面

移動的

方法

• 為了創建這種漂亮的效果，我們需要使用幾行 CSS 代碼將整個垂直列轉換為水平滑動/滾動網格機制
• 將此機制使用垂直列（並將其轉換為水平網格）將允許您添加任意數量的刷卡，您可以確定有多少列
• 換句話說; 您將向下添加模塊，滑動/滾動機制會將下擺置於水平列中
• 對於第一個示例，我們將使用單列行
• 這將允許滑動機制佔據屏幕的整個寬度
• 另一方面，第二個示例僅將兩列中的一列轉換為滑動/滾動機制，並使另一列保持靜態
• 我們還將向您展示如何將多個模塊添加到滑動/滾動機制的“列”
• 一旦你理解了這個方法，你就可以真正地創建你想要的任何類型的設計，並將它作為你可以在上面的 GIF 中看到的滑動/滾動機制的一部分
• 您可以通過轉到“為 Divi 下載 10 個免費流體部分背景圖像”帖子找到我們將使用的所有流體背景圖像

訂閱我們的 YouTube 頻道

重新創建示例 #1

添加新部分

讓我們開始創建第一個示例！ 向您正在處理的頁面添加一個新部分。

添加新行

列結構

然後，添加一行一列。 我們將把整個列變成滑動/滾動機制。

漿紗

尚未添加任何模塊，打開行設置並轉到大小設置。 在這裡，我們將刪除部分、行和列之間的所有空間。 換句話說，該列將佔據屏幕的整個寬度。

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

列 CSS 代碼

如前所述，我們將列本身變成了滑動/滾動網格機制。 為此，我們需要三行自定義 CSS 代碼，您可以在下面找到這些代碼。 繼續將這些添加到行的高級選項卡中的列主元素。

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

第一行 CSS 代碼啟用滾動/滑動。 第二行將列變成水平網格。 第三行 CSS 代碼定義了網格。 我們基本上是說我們想要 6 列，每列的寬度為 70%。 根據您希望在滑動/滾動機制中顯示的刷卡數量，您必須修改這些值。 因此，假設您希望 10 個不同的刷卡成為機制的一部分，並且您希望將每列的寬度增加到 90%，則必須使用以下 CSS 代碼行：

grid-template-columns: repeat(10, 90%);

將 CTA 模塊添加到第 1 列

添加內容

完成修改行設置後，繼續向列添加 CTA 模塊。 添加一些您選擇的內容。

關聯

您還需要添加按鈕鏈接 URL 以使按鈕顯示在模塊中。

漸變背景

繼續添加漸變背景。

• 顏色 1：#802bff
• 顏色 2：#001519

背景圖片

在這篇文章的方法部分，我們提到我們將使用流體背景圖像，您可以通過轉到這篇文章免費下載。 下載流體背景圖像後，搜索“ fluid-style-2.png ”圖像文件並將其上傳到背景圖像選項卡。 相應地修改背景圖像設置：

• 背景圖片尺寸：適合
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：疊加

文字設置

轉到設計選項卡並確保應用以下文本設置：

• 文字方向：居中
• 文字顏色：淺

標題文字設置

接下來修改標題文本設置。

• 標題字體：Didact Gothic
• 標題字體粗細：粗體
• 標題文字大小：1vw（桌面）、2.5vw（平板電腦）、4vw（手機）
• 標題行高度：1.9em

正文設置

隨著正文文本設置。

• 正文字體：Open Sans
• 正文大小：0.6vw（桌面）、1.3vw（平板電腦）、2.5vw（手機）
• 機身線高：2.6em（台式機和平板電腦），2.1em（手機）

按鈕設置

我們也在更改此模塊中按鈕的外觀。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.9vw（桌面）、2.1vw（平板電腦）、3.5vw（手機）
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：10px
• 按鈕邊框顏色：#ffffff
• 按鈕字體：Didact Gothic

漿紗

在大小設置中稍微減小 CTA 模塊的寬度也很重要。 這將確保此模塊與滑動/滾動機制中的下一個模塊之間始終存在間隙。

• 寬度：95%
• 模塊對齊：居中

間距

當然，我們希望在所有不同的屏幕尺寸下一切都看起來很棒。 這就是我們將在間距設置中添加各種自定義填充值的原因。

• 上邊距：50px
• 下邊距：50px
• 頂部填充：12vw（桌面）、5vw（平板電腦）、14vw（手機）
• 底部填充：12vw（桌面）、5vw（平板電腦）、14vw（手機）
• 左填充：20vw（桌面）、3vw（平板電腦）、8vw（手機）
• 右填充：20vw（桌面）、3vw（平板電腦）、8vw（手機）

邊界

最後但並非最不重要的一點是，我們還在模塊的每個角落添加了“20px”。

根據需要多次克隆 CTA 模塊

完成自定義 CTA 模塊後，您可以繼續克隆該模塊，次數不限。

更改副本 1 的漸變背景和背景圖像

更改第一個副本的漸變背景。

• 顏色 1：#7a010d
• 顏色 2：#001519

並改用“ fluid-style-9.png ”背景圖像。

• 背景圖片尺寸：封面
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：疊加

更改副本 2 的漸變背景和背景圖像

接下來更改第二個副本的漸變背景。

• 顏色 1：#26ccff
• 顏色 2：#001519

上傳“fluid-style-10a.png”圖像文件作為背景圖像。

• 背景圖片尺寸：適合
• 背景圖片位置：左上角
• 背景圖像重複：不重複
• 背景圖像混合：疊加

更改副本 3 的漸變背景和背景圖像

更改第三個副本的漸變背景。

• 顏色 1：#ff21b8
• 顏色 2：#001519

上傳“ fluid-style-6.png ”背景圖片。

• 背景圖片尺寸：適合
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：疊加

更改副本 4 的漸變背景和背景圖像

更改第四個副本的漸變背景。

• 顏色 1：#4400aa
• 顏色 2：#001519

使用“ fluid-style-4.png ”作為背景圖片。

• 背景圖片尺寸：適合
• 背景圖片位置：中心
• 背景圖像重複：不重複
• 背景圖像混合：疊加

更改重複 5 的漸變背景和背景圖像

更改最後一個副本的漸變背景。

• 顏色 1：#ff2626
• 顏色 2：#001519

使用“ fluid-style-7.png ”作為背景圖片。

• 背景圖片尺寸：適合
• 背景圖片位置：右上角
• 背景圖像重複：不重複
• 背景圖像混合：疊加

將列 CSS 調整為模塊數

我們之前已經提到過這一點，但要再次確保 CSS 代碼與您在專欄中擁有的模塊數量相匹配。

滾動條樣式

將 CSS 類添加到列

您還可以設置此滑動/滾動網格機制隨附的滾動條的樣式。 將以下 CSS 類添加到您的列中：

• 列 CSS 類：swipe-scrollbar

將自定義 CSS 添加到頁面設置

然後，打開頁面設置，轉到高級選項卡並添加以下自定義 CSS 代碼：

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

重新創建示例 #2

克隆上一節

繼續下一個例子！ 克隆您在本文前一部分中創建的部分。

更改 CTA 間距設置

然後，更改第一個 CTA 模塊的間距設置。

• 上邊距：50px
• 下邊距：50px
• 頂部填充：5vw（台式機和平板電腦），14vw（手機）
• 底部填充：5vw（台式機和平板電腦），14vw（手機）
• 左填充：4vw（桌面）、3vw（平板電腦）、8vw（手機）
• 右填充：4vw（桌面）、3vw（平板電腦）、8vw（手機）

將間距設置擴展到列中的所有模塊

通過右鍵單擊並單擊“擴展間距樣式”來擴展這些新的間距設置。

• 至：所有號召性用語
• 全文：本專欄

更改列結構

繼續更改行的列結構。

將模塊移動到第二列

並將每個模塊放在第二列中。

將 CSS 移動到第二列並更改值

由於我們已將模塊從一列移至另一列，因此我們還需要對 CSS 代碼執行相同的操作。 將 CSS 類添加到第 2 列。

• 第 2 列 CSS 類：swipe-scrollbar

將 CSS 代碼行放在第 2 列主要元素中。 我們還將每列的寬度更改為“80%”。

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

將標題文本模塊添加到第 1 列

添加內容

繼續向第一列添加一個新的文本模塊。 添加一些您選擇的 H2 含量。

標題文字設置

轉到設計選項卡並修改 H2 文本設置。

• 標題 2 字體：Didact Gothic
• 標題 2 字體粗細：粗體
• 標題 2 文本對齊：居中
• 標題 2 文字大小：2.5vw（桌面）、5vw（平板電腦）、6vw（手機）

間距

添加一些自定義上邊距。

• 上邊距：100px

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

能見度

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

• 顯示分隔線：是

顏色

接下來更改分隔線顏色。

• 顏色：#333333

漿紗

隨著尺寸設置。

• 分隔線重量：7px
• 高度：0px
• 寬度：10%
• 模塊對齊：居中

間距

通過在不同的屏幕尺寸上添加一些自定義上邊距來完成分隔器模塊。

• 上邊距：1.8vw（桌面）、2.5vw（平板電腦）、4vw（手機）

將正文模塊添加到第 1 列

添加內容

第一列中我們需要的下一個也是最後一個模塊是描述文本模塊。 添加一些選擇的內容。

文字設置

繼續更改設計選項卡中的文本設置。

• 文字字體：Open Sans
• 文字大小：0.7vw（桌面）、1.6vw（平板電腦）、2.3vw（手機）

漿紗

也修改大小設置。

• 寬度：43%（桌面）、68%（平板）、70%（手機）
• 模塊對齊：居中

間距

並添加一些自定義的頂部和底部邊距。

• 上邊距：50px
• 下邊距：50px

切換到線框視圖

修改完第 1 列中的所有模塊後，繼續並切換到線框視圖。

將文本模塊添加到第 2 列的頂部

在這裡，我們將在第二列的頂部添加一個文本模塊。 我們添加的 CSS 代碼幫助我們創建了 6 個不同的列。 這意味著，如果您希望在這 6 列中的每一列中顯示兩個不同的模塊，則總共需要有 12 個模塊。 模塊放置水平發生，因此第 2 列中的前 5 個模塊將彼此相鄰顯示。 然後，該機制將切換到另一行並添加剩餘的 6 個模塊。

添加內容

打開您在第二列頂部添加的新文本模塊並添加一些選擇的內容。

文字設置

然後，轉到設計選項卡並修改文本設置。

• 文字字體：Didact Gothic
• 文字字體粗細：粗體
• 文字顏色：#000000
• 文字大小：1.1vw（桌面）、3vw（平板電腦）、3.5vw（手機）

克隆文本模塊 5x

繼續克隆這個文本模塊 5 次。 現在，您將擁有 6 個不同的文本模塊，這也等於我們擁有的 CTA 模塊的數量。 因此，如果您改用 10 個 CTA 模塊，則需要添加 10 個文本模塊（或任何其他模塊）以平衡列結構。

更改重複內容

更改每個副本的內容以匹配將出現在其下方的 CTA 模塊，您就完成了！

預覽

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

示例 1：一列行

桌面

移動的

示例 1：“滑動列”中的兩列行 + 多個模塊

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 創建無限的水平刷卡。 創建這些刷卡不僅可以幫助您為網站添加額外的維度，還可以幫助訪問者無縫瀏覽您網站必須提供的所有內容。 如果您有任何問題或建議，請務必在下方評論區留言！