Хотите знать, как поставить модуль Blurb из Divi выделены при размытии других?
Независимо от типа Веб-сайт вы строите, скорее всего, в какой-то момент вам захочется увидеть список различных сервисов, этапов и т. д.
Один из самых простых способов сделать такой список привлекательным — использовать модуль Blurb из Divi. Модули рекламных объявлений позволяют красиво структурировать содержание из списка, предоставляя вам безграничные возможности дизайна.
В этом уроке мы сделаем еще один шаг и покажем вам, как выделить модуль Blurb при наведении курсора и размыть другие отображаемые вами модули. Это отличный способ выделить один модуль Blurb за раз, не позволяя другим модулям Blurb отвлекать читателя.
Пойдем.
обследование
Прежде чем углубиться в этот урок, давайте быстро взглянем на результат на разных размерах экрана.
Настольный компьютер
Мобильная версия
Начнем проектирование с Divi
Добавить новый раздел
Фоновый цвет
Начните с добавления обычного раздела на новую страницу или ту, над которой вы работаете.
Вы также можете проконсультироваться: Divi: Как создать раздел участников команды в виде карусели
Откройте настройки раздела и измените цвет фона.
- Предыстория: #eaeaea
Расстояние
Также добавьте значения интервалов.
- Поле (сверху, снизу, слева и справа): 2vw
- Отступы (сверху и снизу): 0 пикселей
Граница
Завершите параметры сечения, добавив радиус границы.
- Закругленные углы: 20 пикселей
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку в раздел, используя следующую структуру столбцов:
Калибровка
Пока не добавляя никаких модулей, откройте настройки линии и измените параметры размеров.
- Выровнять высоту столбцов: ДА
- Ширина: 90%
- Максимальная ширина: 1 пикселей
- Минимальная высота: 500 пикселей (для настольных компьютеров), автоматически (для планшетов и телефонов)
Пользовательский CSS (основной элемент)
Выровняйте содержание столбца, добавив одну строку кода CSS к основному элементу строки.
align-items: center;
Добавьте модуль Blurb в столбец 1
Добавить контент
Единственный модуль, который мы используем в этом руководстве, — это модуль Blurb.
Однако вы можете заменить этот модуль любым модулем по вашему выбору, если вы добавите класс CSS, которым мы поделимся на следующих шагах.
Добавьте первый модуль Blurb в столбец 1 и вставьте содержание де Votre Choix.
Выберите значок
Затем выберите значок.
- Использовать значок: ДА
- Значок: см. скриншот
Градиент фона (при наведении)
Затем используйте фоновый градиент только при наведении.
- Остановки градиента
- 20%: #фффффф
- 80%: #0f1bff
- Тип градиента: Линейный
Настройки значков (рабочий стол)
Перейти на вкладку Проект модуля и измените настройки значка следующим образом:
- Цвет значка: #ffffff
- Изображение/значок со скругленными углами: 50 пикселей
- Ширина границы изображения/значка: 5px
- Цвет границы: #ffffff
- Размещение изображения/значка: вверху
- Выравнивание изображения/значка: по левому краю
Настройки значка при наведении
Меняйте разные цвета значков при наведении.
- Цвет значка (при наведении): #0f1bff
- Цвет фона изображения/значка (при наведении): #f7f7f7
Настройки текста заголовка
Продолжите, изменив настройки текста заголовка.
- Шрифт заголовка: Source Sans Pro
- Вес шрифта: полужирный
- Стиль шрифта заголовка: TT (верхний регистр)
Настройки текста заголовка при наведении
Изменение цвета текста заголовка при наведении.
- Цвет текста заголовка: #ffffff
Настройки текста описания (рабочий стол)
Далее идут настройки основного текста.
- Основной шрифт: Open Sans
- Высота линии кузова: 2 см
Настройки текста описания при наведении
Используйте цвет текста при наведении.
- Цвет основного текста (при наведении): #ffffff
Расстояние
Затем перейдите к настройкам интервалов и добавьте пользовательские значения отступов.
- Отступы (сверху, снизу, слева и справа): 50 пикселей
Box Shadow (настольный компьютер)
Мы также используем тень блока.
- Сила размытия тени коробки: 80px
- Сила распространения тени коробки: -20px
- Цвет тени: rgba(255,255,255,0.18)
Коробчатая тень (при наведении)
Измените цвет тени при наведении.
- Цвет тени: rgba(0,0,0,0.18)
Класс CSS
А чтобы эффект размытия получился, нам нужно назначить класс CSS нашему модулю Blurb. Позже в статье мы будем использовать этот класс CSS в коде JQuery.
- Класс CSS: рекламный элемент
Дважды клонируйте модуль Blurb и поместите дубликаты в оставшиеся столбцы.
После того, как вы заполните модуль Blurb в столбце 1, вы можете клонировать его дважды и поместить дубликаты в оставшиеся столбцы строки.
Клонировать всю строку
Вы можете клонировать строку столько раз, сколько хотите, в зависимости от того, сколько модулей Blurb вы хотите отобразить на своей странице.
Индивидуальная настройка модулей Blurb
Конечно, вам нужно будет изменить отдельное содержимое каждого модуля Blurb.
Добавить новую строку
Структура колонны
Добавьте в раздел еще одну строку, используя следующую структуру столбцов:
Расстояние
Откройте настройки строки и удалите все верхние и нижние отступы по умолчанию. Это поможет уменьшить пространство, занимаемое этим рядом.
- Отступы (сверху и снизу): 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');
});
});Читайте также: Divi: Как создать раздел отзывов в виде сетки
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим, как это выглядит на экранах разных размеров.
Настольный компьютер
Мобильная версия
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как проявить творческий подход с модулями Blurb, которыми вы делитесь на своем Веб-сайт.
В частности, мы показали вам, как выделять модуль Blurb при наведении, размывая другие отображаемые вами модули.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты. Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
