如何在 Divi 中為獨特的佈局設計旋轉文本（教程 + 免費佈局下載）

我們大多數人習慣於從右到左和從上到下閱讀文本。 但是當談到網頁設計時，打破常規可能是個好主意。 一種方法是使用文本旋轉。 在您的網站上旋轉文本似乎不切實際，但它似乎確實有其一席之地。 事實上，垂直文本方向在現代網頁設計中似乎很常見。 而且，儘管大多數旋轉文本純粹是出於設計目的，但可以認為旋轉（或垂直）文本（雖然更難閱讀）是一種有效的吸引註意力的技術。

使用 Divi，您可以使用內置的轉換選項旋轉頁面上的任何元素。 因此，在本教程中，我將向您展示如何在 Divi 中成功旋轉文本以創建獨特的佈局設計。 為此，我將設計一個包含旋轉文本示例的三部分佈局。

讓我們開始吧。

搶先看

這是我們將在教程中構建的整個佈局的先睹為快。 請注意，在佈局的三個不同部分中有文本旋轉的示例。

從本教程免費下載完整版面

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

下載佈局

免費下載

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

下載

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

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

現在讓我們回到教程。

旋轉文本時要記住的事情

您應該向哪個方向旋轉文本？

如果您要為垂直顯示旋轉文本，您可能不確定要旋轉文本的方向。 您可以逆時針旋轉文本，以便文本從下到上閱讀。 或者，您可以順時針旋轉文本，使文本從上到下閱讀。 如果您想知道哪個更容易閱讀，我不確定是否有答案。 您可以嘗試從書架上書名的方向獲取線索。 但不同國家的做法不同（美國的標準是順時針，從上到下）。

在本教程中，我將在大多數情況下逆時針旋轉文本，主要是因為我喜歡它在頁面左側的外觀（也許我更喜歡將頭向左傾斜）。 但是可以隨意嘗試不同的方向。

模糊問題

在某些瀏覽器（如 Chrome 和 Safari）上，使用變換旋轉屬性時文本會變得有點模糊。 要解決此問題，您可以沿 X 軸添加 51% 或 52% 的變換原點值。 這應該可以解決問題。

第 1 部分：使用垂直文本構建標題

對於佈局的第一部分，我們將創建一個帶有垂直文本的標題。 為此，我們將使用變換選項旋轉模糊模塊。

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

在添加模塊之前，通過更新以下部分設置來刪除該部分的頂部和底部填充：

自定義填充：0px 頂部，0px 底部

接下來，按如下方式更新行設置：

• 背景圖片：[添加寬度至少為 1920px 的圖片]
• 第 1 列背景顏色：#121212

• 自定義寬度：100%
• 天溝寬度：1
• 均衡柱高：是
• 自定義填充（桌面）：0px 頂部，0px 底部
• 自定義填充（平板電腦）：40% 正確
• 自定義填充（電話）：30% 正確
• 第 1 列自定義填充（桌面）：頂部 200 像素，底部 200 像素
• 第 1 列自定義填充（平板電腦）：頂部 150 像素，底部 150 像素

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

創建模糊模塊

現在我們準備添加我們的標題內容。 為此，請在行的左列添加一個模糊模塊。

更新以下內容：

• 作品名稱：Divi 設計
• 內容：您的內容在這裡。
• 使用圖標：是
• 圖標：燈泡

• 圖標顏色：#f6454e
• 圖標字體大小：32px
• 文字方向：居中
• Title Heading Level：H1（因為它是頁面的主標題）
• 標題字體：Muli
• 標題字體樣式：TT
• 標題文字顏色：#ffffff
• 標題文字大小：70 像素（桌面）、50 像素（平板電腦）、36 像素（手機）
• 正文顏色：#cccccc
• 正文字母間距：4px
• 寬度：500px
• 模塊對齊：居中

重要提示：由於我們將旋轉模糊模塊使其垂直站立，因此自定義寬度 500px 將成為垂直模糊模塊的高度。 所以重要的是內容適合這個模塊。 在這個例子中，我使用了少量文本並在不同設備上調整了標題字體的大小，這樣文本就不會換行並弄亂設計。

使用變換選項旋轉 Blurb 模塊

要旋轉模糊模塊（及其所有內容），請更新以下變換選項：

• Transform 旋轉 X 軸：-90deg

您必須手動輸入 -90deg 值。 這將使您從下到上垂直對齊內容。

如果您使用 Chrome 或 Safari，您可能會注意到文本有點模糊。 使用 transform:rotate 屬性時有時會發生這種情況。 要解決此問題，您可以按如下方式稍微調整變換原點：

• 變換原點 Y 軸：51%

您可能需要稍微調整此值，直到文本清晰為止。 例如，在某些設計中，52% 可能看起來很清晰。

創建垂直按鈕

接下來，我們將在標題底部添加一個按鈕，以提醒用戶向下滾動頁面。 然後我們可以使用變換選項旋轉按鈕，就像我們對模糊模塊所做的一樣。

創建一個具有一列結構的新行。

在我們添加按鈕模塊之前，更新行設置如下：

• 背景顏色：#f6454e
• 自定義寬度：100%
• 天溝寬度：1

接下來，向該行添加一個按鈕模塊並更新以下按鈕選項：

• 按鈕對齊：居中
• 為按鈕使用自定義樣式：是
• 按鈕文字大小：16px
• 按鈕文字顏色：#ffffff
• 按鈕邊框寬度：0px
• 按鈕字母間距：9px
• 字體粗細：輕
• 字體樣式：TT
• 按鈕圖標：向右箭頭

旋轉和定位按鈕

要旋轉和定位按鈕，我們將使用邊距和變換旋轉的組合，如下所示：

• 自定義邊距（桌面）：頂部 -50px，底部 50px，左側 -50px
• 自定義邊距（平板電腦）：左 0px
• Transform 旋轉 X 軸：90 度

這次按鈕旋轉 90 度（順時針），以便從上到下垂直顯示文本。 這似乎很合適，因為我們希望用戶向下滾動。

第 2 部分：旋轉文本模塊以創建對角線標籤

在佈局的下一部分中，我們將創建三個帶有用作標籤的旋轉文本模塊的簡介。 這是在頁面上顯示特色項目的好方法。

這是如何做到的。

創建一個具有三列行的新常規部分。 然後在第一列添加一個模糊模塊。

選擇使用燈泡圖標而不是默認圖像。

然後更新blurb模塊如下：

• 圖標顏色：#f6454e
• 圖標字體大小：32px
• 自定義填充：底部 3vw，左側 3vw，右側 3vw

接下來，按如下方式更新行設置：

• 第 1 列背景顏色：#eeeeee
• 第 2 列背景顏色：#eeeeee
• 第 3 列背景顏色：#eeeeee
• 均衡柱高：是

下一步對於我們添加旋轉文本模塊標籤設計至關重要。 我們希望文本模塊的溢出隱藏在列之外。 為了確保發生這種情況，我們需要將“溢出：隱藏”屬性作為自定義 CSS 添加到每一列。

在高級選項卡下，添加以下自定義 CSS：

第 1 列主要元素 CSS：

overflow: hidden;

第 2 列主要元素 CSS：

overflow: hidden;

第 3 列主要元素 CSS：

overflow: hidden;

添加和旋轉文本模塊作為標籤

接下來，在第 1 列中的模糊模塊上方添加一個文本模塊。

使用“精選”一詞更新文本內容。

然後設置文本模塊的樣式如下：

• 背景顏色：#f6454e
• 文字字體：Muli
• 文字字體粗細：半粗體
• 文字文字顏色：#ffffff
• 文字字母間距：3px
• 文本行高：2.5em
• 文字方向：居中

現在給文本模塊一個自定義寬度，如下所示：

• 寬度：180px
• 模塊對齊方式：左

接下來，使用以下轉換選項將文本模塊放置在列的左上角：

• 變換 平移 X 軸：-25%
• 變換 平移 Y 軸：70%

重要的是在此處使用百分比值以使設計更具響應性，因此您需要手動輸入它們。

Transform 旋轉 X 軸：-45deg

請注意，將文本模塊的溢出隱藏在列之外以完成設計。

我們剩下要做的就是複制第一列中的模塊並將它們粘貼到第二列和第三列中。

這是最終結果。

第 3 部分：為您的內容創建垂直標題

佈局的下一部分使用類似的技術將文本模塊旋轉和定位為內容的垂直標題。 這是展示服務等內容的有用佈局。 我還將演示使用列表創建非常獨特的垂直標題的創造性方法。

這是如何做到的。

用一列行創建一個新的常規部分。

然後復制上面佈局中三列行中的一個模糊模塊。 這將使我們在設計上領先一步。

然後更新模糊設置如下：

• 圖像/模糊放置：左
• 自定義邊距（桌面）：左 200 像素
• 自定義邊距（電話）：左 0px
• 自定義填充：頂部 100 像素，底部 100 像素

左邊距創建了我們將添加的垂直文本模塊所需的空間。

然後給blurb模塊添加一個邊框如下：

• 邊框寬度：2px
• 邊框顏色：#eeeeee

創建文本模塊

有了模糊內容，我們現在可以添加我們的文本模塊。 創建一個新的文本模塊，然後將其直接放置在模糊模塊上方。

之後，在內容框中添加以下html（確保選擇了文本選項卡）：

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

這是 html 使用有序列表 (ol)、h5 標籤和無序列表 (ul)。 這允許我們使用文本模塊中的 Divi 內置設計選項分別自定義每個列表項和 h5。

這種技術可用於創建一些令人驚嘆的列表設計。

接下來，跳轉到設計選項卡並更新以下內容：

• 無序列表字體：Muli
• 無序列表字體粗細：輕
• 無序列表文本大小：15px
• 無序列表樣式類型：無
• 無序列表項縮進：0.01px

• 有序列表字體：Abril Fatface
• 有序列表文本顏色：
• 有序列表文本大小：40px
• 有序列表字母間距：4px
• 有序列表行高：1.3em
• 有序列表樣式類型：小數前導零

• 標題 5 字體：Muli
• 標題 5 字體粗細：超輕
• 標題 5 字體樣式：TT
• 標題 5 文字大小：62px

調整、旋轉和定位文本模塊

現在我們已經有了文本設計，讓我們給它一個自定義寬度。 請記住，一旦我們旋轉它以垂直顯示，模塊的寬度將成為模塊的高度。

• 自定義寬度：300px
• 模塊對齊方式：左

要旋轉文本，請更新以下內容：

• Transform 旋轉 X 軸：-90deg（桌面），0deg（手機）

我們需要將手機顯示的旋轉重置為 0deg。

接下來更新 Transform Translate 選項：

• Transform Translate X 軸：-10%（桌面），0%（手機）
• 變換 平移 Y 軸：50%（桌面），0%（手機）

轉換設置稍微調整文本模塊的位置。 但是，為了獲得正確的間距，我們需要替換模糊模塊上方的文本模塊留下的負空間。 為此，我們需要向文本模塊添加一些負底邊距，如下所示：

• 自定義邊距（桌面）：-150px 底部
• 自定義邊距（手機）：0px 底部

複製部分並更新有序列表開始編號

要創建此佈局的更多部分，您可以復制該部分。 有序列表編號仍為“1”。 要更改此設置，您需要將開始的有序列表 (ol) 標記替換為以下內容：

<ol start="2">

這將允許列表以數字 2 而不是 1 開頭。

就是這樣。 我們都完成了！

帶有旋轉文本設計的版面的最終設計

桌面

平板電腦和手機

最後的想法

知道如何在 Divi 中旋轉文本（或任何真正的內容）是吸引對內容的注意的好方法。 另外，如果你做得對，它真的可以讓設計脫穎而出。 我希望本教程能激發一些靈感，讓您了解如何為更漂亮的設計實現文本旋轉。

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

乾杯!