Пропустить

Divi Tutorial: как добавить видео модуль в Divi

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

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

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

Добавить видео на свою страницу в Divi просто, если вы используете модуль Video. Этот модуль позволяет вставлять видео из любого источника, а также настраивать эскиз изображения и кнопку воспроизведения.

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

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

divi builder

После входа в Visual Builder вы можете нажать серую кнопку «плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы начинаете новую страницу, не забудьте сначала добавить строку на свою страницу.

видео модуль divi.png

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

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

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

создание видео на divi instancele.jpg

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

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

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

использовать настраиваемую ширину divi.png

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

добавить видео на divi.png

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

добавить наложение divi video.jpg

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

отредактировать значок игрока divi video.jpg

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

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

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

окончательный дизайн с контентом video.jpg

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

Параметры содержимого

параметр module divi.png

URL видео

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

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

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

Значок администратора

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

Варианты дизайна

изменить цвет значка

дизайн раздела divi.png

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

Опции avancées

видео модуль расширенный section.png

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

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

Идентификатор и классы CSS

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

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

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

видимость

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

Другие учебные пособия Divi

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

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

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

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

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