Как сделать любой элемент страницы Divi липким

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

В этом уроке я покажу вам простой способ сделать любой элемент на вашей странице липким с помощью плагина Sticky Menu (или Anything!) В Scroll. Все, что нужно, - это несколько минут, чтобы настроить параметры плагина. Затем все, что вам нужно сделать, это добавить собственный CSS ID к вашему элементу. Это так просто.

Давайте займемся этим!

Что вам понадобится для этого урока

Для этого урока вам понадобится следующее:

• Тема Divi
• Липкое меню (или что угодно!) В плагине Scroll
• Макет страницы блога бухгалтера (доступен в Divi Builder)

Как сделать любой элемент страницы Divi липким

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

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

После того, как у вас будет установлен и активирован плагин Sticky Menu (или Anything!) On Scroll в вашей теме Divi, перейдите на панель управления WordPress и перейдите в Settings> Sticky Menu (или Anything!).

На вкладке "Основные настройки" обновите параметры следующим образом:

Во-первых, вам нужно будет добавить уникальный идентификатор для вашего липкого элемента. Это может быть идентификатор CSS или класс. Позже мы добавим этот идентификатор к нашему элементу в Divi. Чтобы упростить запоминание, я добавлю CSS ID «#sticky».

Прикрепленный элемент: # липкий

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

Расстояние между верхней частью страницы и липким элементом: 54 пикселя

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

Не приклеивать элемент, если размер экрана меньше: 980 пикселей

Сохраните свои настройки, затем перейдите на вкладку Advanced Settings и обновите следующее:

Для параметра z-index мы хотим, чтобы наш элемент располагался поверх всех других элементов на странице, особенно если мы планируем, чтобы наш элемент перекрывал другие элементы при прокрутке. Чтобы в этом убедиться, задайте для z-index значение 99998.

Z-индекс: 99998

Чтобы дать вам представление о том, как элементы упорядочены в Divi, разделы имеют z-index 2, столбцы имеют z-index 9, а заголовок / панель навигации имеет z-index 99999. Итак, в основном мы чтобы наш липкий элемент был на 1 число ниже, чем z-index для навигации по заголовку. Это гарантирует, что липкий элемент находится над всем остальным на странице, кроме навигации. Это пригодится всякий раз, когда вы захотите остановить свой элемент и подтолкнуть его вверх по странице, чтобы липкий элемент не сидел поверх навигационной панели при прокрутке (выглядит неаккуратно и сломано).

Затем мы можем добавить идентификатор элемента «push up». Вы можете думать об этом как о стопоре для нашего липкого элемента. Обычно это элемент нижнего колонтитула. По сути, это идентифицирует элемент, который остановит липкий элемент при прокрутке страницы вниз, позволяя подтолкнуть липкий элемент вверх вместе с остальной частью страницы. В этом примере я собираюсь установить идентификатор с идентификатором CSS «#stop».

Элемент отжимания: # стоп

Сохранить настройки.

Теперь у нас есть сила, необходимая для создания липкого элемента!

Делаем элемент страницы Divi липким

Чтобы показать вам, как сделать элемент Divi липким, я собираюсь использовать страницу блога бухгалтера Divi из пакета макетов бухгалтера. Для начала создайте новую страницу, дайте странице название и разверните Visual Builder. Затем выберите вариант «Выбрать готовый макет». Во всплывающем окне загрузки из библиотеки выберите Пакет макетов бухгалтера и выберите страницу блога.

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

Как сделать столбец липким

Однако на этом этапе нам нужно решить, какой конкретный элемент мы хотим сделать липким. Мы могли бы просто сделать модуль «Параметры электронной почты» прикрепленным, но это не учитывало бы модуль «Отслеживание в социальных сетях» непосредственно под формой, который мы также хотим сделать «липким». И мы можем дать обоим этим модулям один и тот же идентификатор, потому что они оба станут залипшими в одной и той же позиции, что приведет к перекрытию. Лучший способ сделать это - сделать липким весь столбец (столбец 2).

Чтобы сделать столбец 2 прикрепленным, откройте настройки строки, содержащей столбец, на который мы хотим настроить таргетинг. Затем на вкладке «Дополнительно» добавьте «липкий» идентификатор CSS. Это соответствует уникальному идентификатору прикрепленного элемента, который мы добавили в настройках нашего плагина.

CSS ID: липкий

(ПРИМЕЧАНИЕ. Не помещайте здесь символ хэштега (или фунта) перед идентификатором. Также убедитесь, что вы добавили его к идентификатору CSS, а не к классу CSS)

Сохраните настройки и просмотрите живую версию страницы. Если вы прокрутите вниз, вы заметите, что столбец 2 (с обоими модулями) станет липким, когда они станут 54 пикселя от верха окна и останутся в этом положении, пока вы продолжаете прокрутку.

Остановка липкого элемента в секции

Как видите, элемент продолжает оставаться липким, так что он перекрывает содержимое других разделов ниже. Чтобы этого не происходило, мы можем использовать наш идентификатор «push up» (#stop), который мы добавили в настройках плагина.

Чтобы остановить липкий элемент в разделе ниже, нам нужно открыть настройки раздела и добавить CSS ID «stop».

CSS ID: стоп

Теперь просмотрите живую версию страницы. Обратите внимание, как липкий элемент останавливается в указанном вами разделе.

Довольно круто, правда?

Как сделать модуль липким

Чтобы сделать один модуль «липким», вам нужно будет внести изменения в Divi, чтобы убедиться, что ваш элемент имеет правильный z-index, чтобы он располагался поверх других элементов на всей странице при прокрутке. Как я упоминал ранее, Divi присваивает всем разделам z-index, равный 2. И плагин применяет z-index 99998 к липкому элементу. Но поскольку модуль не может быть упорядочен (или проиндексирован) над его родительским элементом (разделом), модуль все равно будет располагаться позади других модулей на странице. Чтобы исправить это, нам нужно убедиться и вручную присвоить секции, в которой находится прикрепленный модуль, z-index 99998.

Чтобы проиллюстрировать это, я собираюсь использовать тот же макет страницы блога бухгалтеров, который мы использовали ранее. Прежде чем мы добавим наш CSS ID в модуль, сначала нам нужно извлечь CSS ID (липкий), который мы установили для столбца 2. А затем вынуть CSS ID (стоп), который мы установили для раздела под ним. После этого откройте настройки модуля Social Media Follow и добавьте CSS ID «sticky» в модуль.

Если вы просматриваете живую страницу, вы заметите, что липкий элемент скрыт при наложении других модулей в разделах ниже при прокрутке.

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

z-index: 99998;

Теперь проверьте живую страницу. Обратите внимание, как значки социальных сетей будут прикрепляться к верхней части страницы (54 пикселя сверху), прямо под фиксированной навигацией, а затем оставаться над другими модулями при прокрутке.

Делаем раздел липким

Чтобы сделать весь раздел «липким», вы должны выполнить тот же процесс добавления идентификатора CSS, «привязанного» к выбранному разделу. Нет необходимости обновлять z-index с помощью настраиваемого CSS, поскольку плагин делает это автоматически.

Эффекты наведения могут привести к сбою липких элементов

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

Только один липкий элемент на странице

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

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

Я надеюсь, что эта статья была полезна, так как предоставила удивительно простой способ сделать любой элемент страницы Divi липким. Используйте его для создания липких подменю, липких CTA, липких рекламных предложений и всего остального, о чем вы можете подумать. Удачи, исследуя возможности!

Я с нетерпением жду вашего ответа в комментариях ниже.

Ваше здоровье!