Зміст
Вам потрібно елегантно розмістити текст навколо зображення? Дізнайтеся, як це легко зробити, не маючи досвіду в кодуванні та дизайні. Редактор Gutenberg надає більше можливостей для обтікання тексту в WordPress.
Ви можете створити гарний веб-сайт і одночасно легко редагувати контент. Вибравши редактор Gutenberg для свого веб-сайту на WordPress, ви отримаєте найкращий інструмент з точки зору довгострокової перспективи. Ви матимете більше можливостей для того, щоб по-різному обтікати текст навколо зображень. Gutenberg має багато переваг, таких як більш зрозумілий вихідний код веб-сайту, швидкість, безпека та зручність використання.
Як обернути текст навколо зображення в WordPress?
Редактор і блоки Gutenberg роблять контент сайту легшим, сучаснішим і легко читабельним. Ми покажемо вам більше способів, як обернути текст навколо зображення в WordPress Pages, Post і Custom Post. Існують різні блоки, і ви можете використовувати їх у поєднанні, як набір частин і функцій, які дають вам додаткові можливості для обтікання.
Ви можете вибрати блок для обтікання зображення текстом відповідно до підсторінки та типу її вмісту. Ви можете вибрати один стиль для сторінки презентації, а інший - для публікації в блозі. Також враховуйте тип контенту, який представляє зображення. Чи це зображення з описом, чи більш репрезентативне або продаюче?
Обгортання тексту навколо зображення - виділення блоків
Існує 4 блоки, за допомогою яких можна обернути блок тексту навколо зображення. Ми опишемо їх усі:
- Блоки зображень та абзаців дивіться нижче
- Блок "Медіа та текст" - більше інформації нижче
- Блок колонок в індивідуальному повідомленні
- Кластерний блок в окремому повідомленні (функція доступна тільки з Плагін Citadela Pro)
Оберніть текст і зображення для кращого сприйняття
Є кілька причин, чому вам варто використовувати цей блок. Ви оціните його найбільше, якщо пишете пости для блогу. Зображення є невід'ємною частиною історії. Неважливо, чи ви пишете блог про подорожі, чи журнал про ІТ-новинки. Тому, додаючи фотографії до свого контенту, подумайте про вирівнювання зображень. Читачі зможуть краще зрозуміти, про що ви пишете.
У багатьох випадках необхідно вставити зображення і текст поруч. Що тут важливо?
- Вона повинна мати сенс. Зображення має бути поруч з потрібним текстом.
- Він повинен бути добре вирівняний.
- Він повинен вписуватися в загальний макет сайту.
Блоки зображень та абзаців
Перебуваючи в Класичний редактор ви також могли розмістити текст поруч із зображенням, про гарне вирівнювання не могло бути й мови. Особливо, якщо зображення було маленьким, а поруч з ним було розміщено більше тексту. Текст перекривав зображення, і це виглядало негарно.
Редактор Гутенберг та його блок "Зображення" пропонують чудову функцію - зміну розміру зображення. Перетягуйте точки навколо зображення, щоб автоматично змінити його розмір і вирівнювання тексту.
Медіа та текстовий блок - WordPress вирівнює текст поруч із зображенням
- Оберніть текст і зображення за допомогою блоку "Медіа та текст
- Як додати блок Media & Text в редакторі
- Як працює цей блок
- Налаштування медіа та текстових блоків
- Що означає "Стек на мобільному" підло.
- Бонус: Як вирівняти текст у WordPress
Як вирівняти текст поруч із зображенням?
Почніть зараз
Почніть зараз з безризикової пробної версії. Кредитна картка не потрібна.
Блок Media & Text - це фантастична функція. Блок Media & Text вирішує цю проблему і забезпечує ідеальне вирівнювання тексту до зображення без порушення композиції та макета. Ось чому ви повинні використовувати цей блок.
Це також покращує дизайн сайту на мобільних пристроях. Цей блок обгортки допомагає темі WordPress адаптуватися до різних мобільних макетів. На смартфоні кожна частина веб-сайту повинна бути чітко видимою і читабельною. Як виглядатиме блок Media & Text на мобільних телефонах, вирішує функція "Складати на мобільному", яку ми розглянемо нижче.
Незабаром ви зможете використовувати блок Media & Text в нашій новій темі WordPress під назвою Citadela. Дізнайтеся більше про тему Citadela в окремій статті.
Як додати блок Media & Text в редакторі блоків?
Додати блок "Медіа та текст" так само просто, як і будь-який інший блок. Це базовий блок, тому вам не потрібно нічого завантажувати або встановлювати.
За допомогою іконки "+" на верхній панелі або в будь-якому місці редактора виберіть блок "Медіа та текст".
Останній варіант - ввести "/" і написати "media" після цього. WordPress автоматично покаже вам вибрані блоки, які відповідають тому, що ви шукали.
Як працює блок "Медіа та текст"?
Блок "Медіа та текст" об'єднує 2 різні типи контенту в один. Перший - це медіа, наприклад, зображення або відео, які ви можете додати:
- Завантажити
- Медіатека
- Drag & Drop
Другий - місце для текстового вмісту. Ви можете писати тут абзаци тексту, марковані списки або заголовки. Ви також можете додати туди Кнопковий блок про яку ми говорили раніше.
Блок "Медіа та текст" завжди вирівнює зображення і текст поруч, незалежно від того, скільки тексту ви пишете. Як це працює? Зображення автоматично підлаштовується відповідно до висоти контенту в текстовому стовпчику.
Налаштування медіа та текстових блоків
Загальні налаштування блоку
1. Верхня панель інструментів
Панель інструментів над блоком пропонує кілька варіантів. Якщо ваша активна тема це підтримує, ви можете встановити блок "Медіа та текст" на всю ширину або на всю ширину. Ви також можете вибрати місце, де ви хочете розмістити зображення або відео, натиснувши на нього:
- Показати медіа зліва
- Показати медіа праворуч
На верхній панелі інструментів також є піктограма для редагування носія, де ви можете встановити Alt Text, Title, Caption або Description. Дізнайтеся більше про редагування зображень у нашій статті Робота з блоком зображень WordPress.
2. Права бічна панель
Права бічна панель пропонує додаткові налаштування для блоку Media & Text. Тут можна додати альтернативний текст, задати колір фону або додати додатковий клас CSS. Ви також можете увімкнути функцію "Зберігати на мобільному".
Завдяки цій функції зображення і текст добре відображаються на мобільних пристроях. Якщо вимкнути "Stack on mobile", зображення і текст залишаться поруч, і це буде погано читатися в адаптивній версії.
Якщо ви ввімкнете цю функцію, на мобільному телефоні вміст зліва відображатиметься над вмістом праворуч.
Вирівнювання тексту
Частиною блоку "Медіа та текст" є, окрім зображення або відео, також текстовий контент. Це може бути один з наступних типів контенту:
1. Абзац
На верхній панелі інструментів ви можете налаштувати вирівнювання тексту, зробити його напівжирним, курсивом або додати посилання на URL-адресу.
У бічній панелі праворуч ви можете вибрати розмір шрифту, колір шрифту або колір абзацу. Цікавою функцією є "Drop Cap", яка виділяє перший символ тексту. Це хороша функція для блочних постів, щоб зробити текст більш цікавим.
2. Заголовок
Заголовок дуже схожий на абзац. Ви також можете налаштувати його вигляд, зробити жирним або курсивом і вставити URL-адресу. Відмінність полягає в тому, що ви можете вибрати тип заголовка - H2, H3, H4.
Інші розміри заголовків та налаштування вирівнювання доступні на бічній панелі праворуч.
3. Список
Якщо ви додаєте блок "Список" до свого контенту, це може бути маркований, нумерований або багаторівневий список. Ви також можете зробити текст напівжирним, курсивом і додати URL-адресу.
4. Кнопковий блок
Цей блок, що додає кнопку до контенту, можна налаштувати відповідно до дизайну сайту. Колір і стиль кнопки або колір фону можна налаштувати в бічній панелі праворуч.
Не забудьте прочитати статтю про Кнопковий блок.
Перемикання між типами блоків
У блоці "Медіа та текст" можна перетворити один тип блоку контенту на інший. Ви також можете змінити блок "Медіа та текст" на блок "Зображення", при цьому текстова частина буде видалена.
У текстовому контенті можна змінити блок "Абзац" на блок "Заголовок" або "Список".
Бонус: Як вирівняти текст у WordPress
Використання виправданого тексту має свої позитивні та негативні сторони. Зазвичай виправданий текст можна знайти в книгах або газетах, але він більше не використовується на веб-сайтах. Чому?
Кілька років тому функція Justify була інтегрована прямо в редактор WordPress Classic. Раніше виправлений текст спричиняв проблеми з видимістю в різних браузерах або мобільних пристроях. Це також пов'язано з важкою читабельністю виправленого тексту. Тому ця функція була застарілою і видалена.
У новому редакторі блоків (Gutenberg) цієї функції також немає.
Тож як обґрунтувати текст, якщо ви дійсно цього хочете?
Рішення полягає в додаванні простого коду CSS за кілька кроків:
- У бічній панелі праворуч є налаштування для додаткового класу CSS блоку абзацу
- Напишіть там назву класу "виправдати"
- Опублікувати сторінку або статтю
- Якщо ви попередньо переглядаєте його, натисніть на Налаштувати на головній верхній панелі
- З лівого боку з'явилася нова бічна панель з налаштуваннями
- Натисніть на Додатковий CSS
- Вставте наступний код CCS:
p.justify {
text-align: justify;
}
Готово. Відтепер текст у вашому медіа- та текстовому блоці є виправданим.
Завдяки редактору Гутенберга WordPress став більш зручним у використанні без сторонніх конструкторів сторінок. Він має чудову цінність для вашого веб-сайту з довгострокової точки зору, а також при створенні або редизайні веб-сайту. Блоки Гутенберга дають великий вибір стилів, незалежно від того, який з них вам більше до вподоби. Код WordPress для обтікання тексту навколо зображень.
Яка ваша думка про блок "Медіа та текст"? Чи використовували ви його вже? Як вам подобається з ним працювати? Повідомте нас у коментарях нижче.
Загалом мені подобається блокова система, але якщо я нічого не пропустив, це крок назад. Наразі я шукаю можливість просто переміщати зображення вліво або вправо і обводити його текстом, оскільки це має бути дуже просто, але, здається, WordPress просто не хоче, щоб це відбувалося. Чому? Використання медіа-блоку та блоку зображень працює лише тоді, коли текст має правильну довжину. Наприклад, таку сторінку не потрібно переробляти з непарним інтервалом між абзацами, якщо довжина тексту не відповідає розміру зображення.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Привіт,
Дуже дякую за ваш відгук. Це звучить як дуже гарна ідея, тому я хотів би попросити вас приділити нам хвилину свого часу, щоб відповісти на 4 простих запитання: https://aitthemes.typeform.com/to/vc7arn, які можуть допомогти нашій команді швидше створювати кращі продукти з унікальними функціями.
Щиро дякуємо за ваш час і розуміння.
З найкращими побажаннями!
Златко
Команда АІТ
Так, я не можу змусити текст обернутися. Ця комбінація текстових блоків виявляється марною.
Ця ідея відстійна як єдиний спосіб вставити зображення в блог - я не можу зробити так, щоб текст гарно обгорнувся, і він не має однакового розміру, що б я не робив. Хороша ідея для ПЕВНИХ ситуацій, але не для всіх. Іноді вам просто потрібна картинка з абзацами, які її обтікають, замість того, щоб писати щось про картинку.
Як додати обгортку та використовувати вміст на всю ширину яру серйозно, як покрити повністю, а потім взяти в нього контейнер... конструктор дуже заплутаний, як додати обгортку контейнера дуже поганий редактор яру
Привіт,
Дякуємо за ваші компліменти. Не соромтеся заглянути на сторінку нашого блогу https://www.ait-themes.club/blog/, де ви знайдете багато корисних порад, як писати привабливі та корисні пости.
З найкращими побажаннями!
Златко
Команда АІТ
Привіт, Абдур,
Щиро дякуємо за ваш відгук, він дуже важливий для нашої команди!
З повагою.
Златко
Команда АІТ
У мене такі ж труднощі, як і у кількох інших людей в цій темі. Раніше я міг легко обернути текст навколо зображення, як на нашій сторінці "про нас", де є фото і біографії. можливо, я використовував старий редактор. Я не пам'ятаю. Але зараз я намагаюся оновити наш сайт новими фотографіями та біографіями і не можу знайти спосіб легко обернути текст, як на наших попередніх комбінаціях біографія/фотографія. Я спробував переключитися на класичний редактор, але сайт попередив мене, що у мене є розділи "нового редактора блоків", і мені довелося залишитися в новому режимі редагування. чи можете ви сказати мені, як зробити так, щоб наші нові біографії та фотографії виглядали так, як наші попередні публікації? дякую.
Привіт,
Якщо ви бажаєте відключити Гутенберга і продовжити роботу з класичним редактором WordPress, будь ласка, зверніть увагу на плагін від команди розробників WordPress, який дозволяє це зробити - "Плагін класичного редактора".
З найкращими побажаннями!
Златко
Команда АІТ
Для тих, хто хоче простого текстового обтікання зображення, ви можете зробити це, вставивши класичний текстовий блок (знаходиться в першій частині Блоків, коли ви натискаєте на кнопку "Огляд"). Ви можете використовувати класичний редактор в одному блоці, і так, це дозволить вам вставити зображення, а потім вибрати опцію обтікання. Проблему вирішено 🙂
ДЯКУЄ Лондонський SEO-шник !!! Просте рішення, але я не помітив його!
А потім... просто скористайтеся опцією "Перетворити на блоки".
Оскільки це працює, редактор блоків має таку можливість, але не може знайти, як її правильно налаштувати. А поки що ця фішка працює.
Тут та сама проблема. Ця нова версія жахлива - немає можливості правильно обернути текст або навіть зробити фотографію меншою, якщо тільки ви не хочете просто обрізати.
У редакторі блоків WordPress я можу обернути текст навколо зображення. У "Попередньому перегляді" це виглядає саме так, як я хочу, щоб воно виглядало. Однак, коли я публікую свій блог і WordPress надсилає його моїм підписникам, вони отримують його із зображенням зверху і текстом під зображенням. Це відбувається і на стаціонарних комп'ютерах, а не тільки на маленьких мобільних телефонах. Я хочу, щоб це було загорнуто, а не складено.
Привіт,
Дякуємо, що написали нам. Блок не обтікає текст навколо зображення у WordPress, як ви очікували. Будь ласка, ознайомтеся з наступними інструкціями, можливо, вони стануть вам у пригоді: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
З найкращими побажаннями!
Златко
Команда АІТ
Я все це роблю, і мій блог чудово відображається в Preview. Коли я публікую його, він виглядає чудово на моїй сторінці блогу. Але коли WordPress надсилає його моїм підписникам, і вони відкривають цей лист, вони не бачать, що він обгорнутий. Фотографії знаходяться поверх тексту. Це виглядає дуже непрофесійно. У мене ніколи не було такої проблеми зі старим класичним редактором. Тепер, коли я використовую редактор блоків, він не дозволяє мені повернутися до класичного редактора, навіть якщо є опція класичного редактора, на яку можна натиснути.
Привіт,
Дякуємо, що написали нам.
Ми просимо вас ознайомитися з нашою базою знань та/або документацією з відеоуроками:
https://www.ait-themes.club/ait-themes-documentation/
Або не соромтеся задавати технічні питання безпосередньо в нашій спеціальній системі тікетів підтримки. Будь ласка, увійдіть у свій обліковий запис на https://system.ait-themes.club/support/add-question.
Підтримка клієнтів надається в робочі дні з 8:00 до 17:00 за центральноєвропейським часом.
Крім того, існує плагін, який дозволяє використовувати попередній редактор. Вам потрібно встановити та активувати "Класичний редактор".
Щиро дякую!
Златко
Команда АІТ
Я не згоден з тим, що це краще, ніж класичне редагування, тому що варіанти більш обмежені. Я вважаю, що цей блок, оскільки він використовує різні шрифти і ширший за текстовий блок, візуально відволікає увагу. Можливість плавно обернути текст навколо зображення, зберігаючи той самий шрифт, розмір і налаштування полів, надає журнальній сторінці професійного вигляду. Це лише один приклад того, чому я глибоко розчарований цією версією wordpress.
Привіт, Теренсе.
дякуємо за вашу думку. Ви пробували нашу пробну версію Citadela? У нас є кілька унікальних блоків, які можуть допомогти вам з налаштуванням тексту і зображень. У будь-якому випадку, ви можете протестувати повну версію - з усіма функціями, безкоштовно.
Гарного дня.