Base de Conhecimento

2.21 Como configurar visualização responsiva para desktop, tablet e mobile

A configuração de visualização responsiva no Sitejet serve para adaptar o site a desktop, tablet e celular, melhorando a leitura, o alinhamento e a usabilidade em diferentes tamanhos de tela.

Na prática, isso permite revisar o comportamento do layout em vários dispositivos, ajustar espaçamentos, reorganizar elementos, alterar quantidade de colunas e até ocultar blocos em determinados viewports.

Como acessar o cPanel

Primeiro, acesse o cPanel por uma destas formas:

https://seudominio.com.br/cpanel
https://seudominio.com.br:2083
pela área do cliente MyWay, usando o atalho para o cPanel

Depois disso, entre em Sitejet Builder e abra o projeto em Edit Site ou Continue Editing.

Como configurar visualização responsiva para desktop, tablet e mobile

Para que serve esta opção

O Sitejet trabalha com visualização por viewports, permitindo conferir e ajustar o site para diferentes resoluções.

Traduções úteis:

Desktop = Computador
Tablet = Tablet
Mobile = Celular
Responsive = Responsivo

Passo 1 – Abrir os viewports no topo do editor

No topo do Sitejet, localize os ícones de dispositivo e clique entre as visões de desktop, tablet e mobile.

Ao passar o mouse sobre os viewports, o sistema também pode mostrar resoluções pré-definidas e opções de zoom.

Passo 2 – Revisar a versão desktop

Comece normalmente pela visão desktop e confirme:

largura dos blocos
posição do menu
equilíbrio entre textos e imagens
títulos com tamanho adequado

As configurações feitas no desktop tendem a servir de base para dispositivos menores, salvo quando você sobrescreve comportamentos específicos.

Passo 3 – Ajustar a versão tablet

Mude para o viewport tablet e observe se:

quatro colunas estão apertadas demais
imagens estão desproporcionais
blocos precisam de mais espaço lateral
o menu continua claro

Se necessário, ajuste colunas, espaçamentos e ordem dos elementos.

Passo 4 – Ajustar a versão mobile

Na visão mobile, revise com atenção especial:

tamanho dos títulos
altura dos banners
largura de botões
margens laterais
menu em telas pequenas

A experiência mobile é crítica, porque muitos visitantes acessam o site pelo celular.

Passo 5 – Ajustar configurações específicas por viewport

Você pode alterar propriedades específicas para cada viewport, como:

padding
margin
largura
altura
quantidade de colunas
ordem de elementos

Esses ajustes são feitos normalmente no painel de estilo do elemento ou da seção.

Passo 6 – Ocultar elementos quando necessário

Em alguns casos, faz sentido esconder um bloco no mobile ou no tablet.

Para isso, selecione o elemento no viewport desejado e ajuste a visibilidade.

Use ocultação com critério. O ideal é melhorar o layout, e não esconder conteúdo importante sem necessidade.

Passo 7 – Testar o preview

Depois de ajustar, use o Preview e também o Presentation mode para revisar o comportamento do site nos três formatos.

Cuidados importantes

não confie apenas na visão desktop
evite textos muito grandes no mobile
confira se botões ficam tocáveis no celular
mantenha boa legibilidade e contraste

Um site bonito no computador pode ficar ruim no celular se você não revisar espaçamentos, colunas, tamanhos de texto e visibilidade de elementos.

Resultado esperado

Ao final, você terá configurado e revisado o comportamento responsivo do site no Sitejet para desktop, tablet e mobile, deixando a navegação mais confortável em todos os dispositivos.

Resumo:

1. Acesse o cPanel
2. Abra o projeto no Sitejet
3. Alterne entre desktop, tablet e mobile
4. Ajuste colunas, espaçamentos e tamanhos
5. Oculte elementos quando necessário
6. Revise com preview e presentation mode

Para SEO e experiência do usuário, a versão mobile deve ser tratada com a mesma importância da versão desktop.

Atenciosamente,
MyWay Hosting
Servidores Otimizados por inteligência artificial
www.myway.com.br

0 Usuários acharam útil