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

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

В сегодняшнем руководстве мы сделаем еще один шаг и покажем вам, как выделить зависший модуль Blurb, размыв другие отображаемые вами. Это отличный способ сосредоточить внимание на одном модуле Blurb за раз, не позволяя другим модулям Blurb отвлекать читателя. Как только посетитель переходит к другому модулю Blurb, он становится выделенным. Вы также сможете бесплатно скачать файл JSON макета!

Давайте перейдем к этому.

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО макет модуля всплывающего сообщения

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

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

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

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

СКАЧАТЬ

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

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

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

Фоновый цвет

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

• Фон Coor: #eaeaea

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw
• Левое поле: 2vw
• Правое поле: 2vw
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Граница

Завершите настройки раздела, добавив некоторый радиус границы.

• Все углы: 20 пикселей

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

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

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

Размеры

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

• Выровнять высоту столбца: Да
• Ширина: 90%
• Максимальная ширина: 1580 пикселей
• Мин. Высота: 500 пикселей (рабочий стол), авто (планшет и телефон)

Главный элемент

Выровняйте содержимое столбца, добавив одну строку кода CSS к основному элементу строки.

align-items: center;

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

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

Единственный модуль, который мы используем в этом руководстве, - это модуль Blurb, но вы можете заменить этот модуль любым модулем по вашему выбору, если добавите класс CSS, которым мы поделимся на следующих этапах. Добавьте первый модуль Blurb Module в столбец 1 и вставьте контент по вашему выбору.

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

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

Наведите градиентный фон

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

• Цвет 1: #ffffff
• Цвет 2: # 0f1bff
• Тип градиента: линейный
• Стартовая позиция: 20%
• Конечная позиция: 20%

Настройки значков по умолчанию

Перейдите на вкладку дизайна модуля и измените настройки значка следующим образом:

• Цвет значка: #ffffff
• Значок Круга: Да
• Цвет круга: #ffffff
• Размещение изображения / значка: вверху
• Выравнивание изображения / значка: влево

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

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

• Цвет значка: # 0f1bff
• Цвет круга: # f7f7f7

Настройки текста заголовка по умолчанию

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

• Шрифт заголовка: Source Sans Pro
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: прописные

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

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

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

Настройки основного текста по умолчанию

Далее идут настройки основного текста.

• Шрифт основного текста: Open Sans
• Высота линии тела: 2em

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

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

• Цвет основного текста: #ffffff

Интервал

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

• Верхний отступ: 50 пикселей
• Нижний отступ: 50 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

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

Мы также используем тень коробки.

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

Hover Box Shadow

Измените цвет тени при наведении.

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

CSS-класс

А чтобы добиться эффекта размытия, нам нужно назначить класс CSS нашему модулю Blurb. Позже мы будем использовать этот класс CSS в некотором коде JQuery.

• Класс CSS: blurb-item

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

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

Клонировать всю строку

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

Индивидуальная настройка модулей Blurb

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

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

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

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

Интервал

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

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

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

Вставить код JQuery и CSS

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

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

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

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

Рабочий стол

Мобильный

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

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

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