Хотели бы вы добавить адаптивный логотип в модуль Fullwidth Menu Divi чтобы он адаптировался к просмотру на мобильном?
Знаете ли вы, что более 50% трафик Интернет идет с мобильных устройств? Это означает, что мобильная версия вашего Веб-сайт чрезвычайно важен и может быть даже основным способом, которым кто-то зайдет на вашу страницу.
Убедитесь, что ваш Веб-сайт быть адаптивным и удобным для мобильных устройств. Это важный шаг в разработке Веб-сайт.
В этом руководстве мы покажем вам, как добавить адаптивный логотип в модуль полноэкранного меню, используя встроенные адаптивные параметры Divi.
Это позволит вам добавить более крупный или более сложный логотип, который будет отображаться на больших экранах, и меньший или более простой логотип, который будет отображаться на меньших экранах.
Давайте начнем!
обследование
Вот предварительный просмотр того, что мы будем разрабатывать. Десктопная версия сайта будет иметь расширенный логотип с дополнительным текстом, а мобильная версия логотипа будет иметь только базовое фирменное оформление логотипа.
Что нужно для начала
Все сначала установите и активируйте тему Divi и убедитесь, что у вас установлена последняя версия Divi на вашем сайте. Затем убедитесь, что у вас есть как минимум две версии вашего логотипа: одна для просмотра вашего сайта на компьютере и одна для просмотра на мобильных устройствах. Наконец, скачайте шаблон Шаблоны верхнего и нижнего колонтитула для пакета макетов старшей школы Divi.
Теперь вы готовы начать!
Как добавить адаптивный логотип в модуль заголовка полной ширины в Divi
Создайте модуль полноширинного заголовка
Читайте также: Divi: как отобразить модуль заголовка Fullwidth в полноэкранном режиме
Добавить раздел полной ширины
Поскольку исходное меню построено со стандартным модулем меню, нам нужно будет изменить макет, чтобы добавить модуль полноширинного заголовка.
Сначала добавьте раздел полной ширины (Полная ширина) в глобальный заголовок под существующим меню.
В настройках раздела полной ширины перейдите к ФильтрА потом Эффекты прокрутки.
- Липкая позиция: придерживайтесь верха
Затем добавьте цвет фона.
- Фон: #f5f0eb
Добавьте другой цвет для фона в липком состоянии.
- Фон (липкий): #ffffff
Добавьте модуль полноширинного заголовка
Теперь давайте добавим модуль Fullwidth Header.
Откройте настройки модуля и удалите фон.
Чтобы легко воспроизвести внешний вид оригинального меню, мы можем использовать функцию «Копировать стили», чтобы скопировать некоторые пользовательские настройки.
Смотрите также: Divi: как изменить градиент фона при наведении
Откройте настройки главного меню, затем щелкните правой кнопкой мыши Текст меню и выберите Копировать стили текста меню.
После копирования нажмите на три точки модуля «Заголовок полной ширины», затем выберите Прошлые стили текста меню.
Теперь повторим те же действия с настройками выпадающего меню.
Повторите еще раз для значков.
Установите выравнивание текста по правому краю.
- Выравнивание текста: по правому краю
Установите максимальную высоту логотипа под ПроектЗатем Калибровка.
- Максимальная высота логотипа: 50 пикселей
Добавьте следующий CSS в раздел Ссылка меню в разделе Пользовательский CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Наконец, отрегулируйте верхний и нижний отступы.
- Отступы-Верх: 10px
- Отступы внизу: 10px
Теперь удалите исходный раздел меню.
Добавить адаптивный логотип
Теперь мы добавим адаптивный логотип. К счастью, Divi упрощает это благодаря встроенным адаптивным параметрам.
Sous Содержание, откройте настройки логотипа и загрузите настольную версию своего логотипа.
Выберите значок мобильного режима, чтобы использовать адаптивные параметры, затем замените мобильный логотип своим адаптивным логотипом.
Создайте новую страницу с предопределенным макетом
Чтобы увидеть полноэкранное меню с адаптивным логотипом в действии, давайте создадим новую страницу с предустановленным макетом из библиотеки Divi.
Для этого дизайна мы будем использовать домашнюю страницу старшей школы Пакет макетов средней школы чтобы соответствовать верхнему и нижнему колонтитулу.
Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр Используйте Диви Строитель. Поскольку мы импортировали макет верхнего и нижнего колонтитула как глобальный верхний и нижний колонтитулы, используйте макет по умолчанию для этой страницы.
В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите Просмотр макетов.
Найдите и выберите макет Домашняя страница средней школы.
выбрать Использовать этот макет чтобы добавить макет на свою страницу.
Конечный результат
Теперь давайте посмотрим на наш окончательный дизайн.
Скачайте DIVI прямо сейчас!!!
Заключение
Наличие мобильного и адаптивного веб-сайта важнее, чем когда-либо. А благодаря встроенным адаптивным параметрам Divi создать его стало проще, чем когда-либо!
Благодаря адаптивному логотипу идентичность вашего бренда всегда будет четкой, независимо от размера экрана.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
