Одна из эксклюзивных целевых страниц, которую многие предоставляют своим подписчикам в период Киберпонедельника, — это потрясающая целевая страница выпусков программного обеспечения. Этот макет содержит отличные иллюстрации и уникальное использование разделителей разделов, которые удивят читателей. посетителей.
Как получить эксклюзивную целевую страницу релиза программного обеспечения для Cyber Monday
Прежде чем приступить к такому использованию, вам следует ознакомиться с эксклюзивной целевой страницей Cyber Monday, которую вы можете получить, став новым участником Elegant Themes, обновив существующую учетную запись или уже будучи постоянным участником. с нами. Если вы уже являетесь пожизненным участником, вы можете войти в нашу личную зону и загрузить все наши эксклюзивные страницы здесь. Всем другим пользователям необходимо будет использовать кнопку ниже для покупки или обновления, прежде чем они смогут завершить оставшуюся часть нашего руководства.
Уже пожизненный член? Вы можете скачать пакет прямо сейчас, не нужно участвовать в акции Киберпонедельника!
Как создать контекстное демо-видео на Divi
После того, как вы загрузили новую целевую страницу версии программного обеспечения из нашей зоны для участников, вы можете продолжить читать следующее.
В случае использования этого руководства мы покажем вам, как создать демо-видео одним нажатием кнопки. Видео, которое появляется при клике, будет отлично смотреться на десктопе и на маленьких экранах. Это отличный подход, если вы не хотите размещать видео непосредственно на своей странице, но предпочитаете создавать взаимодействие с посетителей.
обследование
Прежде чем мы углубимся в руководство, давайте посмотрим на конечный результат на экранах разных размеров.
офис
Мобильный телефон
Давайте начнем!
Используйте бесплатный плагин Video PopUp
Установите и активируйте плагин
Первое, что нужно сделать, это загрузить плагин бесплатно Видео PopUp . Вы можете найти этот плагин, перейдя в сайт WordPress> Плагины> Добавить новый> Поиск «Всплывающее видео». Как только вы найдете этот плагин, установите его. Как только вы закончите, не забудьте активировать плагин.
Настройки плагина
Для продолжения перейдите к общим настройкам этого плагина и активируйте две опции вверху.
Добавить новую страницу с помощью целевой страницы версии программного обеспечения
Добавьте новую страницу и включите использование Visual Builder
Пора начинать претворять дела в жизнь! Добавьте новую страницу, дайте странице название и сразу активируйте Visual Builder.
Скачать макет версии программного обеспечения из сохраненных макетов
Перейдите в «Сохраненные макеты» и загрузите загруженную целевую страницу.
Добавить текстовый модуль в модуле Blurb кнопки воспроизведения
Как видите, на странице уже есть кнопка воспроизведения, которая поможет нам добиться желаемого результата. Но для того, чтобы это сработало, нам нужно воссоздать дизайн в модуле Blurb с помощью текстового модуля. Добавьте новый текстовый модуль чуть ниже модуля Blurb.
Добавить изображение в область содержимого
После того, как вы добавили текстовый модуль, продолжайте и добавьте изображение кнопки воспроизведения в область содержимого вашего текстового модуля, нажав " Добавить медиа И выбрав кнопку воспроизведения в вашей медиатеке.
Добавить копию в область содержимого
Продолжите, добавив копию чуть ниже изображения.
Настройки текста
Чтобы модуль соответствовал макету, мы включим центральную ориентацию текста в настройках текста модуля.
Настройки текста ссылки по умолчанию
И мы также изменим параметры текста ссылки соответственно:
- Ссылка Шрифт: Каюта
- Вес шрифта ссылки: жирный шрифт
- Ссылка Цвет текста: rgba (162,176,193,0.7)
- Размер текста ссылки: 17px
- Высота линии ссылки: 1.6em
Наведите курсор на текстовые настройки
Измените цвет текста наведения.
- Цвет текста ссылки: # a2b0c1
расстояние
Наконец, также добавьте отрицательное верхнее поле в текстовый модуль.
- Top Marign: -20vw
Добавить контекстное чтение в содержимое текстового модуля
Перейти в текстовый редактор
Чтобы создать всплывающее окно при нажатии, нам нужно будет добавить настраиваемую ссылку в содержимое текстового модуля. Вернитесь в область содержимого текстового модуля и выберите режим текстового редактора.
Добавить ссылку на весь контент
Свяжите свое место с контентом со всплывающим окном, добавив ссылку на изображение и копию. Обязательно замените URL-адрес ссылки своим собственным.
<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a> |
Удалите модуль Blurb из кнопки воспроизведения
Теперь, когда мы создали текстовый мод, который выглядит точно так же, как и мод Blurb, мы можем удалить мод Blurb, который существовал раньше, и все! Вы можете применить этот метод к любому типу макета, который вы используете, но это действительно большая добавленная стоимость для целевой страницы версии программного обеспечения.
Заключительные мысли
Как видите, добавить всплывающее окно на Divi с помощью плагина Video Popup довольно просто. Это позволит вам презентовать видео на ваш блог без необходимости автоматической интеграции его в контент.
