Как добавить маркеры изображения с помощью параметров преобразования Divi

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

Давайте приступим к делу!

Предварительный просмотр

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

Воссоздать пример №1

Приступим к воссозданию первого примера дизайна!

Добавить новый раздел

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

Фон

Добавьте градиент, а затем изображение с режимом наложения экрана.

• Фон: градиент + изображение
• Цвет градиента 1: белый #ffffff
• Цвет градиента 2: средний серый # 666666
• Начальная позиция градиента: 22%
• Наложение фонового изображения: экран

Интервал

Удалите отступы по умолчанию сверху и снизу следующего раздела.

• Верхняя и нижняя обивка: 0vw

Видимость

Завершите настройки раздела, скрыв переливы раздела.

• Вертикальное и горизонтальное переполнение: скрыто

Добавить строку №1

Теперь добавьте новую строку с тремя столбцами.

Перед добавлением каких-либо модулей настройте параметры строки.

Размеры

Сначала отрегулируйте размер ряда.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Пользовательские CSS

Затем добавьте одну строку кода CSS к основному элементу строки. Это позволит столбцам отображаться рядом друг с другом на экранах меньшего размера.

• Основной элемент CSS: display: flex;

display: flex;

Столбец 1

Преобразовать Перевести

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

• Transform Translate: ось x 2vw, ось y 16vw

Индекс Z

Добавьте большее значение индекса z на вкладку видимости.

• Индекс Z: 10

Колонка 2

Преобразовать Перевести

Примените эффект преобразования трансформации ко второму столбцу.

• Transform Translate: ось x -11vw, ось y 6vw

Индекс Z

Увеличьте значение индекса z.

• Индекс Z: 10

Колонка 3

Преобразовать Перевести

Измените преобразование значений перевода третьего столбца.

• Transform Translate: ось x -11vw, ось y 8vw

Индекс Z

И измените значение индекса z.

• Индекс Z: 10

Добавить строку №2

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

Размеры

Измените настройки размера строки.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Добавить модуль изображения

Затем добавьте модуль изображения.

Размеры

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

• Принудительная полная ширина: Да

Интервал

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

• Прокладка слева и справа: 10vw

Добавить 3 текстовых модуля

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

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

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

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

Фон

Добавьте черный фон.

• Цвет фона: черный # 000000

Текст

Стиль текста.

• Шрифт текста: Aldrich
• Цвет текста: белый #ffffff
• Выравнивание текста: по центру
• Размер текста:
  • Рабочий стол: 1.2vw
  • Таблетка: 2vw
  • Телефон: 2.4vw
• Толщина шрифта заголовка: полужирный

Размеры

Отрегулируйте размер текстового модуля.

• Ширина:
  • Рабочий стол: 17vw
  • Таблетка: 23vw
  • Телефон: 30vw
• Выравнивание модуля: по центру

Интервал

Добавьте верхний и нижний отступы.

• Верхняя и нижняя обивка: 0.9vw

Граница

Измените настройки границы.

• Закругленные углы: 14 пикселей по всем углам.
• Нижние стили: нижняя граница
• Ширина нижней границы: 4 пикселя
• Цвет нижней границы: красный # E02B20

Коробка Тень

Примените тень блока.

• Тень коробки: третий вариант

Развернуть текстовые стили

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

• Сначала щелкните три точки на правом краю текстового модуля и выберите «Расширить стили текста».
• Затем во всплывающем окне нажмите «На всем протяжении» и выберите «Этот раздел», когда раскрывается меню.
• Измените содержимое в каждом текстовом модуле.

Добавить 3 модуля делителя

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

Откройте модуль делителя в столбце 1 и внесите некоторые изменения.

Линия

Сделайте разделитель черным.

• Цвет линии: черный # 000000

Размеры

Отрегулируйте толщину разделителя.

• Вес разделителя: 3 пикселя
• Ширина: 20vw
• Выравнивание модуля: по центру

Интервал

Отрегулируйте верхнее поле.

• Верхняя маржа: 7vw

Преобразовать

Добавьте эффект поворота с преобразованием, чтобы разделитель стал вертикальным.

• Преобразование поворота: первый вариант на 90 градусов

Разверните настройки разделителя

Экономьте время и используйте опцию расширения стилей.

• Сначала нажмите на три точки с правой стороны модуля разделителя и выберите «Расширить стили разделителя».
• Затем во всплывающем окне нажмите «На всем протяжении» и выберите «Этот раздел» в раскрывающемся меню.

Теперь дизайн должен выглядеть так:

Добавить строку №3

Добавьте в раздел третью строку, используя следующую структуру столбцов:

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

Размеры

Измените настройки размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Столбец 1

Преобразовать

Примените эффект преобразования преобразования к первому столбцу.

• Преобразовать Перевести: ось Y -8vw

Индекс Z

Также измените значение индекса z.

• Индекс Z: 10

Колонка 2

Преобразовать

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

• Transform Translate: ось x -17vw, ось y -14vw

Индекс Z

Отрегулируйте значение индекса z.

• Индекс Z: 10

Добавить 2 разделителя

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

Расширить стили разделителя

После добавления разделителей используйте предыдущие разделители, чтобы расширить стили на новые.

• Сначала нажмите на три точки в модуле разделителя в первой строке выше и выберите «Расширить стили разделителя».
• Затем во всплывающем окне выберите «На всей странице».

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

Размеры

Убрать маржу.

• Верхняя маржа: по умолчанию

Индекс Z

Также измените индекс z.

• Индекс Z: -2

Добавить 2 текстовых модуля

Добавьте текстовый модуль в каждый столбец.

Расширить текстовые стили

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

• Сначала щелкните три точки в первом текстовом модуле в верхней строке и выберите «Расширить стили текста».
• Затем во всплывающем окне выберите «На всей странице».

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

Интервал

• Верхняя маржа: 7vw

Воссоздать пример №2

Переходим к следующему примеру!

Добавить новый раздел

Добавьте новый раздел на страницу, над которой вы работаете. Перед добавлением строки настройте параметры раздела.

Видимость

Скрыть переливы раздела в настройках видимости.

• Горизонтальное и вертикальное переполнение: скрыто

Добавить строку №1

Теперь добавьте строку с пятью столбцами. Перед добавлением каких-либо модулей настройте параметры строки следующим образом.

Размеры

Сначала измените настройки размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем отрегулируйте интервал.

• Левая и правая прокладка: 19.5vw

Пользовательские CSS

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

• Основной элемент CSS: display: flex;

display: flex;

Все настройки столбца

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

Пользовательские CSS

• Основной элемент: ширина: 20%! Important;

width: 20% !important;

Индекс Z

Также измените значение индекса z.

• Индекс Z: 10

Добавить 5 текстовых модулей

Добавьте текстовый модуль в каждый столбец.

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

Фон

Добавьте цвет фона.

• Цвет фона: зеленый # 2f7713

Текст

Стилизуйте контент следующим образом.

• Шрифт текста: Allerta
• Выравнивание текста: по центру
• Цвет текста: белый #ffffff
• Размер текста:
  • Рабочий стол: 1.3vw
  • Таблетка: 2vw
  • Телефон: 2.4vw
• Высота текстовой строки: 2,9 м

Размеры

Отрегулируйте размер.

• Ширина:
  • Рабочий стол: 6vw
  • Таблетка: 8vw
  • Телефон: 9vw
• Выравнивание модуля: по центру

Интервал

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

• Нижняя маржа: -2vw
• Верхняя и нижняя обивка: 1vw
• Левый и правый отступ: 1vw

Граница

Превратите текстовый модуль в кружок в настройках границы.

• Закругленные углы: 50vw со всех четырех сторон

Коробка Тень

Также выберите тень блока.

• Тень коробки: третий вариант

Расширить текстовые стили

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

• Сначала щелкните точки справа от текстового модуля и выберите «Расширить стили текста».
• Затем во всплывающем окне нажмите «На всем протяжении» и выберите «Эта страница».
• Наконец, измените текст в поле содержимого каждого модуля.

Теперь дизайн должен выглядеть так.

Текстовый модуль 2

Второй круг сделайте желтым.

• Цвет фона: желтый # f2e200

Текстовый модуль 3

Сделайте третий круг оранжевым.

• Цвет фона: оранжевый # f2b100

Текстовый модуль 4

Четвертый круг сделайте оранжево-красным.

• Цвет фона: оранжевый красный

Текстовый модуль 5

Сделайте пятый модуль фиолетовым.

• Цвет фона: фиолетовый # 8e008c

Добавить 5 разделительных модулей

Теперь под каждым текстовым модулем добавьте модуль-разделитель.

Соответственно отрегулируйте настройки первого разделителя.

Линия

Придайте цвет разделителю.

• Цвет линии: зеленый # 2f7713

Размеры

Отрегулируйте ширину.

• Ширина разделителя: 4 пикселя
• Ширина: 13vw

Интервал

Добавьте значение верхнего поля.

• Верхнее поле:
  • Рабочий стол: 7vw
  • Планшет + телефон: 5vw

Преобразовать

Поверните разделитель, чтобы он стал вертикальным.

• Поворот трансформации: 90 градусов в первом варианте

Расширить настройки разделителя

Используйте опцию расширения стилей, чтобы стилизовать другие разделители.

• Сначала нажмите на точки справа от модуля разделителя и выберите «Расширить стили разделителя».
• Затем во всплывающем окне нажмите «На всем протяжении» и выберите «Этот раздел».

Подберите цвета

Разделитель 2

Сделайте второй разделитель желтым.

• Цвет линии: желтый # f2e200

Разделитель 3

Сделайте третий разделитель оранжевым.

• Цвет линии: оранжевый # f2b100

Разделитель 4

Сделайте четвертый разделитель оранжево-красным.

• Цвет линии: оранжевый красный # ef4a21

Разделитель 5

Сделайте пятый разделитель фиолетовым.

• Цвет линии: фиолетовый # 8e008c

Добавить строку №2

Добавьте новую строку из одного столбца.

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

Размеры

Сначала отрегулируйте размер.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Видимость

Затем видимость.

• Горизонтальное и вертикальное переполнение: видимое

Добавить модуль изображения

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

Размеры

Установить полную ширину изображения.

• Принудительная полная ширина: Да

Расстояние между рядами

Пришло время для последнего штриха. Снова откройте настройки строки №1 и добавьте верхнее и нижнее поля.

• Верхняя маржа: 7vw
• Нижняя маржа:
  • Рабочий стол: -24vw
  • Таблетка: -31vw
  • Телефон: -35vw

Предварительный просмотр

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

Пример # 1

Рабочий стол

Мобильный

Пример # 2

Рабочий стол

Мобильный

Это обертка!

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