Cómo agregar columnas en tu contenido utilizando Genesis Framework

Hoy veremos cómo crear columnas para tu contenido, con Genesis Framework, utilizando un poco de markup HTML.

¿Qué encolumnados nos permite crear Genesis?

Genesis nos permite encolumnar el contenido de nuestras páginas y posts en:

Dos columnas.
Tres columnas.
Cuatro columnas.
Y… Seis columnas.

A continuación tienes unos ejemplos:

2 columnas

Esto es un ejemplo de cómo quedaría el texto de un artículo repartido en 2 columnas.

3 columnas

Esto es un ejemplo de cómo quedaría el texto de un artículo repartido en 3 columnas.

4 columnas

Esto es un ejemplo de cómo quedaría el texto de un artículo repartido en 4 columnas.

6 columnas

Esto es un ejemplo de cómo quedaría el texto de un artículo repartido en 6 columnas.

¿Cómo funciona, y que código debo incluir en mi contenido para encolumnar mis textos?

Para utilizar columnas en nuestro contenido lo único que debes hacer es envolver tus párrafos con un poco de HTML utilizando DIV‘s y unas sencillas clases CSS siguiendo los siguientes ejemplos que además funcionan con todos nuestros themes:

Dos columnas

[code]

<div class="one-half first">Sustituye este texto por el que tu quieras.</div>

<div class="one-half">Sustituye este texto por el que tu quieras.</div>

[/code]

Tres columnas

[code]

<div class="one-third first">Sustituye este texto por el que tu quieras.</div>

<div class="one-third">Sustituye este texto por el que tu quieras.</div>

[/code]

Cuatro columnas

[code]

<div class="one-fourth first">Sustituye este texto por el que tu quieras.</div>

<div class="one-fourth">Sustituye este texto por el que tu quieras.</div>

[/code]

Seis columnas

[code]

<div class="one-sixth first">Sustituye este texto por el que tu quieras.</div>

<div class="one-sixth">Sustituye este texto por el que tu quieras.</div>

[/code]
Así de simple ;)

Nota importante: el ‘markup HTML’ debe ser incluido desde el editor HTML de tu WordPress y no desde el editor visual.

¡Ahora te toca a ti!

Acuérdate de enviarnos tus comentarios sobre este y otros tutoriales a través de nuestro formulario de contacto.