Как сохранить модули фиксированными в их контейнере-столбце с Divi

Опубликовано: 2019-10-08

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

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

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

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

Рабочий стол

контейнер колонки

Планшеты и мобильные устройства

контейнер колонки

Загрузите дизайн контейнера Sticky Column БЕСПЛАТНО

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

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

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

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

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

Подпишитесь на наш канал Youtube

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

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

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

контейнер колонки

Интервал

Откройте настройки раздела и измените верхнее и нижнее отступы для разных размеров экрана.

Верхняя прокладка: 7vw (рабочий стол), 10vw (планшет), 15vw (телефон)
Нижняя прокладка: 20vw (рабочий стол), 7vw (планшет), 10vw (телефон)

контейнер колонки

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

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

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

контейнер колонки

Размеры

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

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

контейнер колонки

Верхнее заполнение столбца 2

Затем откройте настройки столбца 2 и добавьте верхний отступ на рабочий стол.

Верхняя прокладка: 20vw (рабочий стол), 0vw (планшет и телефон)

контейнер колонки

Верхнее заполнение столбца 3

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

Верхняя прокладка: 40vw (рабочий стол), 0vw (планшет и телефон)

контейнер колонки

Верхнее заполнение столбца 4

И завершите настройки строки, добавив значение верхнего отступа в столбец 4.

Верхняя прокладка: 60vw (рабочий стол), 0vw (планшет и телефон)

контейнер колонки

Добавить CTA в столбец 1

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

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

контейнер колонки

Ссылка

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

URL ссылки на кнопку: #

контейнер колонки

Фоновый цвет

Затем измените цвет фона модуля.

Цвет фона: #ffffff

контейнер колонки

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

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

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

контейнер колонки

Настройки текста заголовка

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

Заголовок уровня заголовка: H3
Шрифт заголовка: Spectral
Цвет текста заголовка: # 000000
Размер текста заголовка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

контейнер колонки

Настройки основного текста

Наряду с настройками основного текста.

Шрифт: Fira Sans
Толщина основного шрифта: Light
Цвет основного текста: # 000000
Размер основного текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
Высота линии корпуса: 1,8 м

контейнер колонки

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

Не забудьте также стилизовать кнопку вашего модуля CTA.

Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 444eff
Ширина границы кнопки: 0 пикселей

контейнер колонки

Радиус границы кнопки: 50vw
Шрифт кнопки: Fira Sans

контейнер колонки

Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
Левое заполнение: 3vw (рабочий стол), 7vw (планшет), 13vw (телефон)
Правая прокладка: 3vw (рабочий стол), 7vw (планшет), 13vw (телефон)

контейнер колонки

Интервал

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

Верхняя обивка: 8vw
Нижняя обивка: 8vw

контейнер колонки

Граница

Также добавьте к модулю закругленные углы.

Закругленные углы: 1vw (все углы)

контейнер колонки

Коробка Тень

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

Горизонтальное положение тени блока: 10 пикселей
Сила размытия тени коробки: 50 пикселей
Цвет тени: rgba (0,0,0,0.08)

контейнер колонки

CSS-класс

Теперь, чтобы эффект прилипания прокрутки работал, нам нужно добавить несколько строк кода CSS в конце этого руководства. Готовясь к этому, мы добавим класс CSS в модуль CTA.

Класс CSS: липкий-cta

контейнер колонки

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

Загрузить изображение

Переходим к следующему и последнему модулю, который нам нужен в столбце 1, который является модулем изображения. Загрузите изображение PNG по вашему выбору.

контейнер колонки

Выравнивание

Затем измените выравнивание изображения.

Выравнивание изображения: по центру

контейнер колонки

Размеры

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

Принудительная полная ширина: Да

контейнер колонки

Интервал

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

Верхняя маржа: -5vw (планшет и телефон)
Нижнее поле: -12vw (рабочий стол), 5vw (планшет и телефон)
Левое заполнение: 3vw (рабочий стол), 10vw (планшет), 25vw (телефон)
Правая прокладка: 3vw (рабочий стол), 10vw (планшет), 25vw (телефон)

контейнер колонки

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

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

контейнер колонки

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

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

контейнер колонки

Изменить CTA-контент и цвета фона кнопок

Измените содержимое CTA вместе с цветами фона кнопок.

Модуль 2 с призывом к действию: # 89ffb4
Модуль с призывом к действию № 3: # ff89f1.
Модуль с призывом к действию №4: # ffd389.

контейнер колонки

Добавить класс CSS в модули изображений в столбцах 1, 2 и 3

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

Класс CSS: липкое изображение

контейнер колонки

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

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

Осталось только добавить код CSS. Для этого добавьте новую строку.

контейнер колонки

Добавить модуль кода с кодом CSS

Добавьте модуль кода в строку, вставьте код CSS ниже, и все готово!

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

контейнер колонки

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

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

Рабочий стол

контейнер колонки

Планшеты и мобильные устройства

контейнер колонки

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

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

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