Хотите ли вы создать раздел Hero в Divi, который будет гибким, а не традиционным адаптивным?
Главный раздел сайта — один из лучших вариантов для адаптивного дизайна. В отличие от традиционного адаптивного дизайна, который подстраивается под разные контрольные точки, адаптивный дизайн плавно подстраивается под размер окна браузера и сохраняет единообразие дизайна на любом устройстве. В конце концов, главный раздел — это первое, что видят пользователи на сайте.
В этом уроке мы покажем вам, как создать целую секцию изменчивого героя в DiviКлюч к созданию такого адаптивного дизайна заключается в добавлении адаптивного корневого размера шрифта к каждому из используемых модулей, а затем в указании единицы измерения длины. em (кто относительно размера шрифта основного текста ) в настройках модуля.
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Обратите внимание, как адаптивный дизайн плавно подстраивается под ширину окна браузера.
Создайте новую страницу с помощью Divi Builder
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Читайте также: Divi: Как создать раздел Hero с модулем Fullwidth Header
Как создать секцию с изменяющимся героем в Divi
Настройки раздела
Для начала обновим существующие настройки оформления раздела. Откройте настройки раздела и обновите следующее:
- Остановки градиента:
- 30%: #ff2000
- 30%: #121212
- Направление градиента: 45 градус
Под вкладкой Дизайн, обновите заполнение:
- Отступы: 0px сверху, 0px снизу
Создать линию
Затем добавьте в раздел строку с одним столбцом.
Настройки линии
Откройте настройки линии и обновите следующие параметры на вкладке Дизайн :
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 1 пикселей
- Минимальная высота: 100 vh (рабочий стол), нет (планшет и телефон)
- Отступ: 0px (сверху и снизу)
Создайте объемный заголовок с рамкой.
Теперь, когда раздел и строка готовы, мы можем добавить плавный текст заголовка в раздел «Герой». Мы также добавим плавную рамку к модулю «Текст» для создания креативного дизайнерского элемента.
Добавьте текстовый модуль
Чтобы создать текст заголовка и рамку, добавьте в столбец новый модуль «Текст».
Настройки текста
Под вкладкой Контентобновите содержимое тела следующим HTML-кодом:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Для обеспечения плавного перехода между элементами дизайна, сначала необходимо добавить к модулю адаптивный размер шрифта с помощью функции CSS Clamp().
Под вкладкой ФильтрВставьте следующий фрагмент CSS-кода:
font-size: clamp(32px, 4.1vw, 70px);
Под вкладкой ДизайнОбновите следующие параметры оформления текста заголовка:
- Текст заголовка:
- Тип: Н1
- Шрифт: Монтсеррат
- Вес шрифта: тяжелый
- Цвет: #ffffff
- Размер: 1см
- Расстояние между буквами: 0,1em
- Высота строки: 1,2 см
Также обновите дополнение мода следующим образом:
- Отступы: 1-й (сверху, снизу, слева и справа)
Чтобы создать дизайн плавной границы, обновите следующее:
- Ширина границы: 1em
- Цвет границы: #ffffff
- Цвет нижней границы: прозрачный
- Цвет левой границы: прозрачный
Создание акцентной границы
Для создания акцентной рамки можно продублировать существующий текстовый модуль.
Удалите существующее содержимое тела и обновите настройки дизайна следующим образом:
- Максимальная ширина: 6,5 см
- Высота: 3,25 см
- Ширина границы: 0,5 см
- Цвет границы: #ff2000
Для позиционирования акцентной границы добавьте абсолютное позиционирование со смещением, равным ширине границы, в модуле «Текст заголовка» (1em).
Под вкладкой Фильтр, обновите следующие параметры положения:
- Позиция: Абсолют
- Расположение: вверху справа
- Вертикальное смещение: 1em
- Горизонтальное смещение: 1em
Создать текст субтитров
Под текстом заголовка мы добавим плавный текст подзаголовка. Поскольку этот текст меньше, мы добавим меньший размер шрифта плавного корня.
Добавить новый текстовый модуль
Для создания текста подзаголовка добавьте новый модуль «Текст» под существующим модулем «Текст заголовка».
Вы можете добавить несколько текстовых предложений-заполнителей следующим образом:
- Содержание: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Добавить размер шрифта плавного корня
Далее нам нужно добавить новый адаптивный размер шрифта, который лучше подходит для мелкого текста. На вкладке «Дополнительно» вставьте следующий фрагмент CSS-кода под основным элементом:
font-size: clamp(14px, 1.4vw, 24px);
Настройки дизайна текста
Под вкладкой Дизайн, обновите следующее:
- Текст:
- Вес шрифта: полужирный
- Цвет: #ffffff
- Размер: 1см
- Высота: 1,6 см
Далее обновите размер и интервал следующим образом:
- Максимальная ширина: 19 см
- Поле: 2 em (внизу), auto (слева), 5 em (справа)
Создайте плавающую кнопку
Чтобы создать плавающую кнопку, добавьте новый модуль «Кнопка» под модулем «Текст субтитров».
Далее обновите текст кнопки, чтобы он гласил «7 дней бесплатного Трала».
Добавить размер шрифта плавного корня
Далее нам нужно добавить новый плавный размер шрифта, подходящий для кнопки.
Под вкладкой ФильтрВставьте следующий фрагмент CSS-кода под основным элементом:
font-size: clamp(20px, 2.35vw, 40px);
Настройки дизайна кнопки
Под вкладкой Дизайн, обновите следующее:
- Расположение кнопок: справа
- Использовать нестандартный размер кнопки: ДА
- Цвет текста кнопки: #ff2000
- Остановки градиента:
- Цвет 1 25%: прозрачный
- Цвет 2 25%: #ffffff
- Направление градиента: 45 градусов
- Кнопка:
- Ширина границы: 0 пикселей
- Радиус границы: 0 пикселей
- Шрифт: Монтсеррат
- Вес шрифта: толстый
- Стиль: курсив
- Показать значок кнопки: ДА
- Значок: стрелка в виде треугольника, указывающая вправо (см. скриншот)
- Расположение значка: справа
- Поле: 8em (справа)
- Отступы: 0,2 см (сверху и снизу), 1,5 см (слева), 1 см (справа)
Создайте изображение для раздела Герой
Теперь, когда весь контент из раздела «Герой» имеет правильный размер для страницы, мы готовы добавить изображение из раздела «Герой» слева. Для этого сначала добавьте модуль «Изображение» под кнопкой.
Откройте настройки изображения и загрузите изображение.
Настройки дизайна изображения
Под вкладкой Дизайн, обновите следующие настройки:
- Выравнивание изображения: слева (рабочий стол и планшет), по центру (телефон)
- Максимальная ширина: 48% (настольный компьютер и планшет), 70% (телефон)
- Набивка: 4% (слева)
Наконец, задайте изображению абсолютное положение со смещением, используя единичную длину vmin следующим образом:
- Позиция: абсолютная (рабочий стол и планшет), относительная (телефон)
- Расположение: вверху слева (рабочий стол и планшет)
- Смещение по вертикали: 30vmin (рабочий стол и планшет), 0px (телефон)
Конечный результат
Вот конечный результат на живой странице.
Смотрите также: Divi: как использовать маски и фоновые узоры для раздела героя
Вот как адаптивный дизайн плавно подстраивается под ширину окна браузера.
Скачайте DIVI прямо сейчас!!!
Заключение
Добавление адаптивного дизайна к разделу "Герой" может стать удобным способом обеспечить безупречную согласованность верхней части страницы во всех размерах браузера, без необходимости обновления дизайна на определенных контрольных точках или использования медиа-запросов.
Надеюсь, эта техника добавит еще один полезный дизайнерский навык для будущих проектов.
Мы также надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...