Как заменить логотипы клиентов отзывами при наведении / клике с помощью Divi

Ищете способ добавить взаимодействия к логотипам клиентов и соответствующим характеристикам? Благодаря функции адаптивного контента Divi теперь проще, чем когда-либо, отображать различный контент в состоянии модуля по умолчанию и при наведении курсора. В сегодняшнем руководстве по Divi мы продемонстрируем это, показав вам, как заменить логотипы клиентов отзывами при наведении курсора (на рабочем столе) и щелчке мышью (на планшете и телефоне). Мы воспользуемся модулем Blurb, чтобы достичь этого! Вы также сможете бесплатно скачать файл JSON макета!

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

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

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

Рабочий стол

Мобильный

Скачать макет клиентских логотипов БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

Фоновый цвет

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

• Цвет фона: # 000000

Интервал

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

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

Граница

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

• Ширина границы: 1vw
• Цвет границы: #ffffff

Добавить строку №1

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и увеличьте максимальную ширину строки.

• Максимальная ширина: 1500 пикселей

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

Добавить отзывчивый контент H2

Первый модуль, который нам нужен в этой строке, - это текстовый модуль с некоторым адаптивным содержимым H2.

• Рабочий стол: наведите указатель мыши на логотипы клиентов, чтобы увидеть, что они говорят!
• Планшет и телефон. Щелкните логотипы клиентов, чтобы узнать, что они говорят!

Настройки текста H2

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

• Шрифт заголовка 2: Work Sans
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 40 пикселей (рабочий стол), 30 пикселей (планшет), 25 пикселей (телефон)

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

Видимость

Следующий и последний модуль, который нам нужен в этой строке, - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Затем измените цвет линии модуля.

• Цвет линии: #ffffff

Размеры

Также измените настройки размера модуля.

• Вес разделителя: 4 пикселя
• Ширина: 10%
• Выравнивание модуля: по центру

Интервал

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

• Верхнее поле: 100 пикселей

Добавить строку №2

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

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

Размеры

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

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

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

Чтобы центрировать содержимое столбца вашей строки, вам нужно будет 1) включить опцию «Выровнять высоту столбца» (предыдущий шаг) и 2) добавить следующую строку кода CSS к основному элементу вашей строки:

align-items: center;

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

Оставьте содержимое по умолчанию пустым

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

Добавить контент при наведении

Вставьте письменный контент по вашему выбору в оба поля при наведении курсора.

Изображение по умолчанию

Затем загрузите логотип компании по вашему выбору в настройках изображений и значков.

Удалить изображение при наведении

Мы заменим логотипы клиентов при наведении, полностью удалив их в состоянии наведения.

Цвет фона при наведении

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

• Цвет фона: # 191919

Настройки изображения / значка

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

• Выравнивание изображения / значка: по центру

Настройки текста

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

• Цвет текста: светлый

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

Затем измените настройки текста заголовка соответствующим образом:

• Заголовок уровня заголовка: H3
• Шрифт заголовка: Work Sans
• Размер текста заголовка: 24 пикс.
• Высота строки заголовка: 1,4 мкм

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

Также внесите некоторые изменения в настройки основного текста.

• Шрифт основного текста: Open Sans
• Цвет основного текста: # 8c8c8c
• Высота линии корпуса: 2,5 мм

Интервал по умолчанию

Затем перейдите к настройкам интервалов и убедитесь, что в состоянии модуля по умолчанию нет настраиваемых отступов.

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

Расстояние при наведении

Однако при наведении курсора мы создаем пустое пространство для нашего отзыва, используя следующие значения:

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

Переход

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

• Продолжительность перехода: 0 мс

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

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

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

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

Изменение содержимого при наведении курсора на дубликат каждого модуля Blurb

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

Изменить логотип каждого дубликата модуля Blurb

Измените также содержимое каждого дублирующего модуля при наведении курсора, и все готово!

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

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

Рабочий стол

Мобильный

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

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

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