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.
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.
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:
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.
Pero si hace clic en este icono + en la parte superior de la fila, puede crear una nueva fila.
Así es como se verá la nueva fila, encima de las siguientes tres columnas:
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.
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.
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.
Para cambiar el tamaño del contenido, puede seleccionar «ancho ancho» o «ancho completo».
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.
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.
En el siguiente ejemplo, puede ver la diferencia entre «ancho ancho» y «ancho completo».
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
👇👇👇 😘 💪 👇👇👇
