Estructurando una entrada en columnas

Nuestro WordPress permite estructurar el texto en columnas mediante unos marcadores (shortcodes) similares a los usados para botones, presentación de diapositivas y otras estructuras. Es un mecanismo poco cómodo pero es a veces el único para estructurar correctamente una entrada o página.

 

Dividir en dos columnas

Hay que poner lo siguiente en la entrada o página. Los códigos en negrita literalmente:

figura 1: Estructura para dos mitades

figura 1: Estructura para dos mitades

Pinchar aquí para bajar plantilla con el código anterior para mitades.

Nota: one = un/una,  half=mitad, last=último/a

El código anterior da lugar a algo como lo siguiente:

 

texto y/o imágenes de la 1ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 

 

texto y/o imágenes de la 2ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 

 


Dividir en tres columnas

Una estructura similar permite dividir en tres columnas iguales:

Figura 2: Estructura para tres columnas iguales

Figura 2: Estructura para tres columnas iguales

Pinchar aquí para bajar una plantilla con el código anterior para tercios iguales.

Nota: one = un/una,  third=tercio, last=último/a

El código anterior da lugar a algo como lo siguiente:

texto y/o imágenes de la 1ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

texto y/o imágenes de la 2ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 

texto y/o imágenes de la 3ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 


A veces resulta conveniente juntar dos de las tres columnas, es decir tendremos dos tercios del espacio horizontal, se pone como two_third en código, seguido de last si es el último. Ponemos dos ejemplos:

Un tercio / dos tercios

El siguiente código genera dos columnas, la segunda del doble de ancho que la primera:

Figura 3: Estructura para 2 columnas, la primera 1/3 del ancho, la segunda 2/3

Figura 3: Estructura para 2 columnas, la primera 1/3 del ancho, la segunda 2/3

Pinchar aquí para bajar una plantilla para 1/3 –  2/3

Nota: one = un/una,  two=dos, third=tercio, last=último/a

El código anterior da lugar a algo como lo siguiente:

texto y/o imágenes de la 1ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

texto y/o imágenes de la 2ª columna de ancho doble: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 

Dos tercios / un tercio

De forma similar el siguiente código genera dos columnas, la primera del doble de ancho que la segunda:

Figura 4: Estructura para dos columnas: 2/3 del ancho la primera, 1/3 del ancho la segunda

Figura 4: Estructura para dos columnas: 2/3 del ancho la primera, 1/3 del ancho la segunda

Pincha aquí para bajar una plantilla para 2/3 – 1/3

Nota: one = un/una,  two=dos, third=tercio, last=último/a

El código anterior da lugar a algo como lo siguiente:

texto y/o imágenes de la 1ª columna de ancho doble: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

texto y/o imágenes de la 2ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 

Dividir en cuatro columnas

De forma similar se puede dividir el espacio en cuatro columnas, empleando una estructura donde se usan códigos con el término fourth( cuarto). Se pone el ejemplo de cuatro columnas iguales, pero de forma similar se puede agrupar dos o tres de ellas (two_fourth, three_fourth):

Figura 5: Código para división en cuatro columnas iguales

Figura 5: Código para división en cuatro columnas iguales

 

Pincha aquí para bajar un plantilla de cuatro columnas iguales.

El código anterior genera algo parecido a esto:

texto y/o imágenes de la 1ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

texto y/o imágenes de la 2ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

texto y/o imágenes de la 3ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

texto y/o imágenes de la 4ª columna: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

 

Responder