Gua de Visual Composer

Que es Visual Composer

Aunque WordPress es un gestor de contenidos muy potente, uno de sus puntos flacos es sin
duda la maquetacin de pginas dentro del propio editor visual. Aunque los shortcodes facilitan la tarea
de aadir elementos interactivos a tus contenidos, muchas veces resulta una tarea bastante laboriosa.
Visual Composer es un Plug-in premium creado por WPBakery, pensado para ayudar a
maquetar pginas a nivel avanzado de forma rpida y sencilla. Visual Composer ha revolucionado el
modo de disear pginas web con WordPress. Es una herramienta esencial si se quiere disear rpido y
fcil y conseguir un resultado espectacular en los proyectos. El Plug-in en cuestin, hace uso de los
shortcodes dentro de WordPress para crear contenidos especiales, y los esconde detrs de una atractiva
interfaz con la que se puede trabajar mucho ms fcilmente.
Antes de la llegada Visual Composer, las posibilidades de disear contenido visual en pginas
de WordPress eran bastante limitadas. Para obtener un resultado profesional, un diseador tena que
conocer cdigo html y css, o como mnimo, estar familiarizado con el sistema de insercin de
shortcodes.
Con Visual Composer se podr dar a las pginas un aspecto muy atractivo, funcional y
estructurado, con un resultado profesional y grficamente muy atractivo, sin la obligacin de aprender
cdigo HTML ni haber maquetado nunca antes una pgina web.
La posibilidad de poder insertar con un simple click todo tipo de elementos web y de crear
diferentes estructuras de pgina convierte a Visual Composer en una joya en nuestro WordPress.
Adems, tambin puedes guardar plantillas para aplicarlas en otras pginas, o combinar diferentes
plantillas.
Gracias a esto, es posible crear contenidos increbles sin tener que lidiar con los shortcodes de
forma manual, lo que hace que todo el proceso sea mucho ms llevadero y sencillo sin tener
conocimientos de programacin.
Visual Composer es una verdadera maravilla y a lo largo de este manual se va a explicar su
funcionamiento.

Cmo funciona Visual Composer?

Su funcionamiento es muy sencillo e intuitivo. Se puede disear pginas elegantes y
funcionales. Mediante un editor visual se puede maquetar contenidos de forma profesional. Se podr
crear diferentes retculas o estructuras de pgina e insertar todo tipo de elementos en ellas.
Una vez instalado el Plug-in, se ver que al editar o crear pginas aparece una seccin azul justo
Miguel Moyetones

encima del editor visual. Aqu se puede elegir entre utilizar el editor del backend (es decir, la zona de
administracin) o el frontend (la parte pblica de tu sitio web).

Visual Composer permite maquetar las pginas en cualquiera de los dos modos, de forma que si
se quiere ver cmo lucirn realmente los contenidos puedes hacerlo utilizando el editor del front-end.

Creando filas y columnas

Todos los contenidos que se creen utilizando Visual Composer estn separados por filas, y cada
una de ellas se puede configurar para tener cualquier nmero de columnas, en muchas configuraciones
distintas. Por ejemplo, se puede elegir tener 3 columnas repartidas equitativamente, o bien tener slo
dos columnas estructuradas como si se tuviera un contenido con barra lateral.

Si la estructura de columnas que se busca no est entre la lista, tambin se puede hacer uso de
una configuracin ms personalizada introduciendo textualmente la forma en que se prefiere que
aparezcan.

Aadiendo elementos
Dentro de cada columna, se puede aadir cualquier nmero de elementos para crear pginas.
Visual Composer ofrece una gran coleccin de estos elementos para que se pueda crear casi cualquier
tipo de pgina, entre los cuales se incluyen botones, pestaas, acordeones, botones social media, y
mucho ms.
Miguel Moyetones

Por defecto, el Plug-in trae ms de 30 elementos diferentes, y da la posibilidad de aadir incluso

algunos de los Widgets de WordPress para crear barras laterales sin apenas esfuerzo.

Estos elementos vienen ya instalados con el Plug-in, aunque tambin se puede aadir nuevas
extensiones para ampliar la biblioteca de elementos de Visual Composer. Para aadir un elemento se
hace click en el icono + dentro del contenedor donde se quiere colocar el elemento y despus sobre el
elemento concreto que se quiere insertar. Adems, se puede editar, duplicar o arrastrar de un contenedor
a otro.

Miguel Moyetones

Elementos que puedes insertar con Visual Composer

Visual Composer incluye una enorme biblioteca de elementos web que van a servir para
enriquecer la web y dotarla de numerosas funcionalidades. Los elementos aparecen listados en una
interfaz como la que ves abajo. Esta interfaz de elementos se despliega pulsando en el icono +. Para
aadir un elemento de la lista simplemente se hace click y listo.

Segn se va aadiendo elementos al diseo, se puede arrastrar de un lado a otro para reordenar
los contenidos sin apenas esfuerzo. Tambin es posible clonarlos, ahorrando tiempo cuando se necesite
crear varios elementos muy similares.
Lo mejor de todo esto es que Visual Composer se puede integrar con otros plugins gracias a su
API, pudiendo aadir elementos nuevos a esta coleccin. Algunos de los temas premium ms populares
en Themeforest aprovechan esto para incluir shortcodes nuevos y ms modernos, con lo que las
posibilidades son infinitas.
A continuacin enumeramos un listado completo de los elementos que se tiene disponibles en
Visual Composer y explicamos su funcionamiento:
Fila. Una fila es un contenedor horizontal en el que se puede insertar
contenido estructurado en columnas. Para escoger una estructura
determinada se hace click en el icono de lneas horizontales situado en la
parte superior izquierda del elemento y se escoge el nmero de columnas
que se requiere. Cada fila o franja de Visual Composer se puede desplazar y
cambiar de orden, borrar y duplicar. En cada franja se puede elegir el color
de fondo y otras caracterstica especiales para cada una.
Miguel Moyetones

Text Block. Los Text Block son cajas de texto a los cuales se puede dar
formato mediante un editor sencillo similar al de cualquier procesador de
texto.
Separator. Lnea separadora a la que se puede dar el aspecto y la anchura
que se quiere. Sirve para separar visualmente el contenido y estructurar
mejor el diseo.
Separator with text. Aade una lnea separadora con un texto incluido;
sirve para separar visualmente el contenido y estructurar mejor el diseo.
Message Box. Crea una caja con mensaje a la que se le puede asignar un
estilo prediseado y una animacin que puede elegir de una lista.

Facebook Like. Crea una caja tpica de Facebook para que los usuarios
puedan dar un Me Gusta y el enlace sea visible en su propio perfil.

Tweetmeme Button. Muestra un botn de Twittear para que los usuarios

puedan hacer un tweet con el contenido de la pgina o post. Incluye cifra de
tweets totales.
Google+ Button. Despliega un botn de Google Plus para que los usuarios
puedan recomendar el contenido en esta red social perteneciente a Google.

Pinterest Button. Muestra un botn de Pinterest para que los visitantes

puedan pinear el contenido y colocarlo en unos de sus muros de Pinterest.

Preguntas Frecuentes. Aade una caja de FAQ o preguntas frecuentes que

podemos personalizar, aadirle una animacin predefinida, etc.

Miguel Moyetones

Single Image. Para insertar una imagen de la librera multimedia o subida

desde el ordenador. Podemos darle tamao y alineacin, adems de un
enlace.

Image Gallery. Aade una galera de imgenes que vamos a cargar desde
nuestra librera multimedia o el ordenador. Podemos editar el formato de la
galera.

Image Carousel. Para insertar un carrusel animado de imgenes desde

nuestra librera multimedia o subidas desde nuestro propio ordenador.

Pestaas. Aade una caja con diversas pestaas que permiten navegar entre
diferentes contenidos haciendo click en cada una de ellas.

Barra adicional con widgets. Este elemento nos va a servir para crear una
zona adicional en la que podemos insertar todo tipo de widgets.

Botn. Para insertar un botn que elegimos de entre una serie de estilos
predeterminados. Tambin podemos aadirle un icono de la biblioteca de
iconos.
Botn 2. Muy parecido al anterior, con la ventaja de que podemos elegir
entre ms opciones de estilos predefinidos y aadir color y tamao.

Tour. Sirve para aadir una caja de contenido vertical que clasificaremos en
distintas pestaas, las cuales muestran dicho contenido al hacer click sobre
ellas.

Miguel Moyetones

Accordion. Inserta una caja con franjas de contenido que pueden

desplegarse y mostrar ms contenido al hacer click en cada una de ellas.

Entradas recientes. Este elemento sirve para aadir entradas recientes que
hayamos publicado y filtrarlas por categoras determinadas.

Call to Action Button. Inserta un llamativo botn call to action o llamada a

la accin que podemos personalizar, cambiarle el color, aadir una
animacin, etc.
Call to Action Button 2. Este elemento nos va a servir para aadir un
botn Call to Action muy similar al anterior y que podemos personalizar de
diversos modos.
Video Player. Permite insertar un reproductor con un vdeo de Youtube o
Vimeo. Para aadirlo, simplemente introducimos la URL del vdeo.

Google Map. Muestra un mapa con la direccin que insertemos mediante

un cdigo iframe que extraemos directamente en Google Maps. Es posible
editar la altura.
|
Blog Carousel. Este elemento muestra artculos o entradas del blog en
forma de carrusel animado que podemos filtrar por categoras
determinadas.
Post Slider. Muestra un slider con artculos o entradas del blog en forma de
carrusel animado que podemos filtrar por categoras determinadas.

Puro. Para los ms avanzados, este elemento permite insertar cdigo

HTML puro para realizar acciones que as lo requieran.

Miguel Moyetones

Puro. Al igual que el anterior, este elemento avanzado nos va a servir para
implementar directamente cdigo puro en nuestra pgina, en este caso
Javascript.
Widget de Flickr. Con este elemento podrs aadir un widget con fotos de
tu cuenta de Flickr y editar diversos aspectos relacionados con el modo de
mostrarlas.
Barra de Progreso. Inserta una barra de progreso con un porcentaje. A la
barra podemos asignarle estilos y animaciones predefinidas.

Pie Chart. Con el elemento Pie Chart vamos a poder insertar un cuadro en
forma circular que muestra diferentes porcentajes de manera proporcional.

Empty Space. Es un espacio en blanco al que podemos dar una altura.

Esencial para separar verticalmente los diferentes bloques de contenido y
dar aire a la web.
Custom Heading. Como el anterior, pero con mayor cantidad de opciones,
como la eleccin del tipo de letra de Google Fonts, color, interlineado, etc.

WP Buscar. Para insertar un campo de bsqueda dentro de nuestra web.

Podemos personalizar su estilo mediante aadindole una clase de CSS.

WP Meta. Este elemento nos va a servir para insertar automticamente

diversos botones de log in, log out, admin, feed y enlaces de WordPress.

WP Recent Comments. Con este elemento podemos incluir un widget de

Comentarios Recientes realizados en el Site y editar algunos aspectos.

Miguel Moyetones

WP Calendar. Nos permite aadir un widget de calendario que incluye

enlaces a las diferentes fechas de publicacin de las entradas de sitio Web.

WP Pages. Con este elemento podemos insertar en nuestra pgina un

widget que lista todas las pginas existentes en el sitio Web de WordPress.

WP Tag Cloud. Para insertar en la pgina web un listado en forma de nube

de tags con las etiquetas ms usadas en las entradas del sitio Web.

WP Custom Menu. Con este elemento podemos insertar en un lugar

determinado cualquiera de los mens que hayamos creado en Apariencia >
Mens.
WP Text. Este elemento nos va a permitir insertar un texto determinado o
un cdigo HTML en el sitio Web, como un widget de texto.

WP Recent Posts. Para mostrar en el sitio Web un widget con los

comentarios recientes que los visitantes han realizado en la Web.

WP Links. Con este elemento aadiremos en la zona que queramos un

widget con los enlaces que tenemos en nuestra seccin de Blogroll.

WP Categories. Este elemento nos va a servir para aadir donde queramos

un widget con un listado de las categoras existentes en nuestro sitio.

WP Archives. Con el mdulo WP Archives, al igual que en los casos

anteriores, podemos mostrar un widget que contiene un listado con los
archivos del sitio Web.

Miguel Moyetones

WP RSS. Este elemento lo vamos a poder utilizar para colocar en el sitio

Web un widget de sindicacin RSS a nuestros contenidos.

Creando plantillas
Si se desea, Tambien es posible guardar una pgina como plantilla para reutilizarla ms
adelante. Las plantillas son una forma excelente de ahorrar tiempo, ya que se tiende a repetir los
mismos contenidos una y otra vez en diferentes pginas se puede aprovechar al crearlas slo una vez.

Cmo guardar una plantilla con Visual Composer

Visual Composer permite guardar como plantilla una pgina que estemos editando para
posteriormente cargar su contenido en otra pgina diferente, ya sea una pgina nueva totalmente vaca
o una pgina que estemos editando.
Adems, podemos guardar diferentes pginas como plantillas y ms adelante cargarlas en una
pgina nueva, lo cual nos permite hacer combinaciones de diversas pginas en una nica pgina.
Para guardar nuestro contenido como plantilla hacemos click en el botn de guardar plantilla
que se encuentra en el men principal de Visual Composer, a la derecha del botn + de aadir
elementos.

A continuacin ponemos un nombre para nuestra plantilla y guardamos. Posteriormente, cuando

queramos cargar esta plantilla en otra pgina diferente, iremos de nuevo a esta seccin de plantillas y
cargaremos la que queramos.

Miguel Moyetones

Videos Tutoriales:
https://www.youtube.com/watch?v=tgIbACXXcLc
https://www.youtube.com/watch?v=HndBx3cTpaA

Miguel Moyetones