En este tutorial encontrar\u00e1s informaci\u00f3n sobre:<\/p>\n\n\n\n
- \u00bfCu\u00e1l es el prop\u00f3sito de las columnas?<\/a><\/li>
- C\u00f3mo sol\u00edan funcionar las columnas en el antiguo editor<\/a><\/li>
- C\u00f3mo hacer columnas en WordPress sin plugin (en editor de bloques)<\/a><\/li>
- Configuraci\u00f3n b\u00e1sica del bloque de columnas<\/a><\/li>
- C\u00f3mo trabajar con el bloque Columnas de WordPress<\/a><\/li>
- C\u00f3mo editar bloques anidados<\/a><\/li>
- Ventajas del bloque de columnas<\/a><\/li><\/ul>\n\n\n\n
<\/span><\/a>\u00bfCu\u00e1l es el prop\u00f3sito de las columnas?<\/span><\/h3>\n\n\n\n
Las columnas en el sitio web pueden tener m\u00faltiples aplicaciones. En primer lugar, pueden hacer que el contenido est\u00e9 bien organizado, sea m\u00e1s legible y m\u00e1s f\u00e1cil de navegar. Al organizar el contenido en columnas, puede resaltar informaci\u00f3n o par\u00e1metros importantes.<\/p>\n\n\n\n
Por ejemplo, puede utilizar un dise\u00f1o de varias columnas para presentar sus servicios. A\u00f1ade all\u00ed imagen ilustrativa, descripci\u00f3n o bot\u00f3n. Por supuesto, puede hacer clic en la imagen.<\/p>\n\n\n\n
![\"Dise\u00f1o](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-services.png\")
<\/a>Dise\u00f1o de varias columnas con servicios<\/figcaption><\/figure><\/div>\n\n\n\n De manera similar a los servicios, puede usar columnas en WordPress para mostrar productos o categor\u00edas de productos. Es ideal si tienes un sitio web comercial simple.<\/p>\n\n\n\n
![\"Dise\u00f1o](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shop-cat.png\")
<\/a>Columnas utilizadas para mostrar productos y categor\u00edas<\/figcaption><\/figure><\/div>\n\n\n\n En las publicaciones de blog, puede usar columnas para separar el contenido. Puede colocar texto, vi\u00f1etas o im\u00e1genes una al lado de la otra.<\/p>\n\n\n\n
![\"Contenido](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-post-example.png\")
<\/a>Uso de columnas para separar contenido<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>C\u00f3mo sol\u00edan funcionar las columnas en el antiguo editor<\/span><\/h3>\n\n\n\n
Antes de WordPress 5+, si quer\u00eda crear contenido de varias columnas, ten\u00eda que usar tablas. Era mucho m\u00e1s dif\u00edcil que en el editor m\u00e1s reciente. Adem\u00e1s, generalmente hab\u00eda un problema con los estilos y la visualizaci\u00f3n de tablas en dispositivos m\u00f3viles. \u00bfC\u00f3mo sol\u00eda funcionar?<\/p>\n\n\n\n
Ha tenido m\u00faltiples opciones sobre c\u00f3mo crear columnas en el sitio web de WordPress:<\/p>\n\n\n\n
1. Inserte manualmente el c\u00f3digo HTML en el editor de texto<\/b><\/p>\n\n\n\n
<table>\n <tr>\n <td><\/td>\n <td><\/td>\n <\/tr>\n<\/table><\/pre>\n\n\n\n
Este enfoque fue utilizado principalmente por desarrolladores, que pod\u00edan crear r\u00e1pidamente tablas o columnas seg\u00fan sus requisitos. La desventaja era que no todos los temas de WordPress pod\u00edan manejar bien las columnas. Las tablas generalmente no eran perfectas y el usuario promedio no pod\u00eda resolver f\u00e1cilmente todos los problemas posibles.<\/p>\n\n\n\n
2. Permitir tablas en el editor de WordPress<\/b><\/p>\n\n\n\n
Debido a que WordPress us\u00f3 el editor TinyMCE, fue posible permitir funciones para editar tablas. Si te interesa saber m\u00e1s, puedes encontrar todos los detalles en este foro<\/a>. En caso de que haga lo mismo con nuestros temas AIT, las tablas funcionar\u00e1n correctamente.<\/p>\n\n\n\n
3. Uso del elemento Columnas en temas AIT<\/b><\/p>\n\n\n\n
Si usa uno de nuestros temas de WordPress m\u00e1s antiguos, seguramente conoce nuestro elemento Columnas. Este elemento se puede usar para agregar columnas dentro de las p\u00e1ginas. Es un elemento ordenable, lo que significa que puede colocarlo en cualquier lugar que lo necesite. La ventaja es su variabilidad dentro de las p\u00e1ginas.<\/p>\n\n\n\n
![\"Elemento](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/ait-columns-element.png\")
<\/a>Columnas de elementos ordenables: puede usarlo en cualquier tema AIT<\/figcaption><\/figure><\/div>\n\n\n\n 4. Descargue el complemento de terceros para administrar tablas<\/b><\/p>\n\n\n\n
Otra soluci\u00f3n sobre c\u00f3mo hacer columnas en publicaciones y p\u00e1ginas de WordPress fue descargar uno de los complementos disponibles para crear tablas. Estos complementos permiten agregar columnas\/tablas con unos pocos clics sin ning\u00fan tipo de codificaci\u00f3n. Tambi\u00e9n era posible usar esto por usuarios menos experimentados.<\/p>\n\n\n\n
<\/span><\/a>C\u00f3mo hacer columnas en WordPress sin plugin (en editor de bloques)<\/span><\/h3>\n\n\n\n
Gracias al nuevo editor de bloques, crear columnas se volvi\u00f3 extremadamente f\u00e1cil. Si todav\u00eda usa WordPress antiguo, ahora es el momento adecuado para actualizar a la versi\u00f3n m\u00e1s nueva. Podr\u00e1 agregar y administrar columnas simplemente, con unos pocos clics usando el bloque Columnas.<\/p>\n\n\n\n
Este bloque es un cambio bienvenido para todos los que quieren trabajar con contenido de varias columnas, presentar productos o escribir un blog y no tienen experiencia con la programaci\u00f3n.<\/p>\n\n\n\n
Echemos un vistazo a c\u00f3mo agregar el bloque Columnas y c\u00f3mo crear columnas en WordPress sin complemento:<\/p>\n\n\n\n
- La primera opci\u00f3n es hacer clic en "+" en la barra superior y seleccionar el bloque Columnas de los bloques disponibles.<\/li>
- La segunda opci\u00f3n es hacer clic en "+" en cualquier lugar dentro del editor.\n<\/li><\/ul>\n\n\n\n
![\"Agregue](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-add.png\")
<\/a>Agregar columnas en WordPress haciendo clic en "+"<\/figcaption><\/figure><\/div>\n\n\n\n ![\"Agregar](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-shortcut.gif\")
<\/a>Agregar columnas en WordPress usando la barra inclinada \u201c\/\u201d<\/figcaption><\/figure><\/div>\n\n\n\n <\/span>Dise\u00f1os predefinidos del bloque Columnas de WordPress (NUEVO desde WP 5.3)<\/span><\/h4>\n\n\n\n
La \u00faltima versi\u00f3n trajo grandes mejoras en la configuraci\u00f3n de las columnas. En primer lugar, hay estilos de dise\u00f1o predeterminados disponibles. \u00bfQu\u00e9 significa?<\/p>\n\n\n\n
Los usuarios pueden elegir su dise\u00f1o y estilo de alineaci\u00f3n en el proceso de agregar un nuevo bloque al \u00e1rea de contenido. Los dise\u00f1os predefinidos pueden ser muy \u00fatiles, especialmente para aquellos usuarios que no tienen conocimientos avanzados de WordPress. Esta caracter\u00edstica representa c\u00f3mo imaginamos la forma de hacer columnas en WordPress (sin complemento ni ning\u00fan otro complemento).<\/p>\n\n\n\n
![\"Dise\u00f1os](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wordpress-columns.jpg\")
Opciones de dise\u00f1os predefinidos<\/figcaption><\/figure>\n\n\n\n <\/span><\/p>\n\n\n\n
Si no desea elegir un dise\u00f1o predefinido en el bloque Columnas de WordPress, simplemente s\u00e1ltelo. Despu\u00e9s de omitir este paso, el contenido se separar\u00e1 en 2 partes iguales\/dos columnas individuales que se pueden editar.<\/p>\n\n\n\n
![\"Bloque](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns.png\")
<\/a>Bloque de columnas con 2 \u00e1reas predeterminadas (columnas) que puede editar<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Configuraci\u00f3n b\u00e1sica del bloque de columnas<\/span><\/h4>\n\n\n\n
El bloque de columnas de WordPress en s\u00ed mismo no tiene muchas opciones. Por qu\u00e9 es as\u00ed lo explicaremos m\u00e1s adelante. En la barra superior, puede cambiar la alineaci\u00f3n a ancho o ancho completo. Puede cambiar esta alineaci\u00f3n si es compatible con su tema activo.<\/p>\n\n\n\n
![\"Barra](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-toolbar.png\")
<\/a>Barra de herramientas superior con opciones de alineaci\u00f3n<\/figcaption><\/figure><\/div>\n\n\n\n La configuraci\u00f3n m\u00e1s importante del bloque Columnas es el n\u00famero de columnas en la barra lateral del inspector en el lado derecho. De manera predeterminada, hay 2 columnas, pero puede aumentar este n\u00famero a 6. Puede cambiarlo con el mouse o ingresar un n\u00famero. C\u00f3mo se ve, lo ver\u00e1 de inmediato despu\u00e9s de aumentar o disminuir las columnas. El bloque cambia din\u00e1micamente dependiendo del control deslizante.<\/p>\n\n\n\n
![\"Cambiar](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-count.gif\")
<\/a>Mu\u00e9vase con el control deslizante para cambiar el n\u00famero de columnas seg\u00fan lo necesite<\/figcaption><\/figure><\/div>\n\n\n\n Es muy pr\u00e1ctico porque cambia el n\u00famero de columnas literalmente en segundos sin cambios dif\u00edciles en la configuraci\u00f3n o la codificaci\u00f3n.<\/p>\n\n\n\n
De manera similar a otros bloques en el editor de WordPress, puede insertar Clase CSS personalizada tambi\u00e9n en el bloque Columnas.<\/p>\n\n\n\n
<\/span>Agregador de bloques para un trabajo m\u00e1s fluido con bloques<\/span><\/h4>\n\n\n\n
El bloque de columnas es especial porque puedes crear m\u00faltiples bloques con \u00e9l. Hasta que se lanz\u00f3 una nueva versi\u00f3n, era bastante dif\u00edcil trabajar con bloques individuales. Cuando quisiste agregar alg\u00fan bloque, no sab\u00edas exactamente d\u00f3nde hacer clic. Gracias a Block appender (y su diferenciaci\u00f3n por color de fondo) es m\u00e1s f\u00e1cil insertar contenido en la columna adecuada.<\/p>\n\n\n\n
![\"Bloquear](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/wp-columns-block-appender.jpg\")
Agregador de bloque con color de fondo<\/figcaption><\/figure>\n\n\n\n <\/span><\/a>C\u00f3mo trabajar con el bloque de columnas de WordPress<\/span><\/h3>\n\n\n\n
La belleza del bloque Columns es que cada columna puede anidar otros bloques. Puede ser P\u00e1rrafo, Bloque de imagen o Bloque de bot\u00f3n. El n\u00famero m\u00e1ximo de columnas es 6, por lo tanto, puede crear contenido de varias columnas seg\u00fan lo necesite. Como se mencion\u00f3 anteriormente, para presentar productos puede agregar la imagen del producto, el nombre, el precio y el bot\u00f3n uno al lado del otro.<\/p>\n\n\n\n
![\"Diferentes](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-blocks.png\")
<\/a>Con el bloque Columnas, puede presentar diferentes tipos de contenido uno al lado del otro<\/figcaption><\/figure><\/div>\n\n\n\n Tambi\u00e9n puede usar varios bloques de columnas uno debajo de otro para crear una cuadr\u00edcula. Puede usarlo para presentar sus servicios o promocionar caracter\u00edsticas importantes.<\/p>\n\n\n\n
![\"Efecto](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-features.png\")
<\/a>Efecto de cuadr\u00edcula de bloques de columnas colocados uno debajo del otro<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Edici\u00f3n de bloques anidados<\/span><\/h4>\n\n\n\n
Como ya mencionamos, puedes anidar otros bloques dentro de las columnas. Cada bloque anidado tiene todas sus configuraciones disponibles. Eso significa que si agrega un bloque de imagen en la columna, puede editarlo exactamente de la misma manera que en el modo independiente bloque de imagen<\/a>.<\/p>\n\n\n\n
![\"Editar](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/08\/gutenberg-columns-image-block.png\")
<\/a>Configuraciones disponibles para el bloque Imagen anidado en el bloque Columnas<\/figcaption><\/figure><\/div>\n\n\n\n <\/span><\/a>Conclusi\u00f3n: ventajas del bloque de columnas<\/span><\/h3>\n\n\n\n
La liberaci\u00f3n del editor de bloques de WordPress y la disponibilidad del uso de columnas en p\u00e1ginas y publicaciones simplific\u00f3 significativamente la forma en que los usuarios pueden trabajar con el contenido. Gracias al bloque de columnas de WordPress, ya no es importante usar soluciones de terceros o escribir c\u00f3digo HTML. Es posible agregar o eliminar columnas con unos pocos clics. Todo es muy intuitivo y r\u00e1pido tambi\u00e9n para los usuarios menos tecn\u00f3logos.<\/p>\n\n\n\n
Su contenido en el dise\u00f1o de varias columnas se alinear\u00e1 muy bien en la cuadr\u00edcula. Tambi\u00e9n se ver\u00e1 bien en la versi\u00f3n receptiva de inmediato.<\/p>\n\n\n\n
Est\u00e1bamos trabajando duro en el nuevo tema de WordPress Citadela, que est\u00e1 especialmente desarrollado para el editor de bloques de WordPress. Obtenga m\u00e1s informaci\u00f3n sobre el tema Citadela y los paquetes de dise\u00f1o disponibles.<\/p>\n
\n\n\u00cdndice<\/p>\n<\/span><\/div>\n
- C\u00f3mo sol\u00edan funcionar las columnas en el antiguo editor<\/a><\/li>