Как добавить адаптивный логотип в полноэкранный модуль меню в Divi

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

Давайте погрузимся!

Подпишитесь на наш канал на Youtube

Краткий обзор

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

Зачем вам нужен адаптивный логотип

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

Во-первых, что такое адаптивный логотип? Адаптивный логотип — это вариант вашего логотипа, который может быть меньше, проще, сокращен или перестроен, чтобы быть более заметным и разборчивым в меньших размерах. Если в вашем логотипе слишком много подробных элементов, они могут плохо отображаться в меньшем размере. Небольшой размер шрифта и дополнительная типографика в адаптивном логотипе также могут быть трудными для чтения на маленьком экране. Разместив на своем веб-сайте адаптивный логотип, адаптированный к размеру экрана пользователя, вы можете быть уверены, что идентичность вашего бренда четко представлена, несмотря ни на что. Загляните на этот сайт, чтобы посмотреть отличные примеры адаптивных логотипов!

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

Сначала установите и активируйте тему Divi и убедитесь, что на вашем веб-сайте установлена ​​последняя версия Divi. Затем убедитесь, что у вас есть как минимум две версии вашего логотипа — одна для настольного просмотра вашего сайта, а другая — для мобильного. Наконец, загрузите шаблон верхнего и нижнего колонтитула для пакета макетов старшей школы Divi.

Теперь вы готовы начать!

Как добавить адаптивный логотип в полноэкранный модуль меню в Divi

Импорт макета верхнего и нижнего колонтитула

Перейдите к конструктору тем из меню Divi на боковой панели. Импортируйте макет верхнего и нижнего колонтитула High School, выбрав значок переносимости. Перейдите на вкладку «Импорт» и выберите файл макета. Затем выберите «Импортировать шаблоны Divi Theme Builder».

Мы отредактируем заголовок и добавим наш адаптивный логотип в конструктор тем. Нажмите на значок карандаша, чтобы отредактировать заголовок.

Создайте полноэкранный модуль меню

Добавить раздел полной ширины

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

В настройках раздела полной ширины перейдите к «Дополнительно», затем «Эффекты прокрутки».

• Липкая позиция: придерживайтесь верха

Затем добавьте цвет фона.

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

Добавьте другой цвет для липкого фона.

• Липкий цвет фона: #ffffff

Добавить полноэкранный модуль меню

Теперь давайте добавим модуль полноширинного меню.

Откройте настройки модуля и удалите фон.

Чтобы легко воспроизвести внешний вид исходного меню, мы можем использовать функцию копирования стилей для копирования некоторых пользовательских настроек. Откройте настройки исходного меню, затем щелкните правой кнопкой мыши «Стили текста меню» и выберите «Копировать стили текста меню».

После копирования щелкните три точки для модуля меню полной ширины, затем выберите «Вставить стили текста меню».

Теперь повторим те же действия с настройками выпадающего меню. Откройте настройки исходного меню, затем щелкните правой кнопкой мыши «Стили раскрывающегося меню» и выберите «Копировать стили раскрывающегося меню». Щелкните три точки для модуля полноширинного меню, затем выберите «Вставить стили раскрывающегося меню».

Повторите еще раз для стилей значков. Откройте настройки исходного меню, затем щелкните правой кнопкой мыши «Стили значков» и выберите «Копировать стили значков». Щелкните три точки для модуля меню во всю ширину, затем выберите «Вставить стили значков».

Установите выравнивание текста по правому краю.

• Выравнивание текста: справа

Установите максимальную высоту логотипа в разделе «Дизайн», затем «Размер».

• Максимальная высота логотипа: 50 пикселей

Добавьте следующий CSS в раздел «Ссылка на меню» в разделе «Пользовательский CSS».

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Наконец, установите верхний и нижний отступы.

• Отступы-Верх: 10px
• Заполнение снизу: 10 пикселей

Теперь удалите исходный раздел меню.

Добавьте адаптивный логотип

Теперь мы добавим адаптивный логотип. К счастью, Divi упрощает это благодаря встроенным адаптивным параметрам.

В разделе «Общие» откройте настройки логотипа и загрузите настольную версию своего логотипа.

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

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

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

Добавьте новую страницу на свой веб-сайт и дайте ей название, затем выберите параметр «Использовать Divi Builder». Поскольку мы импортировали макет верхнего и нижнего колонтитула как глобальный верхний и нижний колонтитулы, используйте макет по умолчанию для этой страницы.

В этом примере мы будем использовать готовый макет из библиотеки Divi, поэтому выберите «Обзор макетов».

Найдите и выберите макет домашней страницы средней школы.

Выберите «Использовать этот макет», чтобы добавить макет на свою страницу.

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

Теперь давайте посмотрим на наш окончательный дизайн.

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

Наличие мобильного и адаптивного веб-сайта важнее, чем когда-либо. А благодаря встроенным адаптивным параметрам Divi создать его стало проще, чем когда-либо! Благодаря отзывчивому логотипу ваш фирменный стиль всегда будет четким, независимо от размера экрана. Если вы хотите узнать больше об адаптивных параметрах Divi, ознакомьтесь с этим руководством по адаптивному содержанию отзывов. Как вы реализовали адаптивный дизайн на своем сайте? Будем рады услышать ваши мысли в комментариях!