如何在 Divi 中在圖像周圍環繞文本（3 種方式）
已發表: 2019-05-27在圖像周圍環繞文本是一種常見的設計技術，最常見於雜誌和報紙等印刷媒體。 但是您也可以在網絡上找到它，尤其是博客文章。 在圖像周圍環繞文本實際上是 WordPress 的一個非常標準的部分，涉及在 WYSIWYG 編輯器上進行簡單的對齊調整。 唯一的問題是很難使用默認的 WordPress 編輯器自定義頁面的樣式。 這就是 Divi 可以提供幫助的地方！
在本教程中，我將向您展示 3 種使用 Divi 在圖像周圍環繞文本的方法。 這將允許您使用 Divi 的強大功能創建經典的打印樣式佈局，以幫助您進行設計。 以下是我們將要介紹的內容：
- 如何使用 WYSIWYG 編輯器在文本模塊內將文本環繞圖像（和塊引用）
- 如何通過在 Divi 中的文本模塊旁邊浮動圖像模塊來環繞圖像
- 如何在居中的圖像周圍環繞文本以獲得獨特的兩列佈局
儘管本教程將專注於圖像，但您實際上可以使用相同的過程在 Divi 中的任何模塊周圍環繞文本。
搶先看
這是我們今天將要構建的主要設計的先睹為快。
讓我們開始吧！
訂閱我們的 YouTube 頻道
免費下載環繞圖像佈局的環繞文本
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。
讓我們進入教程好嗎？
你需要什麼開始
首先，您只需要 Divi 和一些圖像。
- Divi – 確保 Divi 主題已安裝並處於活動狀態。 我們將使用前端的 Divi Builder（視覺構建器）從頭開始創建我們的設計。
- 圖片– 另外，請確保至少有一張 400 像素 x 250 像素的圖片用於本教程。
準備好後，轉到 WordPress 儀表板並導航到頁面 > 添加新。 為您的新頁面命名並在前端部署 Divi Builder。 選擇“從頭開始構建”選項。 現在你準備好了！
如何使用 WYSIWYG 編輯器在文本模塊內圍繞圖像和塊引用環繞文本
WordPress 使用默認的 WordPress (WYSIWYG) 編輯器可以輕鬆地在圖像周圍環繞文本。 由於 Divi 的文本模塊內置了相同的 WordPress WYSIWYG 編輯器，我們可以使用 WordPress 用戶一直使用的相同方法將文本環繞在圖像周圍。
這是如何做到的。
創建一個具有一列行的常規部分，然後向該行添加一個文本模塊。
使用您的副本更新文本模塊的內容。 現在我正在使用幾段 lorem ipsum。
現在，如果您還沒有，請選擇內容編輯器上的可視化選項卡。 然後確保單擊要添加圖像的內容區域的頂部，然後單擊添加媒體按鈕。
在媒體庫彈出窗口中，選擇要使用的圖像。 在附件顯示設置下，為對齊選項選擇左對齊或右對齊。 對於此示例，我想將圖像定位在左側。
WordPress 將向您的圖像添加一個類（稱為“alignleft”），它將使圖像向左浮動。 添加的 float 屬性將允許文本環繞圖像。 WordPress 還將使用邊距在圖像周圍添加一個緩衝區，以在圖像和周圍文本之間創建很小的間距。
而且，當然，如果您將圖像右對齊，圖像將向右浮動，從而允許文本環繞圖像。
您還可以使用類似的技術在文本模塊中的塊引用周圍環繞文本。 為此，請使用內容編輯器創建塊引用。
然後使用塊引用的內置文本模塊設置來設置塊引用的樣式。
然後返回內容編輯器並切換到文本選項卡。 然後向 blockquote 標籤添加一些內聯樣式，以在 blockquote 周圍創建一些間距並將其浮動到左側。 您的 blockquote html 應該是這樣的。
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
現在文本將環繞塊引用。
如何通過在 Divi 中的文本模塊旁邊浮動圖像模塊來環繞圖像
要在圖像模塊周圍環繞文本，我們可以將整個圖像模塊浮動到文本模塊旁邊。 這可能是使用上述 WordPress 編輯器的首選方法，因為它允許您使用 Divi 構建器設置完全控製圖像的樣式，而不是向圖像標籤添加內聯樣式或外部 css。
這是如何做到的。
用一列行創建一個新的常規部分。 然後將圖像模塊添加到具有您選擇的圖像的行。 我使用的圖像來自 Charity Layout Pack，大小為 400 像素 x 250 像素。
然後在圖像模塊下添加一個帶有一些模擬文本內容的文本模塊。
現在兩個模塊都已就位，我們需要將圖像浮動到文本模塊的左側。 為此，請打開圖像模塊設置並將以下自定義 CSS 添加到主元素：
float:left;
然後更新圖像的自定義邊距以創建我們需要的文本環繞圖像的緩衝區：
自定義保證金：頂部 2%，底部 2%，右側 2%
這是結果。
而且，如果您想將圖像向右浮動，請打開圖像模塊設置並將 css 替換為以下內容：
float:right;
並將邊距更新為以下內容：
自定義保證金：頂部 2%，底部 2$，左側 2%
這是結果。
在多列上使用此設計
您還可以在多列中使用此設置來創建用於展示您的服務的文字環繞設計。 為此，請將行的列佈局更改為兩列。
然後給圖像一個最大寬度百分比值，以便它響應不同的瀏覽器寬度。
最大寬度：33.33%（桌面），100%（手機）
從第一列複製圖像和文本模塊並將它們粘貼到第 2 列中。然後根據需要更新內容和圖像。
就是這樣。 這是結果。
如何在居中的圖像或模塊周圍環繞文本以獲得獨特的兩列佈局
在此示例中，我將向您展示如何將兩列文本環繞在居中的圖像模塊周圍。 這允許您創建獨特的雜誌或報紙樣式佈局。 但是，由於沒有“float:center”css 屬性，我們需要在佈局上有點創意才能讓這個設計工作。
這是如何做到的。
使用居中圖像創建頂行內容
首先，創建一個具有一列行的新常規部分。 然後將圖像模塊添加到您的行。 上傳一張 400 像素 x 250 像素的圖片。 此設計的尺寸必須準確。
然後更新設計設置如下：
最大寬度：400px（桌面），100%（平板）
模塊對齊：居中
自定義填充：頂部 2%，底部 2%，左側 2%，右側 2%
然後保存您的設置並打開行設置。 取出行的底部填充。
自定義填充：底部 0px
創建兩列文本行
在包含圖像的行下，創建一個具有兩列佈局的新行。
在第 1 列中，添加一個帶有一些模擬內容的文本模塊。
然後復製文本模塊並將其粘貼到第二列的第二列文本中。
用浮動分隔線創造空白空間
為了創建圖像所需的空間，我們可以使用分隔模塊。 在左列，我們將創建一個圖像大小一半的分隔模塊並將其浮動到右側，這樣我們的文本模塊將環繞分隔線。 然後在右列中，我們將創建另一個圖像大小的一半的分隔符並將其浮動到左側。
為此，請創建一個分隔模塊並將其直接放在第 1 列中的文本模塊上方。
然後更新分隔模塊設置如下：
顯示分隔線：否
寬度：200px
高度：250px
確保高度與您之前創建的圖像高度相同，並且寬度恰好是圖像寬度的一半。
對於移動設備，我們希望禁用平板電腦和手機上的分隔線。 為此，請更新可見性設置以禁用平板電腦和手機顯示屏。
現在我們的第一個分隔符已創建，複製分隔符模塊並將其粘貼到第 2 列中的文本模塊上方。
接下來，我們需要浮動我們的分隔線。 為此，請打開第 1 列中分隔符的設置，並將以下自定義 CSS 添加到主元素：
float: right;
然後，打開第 2 列中分隔器模塊的設置，並將以下自定義 CSS 添加到主元素：
float: left;
使用自定義邊距將圖像移動到位
現在我們需要做的就是把我們的圖像放在第一行，以便它適合我們用分隔線創建的空間。
打開圖像模塊設置並添加以下自定義邊距：
自定義邊距：-250px 底部（桌面），20px（平板電腦）
這是到目前為止的結果。
為章節添加標題
最後一步是可選的，但如果您想為該部分添加標題，請創建一個文本模塊並將其放置在圖像上方。
然後在文本模塊中添加以下內容：
<h2>Learn more about how to give</h2>
然後按如下方式更新文本設置：
背景顏色：#000000
標題 2 字體：Playfair Display
標題 2 文本對齊：居中
標題 2 文字顏色：#ffffff
標題 2 行高：2em
對齊文本以獲得更清晰的文本換行設計
在圖像周圍環繞文本時，尤其是當文本像這樣居中時，使用對齊周圍文本總是一個好主意。 在這種情況下，我們需要做的就是更改文本方向以證明包含我們的環繞文本內容的兩個文本模塊的對齊。
最後結果
這是最終結果。
這是在平板電腦和手機顯示屏上。
最後的想法
知道如何有效地在圖像周圍環繞文本可以真正使您的內容看起來專業且易於閱讀。 這個概念非常簡單。 您需要做的就是將圖像向右或向左浮動，然後在圖像周圍使用自定義間距作為緩衝區。 我喜歡的是你可以浮動任何模塊（不僅僅是圖像）來環繞 Divi 中的任何類型的內容。 我希望這能給你下一個項目的靈感。
我期待在評論中收到您的來信。
乾杯!