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. Para sites gratuitos e sites com o plano 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.