El otro día preguntaban en los foros de WordPress como se podría cambiar en el tema Astra el hecho de que al ver una web en una tableta la barra lateral se pusiese automáticamente debajo del contenido, algo que al usuario no le importaba en la visualización en móviles pero que no le gustaba en tabletas, pues se perdían los visitantes sus banners, recursos, etc.
O sea, que en pantallas de escritorio se veía la barra lateral en su sitio…
Pero al visualizar su web en tabletas y móviles la barra lateral se movía debajo del contenido, así:
Índice de contenidos
Los breakpoints o puntos de ruptura
Bien, esto es debido a los conocidos como puntos de ruptura, o breakpoints.
El tema Astra tiene unos puntos de ruptura por defecto para tabletas y móviles, estos:
- Punto de ruptura móvil: 544 píxeles
- Punto de ruptura tabletas: 921 píxeles
¿Qué significa esto?
Pues que cuando el dispositivo con el que se está viendo nuestra web tiene un ancho menor que los píxeles especificados en el punto de ruptura se cambiará la visualización, tanto de las barras laterales como de los menús, que pasarán a ser el conocido como menú hamburguesa.
Es lo que normalmente se suele nombrar como responsive, la cualidad de los temas de adaptar su contenido a distintos tamaños de dispositivo, algo que no se hace con la magia del NoCode, sino precisamente con código 😉
Históricamente los breakpoints más comunes solían ser estos:
- 320px — 480px: Móviles.
- 481px — 768px: iPads, tabletas.
- 769px — 1024px: Portátiles con pantallas pequeñas.
- 1025px — 1200px: Escritorio, pantallas grandes.
- 1201px y más — TV, pantallas muy grandes.
Pero esto se va quedando anticuado, pues actualmente tanto móviles como tabletas, ordenadores de escritorio y no digamos televisores, son cada vez más grandes, así que los diseñadores aplican los puntos de ruptura en números mayores.
No tienes más que ver arriba los puntos de ruptura por defecto de Astra, unos estándares más adecuados a los tamaños actuales de estos dispositivos.
Cómo cambiar el breakpoint para tabletas en Astra
Dicho lo anterior, vamos al grano ¿cómo cambio este dichoso, perdón, famoso punto de ruptura? Pues con un poquito de código, que como siempre debemos añadir al final del archivo functions.php de nuestro tema hijo de Astra.
En el caso de que queramos cambiar el punto de ruptura para tabletas el código sería así:
// Cambiar punto de ruptura en tablets
add_filter( 'astra_tablet_breakpoint', function() {
return 768;
});En este ejemplo hemos cambiado el punto de ruptura a 768 píxeles, con lo que la barra lateral solo se pondrá debajo del contenido cuando la tableta tenga menos de esos píxeles.
Cómo cambiar el breakpoint para móviles en Astra
Si lo que quieres es cambiar el punto de ruptura para dispositivos móviles el código sería muy parecido, donde lo único que cambia es el filtro y el valor que le quieras asignar en píxeles, por ejemplo:
// Cambiar punto de ruptura en móviles
add_filter( 'astra_mobile_breakpoint', function() {
return 480;
});No te olvides de cambiar el breakpoint del menú principal
Ahora, suele ser de lógica que, si cambias el punto de ruptura del tema, el menú principal acompañe este cambio en el breakpoint, y se cambie a menú hamburguesa cuando se produzca «el salto».
Esto en Astra lo puedes cambiar fácilmente sin tener que tocar nada de código, desde el personalizador.
Solo tienes que ir a la sección del personalizador de WordPress «Cabecera -> Menú principal -> Menú móvil -> Punto de ruptura del menú», y poner el mismo valor que hayas asignado al punto de ruptura en tabletas, o móvil, lo que prefieras.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Articulo breve y conciso. Yo que trabajo con Astra la gran mayoría de los proyectos agradezco mucho tus artículos.
Un fuerte abazo.
estoy usando astra en mi sitio pero al ver la vista para movil hago los cambios pero se mueve todo el sitio tambien entoces arreglo uno y se descompone el otro estoy con astra y elemntor pro me podrian ayudar muchas gracias
Me pasa lo mismo! Quiero adaptar mi pagina web a la versión móvil pero cuando me pongo a editar con la vista móvil se modifica también todo lo de la vista escritorio. Cómo se podría hacer para que las ediciones sean exclusivas por cada dispositivo?