07
For Elementor
Referência rápida para construir ou corrigir o mesmo sistema no Elementor sem reinterpretar as medidas.
Configurações globais
O Elementor é uma tradução do mesmo sistema, não um segundo Design System.
| Propriedade | Desktop | Tablet | Mobile |
|---|---|---|---|
| Container principal | 1200 px | 100% + 24 px laterais | 100% + 16 px laterais |
| Seção padrão | 96 px | 64 px | 48 px |
| Seção compacta | 64 px | 48 px | 32 px |
| Gap colunas | 48 px | 32 px | 24 px |
| Gap cards | 24 px | 24 px | 16 px |
| Padding card | 32 px | 24 px | 24 px |
Tipografia global
| Elemento | Desktop | Tablet | Mobile |
|---|---|---|---|
| H1 | 56 | 48 | 38 |
| H2 | 42 | 36 | 30 |
| H3 | 28 | 26 | 22 |
| H4 | 22 | 20 | 18 |
| Body | 17 | 17 | 16 |
H1–H4 usam a fonte de títulos do médico. Body, menu, botões, FAQ e formulários usam Inter.
Classes recomendadas
Mesmo no Elementor, você pode usar classes NINA para manter consistência.
nina-section
nina-container
nina-hero
nina-card
nina-card--step
nina-button nina-button--primary
nina-accordion
nina-cta
nina-footer
Como usar
- Configure cores e fontes globais do cliente.
- Use containers Flexbox/Grid.
- Aplique os valores desta página.
- Reutilize templates salvos dos componentes.
- Não crie medidas novas quando um token NINA já resolver.