Хотели бы вы создать липкий нижний колонтитул с DIVI, который полностью раскрывается при прокрутке вниз?
Добавление липкого нижнего колонтитула к вашему Веб-сайт может принести то небольшое дополнительное прикосновение, которое вы искали, к вашему Веб-сайт. Эффект «Показать», который позволяет открывать нижний колонтитул при прокрутке вниз, придаст очень очаровательный дизайн вашим веб-страницам.
Обычно для этого эффекта требуется пользовательский CSS, который ограничен и сложен в использовании. Но благодаря DIVI вы легко этого добьетесь.
В этом уроке мы покажем вам, как создать эффект раскрытия липкого нижнего колонтитула. Все, что нужно, это несколько простых шагов.
Давайте начнем!
обследование
Вот краткий обзор липкого нижнего колонтитула с эффектом раскрытия, который мы создадим в этом уроке.
Создайте новый шаблон нижнего колонтитула
Визит Divi >> Конструктор тем из панели управления WordPress.
Там нажмите на «Добавить глобальный нижний колонтитул»
Тогда выбирай «Создание глобального нижнего колонтитула»
В этом уроке мы будем использовать готовый макет, чтобы ускорить процесс создания, но вы также можете сделать это с нуля. Для этого нажмите "Загрузить из библиотеки".
Под всплывающим окном Загрузить из библиотеки, найдите и используйте макет " Марина О странице » из пакета макетов Марины.
После загрузки макета удалите все разделы, кроме нижнего колонтитула. Мы будем использовать этот раздел нижнего колонтитула, чтобы добавить эффект раскрытия.
Добавьте эффект раскрытия и сделайте нижний колонтитул липким
Сделать нижний колонтитул липким
См. Также: Как создать скользящее и push-меню в DIVI?
Во-первых, нам нужно сделать нижний колонтитул липким. Для этого откройте настройки раздела и нажмите на вкладку Передовой. Под «Эффекты прокрутки», измените настройки следующим образом:
- Липкая позиция: Придерживайтесь нижней части
Обновить Z-индекс для липкого состояния
Затем нам нужно присвоить нашему разделу нижнего колонтитула z-индекс 0, когда раздел находится в липком состоянии. Это позволит разделу оставаться позади других разделов или элементов в теле страницы при прокрутке.
Для этого обновите позицию Z-индекса, щелкнув значок-липучку рядом с опцией Z-индекса. Затем обновите индекс Z до 0.
- Индекс Z (липкий): 0
Обновить заполнитель прикрепленного нижнего колонтитула Z-индекс
Когда элементу назначается фиксированная позиция в Divi, дублирующийся элемент-заполнитель также создается автоматически. Это обеспечивает функциональность, необходимую для позиционирования и проектирования липких элементов с помощью Divi Builder.
См. Также: Как создать глобальный заголовок с помощью конструктора тем Divi
В этом случае заполнитель раздела нижнего колонтитула создается с z-индексом по умолчанию, равным 1. Мы не хотим, чтобы наш фактически закрепленный раздел нижнего колонтитула (теперь с Z-индексом 0) находился за разделом-заполнителем, поэтому нам нужно обновить Z-индекс заполнителя на -1.
Для этого сначала добавьте пользовательский класс CSS в раздел нижнего колонтитула следующим образом:
- Класс CSS: sticky-footer-reveal
Затем откройте настройки страницы с помощью меню настроек Конструктор тем.
Перейдите на вкладку " Передовой " и введите следующий CSS в поле Настроить CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Это заставит раздел-заполнитель остаться за липким нижним колонтитулом.
Сохранить изменения
После этого сохраните изменения, внесенные в шаблон нижнего колонтитула.
Также сохраните изменения Divi Theme Builder.
Конечный результат
Чтобы увидеть окончательный результат, просмотрите страницу и прокрутите ее.
Скачайте DIVI прямо сейчас!!!
Заключение
В Divi добавление прикрепленного нижнего колонтитула к вашему Веб-сайт не требует плагина или сложного пользовательского CSS. Использование конструктора темы, вы можете легко создать шаблон нижнего колонтитула с помощью Эффект раскрытия через несколько минут.
Надеюсь, это придаст вашему дизайну нижнего колонтитула тонкий импульс благодаря привлекательному взаимодействию, которое посетителей оценит. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Смотрите также наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
