Хотели бы вы создать в Divi панель навигации, которая будет прикрепляться снизу вверх к странице?
В учебнике Divi Сегодня мы собираемся шаг за шагом показать вам, как создать липкую панель навигации снизу вверх в Divi.
Это позволит навигационной панели изначально оставаться внизу страницы для уникального макета в верхней части страницы. Затем, как только вы прокрутите раздел над сгибом страницы, панель навигации останется в верхней части страницы и останется там на протяжении всей страницы.
Можно сказать, что страница «примет на себя» меню в нижней части экрана и привнесет приятный эффект взаимодействия в ваше главное меню и ваш Веб-сайт.
Давайте начнем!
обследование
Чтобы помочь вам визуализировать результат, которого мы пытаемся достичь, давайте посмотрим на конечный результат:
Скачайте DIVI прямо сейчас!!!
Начнем с создания новой страницы с помощью Divi Builder.
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Создайте липкую навигационную панель снизу вверх в Divi
Часть 1: Создание раздела и заголовка над ватерлинией
В первой части этого урока мы создадим раздел и заголовок над сгибом, который будет служить основным разделом заголовка нашей страницы. Раздел будет отображаться в полноэкранном режиме на рабочем столе, чтобы гарантировать, что раздел занимает все окно дисплея.
Читайте также: Divi: выберите между сеткой и полноразмерным макетом модуля Filterable Portfolio.
Добавить строку
Для начала добавьте строку в столбец в раздел по умолчанию.
Настройки раздела
Перед добавлением модуля откройте настройки раздела и добавьте фон следующим образом:
- Цвет фона: #e9f9ff
- Фоновое изображение: [добавить изображение]
Под вкладкой Проект, обновите минимальную высоту и отступы.
- Минимальная высота: 100vh (рабочий стол), авто (планшет и телефон)
- Набивка: 20vh (сверху и снизу)
Текст заголовка
Чтобы создать текст заголовка, добавьте в строку новый модуль Text.
Затем обновите содержание со следующим заголовком H1:
<h1>Above the Fold</h1>
Настройки текста
Под вкладкой Проект в настройках модуля «Текст» обновите стили шрифта заголовка следующим образом:
- Заголовок:
- Шрифт: рубиновый
- Вес шрифта: полужирный
- Стиль: ТТ
- Выравнивание текста: по центру
- Цвет текста: #302ea7
- Размер: 130 пикселей (рабочий стол), 70 пикселей (планшет), 40 пикселей (телефон).
- Расстояние между буквами: 2 пикселя
- Высота строки: 1,3 см
Часть 2: Создание секции ниже ватерлинии
Чтобы продемонстрировать функциональность липкой панели навигации, нам нужно добавить раздел ниже сгиба, чтобы у нас было место для прокрутки.
Чтобы создать секцию, продублируйте секцию над только что созданной складкой.
Обновите фон дублирующего раздела.
- Цвет фона: #f4def1
Затем задайте для раздела большую минимальную высоту, чтобы у нас было место для прокрутки страницы вниз. Это просто раздел, который необходимо заполнить вместо содержание настоящая одна страница.
- Минимальная высота: 200vh
Затем обновите содержание модуля «Текст», заменив слово "Ниже" паритет "Выше".
Часть 3. Создание липкой панели навигации
Чтобы создать липкую панель навигации снизу вверх, наш первый шаг - создать новый раздел с одной строкой на один столбец.
Добавлен новый раздел и строка
Во-первых, давайте добавим новый обычный раздел непосредственно под разделом над сгибом.
Далее добавим в раздел строку с одним столбцом.
Фон и отступы раздела
Откройте настройки раздела и обновите цвет фона.
- Цвет фона: #302ea7
Затем удалите верхний и нижний отступы, чтобы панель навигации была меньше по высоте.
- Отступы: 0px (сверху и снизу)
Добавить видимое переполнение
Чтобы раскрывающиеся меню оставались видимыми, обновите параметры видимости следующим образом:
- Горизонтальное переполнение: видимое
- Вертикальное переполнение: видимое
Дайте разделу абсолютную позицию на мобильном устройстве
Мобильное раскрывающееся меню по умолчанию открывается под значком гамбургера. Если мы оставим панель навигации внизу, она скроет раскрывающееся меню, если пользователь нажмет на нее.
Для лучшего взаимодействия с пользователем мы хотим, чтобы панель навигации начиналась в самом верху страницы на экранах планшетов и телефонов.
Для этого придайте разделу абсолютную позицию на планшете и телефоне.
- Позиция: относительная (рабочий стол), абсолютная (планшет и телефон)
Добавить липкую позицию для настольных и мобильных устройств
Чтобы добавить закрепленную позицию в раздел панели навигации, обновите следующее:
- Липкое положение: Прилипание к верху и низу (рабочий стол), Прилипание к верху (планшет и телефон)
Обновить заполнение строки
После того, как липкий раздел будет завершен, откройте настройки строки внутри раздела и обновите отступы следующим образом:
- Отступы: 10px (сверху и снизу)
Создать меню навигации
С разделом и строкой мы готовы создать навигационное меню.
Начните с добавления модуля меню в строку с одним столбцом.
Содержание меню
Обновите содержимое меню следующим образом:
- выберите меню из выпадающего списка
- добавить изображение логотипа
- удалить цвет фона по умолчанию
Под вкладкой Проект, обновите следующий текст меню и настройки значков:
- Цвет активной ссылки: #fff
- Шрифт меню: рубиновый
- Стиль шрифта меню: TT
- Цвет текста: #fff
- Размер текста меню: 16px
- Выравнивание текста: по правому краю
- Цвет строки выпадающего меню: #e19dff
- Цвет текста мобильного меню: #302ea7
- Цвет значка корзины: #fff
- Цвет значка поиска: #fff
- Цвет значка меню гамбургера: #fff
Использование границы для смещения абсолютного положения панели навигации на мобильном устройстве
Поскольку раздел панели навигации имеет абсолютную позицию на мобильных устройствах, панель будет располагаться над (и обрезать) верхнюю часть страницы. Чтобы исправить это, нам нужно сместить верхнюю часть, используя верхнюю границу той же высоты, что и панель/раздел навигации.
Проверьте высоту секции панели навигации на мобильном устройстве.
Чтобы определить высоту панели навигации на мобильном устройстве, откройте активную версию страницы в новом окне браузера. Затем вы можете уменьшить ширину браузера ниже 980 пикселей, чтобы увидеть мобильное меню.
Вы также можете проконсультироваться: Divi: как создать липкую панель навигации
Щелкните правой кнопкой мыши раздел, содержащий меню, и выберите параметр осмотреть элемент в контекстном меню браузера. Вы должны увидеть коробку инструменты под секцией с указанием размеров (включая высоту) секции.
В этом примере высота раздела панели навигации составляет 72 пикселя.
Добавьте смещение верхней границы к секции над сгибом
Теперь, когда мы определили высоту секции, откройте настройки для верхней секции (над сгибом).
Под вкладкой Проект, добавьте следующую верхнюю границу на планшете и телефоне:
- Ширина верхней границы: 72 пикселя (планшет и телефон)
- Цвет верхней границы: #302ea7
Поскольку граница имеет ту же высоту, что и раздел с абсолютным положением, вы не сможете увидеть границу, потому что она служит только для того, чтобы толкать раздел вниз, чтобы он не был обрезан.
Конечный результат
Узнай конечный результат!
Скачайте DIVI прямо сейчас!!!
Заключение
Создать липкую навигационную панель снизу вверх можно легко, используя встроенную позицию Divi и липкие варианты.
Суть в том, чтобы задать секции над сгибом высоту 100vh, а затем добавить секцию панели навигации ниже, которая прикрепляется к нижней и верхней части браузера. Надеюсь, это поможет сделать вашу страницу более уникальной и привлекательной. Веб-сайт.
Эта липкая панель навигации лучше всего подходит для дизайна одной страницы, а не для всего шаблона. Тем не менее, вы можете легко использовать его в качестве дизайна своей домашней страницы и использовать глобальный заголовок для остальных страниц, используя Генератор тем Divi .
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
