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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Общие шаги

Добавить раздел # 1

Интервал

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

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

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

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

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

Размеры

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

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

Интервал

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

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

Индекс Z

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

• Индекс Z: 1

Столбец переполнен

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

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

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

Оставьте поле изображения пустым

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

Фоновая картинка

И вместо этого используйте фоновое изображение по вашему выбору.

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру

Интервал

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

• Верхняя обивка:
  • Рабочий стол: 300 пикселей
  • Планшет и телефон: 150 пикселей
• Нижняя обивка:
  • Рабочий стол: 300 пикселей
  • Планшет и телефон: 150 пикселей

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

Интервал

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

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

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

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

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

Индекс Z

Добавьте также индекс z для этой строки.

• Индекс Z: 2

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

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

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

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

Вместе с кнопкой ссылки.

Фоновый цвет

Затем добавьте белый цвет фона.

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

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

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

• Выравнивание текста: по левому краю
• Цвет текста: темный

Настройки текста заголовка

Также стилизуйте текст заголовка.

• Шрифт заголовка: Playfair Display
• Стиль шрифта заголовка: курсив
• Размер текста заголовка
  • Рабочий стол: 45 пикселей
  • Таблетка: 40 пикселей
  • Телефон: 35px
• Интервал между заглавными буквами: 1 пиксель

Настройки основного текста

А также основной текст.

• Шрифт основного текста: Karla
• Высота линии тела: 2em

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 18 пикселей
• Цвет текста кнопки: # 000000
• Цвет градиента 1: #ffffff
• Цвет градиента 2: # ffdc91
• Тип градиента: линейный
• Стартовая позиция: 50%
• Конечная позиция: 50%

• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Karla
• Стиль шрифта кнопок: прописные
• Показать кнопку: Да

• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет
• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей
• Левый отступ: 15%
• Правое заполнение: 15%

Размеры

Мы также изменяем настройки размера для разных размеров экрана.

• Ширина:
  • ПК: 65%
  • Таблетка: 80%
  • Телефон: 100%
• Выравнивание модуля: по центру

Интервал

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

• Верхнее поле:
  • Рабочий стол: -150 пикселей
  • Таблетка: -50 пикселей
  • Телефон: 0px
• Нижнее поле: 50 пикселей
• Верхний отступ: 150 пикселей
• Нижний отступ: 150 пикселей

Коробка Тень

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

• Коробка Shadwo Blur Strength: 30 пикселей
• Цвет тени: rgba (0,0,0,0.11)

2. Примените эффект липкости к строке

Открытый ряд в секции №1

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

Применить липкий эффект

Важно убедиться, что нижний предел липкости установлен на раздел. Начальная и конечная точки нашей строки такие же, как и у раздела, что гарантирует, что строка на самом деле не становится липкой, но применяются липкие стили. Липкое верхнее смещение определяет, в какой момент начинается переход. Если, например, это значение было равно нулю, это означало бы, что верхняя часть браузера должна коснуться верхней части строки, чтобы начать переход. Установив липкое верхнее смещение на «300 пикселей», мы создадим этот переход раньше.

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

Убедитесь, что верхнее смещение равно над первой секцией

Поскольку мы установили липкое верхнее смещение на «300 пикселей», нам нужно пространство вверху нашей страницы, чтобы это произошло. Если вы используете этот дизайн где-то на полпути к странице, вам не нужно беспокоиться об этом шаге. Однако, если вы используете этот подход в верхней части страницы, вам придется либо изменить липкое верхнее смещение, либо добавить достаточно места вверху. Мы добавим верхнее поле к нашему первому разделу, чтобы создать это пространство.

• Верхнее поле: 400 пикселей

3. Примените эффект Кена Берна к модулю изображения

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

Пример # 1

Настройки закрепленной строки

Коробка Тень

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

• Вертикальное положение тени блока: 0 пикселей
• Сила распространения тени коробки: 0 пикселей
• Цвет тени: rgba (0,0,0,0)

• Прикрепленное вертикальное положение: 100 пикселей
• Цвет липкой тени: # ffdc91

Переход

Также включите плавный переход в расширенную вкладку.

• Продолжительность перехода: 500 мс
• Кривая скорости перехода: легкость

Настройки модуля Sticky Image

Масштаб преобразования

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

• Оба: 100%

• Липкие оба: 130%

Переход

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

• Продолжительность перехода: 1200 мс
• Кривая скорости перехода: легкость

Пример # 2

Настройки закрепленной строки

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

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

• Право: 20%

• Липкое право: 0%

Переход

Измените также параметры перехода строки.

• Продолжительность перехода: 500 мс
• Кривая скорости перехода: легкость

Настройки модуля Sticky Image

Фильтры

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

• Насыщенность: 0%
• Яркость: 50%

• Липкая насыщенность: 100%
• Липкая яркость: 100%

Переход

Завершите настройки модуля и этого руководства, изменив настройки перехода следующим образом:

• Продолжительность перехода: 500 мс
• Кривая скорости перехода: легкость

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

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

Рабочий стол

Мобильный

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

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

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