Пропустить

Как создать контекстное демо-видео на Divi

Divi: самая простая тема WordPress для использования

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

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

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

cyber monday.jpg

Как получить эксклюзивную целевую страницу релиза программного обеспечения для Cyber ​​Monday

Прежде чем приступить к такому использованию, вам следует ознакомиться с эксклюзивной целевой страницей Cyber ​​Monday, которую вы можете получить, став новым участником Elegant Themes, обновив существующую учетную запись или уже будучи постоянным участником. с нами. Если вы уже являетесь пожизненным участником, вы можете войти в нашу личную зону и загрузить все наши эксклюзивные страницы здесь. Всем другим пользователям необходимо будет использовать кнопку ниже для покупки или обновления, прежде чем они смогут завершить оставшуюся часть нашего руководства.

Уже пожизненный член? Вы можете скачать пакет прямо сейчас, не нужно участвовать в акции Киберпонедельника!

Как создать контекстное демо-видео на Divi

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

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

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

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

офис

конечный результат divi video popup.gif

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

результат мобильного видео popup divi.gif

Давайте начнем!

Используйте бесплатный плагин Video PopUp

Установите и активируйте плагин

Первое, что нужно сделать, это загрузить плагин бесплатно Видео PopUp . Вы можете найти этот плагин, перейдя в Веб-сайт WordPress> Плагины> Добавить> Найдите 'Video PopUp'. Как только вы найдете этот плагин, установите его. Как только вы закончите, не забудьте активировать плагин.

video popup.jpg

Настройки плагина

Для продолжения перейдите к общим настройкам этого плагина и активируйте две опции вверху.

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

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

Конфигурация видео popup.jpg

Добавить новую страницу с помощью целевой страницы версии программного обеспечения

Добавьте новую страницу и включите использование Visual Builder

Пора начинать претворять дела в жизнь! Добавьте новую страницу, дайте странице название и сразу активируйте Visual Builder.

создать новую страницу divi.jpg

Скачать макет версии программного обеспечения из сохраненных макетов

Перейдите в «Сохраненные макеты» и загрузите загруженную целевую страницу.

загруженный макет divi.jpg

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

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

добавить текст над модулем blurb.jpg

Добавить изображение в область содержимого

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

Добавить медиа-канал для разблокировки divi.jpg

выберите изображение divi.jpg

Добавить копию в область содержимого

Продолжите, добавив копию чуть ниже изображения.

дублирующий модуль blurb.jpg

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

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

активировать центральную ориентацию.jpg

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

И мы также изменим параметры текста ссылки соответственно:

  • Ссылка Шрифт: Каюта
  • Вес шрифта ссылки: жирный шрифт
  • Ссылка Цвет текста: rgba (162,176,193,0.7)
  • Размер текста ссылки: 17px
  • Высота линии ссылки: 1.6em

дизайн меню link divi.jpg

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

Измените цвет текста наведения.

  • Цвет текста ссылки: # a2b0c1

изменить цвет ссылки divi.jpg

расстояние

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

  • Top Marign: -20vw

установить верхнее поле divi.jpg

Добавить контекстное чтение в содержимое текстового модуля

Перейти в текстовый редактор

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

редактировать текстовый модуль в режиме текстового редактора divi.jpg

Добавить ссылку на весь контент

Свяжите свое место с контентом со всплывающим окном, добавив ссылку на изображение и копию. Обязательно замените URL-адрес ссылки своим собственным.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

добавьте ссылку на изображение с видео divi.jpg

Удалите модуль Blurb из кнопки воспроизведения

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

удалите неиспользуемый модуль Blur

Заключительные мысли

Как видите, добавить всплывающее окно на Divi с помощью плагина Video Popup довольно просто. Это позволит вам размещать видеоролики в своем блоге без автоматического встраивания их в контент.

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
5 акции
доля4
чирикать
Регистрация1