Опция Divi Sticky

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 (Расширенные ⟹ Scroll Effects ⟹ Sticky Position).

После этого в настройках Фон появится «липкий» значок. Теперь можно независимо настроить стандартный и липкий стиль. Как только элемент станет липким, он примет свой липкий стиль.

Например, можно изменить цвет фона липкого заголовка с прозрачного на сплошной. Или уменьшить высоту закрепленного состояния меню, чтобы оно уменьшалось и занимало меньше места при прокрутке.

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

Применение липкой границы

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

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

Опция Divi Sticky доступна без ограничений

Новые параметры Divi Sticky открывают много новых возможностей для веб-сайтов на Divi. Она позволяет не только легко создавать широкий спектр липких заголовков и меню, но и творчески комбинировать липкие элементы для создания действительно интересных новых дизайнов.

Опция Divi Sticky доступна начиная с версии 4.6

Помогу в создании блога, интернет-магазина или лендинга на премиальной теме WordPress Divi. Обучу администрированию сайта. Окажу техническую поддержку.

Обращайтесь, буду рад помочь Вашему бизнесу или хобби.