Как добавить расширенные эффекты наведения в модуль Blurb Divi с помощью Hover.css

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

Давайте посмотрим, что мы будем создавать сегодня.

Предварительный просмотр: окончательный результат

В конце этого поста (и после того, как вы познакомились с hover.css), мы покажем вам, как достичь следующего результата:

Конечно, это только верхушка айсберга с точки зрения возможностей hover.css, но это поможет вам начать работу.

Вдохновение

Мы черпали вдохновение из XD Web Design, который использует эффекты hover.css для различных объявлений на своем веб-сайте. В предыдущих сообщениях были запросы на комментарии, которые проявили интерес к тому, как воссоздать определенные модули Blurb. Хотя мы не собираемся воссоздавать их в точности, мы покажем вам основы добавления этих эффектов, чтобы вы могли легко экспериментировать впоследствии.

Как добавить расширенные эффекты наведения в модуль Blurb Divi с помощью Hover.css

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

Загрузите Hover.css на свой сайт

Прежде чем переходить к чему-либо еще, мы сначала познакомим вас с hover.css. Hover.css содержит множество эффектов, которые вы можете использовать для любого типа элемента на вашем веб-сайте. Есть два основных способа добавить эффекты hover.css на ваш сайт; добавив файл CSS или выбрав желаемые эффекты и просто используя этот CSS в Divi Builder.

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

Скачать Hover.css

Теперь для начала вам понадобится файл hover.css, который вы можете найти, перейдя на сайт Яна Ланна. Кроме того, вы также можете щелкнуть здесь, чтобы перейти к файлам на Github. После того, как вы скачали файл, разархивируйте его.

Купить лицензию

Следующее, что вам нужно принять во внимание, - это то, что hover.css платный. Если вы используете свой веб-сайт в коммерческих целях, покупка лицензии является обязательной. У вас есть два типа возможностей покупки:

• Лицензия разработчика (14 долларов США, подходит для 1 проекта)
• Командная лицензия (18 долларов США, подходит для неограниченного количества проектов)

В зависимости от ваших потребностей вы можете приобрести лицензию и использовать эффекты на своем веб-сайте (ах).

Список наведений

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

• 2D переходы
• Фоновые переходы
• Иконки
• Пограничные переходы
• Переходы тени и свечения
• Говорящие пузыри
• Кудри

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

Установка

Хотя вы можете установить hover.css, включив его непосредственно в свою дочернюю тему, вы также можете использовать его отдельные части. Именно этим мы и займемся в этом уроке. Мы возьмем CSS-код определенного эффекта и добавим его прямо в наш Divi Builder. Причина, по которой мы это делаем, заключается в том, что в некоторых случаях (когда мы хотим применить эффект только к элементу модуля) вам придется немного изменить предоставляемый код.

Перейдите в распакованную загруженную папку и найдите файл hover.css.

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

Создание модуля интерактивной рекламы

Теперь, когда мы показали вам, как легко использовать hover.css, пришло время показать вам, как воссоздать интерактивный модуль Blurb, используя предоставленные эффекты. Напоминаем, что давайте посмотрим на конечный результат:

Добавить трехколоночную строку

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

Сделайте строку полной шириной

Следующее, что вам нужно сделать, это сделать строку полной шириной. Для этого откройте настройки строки и перейдите на вкладку «Дизайн». На вкладке «Дизайн»; включите опцию «Сделать эту строку полной шириной» в подкатегории «Размер».

Применить заполнение столбца

Следующее, что вам нужно сделать, это добавить некоторые отступы столбцов, пока вы все еще находитесь на вкладке «Дизайн» в настройках строки. Прокрутите вниз и добавьте 5% к нижнему отступу столбца 1.

Применить тень блока и радиус границы к столбцу

И последнее, что вам нужно сделать в настройках строки, - это перейти на вкладку «Дополнительно». На вкладке «Дополнительно» прокрутите вниз до главного элемента столбца 1, скопируйте и вставьте следующие строки кода CSS:

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

Как только вы это сделаете, вы можете закрыть настройки строки.

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

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

Загрузите изображение и оставьте модуль изображения как есть.

Добавить модуль Blurb

Следующее, что нам нужно добавить в строку, - это модуль Blurb. После того, как вы добавили модуль Blurb, вам необходимо внести в него несколько изменений. Начните с добавления текста заголовка, текста содержимого и выбора значка, а затем перейдите на вкладку «Дизайн».

Настроить значок

На вкладке «Дизайн» первое, с чем вы столкнетесь, - это подкатегория «Изображение и значок». Убедитесь, что в этой подкатегории применяются следующие изменения:

• Цвет значка: #FFFFFF
• Значок круга: ДА
• Цвет круга: # 004370
• Размещение изображения / значка: вверху
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 45 пикселей (рабочий стол), 40 пикселей (планшет), 37 (телефон)

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

Прокрутите ту же вкладку и внесите следующие изменения в подкатегорию «Текст заголовка»:

• Размер шрифта заголовка: 16 (компьютер и планшет), 14 (телефон)
• Цвет текста заголовка: # 004370
• Высота строки заголовка: 2.2em

Добавить настраиваемую маржу

Затем вам нужно будет добавить настраиваемую маржу в модуль Blurb:

• Сверху: 25%
• Правильно: 5%
• Осталось: 5%
• Внизу: 5%

Добавить нижнее поле к заголовку рекламного объявления

И последнее, но не менее важное: перейдите на вкладку «Дополнительно» и добавьте «3 пикселя» к нижнему полю заголовка рекламного объявления:

Добавление эффектов Hover.css в модули

Последняя часть этого поста включает добавление эффектов hover.css. Сначала мы добавим эффекты наведения к модулю изображения и модулю Blurb, а в следующей части этого поста мы добавим эффект наведения только к одному элементу модуля Blurb.

Добавьте класс CSS в модуль изображения

Откройте настройки вашего изображения и перейдите на вкладку Advanced. На вкладке «Дополнительно» запишите класс CSS эффекта наведения, который вы хотите использовать. В этом случае мы применяем эффект ряби, который имеет имя класса CSS «hvr-ripple-out». Опять таки; вы можете найти эти имена классов в файле hover.css в вашей заархивированной папке.

Добавьте класс CSS в модуль Blurb

Аналогичным образом откройте настройки Blurb и перейдите на вкладку «Дополнительно». В этом случае мы собираемся применить эффект сокращения при наведении курсора ко всему модулю. Итак, введите «hvr-shrink» в поле «Класс CSS».

Добавить код CSS

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

Продолжите, поместив следующие строки кода CSS в поле Custom CSS:

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

Это почти те же строки кода CSS, которые вы можете найти в файле hover.css. Единственное, что отличается, - это цвет границы, который используется для эффекта ряби. Он того же цвета, что и значок круга.

Используйте эффекты Hover.css для отдельных элементов в модуле Blurb

Третий эффект, который мы добавили к этому рекламному объявлению, - это линия, которая появляется после наведения курсора на заголовок рекламного объявления. Модуль Blurb содержит разные элементы. Следовательно, мы не можем просто использовать класс hover.css в списке. Вместо этого мы должны назначить модулю идентификатор CSS и использовать класс CSS, специально назначенный заголовку объявления.

Добавить CSS ID в модуль Blurb

Начните с добавления идентификатора CSS в модуль Blurb. В этом случае мы используем «центр».

Добавить код CSS

Продолжите, скопировав и вставив следующие строки кода в то же место, где вы разместили предыдущий код CSS:

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

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

Однако, если вы хотите, чтобы код применялся ко всем размытым изображениям, используйте следующие строки кода CSS:

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

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

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Artwork / shutterstock.com