При отображении нескольких призывов к действию на вашей странице может быть полезно создать эффект интерактивной прокрутки, объединяющий различные элементы. Одно из решений - преобразовать модули в фиксированные элементы, пока они перемещаются в своем контейнере столбца. В сегодняшнем уроке мы покажем вам, как создать красивый дизайн, использующий эту технику. Вы также сможете бесплатно скачать файл JSON!
Пойдем.
обследование
Прежде чем мы углубимся в руководство, давайте в последний раз посмотрим, как он работает с экранами разных размеров.
Приступим к воссозданию!
Добавить новый раздел
Начните с добавления нового обычного раздела на страницу, над которой вы работаете.
расстояние
Откройте настройки раздела и измените нижнее и верхнее поля для разных размеров экрана.
- Верх обивки: 7vw (рабочий стол), 10vw (планшет), 15vw (телефон)
- Обивка внизу: 20vw (рабочий стол), 7vw (планшет), 10vw (телефон)
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
калибровка
Не добавляя еще никаких модулей, откройте настройки строки и дайте ей занять всю ширину раздела. он также очень важно активируйте опцию «Выровнять высоту столбцов». Таким образом вы создадите пустое пространство в столбцах, которое позволит стационарным модулям свободно перемещаться при прокрутке страницы.
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
- Ширина: 100%
- Максимальная ширина: 100%
Колонка 2 Upper Padding
Затем откройте настройки для столбца 2 и добавьте верхний заполнитель на рабочий стол.
- Верхняя обивка: 20vw (рабочий стол), 0vw (планшет и телефон)
Колонка 3 Upper Padding
Также добавьте пользовательское значение верхней заливки в третий столбец.
- Лучший вариант заполнения: 40vw (рабочий стол), 0vw (планшет и телефон)
Колонка 4 Upper Padding
И завершите параметры строки, также добавив более высокое значение заполнения в столбец 4.
- Верхняя обивка: 60vw (рабочий стол), 0vw (планшет и телефон)
Добавить CTA в столбец 1
Добавить контент
Пришло время начать добавлять модули! Первый модуль, который нам нужен в столбце 1, — это модуль CTA (призыв к действию). Вставлять содержание де Votre Choix.
Залог
Также добавьте ссылку на кнопку. Это позволит отображать кнопку в дизайне.
- URL ссылки кнопки: #
Фоновый цвет
Измените цвет фона модуля впоследствии.
- Цвет фона: #ffffff
Настройки текста
Перейдите на вкладку Дизайн и измените общие настройки текста.
- Выравнивание текста: центр
- Цвет текста: темный
Настройки текста заголовка
Также измените настройки текста заголовка.
- Название Название Уровень: H3
- Название текста: Спектральный
- Цвет текста заголовка: # 000000
- Размер текста заголовка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)
Настройки основного текста
С параметрами основного текста.
- Body Font: Fira Sans
- Вес шрифта: легкий
- Основной текст: # 000000
- Размер основного текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Рост тела: 1.8em
Настройки кнопок
Не забудьте также стилизовать кнопку модуля CTA.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: #444eff
- Ширина границы кнопки: 0px
- Радиус границы кнопки: 50vw
- Шрифт кнопок: Fira Sans
- Верхний отступ: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Обивка внизу: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Левый отступ: 3vw (рабочий стол), 7vw (планшет), 13vw (телефон)
- Обивка справа: 3vw (рабочий стол), 7vw (планшет), 13vw (телефон)
расстояние
Затем перейдите к настройкам интервалов и добавьте собственные внутренние и нижние поля.
- Верхняя обивка: 8vw
- Нижняя обивка: 8vw
Граница
Также добавьте закругленные углы к модулю.
- Круглые углы: 1vw (все углы)
Shadow box
Завершите дизайн модуля, добавив тонкую тень от рамки.
- Тень коробки Горизонтальное положение: 10px
- Box Shadow Blur Force: 50px
- Цвет тени: rgba (0,0,0,0,08)
Класс CSS
Теперь, чтобы эффект липкой прокрутки работал, нам нужно добавить несколько строк кода CSS в конце этого руководства. В качестве подготовки мы добавим класс CSS в модуль CTA.
- Класс CSS: sticky-cta
Добавьте модуль изображения в столбец 1
Загрузить изображение
Давайте перейдем к следующему и последнему моду, который нам нужен в столбце 1, который является модом изображения. Загрузите изображение PNG по вашему выбору.
Alignement
Затем измените выравнивание изображения.
- Выравнивание изображения: по центру
калибровка
Убедитесь, что на модуль наложена полная ширина.
- Принудительная полная ширина: да
расстояние
Завершите настройки модуля, перейдя в настройки интервала и добавив собственные значения интервала для разных размеров экрана.
- Верхнее поле: -5vw (планшет и телефон)
- Нижнее поле: -12vw (рабочий стол), 5vw (планшет и телефон)
- Левый отступ: 3vw (рабочий стол), 10vw (планшет), 25vw (телефон)
- Обивка справа: 3vw (рабочий стол), 10vw (планшет), 25vw (телефон)
Клонируйте два модуля три раза и поместите оставшиеся столбцы
Заполнив оба модуля в столбце 1, вы можете продублировать их три раза и поместить дубликаты в оставшиеся столбцы строки.
Изменить изображения
Не забудьте изменить изображение в каждом дублирующем модуле изображения.
Измените содержимое CTA и цвета фона кнопок
Также измените содержание Призыв к действию с цветом фона кнопки.
- Модуль CTA #2: #89ffb4
- Модуль CTA #3: #ff89f1
- Модуль CTA #4: #ffd389
Добавьте класс CSS к модулям изображений в столбцах 1, 2 и 3
Теперь, чтобы убедиться, что эффект прилипания работает и на изображениях, нам нужно добавить класс CSS к модулям изображений в столбцах 1, 2 и 3.
- Класс CSS: липкое изображение
Добавьте строку 2
Структура столбца
Осталось только добавить код CSS. Для этого добавляем новую строку.
Добавьте модуль кода с кодом CSS
Добавьте модуль кода в строку, вставьте код CSS ниже, и все готово!
<style>@media only screenand (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! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.
