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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

Создать структуру элемента

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

Фоновый цвет

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

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

Добавить ряд

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

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

Размеры

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

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

Цвет фона столбца 1

Затем откройте настройки столбца 1 и добавьте цвет фона.

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

Столбец 1 Интервал

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

• Верхняя обивка:
  • Таблетка: 20 пикселей
  • Телефон: 20 пикселей
• Нижняя обивка:
  • Таблетка: 20 пикселей
  • Телефон: 20 пикселей
• Левый отступ: 3%
• Правое заполнение: 3%

Столбец 1 Индекс Z

И увеличьте z-индекс столбца на расширенной вкладке.

• Индекс Z: 12

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

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

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

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

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

• Шрифт текста: Playfair Display
• Толщина шрифта текста: полужирный
• Стиль шрифта текста: курсив
• Цвет текста: #bfbfbf
• Размер текста:
  • Рабочий стол: 2vw
  • Таблетка: 5vw
  • Телефон: 8vw
• Высота текстовой строки: 1em

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

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

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

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

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

• Шрифт заголовка 3: Playfair Display
• Толщина шрифта заголовка 3: полужирный
• Цвет текста заголовка 3: # 000000
• Размер текста заголовка 3:
  • Рабочий стол: 3vw
  • Таблетка: 10vw
  • Телефон: 12vw

Интервал

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

• Верхняя маржа: 2vh
• Нижнее поле: 2vh

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

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

• Оба: 300%

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

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

• Внизу: 30%

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

Видимость

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

• Показать разделитель: Да

Линия

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

• Цвет линии: # 000000
• Стиль линии: сплошной
• Позиция линии: вверху

Размеры

Измените также настройки размера модуля.

• Вес разделителя: 4 пикселя
• Высота разделителя: 4 пикселя

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

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

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

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

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

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

Интервал

И чтобы разрешить отображение фонового изображения, мы изменим настройки интервала следующим образом:

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

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

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

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

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

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

• Шрифт текста: Кабина
• Цвет текста: # 000000
• Размер текста:
  • Рабочий стол: 1.2vw
  • Таблетка: 2.3vw
  • Телефон: 3.4vw
• Высота текстовой строки: 1,6 мкм

Интервал

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

• Левый отступ:
  • Планшет и телефон: 5%
• Правое заполнение: 5%

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

Сделать столбец № 1 липким

Теперь, когда все элементы на месте, мы можем приступить к применению закрепленных настроек. Откройте настройки столбца 1 и используйте следующие адаптивные липкие настройки на вкладке «Дополнительно»:

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

Текстовый модуль №1 в столбце №1: закрепленные настройки

Рост

Теперь, когда столбец 1 стал липким, мы можем начать применять некоторые липкие настройки к элементам внутри этого столбца. Начнем с высоты первого текстового модуля.

• Высота: 0 пикселей
• Высота липкости: Авто

Непрозрачность

Мы также изменяем непрозрачность.

• Непрозрачность: 0%
• Клейкая непрозрачность: 100%

Текстовый модуль №2 в столбце №1: закрепленные настройки

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

Затем мы откроем второй текстовый модуль в столбце 1. Верните значения масштаба преобразования к «100%» в закрепленном состоянии.

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

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

Измените также настройки перевода липкого преобразования.

• Липкий низ: 0%

Переход

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

• Переход: 1000 мс

Разделительный модуль: закрепленные настройки

Максимальная ширина

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

• Максимальная ширина: 0 пикселей
• Максимальная ширина липкой ленты: 120 пикселей

Клонировать строку дважды

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

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

Убедитесь, что вы изменили весь контент и изображения, и все готово!

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

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

Рабочий стол

Мобильный

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

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

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