10 min de leituraUsando slide de vídeo do Divi

mar 8, 2022 | Blog, DIVI

Thumbnail Track vs Dot Navigation é uma daquelas coisas que devemos considerar ao adicionar um módulo Video Slider aos nossos layouts Divi. Ambos são boas escolhas, mas cada um é mais adequado para determinadas situações. Neste artigo, veremos como usar Thumbnail Track vs Dot Navigation no módulo Video Slider do Divi para ajudá-lo a decidir qual usar em sua situação.

 

Trilha de miniaturas e navegação por pontos

O Thumbnail Track e o Dot Navigation facilitam a navegação pelos slides de vídeo no módulo Divi Video Slider. Ambos exibem o vídeo atual no player de vídeo, mas sua navegação é muito diferente.

Ambos os tipos de navegação funcionam bem, mas há momentos em que um é uma escolha melhor do que o outro. Vamos explorar essa ideia à medida que avançamos. O exemplo abaixo mostra os dois tipos de navegação.

Trilha de miniaturas e navegação por pontos

Alterando entre trilha de miniaturas e navegação por pontos

É fácil alternar entre Thumbnail Track e Dot Navigation. Ative o Visual Builder na parte superior da tela. Passe o mouse sobre o módulo Video Slider e clique no ícone de engrenagem cinza.

Trilha de miniaturas e navegação por pontos

Role para baixo até Elementos . Você verá uma configuração chamada Controles deslizantes que inclui uma caixa suspensa. Esta lista suspensa contém ambas as opções de navegação. Basta clicar na opção desejada. Use Thumbnail Track é a configuração padrão. Essa é a navegação vista na imagem abaixo.

Controles deslizantes:

  • Usar trilha de miniaturas
  • Usar navegação por pontos

Trilha de miniaturas e navegação por pontos

Agora selecionei Use Dot Navigation . As miniaturas foram removidas e agora aparecem pontos na imagem do vídeo.

Trilha de miniaturas e navegação por pontos

Uma olhada na trilha de miniaturas

Faixa de miniaturas exibe uma imagem em miniatura dos slides no player de vídeo. Passar o mouse sobre uma miniatura mostra o ícone de reprodução e revela as setas para a esquerda e para a direita. Estou passando o mouse sobre a segunda miniatura da esquerda neste exemplo.

Uma olhada na trilha de miniaturas trilha de miniaturas vs navegação de pontos

Clicar em uma miniatura mostra esse vídeo no player de vídeo. A miniatura do vídeo atual mostra uma sobreposição.

Uma olhada na trilha de miniaturas trilha de miniaturas vs navegação de pontos

Clicar em uma seta na trilha de miniaturas rola as miniaturas para o conjunto de miniaturas anterior ou seguinte. Isso permite que os usuários vejam facilmente as miniaturas e escolham seu vídeo no controle deslizante de vídeo.

Uma olhada na trilha de miniaturas trilha de miniaturas vs navegação de pontos

Você tem controle sobre a sobreposição e a cor da trilha de miniaturas. Escolha qualquer cor para a cor da sobreposição da miniatura . Selecione entre as opções Claro e Escuro para a Cor dos controles deslizantes .

  • Cor da sobreposição da miniatura: escolha a cor personalizada
  • Cor dos controles deslizantes: escolha Claro ou Escuro

Uma olhada na trilha de miniaturas trilha de miniaturas vs navegação de pontos

Quando usar a trilha de miniaturas

Como o Thumbnail Track exibe imagens, é melhor usá-lo em uma página ou em um local em uma página que não tenha muitas imagens. Use-o com espaço em branco. É ideal quando você quer chamar a atenção para os slides.

Onde a trilha de miniaturas é ideal

Aqui estão alguns exemplos. Ele funciona bem nos exemplos abaixo porque não há muitas imagens na área ao redor e tem espaço em branco suficiente para separá-lo dos outros elementos.

Neste exemplo, estou usando a página Quarto no Pacote de layout de cama e café da manhã gratuito . Substituí os módulos Video Module e Image por um único módulo Video Slider. Este é o uso perfeito do módulo Video Slider com Thumbnail Track. As miniaturas mostram quais são os slides, para que o visitante possa ver facilmente a sala em que está interessado.

Quando usar a trilha de miniaturas

Dot Navigation não é ideal para este layout. Não chama a atenção para os quartos, que é o objetivo desta página.

Quando usar trilha de miniaturas trilha de miniaturas vs navegação de pontos

No exemplo abaixo, coloquei o módulo Video Slider com a Thumbnail Track na página inicial do Consultant Layout Pack gratuito que está disponível no Divi. Há um espaço em branco entre o Video Slider e os módulos acima e abaixo dele. O módulo tem a largura total do layout, portanto, há bastante largura de tela para as miniaturas de navegação.

Quando usar a trilha de miniaturas

O Dot Navigation também funciona bem aqui, mas não chama a atenção para os slides do vídeo. Ele precisa de mais informações, como um título para descrevê-lo.

Quando usar trilha de miniaturas trilha de miniaturas vs navegação de pontos

Onde a trilha de miniaturas não é ideal

Thumbnail Track não é ideal quando não há muito espaço para as miniaturas e há muitas imagens ao redor.

Neste exemplo, movi o módulo Video Slider para uma pequena coluna ao lado de uma imagem com gráficos. O controle deslizante de vídeo parece bom aqui, mas as miniaturas são difíceis de ver. O controle deslizante de vídeo se perde no visual, portanto, esse não é um local em que você deseja colocá-lo se quiser chamar a atenção para os vídeos.

Quando usar a trilha de miniaturas

Dot Navigation se encaixa bem aqui. Tem um design minimalista que não tira os elementos ao seu redor. Essa é uma boa opção se você quiser usar os vídeos como elementos de suporte menores.

Quando usar a trilha de miniaturas

Uma olhada na navegação por pontos

A navegação por pontos adiciona um ponto à imagem em destaque para cada slide. O ponto do slide atual é mais brilhante que os outros.

Uma olhada na trilha de miniaturas de navegação por pontos vs navegação por pontos

Clicar em um ponto seleciona o vídeo desse ponto. No exemplo abaixo, selecionei o último ponto. O player de vídeo agora mostra a imagem desse slide de vídeo. Estou passando o mouse sobre a imagem do vídeo, que mostra uma sobreposição e facilita a visualização dos pontos com meu esquema de cores.

Uma olhada na trilha de miniaturas de navegação por pontos vs navegação por pontos

Você pode escolher entre cores claras e escuras para os pontos. Isso permite que você torne os pontos mais visíveis com base nas cores ou sobreposições das imagens em destaque do seu vídeo. Selecionei a opção escura para o exemplo abaixo.

  • Cor dos controles deslizantes: escolha Claro ou Escuro

Uma olhada na trilha de miniaturas de navegação por pontos vs navegação por pontos

Quando usar a navegação por pontos

O Dot Navigation é ideal quando os slides no controle deslizante de vídeo não são o foco principal ou quando você deseja manter a página livre de desordem visual. Mantém a página simples, mas ainda é fácil navegar entre os slides.

Onde a navegação por pontos é ideal

Aqui estão alguns exemplos de navegação por pontos. Funciona bem onde não há muito espaço, você deseja manter a página limpa ou o objetivo não é chamar a atenção para todos os vídeos no Video Slider.

Para este exemplo, adicionei um módulo Video Slider à seção Testemunhos. Esta seção inclui vários depoimentos escritos junto com o controle deslizante de vídeo. O objetivo desta página é promover os serviços. Os vídeos são apenas um tipo de depoimento para ajudar a apoiar a venda. Não há necessidade de chamar a atenção para cada slide. O usuário pode visualizar quantos quiser. Estou usando a página inicial do Pacote de layout de piso gratuito .

Quando usar a navegação por pontos

Thumbnail Track parece legal, mas pode ser uma distração neste layout e não é necessária com base no propósito da página. Não queremos que nossos depoimentos distraiam nosso apelo à ação.

Quando usar a navegação por pontos

Aqui está outro exemplo. Este usa a página do Blog do Pacote de Layout do Blogger gratuito. Substituí o módulo de postagem do blog por um módulo de controle deslizante de vídeo. Este exemplo inclui muitos slides de vídeo e imagens ao redor do controle deslizante. O layout parece limpo e fácil de navegar. O objetivo não é focar em todas as postagens, mas dar ao usuário uma maneira de vê-las, se quiser.

Quando usar a trilha de miniaturas de navegação por pontos vs navegação por pontos

Thumbnail Track ainda parece bom aqui, mas a página fica muito confusa com muitos slides.

Quando usar a navegação por pontos

Onde a navegação por pontos não é ideal

O Dot Navigation não é ideal quando queremos chamar a atenção para os slides do vídeo. Para este exemplo, estou usando a página de destino do pacote de layout de loja de roupas gratuito . Substituí as imagens do produto WooCommerce na seção Novidades por um controle deslizante de vídeo. Neste caso, queremos ver os novos produtos. A área ao redor do controle deslizante está vazia. Este design de página não é ideal para conversões.

Quando usar a navegação por pontos

A trilha de miniaturas funciona melhor aqui. O foco está nos produtos, que é onde queremos.

Quando usar a navegação por pontos

Considerações finais sobre trilha de miniaturas vs navegação por pontos

Essa é a nossa visão do Thumbnail Track vs Dot Navigation no módulo Video Slider do Divi. Ambos os tipos de navegação funcionam bem, mas é melhor usá-los em suas situações ideais. Há momentos em que um funciona melhor para nossos projetos. Em geral, você pode pensar em Thumbnail Track vs Dot Navigation com estas ideias básicas:

  • Use Thumbnail Track para áreas maiores ou para chamar a atenção para os slides de vídeo.
  • Use o Dot Navigation para áreas menores ou quando quiser manter o layout limpo.

 

Fonte:  elegantthemes.com

EnglishPortuguêsEspañol