26 августа вышло очередное обновление темы Divi, версия 4.6. В него введена новая революционная функция — Divi Sticky Options. Она позволяет прикреплять любой элемент к верхней или нижней части окна просмотра браузера при прокрутке страницы вверх и вниз.
Divi Sticky позволяет создавать липкие заголовки, меню, кнопки, призывы к действию и держать в поле зрения другую важную информацию при прокрутке. Но это лишь малая часть того, на что способны липкие формы Divi.
Divi Sticky Options предлагает гораздо больше, чем просто фиксированное позиционирование. Это продвинутая система, которая обеспечивает уникальное взаимодействие на основе прокрутки и настройки липкого стиля. Можно выбрать не только когда и где элементы становятся липкими, но и зависимость от направления прокрутки экрана посетителем и положения элемента на странице.
Данная система дает полный контроль над липким стилем любого элемента, что позволяет создавать новые переходы дизайна!
Примеры использования липких опций
С новыми опциями Divi можно сделать много. На демонстрационных видео видны возможности новой функции Divi Sticky.
Положение Divi Sticky
Использовать липкие параметры очень просто. При настройке любого элемента (строки, секции или модуля) надо зайти в настройки Расширенные ⟹ Scroll Effects ⟹ Sticky Position и выбрать один из доступных вариантов закрепления
Закрепление элемента вверху экрана
При этом элемент будет прикреплен к верху экрана при прокрутке вниз. Как только верхняя часть элемента попадет в верхнюю часть окна просмотра браузера, она будет оставаться в верхней части и оставаться там при прокрутке. Это отлично подходит для липких меню заголовков, как показано ниже.
Удерживание элемента внизу экрана
При прокрутке вверх элемент будет прикреплен к нижней части окна просмотра браузера. Как только нижняя часть элемента достигнет нижней части окна просмотра браузера, она будет придерживаться нижней части и оставаться там при прокрутке.
Это отлично подходит для плавающих форм подписки или призывов к действию, как показано ниже.
Прилипание сверху и снизу
Если выбрать эту опцию, то элемент прикрепляется к верхней части окна просмотра браузера при прокрутке вниз и прилипает к нижней части экрана, если прокручивать экран вверх.
Регулировка опций Divi Sticky
Вы также можете придать липким элементам свой уникальный стиль, отличный от обычного варианта. После включения «липкости» элемента он меняет свой дизайн (липкий дизайн).
Это означает, что элементы могут иметь два разных стиля: стандартный и липкий. Как только элемент становится липким, дизайн переходит от стандартного стиля к липкому и наоборот.
Применение липкой границы
Можно придать липким элементам липкую границу. За пределами липкой границы элементы больше не будут липкими. Например, в видео ниже назначен родительский раздел в качестве липкой границы для плавающего меню боковой панели.
Это означает, что оно станет липким, когда попадет в верхнюю часть области просмотра браузера, но перестанет быть липким, когда выйдет из родительского раздела. Это липкое меню относится только к элементам в этом разделе. За пределами этого раздела, оно становится обычным.
Опция Divi Sticky доступна без ограничений
Новые параметры Divi Sticky открывают много новых возможностей для веб-сайтов на Divi. Она позволяет не только легко создавать широкий спектр липких заголовков и меню, но и творчески комбинировать липкие элементы для создания действительно интересных новых дизайнов.
Опция Divi Sticky доступна начиная с версии 4.6
