Muchas veces, por el diseño web pactado con el cliente nos hemos visto con la necesidad de crear 5 columnas en visual composer. Quedan muy bonitas, pero puede ser un problema si no sabemos cómo hacerlas.

Por eso, te traemos hoy un breve artículo de cómo crear 5 columnas en visual composer tanto en ordenador como en el móvil. ¡Compartir es vivir y a nosotros nos encanta!

Allá vamos.




5 columnas en visual composer en desktop y mobile

Crear 5 columnas en visual composer tiene muchas variables y nosotros vamos a enseñarte un par de ellas.

Visual Composer trabaja con múltiplos de 12, es decir:

  • Para dos columnas puedes poner: 1/2  + 1/2
  • Si quieres 3 columnas: 1/3 + 1/3 + 1/3 
  • Para 6 columnas: 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 
  • Dos columnas, pero una de ellas más grande: 1/4 + 3/4 
  • Para hacer 3 columnas, y la de la izquierda más grande: 4/6 + 1/6+ 1/6

Y así sucesivamente, todas las variables que quieras para el diseño de tu página web.

Sin embargo, si nos hemos visto obligados a crear 5 columnas no lo hemos tenido fácil, pero hay soluciones:

3 maneras fáciles de hacer 5 columnas con #VisualComposer.

La forma fácil: 5 columnas en visual composer sin HTML


Nos vamos a una de nuestras páginas, imaginad que queremos centrar y alinear estos 5 iconos de nuestras redes sociales en nuestra página web.

La forma más sencilla para crear 5 columnas en visual composer es ir a nuestra página y añadir una fila.

En nuestra fila, vamos a las opciones de fila y añadimos la siguiente configuración:

 

5 columnas visual composer

1/12 + 2/12 + 2/12 + 2/12 + 2/12 + 2/12 + 1/12

 

De esta manera, nuestros iconos quedan centrados en la página web y perfectamente alineados.

 

Visual composer 5 columnas

 

5 columnas en Visual Composer con CSS


Ahora bien, hoy otra manera de hacer esto en Visual Composer, una manera que al principio puede ser algo laboriosa, pero luego es automática:

Creamos una fila en nuestra página, y le añadimos en las opción de la fila esta clase extra: five-columns.

Ahora añadimos en nuestra fila la configuración de dividirla en 6. De esta forma, nos queda algo parecido a esto:

 

VC columnas

 

Añadimos contenido en las filas dejando la de la derecha sin contenido.

 

Visual composer en 5 columnas

 

Para el siguiente paso, debes de guardar tu página o bien, actualizarla, así verás los cambios que hemos realizado.

Dirígete ahora, a Apariencia > Editor > Custom CSS. Aquí, deberás de añadir lo siguiente:

Visual Composer 5 columnas

@media screen and (min-width: 768px) {
.five-columns.vc_row .vc_col-sm-2 {
float: left;
width: 18.5%;
padding: 0;
margin-right: 1.5%;
min-height: 0;
}

.five-columns.vc_row .vc_col-sm-2:nth-last-child(2) {
margin-right: 0;
}
}

Con esto, lo que estamos haciendo es que nuestras columnas de 6 creadas cojan ese tipo de formato y visualmente quedan 5 columnas perfectamente centradas.

Et voilá!

Visual Composer 5 columnas

 

Ahora, cada vez que quieras tener 5 columnas en alguna de tus páginas, tan solo debes de añadir la clase extra “five-columns” y se configurará según el CSS añadido.




5 columnas en Visual Composer manualmente


Ahora bien, desde que está WPBakery Page Builder, podemos crear 5 columnas muy fácilmente, customizando el número de columnas. Es decir, podemos añadir:

Visual Composer 5 columnas

1/6+ 1/6+ 1/6+ 1/6+ 1/6 

 

De esta forma, y si has sido avispado, hemos creado solo 5 columnas. Al darle a actualizar, tendremos algo parecido a esto.

 

Visual Composer columnas 5

 

Para que nuestras columnas se centren deberemos ir a las opciones de la primera columna de la izquierda y cambiar las opciones Responsive > el desfase en cada uno de los dispositivos a 1 columna.

 

Visual composer 5 columnas

 

¡Ojo! Si quieres que tus 5 columnas se mantengan en el móvil, deberás de ajustar en las opciones responsive > el ancho del móvil, es decir: 1/6  (2 columnas)

Visual Composer móvil 5 columnas

Esto va a gusto de todos, si tienes texto en tus columnas, tal vez quede poco visual y algo desastroso.

Como ves, crear 5 columnas en Visual Composer es muy sencillo pero si no sabes muy bien que hacer, puede ser un verdadero quebradero de cabeza.

¡Esperamos que te haya sido de utilidad, Rabbit!