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

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

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

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

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

Рабочий стол

Мобильный

Скачать макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Создайте дизайн героя

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

Фоновый цвет

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

• Цвет фона: # 111111

Интервал

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

• Нижняя обивка: 120vh

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

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

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

Размеры

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

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

Интервал

Затем добавьте отзывчивое верхнее поле.

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

Индекс Z

И чтобы убедиться, что эта строка остается ниже второй строки, которую мы добавим в этот раздел, позже мы будем использовать z-индекс 10 на вкладке «Дополнительно».

• Индекс Z: 10

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

После завершения общих настроек строки откройте каждый столбец по отдельности.

Основной элемент CSS

В каждом из столбцов примените следующие строки кода CSS к основному элементу на телефоне:

Только телефон:

width: 50% !important;
margin: 0 !important;

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

Затем откройте настройки столбца 2.

Индекс Z

Увеличьте индекс Z до 12. Это поместит этот столбец над третьим столбцом.

• Индекс Z: 12

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

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

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

Интервал

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

• Нижняя маржа:
  • Планшет и телефон: 10 пикселей
• Правое поле:
  • Планшет и телефон: 2%

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

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

Изменить изображения

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

Изменить интервал между изображениями в модулях №2 и №4

Затем откройте настройки модулей изображения в столбцах 2 и 4 и примените к ним следующие значения интервала:

• Нижняя маржа:
  • Планшет и телефон: 10 пикселей
• Левое поле:
  • Планшет и телефон: 2%
• Правое поле: /

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

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

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

Градиентный фон

Откройте настройки строки и примените следующий градиентный фон:

• Цвет 1: # 111111
• Цвет 2: rgba (255,255,255,0)

Размеры

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

• Ширина: 100%
• Максимальная ширина: 2580 пикселей

Интервал

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

• Верхняя обивка: 20vh
• Нижняя обивка: 20vh

Позиция

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

• Позиция: Абсолютная
• Расположение: Top Center
• Индекс Z: 12

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

Добавить контент H1

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

Настройки текста H1

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

• Шрифт заголовка: Kumbh Sans
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: прописные.
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: #ffdbaa
• Размер текста заголовка:
  • Рабочий стол: 120 пикселей
  • Таблетка: 60 ​​пикселей
  • Телефон: 40 пикселей
• Интервал между буквами заголовка
  • Рабочий стол: -3px
  • Планшет и телефон: 0 пикселей
• Тень текста заголовка:
  • Выберите: Третий вариант
  • Цвет тени текста заголовка: rgba (0,0,0,0.4)

Размеры

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

• Максимальная ширина: 900 пикселей
• Выравнивание модуля: по центру

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

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

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

Выравнивание кнопок

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

• Расположение кнопок: по центру

Настройки кнопок

Затем стилизуйте кнопку.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки:
  • Рабочий стол: 20 пикселей
  • Таблетка: 16 пикселей
  • Телефон: 14px
• Размер текста кнопки: # 111111
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 100 пикселей

• Шрифт кнопки: Kumbh Sans
• Толщина шрифта кнопок: полужирный

Интервал

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

• Верхняя обивка:
  • Рабочий стол и планшет: 20 пикселей
  • Телефон: 15px
• Нижняя обивка:
  • Рабочий стол и планшет: 20 пикселей
  • Телефон: 15px
• Левый отступ:
  • Рабочий стол и планшет: 50 пикселей
  • Телефон: 40 пикселей
• Правый отступ:
  • Рабочий стол и планшет: 50 пикселей
  • Телефон: 40 пикселей

2. Применить закрепленные настройки

Поверните строку №1 липкой

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

• Липкая позиция: придерживаться верха
• Нижний предел липкости: раздел
• Смещение от окружающих липких элементов: Да
• Стандартные стили перехода и закрепленные стили: Да

Липкая непрозрачность

Затем измените прозрачность в настройках фильтров.

• По умолчанию: 20%
• Липкий: 100%

Модуль изображения №1 "Прикрепленные" настройки

Интервал

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

• Важная верхняя маржа: -20%
• Липкая правая маржа: -20%

Переход

Также увеличьте продолжительность перехода.

• Продолжительность перехода: 700 мс

Модуль изображения №2 Липкий интервал

Интервал

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

• Важная верхняя маржа: 20%
• Липкая левая маржа: -30%

Переход

Здесь также увеличьте продолжительность перехода.

• Продолжительность перехода: 1000 мс

Модуль изображения № 3 Sticky Spacing

Интервал

Затем у нас есть модуль изображения в столбце 3. Используйте следующие значения липких интервалов:

• Важная верхняя маржа: -10%
• Прилипающая левая маржа: -25%
• Липкая правая маржа: -25%

Переход

Соответственно измените продолжительность перехода:

• Продолжительность перехода: 700 мс

Модуль изображения №4 Sticky Spacing

Интервал

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

• Важная верхняя маржа: -20%
• Липкая левая маржа: -30%

Переход

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

• Продолжительность перехода: 1000 мс

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

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

Рабочий стол

Мобильный

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

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.