Como sabéis, nuestro portal se visualiza desde todo tipo de dispositivos electrónicos y pantallas. La mayor parte del contenido generado con el editor estándar tiene un comportamiento responsivo, adaptándose automáticamente al tamaño y orientación de la pantalla en que se visualiza.
En ocasiones, podemos requerir un mayor control de la disposición de los elementos de nuestro contenido, en función del tamaño de la pantalla. Esto es posible gracias a las opciones que nos ofrece el editor estándar de WordPress (Gutenberg), combinado con nuestro tema (GeneratePress), y con la funcionalidad de algunos bloques, como los bloque de cuadrícula y contenedor.
Mostraremos un ejemplo sencillo sobre cómo alterar el orden de visualización de dos elementos cuando pasamos a vista con teléfono móvil.
La siguiente imagen representa la vista de una página desde un PC, lo que se conoce como vista en modo escritorio:
Observamos dos imágenes, una al lado de la otra
Este contenido está formado por un bloque de cuadrícula que contiene dos bloques contenedores. Cada uno, a su vez, contiene una imagen. Explorando la vista del editor en modo lista:
El comportamiento por defecto, cuando se visualiza este contenido en un dispositivo móvil, sería mostrar arriba lo que está a la izquierda y abajo lo que está a la derecha, así:
Pues bien, si deseamos que en vista móvil se muestren las imágenes de forma inversa, esto es, la de la derecha arriba y la de la izquierda abajo, podemos hacerlo, gracias al ajuste de «orden» que nos permite el bloque contenedor. Para ello, seleccionaremos el bloque contenedor de la primera imagen:
Iremos a los ajustes del bloque y seleccionaremos los ajustes para dispositivo móvil:
Después en la sección de ajuste «flex child», pondremos un número natural que especifique el orden del bloque (por defecto es cero o vacío).
Solo con poner un 1, veremos que ya cambia la disposición de las imágenes, ya que el contenedor de la otra imagen, tiene por defecto el orden 0, que es inferior a 1 y por ello se mostrará antes (arriba, en este caso).
En caso de tener más de dos elementos, podemos igualmente asignar un orden a cada uno de ellos, alterando el comportamiento de la vista responsiva a nuestro gusto.
Recordad que es un ajuste del bloque contenedor de generateblocks.