Модуль Видео Divi

Как добавить и настроить модуль видео Divi.

Добавить видео на свою страницу в Divi просто с помощью модуля «Видео». Модуль позволяет вставлять видео практически из любого источника, а также настраивать миниатюру изображения и кнопку воспроизведения, чтобы добавить стиль очистки к вставке.

Как добавить модуль видео на свою страницу

Прежде чем вы сможете добавить модуль видео-слайдера на свою страницу, вам сначала нужно перейти в Divi Builder. После того, как тема Divi будет установлена на вашем веб-сайте, вы будете замечать кнопку «Использовать Divi Builder» над редактором сообщений каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем нажмите кнопку «Включить визуальный Builder», чтобы запустить построитель в визуальном режиме. Вы также можете нажать кнопку «Включить визуальный Builder» при просмотре веб-сайта в интерфейсе пользователя, если вы вошли в свою панель управления WordPress.

После того, как вы вошли в Визуальный Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри рядов. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько отличных руководств о том, как использовать элементы строки и разделы Divi .

Найдите модуль видео в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести «слайдер видео», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль видео! После добавления модуля вы увидите список его опций. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Пример использования: добавление видео на страницу

Добавление видео на целевую страницу — отличный способ продвинуть ваши продукты и увеличить конверсию.

Используя Визуальный Builder, я добавляю новый раздел с полноразмерной строкой (1 столбец). В настройках строки на вкладке «Дизайн» я выбираю параметр «Использовать нестандартную ширину». Для появившейся опции Custom Width я ввожу произвольную ширину 767 пикселей. Это гарантирует, что видеомодуль, который я собираюсь добавить в эту строку, не превышает эту ширину и становится слишком большим на экранах большего размера.

Затем я добавляю в строку видеомодуль. На вкладке «Контент» в настройках модуля видео я ввожу URL-адрес видео, которое хочу встроить на свою целевую страницу. В этом примере я использую URL-адрес видео на YouTube.

Затем я добавляю URL-адрес наложения изображения для своего видео, нажимая кнопку «Создать из видео». Это автоматически извлекает изображение из видео, которое служит в качестве наложения с новым пользовательским значком видео.

На вкладке «Дизайн» я меняю цвет значка воспроизведения в соответствии с моей целевой страницей.

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

Теперь, когда вы увидели видеомодуль в действии, погрузитесь во ВСЕ его настройки в разделах ниже. Мы предоставили подробное изложение того, что вы найдете на каждой вкладке настроек модуля, и объяснение того, что каждая из них делает.

Контент

URL Видео

Модуль Divi Video позволяет добавлять видео двумя разными способами. Вы можете загрузить свой собственный видеофайл со своего компьютера, нажав кнопку «Загрузить видео» и выбрав нужный файл, или вы можете ввести любой URL-адрес видео из стороннего источника видео, такого как Youtube или Vimeo. Просто скопируйте и вставьте URL-адрес из вашего браузера и вставьте его в поле URL-адреса видео, а Divi позаботится обо всем остальном!

URL наложения изображения

Если вы хотите определить пользовательское изображение эскиза видео, которое будет помещено поверх стандартного видеоинтерфейса с помощью настраиваемой кнопки воспроизведения, чтобы создать более чистый и стилизованный внешний вид, вы можете сделать это с помощью поля «Наложение изображения». Это поле позволяет либо загрузить собственное изображение, либо позволить Divi автоматически сгенерировать его из URL-адреса вашего видео. Большинство поставщиков видео поддерживают эту опцию, например Youtube и Vimeo. Просто нажмите кнопку «Создать из видео», а обо всем остальном позаботится Divi!

Метка администратора

По умолчанию ваш видеомодуль будет отображаться в конструкторе с меткой «Видео». Метка администратора позволяет изменить эту метку для упрощения идентификации.

Дизайн

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

Расширенные опции

CSS ID и классы

Это можно использовать для добавления уникального идентификатора CSS или класса в ваш модуль. Затем их можно использовать в таблице стилей или в поле «Настраиваемый CSS параметров темы» для применения настраиваемого стиля к модулю. На идентификаторы CSS также можно настроить таргетинг с помощью якорных ссылок для ссылки на определенные области вашей страницы.

Пользовательский CSS

Здесь вы можете добавить собственный CSS в свой видеомодуль.

Видимость

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