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

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

С Divi вы можете отображать свои отзывы именно так, как вы хотите. Чтобы вдохновить вас, мы покажем вам, как создать потрясающий и уникальный способ демонстрации отзывов с наложением на них курсора.

Давайте приступим к делу!

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

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

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

Давайте начнем! Добавьте новую страницу или откройте существующую и добавьте новый обычный раздел.

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

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

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

Размеры

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

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Поле слева в столбце 2: 2vw (рабочий стол), 3vw (планшет и телефон)
• Правое заполнение столбца 2: 11vw (рабочий стол), 3vw (планшет и телефон)

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

Загрузить изображение

Пора начинать добавлять различные модули! Начните с модуля изображения в первом столбце. Загрузите понравившееся портретное изображение.

Выравнивание изображения

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

• Выравнивание изображения: по левому краю

Размеры

Затем измените настройки размера.

• Ширина: 78% (рабочий стол), 70% (планшет и телефон)
• Выравнивание модуля: слева

Добавить модуль перекрытия текста при наведении в столбец 1

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

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

Фон по умолчанию

Продолжите, добавив цвет фона.

• Цвет фона: rgba (255,255,255,0)

Фон при наведении

Добавьте другой цвет фона при наведении курсора.

• Цвет фона: # 0f1bff

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

Затем измените настройки текста.

• Цвет текста: #ffffff
• Размер текста: 0 пикселей
• Высота текстовой строки: 0 пикселей

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

Внесите некоторые изменения в настройки текста при наведении курсора.

• Размер текста: 19 пикселей
• Высота текстовой строки: 2em

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

Также необходимо изменить настройки текста заголовка.

• Толщина шрифта заголовка 3: Ультра полужирный
• Стиль шрифта заголовка 3: прописные
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 0 пикселей
• Высота строки заголовка 3: 0em

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

Добавляйте разные значения при наведении.

• Размер текста заголовка 3: 35 пикселей
• Высота строки заголовка 3: 1,1 em

Интервал

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

• Верхнее поле: -100 пикселей
• Левое поле: 50 пикселей
• Правое поле: 50 пикселей
• Верхний отступ: 40 пикселей
• Нижний отступ: 60 пикселей

Изменить ориентацию текста

Вернитесь к настройкам текста и измените ориентацию текста.

• Ориентация текста: по центру

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

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

• Горизонтальное положение тени блока: 1000 пикселей
• Положение тени блока по вертикали: -400 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 250 пикселей
• Цвет тени: rgba (175,175,175,0.13)

Hover Box Shadow

Чтобы создать специальный эффект перекрытия при наведении, также добавьте тень блока при наведении.

• Горизонтальное положение тени блока: -73px
• Вертикальное положение тени блока: -49 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 10 пикселей
• Цвет тени: rgba (255,182,12,0,53)

Переходы

Чтобы создать плавный переход, измените продолжительность перехода на дополнительной вкладке.

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

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

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

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

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

Затем измените настройки текста заголовка.

• Шрифт заголовка 3: Goudy Bookletter 1911 г.
• Выравнивание текста заголовка 3: по левому краю
• Размер текста заголовка 3: 3.5vw (рабочий стол), 40px (планшет), 30px (телефон)
• Высота строки заголовка 3: 1,1 em

Интервал

Продолжите, добавив несколько значений пользовательского интервала.

• Верхнее поле: 7vw (рабочий стол), 100px (планшет), 50px (телефон)

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

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

Добавьте еще один текстовый модуль со всей характеристикой прямо под заголовком «Текстовый модуль».

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

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

• Высота текстовой строки: 2.2em
• Ориентация текста: влево

Интервал

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

• Верхнее поле: 4vw (рабочий стол), 50px (планшет и телефон)

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

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

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

Размеры

Откройте настройки строки и измените настройки размера.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхнее поле: 100 пикселей
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Поле слева в столбце 1: 11vw (рабочий стол), 3vw (планшет и телефон)
• Правое заполнение столбца 1: 2vw (рабочий стол), 3vw (планшет и телефон)

Клонировать текстовые модули предыдущей строки и поместить в столбец 1

Вернитесь к предыдущей строке и клонируйте оба модуля в столбце 2. После этого поместите дубликаты в первый столбец новой строки.

Изменить ориентацию текста

Измените ориентацию текста обоих модулей.

• Ориентация текста: вправо

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

Загрузить изображение

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

Выравнивание изображения

Измените выравнивание изображения модуля.

• Выравнивание изображения: вправо

Размеры

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

• Ширина: 78% (рабочий стол), 70% (планшет и телефон)
• Выравнивание модуля: справа

Интервал

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

• Верхнее поле: 50 пикселей (планшет и телефон)

Добавить модуль перекрытия текста при наведении в столбец 2

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

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

Фон по умолчанию

Затем добавьте в модуль фоновое изображение.

• Цвет фона: rgba (255,255,255,0)

Фон при наведении

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

• Цвет фона: # 690cff

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

Затем измените настройки текста.

• Цвет текста: #ffffff
• Размер текста: 0 пикселей
• Высота текстовой строки: 0 пикселей
• Ориентация текста: по центру

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

Внесите некоторые изменения при наведении курсора.

• Размер текста: 19 пикселей
• Высота текстовой строки: 2em

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

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

• Толщина шрифта заголовка 3: Ультра полужирный
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 0 пикселей
• Высота строки заголовка 3: 0em

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

С небольшими изменениями при наведении курсора.

• Размер текста заголовка 3: 35 пикселей
• Высота строки заголовка 3: 1,1 em

Интервал

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

• Верхнее поле: -80 пикселей
• Левое поле: 50 пикселей
• Правое поле: 50 пикселей
• Верхний отступ: 40 пикселей
• Нижний отступ: 60 пикселей

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

Добавьте тень блока по умолчанию в текстовый модуль.

• Горизонтальное положение тени блока: -1000 пикселей
• Вертикальное положение тени блока: -420 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 250 пикселей
• Цвет тени: rgba (175,175,175,0.13)

Hover Box Shadow

И измените тень окна при наведении.

• Горизонтальное положение тени блока: -73px
• Вертикальное положение тени блока: -49 пикселей
• Сила размытия тени коробки: 0 пикселей
• Сила распространения тени коробки: 10 пикселей
• Цвет тени: rgba (12,255,238,0.53)

Переходы

И последнее, но не менее важное: создайте плавный переход, изменив продолжительность перехода.

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

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

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

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

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