3 простых способа добавить фоновое видео WordPress на свой сайт

Опубликовано: 2021-12-11

Использование видеофонов на вашем сайте WordPress — отличный способ выделить его среди конкурентов и привлечь больше аудитории. Это потому, что видеофоны позволяют вам лучше донести ваши сообщения до вашей аудитории и развлечь их.

Если вы ищете способ добавить фоновое видео WordPress на свой сайт, следующие советы и руководства будут очень полезны.

Оглавление
[Показать спрятать]
  1. Почему вы должны добавить фоновое видео WordPress на свой сайт?
  2. Несколько полезных советов о том, как добавить видео фон WordPress на свой сайт
  3. Где взять фоновый видеофайл WordPress?
  4. 3 способа добавить фоновое видео WordPress на ваш сайт
    1. Используйте тему WordPress, которая поддерживает видеофоны
    2. Используйте конструктор страниц
      1. Гутенберг
      2. Конструктор страниц Elementor
    3. Используйте плагин WordPress Video Background
      1. Умный слайдер 3
      2. Видеоплеер и полноэкранный видеофон
      3. Изображение и видео Полноэкранный фоновый плагин WordPress
  5. Заключительные слова

Почему вы должны добавить фоновое видео WordPress на свой сайт?

Ниже приведены несколько преимуществ добавления видеофонов WordPress на ваш сайт.

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

Несколько полезных советов о том, как добавить видео фон WordPress на свой сайт

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

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

Где взять фоновый видеофайл WordPress ?

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

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

Нет времени и денег на видеосъемку? Без проблем. Вы можете найти бесплатные высококачественные видеоматериалы на таких сайтах, как Storyblocks и Pixabay.

3 способа добавить фоновое видео WordPress на ваш сайт

Используйте тему WordPress , которая поддерживает видеофоны

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

Вы можете использовать тему Woostify или найти тему на рынке. В Интернете есть много мест, где вы можете найти платную или бесплатную тему WordPress, поддерживающую фоновое видео, например темы WordPress, ThemeForest и т. д.

После установки темы перейдите на страницу документации или обратитесь в службу поддержки, чтобы узнать, как добавить фоновое видео WordPress.

Используйте конструктор страниц

Гутенберг

Редактор и конструктор страниц WordPress по умолчанию — Gutenberg — уже позволяет легко добавлять видеофоны.

  1. Нажмите знак « + », чтобы добавить новый блок. Найдите « обложку ». Затем нажмите на блок Cover , чтобы добавить его.
wordpress-видео-фон-1
  1. Загрузите видео или добавьте его из медиатеки, если вы уже загрузили его.
wordpress-видео-фон-2
  1. Нажмите на текст « Написать заголовок …», чтобы добавить заголовок.
wordpress-видео-фон-3
  1. Настройте фон видео Gutenberg с помощью панели инструментов и боковой панели. Вы можете добавить класс CSS, чтобы настроить его дальше.
WordPress-видео-фон-4
WordPress-видео-фон-5
wordpress-видео-фон-6

Вот что означают параметры на боковой панели:

  • Наложение : установите цвет, который будет отображаться поверх видео.
  • Непрозрачность фона : регулирует прозрачность. Чем ниже значение, тем прозрачнее он будет.

Как видите, возможности по умолчанию весьма ограничены. Но это также и самый простой способ, поскольку он с самого начала интегрирован в WordPress. Так что ничего устанавливать не нужно.

Конструктор страниц Elementor

Elementor, который считается самым популярным конструктором страниц для WordPress, позволяет добавлять видео YouTube и файлы .mp4 на фон вашего сайта.

Некоторые темы имеют встроенную поддержку Elementor, например Woostify. Так что это лучший вариант, если ваша тема тоже такова.

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

После загрузки и активации плагина Elementor Website Builder следуйте приведенному ниже руководству, чтобы добавить видеофоны Elementor. на ваш сайт.

  1. Откройте новую или существующую запись/страницу с помощью Elementor.
  2. Добавьте раздел из редактора, нажав кнопку «+».
wordpress-видео-фон-7
  1. Выберите желаемую ширину секции. В этом случае я выберу раздел полной ширины.
wordpress-видео-фон-8
  1. Появится левая панель. Вы можете выбрать внешний вид раздела на вкладке Макет. Выберите ширину содержимого, отмеченную как «1» на фотографии ниже. Я выберу его как коробку. Вы также можете выбрать вариант полной ширины.
WordPress-видео-фон-9
  1. Нажмите на вкладку «Стиль», отмеченную цифрой «2» на изображении выше, чтобы добавить видео. В разделе «Фон» вы можете выбрать один из трех стилей фона: сплошной, градиентный и видеофон. Нажмите на вариант фона видео, отмеченный цифрой «1» на фотографии ниже.
wordpress-видео-фон-10
  1. Вы также можете использовать эффект наведения и эффект частиц, нажимая кнопки, отмеченные цифрами «2» и «3» на фотографии выше соответственно.
  2. Вы можете предоставить ссылку на YouTube в качестве фонового видео. Или вы можете загрузить любое видео в формате .mp4, используя медиатеку. Затем введите постоянную ссылку на него.
wordpress-видео-фон-11
  1. Вы можете указать время начала и окончания и предоставить резервное изображение, отмеченное цифрами «2» и «3» на фотографии выше соответственно.
  2. Возможно, у вас проблемы с ростом. Если это так, отрегулируйте минимальную высоту на вкладке «Макет».
wordpress-видео-фон-12

Вот оно! Хотя этот метод намного сложнее, у вас гораздо больше контроля и расширенных функций для настройки фонового видео Elementor в соответствии с вашими потребностями.

Используйте плагин WordPress Video Background

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

В наши дни вы можете выбирать из множества бесплатных и платных плагинов WordPress, которые дают вам возможность использовать видео YouTube, Vimeo и MP4 в фоновом режиме. В этой статье мы перечислим только некоторые известные из них.

Умный слайдер 3

wordpress-видео-фон-13

Если вы ищете лучший бесплатный плагин для фонового видео для WordPress, Smart Slider 3 будет лучшим выбором.

С его помощью вы можете создавать видеоблоки. Затем вставьте их на свой сайт в виде отдельных разделов или основных изображений с эффектами прокрутки параллакса.

Плагин поддерживает видео с YouTube и Vimeo. Он также позволяет загружать файлы .mp4 и использовать их.

Smart Slider 3 также позволяет добавлять к видеоблокам любое количество слоев, включая текст, кнопки, логотипы, эскизы и т. д. Вы также можете регулировать прозрачность, отключать звук, зацикливать видео и многое другое.

Чтобы добавить видеофоны WordPress к сообщению/странице, вы можете вставить шорткоды или короткие PHP-скрипты непосредственно в файл шаблона вашего сайта WordPress.

Видеоплеер и полноэкранный видеофон

wordpress-видео-фон-14

Это идеальный инструмент для создания привлекательных полноразмерных видеофонов. Он позволяет вам добавлять собственные видеоролики, видеоролики YouTube или Vimeo на любую страницу вашего сайта WordPress.

Вы также можете использовать плагин в качестве видеоплеера, чтобы адаптировать свой контент ко всем типам устройств.

Изображение и видео Полноэкранный фоновый плагин WordPress

wordpress-видео-фон-15

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

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

Заключительные слова

Когда посетитель попадает на ваш сайт, у вас есть всего несколько секунд, чтобы привлечь его внимание и заставить остаться на сайте дольше. Видео фоны WordPress являются одним из наиболее эффективных способов сделать это и усилить идеи вашего бренда. Мы надеемся, что с помощью советов и руководств, которые мы предоставили в этом посте, вы сможете легко добавить фоновое видео WordPress на любую страницу своего сайта.