Добавить видео на свою страницу в Divi просто, если вы используете модуль Video. Этот модуль позволяет вставлять видео из любого источника, а также настраивать эскиз изображения и кнопку воспроизведения.
Как добавить видео модуль на свою страницу
Прежде чем вы сможете добавить видеомодуль на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем сайте, вы увидите кнопку Использовать Divi Builder над редактором сообщений всякий раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите на кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать кнопку Использовать Visual Builder когда вы просматриваете свой веб-сайт на переднем плане, если вы подключены к своей панели управления WordPress.
После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите видеомод в списке модов и щелкните по нему, чтобы добавить на свою страницу. Список модов доступен для поиска, что означает, что вы также можете ввести слово «видео» и затем нажать Enter, чтобы автоматически найти и добавить видеомод! После добавления модуля вы увидите список опций модуля. Эти параметры разделены на три основные группы: Содержание , Дизайн et Передовой .
Пример использования: добавление видео на целевую страницу
Добавление видео на целевую страницу — отличный способ содействовать ваши продукты и увеличить конверсию. В этом примере я покажу вам, как использовать модуль видео, чтобы добавить видео на целевую страницу. Я поставил красный кружок там, где должно идти видео.
Используя Visual Builder, я добавляю новый раздел с полноразмерной строкой (1 столбец). В настройках строки на вкладке «Дизайн» я выбираю вариант «Использовать нестандартную ширину». Для появившейся опции Custom Width я ввожу нестандартную ширину 767 пикселей. Это гарантирует, что видеомодуль, который я собираюсь добавить в эту строку, не превышает эту ширину и становится слишком большим на экранах большего размера.
Затем добавляю в ряд видеомодуль. На вкладке «Контент» параметра «Модуль видео» я ввожу URL-адрес видео, которое хочу встроить на свою целевую страницу. В этом примере я использую URL-адрес видео YouTube.
Затем я добавляю URL-адрес наложения изображения для своего видео, нажимая кнопку «Создать видео». Это автоматически извлекает кадр из видео, который служит в качестве наложения с новым пользовательским значком видео.
На вкладке «Дизайн» я меняю цвет значка воспроизведения в соответствии с моей целевой страницей.
Теперь у меня есть видео для моей целевой страницы, которое выглядит чистым и соответствует моему дизайну.
Теперь, когда вы увидели видео-мод в действии, погрузитесь во все его настройки в разделах ниже. Мы подробно рассмотрели, что вы найдете на каждой вкладке настроек модуля, и объяснили, что каждая из них делает.
Параметры содержимого
URL видео
Модуль Divi Video позволяет добавлять видео двумя разными способами. Вы можете загрузить свой собственный видеофайл со своего компьютера, нажав кнопку «Загрузить видео» и выбрав нужный файл, или вы можете ввести любой URL-адрес видео из стороннего источника видео, такого как Youtube. или Vimeo. Просто скопируйте и вставьте URL-адрес из вашего браузера и вставьте его в поле URL-адреса видео, а Divi позаботится обо всем остальном!
URL наложения изображения
Если вы хотите установить собственное изображение эскиза видео, которое будет размещено в стандартном видеоинтерфейсе с помощью настраиваемой кнопки воспроизведения, чтобы создать более резкий и стилизованный внешний вид, вы можете сделать это с помощью поля «Наложение изображения». Этот элемент управления позволяет либо загрузить собственное персонализированное изображение, либо автоматически позволить Divi сгенерировать его из URL-адреса вашего видео. Большинство поставщиков видео поддерживают эту опцию, например Youtube и Vimeo. Просто нажмите кнопку «Создать видео», а обо всем остальном позаботится Divi!
Значок администратора
По умолчанию ваш видеомодуль будет отображаться в генераторе с меткой «Видео». Тег администратора позволяет изменить этот тег для упрощения идентификации.
Варианты дизайна
изменить цвет значка
Если вы назначаете наложение изображения для своего модуля видео, отображаемое видео будет содержать значок воспроизведения поверх видео. Здесь вы можете указать цвет этого значка, чтобы он соответствовал цветам на вашей странице.
Опции avancées
Идентификатор и классы CSS
Это можно использовать для добавления CSS ID или класса к вашему модулю. Затем их можно использовать в таблице стилей или в поле «Пользовательский CSS-код» для применения пользовательского стиля к модулю. На идентификаторы CSS также можно настроить таргетинг с помощью якорных ссылок для ссылки на определенные области вашей страницы.
Пользовательский CSS
Здесь вы можете добавить собственный CSS в ваш видео модуль.
видимость
Если вы хотите скрыть свой видеомодуль на некоторых устройствах, вы можете выбрать устройства, на которых вы хотите отключить видеомодуль.
[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]
Другие учебные пособия Divi
- сайты 5 для использования ресторана Divi темы
- Как добавить текст в продукт Divi WooCommerce
- Как изменить цвет меню между страницами Divi
- Как персонализировать сетки блога с Divi
- Как использовать роль DiVi редактор на WordPress
- Как создать полноэкранный слайдер Divi
- Как изменить цвет меню между страницами Divi
- Особенности, которые вы, вероятно, не знаете о Divi
- Как использовать Divi Builder в WordPress
- Как использовать модуль прокрутки видео Divi
- Как использовать модуль Flip Builder Flip
- Как добавить отзыв модуль на Divi Builder
- Как использовать текстовый модуль Divi
- Как создать слайдер на Divi
- Как редактировать роль пользователя Divi
- Как использовать модуль Divi Social Media
- Как пользоваться магазинным модулем на тему WordPress Divi
- Как использовать боковую панель Divi
- Как использовать модуль таблицы цен Divi
- Как использовать титульный модуль изданий Divi
- Как добавить видео модуль Divi
- Как использовать навигационный модуль статьи
- Как использовать модуль поиска Divi
- Как использовать модуль кошелька Divi
- Как использовать модуль пользователя в Divi Builder
- Как использовать модуль кошелька с фильтром Divi
- Как использовать ползунок полной ширины
- Как использовать модуль изображения Divi Builder
- Как использовать полноразмерный навигационный модуль Divi Builder
- Как использовать модуль галереи изображений
- Как использовать модуль карты полной ширины Divi Builder
- Как использовать модуль Divi Full Width Portfolio
- Как использовать полноразмерный заголовочный модуль Divi
- Как использовать Divi Counter Module
- Как использовать слайдер статей в Divi Builder
- Как использовать модуль Divi Email Optin
