Como Criar um Vídeo Promocional Fixo com Alternância Mostrar / Ocultar no Divi
Publicados: 2020-11-25Um vídeo promocional é uma excelente ferramenta de marketing para promover seus produtos e serviços a todos os visitantes que preferem apenas assistir a um vídeo do que explorar sua página em busca de informações. E, se você tem certeza de que seu vídeo ajudará a aumentar as conversões, é uma boa ideia manter o vídeo disponível para os usuários o máximo possível. Com isso em mente, um vídeo promocional fixo (um vídeo que fica fixo no topo da página) pode ser um recurso valioso para o seu site.
Neste tutorial, vamos mostrar como criar um vídeo promocional pegajoso com uma alternância de mostrar / ocultar no Divi. A ideia é mostrar a versão em tamanho real do vídeo inicialmente acima da dobra. Então, conforme o usuário rola a página para baixo, o vídeo adere ao topo da página para fácil acesso e / ou visualização enquanto o usuário explora o restante do conteúdo da página. Claro, isso pode ser um pouco intrusivo para alguns visitantes. Portanto, também mostraremos como adicionar um botão de alternância para dar aos usuários a capacidade de mostrar ou ocultar o vídeo sempre que desejarem.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Este é o vídeo pegajoso sem o botão de alternância.
Aqui está o mesmo vídeo fixo com o botão de alternância.
Aqui está uma visão mais detalhada da funcionalidade de alternância.
E aqui está o que parece no celular.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está 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. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha 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 aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Selecione a opção “Choose a Premade Layout”.
- Faça upload do layout da página de serviços de marketing digital.
Como Criar um Vídeo Promocional Fixo com Alternância Mostrar / Ocultar para Sua Página de Vendas
Adicionando a linha para o vídeo aderente
Para começar, vamos deletar o segundo módulo de texto na linha da primeira / seção superior do layout.
Sob a linha existente da seção superior, adicione uma nova linha de uma coluna.
Abra as configurações de linha para a nova linha e, na guia Avançado, atualize o Índice Z da seguinte maneira:
- Índice Z: 14
Isso garantirá que o vídeo adicionado à linha permaneça acima do outro conteúdo na página quando travado durante a rolagem da página.
Adicionando o Vídeo
Dentro da coluna da linha, adicione um novo módulo de vídeo.
Abra as configurações de vídeo e carregue os formatos mp4 e webm para o vídeo de sua escolha.
Se desejar, adicione uma imagem de sobreposição ao vídeo.
Na guia Design, atualize as seguintes opções de tamanho:
- Largura máxima: 900px
- Alinhamento do Módulo: centro
- Cantos arredondados: 8px
- Sombra da caixa: veja a imagem
Tornando a coluna pegajosa
Abra as configurações da coluna que contém o vídeo e adicione a seguinte classe CSS na guia Avançado:
- Classe CSS: et-sticky-video
Em seguida, atualize a posição do stick da seguinte maneira:
- Posição pegajosa: grudar no topo
- Estilos padrão de transição e fixos: NÃO
Agora que a posição fixa está em vigor, adicione o seguinte CSS personalizado ao elemento principal para o estado fixo:
width: 300px !important; right: 0px !important; left: auto !important; top: 0px;
Atualizar o tamanho do ícone de reprodução de vídeo no estado fixo
Em seguida, abra as configurações de vídeo novamente e atualize o tamanho da fonte do ícone de reprodução no estado fixo da seguinte forma:
- Use o tamanho do ícone personalizado: SIM
- Tamanho da fonte do ícone de reprodução (aderente): 50px
Resultado até agora
Criando o botão de alternância de vídeo aderente
Para criar o botão de alternância de vídeo aderente, crie um novo módulo de botão no módulo de vídeo.
Em seguida, mova o botão acima do módulo de vídeo.
Abra as configurações do botão e atualize o texto do botão da seguinte forma:
- Texto do botão: Ocultar
(NOTA: Este texto será substituído / alternado pela palavra “Mostrar” ao clicar no botão quando adicionarmos nosso código posteriormente.)
Na guia de design, atualize o seguinte:
- Use estilos personalizados para o botão: SIM
- Estilos de texto de botão: 14 px
- Cor do texto do botão: # fa50a9
- Peso da fonte do botão: Semi negrito
- Estilo da fonte do botão: TT
- Ícone do botão: seta para a direita
- Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
(NOTA: o ícone do botão que você escolher será girado 180 graus ao clicar no botão quando adicionarmos o layout do código para uma melhor experiência do usuário mais intuitiva.
Atualize o espaçamento do botão também:
- Preenchimento: 0,5em superior, 0,5em inferior, 1em à esquerda, 1,7em à direita
Na guia Avançado, adicione a seguinte classe CSS ao botão:
- Classe CSS: et-sticky-video-toggle
Na guia Avançado, atualize a opção de posição:
- Posição: Absoluta
- Localização: canto inferior esquerdo
Agora mova o botão fora da coluna / vídeo para a esquerda, atualizando a opção transform translate no estado aderente da seguinte maneira:
- Transformar Traduzir eixo X (aderente): -100%
Para finalizar o design do alternador de botão, precisamos ocultar o botão até que ele atinja o estado aderente. Para fazer isso, atualize o CSS personalizado para o elemento principal da área de trabalho e estado fixo da seguinte maneira:
Para o elemento principal na área de trabalho ...
display:none !important;
Para o elemento principal no sticky ...
display:block !important;
Adicionando o código personalizado para a funcionalidade de alternância
Para fazer com que a alternância funcione como precisamos, precisaremos adicionar um módulo de código no módulo de vídeo.
CSS customizado
Na guia de conteúdo, passe o seguinte CSS personalizado, certificando-se de envolvê-lo nas tags de estilo .
.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}
JQuery personalizado
Em seguida, sob o CSS com as tags de estilo, adicione o seguinte JQuery envolvido nas tags de script .
(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');
$stickyVideoToggle.on('click',function(e) {
e.preventDefault();
$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');
$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);
É isso!
Resultado final
Agora veja a versão ao vivo da página para ver os resultados por si mesmo.
Este é o vídeo pegajoso sem o botão de alternância.
Aqui está o mesmo vídeo fixo com o botão de alternância.
Aqui está uma visão mais detalhada da funcionalidade de alternância.
E aqui está o que parece no celular.
Adicione facilmente módulos adicionais à coluna fixa para complementar o vídeo
Como a posição fixa é adicionada à coluna (não ao vídeo), fique à vontade para adicionar módulos / conteúdo adicionais para complementar o vídeo.
Por exemplo, você pode incluir um botão na parte inferior do vídeo na mesma coluna fixa.
Em seguida, ele permanecerá abaixo do vídeo no estado fixo da coluna.
Adicione facilmente suas próprias opções de vídeo personalizadas com este layout de vídeo aderente
Ter a posição fixa aplicada à coluna (não ao vídeo) também é útil para adicionar incorporações de vídeo personalizadas ou HTML (usando um módulo de texto ou código) dentro da coluna. A funcionalidade de vídeo aderente ainda funcionará.
Por exemplo, você pode adicionar um vídeo HTML5 a um módulo de código na mesma coluna.
Altere facilmente as estruturas da coluna também!
Além disso, você pode facilmente alterar a linha para qualquer estrutura de coluna na qual deseja exibir seu vídeo com conteúdo adjacente. Por exemplo, você pode usar um layout de duas colunas com o vídeo aderente inicialmente na coluna direita ou esquerda. Apenas certifique-se de que a coluna que contém o conteúdo de vídeo tenha a mesma classe CSS e estilo fixo conforme explicado neste tutorial. A funcionalidade sticky funcionará da mesma maneira.
Por exemplo, usando nosso design existente, podemos adicionar uma nova coluna usando a visualização de camadas e preencher essa nova coluna com o texto do título principal.
A coluna aderente ainda funcionará perfeitamente enquanto a coluna / conteúdo adjacente permanece no fluxo normal do documento.
Problema com vídeos / incorporações do YouTube usando a opção de imagem de sobreposição Divi
Se você estiver usando um URL do YouTube para incorporar um vídeo com o Módulo de Vídeo como neste design, é melhor não usar a opção de imagem de sobreposição embutida do Divi (com o ícone de reprodução). 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 duplicado em intervalos diferentes. Portanto, se quiser usar a imagem de sobreposição do Divi e o ícone de reprodução com o Módulo de vídeo Divi, você deve adicionar os arquivos / URLs de vídeo mp4 e WebM.
Pensamentos finais
Construir um vídeo promocional fixo com alternar mostrar / ocultar para sua página abre a porta para novas maneiras de promover seus produtos e serviços. Você pode não apenas manter os vídeos de alta conversão em primeiro lugar, mas também pode incluir facilmente informações complementares ou CTAs acima ou abaixo do vídeo, apenas adicionando-o à mesma coluna no Divi.
Na verdade, você nem mesmo precisa incluir um vídeo, apenas preencha a coluna com qualquer informação que você queira colocar no topo da página na rolagem!
Estou ansioso para ouvir de você nos comentários.
Saúde!