如何在 Divi 中創建斜線文本滾動效果

創建斜線文字效果是一種有趣的方式，可以為您的內容帶來生機。 這個想法是給人一種錯覺，當用戶向下滾動頁面時，文本被切成兩半並分開。 在本教程中，我們將向您展示在 Divi 中構建此設計是多麼容易！

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第 1 部分：設計截面

在第一部分中，我們將為我們的部分佈局設計部分背景。

背景顏色

首先，將背景顏色添加到默認部分，如下所示：

• 漸變背景左顏色：#29c4a9
• 漸變背景右顏色：#2b87da

分隔線

在設計選項卡下，添加一個頂部分隔線，如下所示：

• 頂部分隔線樣式：見截圖
• 分隔線顏色：白色
• 分隔線翻轉：垂直

間距

為了幫助測試設計的滾動效果，讓我們在該部分的頂部和底部添加一些臨時邊距。 我們可以在將該部分添加到另一個頁面時將其取出。 我們還需要在頂部和底部添加等量的填充。

• 邊距：80vh 頂部，80vh 底部
• 填充：頂部 200 像素，底部 200 像素

額外底部空間的框陰影

為了在部分底部獲得一些額外的設計顏色/空間而不影響部分的實際空間，我們可以添加一個框陰影，如下所示：

• 盒子陰影：見截圖
• 框陰影水平位置：0px
• 框陰影垂直位置：100px
• 陰影顏色：#2b87da

可見性隱藏

然後將溢出設置為隱藏，以便我們的滾動效果在移出該部分時不會變得可見。

• 水平溢出：隱藏
• 垂直溢出：隱藏

第 2 部分：創建斜線文字效果

在下一部分中，我們將創建斜線文字效果。 我們將兩行堆疊在一起，每行都有一個文本模塊，其中包含相同的文本內容。 然後使用負邊距我們將頂部文本向下推，隱藏文本的下半部分。 然後我們將使用負邊距將底部文本向上推，隱藏文本的上半部分。 完成後，我們可以使用滾動效果移動頂行/列來創建文本被斜線的錯覺。

為文本的上半部分添加行

首先，讓我們添加一個單列行。

然後按如下方式更新行設置：

• 天溝寬度：1
• 填充：0px 頂部，0px 底部

列可見性隱藏

接下來，打開列設置並將溢出更新為隱藏：

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加文本模塊

在列中添加一個新的文本模塊。

文字內容

在內容正文區域中，添加“Slash”一詞。

文字設計

跳轉到設計選項卡並按如下方式更新文本樣式：

• 文字字體：B612 Mono
• 文字字體粗細：粗體
• 文字字體樣式：TT
• 文字文字顏色：#ffffff
• 文字 文字大小：150 像素（桌面）、100 像素（平板電腦）、60 像素（手機）
• 文字字母間距：0.1em
• 文本對齊：居中

文字邊距

在這裡，我們需要確保並添加一個正好為文本大小一半的底部邊距。

• 邊距：-75px 底部（桌面），-50px（平板電腦），-30px（手機）

為文本的下半部分添加行

重複行

帶有文本的第一行就位，複製整行以創建底行。

更新文本模塊邊距

然後使用負上邊距而不是下邊距更新重複行中的文本模塊邊距以隱藏文本的上半部分。

• 邊距：-75px 頂部（桌面），-50px 頂部（平板電腦），-30px 頂部（手機）

將滾動效果添加到頂行列

接下來，我們準備為頂行的列添加滾動效果。 我們無法向文本模塊添加滾動效果，因為由於列的溢出隱藏值隱藏了文本的底部，文本將被隱藏。

打開頂行的列設置並更新以下內容：

在垂直運動選項卡下...

• 啟用垂直運動：是
• 起始偏移量：0（在 0% 處）
• 中間偏移：0（50%）
• 結束偏移：-.02（75%）

在水平運動選項卡下...

• 啟用水平運動：是
• 起始偏移量：0（在 0% 處）
• 中間偏移：0（50%）
• 結束偏移：0.2（75%）

在旋轉選項卡下...

• 啟用旋轉：是
• 起始旋轉：0（在 0% 時）
• 中間旋轉：0（在 50% 時）
• 結束旋轉：1度（75%）

現在我們的斜線文字效果就完成了！

第 3 部分：創建移動分隔線

隨著我們的斜線文字效果完成，我們可以添加一個額外的有趣元素 - 一個可以斜線穿過文字的小型飛行分隔線！ 為了創建這個，我們將使用一個分隔模塊，該模塊在文本模塊分隔的確切位置移動到該部分的頁面中心。

這是如何做到的。

添加行

在第二行下添加一列行。

添加分頻器模塊

在列中，添加一個新的分隔器模塊。

分隔線背景

然後選擇不顯示分隔線。 相反，給分隔線一個背景顏色如下：

• 背景漸變左顏色：透明
• 背景漸變右顏色：#29c4a9

變換比例

然後使用變換平移選項更新高度並將其向左移動。

• 高度：4px
• 變換平移 X 軸：-100%

滾動效果

現在添加滾動效果以將分隔線向右移動。

在水平運動選項卡下...

• 啟用水平運動：是
• 起始偏移：-18（25%）
• 中間偏移：0（50%）
• 結束偏移：13（75%）

行設置

為了確保分隔符“斜線”穿過文本的中心，我們需要按如下方式更新行設置：

• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部
• 位置：絕對
• 位置：左中
• Z指數：9

現在分隔線將從左到右穿過文本中間。

第 4 部分：添加正文

對於最後一部分，我們將添加一個文本塊來完成佈局。

添加行

在帶有分隔線的行下添加一個新的單列行。

添加文本模塊

然後向該行添加一個新的文本模塊。

文字內容

然後將以下 HTML 粘貼到正文區域：

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

文字設計

在設計選項卡下，更新以下內容：

• 文字文字顏色：#ffffff
• 鏈接文字顏色：#121212
• 鏈接文字大小：20px

行設置

打開父行的設置並更新以下內容：

• 天溝寬度：1
• 最大寬度：400px
• 位置：絕對
• 位置：底部中心
• 垂直偏移：20px（桌面和平板電腦），-25px（手機）

最後結果

這是最終結果。

最後的想法

對於此設計，將所有設備上的文本保持在一行上很重要，這樣您就可以限制將被斜線的文本數量。 但是，這種斜線滾動效果技術不僅可以應用於文本。 您也可以輕鬆地削減圖像！

我期待在評論中收到您的來信。

乾杯!