Como criar uma seção de plano de fundo de vídeo no WordPress?

Uma maneira eficaz de melhorar o apelo visual do seu site é criar uma seção de plano de fundo de vídeo. Isso intriga seus visitantes e os incentiva a permanecer mais tempo em seu site.

O WordPress fornece várias abordagens com as quais você pode integrar o plano de fundo do vídeo.

Se você não conhece nenhum desses métodos, permita-nos guiá-lo pelo processo.

Você aprenderá três técnicas sem complicações para adicionar vídeo como uma seção de plano de fundo neste blog.

#Por que você precisa de um plano de fundo de vídeo no WordPress?

Todos sabemos a importância de adicionar imagens de fundo atraentes ao nosso site. Eles cativam a atenção do seu público e se comunicam mais rápido do que uma descrição escrita.

No entanto, outra forma de mídia é 100 vezes mais poderosa do que imagens, gráficos e outras ilustrações. Se você está pensando em vídeo, então você pode se dar um tapinha nas costas!

Dois blogueiros convidados no blog do YouTube forneceram estatísticas provando que o vídeo supera a comunicação ineficaz da imagem. Você já ouviu falar que uma imagem fala mais que mil palavras, certo?

Bem, de acordo com a visão desses blogueiros convidados, um vídeo fala mais que um milhão de palavras.

Assim, você pode adicionar vídeos como plano de fundo em seu site para comunicar informações essenciais ao seu público. Você pode adicionar um pequeno vídeo para descrever a história da sua marca, o mecanismo de funcionamento do seu produto etc.

Uma seção de vídeo incentiva os visitantes do seu site a se envolverem com ela. Eles podem querer ativar o volume de mídia, aumentar o player ou reproduzir o vídeo inteiro.

Além disso, seu público desejará saber mais sobre sua marca depois de assistir ao vídeo de introdução. Se seus visitantes passarem um longo período em seu site, sua taxa de rejeição cairá, o que também aumenta o desempenho de SEO.

#Dicas para selecionar um plano de fundo de vídeo perfeito

Agora, você sabe o significado da integração de vídeo em sites. Apresentamos algumas dicas sobre como selecionar um ótimo vídeo para adicionar ao seu site WordPress. Aqui estão cinco pontos cruciais que você pode achar úteis.

1. Vídeo compactado, mas de alta qualidade

Você deve compactar seus arquivos de vídeo antes de enviá-los para a seção de fundo. Um site com um tamanho de vídeo grande carrega lentamente e oferece uma experiência de usuário terrível.

Além disso, o Google não classificará seu site nos primeiros resultados de pesquisa relevantes. A compactação do vídeo colocará menos carga no servidor e seu site será executado mais rapidamente.

Mas, certifique-se de não estragar a qualidade do seu vídeo durante a compactação. Seu público não quer assistir a um vídeo desfocado. Você precisa encontrar um meio-termo onde o vídeo seja compactado, mas ainda tenha uma resolução decente.

Você pode usar uma ferramenta como VideoProc que permite compactar seus vídeos para o melhor tamanho. A ferramenta VideoProc Converter funciona com qualquer vídeo gravado com sua GoPro, DJI, iPhone, Android, filmadora ou qualquer outra câmera 4k.

2. Duração curta do clipe de vídeo

Outra coisa a considerar ao adicionar um vídeo ao seu site é torná-lo curto. Em primeiro lugar, o público online tem uma baixa atenção. Eles não assistirão a um vídeo de meia hora que forneça todo o histórico de sua empresa.

Em vez disso, envie um vídeo curto de menos de um minuto com um tamanho de arquivo menor. Levará um curto período de tempo para carregar e também atrairá a atenção dos visitantes do seu site. Além disso, você também pode colocar vídeos em um loop.

3. Complementando o conteúdo do seu site

Seus visitantes apreciarão o vídeo apenas se ele complementar o conteúdo do seu site. Por exemplo, você possui um site de cafeteria, então um vídeo de bicicleta esportiva certamente não complementará seu site.

Sair do contexto irrita seu público, aumentando a chance de perder sua atenção. Portanto, crie um vídeo adequado da sua marca para adicionar ao plano de fundo. Você também pode exibir imagens de estoque relevantes.

4. Opção para ativar/desativar áudio

Quando alguém entra no seu site, pode não estar esperando a reprodução automática de áudio. Seu público pode navegar em seu site em uma biblioteca, escritório, sala de aula ou outros lugares silenciosos. Um som repentino os assustará e eles fecharão a aba para se livrar dele.

A reprodução automática de conteúdo multimídia está entre os principais atributos de sites que as pessoas odeiam. Você pode evitar essa situação adicionando uma opção de alternância para ativar/desativar o áudio. Dessa forma, os visitantes só poderão reproduzir o áudio quando sentirem necessidade.

5. Seção de fundo de vídeo responsivo

Os visitantes do seu site navegarão pelo seu conteúdo em vários dispositivos digitais. Por exemplo, eles podem assistir ao seu vídeo em dispositivos móveis, laptops ou outros. Um vídeo sem resposta não fornecerá a mesma dimensão em todos esses tamanhos de tela.

Assim, você deve tornar o plano de fundo do vídeo responsivo. Com esse recurso, seu vídeo é carregado com as dimensões corretas em todos os dispositivos de exibição.

#Three Métodos para criar uma seção de plano de fundo de vídeo

Existem três maneiras principais de adicionar um vídeo como uma seção de plano de fundo em seu site. Nesta seção, você obtém uma explicação detalhada de cada uma das técnicas. Você pode selecionar qualquer uma dessas opções com base em sua preferência.

1. Crie uma seção de plano de fundo de vídeo usando o Criador de sites

Os construtores de sites/páginas são perfeitos para ajudá-lo a criar páginas da web sem trabalhar com códigos (HTML, CSS, etc.). Essas ferramentas também ajudam a adicionar vários componentes multimídia, como controle deslizante de carrossel, caixa de luz de imagem, animação etc.

1. Construtor de sites Elementor

O Elementor é um plug-in de criação de sites tudo-em-um. Ele permite que você crie vários elementos, como cabeçalho, rodapé, página do produto, etc. Este construtor de páginas suporta quase todos os temas e plugins do WordPress.

Primeiro, instale este construtor de páginas da página Adicionar novo plug-in. Vá para a barra de pesquisa e procure por “Elementor. Agora, instale e ative a primeira opção que tem o nome dos editores: Elementor.com .

Agora volte para o painel e passe o cursor do mouse na parte superior da opção Elementor na barra lateral. Clique no botão Introdução no menu suspenso.

Esta ação leva você à página de boas-vindas do Elementor. Você pode ver um botão “Criar sua primeira página”. Por favor, clique nele para prosseguir.

Você alcançará a interface de edição de arrastar e soltar do Elementor Website Builder. Vamos criar um novo modelo de página usando este plugin. Clique no ícone da pasta que você vê dentro da caixa pontilhada, conforme mostrado na captura de tela.

Ele abre uma janela pop-up com vários modelos de página pré-projetados. Passe o ponteiro do mouse sobre o layout selecionado. Essa ação mostra um botão Inserir, no qual você precisa clicar para adicionar o modelo ao seu site.

Você obtém outra janela após selecionar um dos layouts. Clique no botão Começar, que o leva à página de inscrição do Elementor. Por favor, crie uma conta com este plugin do construtor para continuar.

O Elementor oferece a opção de conectar seu site à biblioteca de modelos. Clique no botão Conectar. Depois disso, você volta para sua interface de edição.

Você pode selecionar qualquer seção em que deseja exibir um vídeo como plano de fundo. Se você for ajustar seu tamanho, clique no botão Editar seção indicado por seis pontos na parte superior.

Agora você pode alterar suas configurações, como altura, largura e espaço, na opção Layout.

Por favor, vá para a opção Estilo depois de ajustar esta seção. Você pode escolher quatro tipos de plano de fundo diferentes: imagem, vídeo, gradiente e apresentação de slides. Selecione o ícone Vídeo e cole o URL de um vídeo do YouTube na caixa de texto.

Se você não quiser exibir um vídeo do YouTube, poderá fazer upload de um arquivo no formato MP4. Para esse método, você precisa copiar o link permanente desse vídeo da biblioteca de mídia. Depois disso, cole-o na mesma caixa de texto na interface do Elementor.

Seguindo em frente, você pode ajustar outras configurações para o vídeo selecionado. Por exemplo, você pode personalizar a sobreposição de cores de fundo para sua seção. Além disso, você pode escolher se deseja reproduzir o vídeo em dispositivos móveis ou não.

Você também pode fazer upload de uma imagem de fallback que será exibida se o vídeo não carregar. Por fim, clique no botão Publicar quando estiver satisfeito com seu vídeo de fundo.

2. Construtor de Páginas WordPress – Beaver Builder

O Beaver Builder permite que você edite a primeira página do seu site usando sua interface flexível de arrastar e soltar. Ele suporta vários módulos de conteúdo, como foto, botão, título, ícone, áudio, vídeo, etc.

Por favor, vá para Adicionar Novo Plugin para adicionar esta extensão do construtor ao seu painel do WordPress. Insira seu nome na barra de pesquisa e selecione a primeira opção, que possui mais de 300.000 instalações ativas.

Você precisa instalar e ativar esta extensão e ir para a página onde você adiciona um plano de fundo multimídia. Se você deseja criar uma nova página, clique no botão Adicionar novo no menu suspenso da opção Páginas.

Você entra na interface de edição de uma nova página. Desde que você instalou este plug-in do construtor de arrastar e soltar, você pode personalizar a página a partir do front-end. Por favor, clique no botão Iniciar Beaver Builder como mostrado na captura de tela.

Essa ação leva você à interface de edição front-end. O Beaver Builder exibe vários módulos na barra lateral direita, como Áudio, Título, Foto, etc. Clique no ícone Vídeo e arraste-o para a caixa pontilhada.

Ele cria um bloco de vídeo e abre uma janela para ajustar as configurações de vídeo. Você deve primeiro definir o tipo de vídeo a partir de duas opções: Biblioteca de mídia e Incorporar. Se você escolheu a primeira alternativa, poderá enviar um vídeo dos formatos de arquivo MP4 ou WebM.

Clique no botão "Selecionar vídeo" em qualquer uma dessas opções. Você precisa selecionar um vídeo da Biblioteca de mídia ou carregá-lo da unidade. O Beaver Builder permite que você faça alguns ajustes, como upload de pôsteres, reprodução automática e alternância de loop, etc.

Pelo contrário, se você selecionar a opção Video Embed, ela permite que você cole o URL do seu vídeo do YouTube. Depois de inserir o URL, você obtém uma visualização do vídeo em segundo plano. Clique no botão Salvar depois de fazer as edições finais.

O Beaver Builder exibe uma visualização do seu vídeo incorporado em sua interface. Por favor, clique no botão Concluído no canto superior direito. Depois disso, você verá quatro novos botões: Descartar, Salvar rascunho, Publicar e Cancelar.

Clique em Publicar depois disso para salvar suas atualizações. Sugerimos que você carregue seu site para verificar como o plano de fundo do vídeo está funcionando. Se você quiser uma alternativa aos construtores de páginas de sites, veja a próxima seção: Plugins.

2. Crie uma seção de fundo de vídeo usando plugins do WordPress

Os plugins são uma excelente maneira de adicionar recursos extras ao seu site. Você tem a opção de escolher entre várias extensões para adicionar um plano de fundo de vídeo ao seu site. Explicamos o processo de adicionar esse recurso usando dois plugins.

1. Fundos avançados do WordPress

Com Advanced WordPress Backgrounds, você pode exibir vários tipos de plano de fundo. Por exemplo, você pode adicionar uma imagem, imagem padrão, cor, vídeo enviado e vídeos do YouTube/Vimeo.

Por favor, explore a página Adicionar Novo Plugin em seu painel do WordPress. Digite Advanced WordPress Backgrounds na barra de pesquisa e instale a primeira opção dos resultados.

Ative o plugin depois de instalá-lo. Em seguida, vá para a página onde você deseja adicionar uma seção de plano de fundo de vídeo. Para este tutorial, escolhemos a página inicial do nosso site. Por favor, clique no botão Editar, que está na parte inferior do título da página.

Dentro do layout de edição da sua página inicial, clique no sinal de mais (+) para abrir uma barra de pesquisa. Digite o termo “AWB” e selecione a opção de bloco Background (AWB). Você recebe um novo bloco adicionado à sua página.

Neste bloco, você pode adicionar uma cor, imagem ou vídeo. Clique no botão Type na barra Block Settings. Selecione a opção “Vídeo” no menu suspenso que você vê na captura de tela abaixo.

Este plugin fornece uma interface para adicionar um vídeo usando dois métodos. Primeiro, clique no botão Bloquear na barra lateral direita. Logo abaixo da opção Vídeo, você pode escolher entre a opção YouTube/Vimeo ou Self Hosted.

Ao selecionar a opção YouTube/Vimeo, você recebe uma caixa de texto para inserir a URL do seu vídeo. Você também pode definir a hora de início do vídeo para iniciar precisamente de onde deseja que ele seja reproduzido.

Outra opção é o vídeo auto-hospedado. Você pode enviar um vídeo selecionando um destes três formatos: MP4, OGV e WEBM. Clique em um desses botões e escolha um vídeo da sua Biblioteca de mídia.  

Se você não tiver um vídeo na Biblioteca, carregue um de sua unidade. Depois de inserir um vídeo, você pode ver sua visualização na mesma barra lateral. Depois disso, clique no botão Publicar na parte superior da página.

2. mb.YTPlayer para vídeos em segundo plano

O plug-in mb.YTPlayer for Background Videos permite integrar vídeos do YouTube em seu site. Com sua versão pro, você pode editar a opacidade do vídeo, qualidade, proporção e outros recursos.

Semelhante aos plug-ins anteriores, você pode instalar o mb.YTPlayer na página Adicionar novo plug-in. Insira sua palavra-chave conforme mostrado abaixo e ative-a em sua conta do WordPress.

Por favor, vá para o seu painel do WordPress depois de instalá-lo. Depois disso, passe o cursor do mouse sobre a opção “mb.ideas” na barra lateral esquerda. Clique no botão YTPlayer que você vê em seu menu suspenso.

Você entra na interface de edição da extensão YT.Player. Primeiro, clique no botão de alternância para ativar o vídeo de fundo. Depois disso, insira o URL de um vídeo do YouTube na caixa de texto exibida na captura de tela.

Role a página para baixo e você verá uma seção para escolher uma página na qual deseja integrar o vídeo. Escolhemos a página inicial estática para a demonstração. Você pode clicar em Salvar alterações após terminar as edições.

Depois de salvar as alterações, você verá a miniatura do vídeo selecionado nesta página. Você também pode adicionar vários URLs de vídeo separados por uma vírgula. Seu público pode ver aleatoriamente qualquer um desses vídeos toda vez que visitar seu site.

3. Slider Hero com animação, fundo de vídeo e criador de introdução

O plugin Slider Hero ajuda você a criar sliders responsivos para o seu site. Você pode adicionar carrossel de texto, botões de chamada para ação (CTA) e vários outros elementos no controle deslizante. Além disso, também permite adicionar um vídeo como seção de fundo.

Como qualquer outra extensão gratuita, você pode instalá-la na página Adicionar novo plug-in do WordPress. Digite a palavra-chave “Slider Hero” na barra de pesquisa. Selecione a primeira opção que tenha Quantum Cloud como o nome do editor.

Agora você precisa ir ao painel e procurar a opção Slider Hero na barra lateral. Por favor, passe o cursor do mouse sobre ele para abrir um menu suspenso. Clique no botão Novo controle deslizante no menu.

Você está agora na interface de edição deste plugin. Ele fornece sete efeitos deslizantes distintos para você escolher. Clique na opção de controle deslizante que você deseja editar. Escolhemos a primeira opção: Sem efeito.

A página a seguir inclui duas seções. O primeiro permite adicionar controles deslizantes, enquanto o próximo permite personalizar seus efeitos.

Sugerimos que você clique no símbolo de adição (+) na parte superior da seção esquerda. Ele cria um slide de rascunho onde você pode escrever o título e a descrição. Além disso, você pode adicionar dois botões de CTA para cada um deles.

Passando para a seção direita, você precisa selecionar a opção Configurações de vídeo da barra de menu. Ele mostra um menu suspenso com três alternativas de plano de fundo de vídeo. Escolha a opção de plano de fundo do vídeo do YouTube.

Você pode usar as outras duas opções apenas com sua versão premium do plugin.

Slider Hero exibe várias configurações de controle deslizante de vídeo com esta ação. Você recebe uma caixa de texto para incluir o ID de um vídeo do YouTube. Para obter este código, você pode colar todo o URL do seu vídeo neste espaço.

Por favor, clique no botão Salvar após finalizar os ajustes. Após salvar as alterações, clique na opção Shortcode no canto direito da barra de menu. O Slider Hero fornece um código de acesso que você pode colar em qualquer página do seu site.

Copie o código destacado acima e cole-o em um bloco de notas. Agora você pode procurar a opção Páginas na barra lateral do WordPress. Passe o ponteiro do mouse sobre ele para abrir um menu suspenso.

Depois disso, você deve clicar em Adicionar novo para criar uma nova página. Ao entrar na nova página, você deve colar o shortcode na área do corpo. Clique no botão Salvar rascunho após terminar as edições.

Você também pode clicar no botão Visualizar para verificar como o vídeo está funcionando. Clique no botão Publicar quando terminar de adicionar outros elementos de página.

A captura de tela abaixo ilustra a aparência do vídeo de fundo.

3. Crie uma seção de plano de fundo de vídeo usando temas do WordPress

Uma maneira fácil de integrar um plano de fundo de vídeo é instalar um tema WordPress que suporte esse recurso. Com um tema de suporte multimídia, você não precisa de uma extensão externa para adicionar seções de vídeo ao seu site.

Aqui estão três sites que possuem temas poderosos que suportam fundos de vídeo.

1. WordPress.org – Repositório de Temas Gratuitos

O WordPress.org inclui vários temas e plugins gratuitos para impulsionar seu site. Funciona com configuração mínima. Além disso, esta ferramenta de código aberto permite que você compartilhe suas histórias, produtos e serviços com conveniência.

Você pode pesquisar um tema relevante na barra de pesquisa. Insira o termo “fundo de vídeo” e selecione qualquer um dos itens de seus resultados. Além disso, você pode baixar qualquer modelo e instalá-lo em seu painel do WordPress.

Leia a descrição antes de fazer o download para garantir que ele seja compatível com o recurso que você deseja adicionar. Você precisa fazer o upload do arquivo ZIP do tema para sua conta do WordPress e ativá-lo depois.

2. Floresta de Temas – Temas WordPress Premium

Theme Forest inclui milhares de temas e modelos para WordPress, eCommerce, marketing, CMS, etc. Eles são o maior mercado de temas do mundo, com itens exclusivos para diversos projetos.

Se você deseja um modelo premium da web, recomendamos este site. Semelhante ao WordPress.org, você precisa inserir a palavra-chave para pesquisar um tema relevante. Ele permite que você classifique os resultados com base no preço, melhor correspondência, etc.

Depois de instalá-lo em seu painel do WordPress, você deve ler sua documentação para adicionar um plano de fundo de vídeo. Se não incluir a instrução relevante, você precisará entrar em contato com a equipe de suporte.

3. Temas Rara – Temas WordPress gratuitos e premium

Rara Themes tem uma coleção de alguns dos melhores modelos de sites. Seus temas são ideais para criar sites de diferentes nichos, incluindo viagens, negócios, educação, moda, blogs pessoais e muito mais. Cada um de seus modelos de site permite integrar o vídeo no plano de fundo do cabeçalho.

Você pode usar seus temas gratuitos e premium para essa finalidade. Explicaremos como configurar a seção de plano de fundo do vídeo usando um de seus produtos. Para esta demonstração, escolhemos o Chic Lite.

Por favor, instale e ative este tema e vá para o painel do WordPress. Passe o ponteiro do mouse na opção Aparência na barra lateral. Em seguida, clique no botão Cabeçalho no menu suspenso.

Com esta ação, você insere as configurações de personalização da página inicial para sua seção Banner. Você pode ver o título para adicionar o vídeo do cabeçalho na barra lateral esquerda. Clique no botão Selecionar Vídeo, conforme mostrado abaixo.

Você chega à página Biblioteca de mídia, onde permite escolher um vídeo para exibir. Selecione o vídeo que você pretende enviar e clique no botão Escolher vídeo. Ele permite que você altere o título, a legenda e a descrição do arquivo.

Se você ainda não carregou um vídeo, você precisa ir para a seção Carregar Arquivos. Você pode adicionar um vídeo na biblioteca e optar por exibi-lo na área do cabeçalho.

Volte para a configuração de personalização e você poderá ver a miniatura do vídeo que escolheu. Além disso, se você deseja integrar um vídeo do YouTube, pode inserir sua URL no espaço destacado abaixo.

O vídeo é reproduzido automaticamente sem áudio. Seu público tem a opção de pausar e reproduzir o vídeo enquanto navega no site.

Onde encontrar fotos de banco de imagens para sua seção de plano de fundo de vídeo?

Até agora, você deve ter uma ideia clara de como adicionar um plano de fundo de vídeo ao seu site. Mas, você tem um vídeo pronto para inserir? Se não, então permita-nos tornar mais fácil para você.

Se você é um videomaker ou contratou um para o seu projeto, não precisa se preocupar com isso. No entanto, se você quiser um videoclipe genérico para aprimorar a estética do seu site, poderá usar imagens de banco de imagens.

As filmagens de estoque são conteúdo isento de royalties que você pode usar sem problemas de direitos autorais. Vejamos a lista de quatro sites que fornecem vídeos premium e gratuitos.

1. Estoque

A Shutterstock permite que você baixe vários elementos multimídia, como imagens, gráficos, músicas, filmagens, etc. Google, BuzzFeed, Marvel e várias outras marcas de renome confiam em sua biblioteca de ações para impulsionar sua criatividade.

Você pode categorizar os vídeos com base em tópicos, como animais/vida selvagem, feriados, ciências, educação, natureza e muito mais. A Shutterstock tem mais de um milhão de vídeos de ações de qualidade 4K, HD e SD.

2. Elementos de Envato

A Envato Elements tem mais de 50 milhões de ativos digitais, como modelos gráficos, vídeos, áudio, fotos, fontes, etc. Eles têm todos os tipos de filmagens b-roll e videoclipes para natureza, negócios e plano de fundo.

3. Pexels

Pexels é uma biblioteca gratuita de imagens e vídeos. Você pode pesquisar qualquer categoria de filmagem, como casas, cafés, natureza, crianças, família e muito mais. Ele também permite que você doe para criadores de conteúdo se quiser apoiá-los.

4. Pixabay

O Pixabay tem uma comunidade de criadores talentosos com mais de 1,8 milhão de fotos e vídeos. Você pode usar, modificar e também distribuir seus elementos sem dar crédito. Semelhante ao Pexels, você pode doar um ou mais criadores, se desejar.

Perguntas frequentes (FAQs)

Empacotando!

Você pode criar um ótimo vídeo como plano de fundo usando as dicas e técnicas deste blog. Você conhece mais alguns plugins/extensões para adicionar esse recurso ao seu site? Por favor, compartilhe sua resposta na seção de comentários abaixo.

Além disso, você achou nosso blog informativo? Sinta-se à vontade para fornecer seus comentários honestos para que possamos melhorar nosso conteúdo futuro.