如何使用 Divi 創建一個簡單的文本選取框

文本選框為您的網站提供了一個滾動的文本區域，讓讀者可以看到有用的內容片段。它們也被稱為行情（或新聞行情），通常用於在頁面的頂部或底部顯示穩定的新聞更新流. 通常滾動動畫是在循環中使用一行內容完成的，以便重複顯示信息。 不幸的是，html <marquee>標籤已經過時，所以我們現在依靠 CSS 和 JavaScript 來創建<marquee> 。 但是，使用 Divi，您可以創建一個簡單的選取框，而不必擔心自定義代碼。

在本教程中，我們將帶您了解使用 Divi 創建簡單的文本選取框是多麼容易。 我們甚至將介紹如何在懸停時暫停滾動文本動畫以及如何添加大文本選取框作為標題的獨特設計元素。

讓我們開始吧。

搶先看

免費下載佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要具備以下條件：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）

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

第 1 部分：在 Divi 中創建一個簡單的文本選取框

對於第一個示例，我們將為一行文本創建一個簡單的文本選取框。 為此，我們將為一行設置最大寬度並隱藏溢出。 然後，我們將向包含文本行的文本模塊添加一個循環幻燈片動畫，以便它像選取框一樣反复滑過該行進入視圖。

這是如何做到的。

首先，創建一個具有一列行的常規部分。

然後，在添加模塊之前，更新具有固定寬度、框陰影和邊框半徑的行，如下所示：

• 最大寬度：200px
• 填充：頂部 10 像素，底部 10 像素
• 圓角：10px
• 盒子陰影：見截圖
• 水平溢出：隱藏
• 垂直溢出：隱藏

添加文本模塊

一行完成後，向該行添加一個新的文本模塊。

然後用一行文本更新正文內容。 現在確保文本行不會分成另一行。

• 正文：“這是一個句子”

文本模塊設計

更新文本模塊設計設置如下：

• 邊距：-100% 左，100% 右

這會將文本模塊定位在行左側之外。 因為該行隱藏了溢出可見性，該模塊將被隱藏，直到我們添加動畫將其顯示出來。

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫持續時間：5000ms
• 動畫強度：100%
• 動畫開始不透明度：100%
• 動畫速度曲線：線性
• 動畫重複：循環

結果

現在讓我們看看結果。

創建更長的文本行

在上面的簡單文本選取框設計中，我們將文本行的寬度限制為與行的寬度相同。 但是，如果我們想創建一行更長的行寬相同的文本，我們需要稍微修改一下設置。

首先，在文本模塊上，將正文文本替換為以下內容：

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

添加更多寬度和邊距以適應更長的文本行

您可能會注意到，文本現在分成三行而不是一行。

因此，我們需要調整邊距和動畫強度。

• 寬度：207%
• 邊距：左 -207%，右 207%
• 動畫強度：75%

這裡的技巧是增加寬度並更新邊距值，以便為單行文本提供足夠的空間。 然後調整動畫強度，使循環動畫之間沒有大的中斷。

結果

這是最終結果。

在懸停時暫停選取框文本動畫

由於此選取框包含一個鏈接，因此用戶在鏈接移動時很難實際單擊該鏈接。 但是，我們可以將一小段 css 添加到文本模塊中，這將在懸停時暫停動畫。

添加 CSS 片段以暫停懸停動畫

要添加 css 片段，請打開文本模塊設置並將以下自定義 CSS 添加到懸停選項卡下的主要元素：

animation-play-state: paused;

最後結果

現在看看最終的結果。 注意當光標懸停在文本上時文本動畫將如何暫停，允許用戶單擊鏈接。

第 2 部分：在 Divi 中創建文本選取框作為響應式設計元素

現在我們了解瞭如何在 Divi 中創建一個簡單的文本選取框，我們可以採用相同的概念來創建一個響應式文本選取框設計元素。 這可以很好地為標題或部分標題創建獨特的動畫設計。

為此，我們將使用 Divi 的 Job Recruiter Home Page 預製佈局。

添加預製佈局

要將佈局添加到您的頁面，請打開 Divi 構建器底部的設置菜單，然後單擊加號。 從庫彈出加載中，選擇招聘人員佈局包。 然後單擊以使用主頁佈局。

使用佈局刪除額外內容

將佈局加載到頁面後，部署線框視圖模式並刪除佈局的所有內容，除了全角標題及其正下方的部分。

創建文本選取框動畫

如您所見，“僱用”一詞已在第二部分的文本模塊中用作大文本設計元素。 我們將把那個文本模塊變成一個響應式文本選取框設計元素。 使文本選取框響應的關鍵是確保行和文本模塊跨越瀏覽器窗口的整個寬度。 我們可以使用 100% 的寬度來做到這一點。 然後我們可以使用 vw 長度單位作為文本大小。 這將使文本與瀏覽器寬度很好地縮放。 之後，我們將應用與之前製作簡單文本選取框示例相同的原則。

這是如何做到的。

更新行設置

如前所述，該行需要 100% 才能使此響應式文本選取框設計工作。 這允許我們的文本模塊使用相對於瀏覽器寬度的 vw 長度單位。 由於我們的預製佈局已經有一行寬度為 100%，我們不需要做任何事情。

但是，我們確實需要按如下方式調整其餘設置。

• 邊距：-24vw 底部
• 變換 平移 Y 軸：-24vw
• 水平溢出：隱藏
• 垂直溢出：隱藏

負底邊距是為了消除每當我們使用變換平移向上移動行時留下的負空間。 我們需要為我們的文本選取框效果隱藏行的溢出。

更新文本模塊文本設計

現在您需要做的就是更新文本模塊以將其轉換為大型文本選取框設計元素。

打開文本模塊並更新以下內容：

• 文字文字顏色：rgba(255,255,255,0.16)
• 文字文字大小：36vw
• 邊距：-100% 左，100% 右

文本大小使用 vw 長度單位，因此文本將隨著瀏覽器的寬度很好地縮放。

向文本模塊添加動畫

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫持續時間：10000ms
• 動畫強度：100%
• 動畫速度曲線：線性
• 動畫重複：循環

最終設計

現在看看最終的設計。

最後的想法

文本選取框可以成為網頁設計中的便捷工具。 它們也不限於嚴格用作新聞行情。 他們還可以為您的網頁設計添加漂亮的動畫元素。 最好的部分是 Divi 可以輕鬆地以各種漂亮的方式創建和設計它們。 我希望本教程將幫助您在需要時創建一些簡單的文本選取框。

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

乾杯!