Хотите узнать, как выделить один модуль Divi Blurb, размыв остальные?
Независимо от типа создаваемого вами веб-сайта, скорее всего, в какой-то момент вам понадобится отобразить список различных услуг, этапов и многое другое.
Один из самых простых способов создать привлекательный список подобного рода — использовать модуль 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 и вставьте содержимое по вашему выбору.
Выберите значок
Затем выберите значок.
- Использовать значок: ДА
- Значок: см. скриншот
Градиент фона (при наведении)
Далее, используйте фоновый градиент только при наведении курсора.
- Остановки градиента
- 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
Для достижения эффекта размытия нам потребуется присвоить модулю Blurb CSS-класс. Позже в статье мы будем использовать этот CSS-класс в коде jQuery.
- Класс CSS: рекламный элемент
Дважды клонируйте модуль Blurb и поместите дубликаты в оставшиеся столбцы.
После того, как вы заполните модуль Blurb в столбце 1, вы можете клонировать его дважды и поместить дубликаты в оставшиеся столбцы строки.
Клонировать всю строку
Вы можете клонировать строку столько раз, сколько хотите, в зависимости от того, сколько модулей Blurb вы хотите отобразить на своей странице.
Индивидуальная настройка модулей Blurb
Конечно, вам нужно будет изменить отдельное содержимое каждого модуля Blurb.
Добавить новую строку
Структура колонны
Добавьте в раздел еще одну строку, используя следующую структуру столбцов:
Расстояние
Откройте настройки строки и удалите все отступы по умолчанию сверху и снизу. Это поможет уменьшить пространство, занимаемое этой строкой.
- Отступы (сверху и снизу): 0 пикселей
Добавить модуль кода в столбец
Вставьте код JQuery и CSS
Добавьте модуль Code в столбец строки и вставьте код jQuery и CSS, чтобы добиться нужного эффекта.
Не забудьте разместить код jQuery между тегами <script>, а код CSS — между тегами <style>, как показано на скриншоте ниже.
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 всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...