Как создать раздел фонового видео в WordPress?

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

WordPress предоставляет различные подходы, с помощью которых вы можете интегрировать фоновое видео.

Если вы не знаете ни одного из этих методов, позвольте нам помочь вам в этом процессе.

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

#Зачем вам нужен видеофон в WordPress?

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

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

Два приглашенных блоггера в блоге YouTube предоставили статистику, доказывающую, что видео затмевает картинку неэффективного общения. Вы слышали, что изображение говорит тысячу слов, верно?

Что ж, если верить этим приглашенным блоггерам, видео говорит миллион слов.

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

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

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

#Советы по выбору идеального фона для видео

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

1. Сжатое, но качественное видео

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

Кроме того, Google не будет ранжировать ваш сайт в верхних результатах релевантных результатов поиска. Сжатие видео снизит нагрузку на сервер, и ваш сайт будет работать быстрее.

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

Вы можете использовать такой инструмент, как VideoProc, который позволяет сжимать видео до оптимального размера. Инструмент VideoProc Converter работает с любым видео, которое вы сняли на GoPro, DJI, iPhone, Android, видеокамеру или любую другую камеру 4k.

2. Продолжительность короткого видеоклипа

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

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

3. Похвалите содержание вашего веб-сайта

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

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

4. Возможность включения/отключения звука

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

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

5. Раздел адаптивного видео фона

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

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

#Три метода создания раздела фонового видео

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

1. Создайте раздел фонового видео с помощью конструктора веб-сайтов.

Конструкторы веб-сайтов/страниц идеально подходят для создания веб-страниц без работы с кодами (HTML, CSS и т. д.). Эти инструменты также помогают добавлять различные мультимедийные компоненты, такие как карусельный слайдер, лайтбокс изображений, анимацию и т. д.

1. Конструктор сайтов Elementor

Elementor — это универсальный плагин для создания веб-сайтов. Он позволяет создавать различные элементы, такие как верхний и нижний колонтитулы, страницу продукта и т. д. Этот конструктор страниц поддерживает практически все темы и плагины WordPress.

Сначала установите этот конструктор страниц со страницы «Добавить новый плагин». Перейдите в строку поиска и найдите «Elementor. Теперь установите и активируйте первый вариант с именем издателя: Elementor.com .

Теперь вернитесь на панель инструментов и наведите курсор мыши на верхнюю часть параметра Elementor на боковой панели. Нажмите кнопку «Начало работы» в раскрывающемся меню.

Это действие приведет вас на страницу приветствия Elementor. Вы можете увидеть кнопку «Создать свою первую страницу». Пожалуйста, нажмите на нее, чтобы продолжить.

Вы перейдете к интерфейсу редактирования Elementor Website Builder с помощью перетаскивания. Давайте создадим новый шаблон страницы, используя этот плагин. Щелкните значок папки, который вы видите внутри пунктирной рамки, как показано на снимке экрана.

Он вызывает всплывающее окно с множеством предварительно разработанных шаблонов страниц. Наведите указатель мыши на выбранный макет. Это действие показывает вам кнопку «Вставить», которую нужно нажать, чтобы добавить шаблон на свой веб-сайт.

Вы получите другое окно после выбора одного из макетов. Нажмите кнопку «Начать», чтобы перейти на страницу регистрации Elementor. Чтобы продолжить, создайте учетную запись с этим плагином конструктора.

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

Вы можете выбрать любой раздел, где вы хотите отобразить видео в качестве фона. Если вы собираетесь изменить его размер, нажмите кнопку «Редактировать раздел», обозначенную шестью точками вверху.

Теперь вы можете изменить его настройки, такие как высота, ширина и зазор, в разделе «Макет».

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

Если вы не хотите отображать видео с YouTube, вы можете вместо этого загрузить файл в формате MP4. Для этого метода вам нужно скопировать постоянную ссылку этого видео из медиатеки. После этого вставьте его в то же текстовое поле в интерфейсе Elementor.

Двигаясь дальше, вы можете настроить другие параметры для выбранного видео. Например, вы можете настроить наложение цвета фона для своего раздела. Кроме того, вы можете выбрать, воспроизводить ли видео на мобильных устройствах или нет.

Вы также можете загрузить резервное изображение, которое будет отображаться, если ваше видео не загрузится. Наконец, нажмите кнопку «Опубликовать», как только вы будете удовлетворены своим фоновым видео.

2. Конструктор страниц WordPress — Beaver Builder

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

Перейдите в раздел «Добавить новый плагин», чтобы добавить это расширение конструктора на панель инструментов WordPress. Вставьте его название в строку поиска и выберите первый вариант, который имеет более 300 000 активных установок.

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

Вы входите в интерфейс редактирования новой страницы. Поскольку вы установили этот плагин для создания перетаскивания, вы можете настроить страницу из внешнего интерфейса. Нажмите кнопку «Запустить Beaver Builder», как показано на скриншоте.

Это действие приведет вас к внешнему интерфейсу редактирования. Beaver Builder отображает различные модули на правой боковой панели, такие как «Аудио», «Заголовок», «Фото» и т. д. Щелкните значок «Видео» и перетащите его в пунктирную рамку.

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

Нажмите кнопку «Выбрать видео» в любом из этих вариантов. Вам нужно выбрать видео из Медиатеки или загрузить его с накопителя. Beaver Builder позволяет вам внести некоторые изменения, такие как загрузка плакатов, автоматическое воспроизведение и переключение циклов и т. д.

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

Beaver Builder отображает предварительный просмотр вашего встроенного видео в своем интерфейсе. Нажмите кнопку «Готово» в правом верхнем углу. После этого вы увидите четыре новые кнопки: «Отменить», «Сохранить черновик», «Опубликовать» и «Отмена».

После этого нажмите «Опубликовать», чтобы сохранить обновления. Мы предлагаем вам загрузить свой веб-сайт, чтобы проверить, как работает фоновое видео. Если вам нужна альтернатива конструкторам страниц веб-сайтов, посмотрите следующий раздел: Плагины.

2. Создайте раздел фонового видео с помощью плагинов WordPress.

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

1. Расширенные фоны WordPress

С Advanced WordPress Backgrounds вы можете отображать различные типы фона. Например, вы можете добавить изображение, шаблон изображения, цвет, загруженное видео и видео YouTube/Vimeo.

Пожалуйста, изучите страницу «Добавить новый плагин» в панели инструментов WordPress. Введите Advanced WordPress Backgrounds в строку поиска и установите первый вариант из результатов.

Активируйте плагин после его установки. Затем перейдите на страницу, на которую вы хотите добавить раздел видеофона. Для этого урока мы выбрали домашнюю страницу нашего веб-сайта. Пожалуйста, нажмите на кнопку «Изменить», которая находится внизу заголовка страницы.

Внутри макета редактирования вашей домашней страницы нажмите знак плюс (+), чтобы открыть панель поиска. Введите термин «AWB» и выберите параметр блока «Фон (AWB)». Вы получаете новый блок, добавленный на вашу страницу.

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

Этот плагин предоставляет интерфейс для добавления видео двумя способами. Сначала нажмите кнопку «Блокировать» на правой боковой панели. Прямо под опцией «Видео» вы можете выбрать вариант «YouTube/Vimeo» или «Собственный хостинг».

Когда вы выбираете опцию для YouTube/Vimeo, вы получаете текстовое поле для ввода URL-адреса вашего видео. Вы также можете установить время начала видео, чтобы оно начиналось именно с того места, где вы хотите его воспроизвести.

Другим вариантом является собственное видео. Вы можете загрузить видео, выбрав один из этих трех форматов: MP4, OGV и WEBM. Нажмите на одну из этих кнопок и выберите видео из своей медиатеки.  

Если у вас нет видео в библиотеке, загрузите его со своего диска. После того, как вы вставите видео, вы сможете увидеть его предварительный просмотр на той же боковой панели. После этого нажмите на кнопку «Опубликовать» вверху страницы.

2. mb.YTPlayer для фонового видео

Плагин mb.YTPlayer for Background Videos позволяет интегрировать видео YouTube на ваш сайт. В профессиональной версии вы можете редактировать непрозрачность видео, качество, соотношение сторон и другие функции.

Как и в случае с предыдущими плагинами, вы можете установить mb.YTPlayer со страницы «Добавить новый плагин». Вставьте его ключевое слово, как показано ниже, и активируйте его в своей учетной записи WordPress.

Пожалуйста, перейдите в панель управления WordPress после его установки. После этого наведите курсор мыши на опцию «mb.ideas» на левой боковой панели. Нажмите кнопку YTPlayer, которую вы видите в раскрывающемся меню.

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

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

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

3. Slider Hero с анимацией, фоновым видео и создателем интро

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

Как и любое другое бесплатное расширение, вы можете установить его со страницы добавления нового плагина WordPress. Введите ключевое слово «Slider Hero» в строку поиска. Выберите первый вариант с именем издателя Quantum Cloud .

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

Теперь вы находитесь в интерфейсе редактирования этого плагина. Он предоставляет семь различных эффектов слайдера на ваш выбор. Нажмите на параметр ползунка, который вы хотите изменить. Мы выбрали первый вариант: No Effect.

На следующей странице есть два раздела. Первый позволяет добавлять ползунки, а следующий позволяет настраивать его эффекты.

Мы предлагаем вам нажать на значок плюса (+) в верхней части левого раздела. Он создает черновик слайда, где вы можете написать заголовок и описание. Кроме того, вы можете добавить две кнопки CTA для каждого из них.

Переходя к правому разделу, вам нужно выбрать параметр «Настройки видео» в строке меню. Он показывает раскрывающееся меню с тремя вариантами видеофона. Выберите вариант фона видео YouTube.

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

Slider Hero отображает различные настройки слайдера видео с помощью этого действия. Вы получаете текстовое поле для включения идентификатора видео YouTube. Чтобы получить этот код, вы можете вставить в это место полный URL вашего видео.

Пожалуйста, нажмите на кнопку Сохранить после завершения настроек. После сохранения изменений щелкните параметр «Шорткод» в правом углу строки меню. Slider Hero предоставляет шорткод, который вы можете вставить на любую страницу вашего сайта.

Скопируйте код, выделенный выше, и вставьте его в блокнот. Теперь вы можете найти параметр «Страницы» на боковой панели WordPress. Наведите указатель мыши на него, чтобы открыть раскрывающееся меню.

После этого вам нужно нажать «Добавить новую», чтобы создать новую страницу. Когда вы входите на новую страницу, вы должны вставить шорткод в область тела. Нажмите кнопку «Сохранить черновик» после завершения редактирования.

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

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

3. Создайте раздел фонового видео, используя темы WordPress

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

Вот три веб-сайта с мощными темами, поддерживающими фоновое видео.

1. WordPress.org — бесплатный репозиторий тем

WordPress.org включает в себя различные бесплатные темы и плагины для вашего сайта. Работает с минимальной настройкой. Кроме того, этот инструмент с открытым исходным кодом позволяет вам с удобством делиться своими историями, продуктами и услугами.

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

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

2. Theme Forest — премиум темы WordPress

Theme Forest включает в себя тысячи тем и шаблонов для WordPress, электронной коммерции, маркетинга, CMS и т. д. Это крупнейший рынок тем в мире с уникальными элементами для различных проектов.

Если вам нужен веб-шаблон премиум-класса, мы рекомендуем этот сайт. Как и в случае с WordPress.org, вам нужно ввести ключевое слово для поиска соответствующей темы. Он позволяет сортировать результаты по цене, лучшему совпадению и т. д.

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

3. Темы Rara — бесплатные и премиальные темы WordPress

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

Для этой цели вы можете использовать как бесплатные, так и премиальные темы. Мы объясним, как настроить раздел видеофона, используя один из его продуктов. Для этой демонстрации мы выбрали Chic Lite.

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

С помощью этого действия вы вводите параметры настройки главной страницы для своего раздела «Баннер». Вы можете увидеть заголовок для добавления видео в заголовок на левой боковой панели. Нажмите кнопку «Выбрать видео», как показано ниже.

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

Если вы еще не загрузили видео, вам нужно перейти в раздел «Загрузить файлы». Вы можете добавить видео в библиотеку и выбрать его отображение в области заголовка.

Вернитесь к настройке настройки, и вы увидите миниатюру выбранного видео. Кроме того, если вы хотите интегрировать видео с YouTube, вы можете ввести его URL-адрес в поле, выделенном ниже.

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

Где найти стоковые фотографии для раздела фонового видео?

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

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

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

1. Шаттерсток

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

Вы можете классифицировать видео по таким темам, как животные/дикая природа, праздники, наука, образование, природа и т. д. Shutterstock предлагает более миллиона стоковых видеороликов с качеством 4K, HD и SD.

2. Элементы Envato

Envato Elements имеет более 50 миллионов цифровых ресурсов, таких как графические шаблоны, видео, аудио, фотографии, шрифты и т. д. У них есть все виды кадров и видеоклипов для природы, бизнеса и фона.

3. Пексели

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

4. Pixabay

Pixabay имеет сообщество талантливых авторов с более чем 1,8 миллионами стоковых фото и видео. Вы можете использовать, модифицировать, а также распространять их элементы, не указывая авторства. Как и в случае с Pexels, вы можете пожертвовать одного или нескольких авторов, если хотите.

Часто задаваемые вопросы (FAQ)

Подведение итогов!

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

Кроме того, вы нашли наш блог информативным? Не стесняйтесь оставлять свои честные отзывы, чтобы мы могли улучшить наш будущий контент.