Создание показа встроенной прокрутки с помощью Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет Inline Scroll Reveals Layout БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Создать новую страницу с помощью домашней страницы DJ Layout Pack

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

В этом руководстве мы будем использовать одну из макетов DJ. Начните с создания новой страницы, присвоив ей заголовок и переключившись на Visual Builder.

Загрузить домашнюю страницу DJ

Затем загрузите макет домашней страницы DJ на свою страницу.

Добавить более высокое значение индекса Z в каждый раздел на странице

Добавить более высокий индекс Z в раздел героя

Мы собираемся сделать один конкретный столбец фиксированным и позволить ему отображаться везде, где мы хотим. Верно и обратное; мы хотим спрятать его там, где мы не хотим, чтобы он появлялся. Для этого мы собираемся присвоить каждому разделу на странице (кроме того, в котором расположен столбец, а это раздел №2 на странице) более высокое значение индекса z. Начните с открытия раздела героев и увеличьте индекс z в настройках видимости.

• Индекс Z: 2

Копировать индекс Z

После того, как вы добавили индекс z, вы можете его скопировать.

Вставить в другие разделы на странице, кроме раздела №2

И вставьте его во все остальные разделы на странице, за исключением раздела № 2 (раздела, содержащего столбец, который мы преобразуем во встроенную прокрутку).

Изменить раздел № 2

Поместите содержимое столбца в отдельные строки

Изменить структуру столбца строки

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

Повторяющаяся строка

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

Удалить модули в строках

Удалите текстовый и кнопочный модули в первой строке и аудиомодули во второй строке.

Измените строку №1 в разделе №2

Удалите некоторые аудиомодули (чтобы они соответствовали экранам меньшего размера)

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

Добавить нижнее поле в строку

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

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

Открыть настройки столбца

Пришло время преобразовать столбец во встроенную прокрутку! Откройте настройки столбца.

Hover Box Shadow

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

• Сила размытия тени коробки: 150 пикселей
• Цвет тени: rgba (0,0,0,0.55)

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

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

• Внизу: 110%
• Правильно: 110%

Основной элемент по умолчанию

Чтобы сделать столбец фиксированным, мы собираемся добавить несколько строк кода CSS к основному элементу столбца.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

Главный элемент при наведении

Убедитесь, что вы добавили строку CSS с фиксированной позицией к основному элементу при наведении курсора. Это предотвратит мерцание колонки.

position: fixed;

Индекс Z по умолчанию

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

• Индекс Z: 0

Индекс наведения Z

Однако при наведении курсора мы хотим, чтобы столбец перекрывал все содержимое страницы. Как только кто-то отпустит столбец, он вернется на свое место за всем содержимым страницы. Соответственно измените индекс z при наведении:

• Индекс Z: 10

Измените строку №2 в разделе №2

Добавить верхний отступ к столбцу

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

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

Добавить настраиваемое нижнее поле к разделам на всей странице

Найдите раздел

Открыть настройки раздела

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

Добавить нижнюю маржу

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

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

Найдите раздел

Открыть настройки раздела

Далее откройте следующий раздел:

Добавить нижнюю маржу

И добавьте сюда нижнее поле.

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

Удалить лишнюю обивку секции

Удалите нижнюю прокладку секции №2.

Теперь единственное, что нам осталось сделать, это оптимизировать то, как наш дизайн соответствует отображению встроенной прокрутки. Откройте второй раздел на странице и удалите нижний отступ.

• Внизу: 0 пикселей

Найдите раздел

Открыть настройки раздела

Далее откройте следующие настройки раздела:

Удалить нижнюю прокладку и добавить верхнюю прокладку

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

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

Найдите раздел

Открыть настройки раздела

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

Удалить верхнюю обивку

Удалите верхнюю обивку, и все готово!

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

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

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

Рабочий стол

Мобильный

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

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

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