Модуль Fullwidth Header включает в себя множество вариантов стилизации изображения, позволяя Диви пользователи создают красивые изображения и макеты для своих заголовков. Изображение заголовка можно стилизовать разными способами для создания интересных макетов и дизайнов. Это становится еще интереснее, когда сочетается с различным дизайном текста и кнопок. В этом посте мы увидим, как стилизовать изображение в модуле заголовка Divi Fullwidth, и поделимся тремя примерами, которые помогут вам создать модуль заголовка Fullwidth.
Давайте начнем!
Предварительный просмотр
Вот Fullwidth Header, который мы будем использовать в этом примере. Для начала давайте посмотрим, как его построить. Мы используем изображения и макет из бесплатного пакета макетов цветочной фермы.
Чтобы добавить модуль Fullwidth Header на страницу, вам понадобится новый раздел со строкой в один столбец. Как только вы это сделаете, добавьте модуль Fullwidth Header в столбец вашей строки.
Затем добавьте заголовок, подзаголовок, текст первой кнопки, текст второй кнопки и контент.
- Название: Добро пожаловать на цветочную ферму Диви
- Подзаголовок: О нас
- Кнопка первая: Дополнительная информация
- Кнопка вторая: Магазин
- Содержание: какой-то текст
Прокрутите вниз до Изображения выберите «Изображение заголовка» и добавьте свое изображение.
Фон
Далее прокрутите вниз до Фон, выберите вкладку «Градиент» и добавьте четыре опорные точки градиента:
- Точка 1: 0%, #000000
- Точка 2: 25%, rgba(0,0,0,0.8)
- Точка 3: 75%, rgba(0,0,0,0,8)
- Точка 4: 100%, #000000
Далее включите Разместите градиент над фоновым изображением. Остальные настройки оставьте по умолчанию.
- Разместить градиент над фоновым изображением: Да
Выберите Изображение на заднем плане вкладку и добавьте свое изображение. Далее мы создадим стиль для модуля Fullwidth Header.
Текст заголовка
Выберите вкладку «Дизайн» и прокрутите вниз до Текст заголовка. Выберите H1 и выберите Italiana в качестве шрифта. Установите выравнивание по левому краю и выберите белый цвет.
- Уровень заголовка: H1
- Шрифт: Italiana
- Выравнивание: слева
- Цвет: #ffffff
Установите размер для компьютера на 80px, размер для планшета на 40px и размер телефона на 32px.
- Размер: 80px для настольного компьютера, 40px для планшета, 32px для телефона.
Основной текст
Далее прокрутите вниз до Основной текст. Установите выравнивание по левому краю, выберите Roboto в качестве шрифта и измените цвет на белый.
- Выравнивание: слева
- Шрифт: Roboto
- Цвет: #ffffff
Измените размер для компьютера на 18px, размер для планшета на 16px и размер для телефона на 14px.
- Размер текста: 18px для настольного компьютера, 16px для планшета, 14px для телефона.
Текст подзаголовка
Далее прокрутите вниз до Текст подзаголовка. Выберите Roboto в качестве шрифта и установите для параметра Weight значение Heavy. В качестве стиля выберите TT, установите выравнивание по левому краю и измените цвет на #b5a68f.
- Шрифт: Roboto
- Вес: Тяжелый
- Стиль: ТТ
- Выравнивание: слева
- Цвет: #b5a68f
Далее измените Интервал между символами до 0,2em, а высоту строки до 1,7em. Размер шрифта оставьте по умолчанию — 18px.
- Интервал: 0,2em
- Высота строки: 1,7em
Прокрутите вниз до Первая кнопка и выберите Использовать пользовательские стили для первой кнопки. Установите размер шрифта на 14px, цвет текста — #aa6a3c, а цвет фона — #f5f3ef.
- Использовать пользовательские стили для первой кнопки: Да
- Размер шрифта: 14px
- Цвет текста: #aa6a3c
- Цвет фона: #f5f3ef
Установите цвет границы #aa6a3c, межсимвольный интервал — 0,15em, шрифт — Roboto, толщину — жирный и стиль — TT.
- Цвет границы: #aa6a3c
- Расстояние между буквами: 0,15em
- Шрифт: Roboto
- Вес: Жирный
- Стиль: ТТ
Прокрутите вниз до Первая кнопка. Измените верхнее и нижнее отступы на 20px, а левое и правое отступы — на 30px.
- Отступы: сверху, снизу 20px, слева, справа 30px.
Далее прокрутите вниз до Вторая кнопка. Выбирайте Использовать пользовательские стили для второй кнопки. Установите размер шрифта на 14px, цвет текста — белый, а цвет фона — rgba(255,255,255,0).
- Использовать пользовательские стили для второй кнопки: Да
- Размер шрифта: 14px
- Цвет текста: #ffffff
- Цвет фона: rgba(255,255,255,0)
Установите цвет границы на белый, интервал между буквами — 0,15em, шрифт — Roboto, толщину — жирный и стиль — TT.
- Цвет границы: #ffffff
- Расстояние между буквами: 0,15em
- Шрифт: Roboto
- Вес: Жирный
- Стиль: ТТ
Прокрутите вниз до Вторая кнопка и установите верхнее и нижнее отступы на 20px, а левое и правое отступы на 30px. Вот и все, что касается стиля модуля Fullwidth Header. Теперь рассмотрим три способа стилизации изображения.
- Отступы: сверху, снизу 20px, слева, справа 30px.
Вот три примера использования нашего макета в качестве отправной точки. Внесём некоторые коррективы в макет для каждого из примеров.
Для первого примера изображения модуля Fullwidth Header мы создадим закругленный верх с рамкой. Перейдите на вкладку «Дизайн» и прокрутите вниз до Изображение. Отмените синхронизацию значений и измените верхнюю границу на 400px.
- Верхняя правая и левая границы: 400px.
- Нижняя правая и левая граница: 0px.
Измените ширину границы на 2px и цвет границы на белый.
- Ширина: 2px
- Цвет: #ffffff
Далее мы настроим Выравнивание текста и изображения, чтобы настроить их расположение на экране. В этом примере мы оставим изображение и текст на их текущих позициях, но изменим вертикальное выравнивание текста и кнопок. Выбор Полноэкранный открывает параметр вертикального выравнивания текста в параметрах текста.
Сначала перейдите на вкладку «Дизайн». В разделе «Макет» установите выравнивание текста вправо и включите «Сделать полноэкранным».
Наконец, прокрутите вниз до Текст. Теперь вы увидите опцию с надписью Вертикальное выравнивание текста. Установите его в положение «Низ». Закройте модуль и сохраните настройки.
- Вертикальное выравнивание текста: снизу
В этом примере мы будем использовать другой текст и изображение кнопки. Сначала измените Текст первой кнопки на Информация.
- Текст первой кнопки: Информация
Далее прокрутите вниз до Фон и выберите другое изображение. Это изображение займет около 1/3 ширины экрана. Я использую то же изображение в качестве фона.
- Изображение заголовка: большое изображение
Далее перейдите во вкладку Расширенные и прокрутите вниз до поля «Изображение заголовка». Добавлять CSS чтобы установить ширину на 150%, а высоту на авто. Закройте модуль и сохраните настройки.
CSS изображения заголовка:
max-width: 150%; height: auto;
Теперь, когда изображение и текст кнопки готовы, мы внесем коррективы. Мы можем настроить Выравнивание текста и изображения, чтобы настроить их расположение на экране. Сначала зайдите в Дизайн вкладка. В разделе «Макет» оставьте «Выравнивание текста по левому краю» и включите Сделать полноэкранный режим.
Далее прокрутите до Текст заголовка и установите выравнивание по центру.
- Выравнивание текста заголовка: по центру
Далее прокрутите вниз до Основной текст. Измените выравнивание текста по центру.
Далее прокрутите до Текст субтитров и установите выравнивание по центру.
- Выравнивание текста субтитров: по центру
Прокрутите вниз до Поле первой кнопки и измените левое поле на 29 % для настольных компьютеров, 18 % для планшетов и 19 % для телефонов.
- Первая кнопка слева: 29 % рабочий стол, 18 % планшет, 19 % телефон.
Прокрутите вниз до Вторая кнопка Маржа и измените левое поле на 30 % для планшетов и 31 % для телефонов.
- Вторая кнопка слева: 30 % планшета, 31 % телефона.
Прокрутите вниз до Размеры и установите ширину на 104% для телефонов. Это правильно центрирует контент для узких экранов.
Сначала зайдите в Дизайн вкладка. Под Макет, установите выравнивание текста по правому краю. В моем случае текст выравнивается по левому краю, но ваш может быть центрирован, если вы не указали выравнивание.
- Выравнивание текста и логотипа: по центру
Прокрутите вниз до Изображение. Измените ширину границы на 4 пикселя и цвет границы на #b5a68f.
- Ширина границы: 4 пикселя
- Цвет границы: #b5a68f
Далее прокрутите до Текст заголовка и измените «Выравнивание» на «По центру».
- Выравнивание текста заголовка: по центру
Прокрутите до Основной текст и измените «Выравнивание» на «По центру».
- Выравнивание основного текста: по центру
Далее прокрутите до Текст субтитров и измените «Выравнивание» на «По центру».
- Выравнивание текста субтитров: по центру
Далее перейдите в Содержание вкладку и измените Текст первой кнопки Информация только для телефонов.
- Содержимое Button One для телефонов: информация
Вернитесь в Дизайн вкладку и добавьте 5% Правое поле на вкладку телефона Button Two.
Наконец, прокрутите вниз до Размеры и установите для ширины контента значение 52 % для настольных компьютеров и 100 % для планшетов и телефонов. Закройте модуль и сохраните настройки.
- Ширина контента: 52 % для настольных компьютеров, 100 % для планшетов и телефонов.
Полученные результаты
Конечные мысли
Вот наш взгляд на то, как стилизовать модуль заголовка Divi Fullwidth. Изображение легко стилизовать, и его можно разместить в нескольких местах модуля. Различные варианты компоновки модуля открывают множество возможностей для дизайна. Обязательно тестируйте свои проекты на экранах всех размеров, чтобы обеспечить максимальное удобство для пользователей.
Ждем вашего ответа. Вы стилизовали свои изображения в модуле полноширинного заголовка Divi? Дайте нам знать о вашем опыте в комментариях.
