Como adicionar um plano de fundo de vídeo a um site WordPress

Procurando a maneira mais fácil de adicionar um plano de fundo de vídeo do WordPress?

Fundos de vídeo bem feitos chamam a atenção e fazem as marcas parecerem legais desde o início. Mas, quando mal feito, um plano de fundo de vídeo deixa seu site mais lento, ocupa espaço e confunde novos visitantes. É por isso que criamos este guia para que você possa evitar todas as armadilhas e, em vez disso, aprenda como adicionar um plano de fundo de vídeo do WordPress da maneira certa.

Continue lendo para aprender sobre as melhores práticas e etapas para adicionar um plano de fundo de vídeo ao seu site WordPress, tudo sem nenhum conhecimento técnico especial.

Práticas recomendadas para adicionar um plano de fundo de vídeo do WordPress

• Mantenha os tamanhos dos arquivos baixos, mas a resolução alta: nada atrapalha mais o desempenho do seu site do que vídeos e imagens grandes; ainda assim, é preferível manter a resolução durante a compressão.
• Não exagere: muitos vídeos atrapalham sua interface; use-os apenas para fazer um ponto ou mostrar algo relevante.
• Inclua uma frase de chamariz com informações adicionais: não deixe os espectadores querendo mais e esqueça um link que leva a mais detalhes.
• Evite áudio a todo custo: é chocante quando todas as pessoas querem apenas ver seu site.
• Se o áudio for necessário, não o coloque na reprodução automática: forneça uma opção para os usuários reproduzirem áudio.
• Considere legendas ocultas para vídeos com áudio: nem todos podem ouvir seu áudio, seja por causa de sua localização ou deficiência auditiva.
• Hospedar externamente: seu host de site provavelmente não foi projetado para veicular vídeos, então escolha sites como Vimeo e YouTube para manter o desempenho ou considere um site de hospedagem de vídeo especializado.
• Atenha-se aos melhores formatos/resoluções: estamos falando apenas de MP4s; um mínimo de 720p; codec h264.

E lembre-se, nem todos os sites precisam de vídeo; às vezes, apenas torna a interface confusa, lenta e desfocada. Um advogado, por exemplo, deve se ater a fotos profissionais, em vez de vídeos bregas de aperto de mão que tendem a desacelerar seu site.

Como adicionar um plano de fundo de vídeo do WordPress

Existem vários métodos que ativam recursos de plano de fundo de vídeo no WordPress.

Vamos nos concentrar em quatro soluções diferentes sem código:

1. O bloco de cobertura embutido
2. Um plug-in de plano de fundo/cabeçalho
3. Seu plugin construtor de páginas favorito
4. Usando um tema compatível com planos de fundo ou cabeçalhos de vídeo

Siga as etapas para cada método abaixo.

Opção 1: bloco de tampa embutido

O editor nativo do WordPress oferece o que é chamado de bloco de capa para inserir imagens de fundo atrás de outro conteúdo, como texto e botões.

O que muitos usuários do WordPress não percebem é que o bloco Cover também suporta fundos de vídeo.

Etapa 1: adicione o bloco de capa

Para começar, vá para a página em que deseja adicionar o plano de fundo e adicione o bloco Capa .

Etapa 2: envie seu vídeo

Para a Capa , escolha o botão Carregar ou Biblioteca de mídia , o que você pretende usar para adicionar vídeo.

O bloco Capa não diz nada sobre o suporte a vídeos, então você só precisa escolher um vídeo (como um MP4) da Biblioteca de mídia . Clique no botão Selecionar quando tiver um vídeo marcado.

Etapa 3: inserir conteúdo de primeiro plano sobreposto

Agora você deve ver uma prévia do vídeo de fundo. Você pode adicionar blocos de primeiro plano à Capa , como texto ou botões.

Etapa 4: edite as configurações da capa conforme necessário

As configurações da capa incluem:

• Sobreposições de cores: ideais para facilitar a leitura do texto
• Opacidade: também útil para revelar conteúdo em primeiro plano
• Altura mínima de cobertura: às vezes é necessário fazer com que o plano de fundo do vídeo do WordPress cubra mais espaço

Etapa 5: veja seu plano de fundo de vídeo do WordPress em ação

Quando terminar, salve a página e vá para o frontend para ver o plano de fundo do seu vídeo WordPress!

Existem alguns plugins para adicionar fundos de vídeo do WordPress, alguns dos quais oferecem fundos de site completos, enquanto outros são fornecidos para fornecer um cabeçalho de vídeo.

Estes são os melhores plugins de fundo de vídeo:

️ Nosso favorito é o plugin Advanced WordPress Backgrounds; mostraremos como adicionar um plano de fundo de vídeo do WordPress com esse plug-in em apenas algumas etapas.

Etapa 1: instale o AWB e adicione seu bloco de conteúdo

Para começar, instale o Advanced WordPress Backgrounds (AWB).

Vá para a página onde você deseja adicionar o vídeo de fundo.

Usando o editor do WordPress, clique para adicionar um bloco de conteúdo. Procure e selecione o bloco Background (AWB) .

Etapa 2: adicione seu vídeo

Isso oferece opções para adicionar fundos de cor, imagem ou vídeo ao elemento.

Escolha Vídeo e cole um URL de vídeo do YouTube ou Vimeo. Como alternativa, o plugin possui uma guia Self Hosted para upload de vídeos locais.

Etapa 3: expandir a altura e a largura do plano de fundo do vídeo

Por padrão, o bloco de conteúdo não se estende para cobrir grande parte da área da página. Você deve clicar no botão Altura total no editor. Há também um botão para estender o plano de fundo do vídeo para largura total.

Você também pode arrastar ou inserir conteúdo, como texto, botões ou imagens, sobre o vídeo de fundo.

Etapa 4: modifique as configurações de plano de fundo do vídeo do WordPress

Ajuste a configuração desejada na guia Bloco : hora de início, hora de término, loop, sempre tocando, opacidade do vídeo.

É aconselhável adicionar uma sobreposição de cor de fundo com opacidade reduzida; isso torna o texto sobreposto mais fácil de ler.

Faça isso indo para a guia Block e alterando a cor para branco ou preto em Background Color . Mova o controle deslizante de Opacidade um pouco para baixo para garantir que o plano de fundo ainda seja exibido.

Etapa 5: veja os resultados

O resultado é um vídeo sendo reproduzido na frente de outro conteúdo, de preferência um que faça loops, não tenha som e ainda mantenha a maior parte do foco no conteúdo em primeiro plano.

Opção 3: seu plugin de construtor de páginas favorito

A maioria dos construtores de páginas, como Elementor, WPBakery e Divi, oferece recursos de plano de fundo para adicionar um plano de fundo de imagem ou vídeo a praticamente qualquer módulo de conteúdo.

️ Sinta-se à vontade para escolher o construtor de páginas de sua preferência, mas recomendamos o Elementor devido à sua facilidade de uso.

Certifique-se de instalar o Elementor ou qualquer construtor que você pretende usar antes de começar.

Etapa 1: abrir uma página com o editor Elementor

Vá para Páginas no WordPress e selecione a página designada como sua página inicial . Clique no botão Editar com Elementor .

Etapa 2: adicionar um bloco de conteúdo de seção

A maioria dos módulos de conteúdo no Elementor oferece configurações de plano de fundo, mas recomendamos inserir uma seção. Dessa forma, você pode adicionar vários itens à seção, como texto, imagens e botões. Em seguida, você adiciona um plano de fundo de vídeo à seção para que fique atrás de tudo em primeiro plano.

Adicionamos algum texto e um botão a uma seção em nosso tutorial. Vá em frente e selecione o ícone Editar seção e, em seguida, selecione a guia Estilo .

Etapa 3: insira o plano de fundo do seu vídeo

Aqui, você verá uma área suspensa de plano de fundo . Escolha a opção Vídeo ao lado de Tipo de plano de fundo . Em seguida, cole um URL do YouTube, Vimeo ou um arquivo local no campo Link do vídeo .

Etapa 4: edite as configurações de plano de fundo do vídeo

Pode ser necessário expandir o plano de fundo do vídeo para ocupar mais da tela. Para fazer isso, alterne para a guia Layout e ajuste Altura e Altura mínima .

De volta à guia Estilo , considere alterar as configurações do vídeo de fundo:

• Hora de início
• Fim do tempo
• Jogue uma vez
• Jogue no celular
• Modo de privacidade

Além disso, pense em adicionar uma sobreposição de plano de fundo - geralmente uma cor neutra como preto ou branco, e algumas alterações de opacidade - para tornar o texto, os botões e as imagens em primeiro plano mais visíveis.

Etapa 5: visualize o plano de fundo do vídeo do WordPress no frontend

Quando terminar, o vídeo será reproduzido por trás de todo o conteúdo da seção!

Opção 4: Use um tema WordPress que suporte fundos/cabeçalhos de vídeo

Vários temas do WordPress oferecem configurações de mídia integradas de cabeçalho, controle deslizante e página inteira; eles permitem que você carregue uma imagem, GIF ou vídeo para ocupar a tela inteira, geralmente usado como cabeçalho para sua página inicial.

Para encontrar temas com recursos de plano de fundo de vídeo, pesquise "fundo de vídeo" em mercados populares:

️ Certifique-se de verificar as listas de recursos ou até mesmo perguntar ao desenvolvedor antes de baixar/comprar, para garantir que um tema tenha a funcionalidade de plano de fundo de vídeo.

Como exemplo, o tema Colibri WP oferece fundos de vídeo.

Passo 1: Instale e ative o tema

Para ativar um plano de fundo de vídeo, instale o tema Colibri WP e vá para Aparência > Configurações do Colibri > Começar . Aqui, você pode ativar o recurso Colibri Page Builder.

Etapa 2: adicionar um site de demonstração

Clique na guia Sites de demonstração e importe o modelo de demonstração de sua escolha.

Etapa 3: personalize a imagem do herói

Navegue até Aparência > Personalizar e selecione o ícone de engrenagem Configurações ao lado do módulo Hero .

Etapa 4: adicionar um plano de fundo de vídeo

Selecione a guia Estilo e alterne o Plano de fundo para Vídeo .

Por fim, escolha YouTube para colar em um URL de vídeo externo ou Auto-hospedado para fazer upload de vídeo local.

Como resultado, você verá o plano de fundo do vídeo em movimento na visualização do Personalizador.

Comece com o fundo de vídeo perfeito

Neste post, você aprendeu quatro métodos diferentes, pelo menos um dos quais deve funcionar para sua situação.

️ Para outras maneiras de melhorar seu site, confira nosso post com 10 elementos de um design de página inicial de sucesso.

Para qualquer dúvida sobre os fundos de vídeo do WordPress, compartilhe seus pensamentos nos comentários abaixo.