Загрузите БЕСПЛАТНУЮ и расширенную клиентскую витрину Hover / Click Design для Divi

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО The Client Showcase Hover / Click Design

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Удалите верхнее и нижнее заполнение по умолчанию для следующей строки.

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

Столбец 2 Настройки

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

Интервал

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

• Верхняя обивка: 9vw
• Нижняя обивка: 9vw
• Левое заполнение: 8vw
• Правое заполнение: 8vw

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

Добавить содержание H3 и абзаца

Завершив настройку строк и столбцов, продолжите, добавив текстовый модуль в столбец 1. Добавьте информацию о клиенте в поле содержимого.

Градиентный фон

Далее перейдите к настройкам фона и примените следующий градиентный фон:

• Цвет 1: rgba (43,135,218,0)
• Цвет 2: rgba (0,0,0,0.55)
• Поместите градиент над фоновым изображением: Да

Фоновая картинка

Загрузите также фоновое изображение.

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

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

• Шрифт текста: Lato
• Цвет текста: #dbdbdb
• Размер текста: 1vw (рабочий стол), 1.8vw (планшет), 2.3vw (телефон)
• Высота текстовой строки: 1.5vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)

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

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

• Шрифт заголовка 3: Playfair Display
• Толщина шрифта заголовка 3: полужирный
• Цвет текста заголовка 3: #ffffff
• Размер текста заголовка 3: 3vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Высота строки заголовка 3: 1,6 em

Интервал

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

• Верхняя маржа: 9vw
• Нижняя маржа: 9vw
• Левое поле: 7vw (рабочий стол), 16vw (планшет), 17vw (телефон)
• Правое поле: 7vw (рабочий стол), 16vw (планшет), 17vw (телефон)
• Верхняя подкладка: 32vw (рабочий стол), 55vw (планшет), 49vw (телефон)
• Нижняя обивка: 3vw (рабочий стол), 6vw (планшет и телефон)
• Левое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Правое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

Коробка Тень

Мы также добавляем красочную тень коробки.

• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 0 пикселей
• Сила распространения тени коробки: 7vw
• Цвет тени: # ffcf0f

CSS ID

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

• Идентификатор CSS: photo-display-1

Клонировать текстовый модуль пять раз

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

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

Измените содержимое и фоновое изображение в каждом дубликате.

Изменить цвет тени коробки для каждого дубликата

Вместе с тенью коробки.

• Цвет тени: # 9f89ed

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

Каждому текстовому модулю в столбце 1 нужен уникальный идентификатор CSS. Первый текстовый модуль в столбце содержит идентификатор CSS «photo-display-1», второму - «photo-display-2», третьему «photo-display-3» и т. Д. Добавьте также класс CSS к каждому дублированному текстовому модулю (убедитесь, что вы не добавляете его к исходному текстовому модулю).

• CSS ID: photo-display-2 (от 2 до 6)
• Класс CSS: photo-hide-first (каждый текстовый модуль в столбце 1, кроме первого)

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

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

После того, как вы завершили все 6 модулей в столбце 1, вы можете переходить ко второму столбцу. Здесь первый модуль, который нам понадобится, - это текстовый модуль с некоторым содержимым H2.

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

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

• Шрифт заголовка 2: Playfair Display
• Цвет текста заголовка 2: # 636363
• Размер текста заголовка 2: 3vw (рабочий стол), 6vw (планшет и телефон)
• Интервал между буквами заголовка 2: 0,1vw
• Высота строки заголовка 2: 1,2 м

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

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

Добавьте еще один текстовый модуль в столбец 2 с некоторым содержанием абзаца по вашему выбору.

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

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

• Шрифт текста: Lato
• Выравнивание текста: по ширине
• Размер текста: 0.9vw (рабочий стол), 2vw (планшет), 2.7vw (телефон)
• Высота текстовой строки: 2,1 м

Интервал

Измените также значения полей в настройках интервала.

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw
• Правое поле: 7vw

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

Видимость

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

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

Линия

Перейдите на вкладку дизайна и измените цвет линии.

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

Интервал

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

• Нижняя маржа: 7vw
• Левое поле: 14vw (рабочий стол), 39vw (планшет), 38vw (телефон)
• Правое поле: 14vw (рабочий стол), 39vw (планшет), 38vw (телефон)

Преобразовать Повернуть

Поверните разделительный модуль.

• Слева: 90 градусов

Преобразовать Перевести

И переместите его с помощью некоторого настраиваемого преобразования значений для разных размеров экрана.

• Справа: 2vw (рабочий стол), 3vw (планшет и телефон)
• Внизу: -17,3vw (рабочий стол), -43vw (планшет и телефон)

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

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

Следующий необходимый нам модуль - это еще один текстовый модуль. Убедитесь, что вы добавили соответствующее имя клиента в поле содержимого (сопоставьте его с первым текстовым модулем в столбце 1).

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

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

• Шрифт текста: Lato
• Стиль шрифта текста: прописные.
• Размер текста: 1.3vw (рабочий стол), 2.5vw (планшет), 3vw (телефон)
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 1,2 м

Интервал

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

• Верхняя маржа: 1em
• Нижняя маржа: 1em

CSS ID

Перейдите на вкладку дизайна и добавьте CSS ID. Убедитесь, что номер совпадает с номером соответствующего текстового модуля в столбце 1.

• Идентификатор CSS: photo-click-1

Клонировать текстовый модуль №3 пять раз

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

Изменить содержимое каждого дубликата (сопоставить с текстовыми модулями в столбце 1)

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

Изменить идентификатор CSS для каждого дубликата

И сопоставьте идентификатор CSS каждого дубликата с текстовым модулем в столбце 1.

• CSS ID: photo-click-2 (от 2 до 6)

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

Вставить код CSS

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

<style>
.photo-hide-first {
display: none;
}
</style>

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

Вставить код JQuery

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

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

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

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

Рабочий стол

Мобильный

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

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

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