Легко Создайте свой сайт сегодня!

ELEMENTOR — самый простой в мире конструктор блогов!

останавливаться трата времени и много денег платить разработчику, когда вы можете Легко создайте свой веб-сайт или блог WordPress с профессиональным дизайном всего несколько минут ! Никаких технических знаний не требуется.

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

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

Прежде чем вы сможете добавить видеомодуль на свою страницу, вы должны сначала перейти в Divi Builder. Однажды Диви тема установлен на вашем Веб-сайт, вы заметите кнопку Использовать 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 пикселей. Это гарантирует, что видеомодуль, который я собираюсь добавить в эту строку, не превышает эту ширину и становится слишком большим на экранах большего размера.

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

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

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

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

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

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

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

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

окончательный дизайн с контентом 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

Идентификатор и классы 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

%d блоггеры, как этой странице: