如何在 Divi 中創建曲線文字設計

如果您正在尋找一種獨特的方式來展示網頁上的文本，那麼知道如何在 Divi 中創建彎曲的文本設計可能會派上用場。 這種設計適用於在 Divi 中構建自定義圖形或創意標題設計，而無需使用照片編輯器。 通常這涉及更完整的 html 和 css 來完成，但使用 Divi，自定義 CSS 最少，並且您有更多內置選項可以以獨特的方式輕鬆設計文本。

在本教程中，我們將向您展示如何創建幾個彎曲的字母設計，您可以將它們用作用於您自己目的的有用模板。 如果有的話，您可以為將來的設計工具箱添加一些新的東西。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的彎曲文本設計的先睹為快。

免費下載字母動畫設計示例佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

在Divi中創建曲線文本背後的基本思想

要使用本教程中的方法創建彎曲文本，您需要在單獨的文本模塊中添加文本的每個字母（您將希望使用等寬字體以獲得最佳效果）。 給文本模塊一個設定的高度。 然後你需要給每個文本模塊一個居中的絕對位置，以便它們都堆疊在彼此的頂部。

這很重要，因為我們希望每個字母都從相同的中心點旋轉。 之後，您可以使用 Divi 的變換選項沿 z 軸旋轉每個字母以創建彎曲的文本（想想在數學課中使用指南針畫一個圓圈）。 另外，請注意，每個文本模塊的高度決定了圓半徑，這也會增加圓的周長，從而增加字母之間的空間。

這是 8 個文本模塊以 45 度為增量旋轉以創建文本的完美圓形佈局的示例。 我在每個模塊周圍添加了一個白色邊框，以便您可以輕鬆看到旋轉。

並且，這是以 20 度為增量旋轉相同文本模塊的示例。

入門

訂閱我們的 YouTube 頻道

首先，在 Divi 中創建一個新頁面。 然後給你一個頁面標題並在前端部署Divi builder。 選擇“從頭開始構建”選項。 現在你準備好了！

創建曲線文字設計

創建部分和行

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

在我們添加模塊之前，請繼續更新部分設置，如下所示：

• 背景漸變左顏色：#1e003d
• 背景漸變右顏色：#121212
• 漸變類型：徑向

• 背景圖像：[插入大約 100 像素 x 100 像素的徽標圖像]
• 背景圖片尺寸：實際尺寸

保存設置，然後跳轉到行設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最小高度：400px
• 高度：40vw
• 最大高度：600px
• 自定義填充：0px 頂部，0px 底部

然後將以下自定義 CSS 添加到 Column Main Element 以確保所有文本模塊保持水平居中：

列主要元素 CSS：

display:flex;
justify-content:center;

為每個字母創建文本模塊

現在我們準備用我們的第一個字母添加我們的第一個文本模塊。 為此，向行列添加一個新的文本模塊並更新以下內容：

• 內容：d（只是一個字母）
• 文本字體：Ubuntu Mono（任何等寬字體都可以）
• 文字文字顏色：#ffffff
• 文字文字大小：5vw（桌面），40px（手機）
• 文字方向：居中
• 最小高度：200px
• 高度：20vw
• 最大高度：300px

然後將變換原點更新為底部。 這對於確定文本旋轉發生的位置很重要。 我們希望文本模塊在模塊的底部旋轉。 儘管不需要旋轉第一個文本模塊，但將其添加到此處很重要，這樣我們就可以在為其他字母複製文本模塊時使用此選項。

• 變換原點：100%（或底部）

然後將以下自定義 CSS 添加到 Main Element 以給文本模塊一個絕對位置。

position: absolute !important;

創建和旋轉其他文本模塊

為了創建其餘的字母，我們將復製文本模塊。 一旦我們複製了文本模塊，我們需要做的就是更新字母，然後每個新模塊將旋轉增加 45 度。

由於文本模塊將堆疊在前端的每個頂部，因此最好使用線框視圖模式進行這些更新。

繼續複製文本模塊，然後更新以下內容：

• 內容：我
• 變換旋轉 z 軸：45deg

繼續複製文本模塊的過程，然後使用新字母更新文本模塊並將變換旋轉增加 45 度。 以下是其餘 6 個文本模塊更新的細分：

文本模塊 3

• 內容：五
• 變換旋轉 z 軸：90 度

文本模塊 4

• 內容：我
• 變換旋轉 z 軸：135deg

文本模塊 5

• 內容：d
• 變換旋轉 z 軸：180 度

文本模塊 6

• 內容：我
• 變換旋轉 z 軸：225deg

文本模塊 7

• 內容：五
• 變換旋轉 z 軸：270 度

文本模塊 8

• 內容：我
• 變換旋轉 z 軸：315deg

就是這樣！ 現在看看最終的結果。

最後結果

調整較長文本的文本大小和旋轉度

如果要為較大的文本設計選項調整彎曲文本，可以更改每個文本模塊的文本大小和變換旋轉。

部署線框視圖模式，然後使用 Divi 的多選功能選擇所有包含彎曲字母的文本模塊。 然後單擊打開所選文本模塊之一的設置以打開元素設置模式，該模式將一次更新所有所選模塊。

在元素設置下，將桌面上的文本大小更改為 40px。

保存設置，然後打開每個文本模塊的設置並更新每個文本模塊的字母和旋轉。 將第一個文本模塊旋轉 0 度，然後將後面的每個文本模塊的 z 軸旋轉增加 10 度。 然後根據需要復製文本模塊以獲得更多字母。 在這個例子中，我將拼出“elegant.themes”。

這是每個文本模塊所需的內容字母和輪換的細分。

• 文本模塊 1
  • 內容：e
  • 變換旋轉 z 軸：0deg
• 文本模塊 2
  • 內容： l
  • 變換旋轉 z 軸：10 度
• 文本模塊 3
  • 內容：e
  • 變換旋轉 z 軸：20 度
• 文本模塊 4
  • 內容：克
  • 變換旋轉 z 軸：30 度
• 文本模塊 5
  • 內容：一
  • 變換旋轉 z 軸：40 度
• 文本模塊 6
  • 內容：n
  • 變換旋轉 z 軸：50 度
• 文本模塊 7
  • 內容：噸
  • 變換旋轉 z 軸：60 度
• 文本模塊 8
  • 內容： 。
  • 變換旋轉 z 軸：70 度
• 文本模塊 9
  • 內容：噸
  • 變換旋轉 z 軸：80 度
• 文本模塊 10
  • 內容：h
  • 變換旋轉 z 軸：90 度
• 文本模塊 10
  • 內容：e
  • 變換旋轉 z 軸：100 度
• 文本模塊 11
  • 內容：米
  • 變換旋轉 z 軸：110 度
• 文本模塊 12
  • 內容：e
  • 變換旋轉 z 軸：120 度
• 文本模塊 13
  • 內容
  • 變換旋轉 z 軸：130 度

這是到目前為止的結果。

調整整個文本旋轉的一種簡單方法是對行應用變換旋轉。 打開行設置，然後使用 z-index 控制撥盤將彎曲文本放置在您想要的任何位置。

這是最終的設計。

隨意探索添加更多文本並調整旋轉度以獲得正確的字母間距。 您還可以調整文本模塊的高度以減少或增加半徑。

最後的想法

一旦您了解它的工作原理，在 Divi 中創建彎曲的文本設計是一個非常簡單的過程。 本文將幫助您了解設置文本模塊所涉及的幾何圖形，以便它們在曲線上旋轉。 一旦設置正確，除了一些自定義 css 片段之外，您還可以使用 Divi 的內置設計設置來獲得非常有創意的設置。 希望這會給你一些靈感，讓你製作一些自己獨特的曲線文字設計。

而且，如果您想為彎曲的字母添加一些動畫，請查看我們關於如何為字母設置動畫的文章。

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

乾杯!