Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62.

Хотите знать, как поставить модуль Blurb из Дива выделены при размытии других?

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

Один из самых простых способов сделать такой список привлекательным — использовать модуль Blurb из Дива. Модули Blurb позволяют красиво структурировать содержимое списка, предоставляя бесконечные возможности дизайна.

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

Пойдем.

обследование

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

Настольный компьютер

выделите модуль Divi Blurb, размывая другие

Мобильная версия

выделите модуль Divi Blurb, размывая другие

Начнем проектирование с Divi

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

Фоновый цвет

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

Вы также можете проконсультироваться: Divi: Как создать раздел участников команды в виде карусели

Откройте настройки раздела и измените цвет фона.

  • Предыстория: #eaeaea

Расстояние

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

  • Поле (сверху, снизу, слева и справа): 2vw
  • Отступы (сверху и снизу): 0 пикселей

Граница

Завершите параметры сечения, добавив радиус границы.

  • Закругленные углы: 20 пикселей

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

Структура колонны

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

Калибровка

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

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

Пользовательский CSS (основной элемент)

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

Легко создайте свой сайт с Elementor

Elementor позволяет создавать Легко и бесплатно любой дизайн веб-сайта или блога с профессиональным видом. Перестаньте платить много за веб-сайт, который вы можете сделать сами.

align-items: center;
Рекламный модуль Divi

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

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

Единственный модуль, который мы используем в этом руководстве, — это модуль Blurb.

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

Добавьте первый модуль Blurb в столбец 1 и вставьте содержимое по вашему выбору.

Выберите значок

Затем выберите значок.

  • Использовать значок: ДА
  • Значок: см. скриншот

Градиент фона (при наведении)

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

  • Остановки градиента
    • 20%: #фффффф
    • 80%: #0f1bff
  • Тип градиента: Линейный

Настройки значков (рабочий стол)

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

  • Цвет значка: #ffffff
  • Изображение/значок со скругленными углами: 50 пикселей
  • Ширина границы изображения/значка: 5px
  • Цвет границы: #ffffff
  • Размещение изображения/значка: вверху
  • Выравнивание изображения/значка: по левому краю

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

Меняйте разные цвета значков при наведении.

  • Цвет значка (при наведении): #0f1bff
  • Цвет фона изображения/значка (при наведении): #f7f7f7

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

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

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

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

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

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

Настройки текста описания (рабочий стол)

Вы хотите продавать свою продукцию в Интернете?

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

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

  • Основной шрифт: 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, размывая другие

Мобильная версия

выделите модуль Divi Blurb, размывая другие

Скачайте DIVI прямо сейчас!!!

Заключение

В этой статье мы показали вам, как проявить творческий подход с модулями Blurb, которыми вы делитесь на своем Веб-сайт

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...

%d блоггеры, как этой странице: