Como mostrar/ocultar um controle deslizante de vídeo com base no status conectado com o Divi
Publicados: 2022-03-05Sliders de vídeo são ótimos para exibir uma coleção de vídeos para um curso, uma página de receitas ou tutoriais. Eles também são um bom candidato para apresentar conteúdo premium para membros ou assinantes do seu site. Por exemplo, um visitante pode acessar uma página de receita e ver instruções apenas em formato de texto. No entanto, uma vez que eles se tornem um usuário registrado, eles verão um controle deslizante de vídeo na mesma página como conteúdo premium. Neste tutorial, mostraremos como é fácil ocultar/mostrar um controle deslizante de vídeo com base no status de login com o Divi. Isso permite que você forneça conteúdo de vídeo para usuários conectados como um recurso premium.
Vamos mergulhar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial. Observe como o controle deslizante de vídeo fica oculto dos usuários até que eles façam login usando o formulário de login.
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?
Mostrando/ocultando um controle deslizante de vídeo com base no status de login 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.
Adicionando o controle deslizante de vídeo à página
Na página da receita, você verá um vídeo de largura total em uma linha logo abaixo da linha com os ingredientes e instruções. Vamos substituir o vídeo por um módulo de controle deslizante de vídeo. Para fazer isso, exclua o módulo de vídeo.
Em seguida, adicione um novo módulo de controle deslizante de vídeo em seu lugar.
Adicionando vídeos ao controle deslizante
Para adicionar vídeos ao controle deslizante, abra as configurações do controle deslizante de vídeo. Na guia de conteúdo, você verá um vídeo simulado já em vigor. Abra as configurações do vídeo existente.
Em seguida, exclua o vídeo padrão e clique no ícone Adicionar vídeo para adicionar um novo vídeo ao controle deslizante.
Para este exemplo, estou adicionando um vídeo auto-hospedado. É sempre uma boa ideia fazer upload de uma versão MP4 e Webm do arquivo de vídeo.
Em seguida, podemos adicionar uma sobreposição de imagem ao vídeo.
Feito isso, salve as alterações.
Para criar vídeos adicionais, volte para as configurações do controle deslizante de vídeo e duplique o vídeo existente 3 vezes para obter um total de 4 vídeos. Em seguida, na opção de sobreposição, alterne para SIM para mostrar sobreposições de imagem no vídeo principal.
Adicionando a opção de exibição condicional
Para este tutorial, vamos mostrar este controle deslizante de vídeo apenas para usuários que estão logados. Para fazer isso, vá para a guia avançado e clique para adicionar uma nova condição no grupo de opções de condições.
No menu suspenso de condições de exibição, selecione Status de login na lista. Certifique-se de selecionar para exibir somente se o usuário estiver conectado . Em seguida, salve as alterações.
Dica de bônus: crie um CTA ou formulário de login para usuários que não estão logados
Para novos visitantes, você provavelmente desejará criar algum tipo de CTA para se registrar ou um formulário de login para facilitar o login dos membros e a visualização dos vídeos. Para fazer isso, você pode criar uma nova linha de duas colunas com uma imagem que se parece com um vídeo na coluna da esquerda e um formulário de login na coluna da direita, como na captura de tela abaixo.
Em seguida, abra as configurações de linha e adicione uma condição de exibição com base no status de login. Somente desta vez, selecione para exibir somente se o usuário estiver desconectado . Isso mostrará o conteúdo para os usuários somente se eles estiverem desconectados.
Ao adicionar o formulário de login, certifique-se de atualizar a opção de redirecionamento para redirecionar para a página atual . Isso melhorará o UX para usuários que desejam fazer login e visualizar os vídeos na mesma página.
Para saber como criar uma seção de CTA para usuários desconectados do zero, confira nossa postagem sobre como criar postagens de blog exclusivas para membros com as opções de condição do Divi.
Resultados finais
Aqui está uma olhada em nossos controles deslizantes de vídeo finais. Observe como eles estão ocultos dos usuários até que eles façam login usando o formulário de login.
O 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 imagens 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.
Pensamentos finais
Ter a capacidade de mostrar/ocultar controles deslizantes de vídeo com base no status de login pode ser útil quando você deseja oferecer conteúdo premium a membros ou assinantes.
Para saber mais, confira uma postagem semelhante sobre como criar postagens de blog exclusivas para membros com as opções de condição do Divi.
Estou ansioso para ouvir de você nos comentários.
Saúde!