Las mejores formas de crear columnas en WordPress: reveladas

Al aprender a crear columnas en WordPress, puede transmitir su mensaje de manera más clara y sus usuarios pueden escanear lo que ofrece con facilidad.

Se pueden aprovechar múltiples métodos en WordPress para crear un diseño de varias columnas.

Algunos son fáciles, otros complicados y otros son HTML básico. Esos pueden ser una necesidad dependiendo de la plataforma de WordPress que utilice.



Se pueden hacer más estilos en sitios web de WordPress alojados en sí mismos. Pero, incluso con planes gratuitos en WordPress.com, puede aprovechar las columnas.
 

Cómo crear columnas en WordPress

Usar el editor de bloques es tan fácil como agregar un bloque de columnas. Consume mucho tiempo pero es muy efectivo para diseños complejos. Usando el Editor clásico, el complemento Shortcodes Ultimate facilita el trabajo de agregar columnas. Una alternativa es usar HTML solo para columnas o tablas HTML para columnas con bordes.
 

Agregue columnas a su tema de WP usando CSS y HTML

El personalizador de temas de WP simplifica la edición de la hoja de estilo de su tema.

Vaya a su menú Apariencia, seleccione 'personalizar', luego 'CSS adicional'.

Inserte lo siguiente:

.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
}
.column-center {
display: inline-block;
width: 33.333%;
}

Luego, en su editor de WP, use el editor de 'texto' y pegue el siguiente HTML...

<div class="container">
<div class="column-left">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-center">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-right">
<h2>insert column title</h2>
Type your text in here.
</div>
</div>

El personalizador de CSS agrega el código a la hoja de estilo de su tema. Una vez agregado, use el HTML para insertar columnas.
 

Cree diseños de columnas complejos con facilidad usando el editor de bloques WP

Hay un bloque incluido en Gutenberg para crear diseños de columnas.

Haga clic en el ícono +, escriba 'columnas' y luego seleccione el bloque de columnas. A continuación, seleccione el diseño que desee. Hay cinco opciones para usar hasta tres columnas, solo con diferentes anchos.

Lo siguiente es configurar su contenido dentro del bloque.

Como este es el editor de bloques, todo está controlado por bloques. La forma más rápida es agregar el bloque de párrafo, poner en negrita el título de la columna (si está usando títulos) y luego escribir el contenido de la columna.

Alternativamente, puede construir bloques dentro de bloques.

Agregue un bloque de 'título', luego un bloque de párrafo o un bloque de texto e imagen. Diseña tus columnas a tu gusto.

Como ejemplo, el diseño a continuación utiliza un diseño de dos columnas (70:30) para mostrar el contenido sobre nosotros a la izquierda con las imágenes alineadas a la derecha.

Las imágenes se insertan en la segunda columna con dos columnas de 50:50 apiladas al lado del bloque de párrafo.

El editor de bloques facilita el diseño de diseños complejos con columnas.

Crear un diseño como el que se muestra arriba requeriría mucho tiempo para codificar manualmente con CSS y HTML.

Para diseños de columnas complejos, será útil usar el editor de bloques.
 

Usa el WordPress Códigos cortos Ultimate Enchufar

El complemento Ultimate Shortcodes está repleto de opciones de estilo de contenido. Basta con decir que las columnas son una de ellas y puede obtener hasta cinco columnas para mostrar en una pantalla de escritorio.

Vaya a la página de complementos, haga clic en Agregar nuevo y busque Shortcodes Ultimate.

Una vez instalado y activado, aparece un nuevo botón en la pantalla del editor de WordPress junto al botón 'agregar medios'. Al hacer clic en eso, se cargará una pantalla con todos los códigos cortos disponibles.

Las columnas son una función gratuita. Los códigos cortos con un ícono rojo son premium. Los demás son gratis.

Seleccione las columnas, luego siga las instrucciones para darles el estilo que desee.

Usando el CSS personalizado que proporcionan en su sitio web, puede agregarlo a su CSS personalizado en la página de configuración del complemento, luego agregue columnas con texto dentro de los botones.

Colocando esto en el editor de texto...

<h2><span style="color: #ff0000;">Learn More</span></h2>
 About Us 
 Services 
 FAQs 
 Feedback
 Pricing 

Donde el '1/5' está en los códigos cortos anteriores, esos números controlan cuántas columnas se insertan. Use '1/3' para tres columnas.

Y, por supuesto, si usa los botones, puede vincular el texto para ir a las páginas a las que desea que vayan sus visitantes.

Como se trata de códigos cortos, se pueden colocar en cualquier lugar de su sitio. No se requiere jugar con CSS.

Si no desea agregar complementos o usar el editor de bloques, o si usa WordPress.com, aún puede aprovechar las columnas, solo que con mucho menos estilo y personalización...
 

Cómo crear columnas en WordPress con HTML

Para los usuarios de WordPress.com sin acceso al personalizador de CSS, HTML dentro de su editor de WordPress es la única forma de crear columnas.

HTML sigue siendo popular a pesar de ser uno de los lenguajes informáticos más (ejem) maduros. Le brinda los conceptos básicos para un diseño de varias columnas. Simplemente sin un estilo elegante.

Si está satisfecho con tener columnas sin bordes, fondos o cuadros de contenido que rodeen bloques de texto, HTML es el camino a seguir.

En su editor de WP, haga clic en la pestaña de texto para editar su contenido con HTML e inserte lo siguiente:

<div style="width: 33.3%; padding: 20px; float: left;">

Tres elementos HTML controlan el diseño de su columna.

El primero es el ancho. El ancho máximo en cualquier tema es 100% para ocupar el tamaño completo de una pantalla. Para escritorios, si desea cuatro columnas, debe cambiar el ancho al 25 %. 25 por 4 es 100 por lo que el 25% te da un diseño de cuatro columnas.

El relleno es el espacio entre las columnas. De lo contrario, sería difícil saber dónde termina un bloque de texto y comienza el siguiente.

La última parte es el elemento flotante. Esto se usa para hacer flotar las columnas a la izquierda o derecha de la página.

Cada parte se puede cambiar al tamaño de las columnas que necesita. Por ejemplo, si solo quisiera dos columnas, establecería el ancho en 50%.

<div style="width: 50%; padding: 20px; float: left;">Your content here</div>
<div style="width: 50%; padding: 20px; float: left;">Your second column content here</div>

Crea una tabla HTML para agregar columnas con bordes en WordPress

Otra forma de agregar columnas sin necesidad de ediciones CSS es crear una tabla en HTML.

El siguiente código HTML crea una tabla de dos columnas

<table style="width: 100%; height: 48px;" border="”5″" width="”1200″" cellspacing="”50″" cellpadding="”50″">
<tbody>
<tr style="background-color: #fff73f;">
<td style="text-align: center; height: 16px;"><strong>Column Title </strong></td>
<td style="text-align: center; height: 16px;"><strong>Next column title</strong></td>
</tr>
<tr style="height: 16px;">
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
</tr>
</tbody>
</table>

Similar a la creación de columnas sin bordes en HTML, el tamaño de las tablas HTML se puede ajustar cambiando el ancho y el alto. Al igual que los colores de fondo.

Para crear una tabla en HTML en WordPress, configure primero el 'estilo de tabla' y luego colóquelo en para cargar el contenido.

El es para 'fila de tabla'. El es para 'detalles de la tabla'.

Los títulos de las columnas se establecen en la fila. Utilice el área de detalles de la tabla para insertar párrafos de contenido dentro de una columna.