Tutorial em vídeo para mostrar conteúdo diferente no celular
Inscreva-se no meu canal:
Conteúdo diferente dependendo do dispositivo
O que vamos fazer é como Mostrar Conteúdo Diferente em Mobile e Desktop em uma Web SEM PLUGINS.
Isso pode ser muito útil, por exemplo, se quisermos notificar os usuários para trocar de dispositivo para ter uma boa experiência ou por qualquer outro motivo.
Devemos ter em mente que, em muitas ocasiões, ter um bom design responsivo não significa apenas alterar o tamanho dos elementos, mas também que os elementos apareçam. elementos mais relevantes de acordo com o dispositivo.
Mostrar conteúdo diferente no celular faz parte de um bom design responsivo.
Poderíamos ter feito com um plugin, aliás farei em outro tutorial, mas queria mostrar como fazer sem instalar nada.
Lembre-se do ditado:
«O melhor plugin é aquele que você não instala»
Oscar Martin
Criando as classes css
Precisamos criar várias classes CSS para que o design que queremos seja ativado.
Vou fazer de duas maneiras diferentes:
Criar classes CSS manualmente
Para criar uma classe css manualmente no WordPress temos que clicar nos 3 pontinhos do bloco gutenberg e selecionar a opção Editar como HTML
Ao fazer isso, o bloco aparecerá em html e podemos adicionar a classe da seguinte forma:
<p class="contenido-escritorio">Contenido para escritorio</p>
Crie classes CSS com opções do WordPress
Para fazer isso com as opções que o WordPress traz, selecionamos o bloco e nas opções avançadas à direita adicionamos o nome da classe:
Criando o CSS em customizar CSS adicional
Para exibir conteúdos diferentes dependendo do tamanho do dispositivo, temos um recurso muito útil em css e este é o consulta de mídia
As consultas de mídia nos permitem definir regras diferentes dependendo do tamanho da tela.
As media queries detectam o tamanho da tela e dependendo do tamanho, algumas regras CSS ou outras são ativadas.
Aqui deixo o css usado
.contenido-escritorio{
display:block;
}
.contenido-movil{
display:none;
}
@media screen and (max-width: 768px){
.contenido-escritorio{
display:none;
}
.contenido-movil{
display:block;
}
}
Se você quiser saber mais sobre a regra de exibição aqui você pode fazer isso
Perguntas frequentes sobre como adicionar conteúdo dependendo do tamanho da tela
Funciona em páginas que não são feitas no WordPress?
Claro, como usamos CSS, você pode usar esse método em qualquer cms ou páginas feitas manualmente.
Você protege o conteúdo com segurança?
Não, como estamos alterando a exibição para CSS, não é uma maneira segura de proteger conteúdo confidencial. O conteúdo não é visível, mas se você olhar para o código, é. Portanto, não o use para criar sites de associação
É melhor usar um plugin ou fazê-lo manualmente?
Sempre que pudermos, é melhor fazê-lo manualmente para não sobrecarregar a página com plugins desnecessários.
As aulas são reutilizáveis?
Sim, depois de criá-lo, você pode usá-los em todo o conteúdo da web sem precisar criar novas regras no CSS para mostrar conteúdo diferente no celular.
Se você gosta desses tipos de truques de CSS, aqui está outro para você. alterar o texto por css