Divi дает нам огромную возможность украшать наши веб-сайты различными способами, и внутри Divi доступно множество опций, которые действительно могут создавать потрясающие дизайны. Вы когда-нибудь задумывались о создании заголовка, где ваш логотип будет стоять на основной и дополнительной панели меню? Что ж, это то, что мы узнаем сегодня. Это инновационный способ отображения заголовка. Так что давайте не будем терять время и посмотрим, как это сделать!
Скрытый пик
Это дизайн заголовка, который мы собираемся создать сегодня.
Раздел первый: шаблон глобального заголовка
Прежде всего, нам нужно создать глобальный шаблон заголовка. Для этого заходим в «Диви 
Нажмите на опцию «Добавить глобальный заголовок», и вы увидите раскрывающееся меню. Выберите «Создать глобальный заголовок» и двигайтесь вперед.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчас
Раздел второй: Дизайн заголовка
Добавление: Специализированный раздел
Мы выберем специальный раздел, чтобы сделать этот дизайн.
Структура столбца
Пожалуйста, выберите отмеченную структуру столбцов для раздела.
Цвет фона: столбец 1
Теперь откройте настройку столбца 1 только что созданного раздела Speciality и измените цвет фона.
- Цвет фона: rgba (255,191,0,0,27)
Размеры
Измените следующие значения на вкладке «Дизайн».
- Выровнять высоту столбца: Да
- Использовать нестандартную ширину желоба: Да
- Ширина желоба: 1
- Внутренняя ширина: 100%
- Внутренняя максимальная ширина: 2580 пикселей
Интервал
Теперь перейдите к настройке «Интервал» на той же вкладке «Дизайн».
- Верхний отступ: 0 пикселей
- Нижний отступ: 0 пикселей
- Отступ сверху столбца 1: 0 пикселей
- Отступ снизу столбца 1: 0 пикселей
- Верхний отступ столбца 2: 0 пикселей.
- Отступ нижнего столбца 2: 0 пикселей
Идентификаторы CSS столбца
На вкладке «Дополнительно» применим пользовательский идентификатор CSS к обоим столбцам.
- Идентификатор CSS столбца 1: header-first-column
- Идентификатор CSS столбца 2: заголовок-второй-столбец
Добавление: модуль изображения в столбец 1
Загрузить изображение
Теперь добавьте модуль изображения в столбец 1 и вставьте свой логотип.
Выравнивание
Теперь перейдите на вкладку дизайна и внесите изменения в выравнивание изображения.
- Выравнивание изображения: по центру
Размеры
В разделе размеров измените значение максимальной ширины.
Видимость
Теперь скроем этот конкретный модуль для небольших устройств, мы отключим видимость мобильных устройств и планшетов.
Добавление: строка 1 в столбец 2
Структура столбца
Мы добавим отмеченную структуру столбцов в столбец 2 специальных разделов. Это будет наша первая строка.
Фоновый цвет
Примените цвет фона из настроек строки.
- Цвет фона: rgba (161,99,255,0.1)
Интервал
На вкладке «Дизайн» измените настройки интервала следующим образом:
- Верхний отступ: 10 пикселей
- Нижний отступ: 10 пикселей
- Левый отступ: 5%
- Правое заполнение: 5%
Граница
Теперь внесем некоторые изменения в настройки границы.
- Ширина нижней границы: 3 пикселя
- Ширина левой границы: рабочий стол: 3 пикселя, планшет и телефон: 0 пикселей
- Цвет границы: # 6c2eb9
Основной элемент CSS
Теперь запишите код CSS в блоке «Главный элемент» на вкладке «Дополнительно».
display: flex;
justify-content: center;
align-items: center;
Видимость: скрыть столбцы 1 и 2
Мы скроем видимость столбцов 1 и 2 для небольших устройств для упрощения проектирования. Это сделает наш дизайн чище.
Добавление: модуль социальных сетей в столбец 1
Дополнение к социальной сети
Давайте добавим модуль подписки в социальных сетях в первую колонку. Выберите желаемую платформу социальных сетей и добавьте сюда.
Изменить цвет фона и значка
Мы внесем некоторые изменения в цвет модуля подписки в социальных сетях.
- Цвет фона: # DBDD54
- Цвет значка: rgba (123,15,255,0.46)
Граница
Теперь в настройках границ сделайте наши социальные иконки округлыми.
- Все углы: 100 пикселей
Добавление: текстовый модуль в столбец 2
Модуль и содержание
Добавьте текстовый модуль в столбец 2 и добавьте слоган или что-нибудь по вашему выбору.
Настройки текста
Измените стиль текста.
- Шрифт текста: Поппинс
- Выравнивание текста: по центру
Добавление: кнопочный модуль в столбец 3
Модуль и содержание
В столбце 3 добавьте модуль кнопок и контент по вашему выбору.
Выравнивание кнопок
На вкладке «Дизайн» измените выравнивание кнопки, чтобы ее можно было идеально разместить на устройствах с разным размером экрана.
- Расположение кнопок: Рабочий стол: вправо, планшет и телефон: по центру
Настройки кнопок
Теперь отрегулируйте кнопку, чтобы сделать ее более привлекательной.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 14 пикселей
- Цвет текста кнопки: # DBDD54
- Цвет фона кнопки: # 158DD8
- Шрифт кнопки: Поппинс
- Толщина шрифта кнопок: полужирный
- Стиль шрифта кнопок: прописные
- Показать значок кнопки: Да
- Расположение значка кнопки: слева
Интервал
Теперь внесите следующие изменения в значения заполнения.
- Верхний отступ: 10 пикселей
- Нижний отступ: 10 пикселей
- Отступ слева: 50 пикселей
- Отступ справа: 30 пикселей
Добавление: строка 2 в столбец 2
Структура столбца
Теперь мы добавим последнюю строку в этот модуль столбца.
Фоновый цвет
Примените следующий цвет в качестве фона.
- Цвет фона: rgba (161,99,255,0.1)
Интервал
Отрегулируйте настройки интервала между рядами.
- Верхний отступ: 20 пикселей
- Нижний отступ: 20 пикселей
- Левый отступ: 5%
- Правое заполнение: 5%
Граница
Затем примените следующие настройки границы:
- Ширина левой границы: рабочий стол: 3 пикселя, планшет и телефон: 0 пикселей
- Цвет левой границы: # 6c2eb9
Добавление: модуль меню в столбец 2
Теперь выберите меню, которое вам нужно, и настройте его.
Загрузить логотип для планшета и телефона
Добавьте логотип для устройств с меньшим размером экрана.
Настройки текста меню
Теперь внесите некоторые изменения в текст меню, чтобы он выглядел более организованным.
- Шрифт меню: Poppins
- Цвет текста меню: # 6c2eb9
- Размер текста меню: 16 пикселей
Параметры текста раскрывающегося меню
Теперь добавьте цвет линии в наше выпадающее меню.
- Цвет строки выпадающего меню: rgba (0,0,0,0)
Настройки значков
Теперь измените настройки значка.
- Цвет значка корзины покупок: # 6c2eb9
- Цвет значка поиска: # 6c2eb9
- Цвет значка меню гамбургера: # 6c2eb9
Размеры
Нанесите логотип максимальной ширины на планшет и телефон.
- Максимальная ширина логотипа: планшет: 70 пикселей и телефон: 50 пикселей.
Добавление: модуль кода в столбец 1
Чтобы внести изменения в дизайн нашего заголовка, мы внесем небольшие изменения в CSS. Для этого добавьте модуль кода в столбец 1. Теперь скопируйте приведенный ниже код и вставьте его в этот модуль. Обязательно поместите их между кодом стиля .
@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
#header-second-column {
width: 90% !important;
}
}
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}
Раздел третий: сохранение дизайна
Мы закончили проектирование. Все расположено идеально, теперь давайте сохраним дизайн и посмотрим на результат. Щелкните значок крестика в правом верхнем углу. Вы попадете на панель инструментов и нажмете «Сохранить дизайн».
Окончательный вид
Вот так выглядит наш окончательный дизайн.
Вывод
Ранее мы упоминали, что с Divi вы можете привнести в свой дизайн все больше и больше творчества. Есть много способов сделать ваш сайт презентабельным, и Divi может предоставить всю эту поддержку. Я надеюсь, что сегодняшний урок поможет вам создать уникальный заголовок для вашего сайта. Не стесняйтесь делиться своими мыслями, и если вам понравится этот урок, дружеский обмен сделает вас УДИВИТЕЛЬНЫМ!
