Как создавать разделы при наведении курсора с помощью новых настроек размера и переполнения Divi

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

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

Давайте приступим к делу!

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

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

Рабочий стол

Мобильный

Загрузите макет Hover Sections БЕСПЛАТНО

Чтобы получить доступ к макету бесплатных разделов при наведении курсора, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Подход

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

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

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

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

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

3. Настройте остальную часть содержимого раздела (добавьте столько строк и модулей, сколько хотите).

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

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

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

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

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

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

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

Подпишитесь на наш канал Youtube

Начнем воссоздавать!

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

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

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

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

Цвет фона при наведении

Измените этот цвет фона при наведении курсора.

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

Добавить строку №1

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

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

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

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

Затем добавьте текстовый модуль в новую строку. Добавьте копию H2 вместе с символом «▼», который означает, что что-то будет дальше.

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

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

• Шрифт заголовка 2: Trebuchet
• Толщина шрифта заголовка 2: Ультра полужирный
• Выравнивание текста заголовка 2: по левому краю
• Цвет текста заголовка 2: # ff0f3b
• Размер текста заголовка 2: 100 пикселей (рабочий стол), 80 пикселей (планшет), 60 пикселей (телефон)
• Заголовок 2 Расстояние между буквами: -5 пикселей

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

Видимость

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

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

Цвет

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

• Цвет: # ff0f3b

Размеры

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

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

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

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

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

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

Добавить содержимое

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

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

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

• Ориентация текста: по ширине

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

Добавить содержимое

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

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

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

• Ориентация текста: по ширине

Добавить настройки размера в раздел

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

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

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

Размер при наведении

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

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

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

Затем перейдите на дополнительную вкладку раздела и измените вертикальное перетекание. Это скроет все содержимое, превышающее контейнер раздела.

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

Переходы

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

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

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

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

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

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

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

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

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

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

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

• Цвет: # c4c4c4

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

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

Рабочий стол

Мобильный

Последние мысли

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.