Как создать липкую панель навигации снизу вверх в Divi

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

Давайте начнем!

Sneak Peek

Чтобы помочь вам визуализировать результат, которого мы пытаемся достичь, давайте посмотрим на окончательный результат:

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

Во всплывающем окне переносимости выберите вкладку импорта и выберите файл для загрузки со своего компьютера.

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание липкой панели навигации снизу вверх в Divi

Часть 1: Создание раздела и заголовка над сгибом

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

Добавить ряд

Для начала добавьте строку из одного столбца в раздел по умолчанию.

Настройки раздела

Перед добавлением модуля откройте настройки раздела и добавьте фон следующим образом:

• Цвет фона: # e9f9ff
• Фоновое изображение: [добавить изображение]

На вкладке дизайна обновите минимальную высоту и отступы.

• Мин. Высота: 100vh (настольный компьютер), авто (планшет и телефон)
• Набивка: 20vh сверху, 20vh снизу

Текст заголовка

Чтобы создать текст заголовка, добавьте в строку новый текстовый модуль.

Затем обновите контент следующим заголовком H1:

<h1>Above the Fold</h1>

Настройки текста

На вкладке «Дизайн» в настройках текста обновите стили шрифтов заголовков следующим образом:

• Шрифт заголовка: Рубик
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка TT
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 302ea7
• Размер текста заголовка: 130 пикселей (рабочий стол), 70 пикселей (планшет), 40 пикселей (телефон)
• Расстояние между буквами заголовка: 2 пикселя
• Высота строки заголовка: 1,3 м

Часть 2: Создание раздела ниже сгиба

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

Чтобы создать раздел, продублируйте только что созданный верхний раздел.

Обновите дублирующийся фон раздела.

• Цвет фона: # f4def1

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

• Минимальная высота: 200vh

Затем обновите содержимое текстового модуля, заменив слово «Ниже» на «Вверху».

Часть 3: Создание липкой панели навигации

Чтобы создать липкую панель навигации снизу вверх, наш первый шаг - создать новый раздел со строкой из одного столбца.

Добавить новый раздел и строку

Добавьте новый обычный раздел прямо под разделом в верхней части страницы.

Затем добавьте в раздел строку из одного столбца.

Фон и отступы раздела

Откройте настройки раздела и обновите цвет фона.

• Цвет фона: # 302ea7

Затем удалите верхнюю и нижнюю прокладку, чтобы панель навигации имела меньшую высоту.

• Padding: 0px сверху, 0px снизу

Добавить видимое переполнение

Чтобы раскрывающиеся меню оставались видимыми, обновите параметры видимости следующим образом:

• Горизонтальное переполнение: видимое
• Вертикальное переполнение: видимое

Дайте разделу абсолютную позицию на мобильных устройствах

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

Для этого дайте разделу абсолютное положение на планшете и телефоне.

• Позиция: относительная (компьютер), абсолютная (планшет и телефон)

Добавить закрепленную позицию для ПК и мобильных устройств

Чтобы добавить закрепленную позицию в раздел панели навигации, обновите следующее:

• Прикрепленное положение: придерживаться верха и низа (рабочий стол), придерживаться верха (планшет и телефон)

Обновить отступы строк

Когда прикрепленный раздел будет готов, откройте настройки для строки внутри раздела и обновите отступы следующим образом:

• Отступ: 10 пикселей сверху, 10 пикселей снизу.

Создать меню навигации

С разделом и строкой мы готовы создать меню навигации.

Начните с добавления модуля меню в строку из одного столбца.

Содержание меню

Обновите содержимое меню следующим образом:

• выберите меню из раскрывающегося списка
• добавить изображение логотипа (я использую изображение размером 122 на 52 пикселя)
• убрать цвет фона по умолчанию

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

• Цвет активной ссылки: #fff
• Шрифт меню: Рубик
• Стиль шрифта меню: TT
• Цвет текста меню: #fff
• Размер текста меню: 16 пикселей
• Выравнивание текста: вправо
• Цвет строки раскрывающегося меню: # e19dff
• Цвет текста мобильного меню: # 302ea7
• Цвет значка корзины покупок: #fff
• Цвет значка поиска: #fff
• Цвет значка меню гамбургера: #fff

Использование границы для смещения абсолютного положения панели навигации на мобильном устройстве

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

Проверьте высоту секции панели навигации на мобильном устройстве

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

Добавить смещение верхней границы к верхней части сгиба

Теперь, когда мы определили высоту секции, откройте настройки для верхней (верхней) секции.

На вкладке дизайна добавьте следующую верхнюю границу на планшете и телефоне:

• Ширина верхней границы: 72 пикселя (планшет и телефон)
• Цвет верхней границы: # 302ea7

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

Конечный результат

Проверьте окончательный результат!

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

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

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

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

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