Usando slide de vídeo do 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.
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.
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
Agora selecionei Use Dot Navigation . As miniaturas foram removidas e agora aparecem pontos na imagem do vídeo.
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.
Clicar em uma miniatura mostra esse vídeo no player de vídeo. A miniatura do vídeo atual mostra uma sobreposição.
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.
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
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.
Dot Navigation não é ideal para este layout. Não chama a atenção para os quartos, que é o objetivo desta página.
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.
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.
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.
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.
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.
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.
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
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 .
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.
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.
Thumbnail Track ainda parece bom aqui, mas a página fica muito confusa com muitos slides.
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.
A trilha de miniaturas funciona melhor aqui. O foco está nos produtos, que é onde queremos.
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