На большинстве веб-сайтов есть раздел «Герои», которому больше не нужно доказывать свою состоятельность. Его роль заключается не только в том, чтобы выделиться, но и в том, чтобы быть разделенным на несколько элементов, которые усиливают существующий призыв к действию. Герой переходит к содержание Сплиты с простой для понимания структурой очень популярны и часто используются различными типами веб-сайтов.
И хотя создание главных разделов для содержание разделение для офиса кажется простым, не всегда следует доверять видимости. Вот тут-то и пригодится этот урок. Мы собираемся воссоздать высокоинтерактивный раздел героев для мобильных устройств, который будет отлично смотреться не только на мобильных устройствах, но и независимо от размера экрана. Мы также сочетаем отличную анимацию, которая идеально соответствует стилю дизайна 2019 года. Мы надеемся, что это руководство вдохновит вас на создание собственных разделов мобильных героев, содержание расколоть.
Давайте!
обследование
Прежде чем мы углубимся в учебник, давайте посмотрим, что вы получите из этого учебника.
Дизайн интерфейса
Добавить новый раздел
расстояние
Начните с создания новой страницы или открытия существующей. Добавьте к нему новый обычный раздел, перейдите к настройкам интервалов и удалите все поля отступов по умолчанию сверху и снизу.
- Лучший отступ: 0px
- Нижняя часть обивки: 0px
Добавить новую строку
Структура колонны
Мы продолжим добавлять новую строку и использовать следующую структуру столбцов:
Цвет фона
Не добавляя больше модулей, откройте настройки линии и добавьте полностью черный цвет фона.
- Цвет фона: #000000
Цвет столбца 1
Также добавьте черный фоновый цвет в первый столбец.
- Цвет фона столбца 1: #000000
Цвет столбца 2
То же самое для второго столбца.
- Цвет фона столбца 2: #000000
калибровка
Затем перейдите к настройкам размера и позвольте строке и ее столбцам занять всю ширину экрана.
- Сделать эту строку полной шириной: Да
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Выровнять высоту столбца: Да
расстояние
Мы также удаляем все верхние и нижние поля линии по умолчанию.
- Обивка сверху: 0px
- Нижняя часть обивки: 0px
- Обивка справа: 1vw
afficher
Наконец, мы убедимся, что два столбца отображаются рядом на небольших экранах. Для этого нам нужно будет добавить одну строку кода CSS на вкладку Advanced этой строки.
display: flex; |
Добавьте модуль изображения в столбец 1
Оставьте область изображения пустой
Теперь у нас есть все необходимые модули! Вы должны начать с модуля изображения в первом столбце. Вместо того, чтобы загружать изображение в область изображения, мы загрузим изображение в настройки фона на следующих шагах, поэтому нам нужно удалить изображение, добавленное по умолчанию. Таким образом, мы можем поиграть с тем, как расположено изображение и сколько места оно занимает в нашей строке.
Добавить цвет фона
Зайдите в настройки фона модуля Изображение и добавьте цвет фона. На следующем шаге мы объединим этот цвет фона и фоновое изображение, используя эффект наложения, чтобы затемнить изображение.
- Цвет фона: #686868
Добавить фоновое изображение
Добавьте фоновое изображение на ваш выбор и соответственно измените настройки фона:
- Размер фонового изображения: обложка
- Положение фонового изображения: по центру
- Повторение фонового изображения: без повтора
- Смешение фонового изображения: умножить
калибровка
Мы использовали два столбца одинакового размера для строки, над которой работаем, но результат не тот. Мы собираемся вручную изменить размер каждого добавляемого модуля, чтобы он выглядел так, как будто мы используем другую структуру столбцов. Причина, по которой мы делаем это (вместо того, чтобы просто выбирать другую структуру столбцов), состоит в том, чтобы сделать все адаптивным.
на меньших экранах. Получите доступ к параметрам размеров модуля изображения и измените ширину.
- Ширина: 88%
- Выравнивание модуля: слева
расстояние
Теперь нам нужно определить размер нашего изображения в настройках интервала. Мы также используем единицы отображения для этих значений, чтобы гарантировать, что наш дизайн остается полностью отзывчивым, независимо от размера экрана.
- Верхний отступ: 26.3vw (рабочий стол), 48vw (планшет), 72vw (телефон)
- Обивка внизу: 26.3vw (рабочий стол), 48vw (планшет), 72vw (телефон)
Анимация
Наконец, мы добавим слайд-анимацию в модуль Image. После того, как вы примените анимацию, вы заметите, что изображение не начнет появляться до тех пор, пока не попадет в первый столбец. Цвет фона второго столбца остается в верхней части модуля изображения, пока он перетаскивается влево.
- Стиль анимации: Слайд
- Повтор анимации: один раз
- Направление анимации: влево
- Продолжительность анимации: 1450ms
- Анимация интенсивности: 60%
- Начальная непрозрачность анимации: 100%
Добавить модуль кнопки в столбец 1
Добавить копию
Следующий модуль, который нам нужен в столбце 1, - это кнопочный модуль. Введите копию по вашему выбору.
Настройки кнопок
Затем перейдите на вкладку «Дизайн» и измените настройки кнопки.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 1.5vw (рабочий стол), 2.5vw (планшет), 4vw (телефон)
- Цвет текста кнопки: #ffffff
- Цвет фона кнопки: #e02b20
- Ширина границы кнопки: 0px
- Радиус границы кнопки: 1px
- Шрифт кнопки: Poppins
- Вес шрифта: жирный
расстояние
Также измените значения интервала.
- Верхнее поле: -3.3vw (рабочий стол), -6vw (планшет), -9.1vw (телефон)
- Левая обивка: 8vw
- Обивка справа: 8vw
Shadow box
И добавьте тонкую тень, чтобы создать глубину на странице.
- Box Shadow Blur Force: 20px
- Цвет тени: rgba (0,0,0,0.3)
Добавить текстовый модуль # 1 в столбец 2
Добавить контент H1
По второй колонке! Первый модуль, который нам понадобится, - это текстовый модуль. Добавьте любой контент H1 по вашему выбору.
H1 Настройки текста
Затем перейдите на вкладку «Дизайн» и измените параметры текста H1.
- Шрифт: Поппинс
- Цвет текста заголовка: #ffffff
- Размер текста заголовка: 4vw (рабочий стол), 5vw (планшет), 6vw (телефон)
расстояние
Также измените значения интервала.
- Верхнее поле: 12vw
- Левое поле: -20vw
- Правое поле: 17vw (рабочий стол), 15vw (планшет), 1vw (телефон)
Анимация
И добавить тонкую анимацию.
- Стиль анимации: Слайд
- Повтор анимации: один раз
- Направление анимации: вниз
- Продолжительность анимации: 1450ms
- Анимация интенсивности: 10%
- Начальная непрозрачность анимации: 100%
Добавьте модуль деления в столбец 2
видимость
Следующий необходимый нам модуль во втором столбце - это модуль деления. Убедитесь, что опция «Показать разделитель» включена.
- Показать разделитель: да
Цвет
Затем перейдите на вкладку «Дизайн» и измените цвет разделителя.
- Цвет: #e02b20
Анимация
Добавьте анимацию в модуль деления далее.
- Стиль анимации: Слайд
- Повтор анимации: один раз
- Направление анимации: Право
- Продолжительность анимации: 1450ms
- Анимация интенсивности: 83%
- Начальная непрозрачность анимации: 100%
Добавить текстовый модуль # 2 в столбец 2
Добавить контент
Перейдем к следующему и последнему модулю, который нам нужен во втором столбце! Добавьте описание по вашему выбору.
Настройки текста
Затем перейдите к настройкам текста на вкладке Дизайн и внесите соответствующие изменения:
- Шрифт текста: Poppins
- Вес шрифта текста: легкий
- Цвет текста: #919191
- Размер текста: 0.9vw (рабочий стол), 1.8vw (планшет), 2.2vw (телефон)
- Интервал текстовых букв: 0.1vw
- Высота строки текста: 2.2em
расстояние
Также измените значения интервала.
- Верхнее поле: 9vw (рабочий стол), 19vw (планшет), 23vw (телефон)
- Нижнее поле: 12vw (рабочий стол), 19vw (планшет), 23vw (телефон)
- Левое поле: -3vw
- Правое поле: 20vw (рабочий стол), 6vw (планшет), 3vw (телефон)
Анимация
И, наконец, добавьте анимацию затухания в модуль, и все готово!
- Стиль анимации: Fade
- Повтор анимации: один раз
- Продолжительность анимации: 1400ms
- Задержка анимации: 1000 мс
- Начальная непрозрачность анимации: 0%
Заключительные мысли
В этом уроке мы показали вам, как создавать потрясающие разделы с разделенным контентом с помощью Divi. Разделы с разделенным контентом очень популярны и часто используются в Интернете, но также важно убедиться, что они очень отзывчивы. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий и поделитесь им в социальных сетях!
