Как обернуть текст вокруг изображений в Divi (3 способа)

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

В этом уроке я покажу вам 3 способа использования Divi для обтекания текста текстом. Это позволит вам создавать макеты в классическом стиле печати с помощью Divi, который поможет вам с дизайном. Вот что мы собираемся рассказать:

1. Как обернуть текст вокруг изображений (и цитат) внутри текстового модуля с помощью редактора WYSIWYG
2. Как обернуть текст вокруг изображения, разместив модуль изображения рядом с текстовым модулем в Divi
3. Как обернуть текст вокруг центрированного изображения для создания уникального макета из двух столбцов

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

Sneak Peek

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

Давайте начнем!

Подпишитесь на наш канал Youtube

Скачайте БЕСПЛАТНО макет обтекания текстом вокруг изображений

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Для начала все, что вам нужно, это Divi и несколько изображений.

• Divi - убедитесь, что тема Divi установлена ​​и активна. Мы будем создавать наши проекты с нуля, используя Divi Builder в интерфейсе (визуальный конструктор).
• Изображения - также убедитесь, что у вас есть хотя бы одно изображение размером 400 на 250 пикселей для использования в учебнике.

Когда вы будете готовы, перейдите в свою панель управления WordPress и перейдите в Pages> Add New. Дайте своей новой странице заголовок и разверните Divi Builder во внешнем интерфейсе. Выберите вариант «Строить с нуля». Теперь вы готовы к работе!

Как обернуть текст вокруг изображений и цитат внутри текстового модуля с помощью редактора WYSIWYG

WordPress позволяет легко обтекать изображения текстом с помощью редактора WordPress по умолчанию (WYSIWYG). А поскольку текстовый модуль Divi имеет тот же встроенный редактор WordPress WYSIWYG, мы можем использовать тот же метод, который пользователи WordPress всегда использовали для обтекания текстом изображений.

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

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

Обновите содержимое текстового модуля своей копией. А пока я использую пару абзацев lorem ipsum.

Теперь, если вы еще этого не сделали, выберите визуальную вкладку в редакторе содержимого. Затем обязательно щелкните верхнюю часть области содержимого, куда вы хотите добавить изображение, и нажмите кнопку «Добавить мультимедиа».

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

WordPress добавит к вашему изображению класс (называемый «alignleft»), который будет перемещать изображение влево. Добавленное свойство float позволит тексту обтекать изображение. WordPress также добавит буфер вокруг изображения, используя поля, чтобы создать небольшой промежуток между изображением и окружающим текстом.

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

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

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

Затем вернитесь в редактор содержимого и переключитесь на текстовую вкладку. Затем добавьте некоторый встроенный стиль к тегу цитаты, чтобы создать некоторый интервал вокруг цитаты и переместить его влево. HTML-код вашей цитаты должен выглядеть примерно так.

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

Теперь текст будет обтекать цитату.

Как обернуть текст вокруг изображения, разместив модуль изображения рядом с текстовым модулем в Divi

Чтобы обернуть текст вокруг модуля изображения, мы можем разместить весь модуль изображения рядом с текстовым модулем. Это может быть предпочтительным методом использования редактора WordPress выше, потому что он позволяет вам полностью контролировать стиль вашего изображения с помощью настроек конструктора Divi вместо добавления встроенного стиля или внешнего CSS к тегу изображения.

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

Создайте новый обычный раздел со строкой из одного столбца. Затем добавьте модуль изображения в строку с изображением по вашему выбору. Я использую изображение из пакета Charity Layout Pack, его размер составляет 400 на 250 пикселей.

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

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

float:left;

Затем обновите настраиваемое поле изображения, чтобы создать буфер, который нам нужен для обтекания текста вокруг изображения:

Специальная маржа: 2% сверху, 2% снизу, 2% справа

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

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

float:right;

И обновите интервал полей до следующего:

Специальная маржа: 2% сверху, 2 доллара снизу, 2% слева

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

Использование этого дизайна на нескольких столбцах

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

Затем присвойте изображению процентное значение максимальной ширины, чтобы оно соответствовало разной ширине браузера.

Макс.ширина: 33,33% (рабочий стол), 100% (телефон)

Скопируйте модуль изображения и текста из первого столбца и вставьте их в столбец 2. Затем обновите содержимое и изображения по мере необходимости.

Вот и все. Вот результат.

Как обернуть текст вокруг центрированного изображения или модуля для создания уникального макета из двух столбцов

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

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

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

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

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

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

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

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

Создайте двухколоночную строку текста

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

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

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

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

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

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

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

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

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

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

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

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

float: right;

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

float: left;

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

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

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

Пользовательское поле: внизу -250 пикселей (для ПК), 20 пикселей (для планшета).

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

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

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

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

<h2>Learn more about how to give</h2>

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

Цвет фона: # 000000
Шрифт заголовка 2: Playfair Display
Выравнивание текста заголовка 2: по центру
заголовок 2 Цвет текста: #ffffff
Высота строки заголовка 2: 2em

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

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

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

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

А вот и на дисплее планшета и телефона.

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!