La mejor manera de crear columnas en WordPress - revelada

Al aprender a crear columnas en WordPress, puede comunicar su mensaje con mayor claridad y permitir que sus usuarios naveguen fácilmente a través de lo que tiene para ofrecer.

Hay varias formas de crear diseños de varias columnas en WordPress.

Algunos son simples, otros son engorrosos y algunos son HTML básico. Pueden ser necesarios, pero dependen de la plataforma de WordPress que esté utilizando.

Se puede hacer más estilo en un sitio de WordPress autohospedado. Sin embargo, incluso con el plan gratuito de WordPress.com, puede aprovechar las columnas.

Cómo crear columnas en WordPress

Usar el editor de bloques es tan fácil como agregar bloques de columnas. Toma mucho tiempo, pero es muy efectivo para diseños complejos. Utilizando el editor clásico, el complemento Shortcodes Ultimate facilita la adición de columnas. Otro enfoque es usar HTML solo para columnas o tablas HTML para columnas.

Agrega columnas a tu tema de WP usando CSS y HTML

WP Theme Customizer simplifica la edición de hojas de estilo de temas.

Vaya al menú Apariencia, seleccione "Personalizado", luego "Agregar CSS".

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 use un editor de "texto" en su editor de WP 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>

CSS Customizer agrega código a la hoja de estilo de su tema. Después de agregar, inserte la columna usando HTML.

Cree fácilmente diseños de columnas complejos con WP Block Editor

Gutenberg une un bloque para crear diseños de columnas.

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

Lo siguiente es configurar su contenido dentro del bloque.

Dado que este es el editor de bloques, todo está controlado por el bloque. La forma más rápida es agregar un bloque de párrafo, poner en negrita los encabezados de las columnas (si usa encabezados) e ingresar el contenido de la columna.

Alternativamente, puede construir bloques en bloques.

Agregue un bloque de "Título", seguido de un párrafo o bloque de texto e imagen. Diseña las columnas a tu gusto.

Por ejemplo, el diseño a continuación utiliza un diseño de dos columnas (70:30) para mostrarnos a la izquierda, con la imagen alineada a la derecha.

La imagen se inserta en la segunda columna y las dos columnas se organizan en una proporción de 50:50 con respecto al bloque de párrafo.

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

Escribir manualmente un diseño como el anterior usando CSS y HTML llevaría mucho tiempo.

Para diseños de columnas complejos, usar el editor de bloques puede ayudar.

El complemento Ultimate Shortcodes está lleno de opciones de estilo de contenido. Se puede decir que las columnas son una de ellas y puedes mostrar hasta cinco columnas en el monitor de tu computadora de escritorio.

Vaya a la página de su complemento, haga clic en agregar uno nuevo y busque Shortcodes Ultimate.

Una vez instalado y activado, aparecerá un nuevo botón junto al botón "Agregar medios" en la pantalla del Editor de WordPress. Al hacer clic en el botón, se cargará una pantalla con todos los códigos cortos disponibles.

Las columnas son una función gratuita. Los códigos cortos con íconos rojos son de primera clase. Otros son gratis.

Seleccione la columna y siga las instrucciones para diseñarla como desee.

Usando el CSS personalizado que proporcionan en su sitio web, puede agregarlo al CSS personalizado en la página de configuración del complemento y luego agregar una columna de texto dentro del botón.

Ponlo en un editor de texto...

<h2><span style="color: #ff0000;">Learn More</span></h2>

"1/5" en el código corto anterior, estos números controlan el número de columnas insertadas. Use "1/3" para tres columnas.

Por supuesto, si usa un botón, puede vincular el texto a la página que desea que visiten sus visitantes.

Dado que se trata de un código corto, puede colocarlos en cualquier lugar de su sitio web. No hay necesidad de lidiar con CSS.

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

Cómo crear columnas en WordPress usando HTML

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

Aunque HTML es uno de los lenguajes informáticos más maduros, sigue siendo muy popular. Le brinda los conceptos básicos de los diseños de varias columnas. Simplemente sin un estilo lujoso.

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

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

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

Tres elementos HTML controlan el diseño de sus columnas.

El primero es el ancho. El ancho máximo de cada tema es del 100% para ocupar todo el tamaño de la pantalla. Para el escritorio, si desea cuatro columnas, puede cambiar el ancho al 25%. 25 por 4 es igual por 100, por lo que el 25% le da un diseño de cuatro columnas.

El relleno es la distancia entre las columnas. De lo contrario, será difícil decir dónde termina un bloque de texto y comienza el siguiente.

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

Cada sección se puede cambiar de tamaño al tamaño de la columna que necesita. Por ejemplo, si solo necesita dos columnas, puede establecer 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>

Cree una tabla HTML para agregar columnas de borde a WordPress

Otra forma de agregar columnas sin editar 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>

De forma similar a la creación de una columna sin bordes en HTML, puede cambiar el tamaño de una tabla HTML cambiando el ancho y el alto. El color de fondo también funciona.

Para crear una tabla HTML en WordPress, primero configure el "estilo de tabla", luego pegue

Cargar contenido.

Esta

Para "orden de la mesa".

Se utiliza para "detalles de la tabla".

Los encabezados de las columnas se establecen en filas. Usar detalles del formulario

El área utilizada para insertar párrafos con contenido en la columna.