Cómo cambiar el punto de ruptura de tableta o móvil en el tema Astra #SemanaAstra

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í:

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

1 comentario en “Cómo cambiar el punto de ruptura de tableta o móvil en el tema Astra #SemanaAstra”

  1. Articulo breve y conciso. Yo que trabajo con Astra la gran mayoría de los proyectos agradezco mucho tus artículos.

    Un fuerte abazo.

Deja un comentario

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

 

Ir arriba Ir al contenido