Как комбинировать перекрытия с липкими опциями Divi для создания простых переходов

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

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

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

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

Рабочий стол

Мобильный

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

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

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

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

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

СКАЧАТЬ

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

1. Воссоздать структуру дизайна

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

Интервал

В первой части этого урока мы сосредоточимся на воссоздании структуры дизайна внутри Divi. Затем, во второй части, мы рассмотрим все важные параметры, чтобы добиться эффекта, который вы можете заметить при предварительном просмотре этого сообщения. Начните с добавления нового раздела на страницу, над которой вы работаете. Откройте настройки раздела, перейдите на вкладку дизайна и добавьте нижний отступ.

• Нижняя обивка: 100vh

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

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

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

Размеры

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

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

Индекс Z

Присвойте этой строке также индекс z.

• Индекс Z: 1

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

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

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

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

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

• Размер фонового изображения: обложка

Размеры

Затем измените ширину модуля.

• Ширина: 100%

Интервал

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

• Верхняя обивка: 40vh
• Нижняя обивка: 40vh

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

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

Переходим к следующему модулю, который представляет собой текстовый модуль, содержащий некоторое содержимое H2 по вашему выбору.

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

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

• Шрифт заголовка 2: Montserrat
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2:
  • Рабочий стол: 10vw
  • Таблетка: 14vw
  • Телефон: 15vw
• Интервал между буквами заголовка 2: -0,5vw

Размеры

Убедитесь, что модуль тоже на «100%».

• Ширина: 100%

Позиция

И переместите модуль в расширенную вкладку.

• Позиция: Абсолютная
• Расположение: Центр

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

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

Переходим к следующему ряду. Используйте следующую структуру столбцов:

Размеры

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

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

Индекс Z

Присвойте этой строке также индекс z.

• Индекс Z: 2

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

Завершите настройки строки, открыв настройки первого столбца и назначив отступы слева и справа.

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

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

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

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

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

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

• Шрифт заголовка 3: Montserrat
• Стиль шрифта заголовка 3: подчеркивание
• Цвет подчеркивания заголовка 3: #ffffff
• Стиль подчеркивания заголовка 3: сплошной
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3:
  • Рабочий стол: 4vw
  • Планшет и телефон: 10vw
• Интервал между буквами заголовка 3: -3px

Интервал

Добавьте правый отступ на экранах меньшего размера.

• Правое заполнение: 20% (только планшет и телефон)

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

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

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

Фоновый цвет

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

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

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

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

• Шрифт текста: Playfair Display
• Стиль шрифта текста: курсив
• Размер текста:
  • Рабочий стол: 1.6vw
  • Таблетка: 3vw
  • Телефон: 4vw
• Высота текстовой строки: 1,5 м

Интервал

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

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

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки:
  • Рабочий стол: 1.2vw
  • Таблетка: 2,5 ВВт
  • Телефон: 3.5vw
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Montserrat

• Стиль шрифта кнопки: подчеркивание
• Цвет подчеркивания кнопки: # 000000
• Стиль подчеркивания кнопок: сплошной

Интервал

Также добавьте несколько пользовательских значений заполнения.

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

Позиция

И переместите модуль в расширенную вкладку.

• Позиция: Абсолютная
• Расположение: внизу справа

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

Модуль изображения в строке №1

Прикрепленные настройки

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

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

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

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

• Ширина липкости: 80%

Липкий интервал

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

• Липкая верхняя обивка: 50vh
• Липкая нижняя обивка: 50vh

Липкий градиентный фон

Мы также применим липкий градиентный фон к нашему модулю.

• Цвет 1: # 00336b
• Цвет 2: rgba (41,196,169,0)
• Тип градиента: линейный
• Направление градиента: 90 градусов
• Поместите градиент над фоновым изображением: Да

Переход

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

• Продолжительность перехода: 1500 мс

Столбец 2 в строке №2

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

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

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

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

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

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

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

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

Затем измените цвет текста в липком состоянии.

• Цвет закрепленного текста: #ffffff

Переход

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

• Продолжительность перехода: 1000 мс

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

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

Рабочий стол

Мобильный

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

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

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