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