Editar a versão para dispositivos móveis

Os sites do WordPress usam um design responsivo: não há versões separadas para dispositivos móveis para editar. Neste guia, você aprenderá a personalizar como seu conteúdo aparece em dispositivos móveis usando as configurações de bloco e CSS.

O bloco de navegação inclui configurações do botão de menu para dispositivos móveis (conhecido como ícone de “hambúrguer”). Para personalizar seu menu em dispositivos móveis:

1. Vá para a seção Aparência → Editor no painel do seu site.
2. Selecione o modelo ou a parte do modelo contendo o menu de navegação.
3. Abra a visualização em lista e selecione o bloco de navegação.
4. Na barra lateral de configurações do bloco, clique no ícone de configurações (uma engrenagem).

5. Na seção Exibir:
   • Ative Mostrar botão do ícone para usar um ícone de hambúrguer ou desative para mostrar o texto “Menu”.
   • Escolha o estilo do ícone (duas ou três linhas) e selecione quando ele será exibido usando a configuração Menu de sobreposição.

Saiba mais sobre como estilizar os menus do seu site.

Alguns blocos de layout permitem que você controle se o conteúdo é empilhado verticalmente em telas de dispositivos móveis. Por padrão, o WordPress empilha automaticamente o conteúdo lado a lado em telas menores para mantê-lo legível.

Para ajustar o comportamento de empilhamento, siga estas etapas:

1. Vá para a seção Aparência → Editor no painel do seu site.
2. Edite a página ou modelo que contém o bloco que você deseja ajustar.
3. Abra a visualização em lista e selecione o bloco.
4. Nas configurações de bloco, ative ou desative Empilhar em dispositivos móveis.

Blocos com a configuração “Empilhar em dispositivos móveis”:

• Colunas
• Mídia e texto
• Posts mais recentes do Instagram

Os botões e menus ficam mais legíveis em dispositivos móveis quando se ajustam a várias linhas em vez de enfiar todo o conteúdo em uma única linha. Por padrão, a configuração para quebrar em várias linhas fica desativada.

Para ativar a quebra de linha, siga estas etapas:

1. Vá para a seção Aparência → Editor no painel do seu site.
2. Edite a página ou modelo que contém o bloco que você deseja ajustar.
3. Abra a visualização em lista e selecione o bloco.
4. Nas configurações do bloco, ative a opção Permitir quebra de linhas.

Blocos com a configuração “Permitir quebra de linhas”:

• Botões
• Botões de compartilhamento
• Navegação
• Ícones de redes sociais
• Comentários
• Linha e pilha

O texto dimensionado em pixels (px) permanece bloqueado em um tamanho. O texto dimensionado em rem ou em se ajusta com base nas configurações do visitante e no tamanho da tela, tornando seu site mais acessível e fácil de ler em diferentes dispositivos.

Para alterar o texto de pixels para unidades relativas, siga estas etapas:

1. Clique no bloco com o texto que você deseja redimensionar.
2. Nas configurações de bloco, encontre a seção Tipografia.
3. Em Tamanho da fonte, clique no ícone de tamanho personalizado (duas linhas horizontais com pontos).
4. Clique na unidade px para alterá-la para em ou rem.
5. Insira um valor numérico e ajuste conforme necessário.

Escolha entre em e rem:

• em — O tamanho do texto varia conforme seu contêiner (adequado para legendas, rótulos ou texto em blocos específicos)
• rem — O texto permanece consistente em todo o site (bom para corpo de texto, títulos e botões)

Você também pode personalizar o tamanho da fonte em todo o site em vez de ajustar blocos individuais.

Esta seção do guia destina-se a sites com os planos WordPress.com Premium, Negócios e Commerce, além do antigo plano Pro. Para sites com os planos Gratuito ou Pessoal, faça upgrade do seu plano para acessar essa funcionalidade.

Você pode ocultar blocos específicos em dispositivos móveis ou desktop usando classes CSS. Para isso, siga estas etapas:

1. Edite a página, o post ou o modelo que contém o bloco que você deseja ocultar.
2. Selecione o bloco clicando nele ou selecionando-o na visualização em lista.
3. Nas configurações do bloco, clique em Avançado.
4. Na caixa Classes CSS adicionais, digite hide-desktop ou hide-mobile:

5. Acesse as configurações de CSS personalizado do seu site:
   • Temas de bloco: Aparência → Editor → Estilos → ⋮ → CSS adicional
   • Temas clássicos: Aparência → Personalizar → CSS adicional
6. Cole o seguinte código e clique em Salvar:

/* ocultar elementos em dispositivos móveis*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* ocultar elementos em desktops*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Adicione o código CSS ao seu site uma vez. Depois disso, você pode adicionar a classe hide-mobile ou hide-desktop a qualquer bloco, e o CSS a ocultará automaticamente no dispositivo especificado.