Configurações de banners

Configurando seu banner

Personalize cada aspecto do seu banner com nosso painel de configurações completo. O painel de configurações fornece controle preciso sobre agendamento, comportamento de reprodução e dimensões.

Agendador

Configure quando seu banner aparece:

  • Visibilidade permanente - Sempre visível (padrão)

    Seu banner será constantemente exibido em sua loja sem restrições de tempo.

  • Intervalo de datas - Você pode definir datas e horas de início e fim específicas
    • Data de início: Selecione o dia, mês, ano e hora em que seu banner deve começar a aparecer. Se deixado em branco, o banner ficará visível imediatamente após a publicação.
    • Data de fim: Selecione o dia, mês, ano e hora em que seu banner deve parar de aparecer. Se deixado em branco, o banner permanecerá visível indefinidamente.

Dica: Agende banners com antecedência para vendas de fim de ano ou eventos especiais. Isso garante que suas promoções entrem no ar automaticamente no momento perfeito, mesmo fora do horário comercial.

Opções de reprodução

Ajuste como os slides do seu banner fazem transições e se comportam:

  • Reprodução automática - Ativar/desativar a progressão automática da mudança de slide
  • Pausar ao passar o mouse - Ativar/desativar a opção de parar a progressão automática dos slides quando um usuário passa o mouse sobre o banner. Útil para dar aos usuários mais tempo para ler o conteúdo.
  • Setas de navegação - Mostrar/ocultar as setas esquerda e direita para navegação manual dos slides
  • Pontos de navegação - Mostrar/ocultar os pontos indicadores na parte inferior do banner
  • Velocidade da animação - Controle a velocidade da animação de transição do slide (100ms - 2000ms, tipicamente 500ms recomendado)
  • Tipo de animação - Escolha entre slide (movimento horizontal) ou fade (transição cruzada)
  • Intervalo (intervalo do slide) - Defina por quanto tempo cada slide é exibido antes de avançar automaticamente para o próximo (1000ms - 30000ms). Intervalos mais longos funcionam bem para slides com muito conteúdo.

Nota: O tipo de animação 'slide' cria um movimento de deslizamento horizontal entre os slides, enquanto 'fade' cria um efeito de transição cruzada suave. Escolha com base no estilo visual do seu banner.

Configurações recomendadas

  • Tempo de intervalo: 5-7 segundos por slide é o ponto ideal para a maioria dos banners. Isso dá aos usuários tempo suficiente para absorver o conteúdo sem se sentirem apressados.
  • Pausar ao passar o mouse: Ative isso para permitir que os usuários controlem o ritmo. É especialmente útil para slides com muito texto ou quando os usuários podem querer clicar em links.
  • Reprodução automática: Ótimo para banners hero e vitrines de imagens. Considere desativar para anúncios críticos onde os usuários devem ver todos os slides.
  • Controles de navegação: Mostre tanto setas quanto pontos para máximo controle do usuário, ou oculte-os para uma aparência mais limpa em banners simples de um único slide.

Dimensões

Controle o tamanho e o comportamento responsivo do seu banner.

Por padrão, as dimensões do banner são calculadas com base em dois fatores:

  • Largura: 100% do contêiner (se estende para preencher o espaço horizontal disponível)
  • Altura: O valor definido no campo 'Altura máxima dos banners' (em pixels)

Configuração global: A 'Altura máxima dos banners' é uma configuração global encontrada em Configurações > Configurações do tema. Este valor se aplica a todos os banners por padrão e garante alturas consistentes em sua loja.

Modos de substituição de altura

Você pode substituir o comportamento de altura padrão para banners individuais:

  • Padrão - Usa a altura fixa definida em 'Altura máxima dos banners'
    • Melhor para manter alturas de banner consistentes em sua loja
    • Recomendado para a maioria dos casos de uso
  • Porcentagem - Defina a altura como um valor de porcentagem da altura da janela (vh)
    • Ideal para designs responsivos que se adaptam a diferentes tamanhos de tela
    • Exemplo: 50% significa que o banner ocupará metade da altura da janela do navegador
    • Tenha cuidado com a pixelização em telas maiores - forneça imagens de alta resolução
  • Altura da janela completa - O banner se estende para preencher 100% da altura da janela (100vh)
    • Perfeito para seções hero e experiências de landing page em tela cheia
    • Cria primeiras impressões impactantes e imersivas
    • Funciona melhor com imagens ou vídeos de alta qualidade e grandes
  • Personalizado - Defina uma altura específica em pixels apenas para este banner
    • Substitui a configuração global com um valor específico do banner
    • Útil quando um banner precisa de dimensões diferentes dos outros
    • Lembre-se de testar em dispositivos móveis para evitar banners excessivamente altos

Melhores práticas:

  • Para banners hero, considere Altura da janela completa ou valores de porcentagem altos (70-100%)
  • Para banners de anúncio, mantenha o modo Padrão e mantenha alturas modestas (300-500px)
  • Sempre teste em mobile, tablet e desktop para garantir que as dimensões escolhidas funcionem bem em todos os dispositivos
  • Se usar porcentagem ou altura da janela completa, certifique-se de que suas imagens sejam de alta resolução (pelo menos 1920px de largura) para evitar desfoque em telas grandes

Margens

Adicione espaçamento ao redor do seu banner configurando valores de margem para cada lado. As margens controlam o espaço vazio entre o banner e os elementos da página ao redor.

Modos vinculado e desvinculado

O controle de margens possui um botão de vínculo que permite alternar entre dois modos:

  • Vinculado (uniforme) - Quando o ícone de vínculo está ativo, os quatro lados compartilham o mesmo valor de margem. Alterar qualquer campo atualiza automaticamente todos os outros. O indicador exibe o valor uniforme (ex.: "20px").
  • Desvinculado (independente) - Quando o ícone de vínculo está inativo, cada lado pode ter seu próprio valor de margem. Isso permite definir espaçamentos diferentes para Topo, Direita, Base e Esquerda independentemente. O indicador exibe "Mixed" quando os valores diferem.

Campos de margem

Quatro campos de margem estão disponíveis. Cada campo suporta pixels (px) ou porcentagem (%) como unidade, e a unidade pode ser alterada independentemente para cada lado:

  • Topo: Espaço acima do banner
  • Direita: Espaço à direita do banner
  • Base: Espaço abaixo do banner
  • Esquerda: Espaço à esquerda do banner

Melhores práticas:

  • Use o modo vinculado para espaçamento rápido e uniforme ao redor do banner
  • Use o modo desvinculado quando precisar de margens laterais menores mas mais espaço vertical (ou vice-versa)
  • Uma margem pequena no topo e na base (ex.: 10-20px) ajuda a separar o banner do conteúdo adjacente
  • Defina as margens esquerda e direita como 0 se quiser que o banner se estenda de ponta a ponta dentro do contêiner
  • Considere usar pixels (px) para as margens superior e inferior para manter um espaçamento vertical consistente, enquanto a porcentagem (%) pode funcionar melhor para as margens esquerda e direita, pois se adapta proporcionalmente a diferentes larguras de ecrã
← Anterior: Tipos de slides Próximo: Posicionamento de banners →