Хотели бы вы создать в Divi панель навигации, которая будет прикрепляться снизу вверх к странице?
В учебнике Divi Сегодня мы шаг за шагом покажем вам, как создать фиксированную панель навигации снизу вверх в Divi.
Это позволит навигационной панели изначально оставаться внизу страницы для уникального макета в верхней части страницы. Затем, как только вы прокрутите раздел над сгибом страницы, панель навигации останется в верхней части страницы и останется там на протяжении всей страницы.
Можно сказать, что страница «воспроизведет» меню внизу экрана и добавит приятный интерактивный эффект к вашему главному меню и веб-сайту.
Давайте начнем!
обследование
Чтобы вам было проще представить себе результат, которого мы пытаемся достичь, давайте посмотрим на конечный результат:
Скачайте DIVI прямо сейчас!!!
Начнем с создания новой страницы с помощью Divi Builder.
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Создайте липкую навигационную панель снизу вверх в Divi
Часть 1: Создание раздела и заголовка в верхней части страницы (без видимой линии сгиба).
В первой части этого урока мы создадим раздел и заголовок в верхней части страницы, которые будут служить основным разделом заголовка нашей страницы. На настольных компьютерах раздел будет отображаться на весь экран, чтобы гарантировать, что он занимает все окно дисплея.
Читайте также: Divi: выберите между сеткой и полноразмерным макетом модуля Filterable Portfolio.
Добавить строку
Для начала добавьте строку в столбец в раздел по умолчанию.
Настройки раздела
Перед добавлением модуля откройте настройки раздела и добавьте фон следующим образом:
- Цвет фона: #e9f9ff
- Фоновое изображение: [добавить изображение]
Под вкладкой Дизайн, обновите минимальную высоту и отступы.
- Минимальная высота: 100vh (рабочий стол), авто (планшет и телефон)
- Набивка: 20vh (сверху и снизу)
Текст заголовка
Для создания текста заголовка добавьте новый модуль «Текст в строку».
Далее обновите содержимое, добавив следующий заголовок 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...