Manual de Visual Composer (Parte 1)

Manual de Visual Composer (Parte 1)

Visual Composer es un plugin muy útil para Wordpress, que nos ayuda a maquetar el contenido de nuestra página de una forma rápida y visual, lo que le convierte en el complemento ideal para todos aquellos usuarios que no tienen muchos conocimientos de desarrollo web.


Y es que antes de la llegada de este plugin, componer una página de Wordpress era una odisea para mucha gente, ya que implicaba conocer HTML y CSS para colocar y dar estilo a todos los elementos que queríamos añadir, aunque en los últimos tiempos se intentó solucionar parte de este problema con plugins que añadían atajos o “shortcodes” para automatizar muchas funciones, como la creación de columnas, por ejemplo. Sin embargo, tenían muchas limitaciones y seguíamos necesitando tirar de código para la gran mayoría de las cosas.


En la actualidad, gracias a Visual Composer y la madurez que ha alcanzado en a lo largo de todas sus actualizaciones, ya podemos crear una página fantástica en cuestión de minutos y sin saber absolutamente nada de código aunque, obviamente, cuanto mejor sea nuestra capacidad para programar, más provecho sacaremos a todas sus opciones.


¿Cómo usar Visual Composer?


Visual Composer es un plugin muy útil para Wordpress, que nos ayuda a maquetar el contenido de nuestra página de una forma rápida y visual, lo que le convierte en el complemento ideal para todos aquellos usuarios que no tienen muchos conocimientos de desarrollo web.


Gracias a que todos los elementos necesarios para usar este plugin ya vienen incluidos en él, usarlo es muy sencillo: sólo tienes que añadirlos desde su menú y arrastrarlos a su lugar en la página.


Pero empecemos por el principio: Visual Composer trabaja en base a una cuadrícula que nosotros vamos creando, añadiendo filas y dividiendo cada una de ellas en cuantas columnas queramos (no tienen por qué ser todas iguales, sino que cada fila puede tener el número de columnas que mejor nos convenga).


Para comenzar nuestra página, de hecho, lo primero de todo es añadir una fila haciendo click en el botón de Añadir elemento y seleccionando “Fila”. Esto nos creará nuestro primer contenedor, donde podremos añadir elementos como imágenes o texto. Ahora fíjate en su esquina superior derecha: verás varios botones pero siempre se repite el mismo esquema (incluso en los elementos de contenido, aunque en este caso, el menú aparecerá en verde al pasar el ratón por encima de ellos).


El lápiz nos dejará editar ese elemento (añadir o quitar contenido, su configuración, fondo, márgenes, padding,…), mientras que las hojas nos permitirá duplicarlo por si queremos aprovechar su configuración para un elemento similar en el que sólo cambie el contenido. Por último, el cubo de basura eliminará ese elemento o fila.


A continuación, os dejamos una lista con todos los elementos que podéis encontrar dentro de Visual Composer para usar en vuestra página:


Bloque de texto: Nos permiten incluir cualquier tipo de texto que queramos gracias a su editor (igual que el que aparece en Wordpress por defecto).


Separador: Es una línea que podemos usar para separar partes del contenido de forma elegante. Podemos darle el estilo que queramos editando su color y anchura.


Texto con separador: Similar al separador anterior pero añadiendo un texto que puede actuar como título de sección.


Caja de mensaje: Nos permite añadir una caja para informar de algo.


Facebook: Añade un botón de Me Gusta para que los usuarios compartan el contenido en su muro.


Twitter: Añade un botón para twittear nuestro contenido en el perfil del usuario.


Google+: Al igual que los anteriores, añade un botón para compartir el contenido en el perfil del usuario.


Pinterest: Sigue siendo muy parecido a los anteriores pero en este tomará mayor importancia la imagen, así que aseguraos de que tenéis una imagen destacada adecuada.


Preguntas Frecuentes: Incluye contenedores para escribir nuestro contenido de una forma ordenada y muy atractiva.


Imagen única: Uno de los bloques fundamentales ya que nos sirve para incluir una imagen en nuestra página.


Galería de imágenes: En caso de que queramos añadir varias imágenes a la vez, éste es nuestro bloque.


Carrusel de imágenes: Además de la galería anterior, también podemos colocar nuestras imágenes y mostrarlas como un carrusel que las va pasando. Aporta dinamismo a la página, aunque penaliza un poco no poder verlas todas de una vez.


Pestañas: Nos ayudan a colocar gran cantidad de contenido sin hacerlo visible de una vez para el usuario. Podemos insertar pestañas horizontales o verticales (ver siguiente).


Tour. Igual que las pestañas anteriores pero las coloca en vertical.


Barra adicional con widgets: Recrea una zona en la que mostrar widgets pero dentro del contenido de la página.


Botón: Como su propio nombre indica, añadiremos un botón del cual podemos elegir su estilo y su destino.


Acordeón: Muy similar a las Preguntas Frecuentes pero con una disposición en panel.


Post Grid y Post Masonry Grid: Estos elementos nos incluirán las entradas o páginas que le indiquemos en el hueco donde lo coloquemos.


Media Grid y Media Masonry Grid: Estos elementos nos incluirán las imágenes que le indiquemos en el hueco donde lo coloquemos.


Call to Action: Incorpora una caja de color con una llamada a la acción.


Video Player: Nos deja insertar un vídeo Youtube o Vimeo. Para ello, únicamente tendremos que pegar su URL. 


Estos sólo son algunos de los bloques que podemos encontrar en nuestro Visual Composer. En las siguientes entregas de este manual, os mostraremos los que nos faltan y os daremos algunos trucos para sacarle todo el provecho a este plugin.

Comparte este post:

Deja un Comentario