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

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Создайте структуру дизайна

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

Фоновый цвет

В первой части урока мы сосредоточимся на создании дизайна. Во второй части мы применим эффекты липкости. Создайте новую страницу или откройте существующую и добавьте к ней новый раздел. Откройте настройки раздела и примените цвет фона.

• Цвет фона: rgba (53,44,43,0.17)

Интервал

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

• Верхняя набивка: 13vh
• Нижний отступ: 0 пикселей

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Выровнять высоту столбца: Да
• Ширина:
  • Рабочий стол: 80%
  • Планшет и телефон: 90%
• Максимальная ширина: 2580 пикселей

Интервал

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

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

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

Интервал

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

• Верхняя обивка:
  • Рабочий стол: 25vh
  • Планшет и телефон: 10vh
• Нижняя обивка:
  • Рабочий стол: 25vh
  • Планшет и телефон: 10vh
• Левый отступ: 5%
• Правое заполнение: 5%

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

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

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

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

Видимость

Чтобы убедиться, что это работает на экранах меньшего размера, мы скроем второй столбец на вкладке «Дополнительно» для планшетов и телефонов.

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

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

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

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

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

• Шрифт заголовка: малиновый текст
• Размер текста заголовка:
  • Рабочий стол: 6vh
  • Таблетка: 50 пикселей
  • Телефон: 40 пикселей
• Высота строки заголовка: 1,2 м

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

Видимость

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

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

Линия

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

• Цвет линии: # 35241f

Размеры

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

• Вес разделителя: 5 пикселей
• Ширина: 21%
• Высота: 5 пикселей

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

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

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

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

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

• Шрифт текста: Karla
• Размер текста: 18 пикселей
• Высота текстовой строки: 2,1 м

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

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

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

Фоновый цвет

Далее мы добавим цвет фона.

• Цвет фона: # 35241f

Размеры

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

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

Интервал

Вместе с настройками интервалов.

• Верхняя обивка:
  • Рабочий стол: 30vh
  • Планшет и телефон: 0vh
• Нижняя обивка: 30vh
• Левый отступ: 10%
• Правое заполнение: 10%

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

Загрузить изображение (только на планшете и телефоне)

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

Интервал

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

• Нижняя маржа:
  • Рабочий стол: 0px
  • Планшет и телефон: 50 пикселей

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

Видимость

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

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

Линия

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

• Цвет линии: #ffffff

Размеры

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

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

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

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

Затем добавьте текстовый модуль с некоторым содержимым H2 по вашему выбору.

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

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

• Шрифт заголовка 2: малиновый текст
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2:
  • Рабочий стол: 6vh
  • Таблетка: 50 пикселей
  • Телефон: 40 пикселей

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

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

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

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

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

• Шрифт текста: Karla
• Плотность шрифта текста: Ультра легкий
• Размер текста:
  • Рабочий стол: 30 пикселей
  • Планшет и телефон: 18 пикселей
• Высота текстовой строки: 2.2em
• Цвет текста: светлый

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

Изменить значения индекса строки Z

Ряд # 1

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

• Индекс Z: 1

Ряд # 2

Измените также z-индекс второй строки. Это значение должно быть выше, чем в первой строке.

• Индекс Z: 2

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

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

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

Столбец 1 Прикрепленные настройки

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

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

• Цвет липкого фона: #edeaea

Наклон липкого преобразования

Затем перейдите на вкладку дизайна и примените следующее значение липкого перекоса:

• Наклон липкого дна: -4deg

Столбец 2 Прикрепленные настройки

Наклон липкого преобразования

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

• Наклон липкого дна: -4deg

Текстовый модуль Sticky Transform Skew (x2)

И мы завершим дизайн и эффект, изменив нижний перекос на 4 градуса для обоих текстовых модулей в столбце 1 в закрепленном состоянии. Это позволит выровнять отрицательное значение наклона закрепленного столбца.

• Наклон липкого дна: 4 градуса

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

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

Рабочий стол

Мобильный

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

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

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