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

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

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

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

Создание эффекта разделения изображения с помощью Photoshop и Illustrator

Прежде чем начать работу с Divi, вам необходимо подготовить набор изображений для загрузки. Поскольку это эффект разделения изображения, вам нужны два изображения, которые хорошо сочетаются друг с другом. Вам потребуются изображения двух разных размеров: 960 пикселей в ширину на 1200 пикселей в высоту для ПК и 600 пикселей в ширину на 1200 пикселей в высоту для планшетов и мобильных устройств.

Шаг 1: выберите изображения

Выберите два HD-изображения ваших продуктов.

Шаг 2: стереть фон

Сотрите фон, чтобы сделать вырезы. Вы можете использовать любую программу, какую захотите. Но вот пошаговое руководство по Photoshop.

Шаг 3. Откройте новый проект в Illustrator

Откройте новый проект в Illustrator с размерами 1920 пикселей в ширину и 1200 пикселей в высоту.

Шаг 4: Добавьте вертикальную направляющую.

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

Шаг 5. Импортируйте или разместите вырезанные изображения

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

Шаг 6: начните визуализировать разделение

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

Шаг 7: Завершите эффект

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

Шаг 8: Обрежьте половину и сохраните

Когда дизайн будет готов, избавьтесь от лишних вырезов. Дважды проверьте, чтобы прямой край каждого изображения касался центральной направляющей. Создайте два новых артборда и измените их размер, чтобы они соответствовали каждой стороне, убедившись, что они разделены прямо по центральной направляющей. Экспортируйте для Интернета, по одной монтажной области за раз, и сохраните как .png. Теперь у вас есть два разных изображения. И 960 пикселей в ширину, и 1200 пикселей в высоту.

Шаг 9. Измените размер для планшета и мобильного устройства

Измените размер обоих изображений на 960 пикселей в ширину и 1200 пикселей в высоту. Убедитесь, что вы обрезаете только прозрачный фон, не касайтесь изображения. Я сделал это в Photoshop, изменив размер холста с помощью привязки сбоку от изображения.

Начнем воссоздавать!

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

Фон

Теперь, когда мы прошли первую часть руководства, пришло время начать работу с Divi! Создайте новую страницу или добавьте новый раздел к существующей странице. Добавьте в раздел градиентный фон.

• Фон: Градиент
• Первый цвет: Off White # f7f7f7
• Цвет второй: свежий зеленый # b7e778
• Направление градиента: 90 градусов
• Начальная и конечная позиция: 50%

Интервал

Затем измените настройки интервала раздела.

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

Видимость

Наконец, отрегулируйте видимость.

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

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

Структура столбца

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

Размеры

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

• Ширина желоба: 2
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Также добавьте несколько пользовательских значений заполнения.

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

Столбец 1 Настройки

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

Перейдите к настройкам столбца 1 и измените значения преобразования преобразования.

• Transform Translate: -2vw по оси Y

Столбец 2 Настройки

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

Сделайте то же самое для столбца 2.

• Transform Translate: 2vw ось x

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

Добавить содержимое

Пора начинать добавлять модули! Добавьте текстовый модуль в столбец 1 с некоторым содержимым H2 по вашему выбору.

Текст заголовка

На вкладке «Дизайн» измените настройки текста заголовка.

• Уровень текста заголовка: H2
• Шрифт H2: Corben
• Выравнивание H2:
  • Рабочий стол: левый
  • Планшет + Телефон: Центр
• Цвет текста H2: Очень темно-серый # 3a3a3a
• Размер текста H2:
  • Рабочий стол: 7vw
  • Планшет + телефон: 16vw

Интервал

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

• Правое поле:
  • Рабочий стол: -1vw
  • Планшет + Телефон: 0vw
• Правый отступ:
  • Планшет + телефон: 35vw

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

Добавить содержимое

Теперь добавьте текстовый модуль во второй столбец. Вставьте какой-нибудь контент H2 по вашему выбору.

Текст заголовка

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

• Уровень текста заголовка: H2
• Шрифт H2: Corben
• Выравнивание H2:
  • Рабочий стол: левый
  • Планшет + телефон: справа
• Цвет текста H2: Очень темно-серый # 3a3a3a
• Размер текста H2:
  • Рабочий стол: 7vw
  • Планшет + Телефон: 14vw

Интервал

Наконец, отрегулируйте интервал.

• Верхнее поле:
  • Таблетка: -12vw
  • Телефон: -14vw
• Левое поле:
  • Рабочий стол + планшет: -0,5 ВВт
• Правый отступ:
  • Планшет + телефон: 17vw

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

Структура столбца

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

Размеры

Откройте настройки строки и настройте параметры размера.

• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем измените настройки интервала.

• Верхнее поле:
  • Рабочий стол: -15vw
  • Таблетка: -36vw
  • Телефон: -40vw
• Верхняя и нижняя обивка:
  • Рабочий стол: 0vw
  • Таблетка: 9vw
  • Телефон: 12vw

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

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

• Основной элемент: дисплей: гибкий;

display: flex;

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

Добавить изображение

Добавьте левую половину изображения в столбец 1.

• Изображение:
  • Рабочий стол: изображение шириной 960 пикселей.
  • Планшет + телефон: изображение шириной 600 пикселей.

Размеры

Сделайте модуль изображения полноширинным.

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

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

Добавить изображение

Добавьте правую половину изображения в столбец 2.

• Изображение:
  • Рабочий стол: изображение шириной 960 пикселей.
  • Планшет + телефон: изображение шириной 600 пикселей.

Размеры

Сделайте и этот модуль изображения полноширинным.

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

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

Структура столбца

К следующему ряду! Выберите следующую структуру столбцов:

Размеры

Отрегулируйте размер строки следующим образом:

• Ширина желоба: 4
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхнее поле:
  • Рабочий стол: -38vw
  • Планшет + Телефон: -14vw

Столбец 1 Настройки

Интервал

Перед добавлением модулей отрегулируйте расстояние в столбцах. Начните с столбца 1.

• Левый отступ:
  • Рабочий стол: 7vw
  • Планшет + Телефон: 12 ВВт
• Правый отступ:
  • Рабочий стол: 15vw
  • Планшет + Телефон: 12 ВВт

Столбец 2 Настройки

Интервал

Затем отрегулируйте настройки расстояния между столбцами 2.

• Левый отступ:
  • Рабочий стол: 15vw
  • Планшет + Телефон: 12 ВВт
• Правый отступ:
  • Рабочий стол: 7vw
  • Планшет + Телефон: 12 ВВт

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

Добавить содержимое

Добавьте текстовый модуль в столбец 1 и добавьте контент H3 по вашему выбору.

Фон

Измените цвет фона.

• Фоновый цвет
• Цвет: очень темно-серый # 333333

Текст заголовка

Затем стилизуйте текст заголовка.

• Уровень текста заголовка: H3
• Шрифт H3: Corben
• Выравнивание H3: по центру
• Цвет шрифта H3: Off White # f7f7f7
• Размер шрифта H3:
  • Рабочий стол: 2.2vw
  • Таблетка: 6.4vw
  • Телефон: 7vw
• Расстояние между буквами H3: 3 пикселя

Интервал

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

• Верхняя обивка:
  • Рабочий стол + планшет: 0,2 Вт
  • Телефон: 1vw
• Нижняя обивка:
  • Рабочий стол: 0,5 Вт
  • Таблетка: 1.2vw
  • Телефон: 1vw

Граница

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

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

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

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

Изменить содержание

Конечно, вам нужно будет изменить содержимое в дублированном текстовом модуле.

Добавить модуль призыва к действию в столбец 1

Добавить содержимое

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

• Заголовок
• Кнопка
• Тело

Добавить ссылку

Продолжите, добавив ссылку на кнопку CTA.

Фон

И добавьте цвет фона на планшет и мобильный телефон.

• Фоновый цвет:
  • Планшет + Телефон: Off White # f7f7f7

Текст заголовка

На вкладке «Дизайн» задайте стиль для параметров текста H4.

• Уровень текста заголовка: H4
• Шрифт H4: Open Sans
• Цвет H4: очень темно-серый # 333333
• Размер текста H4:
  • Рабочий стол: 1.4vw
  • Таблетка: 4.5vw
  • Телефон: 7vw
• Расстояние между буквами H3: 2 пикселя
• Высота линии H3: 1,5 м

Основной текст

Затем измените настройки основного текста.

• Шрифт основного текста: Open Sans
• Выравнивание основного текста: по центру
• Цвет основного текста: очень темно-серый # 333333
• Размер основного шрифта:
  • Рабочий стол: 0.9vw
  • Таблетка: 3vw
  • Телефон: 4vw
• Высота линии корпуса: 1,8 м

Кнопка

Создайте стиль и для кнопки.

• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2.2vw
  • Телефон: 3.8vw
• Цвет шрифта кнопки: очень темно-серый # 333333
• Цвет фона кнопки:
  • Планшет + мобильный телефон: Fresh Green # b7e778
• Ширина границы кнопки:
  • Рабочий стол: 1px
• Цвет границы кнопки:
  • Рабочий стол: очень темно-серый # 333333
• Радиус границы кнопки: 1vw

Интервал

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

• Верхнее поле:
  • Рабочий стол + планшет: -2vw
  • Телефон: 3vw
• Отступ слева и справа:
  • Рабочий стол: 0vw
  • Планшет + Телефон: 4vw

Граница

И последнее, но не менее важное: стилизуйте границу для разных размеров экрана.

• Закругленные углы: 1vw все углы
• Стили границ:
  • Планшет + Телефон: со всех четырех сторон
• Ширина рамки:
  • Планшет + телефон: 1 пикс.
• Цвет границы:
  • Планшет + телефон: очень темно-серый # 333333

Дублируйте модуль призыва к действию и перетащите его в столбец 2

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

Изменить содержание

Чтобы завершить дизайн, измените содержимое в дублированном модуле призыва к действию, и все готово!

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

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

Рабочий стол

Мобильный

Заключение

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