目錄
您需要以優雅的方式在圖像周圍放置文本嗎？了解如何在沒有編碼和設計經驗的情況下輕鬆做到這一點。古騰堡編輯器帶來了更多在 WordPress 中將文本環繞文本的選項。
您可以同時實現美觀的網站和輕鬆的內容編輯。從長遠來看，為您的 WordPress 網站選擇古騰堡編輯器將為您提供最好的工具。您將有更多選項以不同方式將文本環繞圖像。古騰堡帶來了許多優勢，例如更清晰的網站源代碼、速度、安全性和可用性。
如何在 WordPress 中將文字環繞在圖像周圍？
古騰堡編輯器和塊使網站內容變得更輕、更現代、更容易閱讀。我們還向您展示瞭如何在 WordPress 頁面、帖子和自定義帖子類型中將文本環繞在圖像周圍的更多方法。有不同的塊，您也可以將它們組合使用，作為一組零件和功能，為您提供額外的包裝選項。
您可以根據子頁面及其內容類型選擇圖像周圍環繞文本的塊。您可以為演示頁面選擇一種樣式，為博客文章選擇另一種樣式。另外，請考慮代表圖像的內容類型。是描述圖片還是更具代表性或銷售媒體？
將文本環繞圖像 – 塊選擇
您可以使用 4 個塊將文本塊包裹在圖像周圍。我們描述所有這些：
- 圖像塊和段落塊在下面找到更多信息
- 媒體和文本塊在下面找到更多信息
- 柱塊 在個人帖子中
- 簇塊 在個人帖子中（該功能僅適用於 Citadela Pro插件)
文字和圖片自動換行以獲得更好的閱讀體驗
您應該使用此塊的原因有多種。如果您正在撰寫博客文章，您會最感激它。圖像是故事不可或缺的一部分。無論您是撰寫有關 IT 新聞的旅遊博客還是雜誌，都沒有關係。因此，在內容中添加照片時，請考慮圖像對齊。讀者將能夠更好地理解您所寫的內容。
在許多情況下，有必要並排插入圖像和文本。什麼是重要的？
- 它必須有意義。圖像必須位於正確的文本旁邊。
- 它必須很好地對齊。
- 它必須適合整個網站佈局。
圖像和段落塊
當在 經典編輯器 你也可以在圖像旁邊放置文本，但你無法談論良好的對齊方式。特別是如果圖像很小並且您在其旁邊放置了更多文本。文字覆蓋了圖像，看起來不太好。
古騰堡編輯 它的圖像塊帶來了一個很棒的功能——圖像大小調整。拖動圖像周圍的點可自動更改其大小和文本對齊方式。
媒體和文本塊 – WordPress 將文本與圖像對齊
如何對齊圖像旁邊的文本？
現在就開始
立即開始無風險試用。無需信用卡。
媒體和文本塊是一個很棒的功能。媒體和文本塊解決了這個問題，並確保文本與圖像完美對齊，而不會破壞構圖和佈局。這就是您應該使用此塊的原因。
它還改進了移動設備上的網站設計。這個包裝塊幫助 WordPress 主題覆蓋不同的移動佈局。在智能手機上，網站的每個部分都必須清晰可見且可讀。媒體和文本塊在手機上的外觀以及表格處理“移動設備上的堆棧”功能的外觀如何，我們將在下面介紹。
很快您就可以在我們名為 Citadela 的新 WordPress 主題中使用媒體和文本塊。在單獨的文章中了解有關 Citadela 主題的更多信息。
如何在塊編輯器中添加媒體和文本塊？
添加媒體和文本塊與添加任何其他塊一樣簡單。它是一個核心塊，意味著您無需下載或安裝任何內容。
使用頂部面板或編輯器中任意位置的“+”圖標，然後選擇媒體和文本塊。
最後一個選項是鍵入“/”，然後寫入“media”。 WordPress 將自動向您顯示與您搜索的內容相匹配的選定塊。
媒體和文本塊如何工作？
媒體和文本塊基本上將兩種不同類型的內容歸為一類。第一個是中等的，例如圖像或視頻，您可以通過以下方式添加：
- 上傳
- 媒體庫
- 拖放
第二個是文本內容的空間。您可以在其中寫入文本段落、項目符號列表或標題。您也可以在那裡添加 按鈕塊 我們之前討論過。
無論您編寫多少文本，媒體和文本塊始終並排對齊圖像和文本。它是如何工作的？圖像會根據文本列中的內容高度自動調整。
媒體和文本塊設置
常規塊設置
1. 頂部工具欄
塊上方的工具欄提供了多個選項。如果您的活動主題支持，您可以將媒體和文本塊設置為寬或全寬。您還可以通過單擊以下按鈕來選擇要放置圖像或視頻的位置：
- 在左側顯示媒體
- 在右側顯示媒體
在頂部工具欄中還有一個用於編輯媒體的圖標，您可以在其中設置替代文本、標題、說明文字或說明。在我們的文章中了解有關編輯圖像的更多信息 使用 WordPress 圖像塊.
2. 右側邊欄
右側邊欄提供媒體和文本塊的附加設置。可以在此處添加替代文本、設置背景顏色或添加其他 CSS 類。您還可以啟用“Stack on mobile”功能。
由於此功能，圖像和文本可以在移動設備上很好地顯示。如果禁用“移動設備上的堆棧”，圖像和文本將並排放置，並且在響應式版本中幾乎難以閱讀。
如果啟用此功能，在手機上，左側內容將顯示在右側內容之上。
文本對齊
媒體和文本塊的一部分與圖像或視頻以及文本內容一起。它可以是以下內容類型之一：
1. 段落
在頂部工具欄中，您可以設置文本對齊方式、將文本設為粗體、斜體或添加 URL 鏈接。
在右側邊欄中，您可以選擇字體大小、字體顏色或段落顏色。有趣的功能是“首字下沉”，它將突出顯示文本的第一個字符。這是塊帖子中的一個很好的功能，可以使文本變得更有趣。
2. 標題
標題與段落非常相似。您還可以配置它的外觀、粗體或斜體以及插入 URL 鏈接。不同之處在於您可以選擇標題類型 - H2、H3、H4。
其他標題大小和對齊設置可在右側邊欄中找到。
3. 清單
如果您在內容中添加列表塊，它可以是項目符號、編號列表或多級列表。您還可以將文本設為粗體、斜體並添加 URL 鏈接。
4.按鈕塊
這個向內容添加按鈕的塊可以根據網站設計進行調整。按鈕顏色和样式或背景顏色可以在右側邊欄中配置。
不要忘記閱讀有關的文章 按鈕塊.
在塊類型之間切換
在媒體和文本塊中，可以將一種內容塊類型轉換為另一種內容塊類型。您還可以將媒體和文本塊更改為圖像塊，文本部分將被刪除。
在文本內容中，可以將段落塊更改為標題或列表塊。
獎勵：如何在 WordPress 中調整文本對齊
使用合理的文本有其優點和缺點。合理的文本通常可以在書籍或報紙中找到，但不再在網站上使用。為什麼？
幾年前，Justify 功能集成在 WordPress Classic 編輯器中。對齊文本用於在各種瀏覽器或移動設備中導致可見性問題。它還與合理文本的可讀性困難有關。因此，該函數已被棄用並刪除。
新的塊（古騰堡）編輯器中也不存在這種特殊功能。
那麼如果你真的想要的話，你如何證明文本的合理性呢？
解決方案是通過幾個步驟添加簡單的 CSS 代碼：
- 右側邊欄中有一個段落塊的附加 CSS 類設置
- 在那裡寫下班級名稱„證明合法“
- 發布頁面或文章
- 如果您預覽它，請單擊主頂部欄中的“自定義”
- 左側有一個帶有設置的新側邊欄
- 單擊“附加 CSS”
- 插入以下CCS代碼：
p.justify { 文本對齊：對齊； }
完畢。從現在開始，您的媒體和文本塊中的文本是合理的。
多虧了古騰堡編輯器，WordPress 在沒有第三方頁面構建器的情況下變得更加可用。從長遠角度以及創建或重新設計網站時，它對您的網站具有極好的價值。古騰堡塊提供了多種風格，但您可能會發現手 用於將文本環繞圖像的 WordPress 代碼.
您對媒體和文本塊有何看法？您已經使用了嗎？您喜歡使用它嗎？請在下面的評論中告訴我們。
一般來說，我喜歡塊系統，但除非我錯過了一些東西，否則這是一個倒退。我目前希望簡單地向左或向右浮動圖像並讓文本換行，這確實應該很容易做到，但似乎 WordPress 不希望這種情況發生。為什麼不？僅當文本長度正確時，才可以使用媒體和圖像塊。例如，如果文本的長度不完全適合圖像的大小，則像這樣的頁面不希望重做段落之間有奇怪的間距。
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
你好呀，
非常感謝您的反饋。這聽起來是一個非常好的主意，因此我想請您花一分鐘的時間來回答 4 個簡單的問題：https://aitthemes.typeform.com/to/vc7arn，這可以幫助我們的團隊製作更好的產品獨特的功能更快。
非常感謝您的時間和理解。
最親切的問候！
茲拉特科
艾特團隊
是的，我無法讓文字換行。這個文本塊組合看起來沒什麼用。
這個想法很糟糕，因為這是將圖片插入博客的唯一方法——我無法讓文本很好地換行，而且無論我做什麼，它的大小都不相同。對於某些情況來說是個好主意，但不適用於所有情況。有時您只想要一張帶有段落的圖片，而不是對圖片進行說明。
如何添加包裝器並認真使用全寬yar內容如何覆蓋完整然後將容器放入其中..構建器非常令人困惑如何添加容器包裝非常糟糕的編輯器yar
你好呀，
謝謝你的誇獎。請隨意查看我們的博客頁面 https://www.ait-themes.club/blog/ ，您會發現許多有用的提示，如何撰寫有吸引力且有用的帖子。
最親切的問候！
茲拉特科
艾特團隊
你好阿卜杜勒，
非常感謝您的反饋，我們團隊對此深表感謝！
此致。
茲拉特科
艾特團隊
我和這個帖子上的其他幾個人遇到了同樣的困難。過去，我能夠輕鬆地將文本包裹在圖像周圍，就像我們在“關於我們”頁面中的圖片和簡介一樣。也許我正在使用舊的編輯器。我不記得了。但是，我現在正在嘗試使用新的圖片和 BIOS 更新我們的網站，但找不到一種方法可以像我們之前的 Bio/圖片組合那樣輕鬆地換行文本。我嘗試切換到經典編輯器，但該網站警告我有“新塊編輯器”部分，我必須保留較新的編輯模式。你能告訴我如何讓我們的新傳記和照片看起來像我們之前的帖子嗎？謝謝。
嘿，
如果您希望禁用古騰堡並繼續使用經典 WordPress 編輯器，請考慮 WordPress 核心團隊的插件，它允許您使用“經典編輯器插件”來完成此操作。
此致！
茲拉特科
艾特團隊
對於那些只想要簡單的文本環繞圖像的人，您可以通過插入經典文本塊（基於單擊“瀏覽”時塊的第一部分）來完成此操作。您可以在單個塊中使用經典編輯器，是的，這允許您插入圖像，然後選擇換行選項。問題已解決 🙂
感謝倫敦 SEO 專家！！！一個簡單的解決方案，但我忽略了它！
然後...只需使用“轉換為塊”選項即可。
由於此方法有效，塊編輯器具有該功能，但無法找到如何正確設置它。與此同時，這個軟糖起作用了。
這裡同樣的麻煩。這個新版本太糟糕了——無法正確換行文字，甚至無法縮小照片，除非你只是想裁剪。
我可以在 WordPress 塊編輯器中將文本環繞在圖片周圍。它看起來正是我希望它在“預覽”中的樣子。然而，當我發布我的博客並且 WordPress 通過電子郵件將其發送給我的關注者時，他們收到的博客上的圖片和圖片下方的文字。這種情況也發生在台式電腦上，而不僅僅是小型手機上。我想要它包裹起來，而不是堆疊起來。
你好呀，
感謝您的來信。該塊不會像您期望的那樣將文本環繞在 WordPress 中的圖像周圍。請查看以下說明，因為您可能會發現它們很有幫助：https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
此致！
茲拉特科
艾特團隊
我做了所有這些，我的博客完美地包含在預覽中。當我發布它時，它在我的博客頁面上看起來很棒。但是，當 WordPress 通過電子郵件將其發送給我的關注者，並且他們打開該電子郵件時，他們看不到它已包裝。照片位於文字上方。看起來非常不專業。我在使用舊的經典編輯器時從未遇到過這個問題。現在我正在使用塊編輯器，即使有一個經典選項可供單擊，它也不會讓我返回到經典編輯器。
你好呀，
感謝您的來信。
我們懇請您查看我們的知識庫和/或帶有視頻教程的文檔：
https://www.ait-themes.club/ait-themes-documentation/
或者隨時直接在我們的專用支持票系統中發布技術問題。請通過 https://system.ait-themes.club/support/add-question 登錄您的帳戶。
歐洲中部時間工作日上午 8 點至下午 5 點提供客戶支持。
此外，還有一個插件可以讓您使用以前的編輯器。您應該安裝並激活“經典編輯器”。
真摯地！
茲拉特科
艾特團隊
我不同意這些，這優於經典編輯，因為選項更有限。我發現這個塊因為使用不同的字體並且比文本塊更寬，所以在視覺上很不和諧。能夠將文本平滑地包裹在圖像周圍，同時保持相同的字體、大小和邊距設置，從而帶來雜誌頁面的專業性。這只是我對這個版本的 WordPress 深感失望的一個例子。
嗨特倫斯
謝謝您的意見。您嘗試過我們的Citadela試用版嗎？我們有一些獨特的塊可以幫助您調整文本和圖像。無論如何，您可以免費測試完整版 - 所有功能。
祝你今天過得愉快。