Como adicionar um vídeo flutuante fixo na rolagem da página no WordPress
Publicados: 2022-03-25Quer aprender como adicionar um vídeo flutuante fixo na rolagem da página no seu site WordPress?
Vídeos fixos são uma maneira poderosa de envolver seu público em seu site. Hoje em dia, as pessoas consomem mais conteúdo em vídeo do que conteúdo escrito. Portanto, se você achar que os visitantes do seu site não estão se envolvendo o suficiente com seu site, 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ê chegou ao artigo certo. Porque neste blog, você aprenderá como adicionar vídeo fixo no 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 fixados em uma página da Web e permanecem flutuando no mesmo lugar em uma janela da página da Web, mesmo enquanto o usuário está rolando para cima ou para baixo.
Por que adicionar Sticky Video In Elementor WordPress site?
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 adicionando 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 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á-la no meio do caminho. Portanto, tornar seu vídeo fixo pode realmente aumentar o tempo de conclusão do vídeo.
- Agarre a atenção do usuário: Normalmente, as pessoas passam rapidamente por 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 forma 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 o conteúdo de texto simples. Como você pode usar texto, animação e voz ao mesmo tempo em um vídeo, está mais bem equipado para contar uma história de forma mais eficaz.
Convencido de que você deve adicionar um vídeo fixo ao seu site WordPress? Bem, se você for, 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 momentos.
Etapa 1: instalar o Elementor e o ElementsKit
Primeiro, o passo é instalar todos os plugins necessários. Para seguir este tutorial sobre como adicionar vídeo fixo no Elementor, você precisará
- Elementor e
- ElementsKit (versões gratuitas e pro).
O Elementor é um construtor de páginas de arrastar e soltar, e o ElementsKit é um complemento para o 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 a 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: ative o módulo de conteúdo fixo do ElementsKit
Para tornar o vídeo pegajoso, vou usar os recursos de conteúdo fixo do ElementsKit. Então, você precisa habilitar o módulo de conteúdo fixo.
Agora navegue até ElementsKit ⇒ Modules ⇒ Sticky Content , ative a opção e clique em Save Changes para atualizar as alterações que você acabou de fazer.
Etapa 3: arraste e solte o widget Elementor Video
Navegue até a página onde você deseja adicionar o vídeo fixo, clique na opção Editar com Elementor.
Escolha qualquer layout que desejar clicando no ícone + . Depois disso, procure o widget Vídeo , arraste o widget e solte -o onde deseja adicioná-lo.
Nota : Para este tutorial, já importei a página pré-criada que estou editando para mostrar todo o processo. Você pode criar sites WordPress facilmente com a seção pré-construída ElementsKit.
Etapa 4: escolha a origem 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 Self Hosted.
Primeiro, escolha seu tipo de fonte preferido e forneça o URL do vídeo. Vou usar o youtube para este artigo.
Nota : No caso de auto-hospedagem, você pode enviar um vídeo para 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 escolher 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.
Etapa 5: configurações para tornar o vídeo do Elementor fixo
Vá para a guia Avançado. Em seguida, expanda a opção adesiva ElementsKit . Aqui você pode escolher o tipo de adesivo como superior, inferior, coluna e mostrar na rolagem para cima.
Depois de escolher o tipo Sticky como algo diferente de nenhum, você terá as seguintes opções:
- Fixo 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, copiá-lo e colá-lo na opção Fixo até.
- Sticky Offset: Nesta opção, defina o valor de deslocamento. O valor de deslocamento indica a distância entre o vídeo e a posição superior da sua página.
Nota : Fixo até que a opção não esteja disponível com a coluna de opções fixas, pois só ficará visível até que a coluna pai esteja visível na tela.
Você pode alterar a Sticky Background Color e tornar o vídeo fixo em todos os dispositivos, somente desktop ou desktop e tablets.
Procurando uma maneira mais fácil de adicionar uma grande quantidade de dados à tabela do seu site? Verifique como você pode adicionar 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 veja 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.
Nota: Se você quiser um botão de vídeo fixo que apareça para mostrar um vídeo ao clicar , você pode usar o widget ElementsKit Video 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á uma prévia do Sticky Video usando o widget de vídeo ElementsKit .
Você também pode conferir nosso blog sobre Como criar um modelo de postagem de blog personalizado do Elementor
Palavras finais
Parabéns! Agora você sabe como adicionar vídeo fixo no site Elementor. É muito mais fácil de fazer do que inicialmente parece, certo?
Experimente todas as opções e configurações do módulo adesivo ElementsKit e use-o em seu site para obter o máximo de resultados. Se você está impressionado com o módulo fixo ElementsKit e como é fácil adicionar como adicionar um vídeo flutuante fixo na rolagem da página.
Então, a coleção saudável de widgets e módulos que o ElementsKit tem a oferecer irá surpreendê-lo ainda mais. Portanto, certifique-se de verificar todos os recursos que o ElementsKit tem a oferecer.