Использование новых возможностей изменения размера Divi с возможностью перетаскивания не только помогает нам создавать высокоадаптивные веб-сайты, но также помогает нам создавать уникальные взаимодействия. Используя эти параметры, вы можете настроить любой Веб-сайт вы создаете и настраиваете структуру своих страниц на основе текущих тенденций дизайна.

В частности, в этом уроке мы покажем вам, как создавать разделы при наведении курсора на Divi. Мы создадим новую страницу и разрешим отображение всех заголовков разделов, но каждый раздел будет открываться только при наведении курсора (на рабочем столе) или при нажатии (на мобильном устройстве). Как только вы откроете другой раздел, тот, который вы открыли ранее, будет автоматически закрыт. Мы начнем с объяснения общего подхода и продолжим воссозданием примера, который вы видите ниже, с нуля. Мы надеемся, что это руководство побудит вас создать свой собственный дизайн разделов при наведении курсора!

Давайте!

обследование

Прежде чем углубиться в урок, давайте кратко рассмотрим результат.

Предварительный просмотр дизайна в разделе divi

Этап проектирования

Прежде чем мы углубимся в учебник, мы рассмотрим технику, используемую для создания ролловеров. Вы можете применить эту технику к любому типу Веб-сайт вы строите, с любым стилем.

1. Добавьте первый раздел на свою страницу

Предположим, вы начали новый дизайн на совершенно новой странице. Первое, что нужно сделать, это добавить новый обычный раздел.

2. Добавить новую строку, включая заголовок раздела

Затем вы можете продолжить, добавив новую строку с текстовым модулем, включающим заголовок раздела. Вы также можете добавить модуль-разделитель и что-то, что указывает на то, что линия расширяется при наведении или касании. Важно отделить название раздела от остальной части. содержание раздела. Поэтому не забудьте оставить достаточно места между названием раздела и всем, что следует за ним.

3. Отрегулируйте остальные содержание раздела

Элементы дизайна, которые следуют за заголовками разделов, полностью зависят от вас. Вы можете сделать раздел сколь угодно длинным или коротким и использовать любой стиль оформления.

4. Изменить высоту по умолчанию и навести курсор на раздел

После того, как вы доработали раздел и все его элементы дизайна, пора создать эффект опрокидывания. Высота вашего раздела по умолчанию предназначена только для соответствия заголовку раздела. При наведении курсора раздел вернется к своему первоначальному размеру.

5. Скрыть вертикальное переполнение

Еще одна важная часть этой техники скрывает вертикальный перелив. После того, как вы установите максимальную высоту по умолчанию для вашего раздела, которая меньше начальной высоты раздела, создается переполнение. Чтобы переполнение не отображалось, нужно в настройках видимости раздела убедиться, что он скрыт.

5. Повторите шаги для всех разделов страницы.

Повторите те же шаги для всех разделов вашей страницы, чтобы создать очевидный пользовательский опыт, который ваш посетителей буду признателен.

Начало дизайна!

Добавить новый раздел

Цвет фона по умолчанию

Теперь, когда мы воспользовались подходом, описанным в этом посте, пришло время приступить к делу! Добавьте обычный первый раздел на новую страницу вашего Веб-сайт WordPress и откройте настройки раздела. Измените цвет фона вашего раздела по умолчанию на цвет по вашему выбору.

  • Цвет фона: # 000000

Параметры divi sectionЛетать над цветом фона

Изменить этот цвет фона зависания.

  • Цвет фона: #ffffff

Раздел параметров DiviДобавить строку 1

Структура столбца

Продолжайте добавлять первую строку в ваш раздел, используя следующую структуру столбцов:

Выберите строку divi

Добавить текстовый модуль

Добавить контент H2

Добавьте текстовый модуль к следующей новой строке. Добавьте копию H2 с символом «▼» по мере развертывания раздела.

О разделе diviИзменить цвет значка

Настройки текста H2

Перейдите на вкладку Module Design и измените настройки текста H2.

  • Заголовок 2 Шрифт: Trebuchet
  • Название 2 Вес шрифта: Ultra Bold
  • Заголовок 2 Выравнивание текста: слева
  • Заголовок 2 Цвет текста: #ff0f3b
  • Заголовок 2 Размер текста: 100 пикселей (рабочий стол), 80 пикселей (планшет), 60 пикселей (телефон)
  • Заголовок 2 Межбуквенный интервал: -5px

Настроить заголовок divi

Добавить модуль деления

видимость

Второй и последний модуль, который нам нужен в этой строке, - это модуль деления. Убедитесь, что в настройках видимости включена опция «Показать разделитель».

  • Показать разделитель: да

Добавить разделитель diviЦвет

Затем перейдите на вкладку «Дизайн» и измените цвет разделителя.

  • Цвет: #ff0f3b

Добавить разделитель на diviкалибровка

Также измените параметры размеров модуля.

  • Вес делителя: 2px
  • Ширина: 14%

Настроить разделитель

Добавьте строку 2

Структура столбца

Следующий ряд! Здесь вам нужно будет разместить все содержание который вы хотите отобразить после наведения (на рабочем столе) или щелчка (на планшете и мобильном устройстве). Мы используем следующую структуру столбцов, но учтите, что вы можете добавить столько строк и модулей, сколько захотите, и настроить их в соответствии со своими потребностями:

Добавить раздел с двумя столбцами divi

Добавить текстовый модуль в столбец 1

Добавить контент

Поместите текстовый модуль в первый столбец с содержанием по вашему выбору.

Добавить текстовое поле diviНастройки текста

Перейдите на вкладку «Дизайн» текстового модуля и измените ориентацию текста.

  • Ориентация текста: Обоснуйте

Текстовый параметр Divi

Добавить текстовый модуль в столбец 2

Добавить контент

Также добавьте текстовый модуль во второй столбец с содержанием по вашему выбору.

Добавить зону содержимого 2

Настройки текста

Опять же, измените ориентацию текста в настройках текста модуля.

  • Ориентация текста: Обоснуйте

Текстовый параметр Divi

Добавьте параметры размеров в раздел

Размер по умолчанию

После того, как вы закончили свой раздел, пришло время создать эффект наведения. Откройте настройки раздела и измените максимальную высоту для разных размеров экрана:

  • Максимальная высота: 300px (рабочий стол), 280px (планшет), 260px (телефон)

Размер конструктора Divi

парящий

Также включите опцию наведения на максимальную высоту и добавьте значение, достаточно большое, чтобы покрыть все элементы, независимо от размера экрана. Это значение гарантирует, что все ваши элементы будут отображаться без превышения начального размера контейнера раздела.

  • Максимальная высота: 5000px

парящий

Вертикальное переполнение

Затем перейдите на вкладку «Дополнительно» раздела и измените вертикальное перетекание. Это скроет все содержимое, выходящее за пределы контейнера раздела.

  • Вертикальный перелив: скрытый

Настройка экрана

Переходы

Чтобы создать плавный переход, мы также меняем настройки перехода на вкладке «Дополнительно».

  • Продолжительность перехода: 800ms
  • Время перехода: 500 мс

Настройки перехода

Клонируйте весь раздел столько раз, сколько хотите

Создав первую секцию эстакады, вы можете клонировать ее столько раз, сколько захотите.

Клонировать разделы diviИзменить заголовки разделов

Конечно, вы захотите изменить дубликаты заголовков разделов.

Модификация раздела Divi

Изменить цвета текста H2

Чтобы создать вариации в дизайне, мы также изменим цвета текста модулей, выделенных на экране печати ниже.

  • Заголовок 2 Цвет текста: #c4c4c4

Модификация цветов заголовков divi

Изменить цвета разделителя

С разделением цветов, которые сопровождают текстовые модули.

  • Цвет: #c4c4c4

обследование

Теперь, когда все шаги выполнены, давайте еще раз посмотрим на результат.

Предварительный просмотр дизайна Divi

Заключительные мысли

В этой статье мы показали вам, как творчески использовать новые перетаскиваемые параметры изменения размера Divi для создания уникальных взаимодействий с использованием наведенных разделов на любом создаваемом вами веб-сайте. Мы начали с объяснения подхода и продолжили воссозданием примера дизайна с нуля. Вы также можете бесплатно скачать файл JSON! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.