Hola,

Buena pregunta, aquí va la explicación. Los blidgets son cajas, que en una página web intentan ocupar todo el espacio que pueden  a lo ancho y lo que necesitan en altura dependiendo del contenido de la caja.

Para hacer que un blidget quede al lado de otro como ti quieres sobre los artículos debes poner esos blidgets en la columna-7, esta columna esta justo sobre el listado de artículos. El problema es que los blidgets se van a posicionar uno sobre el otro, entonces:

¿Como hacer para que los blidgets esten uno al lado del otro?

Lo primero es darle ancho a esos blidgets, en tu dibujo veo que quieres poner 5 blidgets arriba de los artículos, creo que es mucho, piensa en que ancho debería tener cada blidget para que quepan 5 en el mismo ancho de un artículo. Para darle ancho a los blidgets hay dos maneras:

1. En el editor de tu sitio (tusitio.bligoo.com/editor) anda al tab "diseño", en esta pantalla puedes hacer click sobre un blidget y un rectángulo rojo englobará el objeto seleccionado, una vez que hayas seleccionado el blidget entero puedes modificar su ancho. El problema de esto es que cambiaras el ancho para todos los blidgets de tu sitio. 

2. Cambiando el ancho solo de los blidgets que esten sobre los artículos, para esto necesitas saber un poco de CSS. En el editor de tu sitio entras al tab CSS/HTML. A la izquierda veras una caja que dice Hojas de estilo y lista dos cosas, generated.css y base.css, haz click sobre base.css. A la derecha aparecerá el contenido de este archivo, y si haces esto en tu sitio http://canalcounter.bligoo.cl verás que yo ya agregue ahí un par de lineas, esas lineas dicen básicamente que todos los blidgets que tu agregues a la columna-7 (la que esta arriba del listado de artículos) tendrán  de ancho 110px (pixeles) y ademas flotarán a la izquierda (float:left). Además les agregue la propiedad background: #131313, esto hace que los blidgets tengan de fondo un color gris oscuro, solo para que veas que las dimensiones de las cajas.

¿Que significa que float:left?

Float:left es una propiedad que puede tener cualquier caja en una página web que hace que la siguiente caja en vez de aparecer abajo de ella lo haga a su lado izquierdo. Esto solo ocurre si el ancho de ambas cajas es menor al ancho de la caja que las contiene a ellas, en el caso de tu ejemplo, para que los blidgets estén uno a lado del otro deben ser menos anchos que la columna-7 que es la que los contiene.

Como prueba yo agregue en tu sitio dos blidgets de texto libre, sin nada, que están flotando uno al lado del otro, si quieres puedes agregar otros, incluso eliminar los que yo agregue, verás que se posicionan uno al lado del otro hasta que no quepan más, los siguientes aparecerán abajo y formarán una nueva fila de blidgets. 

Si quieres modificar el ancho de estos blidgets vuelve al paso 2 listado más arriba y cambia donde dice 110px por otro valor, por ejemplo 220px, y tendrás blidgets más anchos.

Espero se entienda como hacer esto, si tienes más dudas con respecto a esto pregunta aquí mismo y te seguiré contestando.

Saludos

-----------------

Franco Canepa - betta.bligoo.com

Equipo Bligoo.com

Alguna vez trate de hacer algo parecido, en un blidget poner varias imagenes pequeñas hacia el lado y después abajo (como una matriz 2x5), y que estas imagenes fueran botones, me llevaran a paginas interiores. Pero no pude ordenar las imagenes (todas del mismo tamaño), quedaban corridas..

eso se podrá hacer ahora? o hay algun modo de configurar para que quede ordenada la "matriz".

-----------------

Marcelo