Cómo usar columnas y filas - Calendae | Informática, Electrónica, CMS, Ciberseguridad

Cómo usar columnas y filas

Hola y mil gracias por leerme. Yo soy Samuel López y en el día de hoy hablaremos sobre Cómo usar columnas y filas

Gutenberg es más que simples bloques. Le permite paginar una página usando columnas, proporcionando así más flexibilidad con la apariencia de su página. Puede crear columnas y filas con una variedad de contenido diferente en ambos.

Como es de esperar de una nueva versión, existen algunas limitaciones, pero aún representa un gran paso adelante. Si cree que necesita más opciones de diseño después de leer esta guía, consulte el archivo Gutenberg avanzado conectar.

En este tutorial, verá cómo usar columnas en el editor principal de WordPress Gutenberg.


Video sobre las columnas de Gutenberg

Este video, que normalmente solo está disponible para los miembros de Calendae Blog, muestra cómo usar las opciones de diseño y columna en Gutenberg:


Comience con las columnas de Gutenberg

Cuando abra la nueva pantalla de edición de WordPress, haga clic en el icono + para agregar un nuevo bloque. Abra el área «Elementos de diseño» y busque el icono de tres columnas.

Después de hacer clic en el icono de tres columnas, obtendrá columnas en blanco con texto de marcador de posición en la columna central.

3 columnas

Visualmente, encontré este diseño inicial un poco confuso. No hubo una indicación inmediata ya que hay muchas columnas en este bloque «Columnas». Después de unos pocos clics, pude resaltar toda el área y ver que usaba 2 columnas.

2 columnas


Cómo agregar bloques dentro de las columnas de Gutenberg

Gutenberg le pide que coloque bloques en estas columnas. Entonces, dado que las columnas son bloques, esencialmente está agregando bloques dentro de los bloques.

Haga clic dentro de las columnas y verá que hay más iconos + flotando alrededor:

3 botones de columna

Al pasar el cursor sobre las áreas de las columnas, aparece un borde azul alrededor de cada columna. Verá un icono + que le permite agregar un nuevo bloque en esa columna.

Agregue un nuevo bloque para las columnas de Gutenberg

Pero si hace clic en este icono + en la parte superior de la fila, puede crear una nueva fila.

Agregue una nueva fila para las columnas de Gutenberg

Así es como se verá la nueva fila, encima de las siguientes tres columnas:

Nueva fila para el bloqueo de columnas de Gutenberg

Mover filas y columnas de Gutenberg

Para mover filas y columnas, puede usar los controles en el lado izquierdo de la pantalla. Estos controles aparecen solo cuando pasa el cursor sobre ellos. Estos controles constan de una flecha hacia arriba, una flecha hacia abajo y un icono de punto.

Subir y bajar las columnas de Gutenberg

Las flechas moverán la línea hacia arriba y hacia abajo. Puede utilizar este icono de seis puntos para arrastrar columnas a una parte diferente de la pantalla.

Arrastrar y soltar para columnas de Gutenberg

La línea azul ayudará a encontrar una nueva posición para la columna. Aquí puede ver que la imagen se ha movido una línea por encima de su posición original.

Opciones de navegación para columnas de Gutenberg

Para cambiar el tamaño del contenido, puede seleccionar «ancho ancho» o «ancho completo».

opciones de ancho para columnas de Gutenberg

Según la documentación, debería poder cambiar el tamaño de las columnas ajustando los bordes grises entre ellas, pero mis pruebas en Firefox y Chrome fallaron.

La barra lateral derecha ofrece algunas opciones útiles. Aquí puede cambiar el número de columnas ingresando un número o ajustando el control deslizante.

Número de columnas para columnas de Gutenberg

Si hace clic en la pestaña Avanzado en esta barra lateral, también podrá agregar una clase CSS. Al crear una clase, puede controlar el ancho de las columnas.

Opciones avanzadas para columnas de Gutenberg

En el siguiente ejemplo, puede ver la diferencia entre «ancho ancho» y «ancho completo».

Diferentes anchos para columnas Gutenberg

Vale la pena señalar que también puede usar el tamaño de la imagen para controlar el ancho de la columna. Al hacer que la imagen sea más pequeña, el bloque de texto tiene más espacio para llenar la línea, mientras que una imagen más grande obligará a un bloque de texto a ocupar menos espacio.

¿Son sensibles las columnas de Gutenberg?

Sí, las columnas de Gutenberg se apilarán automáticamente en pantallas más pequeñas. Si utiliza la funcionalidad CSS mencionada anteriormente, deberá asegurarse de que su estilo responda. Sin embargo, si usa el diseño estándar con clases CSS adicionales, sus columnas se apilarán de manera muy ordenada.

Mis pensamientos sobre las características de la columna de Gutenberg

La funcionalidad de la columna en Gutenberg muestra que no es un generador de páginas completo. Y vale la pena señalar que algunos controles son un poco difíciles de usar. Sin embargo, Gutemberg tiene algunas características interesantes y ofrece mucha más flexibilidad que el editor anterior.

Más lecturas de Gutenberg


El video introductorio a Gutenberg

WordPress 5 está aquí con un nuevo editor llamado Gutenberg que cambia la forma en que se crean y editan las publicaciones y las páginas. ¡Este video es tu guía completa de Gutenberg! Gracias a nuestros amigos de Glowhost para hacer posible este video: Ahorre un 60% en su primera factura cuando aloje su sitio de WordPress con GlowHost. Haga clic aquí y utilice el cupón «WPGUTENBURG».



.

Deberías compartir en tu Facebook para que tus amigos lo disfruten

👇👇👇 😘 💪 👇👇👇

Comparte