Пропустить

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

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

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

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

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

cyber monday.jpg

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

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

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

Как создать контекстное демо-видео на 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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

выберите изображение 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

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

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

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

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

<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