O Card de banner rotativo mostra várias imagens e vídeos no mesmo espaço da página. Ele pode aparecer como um banner, com um item por vez ocupando uma área ampla, ou como um carrossel, com vários itens lado a lado para o visitante navegar.
É uma boa escolha para destacar projetos, coleções, serviços ou chamadas importantes logo na abertura da página. Veja como montar o seu.
⚠️ Atenção!
Este passo a passo vale para a Nova 46graus,
o Painel que abre em app.46graus.com.
Na Versão Clássica as telas são outras.
Adicione um banner rotativo à página
Acesse o Painel 46graus e abra o Editor do site.
Clique em Adicionar Card, na barra de ferramentas do Editor.
Escolha o Card de banner rotativo.
Clique sobre o banner novo: a barra de ferramentas passa a mostrar as opções dele.
Na barra de ferramentas do banner ficam Conteúdo, Ajustes e Área do conteúdo, mais o botão Card no pé, que abre os ajustes gerais de qualquer Card.
Escolha as imagens e os vídeos
Clique em Conteúdo para montar a sequência.
A tela lista os itens do banner, um embaixo do outro, cada um com a miniatura e o nome. Nela você pode:
Clicar no botão Adicionar para incluir um item novo.
Clicar na seta de um item para abrir e trocar a mídia dele.
Usar o menu de três pontos de cada item para as demais ações.
Coloque um vídeo num item
Cada item aceita uma imagem ou um vídeo, e você mistura os dois na mesma sequência. Para o vídeo, a janela de mídia oferece três caminhos:
Enviar um arquivo do seu computador, em MP4, WebM ou MOV, com até 30 MB por vídeo.
Colar o link de um vídeo do YouTube ou do Vimeo, que não ocupa o armazenamento do seu site.
Importar um vídeo que já está no site, sem enviar de novo.
💡 Dica!
A capa do vídeo conta muito neste Card,
porque é ela que o visitante vê antes de o vídeo começar.
Vídeo por link já vem com a capa pronta do YouTube ou do Vimeo.
Vídeo enviado como arquivo não gera capa sozinho, e aparece como um retângulo escuro com o nome do arquivo até você enviar uma imagem. Para resolver, abra Editar vídeo naquele item e use Adicionar capa.
Ajuste o visual dos slides
Em Ajustes, o botão Alterar visual dos slides propõe uma combinação diferente a cada clique, e a prévia muda na hora. A seta de voltar, ao lado, desfaz o último clique.
Para escolher item por item em vez de deixar no automático, clique no ícone de lápis, ao lado da seta. Ele abre a tela Visual dos slides, com duas portas: Slide e Troca de slides.
Slide: o estilo de cada item
Em Slide você escolhe o Estilo, uma lista numerada em que cada opção descreve o que ela faz. Os estilos se diferenciam por duas coisas: como o texto aparece sobre a imagem e o que acontece quando o visitante passa o mouse.
Texto fixo deixa o título sempre visível sobre a imagem.
Revela mostra o texto quando o visitante passa o mouse.
Imagem pura deixa o item só com a imagem, sem texto.
Zoom, desfoque e hover quieto definem o efeito ao passar o mouse.
❗ Aviso:
Os efeitos de hover dependem de passar o mouse por cima,
e o celular não tem mouse.
No telefone o visitante vê o item parado, e isso é o esperado.
💡 Dica!
Se o seu site recebe mais visitas pelo celular,
prefira um estilo de texto fixo.
Assim a informação aparece sem depender do hover.
Troca de slides: o ritmo do banner
Em Troca de slides você define como o banner passa de um item para o outro:
Transição escolhe o estilo da troca, entre as opções numeradas.
Velocidade da transição deixa o movimento mais rápido ou mais lento.
Reprodução automática faz o banner trocar de item sozinho. Desligada, o visitante navega pelos controles.
Velocidade da reprodução define quanto tempo cada item fica na tela antes da troca.
Navegação entre slides escolhe o visual dos controles, entre estilos de pontos e de linhas.
Escolha o que acontece no clique
Ainda em Ajustes, a opção Ao clicar define a reação do banner quando o visitante clica num item:
Nada deixa o clique sem efeito. Videos tocam sozinhos
Expande abre o item em tamanho maior sobre a página. Vídeos mostram prévia ao passar o mouse.
Link leva o visitante para outro endereço. Vídeos tocam sozinhos.
Defina a proporção e confira no celular
O seletor de Dispositivo, logo abaixo, alterna entre computador e celular. Ele não é só uma prévia: alguns ajustes são guardados separados para cada tela.
Em Proporção você define o formato e a altura do banner na página. A opção abre uma tela à parte com os formatos disponíveis, de recortes verticais como 4:5 Retrato até Altura da Tela, que faz o banner ocupar a tela inteira.
💡 Dica!
Para um banner de abertura, use Altura da Tela.
Para um carrossel de fotos verticais, um formato como 4:5 Retrato
valoriza mais as imagens.
Ajustes gerais do Card
O botão Card, no pé da barra de ferramentas, abre os ajustes que todo Card tem: o layout, as cores e o fundo, o que aparece e as ações de mover, duplicar e excluir. Eles funcionam igual em qualquer Card do Editor, e o artigo Como personalizar um Card explica cada um deles.
Resolvendo dúvidas comuns
Posso colocar vídeo no banner, e não só foto?
Sim. Cada item aceita uma imagem ou um vídeo, e você mistura os dois na mesma sequência. O vídeo entra por arquivo enviado, por link do YouTube ou do Vimeo, ou pela aba Importar.Meu vídeo no banner aparece como um retângulo escuro com o nome do arquivo. O que houve?
Ele está sem capa, o que acontece com vídeo enviado como arquivo. Abra Editar vídeo naquele item e use Adicionar capa para enviar a imagem que aparece antes de o vídeo começar.Como desligo a troca automática das imagens?
Em Ajustes, clique no lápis ao lado de Alterar visual dos slides, abra Troca de slides e desligue a Reprodução automática. O visitante passa a navegar pelos controles.Escolhi um estilo com efeito no hover e no celular não acontece nada. É problema?
O hover depende de passar o mouse por cima, e a tela do celular não tem esse gesto. No telefone o item aparece parado. Se a maior parte das suas visitas vem do celular, um estilo de texto fixo mostra a informação sem depender do efeito.Como troco as bolinhas que aparecem embaixo do banner?
Elas ficam em Troca de slides, na opção Navegação entre slides, que oferece estilos de pontos e de linhas.Como faço o banner ocupar a tela inteira?
Em Ajustes, abra Proporção e escolha Altura da Tela.Posso mostrar só as imagens, sem título nem texto?
Sim. Em Slide, escolha um estilo de imagem pura, que deixa o item sem texto sobre a foto.
Precisa de ajuda?
Um banner bem montado é a primeira coisa que o visitante vê, e é o que faz ele querer continuar descendo a página. Se ficar com alguma dúvida, chame a gente no chat de atendimento. Estamos por aqui para ajudar você a deixar tudo redondo. 😊