Summary of "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
- Plugin de terceiros (ex.: Happy Addons) — fácil, mas pode ter bugs e não respeitar todos os breakpoints; adiciona peso.
- 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).
- 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.
Category
Technology
Share this summary
Is the summary off?
If you think the summary is inaccurate, you can reprocess it with the latest model.
Preparing reprocess...