O guia para fazer SITES 100% RESPONSIVOS | Live #45

O guia para fazer SITES 100% RESPONSIVOS (Live #45)

Tema geral

• Aula prática e atualizada sobre como criar sites 100% responsivos com precisão “milimétrica”.
• Foco em fluxo de trabalho com Elementor (conteúdo também válido para programação direta).
• Autor / apresentador: Marcelo Rocha (designer).
• Recursos citados: Grupo Telegram (com Google Drive), Discord, plugin interno “Selão Grids” (para membros).

---

Conceitos essenciais explicados

1. Unidades de medida

• Absolutas: px (pixels), cm, mm, in, pt etc. (px é a mais usada na web).
• Relativas: em, rem, %, vw / vh (destaque para em, rem, % e vh).
• Recomendação principal: usar em/rem para tamanhos de fonte.
  • em = relativo ao font-size do elemento pai.
  • rem = relativo ao font-size da raiz.
  • Motivo: acessibilidade — quando usuário aumenta o tamanho de fonte no navegador, textos em em/rem reagem; textos em px permanecem fixos.

2. Breakpoints (Elementor)

• Elementor padrão: 3 breakpoints. Recomenda ativar “Additional custom breakpoints” para ter 7:
  • Widescreen
  • Desktop
  • Laptop
  • Tablet landscape
  • Tablet portrait
  • Mobile landscape
  • Mobile portrait
• Cada breakpoint no Elementor é um intervalo de larguras (não um único valor). Exemplos de faixas usados na aula:
  • Mobile portrait: até 767px (ex.: 320–767)
  • Mobile landscape: 768–880
  • Tablet portrait: 881–1024
  • Tablet landscape: 1025–1200
  • Laptop: 1201–1366
  • Desktop: 1367–2399
  • Widescreen: 2400+
• No editor você pode arrastar as “bolinhas” para testar larguras dentro desses intervalos.

3. Sistema de grid / alinhamento

• Terminologia: grids (sistema), columns (colunas), gutter/gap (espaço entre colunas), offset/margin (espaço lateral / usable width), boxed vs full-width.
• Boxed = usar uma largura útil (usable width) centralizada; Full-width = conteúdo vai até as bordas.
• Cálculo do offset:
  • margin lateral = (total width − usable width) / 2
  • Ex.: total 1920 − usable 1280 = 640 → 320px cada lado.

---

Recomendações “seladas” (valores práticos sugeridos)

Observação: são recomendações práticas, não regras rígidas. Você pode adaptar (8, 16, 20 colunas etc.) conforme projeto.

• Desktop / Widescreen
  • Colunas: 12
  • Gutter (gap): 16px
  • Usable width (conteúdo): 1280px
  • Background / imagem: 1920px (desktop) — widescreen 2560px quando necessário
• Laptop
  • Colunas: 12
  • Gap: 16px
  • Usable width: 1100px
  • Background: 1366px
• Tablet (landscape)
  • Colunas: 6
  • Gap: 16px
  • Usable width: 924px
  • Background: 1200px
• Tablet (portrait)
  • Colunas: 6
  • Gap: 16px
  • Usable width: 780px
  • Background: 1024px
• Mobile (landscape)
  • Colunas: 6 (atualização: antes 4, agora recomenda 6)
  • Gap: 8px
  • Usable width: 728px
• Mobile (portrait)
  • Colunas: 4
  • Gap: 8px
  • Usable width: 360px (atualização: antes 320 → 360; 320 ainda existe mas <1% dos dispositivos)

---

Imagens de fundo / assets

• Regra prática: crie a largura da imagem de fundo igual à largura máxima do breakpoint (ex.: laptop 1366px → imagem 1366px).
• Para telas de alta densidade de pixels (retina etc.) dobre a largura (ex.: 767px → 1534px) para evitar blur.
• Otimize/compacte e use formatos modernos (WebP) + preload para não penalizar performance.

---

Ferramentas e workflow mostrados

Design de referência e guias

• Photoshop: usar “New Guide Layout” ou criar retângulos como guias; bloquear camadas; exportar imagens com 72 dpi (web).
• Figma: Layout Grid para colunas/gutter/margins.

Elementor

• Ativar breakpoints adicionais:
  • Elementor > Settings > Features > Additional Breakpoints
• Site settings > Layout — ajustar se preferir (ou usar snippet).
• Caixas (containers): usar boxed com usable width definida; remover padding vertical (top/bottom) quando usar imagem com altura fixa para não quebrar alinhamento.

Como inserir grids no editor

1. Plugin de terceiros (ex.: Happy Addons) — fácil, mas pode ter bugs e não respeitar todos os breakpoints; adiciona peso.
2. Código CSS (snippet) inserido no Custom CSS da página / theme — gera grid layer para todos os breakpoints (código compartilhado via Telegram/Drive).
3. Plugin próprio da comunidade (“Selão Grids”) — mostra grid só para usuários logados, com painel para ajustar colunas/gaps/usable widths; pode ser desinstalado após finalizar o site.

• Atalho prático: Shift+G para mostrar/ocultar grid na visualização do Elementor (ou Ctrl+Shift+G dependendo do método).

---

Snippets úteis / automações (mencionadas)

• CSS para desenhar grid layers responsivos em todos os breakpoints (código disponibilizado no Google Drive/Telegram do autor).
• Snippet CSS para forçar containers “boxed” a puxarem automaticamente a usable width correta por breakpoint — evita ajustar cada container manualmente quando o breakpoint é alterado.
• Autor recomenda manter esses snippets durante o desenvolvimento; alternativa: definir valores em Site Settings.

---

Dicas práticas e troubleshooting

• Sempre zerar padding vertical do container quando usar imagem de fundo com altura fixa; padding top/bottom altera a altura e quebra alinhamento.
• Background settings no Elementor: position center-center, no-repeat, size = cover. Se houver bug, use size custom + pixel width (igual à largura da imagem) para forçar comportamento.
• Verifique a altura do container = altura da imagem exportada; se diferente, usar cover ou ajustar manualmente.
• Teste o ajuste de fontes no navegador para confirmar acessibilidade (ems reagem; px não).
• Evite excesso de plugins/elementos que pesem o site; prefira códigos leves ou plugins sob medida.

---

Recursos citados / onde obter materiais

• Grupo Telegram + Google Drive (links no vídeo) — contém códigos, imagens e materiais da aula.
• Discord (anúncios e comunidade).
• Plugin Selão Grids — disponível para membros “selados” da comunidade do autor.
• Códigos CSS demonstrados (grid e widths) — disponibilizados pelo autor nos canais acima.

---

Principais falas / fonte

• Marcelo Rocha — apresentador e autor do método.
• Participantes mencionados na live: Paula, Marcão, Matus, Detinho, Paulo William, Jessica, João Pedro, Igor, Marina, Gustavo, Daniel, Adriano, entre outros (plateia / alunos).

---

Resumo curto e ação recomendada: - Use em/rem para fontes (acessibilidade). - Ative os breakpoints extras no Elementor. - Padronize grids (ex.: 12 colunas / 16px gap para desktop) com uma usable width central (ex.: 1280px desktop). - Crie imagens de fundo com largura igual ao max breakpoint (ou 2× para retina). - Aplique grids no editor via snippet CSS ou plugin (grid só visível para devs). - Pegue os materiais e códigos práticos no Telegram/Google Drive do autor.