Использование новых возможностей изменения размера Divi с возможностью перетаскивания не только помогает нам создавать высокоадаптивные веб-сайты, но также помогает нам создавать уникальные взаимодействия. Используя эти параметры, вы можете настроить любой Веб-сайт вы создаете и настраиваете структуру своих страниц на основе текущих тенденций дизайна.
В частности, в этом уроке мы покажем вам, как создавать разделы при наведении курсора на Divi. Мы создадим новую страницу и разрешим отображение всех заголовков разделов, но каждый раздел будет открываться только при наведении курсора (на рабочем столе) или при нажатии (на мобильном устройстве). Как только вы откроете другой раздел, тот, который вы открыли ранее, будет автоматически закрыт. Мы начнем с объяснения общего подхода и продолжим воссозданием примера, который вы видите ниже, с нуля. Мы надеемся, что это руководство побудит вас создать свой собственный дизайн разделов при наведении курсора!
Давайте!
обследование
Прежде чем углубиться в урок, давайте кратко рассмотрим результат.
Этап проектирования
Прежде чем мы углубимся в учебник, мы рассмотрим технику, используемую для создания ролловеров. Вы можете применить эту технику к любому типу Веб-сайт вы строите, с любым стилем.
1. Добавьте первый раздел на свою страницу
Предположим, вы начали новый дизайн на совершенно новой странице. Первое, что нужно сделать, это добавить новый обычный раздел.
2. Добавить новую строку, включая заголовок раздела
Затем вы можете продолжить, добавив новую строку с текстовым модулем, включающим заголовок раздела. Вы также можете добавить модуль-разделитель и что-то, что указывает на то, что линия расширяется при наведении или касании. Важно отделить название раздела от остальной части. содержание раздела. Поэтому не забудьте оставить достаточно места между названием раздела и всем, что следует за ним.
3. Отрегулируйте остальные содержание раздела
Элементы дизайна, которые следуют за заголовками разделов, полностью зависят от вас. Вы можете сделать раздел сколь угодно длинным или коротким и использовать любой стиль оформления.
4. Изменить высоту по умолчанию и навести курсор на раздел
После того, как вы доработали раздел и все его элементы дизайна, пора создать эффект опрокидывания. Высота вашего раздела по умолчанию предназначена только для соответствия заголовку раздела. При наведении курсора раздел вернется к своему первоначальному размеру.
5. Скрыть вертикальное переполнение
Еще одна важная часть этой техники скрывает вертикальный перелив. После того, как вы установите максимальную высоту по умолчанию для вашего раздела, которая меньше начальной высоты раздела, создается переполнение. Чтобы переполнение не отображалось, нужно в настройках видимости раздела убедиться, что он скрыт.
5. Повторите шаги для всех разделов страницы.
Повторите те же шаги для всех разделов вашей страницы, чтобы создать очевидный пользовательский опыт, который ваш посетителей буду признателен.
Начало дизайна!
Добавить новый раздел
Цвет фона по умолчанию
Теперь, когда мы воспользовались подходом, описанным в этом посте, пришло время приступить к делу! Добавьте обычный первый раздел на новую страницу вашего Веб-сайт WordPress и откройте настройки раздела. Измените цвет фона вашего раздела по умолчанию на цвет по вашему выбору.
- Цвет фона: # 000000
Летать над цветом фона
Изменить этот цвет фона зависания.
- Цвет фона: #ffffff
Добавить строку 1
Структура столбца
Продолжайте добавлять первую строку в ваш раздел, используя следующую структуру столбцов:
Добавить текстовый модуль
Добавить контент H2
Добавьте текстовый модуль к следующей новой строке. Добавьте копию H2 с символом «▼» по мере развертывания раздела.
Настройки текста H2
Перейдите на вкладку Module Design и измените настройки текста H2.
- Заголовок 2 Шрифт: Trebuchet
- Название 2 Вес шрифта: Ultra Bold
- Заголовок 2 Выравнивание текста: слева
- Заголовок 2 Цвет текста: #ff0f3b
- Заголовок 2 Размер текста: 100 пикселей (рабочий стол), 80 пикселей (планшет), 60 пикселей (телефон)
- Заголовок 2 Межбуквенный интервал: -5px
Добавить модуль деления
видимость
Второй и последний модуль, который нам нужен в этой строке, - это модуль деления. Убедитесь, что в настройках видимости включена опция «Показать разделитель».
- Показать разделитель: да
Цвет
Затем перейдите на вкладку «Дизайн» и измените цвет разделителя.
- Цвет: #ff0f3b
калибровка
Также измените параметры размеров модуля.
- Вес делителя: 2px
- Ширина: 14%
Добавьте строку 2
Структура столбца
Следующий ряд! Здесь вам нужно будет разместить все содержание который вы хотите отобразить после наведения (на рабочем столе) или щелчка (на планшете и мобильном устройстве). Мы используем следующую структуру столбцов, но учтите, что вы можете добавить столько строк и модулей, сколько захотите, и настроить их в соответствии со своими потребностями:
Добавить текстовый модуль в столбец 1
Добавить контент
Поместите текстовый модуль в первый столбец с содержанием по вашему выбору.
Настройки текста
Перейдите на вкладку «Дизайн» текстового модуля и измените ориентацию текста.
- Ориентация текста: Обоснуйте
Добавить текстовый модуль в столбец 2
Добавить контент
Также добавьте текстовый модуль во второй столбец с содержанием по вашему выбору.
Настройки текста
Опять же, измените ориентацию текста в настройках текста модуля.
- Ориентация текста: Обоснуйте
Добавьте параметры размеров в раздел
Размер по умолчанию
После того, как вы закончили свой раздел, пришло время создать эффект наведения. Откройте настройки раздела и измените максимальную высоту для разных размеров экрана:
- Максимальная высота: 300px (рабочий стол), 280px (планшет), 260px (телефон)
парящий
Также включите опцию наведения на максимальную высоту и добавьте значение, достаточно большое, чтобы покрыть все элементы, независимо от размера экрана. Это значение гарантирует, что все ваши элементы будут отображаться без превышения начального размера контейнера раздела.
- Максимальная высота: 5000px
Вертикальное переполнение
Затем перейдите на вкладку «Дополнительно» раздела и измените вертикальное перетекание. Это скроет все содержимое, выходящее за пределы контейнера раздела.
- Вертикальный перелив: скрытый
Переходы
Чтобы создать плавный переход, мы также меняем настройки перехода на вкладке «Дополнительно».
- Продолжительность перехода: 800ms
- Время перехода: 500 мс
Клонируйте весь раздел столько раз, сколько хотите
Создав первую секцию эстакады, вы можете клонировать ее столько раз, сколько захотите.
Изменить заголовки разделов
Конечно, вы захотите изменить дубликаты заголовков разделов.
Изменить цвета текста H2
Чтобы создать вариации в дизайне, мы также изменим цвета текста модулей, выделенных на экране печати ниже.
- Заголовок 2 Цвет текста: #c4c4c4
Изменить цвета разделителя
С разделением цветов, которые сопровождают текстовые модули.
- Цвет: #c4c4c4
обследование
Теперь, когда все шаги выполнены, давайте еще раз посмотрим на результат.
Заключительные мысли
В этой статье мы показали вам, как творчески использовать новые перетаскиваемые параметры изменения размера Divi для создания уникальных взаимодействий с использованием наведенных разделов на любом создаваемом вами веб-сайте. Мы начали с объяснения подхода и продолжили воссозданием примера дизайна с нуля. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.