Cómo hacer 5 columnas en Visual Composer ⚙

5 columnas en visual composer

Cómo hacer 5 columnas en Visual Composer ⚙

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!




No Comments

Post A Comment