Editar la versión móvil

Los sitios de WordPress utilizan un diseño adaptable: no hay una versión móvil separada que editar. En esta guía, aprenderás a personalizar la apariencia de tu contenido en los dispositivos móviles mediante los ajustes de bloques y el CSS.

El bloque Navegación incluye los ajustes del botón del menú móvil (conocido como icono de «hamburguesa»). Para personalizar tu menú en dispositivos móviles:

1. Desplázate a Apariencia → Editor en el escritorio de tu sitio.
2. Selecciona la plantilla o parte de la plantilla que quieres que aparezca en el menú de navegación.
3. Abre la vista de lista y selecciona el bloque Navegación.
4. En la barra lateral de ajustes del bloque, haz clic en el icono de ajustes (rueda dentada).

5. En la sección Mostrar:
   • Cambia a «Mostrar botón de icono» para usar un icono de hamburguesa o mostrar el texto «Menú».
   • Elige el estilo del icono (dos o tres líneas) y selecciónalo cuando aparezca el icono de la hamburguesa usando los ajustes del menú superpuesto.

Obtén más información sobre cómo dar estilo a los menús de tu sitio.

Algunos bloques de diseño te permiten controlar si el contenido se apila verticalmente en las pantallas móviles. Por defecto, WordPress apila automáticamente el contenido lado a lado en pantallas más pequeñas para mantenerlo legible.

Para ajustar el comportamiento de apilamiento, sigue estos pasos:

1. Desplázate a Apariencia → Editor en el escritorio de tu sitio.
2. Edita la página o plantilla que contiene el bloque que quieres ajustar.
3. Abre la vista de lista y selecciona el bloque.
4. En los ajustes del bloque, activa o desactiva «Apilar en móviles».

Bloques con el ajuste «Apilar en móviles»:

• Columnas
• Medios y texto
• Últimas publicaciones de Instagram

Los botones y menús son más legibles en móviles cuando se ajustan a varias líneas en lugar de forzar todo el contenido a una sola línea. Por defecto, el ajuste para ajustar varias líneas está desactivado.

Para activarlo, sigue estos pasos:

1. Desplázate a Apariencia → Editor en el escritorio de tu sitio.
2. Edita la página o plantilla que contiene el bloque que quieres ajustar.
3. Abre la vista de lista y selecciona el bloque.
4. En los ajustes del bloque, activa «Permitir que se ajuste a varias líneas».

Bloques con el ajuste «Permitir que se ajuste a varias líneas»:

• Botones
• Botones de compartir
• Navegación
• Iconos sociales
• Comentarios
• Fila y pila

El texto con tamaño de píxeles (px) se mantiene bloqueado en un tamaño. El tamaño del texto en em o rem se ajusta en función de los ajustes y el tamaño de la pantalla de tu visitante, lo que hace que tu sitio sea más accesible y fácil de leer en diferentes dispositivos.

Para cambiar el texto de píxeles a unidades relativas, sigue estos pasos:

1. Haz clic en el bloque con texto que quieras cambiar de tamaño.
2. En los ajustes del bloque, busca la sección Tipografía.
3. En Tamaño de fuente, haz clic en el icono de tamaño personalizado (dos líneas horizontales con puntos).
4. Haz clic en la unidad px para cambiarla a em o rem.
5. Introduce un valor numérico y ajústalo según sea necesario.

Elegir entre em y rem:

• em: escalas de texto relativas a su contenedor (adecuado para leyendas, etiquetas o texto dentro de bloques específicos)
• rem: el texto se mantiene coherente en todo el sitio (adecuado para texto principal, encabezados y botones)

También puedes personalizar el tamaño de la fuente en todo el sitio en lugar de ajustar bloques individuales.

Esta sección de la guía se aplica a los sitios con nuestros planes Premium, Business y Commerce de WordPress.com, y el plan Pro heredado. Para los sitios con los planes gratuito o Personal, mejora tu plan para acceder a esta función.

Puedes ocultar bloques específicos en dispositivos de escritorio o móviles usando clases CSS. Para configurarlo, sigue estos pasos:

1. Edita la página, la entradao la plantilla que contenga el bloque que quieres ocultar.
2. Selecciona el bloque haciendo clic en él o seleccionándolo en la vista de lista.
3. En los ajustes del bloque, haz clic en Avanzado.
4. En el cuadro «Clases CSS adicionales», introduce hide-desktop o hide-mobile:

5. Ve a los ajustes de CSS personalizadode tu sitio:
   • Temas del bloque: Apariencia → Editor → Estilos → ⋮ → CSS adicional
   • Temas clásicos: Apariencia → Personalizar → CSS adicional
6. Pega el siguiente código y haz clic en Guardar:

/* hide elements on mobile*/
@media (max-width: 768px) {
 .hide-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 769px) {
 .hide-desktop { display: none !important; }
}

Añade el código CSS a tu sitio una vez. Después de eso, puedes añadir la clase hide-mobile o hide-desktop a cualquier bloque, y el CSS la ocultará automáticamente en el dispositivo especificado.