Обтекание изображений текстом — это распространенная техника дизайна, обычно используемая в печатных СМИ, таких как журналы и газеты. Но вы также можете найти это в Интернете, особенно для сообщений в блогах. Обтекание текста вокруг изображения на самом деле является довольно стандартной частью WordPress, которая включает в себя простую настройку выравнивания в редакторе WYSIWYG. Единственная проблема заключается в том, что сложно оформить страницу с помощью стандартного редактора WordPress. Это там Divi может помочь !

Хотя в этом руководстве основное внимание уделяется изображениям, вы можете использовать этот же процесс для переноса текста в любом модуле. Divi.

обследование

Вот взгляд на основной дизайн, который мы будем строить сегодня.

В этом примере я покажу вам, как обернуть два столбца текста вокруг модуля центрированного изображения. Это позволяет создать уникальный макет в стиле журнала или газеты. Но поскольку здесь нет свойства css "float: center", нам понадобится немного творчества с макетом, чтобы этот дизайн работал.

Вот как это сделать.

Создание контента в верхнем ряду с центрированным изображением

Для начала создайте новый обычный раздел со строкой в ​​один столбец. Затем добавьте модуль изображения в свою строку. Загрузите изображение размером 400 на 250 пикселей. Размер должен быть точным для этой конструкции.

Затем обновите параметры проекта следующим образом:

Максимальная ширина: 400px (рабочий стол), 100% (планшет)
Выравнивание модуля: центр
Пользовательские отступы: 2% вверху, 2% внизу, 2% слева, 2% справа

Затем сохраните настройки и откройте настройки линии. Выньте прокладку из нижней части ряда.

Пользовательские отступы: 0px внизу

Создайте строку текста из двух столбцов

Под строкой, содержащей изображение, создайте новую строку с макетом из двух столбцов.

В столбце 1 добавьте текстовый модуль с содержание дурачок.

Затем скопируйте текстовый модуль и вставьте его в столбец 2 для второго столбца текста.

Создание пустого пространства с помощью плавающих разделителей

Чтобы создать необходимое пространство для изображения, мы можем использовать модули разделения. В левом столбце мы собираемся создать модуль разделителя размером в половину изображения и разместить его вправо, чтобы наш текстовый модуль обернулся вокруг разделителя. Далее, в правом столбце, мы собираемся создать еще один разделитель, размер которого составляет половину изображения, и переместим его влево.

Для этого создайте модуль разделения и поместите его прямо над текстовым модулем в столбце 1.

Затем обновите настройки модуля разделения следующим образом:

Показать разделитель: НЕТ
Ширина: 200px
Высота: 250px

Убедитесь, что высота такая же, как у созданного ранее, а ширина ровно половина ширины изображения.

Для мобильных устройств мы хотим отключить разделители на планшете и телефоне. Для этого обновите настройки видимости, чтобы выключить дисплей планшета и телефона.

Теперь, когда наш первый разделитель создан, скопируйте модуль разделения и вставьте его поверх текстового модуля в столбце 2.

Затем нам нужно переместить наши разделители. Для этого откройте настройки разделителя в столбце 1 и добавьте следующий пользовательский код CSS в основной элемент:

плавать: право;

Затем откройте настройки модуля деления в столбце 2 и добавьте следующий пользовательский код CSS к основному элементу:

плавать: слева;

Переместите изображение на место с настраиваемым полем

Теперь нам просто нужно уменьшить изображение в первом ряду, чтобы оно поместилось в пространство, которое мы создали с помощью наших разделителей.

Откройте настройки модуля изображения и добавьте следующие настраиваемые поля:

Пользовательская маржа: Низкий -250px (для настольных ПК), 20px (для планшетов)

Вот результат.

Добавить заголовок в раздел

Этот последний шаг не является обязательным, но если вы хотите добавить заголовок в раздел, создайте текстовый модуль и поместите его над изображением.

Затем добавьте содержание следующее в текстовом модуле:

Узнать больше о том, как давать

Затем обновите настройки текста следующим образом:

Цвет фона: #000000
Название 2 Шрифт: Playfair Display
Заголовок 2 Выравнивание текста: Центральный заголовок
Цвет текста 2: #ffffff
Заголовок 2 Высота строки: 2em

Выровняйте текст по ширине для более четкого оформления текста.

При окружении текста изображениями, особенно если текст центрирован таким образом, всегда рекомендуется выравнивать окружающий текст по ширине. В этом случае просто измените ориентацию текста на оправдать два текстовых модуля, содержащих наши содержание переноса текста.

Конечный результат

Вот окончательный результат.

Заключительные мысли

Знание того, как эффективно окружать текст изображениями, действительно может сделать ваш контент профессиональным и легким для чтения. Концепция довольно проста. Все, что вам нужно сделать, это переместить изображение вправо или влево, а затем использовать произвольное пространство вокруг изображения для буферизации. И что мне нравится, так это то, что вы можете использовать любой модуль (не только изображения) для вставки текста в любой тип контента. Divi. Надеюсь, это вдохновит вас на ваш следующий проект.

Надеюсь получить известие от вас в комментариях.