*Esta página utiliza links afiliados. Por gentileza, leia a política de divulgação.

Utilize media queries no Elementor
Andre Esteves Perrone

Otimize sites em Elementor para tablet e celular com media queries [Na prática]

Já aconteceu com você de desenvolver o site no Elementor e na hora de otimizar para tablet ou celular o design no editor do Elementor fica diferente do dispositivo real?

É frustrante… ficamos muito tempo editando visualmente até perceber que o layout mobile está quebrado – ou nunca fica igual ao criado…

Por isso, vou mostrar para você como uso o Google Chrome para otimizar sites para dispositivos mobile (ou tamanhos customizados de tela) e como eu utilizo os media queries no CSS.

Utilize o DevTools do Google Chrome

Abra em seu navegador Google Chrome uma aba com o editor visual do Elementor. Em outra aba acesse a página que está sendo criada.

Para abrir o DevTools clique o botão direito do mouse > Inspect ou pressione Ctrl + Shift + I (Windows) ou Cmd + Opt + I (Mac).

Depois, clique no ícone com um tablet e um celular para visualizar a página em outros formatos de tela.

Clique no ícone de tablet e celular
Clique no ícone de tablet e celular

Depois que descobri essa forma de visualizar as páginas no mobile, o processo como um todo ficou muito mais prático, rápido e prazeroso.

(Eu não acho a parte de otimização mobile a melhor etapa do desenvolvimento de um site… mas é uma das mais importantes.)

Veja o vídeo abaixo e confira na prática como eu visualizo as alterações do Elementor em tablets e celulares – e como utilizo os media queries no CSS para customizar ainda mais os layouts.

Como utilizar os media queries no Elementor Pro

A opção de adicionar CSS personalizado em um widget é liberado apenas no Elementor Pro, mas tendo a ideia de como funciona você pode criar seu próprio código CSS e incluir em Aparência > Personalizar do seu tema.

Os media queries surgiram no CSS3 e permitem adicionar estilos diferentes dependendo da resolução de tela ou orientação do dispositivo. Veja o guia completo sobre media query aqui.

Para começar a utilizar os media queries no CSS é muito simples…

Digite @media e em seguida estipule a partir de qual tamanho de tela você quer ativar o CSS escrito.

Como criar um media query para celular?

Por exemplo, como posso alterar a cor do título (h1) para azul apenas no celular?

@media (max-width: 767px) {
h1 {
color: blue;
}
}

O tamanho de 767px é frequentemente utilizado por celulares, mas você pode alterar esse número para a resolução que achar ideal para seu projeto.

Como criar um media query para tablet?

Como o tablet tem uma resolução entre o desktop e o celular, utilize and para adicionar mais uma condição ao media query.

Por exemplo, como posso alterar título (h1) para itálico apenas no tablet?

@media only screen and (max-width: 1024px) and (min-width: 767px) {
h1 {
font-style: italic;
}
}

Simple assim.

O Elementor por enquanto só disponibiliza edição para desktop, tablet e celular.

Porém, o ideal seria otimizar para (pelo menos) notebooks também…

Isso está sendo cobrado pela comunidade global que utiliza Elementor no GitHub. Você pode acompanhar a solicitação (ou ajudar falando que também está na expectativa pela atualização) clicando aqui.

Mas, não tenho nenhuma real reclamação dos desenvolvedores do Elementor… eles estão sempre adicionando novas funcionalidades e surpreendendo a cada atualização.

Conclusão

Você já utilizou o DevTools do Google Chrome para otimizar sites Elementor para tablets e celulares? Você costuma adicionar media queries customizados em seus projetos?

Caso você tenha curtido esse tutorial e o vídeo, inscreva-se no canal do YouTube – eu atualizo o canal com novas ideias e técnicas que venho aprendendo nesta jornada para ser um web designer (e quem sabe) um desenvolvedor de sucesso.

Agradeço sua companhia até aqui!

Abraço!

Receba tutoriais e dicas sobre web design, WordPress e Elementor.

Compartilhe:

Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter
Compartilhar no whatsapp
WhatsApp
Compartilhar no email
Email

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Web designer: Descubra o melhor plugin para criar sites em WordPress. Saiba mais »

Web designer: Ultra velocidade com a solução de cache mais completa para WordPress. Saiba mais »

Web designer: Conheça o melhor banco de fotos, fontes, ilustrações, templates e objetos 3D para seus projetos em WordPress. Saiba mais »

Compartilhar no whatsapp
WhatsApp
Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter

Política de divulgação: por favor, note que os links acima são afiliados – sem nenhum custo adicional para você – eu ganho uma comissão caso decida comprar após clicar no link. Por gentileza, entenda que eu tenho experiência com todas as empresas e produtos citados e eu recomendo por serem bons e úteis, e não por causa da pequena comissão que faço caso decida comprar por um dos links. Por favor, não invista nesses produtos a não ser que possa precisar deles ou que eles possam ajudar você a atingir seus objetivos.