Guia de implementação para os banners do projeto.

Na página Elementor, buscar pelo Widget padrão de Banners: Slides.

  • É recomendável que toda a configuração seja feita diretamente pelo Widget, fazendo da utilização de CSS somente se for necessário.
  • Verificar a formatação e a estrutura do banner no modo responsivo, testando Desktop, Notebook, Tablet e Mobile.

1) Onde ajustar

  • Conteúdo › Slides: cria/edita cada slide.

  • Estilo: tipografia, cores, espaçamentos, overlay.

  • Avançado: margens, responsivo (mostrar/ocultar), efeitos.

2) Slide (por item)

Background

  • Image: escolha a imagem de fundo (recomendado: .webp).

  • Color: cor de fundo (funciona como fallback e base do overlay).

Content

  • Title / Description: textos do slide (manter em Lorem Ipsum caso ainda não tenha conteúdo).

  • Button Text / Link: Botões e URL (abra em nova aba se externo).

Style (do item)

  • Alignment: posição do conteúdo (esquerda/centro/direita + vertical).

  • Overlay: aplique uma cor/gradiente para garantir contraste de leitura (opacidade 40–60% costuma funcionar), se aplicável.

  • Spacing: padding interno do conteúdo (espelho “área segura”).

3) Configurações gerais (lista de slides)

  • Height: altura do slider (px, vh).
    • Dica: Desktop 60–80vh; Mobile 40–60vh (ajuste no modo responsivo).

  • Title/Description HTML Tag: use tags semânticas (ex.: h2 pro título).

  • Slider Options:

    • Navigation (Arrows) e Pagination (Dots).

    • Autoplay + Autoplay Speed (ex.: 8000 ms).

    • Pause on Hover, Infinite Loop.

    • Transition (slide/fade) e Animation Speed (ex.: 700–800 ms).

    • Ken Burns (zoom suave no background – usar com moderação), se aplicável.

    • Direction (LTR/RTL), Keyboard/Mouse Drag.

4) Responsivo (o que ajustar por dispositivo)

  • No topo do painel, alterne entre Desktop / Tablet / Mobile:

    • Height específico por device (px ou vh).

    • Tipografia (título/descrição/botão) com tamanhos por device.

    • Spacing/Padding do conteúdo para manter “área segura” no mobile.

    • Alinhamento (muitas vezes centro no mobile).

    • Arrows/Dots: tamanho e distância do conteúdo.

  • Imagem de fundo:

    • Ajuste Background Position (ex.: center right para manter o foco).

    • Se precisar de imagens diferentes por device, duplique o widget e use Avançado › Responsivo para mostrar/ocultar por dispositivo.

  • Performance:

    • Comprima imagens (WebP), limite a 2–4 slides por padrão.

    • Evite textos muito longos; quebre as linhas estrategicamente ajustando a largura (%) na aba Avançado.

    • Evite usar margin para espaçar o conteúdo; prefira padding, facilitando na implementação do modo responsivo.

5) Acessibilidade e boas práticas

  • Use tags de título adequadas (ex.: h2 no slider; evite múltiplos h1).

  • No botão, use rótulos claros (ex.: “Falar no WhatsApp”).

6) Checklist rápido

  1. Altura e tipografia revisadas em Desktop/Tablet/Mobile.

  2. Contraste OK (overlay 40–60%), (se usar).

  3. Arrows/Dots visíveis e clicáveis no mobile.

  4. Autoplay com pausa ao focar/hover (se usar).

  5. Peso total das imagens sob controle.

  6. Botões funcionando e abrindo corretamente.