Divi

Как стилизовать изображение в модуле Fullwidth Header темы Divi

Модуль 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 изображения заголовка:

Пример первого изображения заголовка во всю ширину

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

Пример первого изображения заголовка во всю ширину

Далее прокрутите до Текст заголовка и установите выравнивание по центру.

  • Выравнивание текста заголовка: по центру

Пример второго изображения заголовка во всю ширину

Далее прокрутите вниз до Основной текст. Измените выравнивание текста по центру.

Пример второго изображения заголовка во всю ширину

Далее прокрутите до Текст субтитров и установите выравнивание по центру.

  • Выравнивание текста субтитров: по центру

Пример второго изображения заголовка во всю ширину

Прокрутите вниз до Поле первой кнопки и измените левое поле на 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? Дайте нам знать о вашем опыте в комментариях.

Оригинал статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *