Создание раздела Polaroid Hero с параметрами преобразования Divi

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО дизайн раздела Polaroid Hero

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

Нижний разделитель

Добавьте мятно-зеленый нижний разделитель.

• Размещение разделителя: снизу
• Стиль разделителя: # 12
• Цвет разделителя: мятно-зеленый # d2f2d0
• Высота разделителя: 23vw

Интервал

Отрегулируйте интервал между секциями.

• Верхняя маржа: 7vw
• Нижнее поле: 0 пикселей
• Отступ сверху и снизу: 0 пикселей

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

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

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

Размеры

Теперь отрегулируйте размер строки.

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

Интервал

Затем отрегулируйте верхний и нижний отступ в настройках интервала.

• Отступ сверху и снизу: 0 пикселей

Отображать

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

• Пользовательский CSS - основной элемент: display: flex;

display: flex;

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

Загрузить квадратное изображение

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

Выравнивание

Теперь отрегулируйте выравнивание модуля.

• Выравнивание модуля: по центру

Размеры

Затем сделайте модуль полной шириной.

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

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

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

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

Текст

Стиль шрифта текста.

• Шрифт текста: Advent Pro
• Выравнивание текста: по центру
• Цвет текста: очень темно-серый # 474747
• Размер текста:
  • Рабочий стол: 1vw
  • Планшет + Телефон: 2vw
• Расстояние между буквами текста: 0.1vw
• Высота текстовой строки: 1,8 м

Размеры

Используйте «100%» для ширины в настройках размера.

• Ширина: 100%

Интервал

Теперь отрегулируйте интервал.

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

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

Изменить изображение и копию дубликатов

Измените изображения в каждом модуле дублирования изображений. Если ваш дизайн требует этого, измените также текстовое содержимое.

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

Фон

Продолжите, открыв настройки столбца 1 строки. Установите белый фон, чтобы создать эффект поляроида.

• Цвет фона: белый #ffffff

Интервал

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

• Нижняя обивка: 2vw

Граница

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

• Ширина 4-сторонней границы: 1vw
• Ширина верхней границы: 2vw
• Ширина правой границы: 2vw
• Ширина нижней границы: 1vw
• Ширина левой границы: 2vw
• Цвет границы: белый #ffffff

Коробка Тень

Завершите настройки столбца 1, добавив тонкую тень блока.

• Тень коробки: # 1

Расширить настройки столбца 1

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

• Вернитесь в главное окно настроек строки и нажмите на три точки справа от вкладки первого столбца.
• Выберите «расширить стили элементов» и выберите «по всей этой строке».

Столбец 1: стили преобразования

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

• Transform Translate: ось x -11vw, ось y -6vw
• Поворот трансформации: 341 градус, 1-й вариант

Столбец 2 Стили преобразования

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

• Transform Translate: ось x -22w, ось y 0vw
• Поворот трансформации: 10 градусов, 1-й вариант

Столбец 3: стили преобразования

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

• Масштаб трансформации: 68% по обеим осям
• Transform Translate: ось x -46w, ось y 12vw
• Поворот трансформации: 31 градус, 1-й вариант

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

Фон

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

• Цвет фона: мятно-зеленый # d2f2d0

Нижний разделитель

Дайте секции нижний разделитель.

• Размещение разделителя: снизу
• Стиль разделителя: # 12
• Цвет разделителя: белый #ffffff
• Высота разделителя: 23vw

Интервал

Удалите верхнюю обивку по умолчанию.

• Верхний отступ: 0 пикселей

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

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

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

Копирование и вставка стилей строк

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

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

Копировать и вставить настройки столбца

Теперь скопируйте настройки столбца в первой строке и вставьте их в столбцы 1 и 2 новой строки.

• Сначала откройте настройки строки в первой строке.
• Во-вторых, щелкните три точки в правой части вкладки первого столбца и выберите «копировать стили элементов».
• Затем прокрутите вниз до новой строки и откройте вкладку настроек.
• Наконец, нажмите на три точки справа от первого столбца и выберите «Вставить стили элементов».

Столбец 1: стили преобразования

Теперь настройте стили преобразования в столбце 1.

• Масштаб трансформации: 75% по обеим осям
• Transform Translate: ось x -8w, ось y -14vw
• Поворот трансформации: 35 градусов 1-й вариант

Столбец 2 Стили преобразования

Затем измените стили преобразования в столбце 2.

• Transform Translate: ось x -17w, ось y 2vw
• Поворот трансформации: 346 градусов, 1-й вариант

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

Модули дублирования и перетаскивания изображений

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

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

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

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

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

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

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

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

Щелкните значок плюса в третьем столбце и добавьте текстовый модуль. Вставьте содержимое H2 и абзаца.

Текст

Оформите текст следующим образом.

• Шрифт текста: Advent Pro
• Выравнивание текста: по центру
• Цвет текста: темно-серый # 848484
• Размер текста:
  • Рабочий стол: 1vw
  • Планшет + телефон: 1.9vw
• Расстояние между буквами текста: 0.1vw
• Высота текстовой строки:
  • Рабочий стол: 1.2em
  • Планшет + телефон: 1.3em

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

Теперь стилизуйте текст H2.

• Заголовок: H2
• Шрифт H2: Adamina
• Плотность шрифта H2: полужирный
• Цвет шрифта H2: Очень темно-серый # 444444
• Размер шрифта H2:
  • Рабочий стол: 2vw
  • Планшет + Телефон: 3vw
• Расстояние между буквами H2: 4 пикселя
• Высота линии H2:
  • Рабочий стол: 1.7vw
  • Планшет + телефон: 1,5 ВВт

Размеры

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

• Ширина:
  • Рабочий стол: 60%
  • Таблетка: 91%
  • Телефон: 100%
• Выравнивание модуля: по центру

Интервал

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

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

Добавить модуль кнопок в столбец 3

Добавить копию

Щелкните значок плюса под текстом и добавьте модуль кнопки. Добавьте копию на кнопку.

Выравнивание

Измените выравнивание кнопки.

• Выравнивание: по центру

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

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

• Размер текста кнопки:
  • Рабочий стол: 1vw
  • Таблетка: 2.4vw
  • Телефон: 2.3vw
• Ширина границы кнопки: 0 пикселей
• Цвет текста кнопки: Черный # 000000
• Расстояние между буквами кнопки: 4 пикселя
• Шрифт кнопки: Advent Pro
• Толщина шрифта кнопок: полужирный

Интервал

Примените значение верхнего поля.

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

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

Видимость

Под кнопкой добавьте разделитель и стиль, как показано ниже.

• Видимость: да

Линия

Придайте разделителю ярко-зеленый цвет.

• Цвет линии: # 55f252

Размеры

Измените настройки размера разделителя, и все готово!

• Вес разделителя
  • Рабочий стол: 7 пикселей
  • Планшет + телефон: 4 пикселя
• Ширина:
  • Рабочий стол: 10%
  • Планшет + Телефон: 30%
• Выравнивание модуля: по центру

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

Давайте еще раз посмотрим на законченный дизайн раздела «Полароид-герой» на экранах разных размеров.

Рабочий стол

Мобильный

Это обертка!

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