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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Создайте структуру элемента

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

Видимость

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

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

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

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

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

Размеры

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

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

Интервал

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

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

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

Интервал

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

• Верхняя обивка:
  • Рабочий стол: 200 пикселей
  • Таблетка: 100 пикселей
  • Телефон: 80 пикселей
• Нижняя обивка:
  • Рабочий стол: 200 пикселей
  • Таблетка: 100 пикселей
  • Телефон: 80 пикселей

Индекс Z

Увеличьте также z-индекс этого столбца. Позже в руководстве мы создадим горизонтальное перекрытие между столбцами 1 и 2. Мы увеличиваем z-индекс, чтобы модули столбца 1 оставались над модулями столбца 2.

• Индекс Z: 11

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

Фоновый цвет

Затем мы добавим цвет фона в столбец 2.

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

Интервал

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

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

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

Интервал

И последнее, но не менее важное: мы также добавим несколько пользовательских значений заполнения в столбец 3.

• Верхняя обивка:
  • Рабочий стол: 200 пикселей
  • Таблетка: 100 пикселей
  • Телефон: 50 пикселей
• Нижняя обивка:
  • Рабочий стол: 200 пикселей
  • Таблетка: 100 пикселей
  • Телефон: 50 пикселей
• Левый отступ: 8%
• Правое заполнение: 8%

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

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

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

Фоновый цвет

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

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

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

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

• Шрифт текста: Монтсеррат
• Цвет текста: #ffffff
• Размер текста: 100 пикселей
• Высота текстовой строки: 1em
• Выравнивание текста: по центру

Размеры

Затем измените ширину.

• Ширина: 150 пикселей

Интервал

Затем добавьте настраиваемый отступ сверху и снизу.

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

Позиция

Также переставьте модуль.

• Позиция: Абсолютная
• Расположение: внизу справа
• Горизонтальное смещение: -5%

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

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

Переходим ко второму столбцу. Там мы добавим текстовый модуль с копией H3 и H4.

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

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

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

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

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

• Шрифт заголовка 3: Playfair Display
• Выравнивание текста заголовка 3: по центру
• Размер текста заголовка 3:
  • Рабочий стол: 90 пикселей
  • Таблетка: 70 пикселей
  • Телефон: 60 пикселей

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

Также стилизуйте текст H4.

• Шрифт заголовка 4: Montserrat
• Толщина шрифта заголовка 4: светлый

Размеры

Затем перейдите к настройкам размеров и примените ширину «100%». Это поможет на следующем шаге - перемещении модуля.

• Ширина: 100%

Позиция

Завершите настройки модуля, перейдя на вкладку «Дополнительно» и изменив настройки положения следующим образом:

• Позиция: Абсолютная
• Расположение: внизу слева
• Вертикальное смещение: 20 пикселей

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

Добавить содержание H5 и абзаца

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

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

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

• Шрифт текста: Монтсеррат

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

Также стилизуйте текст H5.

• Шрифт заголовка 5: Montserrat
• Толщина шрифта заголовка 5: полужирный
• Размер текста заголовка 5:
  • Рабочий стол и планшет: 23 пикселя
  • Телефон: 18px

2. Ключевые изменения для создания эффекта

Раздел

Удалить заполнение раздела

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

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

Ряд

Превратить строку в липкую

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

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

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

Пришло время применить к нашим элементам несколько липких стилей! Начните с цвета фона строки.

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

Переход строки

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

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

Цвет фона липкого столбца 2

Затем мы изменим цвет фона закрепленного столбца 2.

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

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

Липкий цвет фона

Мы также изменим цвет фона текстового модуля в столбце 1.

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

Цвет липкого текста

Наряду с липким цветом текста.

• Цвет текста: # 0a0a0a

Липкий размер

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

• Ширина: 105%

Переход

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

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

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

Цвет липкого текста

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

• Цвет текста: светлый

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

Цвет липкого текста

То же самое и с текстовым модулем в столбце 3.

• Цвет текста: светлый

3. Раздел клонирования для повторного использования

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

Изменить все копии

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

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

И последнее, но не менее важное: мы добавим верхнее поле к первому разделу и нижнее поле к последнему разделу. Это поможет нам предотвратить немедленный переход до того, как люди начнут прокрутку. Вот и все!

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

• Нижнее поле: 200 пикселей

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

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

Рабочий стол

Мобильный

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

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

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