Como adicionar um vídeo flutuante fixo na rolagem da página no WordPress

como adicionar um vídeo flutuante fixo na rolagem da página

Quero aprender como adicionar um vídeo flutuante na rolagem da página em seu site WordPress?

Vídeos fixos são uma forma poderosa de atrair o público para o seu site. Hoje em dia, as pessoas consomem mais conteúdo de vídeo do que conteúdo escrito. Portanto, se você descobrir que os visitantes do seu site não se envolvem o suficiente com ele, adicionar um vídeo pode resolver esse problema.

Se você está procurando uma maneira fácil de tornar o vídeo do seu site pegajoso, então você encontrou o artigo certo. Porque neste blog você aprenderá como adicionar vídeo fixo em um site WordPress baseado em Elementor em algumas etapas e alguns minutos.

Então continue lendo…

O que é um vídeo fixo?

Vídeos fixos são vídeos que são fixado em uma página da web e permanece flutuando no mesmo lugar em uma janela de página da Web, mesmo enquanto o usuário está rolando para cima ou para baixo. 

Por que adicionar o site Sticky Video In Elementor WordPress?

O conceito de um vídeo fixo em um site não só parece legal, mas também tem muitas vantagens. Aqui estão alguns dos benefícios que você pode aproveitar ao adicionar um vídeo fixo ao seu Site WordPress.

  • Aumenta o envolvimento do usuário: Com o vídeo fixo, as pessoas podem assistir e ler o conteúdo da página da web ao mesmo tempo. Como resultado, as pessoas tendem a se envolver mais com os sites.
  • Aumente a taxa de conclusão do vídeo: Como os vídeos fixos não bloqueiam a página inteira, é provável que os clientes assistam até o final, em vez de fechá-los no meio. Portanto, tornar seu vídeo fixo pode, na verdade, aumentar o tempo de conclusão do vídeo.
  • Chame a atenção do usuário: Normalmente, as pessoas economizam em um site. Nesse caso, se você confiar apenas no conteúdo de texto, existe a possibilidade de seus clientes perderem coisas importantes que você gostaria que eles notassem. Você pode chamar a atenção do usuário de maneira mais eficaz para informações específicas com vídeo.
  • Melhor narrativa: Os vídeos oferecem uma tela mais ampla para contar histórias do que conteúdo de texto simples. Como você pode usar texto, animação e voz ao mesmo tempo em um vídeo, você estará mais bem equipado para contar uma história de maneira mais eficaz.

Convencido de que você deve adicionar um vídeo fixo ao seu site WordPress? Bem, se estiver, vá para a próxima seção para descobrir como você pode fazer isso.

Como adicionar um vídeo fixo ao site Elementor em 6 etapas

Este é o processo mais fácil de tornar o vídeo fixo e flutuante em seu site WordPress. Siga todas as etapas para adicionar um vídeo fixo ao Elementor em alguns instantes.

Etapa 1: Instale Elementor e ElementsKit

O primeiro passo é instalar todos os plug-ins necessários. Para seguir este tutorial sobre como adicionar vídeo fixo no Elementor, você precisará

Elementor é um construtor de páginas de arrastar e soltar, e ElementsKit é um complemento para Elementor. Então, primeiro você precisa instalar o Elementor, depois baixar o ElementsKit e depois atualizar seu plugin para a versão Pro.

Você pode conferir o documentação se precisar de ajuda com relação à instalação do ElementsKit pro e ao processo de ativação da licença.

Etapa 2: ativar o módulo de conteúdo fixo do ElementsKit

Para tornar o vídeo fixo, usarei os recursos de conteúdo fixo do ElementsKit. Portanto, você precisa ativar o módulo de conteúdo fixo.

Agora navegue até ElementsKit ⇒ Módulos ⇒ Conteúdo fixoligar a opção e clique em Salvar alterações para atualizar as alterações que você acabou de fazer.

adicionar vídeo fixo no Elementor

Etapa 3: arraste e solte o widget Elementor Video

Navegue até a página onde deseja adicionar o vídeo fixo, clique na opção Editar com Elementor.

como criar um vídeo flutuante fixo na rolagem da página

Escolha o layout desejado clicando em o ícone +. Depois disso, procure o vídeo widget, arraste o widget e derrubar onde você deseja adicioná-lo.

Arraste e solte o widget de vídeo Elementor como adicionar um vídeo flutuante fixo na rolagem da página

Observação: Para este tutorial, eu tenho já importei a página pré-fabricada Estou editando para mostrar todo o processo. Você pode criar sites WordPress facilmente com a seção pré-construída do ElementsKit.

Etapa 4: escolha a fonte do vídeo e adicione o URL

Com o widget de vídeo Elementor, você pode exibir vídeos de fontes como Youtube, Vimeo, DailyMotion e auto-hospedado.

Selecione o tipo de vídeo do YouTube Elementor widget como criar um vídeo flutuante fixo na rolagem da página

Primeiro, escolha o tipo de fonte de sua preferência e forneça o URL do vídeo.  Vou usar o YouTube para este artigo.

Observação: No caso de auto-hospedado, você pode enviar um vídeo para o seu servidor ou fornecer um URL externo.

Você também pode personalizar o estilo do vídeo. Para fazer isso, navegue até a guia de estilo. Aqui você pode escolha a proporção e o filtro CSS. Você pode escolher entre seis tipos de proporção, como 1:1, 3:2, 4:3, 16:9 etc. Clique no ícone de edição do filtro CSS para personalizar desfoque, brilho, contraste, saturação e matiz.

As configurações de estilo do Elementor Video Widget adicionam vídeo fixo no Elementor

Etapa 5: configurações para tornar o vídeo Elementor fixo

Vou ao Guia Avançado. Em seguida, expanda o adesivo ElementsKit opção. Aqui você pode escolher o tipo fixo como parte superior, inferior, coluna e exibido na rolagem para cima.

configurações do módulo fixo como adicionar um vídeo flutuante fixo na rolagem da página

Depois de escolher o tipo Sticky diferente de nenhum, você terá as seguintes opções:

  • Pegajoso até: Aqui você precisa definir o ID CSS da seção até a qual deseja que seu vídeo permaneça fixo. Você pode definir um ID CSS personalizado para a coluna e, em seguida, copie e cole-o na opção Sticky Until.
  • Deslocamento pegajoso: Nesta opção, defina o valor do deslocamento. O valor do deslocamento indica a distância entre o vídeo e a posição superior da sua página.
configurações superiores fixas como criar um vídeo flutuante fixo na rolagem da página no site WordPress

Observação: Fixo até que a opção não esteja disponível com a coluna de opção fixa, pois ela só ficará visível até que a coluna pai esteja visível na tela.

Você pode alterar o Cor de fundo pegajosa e fazer o vídeo fica fixo em todos os dispositivos, apenas em desktops ou em desktops e tablets.

🔥🔥 Procurando por um maneira mais fácil de adicionar uma enorme quantidade de dados para a tabela do seu site? Confira como você pode adicione dados CSV/Excel na tabela do WordPress em apenas algumas etapas usando o ElementsKit.

Etapa 6: atualize para adicionar vídeo fixo no Elementor e ver a visualização

Depois de escolher o tipo de vídeo e definir todas as configurações fixas, clique em atualizar para salvar e clique no botão de visualização para ver os resultados finais.

adicionar vídeo fixo no Elementor

Observação: Se você quiser um botão de vídeo fixo que aparece para mostrar um vídeo ao clicar então você pode usar o vídeo ElementsKit ferramenta em vez do widget Elementor Video. Você pode seguir o mesmo processo descrito acima para adicionar vídeo fixo no Elementor usando o widget de vídeo ElementsKit.

Aqui está um visualização do Sticky Video usando o widget de vídeo ElementsKit.

como adicionar um vídeo flutuante fixo na rolagem da página

👉👉 Você também pode conferir nosso blog em Como criar um modelo de postagem de blog Elementor personalizado

Palavras Finais

Parabéns! Agora você sabe como adicionar vídeo fixo no site Elementor. É muito mais fácil de fazer do que parece inicialmente, certo?

Experimente todas as opções e configurações do módulo fixo ElementsKit e use-o em seu site para obter resultados máximos. Se você está impressionado com o módulo fixo do ElementsKit e como é fácil adicionar como adicionar um vídeo flutuante fixo na rolagem da página.

Então o coleção saudável de widgets e os módulos que o ElementsKit tem a oferecer irão surpreendê-lo ainda mais. Portanto, certifique-se de verificar todos os recursos que o ElementsKit tem a oferecer.

Comentários

Deixe um comentário

Seu endereço de e-mail não será publicado. Campos obrigatórios marcados com *