如何使用 Divi 創建一個完全水平的滑動頁面

已發表: 2019-03-16

你有沒有想過創建一個完全水平的頁面，使用滑動和錨鏈接來導航？ 好吧，如果您已經知道並且不完全知道如何處理它，那麼這對您來說是理想的職位。 我們將向您展示如何使用 Divi 創建一個完全水平的滑動頁面。 這種技術確實可以幫助您使您的網站從其他網站中脫穎而出，並符合 2019 年的網頁設計趨勢。我們將創建的結果在所有屏幕尺寸上看起來都很棒。

讓我們開始吧！

預覽

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

桌面

滑動頁面

移動的

滑動頁面

方法

  • 我們將僅使用一個部分創建整個頁面
  • 我們將在教程結束時使用幾行 CSS 代碼將該部分變成水平網格
  • 水平網格將每一行放置在水平放置的列中
  • 您可以決定一個部分包含多少個水平列
  • 在這種情況下，我們將使用 4 個不同的列，每個列由 2 行組成
  • 您可以修改您創建的水平列數並確定每個部分列包含多少行
  • 我們還使用錨鏈接來幫助人們瀏覽不同的部分列
  • 最重要的是，我們正在添加平滑滾動和部分滾動捕捉效果，這將簡化您的訪問者的導航

讓我們開始重建

添加新部分

背景顏色

創建一個新頁面並向其添加常規部分。 打開部分設置並更改背景顏色。

  • 背景顏色：#ffffff

滑動頁面

間距

然後，轉到間距設置並在不同的屏幕尺寸上添加一些自定義填充。

  • 頂部填充：10.5vw（台式機）、15vw（平板電腦）、10vw（手機）
  • 底部填充：3vw（台式機和平板電腦），10vw（手機）

滑動頁面

添加第 1 行

列結構

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

滑動頁面

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

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

滑動頁面

間距

接下來轉到間距設置並在所有不同的屏幕尺寸上進行一些更改。

  • 頂部填充：0px
  • 底部填充：0px
  • 左填充：6vw（平板電腦和手機）
  • 右填充：6vw（平板電腦和手機）
  • 第 1 列底部填充：15vw（平板電腦和手機）
  • 第 2 列左填充：4vw（桌面）、0vw（平板電腦和手機）

滑動頁面

CSS ID

我們需要為我們創建的每個部分列的第一行分配一個 CSS ID。 這將幫助我們在本文後面創建錨箭頭。

  • CSS ID：swipe-1

滑動頁面

自定義 CSS

正如本文的方法部分所述，我們還將平滑滾動和捕捉效果應用於該機制。 為了能夠做到這一點，我們需要向我們創建的每個水平列的第一行添加一行 CSS 代碼。 

scroll-snap-align: start;

滑動頁面

將 Blurb 模塊添加到第 1 列

選擇圖標

我們現在可以開始添加模塊了！ 從第 1 列中的 Blurb 模塊開始。打開模塊設置並選擇左箭頭圖標。

滑動頁面

圖標設置

然後，轉到設計選項卡並對圖標的外觀進行一些更改。

  • 圖標顏色：rgba(255,255,255,0)
  • 圖像/圖標放置：頂部
  • 使用圖標字體大小：是
  • 圖標字體大小：5vw（桌面）、13vw（平板電腦）、21vw（手機）

滑動頁面

間距

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

  • 上邊距：14vw（桌面）、-11vw（平板電腦）、-17vw（手機）
  • 左邊距：60vw（平板電腦和手機）

滑動頁面

能見度

我們還在較小的屏幕尺寸上隱藏模塊。

滑動頁面

將文本模塊添加到第 2 列

添加 H2 內容

我們需要的下一個模塊是第 2 列中的文本模塊。添加一些 H2 內容。

滑動頁面

H2 文本設置

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

  • 標題 2 字體：Source Serif Pro
  • 標題 2 文本對齊方式：左
  • 標題 2 文字大小：3vw（桌面）、7vw（平板電腦和手機）

滑動頁面

漿紗

接下來在大小設置中修改寬度。

  • 寬度：77%

滑動頁面

間距

並為較小的屏幕尺寸添加一些底部邊距。

  • 下邊距：15vw（平板電腦和手機）

滑動頁面

將按鈕模塊添加到第 2 列

添加內容

在您添加的文本模塊正下方，繼續添加按鈕模塊。 輸入一些副本。

滑動頁面

按鈕設置

然後，轉到設計選項卡並更改按鈕設置。

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

滑動頁面

  • 按鈕邊框顏色：#000000
  • 按鈕邊框半徑：0px
  • 按鈕字體：Mukta
  • 字體粗細：粗體
  • 字體樣式：大寫

滑動頁面

間距

接下來添加一些自定義邊距和填充。

  • 最高邊距：6vw（台式機），4vw（平板電腦和手機）
  • 頂部填充：15px
  • 底部填充：15px
  • 左填充：50px
  • 右填充：50px

滑動頁面

將 Blurb 模塊添加到第 3 列

選擇圖標

我們在這一行中需要的下一個也是最後一個模塊是第 3 列中的另一個 Blurb 模塊。選擇您選擇的圖標。

滑動頁面

關聯

然後，轉到鏈接設置並添加一個鏈接，該鏈接會將訪問者引導至該部分的第二個水平列。

  • 模塊鏈接網址：https://www.yourwebsite.com/page/#swipe-2

滑動頁面

圖標設置

繼續並更改圖標設置。

  • 圖標顏色：#333333
  • 圖像圖標放置：頂部
  • 使用圖標字體大小：是
  • 圖標字體大小：5vw（桌面）、13vw（平板電腦）、21vw（手機）

滑動頁面

間距

繼續在不同的屏幕尺寸上添加一些自定義的上邊距和左邊距。

  • 上邊距：14vw（桌面）、-11vw（平板電腦）、-17vw（手機）
  • 左邊距：60vw（平板電腦和手機）

滑動頁面

添加第 2 行

列結構

我們需要的第二行使用以下列結構：

滑動頁面

背景顏色

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

  • 背景顏色：#f7f7f7

滑動頁面

漿紗

接下來修改大小設置。

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

滑動頁面

間距

以及間距設置中的自定義填充和邊距值。

  • 上邊距：-3.5vw（台式機）、-10vw（平板電腦）、-17vw（手機）
  • 頂部填充：8vw（桌面）、15vw（平板電腦）、20vw（手機）
  • 底部填充：8vw（桌面）、15vw（平板電腦）、20vw（手機）
  • 左填充：24vw（台式機），5vw（平板電腦和手機）
  • 右填充：24vw（台式機），5vw（平板電腦和手機）
  • 第 1 列右填充：2vw（台式機）、0vw（平板電腦和手機）
  • 第 2 列左填充：2vw（台式機）、0vw（平板電腦和手機）

滑動頁面

將文本模塊添加到第 1 列

添加內容

繼續將文本模塊添加到第一列。 輸入您選擇的一些副本（包括 H3 標題）。

滑動頁面

文字設置

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

  • 文字字體：Open Sans
  • 文字大小：0.65vw（桌面）、1.8vw（平板電腦）、2.7vw（手機）
  • 文本行高：1.8em

滑動頁面

H3 文本設置

隨著 H3 文本設置。

  • 標題 3 字體：Mukta
  • 標題 2 字體粗細：粗體
  • 標題 3 字體樣式：大寫
  • 標題 3 文字大小：0.8vw（桌面）、3vw（平板電腦）、4vw（手機）
  • 標題 3 行高：1.8em

滑動頁面

間距

也為較小的屏幕尺寸添加一些底部邊距。

  • 下邊距：5vw（平板電腦和手機）

滑動頁面

克隆文本模塊並放置在第 2 列中

完成修改第 1 列中的文本模塊後，您可以克隆它並將副本放置在第二列中。

滑動頁面

更改內容

確保更改內容。

滑動頁面

克隆 Row #1 三次

兩行都完成後，您可以克隆第一行 3 次。

滑動頁面

更改重複 #1

更改行 CSS ID

我們需要更改第一個重複項的 CSS ID。

  • CSS ID：swipe-2

滑動頁面

更改模糊模塊的（第 1 列）圖標顏色

以及第一個 Blurb 模塊的顏色。

  • 圖標顏色：#333333

滑動頁面

更改兩個 Blurb 模塊的鏈接

要使錨鏈接起作用，您必須相應地更改每個箭頭的鏈接：

  • 模塊鏈接網址：https://www.yourwebsite.com/page/#swipe-1

滑動頁面

  • 模塊鏈接網址：https://www.yourwebsite.com/page/#swipe-3

滑動頁面

更改重複 #2

更改行 CSS ID

更改第二個副本的 CSS ID。

  • CSS ID：swipe-3

滑動頁面

更改模糊模塊的（第 1 列）圖標顏色

以及第一個 Blurb 模塊的圖標顏色。

  • 圖標顏色：#333333

滑動頁面

更改兩個 Blurb 模塊的鏈接

再次，相應地更改每個 Blurb 模塊的鏈接：

  • 模塊鏈接網址：https://www.yourwebsite.com/page/#swipe-2

滑動頁面

  • 模塊鏈接網址：https://www.yourwebsite.com/page/#swipe-4

滑動頁面

更改重複 #3

更改 CSS ID

更改第三行重複的 CSS ID。

  • CSS ID：swipe-4

滑動頁面

更改模糊模塊的（第 2 列）圖標

並為第 3 列中的 Blurb 模塊選擇另一個圖標。

滑動頁面

更改模糊模塊的（第 2 列）鏈接

確保點擊後，訪問者將通過相應地修改模塊鏈接 URL 重定向到第一部分列：

  • 模塊鏈接網址：https://www.yourwebsite.com/page/#swipe-1

滑動頁面

克隆 Row #2 三次

進入下一行。 也將這一行克隆 3 次。

滑動頁面

更改重複 #1 的行背景顏色

更改第一個副本的背景顏色。

  • 背景顏色：#dcdced

滑動頁面

更改重複 #2 的行背景顏色

第二個副本使用以下背景顏色：

  • 背景顏色：#ffeed1

滑動頁面

更改重複 #3 的行背景顏色

也更改第三行副本的背景顏色。

  • 背景顏色：#d6ffe5

滑動頁面

將 CSS ID 和 CSS 代碼添加到部分

現在我們有了我們需要的所有行，我們可以讓奇蹟發生。 將 CSS ID 添加到整個部分。 在這篇文章的後面，我們將使用這個 CSS ID 來隱藏滾動條。

  • CSS ID：部分滾動條

滑動頁面

然後，轉到自定義 CSS 選項並向主元素添加一些 CSS 代碼行。 

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

您要創建的部分列越多，您必須在 CSS 代碼中添加的列就越多。 因此，舉例來說，您想要具有相同的結構但允許 7 次滑動而不是 4 次，您必須相應地修改網格模板列 CSS 代碼行： 

grid-template-columns: repeat(7, 100%);

但請記住，如果您要增加列數，則必須添加更多行。 因此，在這種情況下，如果您希望每個部分列顯示兩行，則需要 14 行。

滑動頁面

隱藏滾動條

您還可以通過使用部分 CSS ID 並將以下 CSS 代碼行添加到頁面設置中來選擇隱藏滾動條： 

#section-scrollbar::-webkit-scrollbar {
display: none;
}

滑動頁面

滑動頁面

預覽

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

桌面

滑動頁面

移動的

滑動頁面

最後的想法

使用 Divi 設計網站時，最直接的做法是向下構建。 但僅僅因為這是最簡單的事情，並不意味著您僅限於該選項。 您也可以創建一個完全水平的滑動頁面。 在本教程中，我們向您展示瞭如何使用 Divi 實現一些令人驚嘆的水平滑動網頁設計。 如果您有任何問題或建議，請務必在下方評論區留言！