Хотите создать раздел Героев в Divi который является текучим вместо традиционного отзывчивого?
Раздел «Герой» Веб-сайт является одним из лучших кандидатов для жидкостного дизайна. В отличие от традиционного адаптивного дизайна, который адаптируется к различным точкам останова, гибкий дизайн легко адаптируется к области просмотра браузера и обеспечивает единообразие дизайна на любом устройстве. В конце концов, раздел «Герой» — это первое, что пользователи видят на сайте. Веб-сайт.
В этом уроке мы покажем вам, как создать целую секцию изменчивого героя в Divi. Ключом к созданию этого гибкого дизайна является добавление размера шрифта плавного корня к каждому из используемых модулей, а затем добавление единицы длины. em (кто относительно размера шрифта основного текста ) в настройках модуля.
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Обратите внимание, как плавный дизайн плавно адаптируется к ширине окна браузера.
Создайте новую страницу с помощью Divi Builder
Для начала вам нужно будет сделать следующее:
В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Divi строитель
Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст для начала проектирования. Divi.
Читайте также: Divi: Как создать раздел Hero с модулем Fullwidth Header
Как создать секцию с изменяющимся героем в Divi
Настройки раздела
Для начала обновим существующие настройки оформления раздела. Откройте настройки раздела и обновите следующее:
- Остановки градиента:
- 30%: #ff2000
- 30%: #121212
- Направление градиента: 45 градус
Под вкладкой Проект, обновите заполнение:
- Отступы: 0px сверху, 0px снизу
Создать линию
Затем добавьте в раздел строку с одним столбцом.
Настройки линии
Откройте настройки линии и обновите следующее на вкладке Проект :
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 1 пикселей
- Минимальная высота: 100 vh (рабочий стол), нет (планшет и телефон)
- Отступ: 0px (сверху и снизу)
Создайте плавный текст заголовка с рамкой
Теперь, когда раздел и строка готовы, мы можем добавить плавный текст заголовка в раздел Hero. Мы также добавим плавную рамку к модулю «Текст» для творческого элемента дизайна.
Добавьте текстовый модуль
Чтобы создать текст заголовка и рамку, добавьте в столбец новый модуль «Текст».
Настройки текста
Под вкладкой Содержание, обнови его содержание тела с помощью следующего 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 Day Free Tral».
Добавить размер шрифта плавного корня
Далее нам нужно добавить новый плавный размер шрифта, подходящий для кнопки.
Под вкладкой Фильтр, вставьте следующий фрагмент 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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
