Использование параметров преобразования Divi для создания расширяющегося содержимого раздела при наведении курсора

Сегодня мы собираемся выделить вариант дизайна шкалы трансформации, который поставляется с новыми опциями трансформации Divi. Более того, мы собираемся воссоздать потрясающий дизайн, который позволяет элегантно расширять разделы при наведении курсора.

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

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

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

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

Рабочий стол

Мобильный

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

Добавить раздел # 1

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

Видимость

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

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

Цвет

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

• Цвет: # 000000

Размеры

Также измените значения размеров.

• Вес разделителя: 1px
• Высота: 0 пикселей

Интервал

И увеличьте длину разделителя, добавив отрицательные левые и правые поля.

• Левое поле: -135vw (рабочий стол), -300vw (планшет), -340vw (телефон)
• Правое поле: -135vw (рабочий стол), -300vw (планшет), -340vw (телефон)

Добавить раздел # 2

Фоновый цвет

Переходим к следующему регулярному разделу! После того, как вы добавили новый раздел, откройте настройки раздела и добавьте полностью белый цвет фона.

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

Интервал

Затем перейдите к настройкам интервалов и добавьте несколько настраиваемых полей сверху и снизу.

• Верхняя обивка: 5vw
• Нижняя обивка: 5vw

Граница по умолчанию

Также добавьте границу к разделу.

• Ширина границы: 1 пикс.
• Цвет границы: # 000000

Граница при наведении

И удалите ширину границы при наведении.

• Ширина границы: 0 пикселей

Тень бокса по умолчанию

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

• Сила размытия тени коробки: 80 пикселей
• Цвет тени: rgba (0,0,0,0)

Hover Box Shadow

Измените цвет тени при наведении, используя следующий цветовой код:

• Цвет тени: rgba (0,0,0,0.13)

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину раздела.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

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

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

Пора начинать добавлять модули! Первый модуль, который нам нужен, - это текстовый модуль с некоторым содержанием H2.

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

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

• Шрифт заголовка 2: Abril Fatface
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 7vw

Интервал

Также добавьте некоторые пользовательские значения маржи.

• Нижняя маржа: 5vw
• Левое поле: 5vw
• Правое поле: 5vw

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

Видимость

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

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

Цвет

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

• Цвет: # 000000

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

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

Во второй ряд! Используйте следующую структуру столбцов:

Размеры

Мы снова убеждаемся, что строка занимает всю ширину экрана, изменяя настройки размера на вкладке «Дизайн».

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

• Левое заполнение: 10vw
• Правое заполнение: 10vw

Отображать

Чтобы все три столбца отображались рядом друг с другом на экранах меньшего размера, мы собираемся добавить одну строку кода CSS к основному элементу строки.

display: flex;

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

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

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

Выбрать значок

Далее выберите значок.

Настройки значков

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

• Цвет значка: # 000000

Настройки текста заголовка

Перейдите к настройкам текста заголовка и измените настройки в соответствии со своими предпочтениями.

• Шрифт заголовка: Abril Fatface
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 000000
• Размер текста заголовка: 1.5vw (рабочий стол), 2.5vw (планшет), 3.5vw (телефон)
• Высота строки заголовка: 2em

Настройки основного текста

Сделайте то же самое с настройками основного текста.

• Шрифт основного текста: Open Sans
• Выравнивание основного текста: по центру
• Цвет основного текста: # 666666
• Размер основного текста: 0.8vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Высота линии тела: 2em

Интервал

И последнее, но не менее важное: добавьте настраиваемые левые и правые поля в модуль Blurb.

• Левое поле: 2vw
• Правое поле: 2vw

Клонировать модуль Blurb дважды и поместить в оставшиеся столбцы

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

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

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

Переходим к следующему и последнему ряду. Выберите для него следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и позвольте строке занять всю ширину раздела, изменив настройки размера.

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Добавить модуль кнопок

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

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

Выравнивание

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

• Расположение кнопок: по центру

Настройки кнопок

Затем измените настройки кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1.5vw (рабочий стол), 2.5vw (планшет и телефон)
• Цвет текста кнопки: # 000000
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: # 000000
• Радиус границы кнопки: 1px
• Шрифт кнопки: Open Sans
• Толщина шрифта: Ультра полужирный

Интервал

И создайте форму для кнопки, используя некоторые настраиваемые значения полей и отступов.

• Верхняя маржа: 5vw
• Верхняя обивка: 2vw
• Нижняя обивка: 2vw
• Левое заполнение: 10vw
• Правое заполнение: 10vw

Добавить настройки преобразования в раздел №2

Добавить масштаб преобразования по умолчанию в раздел №2

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

• Внизу: 60% (компьютер), 90% (планшет и телефон)
• Справа: 60% (компьютер), 90% (планшет и телефон)

Масштаб преобразования при наведении курсора на раздел №2

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

• Внизу: 90%
• Правильно: 90%

Клонировать раздел дважды

Затем дважды клонируйте вторую секцию (или столько раз, сколько хотите).

Добавить Transform Rotate в модуль Divider в разделе №1

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

• Слева: 90 градусов

Скачайте БЕСПЛАТНО макет расширяющегося сечения

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

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

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

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

СКАЧАТЬ

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

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

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

Рабочий стол

Мобильный

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

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