Как воссоздать пошаговое видео по клику от ET с помощью Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите макет пошагового руководства Click Video БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Подпишитесь на наш канал Youtube

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

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

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

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 2
• Ширина: 85vw (рабочий стол), 90% (планшет и телефон)
• Максимальная ширина: 100%

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

Далее откройте настройки столбца 1.

Интервал

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

• Верхняя прокладка: 5vw (рабочий стол), 0vw (планшет и телефон)

CSS-класс

Перейдите на вкладку «Дополнительно» и добавьте класс CSS. Позже мы собираемся использовать этот класс CSS для создания эффекта сетки на планшете и мобильном телефоне.

• Класс CSS: элемент-адаптивная сетка

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

Добавить заголовок

Начнем добавлять модули! Для каждого интерактивного элемента мы будем использовать модуль Blurb. Мы начнем с первого и повторно воспользуемся им для остальных элементов щелчка. Добавьте новый модуль Blurb в столбец 1 и введите название по вашему выбору.

Выбрать значок

Далее выберите значок.

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

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

• Цвет значка: # e8e9ea
• Расположение значков: слева
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 2vw (рабочий стол), 4.5vw (планшет), 7vw (телефон)

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

Измените цвет значка при наведении.

• Цвет значка: # b0c8ff

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

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

• Шрифт заголовка: Lato
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: прописные
• Размер текста заголовка: 0.8vw (рабочий стол), 1.7vw (планшет), 2.5vw (телефон)
• Высота строки заголовка: 2vw (рабочий стол), 4.5vw (планшет), 7vw (телефон)

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

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

• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 0,5 Вт (рабочий стол), 1,5 Вт (планшет и телефон)
• Левое заполнение: 1,2 МВт (настольный ПК и планшет), 5 МВт (телефон)
• Правая прокладка: 1,2 МВт (настольный ПК и планшет), 5 МВт (телефон)

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

Создайте эффект наведения подсветки, изменив значения поля наведения.

• Левое поле: -0.5vw
• Правое поле: -0,5vw

Граница

Также добавьте закругленные углы.

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

Наряду с тонкой тенью коробки.

• Положение прямоугольной тени по вертикали: 10 пикселей
• Сила размытия тени коробки: 70 пикселей
• Цвет тени: rgba (0,0,0,0.11)

Hover Box Shadow

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

• Цвет тени: rgba (103,151,255,0.22)

CSS ID и класс

И последнее, но не менее важное: перейдите на расширенную вкладку модуля Blurb и добавьте идентификатор и класс CSS.

• Идентификатор CSS: video-walkthrough-item-1
• Класс CSS: видео-элемент-курсор

Клонировать модуль Blurb три раза

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

Изменить содержимое

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

Изменить все повторяющиеся идентификаторы CSS модуля Blurb

Вместе с идентификаторами CSS.

• 1) Построить визуально: видео-пошаговое руководство-элемент-1
• 2) Эффекты: видео-прохождение-предмет-2
• 3) Разделители формы: видео-пошаговое руководство-пункт-3
• 4) Массовое редактирование: видео-пошаговое руководство-пункт-4

Повторное использование столбца 1

Удалить столбец 3

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

Клонировать столбец 1 и разместить внизу

Клонируйте первый столбец (содержащий модули Blurb) и поместите дубликат столбца внизу.

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

Измените структуру столбцов на ту, которая была выбрана в начале этого руководства.

Изменить все содержимое модуля Blurb в столбце 3

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

Изменить все идентификаторы CSS модуля Blurb в столбце 3

Вместе с идентификаторами CSS.

• 5) Библиотека макетов: видео-прохождение-элемент-5
• 6) Преобразования: видео-прохождение-предмет-6
• 7) Состояния наведения: видео-прохождение-предмет-7
• 8) Найти и заменить: видео-прохождение-предмет-8

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

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

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

Видео Фон

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

• Приостановить видео, когда его нет в поле зрения: Да

Размеры

Перейдите на вкладку «Дизайн» и добавьте к ширине «100%».

• Ширина: 100%

Интервал

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

• Верхняя прокладка: 15vw (рабочий стол), 24vw (планшет), 26vw (телефон)
• Нижняя прокладка: 15vw (рабочий стол), 24vw (планшет), 26vw (телефон)

Граница

Продолжайте, добавляя «10 пикселей» к каждому из углов.

Коробка Тень

Наряду с тонкой тенью коробки.

• Сила размытия тени коробки: 30 пикселей
• Сила распространения тени коробки: -5 пикселей
• Цвет тени: rgba (0,0,0,0.11)

CSS ID

И последнее, но не менее важное: добавьте идентификатор CSS.

• CSS ID: видео-пошаговое руководство-1

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

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

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

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

Измените все идентификаторы CSS для всех повторяющихся текстовых модулей и добавьте класс CSS для всех повторяющихся текстовых модулей

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

• Текстовый модуль 1: видео-пошаговое руководство-1
• Текстовый модуль 2: видео-пошаговое руководство-2
• Текстовый модуль 3: видео-пошаговое руководство-3
• Текстовый модуль 4: видео-пошаговое руководство-4
• Текстовый модуль 5: видео-пошаговое руководство-5
• Текстовый модуль 6: видео-пошаговое руководство-6
• Текстовый модуль 7: видео-пошаговое руководство-7
• Текстовый модуль 8: видео-пошаговое руководство-8
• Класс CSS: не первое видео

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

После того, как вы заполнили вторую строку, самое время начать добавлять код. Чтобы функция щелчка работала, мы будем использовать некоторый код CSS и JQuery. Мы разместим код в двух отдельных модулях кода. Начните с добавления первого модуля кода в столбец 1.

Вставить код CSS страницы

Добавьте следующие строки кода CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

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

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

Вставить код JQuery функции щелчка

Введите следующие строки кода JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Выполнив этот шаг, вы можете сохранить свою страницу и выйти из Visual Builder!

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

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

Рабочий стол

Мобильный

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

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

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