Оглавление
Вам нужно элегантно разместить текст вокруг изображения? Узнайте, как сделать это легко, не имея опыта программирования и дизайна. Редактор Gutenberg предоставляет больше возможностей для переноса текста вокруг текста в WordPress.
Вы можете получить красивый веб-сайт и простую процедуру редактирования контента одновременно. Выбор редактора Gutenberg для вашего веб-сайта WordPress дает вам лучший инструмент с долгосрочной точки зрения. У вас будет больше возможностей по-разному обтекать изображения текстом. Gutenberg дает много преимуществ, таких как более понятный исходный код веб-сайта, скорость, безопасность и удобство использования.
Как обернуть текст вокруг изображения в WordPress?
Редактор и блоки Gutenberg делают контент сайта более легким, современным и легко читаемым. Мы покажем вам больше способов, как обтекать изображение текстом на страницах WordPress, в публикациях и в пользовательских типах записей. Существуют разные блоки, и вы можете использовать их также в комбинации, как набор частей и функций, которые дают вам дополнительные возможности для обертывания.
Вы можете выбрать блок для обертывания текста вокруг изображения в соответствии с подстраницей и типом ее содержимого. Вы можете выбрать один стиль для страницы презентации и другой для записи в блоге. Кроме того, рассмотрите тип контента, представляющего изображение. Это изображение для описания или более репрезентативное или продающее медиа?
Обтекание изображения текстом — выделение блоков
Есть 4 блока, которые вы можете использовать, чтобы обернуть блок текста вокруг изображения. Опишем их все:
- Блок изображения и блок абзаца см. ниже.
- Блок «Медиа и текст» подробнее ниже
- Блок столбцов в отдельном посте
- Кластерный блок в отдельном посте (функция доступна только с Плагин Citadela Pro)
Обтекание текста и изображения для удобства чтения
Есть несколько причин, почему вы должны использовать этот блок. Вы оцените это больше всего, если будете писать сообщения в блоге. Изображения являются неотъемлемой частью истории. Неважно, пишете ли вы блог о путешествиях или журнал об ИТ-новостях. Поэтому, добавляя фотографии в свой контент, подумайте о выравнивании изображений. Читатели смогут лучше понять, о чем вы пишете.
Во многих случаях необходимо вставить изображение и текст рядом. Что важно?
- Это должно иметь смысл. Изображение должно быть рядом с правильным текстом.
- Он должен быть хорошо выровнен.
- Он должен подходить ко всему макету сайта.
Блоки изображения и абзаца
В то время как в Классический редактор вы также можете разместить текст рядом с изображением, о хорошем выравнивании не может быть и речи. Особенно, если изображение было маленьким, а рядом с ним помещалось больше текста. Текст накладывался на изображение, и это выглядело некрасиво.
редактор Гутенберга а его блок Image предлагает замечательную функцию — изменение размера изображения. Перетащите точки вокруг изображения, чтобы автоматически изменить его размер и выравнивание текста.
Блок «Медиа и текст» — WordPress выравнивает текст рядом с изображением
- Обтекание текста и изображений с помощью блока «Медиа и текст»
- Как добавить блок Media & Text в редактор
- Как работает этот блок
- Настройки блока мультимедиа и текста
- Что значит "Стек на мобильном телефоне» иметь в виду
- Бонус: как выровнять текст в WordPress
Как выровнять текст рядом с изображением?
Начать сейчас
Начните прямо сейчас с безопасной пробной версии. Кредитная карта не требуется.
Блок «Медиа и текст» — фантастическая функция. Блок Media & Text решает эту проблему и обеспечивает идеальное выравнивание текста по изображению без нарушения композиции и макета. Вот почему вы должны использовать этот блок.
Это также улучшает дизайн сайта на мобильных устройствах. Этот блок упаковки помогает теме WordPress охватывать различные мобильные макеты. На смартфоне каждая часть сайта должна быть хорошо видна и читабельна. Как блок «Медиа и текст» будет выглядеть на мобильных телефонах, а таблица обрабатывает функцию «Стопка на мобильном», которую мы рассмотрим ниже.
Вскоре вы сможете использовать блок «Медиа и текст» в нашей новой теме WordPress под названием Citadela. Узнайте больше о теме Citadela в отдельной статье.
Как добавить блок Media & Text в редактор блоков?
Добавить блок «Медиа и текст» так же просто, как добавить любой другой блок. Это основной блок, который означает, что вам не нужно ничего скачивать или устанавливать.
Используя значок «+» на верхней панели или в любом месте редактора и выбрав блок «Медиа и текст».
Последний вариант — ввести «/», а затем написать «media». WordPress автоматически покажет вам выбранные блоки, соответствующие тому, что вы искали.
Как работает блок «Медиа и текст»?
Блок «Медиа и текст» в основном объединяет 2 разных типа контента в один. Первый средний, например, изображение или видео, которое вы можете добавить через:
- Загрузить
- Медиа библиотека
- Перетаскивания
Второй — место для текстового контента. Вы можете написать там абзацы текста, маркированные списки или заголовок. Вы также можете добавить туда Блок кнопок о которых мы говорили ранее.
Блок «Медиа и текст» всегда выравнивает изображение и текст рядом, независимо от того, сколько текста вы пишете. Как это работает? Изображение автоматически настраивается в зависимости от высоты содержимого в текстовом столбце.
Настройки мультимедиа и текстового блока
Общие настройки блока
1. Верхняя панель инструментов
Панель инструментов над блоком предлагает несколько вариантов. Если ваша активная тема поддерживает это, вы можете установить для блока «Медиа и текст» ширину или полную ширину. Вы также можете выбрать, где вы хотите разместить изображение или видео, нажав на:
- Показать медиа слева
- Показать медиа справа
На верхней панели инструментов также есть значок для редактирования носителя, где вы можете установить замещающий текст, заголовок, заголовок или описание. Узнайте больше о редактировании изображений в нашей статье Работа с блоком изображений WordPress.
2. Правая боковая панель
Правая боковая панель предлагает дополнительные настройки для блока «Медиа и текст». Здесь можно добавить альтернативный текст, установить цвет фона или добавить дополнительный класс CSS. Вы также можете включить там функцию «Стек на мобильном телефоне».
Что такое стек для мобильных устройств?
Благодаря этой функции изображение и текст красиво отображаются на мобильных устройствах. Если вы отключите «Стек на мобильном устройстве», изображение и текст останутся рядом, и их будет трудно прочитать в адаптивной версии.
Если вы включите эту функцию, на мобильном телефоне контент с левой стороны будет отображаться над контентом с правой стороны.
Выравнивание текста
Частью блока «Медиа и текст» является вместе с изображением или видео также текстовый контент. Это может быть один из следующих типов контента:
1. Пункт
На верхней панели инструментов вы можете установить выравнивание текста, сделать текст полужирным, курсивом или добавить URL-ссылку.
На боковой панели справа вы можете выбрать размер шрифта, цвет шрифта или цвет абзаца. Интересной функцией является «Буквица», которая выделяет первый символ текста. Это хорошая функция в блочных постах, чтобы сделать текст более интересным.
2. Заголовок
Заголовок очень похож на абзац. Вы также можете настроить его внешний вид, выделить его полужирным или курсивом и вставить URL-ссылку. Отличие в том, что вы можете выбрать тип заголовка — H2, H3, H4.
Другие размеры заголовков и настройки выравнивания доступны на боковой панели справа.
3. Список
Если вы добавите блок «Список» к своему контенту, это могут быть маркеры, нумерованный список или многоуровневый список. Вы также можете выделить текст жирным шрифтом, курсивом и добавить URL-ссылку.
4. Блок кнопок
Этот блок, добавляющий кнопку к контенту, можно настроить под дизайн сайта. Цвет и стиль кнопки или цвет фона можно настроить на боковой панели справа.
Не забудьте прочитать статью о Блок кнопок.
Переключение между типами блоков
В блоке «Медиа и текст» можно преобразовать один тип блока контента в другой. Вы также можете изменить блок «Медиа и текст» на блок «Изображение», и текстовая часть будет удалена.
В текстовом содержимом можно изменить блок «Абзац» на блок «Заголовок» или «Список».
Бонус: как выровнять текст в WordPress
Использование выравнивания текста имеет свои положительные и отрицательные стороны. Выровненный текст обычно можно найти в книгах или газетах, но он больше не используется на веб-сайтах. Почему?
Несколько лет назад функция Justify была интегрирована прямо в редактор WordPress Classic. Выровненный текст, используемый для создания проблем с видимостью в различных браузерах или на мобильных устройствах. Это также связано с трудной читаемостью выровненного по ширине текста. Поэтому эта функция устарела и удалена.
Эта конкретная функциональность не существует и в новом блочном редакторе (Gutenberg).
Итак, как вы оправдываете текст, если вы действительно хотите?
Решение состоит в том, чтобы добавить простой код CSS за несколько шагов:
- На боковой панели справа есть настройка для блока «Дополнительный класс абзаца CSS».
- Напишите там имя класса „оправдывать“
- Опубликовать страницу или статью
- Если вы просматриваете его, нажмите «Настроить» на главной верхней панели.
- С левой стороны появилась новая боковая панель с настройками.
- Нажмите «Дополнительный CSS».
- Вставьте следующий код CCS:
p.justify { выравнивание текста: по ширине; }
Сделанный. Отныне текст в вашем мультимедийном и текстовом блоке выравнивается.
WordPress стал более удобным в использовании без сторонних компоновщиков страниц благодаря редактору Gutenberg. Он имеет отличное значение для вашего веб-сайта с долгосрочной точки зрения, а также при создании или изменении дизайна веб-сайта. Блоки Гутенберга дают большой выбор стилей, но вы можете найти руку Код 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/, где вы найдете много полезных советов, как писать привлекательные и полезные сообщения.
С наилучшими пожеланиями!
Златко
команда МТА
Привет Абдур,
Большое спасибо за отзыв, он очень ценен для нашей команды!
С наилучшими пожеланиями.
Златко
команда МТА
У меня такие же трудности, как и у нескольких других людей в этой теме. в прошлом я мог легко оборачивать текст вокруг изображения, как на нашей странице «о нас», где у нас есть фотографии и биографии. возможно, я использовал старый редактор. Я не помню. но сейчас я пытаюсь обновить наш сайт новыми фотографиями и биографией и не могу найти способ легко переносить текст, как в наших предыдущих комбинациях биографии и фото. Я попытался переключиться на классический редактор, но сайт предупредил меня, что у меня есть разделы «новый редактор блоков», и мне пришлось остаться в более новом режиме редактирования. Можете ли вы сказать мне, как сделать так, чтобы наши новые биографии и фотографии выглядели как наши предыдущие посты? Спасибо.
Привет,
Если вы хотите отключить Гутенберг и продолжить работу с классическим редактором 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? У нас есть несколько уникальных блоков, которые могут помочь вам настроить текст и изображения. В любом случае, вы можете бесплатно протестировать полную версию — все функции.
Хорошего дня.