Cómo crear diseños de columnas en WordPress

Crear columnas en código

Es posible crear columnas dentro de tus publicaciones y páginas usando tablas, pero el método ideal para crear columnas es a través de HTML y CSS. Los tutoriales de soporte para WordPress muestran muchos ejemplos avanzados. Las columnas son realmente fáciles de hacer en código. Veamos un ejemplo para crear columnas.

Para crear columnas en el editor de texto, use la etiqueta <div> junto con un atributo de estilo.

Este ejemplo de código crea dos columnas como esta:

Puede cambiar el tamaño de las columnas ajustando el ancho y los valores de relleno. Al ajustar los números, puede crear más o menos espacio entre las columnas y cambiar el ancho de las columnas. Para agregar más columnas, simplemente agregue otro bloque de código. Se vería así:

Si agrega más columnas, querrá cambiar el porcentaje de ancho para asegurarse de que encajen. En este ejemplo, se cambió de 40% a 30%.

Las columnas tampoco tienen que ser del mismo tamaño. Por ejemplo:

Este código crearía dos columnas estrechas y una columna más ancha:

Con este código, puede crear múltiples columnas en cualquier página o publicación, creando una apariencia de revista o periódico. También puede colocarlos en capas al continuar agregando columnas:

Creé el espacio entre las líneas usando una etiqueta de ruptura entre las columnas 3 y 4: <br><br/>

Esto es lo más simple posible para codificar a mano. Sin embargo, aún debe obtener una vista previa y asegurarse de que todo encaje en sus páginas y publicaciones de la manera que desea: cada publicación. Una forma más fácil de hacer esto en su editor visual es usando un complemento. Además, esto solo afecta a sus publicaciones y páginas, no al diseño del sitio en sí.

Complementos y códigos cortos

Los complementos hacen esta codificación por usted. Le dan opciones para que pueda ver cómo encajarán sus columnas dentro de la publicación. Algunos proporcionan códigos cortos que coloca dentro de su contenido. Otros proporcionan botones u otras adiciones a su editor visual, lo que le permite realizar selecciones rápidas. Aquí hay un vistazo rápido a algunos buenos complementos.

Códigos cortos de ET

El complemento Shortcodes de ET agrega botones a su editor de texto. Así es como se ve el editor sin los botones:

Y esto es lo que añaden:

Como puede ver, hay muchas opciones de diseño que se han agregado a su lista de opciones. Las opciones para su diseño incluyen:

• Una mitad
• la mitad de lo ultimo
• Un tercio
• un tercio ultimo
• Un cuarto
• un cuarto último
• Dos tercios
• Dos tercios últimos
• Tres cuartos
• Tres cuartos últimos

Usar los códigos es simple. Escriba su contenido y luego, en el modo de texto, resalte la parte que desea que aparezca dentro de una columna y seleccione el ancho de la columna.

Eso es todo al respecto. Puede cambiarlo eliminando el código que envuelve el texto y luego haciendo otra selección.

Sugerencia: experimente con los anchos de columna y presione la vista previa para ver qué funciona mejor para su tema y obtener el diseño perfecto que está buscando.

Los códigos cortos de ET responden y son extremadamente fáciles de usar. Forman parte del plan Developer por $89 al año. Le brinda acceso a todos los temas, complementos, soporte técnico premium, actualizaciones perpetuas y archivos de Photoshop en capas.

Constructor elegante

El Creador de diseño crea un lienzo para cada publicación o página donde puede arrastrar y soltar columnas de varios tamaños. Seleccionas las columnas del menú. Tus opciones son:

• Una media columna
• Una tercera columna
• Una cuarta columna
• Columna de dos tercios
• columna tres cuartos
• columna redimensionable

Puede colocarlos usted mismo o puede cargar una plantilla. Una vez que tenga el diseño como lo desea, puede guardarlo y volver a cargarlo tantas veces como desee.

Una vez que haya colocado las columnas donde desee, puede agregar cualquiera de los 17 módulos a cualquiera o a todos ellos. También puede guardar el diseño con los módulos, para poder reutilizarlo nuevamente.

Elegant Builder responde y es uno de los complementos más fáciles que he usado para crear columnas rápidamente. Es parte del plan Developer  por $89 por año. Le brinda acceso a todos los temas, complementos, soporte técnico premium, actualizaciones perpetuas y archivos de Photoshop en capas.

Columnas WP Avanzadas

Otro complemento que agregará columnas es Advanced WP Columns. Este complemento gratuito tiene algunas características ingeniosas. Te permite crear columnas con una interfaz simple sin usar códigos cortos. Admite diseños receptivos.

Agrega un botón a su editor visual que abre una pantalla donde puede arrastrar y soltar su diseño. Puede elegir entre 2, 3 o 4 columnas. Una vez que tenga sus columnas, puede hacer ajustes usando los controles deslizantes.

Los controles deslizantes le permitirán cambiar el ancho de cada columna y puede cambiar el ancho del espacio entre las columnas. Esto se hace fácilmente usando los controles deslizantes en la pantalla.

Puede agregar su contenido directamente en las columnas de la ventana emergente si lo desea. Tiene la gama completa de características textuales que espera: negrita, cursiva, subrayado, tachado, superíndice, subíndice, código, encabezado, H2-H6, párrafo, pre, enlace, etc.

También puede colocar su contenido en la columna dentro del editor visual. Puede realizar las modificaciones que desee en el contenido desde el editor visual o la ventana emergente. El editor visual, por supuesto, le brinda más funciones multimedia, por lo que creo que es la mejor opción.

Puede agregar imágenes a cualquier columna. En lugar de agregar medios como de costumbre, debe darle el enlace, la descripción y las dimensiones.

También puede establecer algunos valores predeterminados, como el ancho del contenedor, el CSS del contenedor y el número de columnas. Este es un complemento fácil de usar y las páginas se ven muy bien. Hay una guía de usuario y un tutorial en vídeo para empezar. No está mal para un complemento gratuito.

Columnas fáciles de WP

Este complemento agrega códigos cortos que funcionan tanto en páginas como en publicaciones. Agrega un botón a su editor visual. Al hacer clic en el botón, aparece una ventana emergente con muchas selecciones.

Haga clic en la fila que tiene un diseño que le interese y agrega marcadores de posición a su texto.

Reemplace la descripción de la columna con su texto.

Su contenido se colocará en las columnas. Si desea un diseño diferente debajo de este, simplemente haga clic en el botón nuevamente y seleccione la fila que desee. Puede hacer clic en tantas filas como desee, pero debe hacer clic en ellas de una en una.

En la parte inferior de la pantalla de selección, puede elegir el ancho de una sola columna de un cuadro desplegable. También puede agregar clases y estilos. Esta es una buena manera de agregar fácilmente combinaciones de columnas a sus páginas y publicaciones. Y es gratis. El único inconveniente real es que tiene que trabajar entre los códigos cortos dentro de su contenido. Esto puede ser un poco confuso al principio, especialmente si tiene muchos códigos cortos dentro de su texto.

Widgets de columna de respuesta

Este también funciona con un shortcode. A diferencia de los demás, no hay ningún botón para agregarlos. Le permitirá colocar widgets en columnas, por lo que cualquier widget que tenga puede ir a cualquier lugar que desee. Usted crea un cuadro de widgets, le agrega widgets y luego los llama con un código abreviado.

Puede configurar la cantidad de columnas, la cantidad de widgets, la cantidad de columnas por ancho de navegador, el intervalo de columnas y mucho más. También puede escribir código PHP para mostrarlos en la plantilla del tema.

Hay muchas configuraciones y puede tomar un tiempo trabajar con todas ellas. Configurarlos no es tan fácil e intuitivo como los demás, pero hay muchas más opciones. Una cosa que no me gusta de la edición gratuita es que tiene anuncios, así que no recomiendo la edición gratuita.

También hay una edición Pro que agrega múltiples cuadros de widgets, opciones de importación/exportación de widgets, sin anuncios, CSS personalizado y soporte premium. Cuesta $ 57.98 por un sitio, $ 97.98 por cinco sitios y $ 297 por sitios ilimitados.

MiniMax – Creador de diseño de página

Este es un generador de páginas responsivo de arrastrar y soltar que agrega botones a su editor visual. Puede agregar de 1 a 6 columnas. También le permitirá importar o exportar su diseño e incluso puede clonarlo para usarlo en otra página o publicación.

Este es fácil de usar. Cuando cree una nueva página o publicación, verá una nueva pestaña entre su editor visual y el editor de texto llamada MiniMax. Al hacer clic aquí, obtendrá botones para agregar la cantidad de columnas que desee, o para importar/exportar o clonar.

Hice clic para agregar 6 columnas. Esto agregó 6 cajas a las que podría agregar contenido. Podría agregar CSS a cada cuadro individualmente. Hay botones de más y menos que le permiten aumentar o disminuir el tamaño de cada columna. También puede ajustar el borde, el patrón y el margen.

Al hacer clic en la carpeta de la columna, se abrió un cuadro donde podía elegir módulos (widgets) para ir en la columna. Después de que terminé con esa fila de columnas, hice clic en un botón de clonación en el lado izquierdo de esa fila. Esto clonó la fila y la colocó debajo de la primera fila. Podría arrastrar las filas y reorganizar el orden fácilmente.

Me encontré con un problema al guardar mi publicación como borrador. Cada vez que lo guardaba, mi contenido se borraba. Primero tuve que darle un nombre a la publicación. Una vez que lo nombré, no tuve ningún problema para guardar el contenido. Por pura simplicidad y facilidad de uso, este es difícil de superar. También es gratis.

Temas

Uso de códigos cortos

Muchos temas diseñados profesionalmente vienen con códigos abreviados. Los códigos abreviados le permiten usar fácilmente elementos de diseño prefabricados sin tener que hacer nada de la codificación usted mismo. Puede desarrollar diseños avanzados que incluyan columnas simplemente colocando un código abreviado en la publicación. Los códigos cortos son uno de los métodos más fáciles para agregar columnas sin tener que escribir su propio código.

Arrastrar y soltar

Otros temas incluyen opciones para diseñar su propio diseño. Muchos de ellos hacen esto a través de elementos de diseño de arrastrar y soltar. Aquí hay un par de ejemplos.

divide

No puedo dejar de lado el tema más popular de ET. Divi tiene su propio creador de páginas integrado en el núcleo del tema. Utilizándolo, puede crear páginas con prácticamente cualquier tipo de diseño de columna que desee. Puede cargar plantillas prefabricadas o puede usar arrastrar y soltar para crear sus propios diseños. Aquí hay un recorrido rápido:

En una página, haga clic en el botón Usar generador de páginas y aparecerá esta pantalla. Desde aquí, puede cargar un diseño prefabricado y luego usarlo o modificarlo a su gusto, o puede comenzar a insertar columnas.

Hay muchos diseños prefabricados con muchas opciones.

Hay 11 opciones de diseño diferentes si elige insertar columnas. Seleccione el que desee.

Sus columnas aparecen en el diseño que eligió y puede comenzar a insertar módulos.

Puede agregar tantas filas como desee y darle a cada una el diseño de columnas que elija. Una vez que haya elegido su diseño, puede agregar módulos. También puede regresar y editar el diseño y agregar o eliminar columnas si lo desea. También puede arrastrar y soltar las filas. Es tan fácil modificar el diseño como crearlo en primer lugar.

Divi es muy fácil de usar y puedes tener un diseño único y profesional en solo unos minutos. Es parte del plan Personal , un paquete de $ 69 por año que le brinda acceso a todos los temas, actualizaciones perpetuas y soporte técnico premium.

Hacer

Make incluye un potente editor de diseño de arrastrar y soltar que le permite crear diseños de columnas con un simple clic. Puede mostrar entre 1 y 4 columnas en una sección. Cada columna puede contener una imagen o contenido destacado. Puede reorganizar las columnas arrastrando y soltando.

Instalé esto para probarlo. Cuando cree una nueva página, tendrá algunas opciones de diseño, incluida una para las columnas. Por defecto, hay tres columnas ya colocadas. Agregué algunas imágenes que tomé con mi teléfono inteligente a cada columna y eso fue todo.

Usarlo fue fácil y sencillo. Es gratis para uso personal en un solo sitio web. La edición Make Plus Developer cuesta $ 299 y se puede usar en sitios web ilimitados.

Terminando

Las columnas realmente pueden hacer que su contenido destaque. Pueden hacer que su contenido sea más agradable a la vista y visualmente más interesante. Con tantas buenas opciones de herramientas para hacerlos, cualquiera puede tener columnas bonitas y elegantes en sus diseños.

¡Tu turno! ¿Ha utilizado alguno de estos métodos para crear columnas? ¿Dejé fuera tu favorito? ¡Me gustaría saberlo en los comentarios a continuación!

Imagen en miniatura del artículo de Bloomua / shutterstock.com