Como criar um controle deslizante de vídeo com Divi
Publicados: 2022-03-07Os Sticky Video Sliders são uma maneira eficaz de manter uma coleção concisa de vídeos em primeiro plano enquanto os usuários percorrem o conteúdo de uma página. Isso funcionaria muito bem para tutoriais ou receitas que se beneficiariam de instruções em vídeo e escritas simultaneamente. Neste tutorial, mostraremos como é fácil criar um controle deslizante de vídeo fixo com o Divi. E para nosso caso de uso de exemplo, vamos adicionar um controle deslizante de vídeo fixo a uma página de receita.
Vamos mergulhar!
Inscreva-se em nosso canal no Youtube
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Baixe o Layout GRATUITAMENTE
Para colocar as mãos nos designs deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para ter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como novo assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será “subscrito novamente” ou receberá e-mails extras.
Download de graça
Junte-se ao Boletim Divi e nós lhe enviaremos por e-mail uma cópia do pacote de layout de página de destino Divi, além de muitos outros recursos, dicas e truques incríveis e gratuitos do Divi. Acompanhe e você será um mestre Divi em pouco tempo. Se você já é inscrito, basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Verifique seu endereço de e-mail para confirmar sua assinatura e ter acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout da seção para sua Biblioteca Divi, navegue até a Biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a guia de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Uma vez feito, o layout da seção estará disponível no Divi Builder.
Vamos ao tutorial?
Criando um controle deslizante de vídeo fixo com Divi
Criar uma nova página com um layout pré-fabricado
Vamos começar com nosso tutorial colocando uma nova página em funcionamento com um de nossos layouts pré-fabricados.
Aqui está como fazê-lo:
- Crie uma nova página e dê um título a ela
- Clique para usar o Divi Builder (no front-end)
- Selecione para usar um layout predefinido
- Pesquise e selecione o layout da página da receita do nutricionista.
- Para carregar o layout para a página, basta clicar no botão “Usar este Layout”.
Depois que o layout for carregado na página, você estará pronto para adicionar o controle deslizante de vídeo fixo à página.
Modificando o layout do Sticky Video Slider
Para este exemplo, vamos adicionar um controle deslizante de vídeo fixo à coluna esquerda de uma linha de duas colunas. Isso nos permitirá manter os vídeos em exibição enquanto o usuário rola para preparar o conteúdo na coluna da direita. Esse tipo de configuração funcionaria muito bem para receitas e tutoriais que se beneficiariam de vídeo e instruções escritas.
Para modificar o layout, primeiro localize a segunda linha na segunda seção da página contendo os “Ingredientes” e “Instruções”. Em seguida, mova os dois módulos de texto da coluna da esquerda para o topo da coluna da direita, deixando a coluna da esquerda vazia.
Criando o módulo Sticky Video Slider
Na coluna esquerda vazia da mesma linha, adicione um novo módulo de controle deslizante de vídeo.
O vídeo simulado mostrará um de nossos vídeos do Youtube usando uma incorporação de URL. É assim que você pode adicionar vídeos hospedados por terceiros ao seu controle deslizante de vídeo. Para alterar o vídeo, abra as configurações do item de vídeo.
Em seguida, selecione a ação “Inserir da URL”. Cole a nova URL dentro da caixa de entrada e clique no botão “Inserir na postagem”.
Para adicionar mais vídeos ao controle deslizante, você pode clicar no ícone de adição cinza “Adicionar novo vídeo” ou simplesmente duplicar o vídeo existente. Para este exemplo, vamos duplicar o vídeo existente duas vezes para fazer um total de 3 vídeos no controle deslizante.
Na guia design, atualize a cor da sobreposição da miniatura para corresponder ao layout.
- Cor da sobreposição da miniatura: rgba(53,55,82,0,55)
Tornando o controle deslizante de vídeo “pegajoso”
Para tornar o controle deslizante “fixo”, vá na guia avançado e atualize o seguinte:
- Posição adesiva: Stick to Top (desktop), Não Stick (tablet e telefone)
- Deslocamento superior fixo: 30px (desktop), 0px (tablet e telefone)
- Limite de aderência inferior: linha
Isso garantirá que o controle deslizante de vídeo fique na parte superior da janela do navegador quando atingir a parte superior do navegador enquanto rola a página para baixo. Então ele deixará de ser pegajoso sempre que chegar ao final da linha.
Resultado
Problema com vídeos/incorporações do YouTube usando as sobreposições de imagem no vídeo principal
Se você estiver usando um URL do YouTube para incorporar vários vídeos no controle deslizante de vídeo, é melhor não usar a opção interna do Divi para “Mostrar sobreposições de imagem no vídeo principal”. Isso fará com que o áudio do vídeo seja reproduzido automaticamente desde o início no estado fixo, causando a reprodução de áudio duplicada em intervalos diferentes.
Este não é o caso de vídeos auto-hospedados em formato de arquivo mp4 ou webm. Você pode mostrar sobreposições de imagem no vídeo principal para vídeos auto-hospedados. Portanto, se você quiser usar a imagem de sobreposição do Divi e o ícone de reprodução com o Módulo de vídeo Divi, adicione arquivos / URLs de vídeo MP4 e Webm.
Dito isso, você ainda pode adicionar sobreposições de imagens personalizadas aos seus vídeos do Youtube no controle deslizante de vídeo. Eles ainda aparecerão nos controles de miniatura no vídeo principal.
Dica profissional: crie imagens em miniatura para cada etapa em uma sequência de vídeos
Se você tiver o know-how, poderá criar facilmente uma miniatura simples para cada vídeo para organizá-los por etapas ou números.
exemplo de imagem de sobreposição
Aqui está um exemplo de como isso ficaria no controle deslizante.
Usando vídeos auto-hospedados no controle deslizante
Se você quiser usar vídeos auto-hospedados no controle deslizante, abra as configurações do vídeo.
Clique em Adicionar vídeo.
Escolha o arquivo da sua biblioteca ou adicione um URL de hospedagem de terceiros ao vídeo.
É sempre uma boa ideia adicionar um arquivo MP4 e um arquivo Webm para cada vídeo. Combinados, esses dois oferecem suporte para a maioria dos navegadores da Web, incluindo dispositivos móveis.
Não se esqueça, você pode adicionar uma sobreposição de imagem para servir como uma boa miniatura para o seu vídeo.
Na opção Overlay, você pode até optar por mostrar sobreposições de imagens no vídeo principal.
Resultados finais
Aqui está outra olhada em nossos controles deslizantes de vídeo em ação.
Pensamentos finais
Criar um módulo de controle deslizante de vídeo fixo é bastante simples se você estiver familiarizado com as opções adesivas integradas do Divi. E o resultado pode ter ótimas aplicações. Para mais, ajudaria a entender como os vídeos funcionam no Divi também.
Além disso, confira como você pode criar um vídeo fixo com uma alternância ocultar/exibir.
Estou ansioso para ouvir de você nos comentários.
Saúde!