Defina os breakpoints de largura de tela para controlar como seus blocos se adaptam a diferentes dispositivos. O ZenBlocks utiliza 4 níveis de responsividade: PC, MD (médio), TB (tablet) e SP (smartphone).
Valores padrão
| Nível | Sigla | Breakpoint padrão | Comportamento |
|---|---|---|---|
| Desktop | PC | Sempre ativo | Estilo base, aplicado em todas as larguras |
| Médio | MD | 1140px | Ativado quando a largura da tela é igual ou inferior a 1140px |
| Tablet | TB | 840px | Ativado quando a largura da tela é igual ou inferior a 840px |
| Smartphone | SP | 540px | Ativado quando a largura da tela é igual ou inferior a 540px |
O nível PC não possui um valor de breakpoint configurável, pois representa o estilo base que está sempre ativo. Os estilos dos demais níveis são aplicados de forma progressiva conforme a largura da tela diminui.
Como acessar as configurações de breakpoints
- Abra o editor de blocos do WordPress.
- Clique no botão ZenBlocks no cabeçalho do editor.
- Selecione a aba Responsive no painel que será exibido.
Como configurar
- Acesse a aba Responsive conforme descrito acima.
- Revise os valores atuais de breakpoint para cada nível (MD, TB, SP).
- Altere os valores conforme a necessidade do seu projeto, inserindo a largura em pixels.
- Certifique-se de que os valores estão em ordem decrescente (MD > TB > SP).
- Clique no botão Save para salvar as alterações.
Pontos de verificação
Após salvar as configurações, confirme os seguintes itens:
- Os valores de breakpoint foram salvos corretamente e aparecem na aba Responsive.
- As media queries geradas no front-end do site correspondem aos valores configurados.
- A pré-visualização responsiva no editor reflete os novos breakpoints.
Observações importantes
- Alterar os breakpoints afeta todos os blocos do site que utilizam estilos responsivos do ZenBlocks. Revise o layout do site após qualquer alteração.
- Os valores devem ser sempre em pixels e em ordem decrescente (MD > TB > SP). Valores fora de ordem podem causar conflitos nos estilos.
- Os breakpoints padrão foram definidos para cobrir a maioria dos cenários. Altere-os apenas se o design do seu projeto exigir valores específicos.
- Ao redefinir os valores para os padrões, utilize: MD = 1140px, TB = 840px, SP = 540px.
Quando revisar os breakpoints
Considere ajustar os breakpoints nas seguintes situações:
- O layout do seu tema utiliza larguras de contêiner diferentes do padrão.
- Você precisa dar suporte a dispositivos com resoluções específicas.
- O design do projeto foi criado com breakpoints customizados.
- Elementos do layout quebram ou se sobrepõem em determinadas larguras de tela.