Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / CSS / Mostrar Contenido distinto en el Móvil y en el Escritorio en una Web SIN PLUGINS

Mostrar Contenido distinto en el Móvil y en el Escritorio en una Web SIN PLUGINS

noviembre 10, 2021 Por Oscar martin Deja un comentario

Mostrar Contenido distinto en el Móvil y en el Escritorio en una Web SIN PLUGINS

Tabla de Contenidos

  • Contenido distinto dependiendo del dispositivo
  • Creando las clases de css
    • Crear Clases de CSS manualmente
    • Crear Clases de CSS con opciones de WordPress
  • Creando el CSS en personalizar css adicional
  • Preguntas Frecuentes sobre añadir contenido dependiendo del tamaño de la pantalla
    • ¿Funciona en páginas que no estén hechas en WordPress?
    • ¿Protege el contenido de forma segura?
    • ¿Es mejor usar un plugin o hacerlo de forma manual?
    • ¿Las clases son reutilizables?

Tutorial en vídeo para Mostrar Contenido distinto en el Móvil

Suscríbete a mi canal:  

Contenido distinto dependiendo del dispositivo

Lo que vamos a hacer es cómo Mostrar Contenido distinto en el Móvil y en el Escritorio en una Web SIN PLUGINS.

Esto nos puede ser muy útil, por ejemplo, si queremos avisar a los usuarios que cambien de dispositivo para tener una buena experiencia o cualquier otro tipo de motivo.

Tenemos que tener en cuenta que en muchas ocasiones tener un buen diseño responsive no solo es cambiar de tamaño los elementos, sino que aparezcan los elementos más relevantes según el dispositivo.

Mostrar contenido distinto en el móvil forma parte de hacer un buen diseño responsive.

Lo podríamos haber hecho con algún plugin, de hecho lo haré en otro tutorial, pero quería mostrar como hacerlo sin instalar nada.

Recordad el dicho:

“El mejor plugin es aquel que no instalas”

Óscar Martín

Creando las clases de css

Necesitamos crear varias clases CSS para que se active el diseño que queramos.

Lo voy a hacer de dos formas distintas:

Crear Clases de CSS manualmente

Para crear una clase de css manualmente en WordPress tenemos que hacer click en los 3 puntitos del bloque de gutenberg y seleccionar la opción Editar como HTML

Editar bloque como html

Al hacerlo nos aparecerá el bloque en html y podemos añadir la clase de la siguiente forma:

<p class="contenido-escritorio">Contenido para escritorio</p>

Crear Clases de CSS con opciones de WordPress

Para hacerlo con las opción que trae WordPress seleccionamos el bloque y en las opciones avanzadas de la derecha añadimos el nombre de la clase:

Crear clases en WordPress con Gutenberg

Creando el CSS en personalizar css adicional

Para mostrar un contenido distinto según el tamaño del dispositivo, en css tenemos un recurso muy útil y este es la media query

Las medias querys nos permiten poner reglas distintas dependiendo del tamaño de pantalla.

Las media querys detectan el tamaño de la pantalla y según el tamaño se activan unas reglas css u otras.

Aquí te dejo el css utilizado

.contenido-escritorio{
	display:block;
}

.contenido-movil{
	display:none;
}

@media screen and (max-width: 768px){
	
	.contenido-escritorio{
	display:none;
	}

	.contenido-movil{
	display:block;
	}
	
}

Si quieres saber más sobre la regla display aquí lo puedes hacer

Preguntas Frecuentes sobre añadir contenido dependiendo del tamaño de la pantalla

¿Funciona en páginas que no estén hechas en WordPress?

Por supuesto, como usamos CSS puedes usar este método en cualquier cms o en páginas realizadas manualmente.

¿Protege el contenido de forma segura?

No, como estamos cambiando la visualización por CSS no es una forma segura de proteger contenido sensible. El contenido no se ve pero si se mira en el código si que se ve. Por lo que no lo uses para crear Membership Sites

¿Es mejor usar un plugin o hacerlo de forma manual?

Siempre que podamos es mejor hacerlo de forma manual para no sobrecargar la página con plugins innecesarios.

¿Las clases son reutilizables?

Sí, una vez que la has creado puedes usarlas en todo el contenido de la web sin tener que crear nuevas reglas en el CSS para Mostrar Contenido distinto en el Móvil.

Si te gustan este tipos de trucos de CSS, aquí tienes otro para cambiar el texto por CSS

Publicado en: CSS, Trucos

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR