Картинку обтекает текст: 12. Обтекание картинки текстом. | Салон Бисера beading patterns free

android — Обтекание текста вокруг картинки в ConstraintLayout

Можно ли сделать с помощью ConstraintLayout такое обтекание текста вокруг картинки?

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

У меня получается заставить ImageView быть равным по высоте контейнеру с сохранением пропорций, но текст при этом «уезжает» вправо:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/avatar"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintVertical_weight="1"
        android:contentDescription="@string/avatar"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />
    <TextView
        android:id="@+id/details"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingEnd="@dimen/margin"
        android:paddingLeft="@dimen/margin"
        android:paddingRight="@dimen/margin"
        android:paddingStart="@dimen/margin"
        app:layout_constraintLeft_toRightOf="@id/avatar"
        app:layout_constraintStart_toEndOf="@id/avatar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="@tools:sample/lorem" />
</androidx. 
  constraintlayout.widget.ConstraintLayout>

И не получается сделать прокручивание, т.к. в случае, если я оборачиваю ConstraintLayout в ScrollView, ImageView начинает занимать и невидимую часть экрана:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        ...
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Если же обернуть TextView в ScrollView, размер картинки правильный, но прокручивается только текст справа, картинка остаётся на месте, а это не совсем то, что мне нужно — текст не обтекает картинку, а просто прокручивается справа от неё.

Или с помощью ConstraintLayout и ScrollView так сделать невозможно? C помощью каких контейнеров тогда лучше сделать такой макет?

Размещение объектов внутри текста в Pages на Mac

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

• Определенное место на странице. Объект не перемещается при добавлении текста или других объектов на страницу.

• Определенное место в тексте. Объект перемещается при редактировании текста, оставаясь на той же позиции относительно точки своей привязки в тексте.

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

Привязка объекта к странице или к тексту

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

Примечание. Для связанных текстовых блоков нельзя задать параметр «Двигать с текстом»; для них должен быть выбран вариант «Оставить на странице».

1. Выберите объект нажатием.

2. В боковой панели «Формат»  нажмите вкладку «Расстановка».

3. В разделе «Расположение объекта» нажмите одну из следующих кнопок.

   • Оставить на странице. Объект остается на том месте, где он размещен на странице; он не перемещается при добавлении текста или других объектов.

   • Двигать с текстом. Объект меняет свою позицию вместе с текстом, к которому он прикреплен.

     Если в документе отображаются невидимые символы или если выбран привязанный объект, то в тексте в месте привязки объекта отображается маркер . Чтобы изменить точку привязки, перетяните объект на новое место (точка привязки также переместится).

     Примечание. Если выбран вариант «Двигать с текстом», выберите вариант обтекания «Встроено в текст». Объект будет перемещаться (на той же строке) вместе с текстом, а маркер точки привязки исчезнет. Чтобы оставить объект на той же позиции относительно текста, выберите другой вариант обтекания.

Обтекание объекта текстом

1. Выберите объект нажатием.

2. В боковой панели «Формат»  нажмите вкладку «Расстановка».

3. Нажмите всплывающее меню «Обтекание текста», затем выберите один из вариантов.

   • Авто. Текст обтекает объект в соответствии с размещением объекта на странице относительно окружающего текста.

   • Вокруг. Текст обтекает объект со всех сторон.

   • Сверху и снизу. Текст обтекает объект сверху и снизу, но не по бокам.

   • Встроенный в текст. Объект остается на базовой линии текста и перемещается вместе с текстом по мере ввода. (Если этот вариант недоступен, убедитесь, что выбран параметр «Двигать с текстом», а Вы работаете с текстовым документом.)

     Если объект размещен не там, где нужно, перетяните его на новое место в тексте.

     Примечание. Связанные текстовые блоки не могут быть встроенными; для них должен быть выбран вариант «Оставить на странице».

   • Нет. Объект не влияет на размещение текста на странице.

   Если в документе с макетом страницы текст внутри текстового блока или фигуры не обтекает другой объект нужным образом, убедитесь, что этот объект находится перед текстовым блоком или фигурой (выберите объект, затем в боковой панели на вкладке «Расстановка» нажмите «На передний план»).

4. Если объект не является прямоугольником и Вы хотите, чтобы текст обтекал контуры объекта, нажмите кнопку «Обтекание текста» справа.

5. Чтобы изменить расстояние между текстом и объектом, измените значение в поле «Интервалы».

6. Если объект включает альфа-канал (прозрачность), можно настроить проступание текста через прозрачную область, изменив значение в поле «Альфа».

Встраивание объектов в текстовый блок или фигуру

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

1. Если на страницу еще не добавлены текстовые блоки или фигуры либо не добавлен объект, который Вы хотите вставить, нажимайте кнопки объектов в панели инструментов, чтобы добавить нужные объекты.

2. Выберите объект, который нужно встроить в текстовый блок или фигуру, затем нажмите сочетание клавиш Command-X, чтобы его вырезать.

   Если объект находится на странице,выберите его нажатием. Если он встроен в текст, выберите его двойным нажатием.

3. Дважды нажмите текстовый блок или фигуру, куда нужно вставить объект, чтобы поместить точку вставки внутрь. Затем нажмите сочетание клавиш Command-V, чтобы вставить объект.

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

4. Чтобы добавить текст после вложенного объекта, нажмите внутри родительского объекта, чтобы отобразить точку вставки, а затем введите текст.

   Если Вы случайно выбрали вложенный объект (появились три метки-манипулятора выбора), нажмите за его пределами, чтобы поместить точку вставки в родительский объект.

   Совет. Если вложенный объект — это фигура, внутри нее можно поместить изображение, фигуру или уравнение. Выберите вложенный объект, дважды нажмите внутри него, чтобы отобразить точку вставки, затем введите или вставьте текст либо вставьте объект.

Перемещение встроенного объекта на страницу

Можно переместить встроенный объект на страницу, чтобы он перестал быть встроенным в текст или вложенным в другой объект.

1. Выполните одно из описанных ниже действий.

   Появятся три метки-манипулятора выбора, показывающие, что встроенный объект выбран.

2. В боковой панели «Формат»  нажмите вкладку «Расстановка».

3. Нажмите «Переместить на страницу» или «Оставить на странице».

   Название кнопки зависит от того, встроен ли выбранный объект в основной текст или внутрь объекта.

См. такжеОсновные сведения об изображениях, диаграммах и других объектах в Pages на MacРазмещение и выравнивание объектов в Pages на MacДобавление и выравнивание текста внутри фигуры в Pages на MacДобавление математических уравнений в Pages на Mac

Обтекание изображения и текста в Squarespace — PixelHaze Academy

30 авг

Написано Элвином Дэвисом

Лето 2022 года, и кажется, что все, что связано с Squarespace, изменилось!

С выпуском долгожданного движка Squarespace Fluid Engine мы обнаружили, что многие из наших учебных пособий нуждаются в обновлении. Один из основных вопросов, которые нам задавали, —

: «Как теперь мы можем добиться эффектов обтекания изображения и текста с помощью нового жидкостного движка Squarespace?»

Хорошая новость: да, в Squarespace 2022 по-прежнему можно обтекать изображение текстом!

Вот обновленное руководство по переносу изображений и текста с помощью нового жидкостного движка Squarespace.

Чтобы получать регулярные учебные пособия и руководства Squarespace, не стесняйтесь подписаться на наш канал YouTube в правой части этой страницы (под статьей о мобильных устройствах).

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

Руководство по переносу исходного изображения Squarespace:

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

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

Первое, что нужно учитывать при добавлении изображений на страницу Squarespace (будь то страница контента, запись в блоге, страница магазина или событие), это то, что у нас есть несколько доступных вариантов:

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

1. Галерея Squarespace: Галереи — это идеальный способ отображения трех или более изображений в одном разделе страницы с различными функциями, такими как заголовки изображений, лайтбокс и автоматическая обрезка. Это мощная функция, которая теперь полностью встроен в процесс создания страниц Squarespace 7. 1.

2. Списки: Новая функция Squarespace 7.1, списки предоставляют новый набор инструментов, полный функций, связанных с изображениями и содержимым. Для тех, кому интересна эта функция, у нас теперь есть новый модуль в нашем курсе Squarespace Box of Tricks, подробно описывающий модули списков.

3. Сводные блоки: Сводные блоки, представленные в другом модуле, доступном в нашем курсе Squarespace Box of Tricks, представляют собой мощную функцию Squarespace, позволяющую дизайнерам предоставлять визуальные ссылки на динамический контент, извлекаемый из других мест на веб-сайте. Например, если бы мы хотели показать 3 самых последних новостных сообщения на нашей домашней странице Squarespace, мы бы добавили блок сводки, связали его с выбранной областью блога и просто настроили несколько визуальных параметров, чтобы связать его.

4. Разделить содержимое: Этот подход похож на обтекание текстом, поскольку позволяет использовать несколько столбцов на странице Squarespace. В простейшей форме вы можете разместить текстовый блок в одном столбце и блок изображения в другом. Ключевое отличие состоит в том, что в случае, когда текст длиннее (занимает больше места по вертикали), чем изображение, он не будет обтекать изображение, а будет обтекаться

5. Обтекание текстом и изображением: Этот подход продемонстрировано в верхней части этой страницы, как подробно описано в руководстве ниже. Обтекание текстом идеально подходит для отображения комбинации изображений и текста с одинаковым уровнем приоритета на экранах настольных компьютеров и ноутбуков. На мобильных устройствах изображение будет автоматически расширяться, чтобы заполнить весь столбец, устраняя проблемы, когда изображение было бы слишком маленьким для использования.

Наш кофейный клип (доступный на YouTube-канале PixelHaze) описывает все шаги, необходимые для достижения эффекта обтекания текстом в Squarespace.

Готовы изучить перенос изображений и текста в Squarespace? Давайте сразу приступим…

Чтобы начать, создайте или найдите страницу, на которую вы хотите добавить эффект переноса изображения, затем нажмите «Изменить», чтобы начать. Давайте теперь пробежимся по процессу полностью. Если вы предпочитаете посмотреть видео, описывающее эти шаги, мы создали бесплатное руководство на нашем канале YouTube (см. выше).

Посмотреть в полном размере

1: добавьте блок изображения на страницу Squarespace

Посмотреть в полном размере

2: Нажмите и перетащите изображение, пока не появится это поле

Посмотреть в полном размере

3. Отпустите кнопку, и ваше изображение завернуто!

Добавьте блок изображения с помощью редактора Squarespace

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

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

Щелкните изображение мышью. Удерживая нажатой кнопку мыши, переместите изображение либо влево, либо вправо от содержимого. Как только мы видим синюю рамку (в отличие от синих линий), мы знаем, что режим переноса изображения активирован, позволяя тексту перемещаться (обтекать) под изображением. В большинстве случаев изображение также будет частично перекрывать край блока содержимого, полностью используя любое пространство по обе стороны окна браузера.

Отпустите и, при необходимости, перенастройте

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

Для новичков в Squarespace я часто рекомендую создать пустую «тестовую» страницу, которой нет в системе меню, чтобы вы могли практиковаться в свое удовольствие.

Изучайте Squarespace вместе с нами!

Создавайте профессиональные веб-сайты в Squarespace с помощью нашего специального онлайн-курса, включающего советы по веб-дизайну за 20 лет.

15 августа 2019 г.

Элвин Дэвис

15 авг. 2019 г.

Опыт Элвина в качестве владельца малого бизнеса, дизайнера, разработчика интерфейса и руководителя проекта сослужил ему хорошую службу в его стремлении стать универсальным специалистом. Он создавал веб-сайты и программное обеспечение вместе с компаниями всех размеров и отраслей дольше, чем хотел бы упомянуть. Справедливо сказать, что в другой жизни он был бы учителем, и запуск Академии Pixelhaze дает ему возможность реализовать еще одну жизненную цель — передать свои отраслевые знания следующей волне начинающих дизайнеров и предпринимателей.

НАША КОМАНДА

15 августа 2019 г.

Стили изображений SquarespaceОбтекание изображения SquarespaceОбтекание текстом Squarespace

Элвин Дэвис

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

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

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

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

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

• 1 Краткий обзор
• 2 Загрузите макет обтекания текстом изображений БЕСПЛАТНО
• 3 Скачать бесплатно
• 4 Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
• 5 Что нужно для начала
• 6 Как обтекать текстом изображения и цитаты внутри текстового модуля с помощью редактора WYSIWYG
• 7 Как обернуть текст вокруг изображения, поместив модуль изображения рядом с текстовым модулем в Divi
  • 7. 1 Использование этого дизайна на нескольких столбцах
• 8 Как обернуть текст вокруг центрированного изображения или модуля для уникального макета с двумя столбцами
  • 8.1 Создание содержимого верхней строки с центрированным изображением
  • 8.2 Создайте двухколоночную строку текста
  • 8.3 Создание пустого пространства с плавающими разделителями
  • 8.4 Перемещение изображения на место с пользовательским полем
  • 8,5 Добавление заголовка к разделу
  • 8,6 Выравнивание текста по ширине для более четкого дизайна обтекания текстом
  • 8,7 Конечный результат
• 9 Последние мысли

Краткий обзор

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

Начнем!

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

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

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

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

Давайте приступим к обучению?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 
Это 
 цитата
 

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

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

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

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

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

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

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

 поплавок:левый;
 

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

Пользовательское поле: 2% сверху, 2% снизу, 2% справа

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

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

 поплавок:право;
 

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

Пользовательская маржа: 2% сверху, 2$ снизу, 2% слева

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

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

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

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

Максимальная ширина: 33,33% (настольный компьютер), 100% (телефон)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 поплавок: правый;
 

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

 поплавок: левый;
 

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

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

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

Пользовательское поле: -250 пикселей снизу (настольный компьютер), 20 пикселей (планшет)

Вот результат на данный момент.

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

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

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

  
Подробнее о том, как дарить
  

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

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

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

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