MEGA-GUA DE VISUAL COMPOSER: EL PLUGIN

QUE CAMBI WORDPRESS

Visual Composer es el plugin definitivo que ha revolucionado el modo
de disear pginas web con WordPress. Es una herramienta esencial
si quieres disear rpido y fcil y conseguir un resultado espectacular en
tus proyectos. Se trata de una verdadera maravilla y a lo largo de este
post te voy a explicar su funcionamiento.
Antes de la llegada de los plugins de maquetacin web como 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.
Ahora, con Visual Composer puedes construir una web rpidamente y con un resultado
profesional y grficamente muy atractivo. En el Curso de WordPress presencial y online
te enseamos a hacer una pgina web completa usando Visual Composer para disear
las secciones e insertar todo tipo de elementos como sliders, formularios, mapas, iconos,
efectos parallax, etc.
La posibilidad de poder insertar con un simple clic 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. A continuacin te enseo un ejemplo de
creacin rpida de 3 columnas con iconos animados y texto.

Cmo funciona Visual Composer?

Su funcionamiento es muy Mediante un editor visual Sers capaz de crear

sencillo e intuitivo. En maquetars tus contenidos diferentes retculas o
poco tiempo podrs como si estuvieras usando un estructuras de pgina e
disear pginas elegantes programa de maquetacin al insertar todo tipo de
y funcionales. uso. elementos en ellas.
Estos elementos vienen ya instalados con el plugin, aunque tambin puedes aadir
nuevas extensiones para ampliar la biblioteca de elementos de Visual Composer. Para
aadir un elemento haces clic en el icono + dentro del contenedor donde quieras
colocar el elemento y despus sobre el elemento concreto que quieras insertar. Adems,
puedes editarlos, duplicarlos o arrastrarlos de un contenedor a otro.

Con Visual Composer vas a poder dar a tus pginas un aspecto muy atractivo, funcional
y estructurado, similar a esos temas premium que los desarrolladores web ponen a la
venta en Themeforest, sin la obligacin de aprender cdigo HTML ni haber maquetado
nunca antes una pgina web. Y adems lo hars muy rpido.

Elementos que puedes insertar con Visual Composer

Visual Composer incluye una enorme biblioteca de elementos web

que van a servir para enriquecer tu 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 haces clic y ya lo tienes.

A continuacin te enumero un listado completo de los elementos que tienes disponibles

en Visual Composer y te explico su funcionamiento:
 Fila. Una fila es un contenedor horizontal en el que puedes
insertar contenido estructurado en columnas. Para escoger una
estructura determinada haz clic en el icono de lneas
horizontales situado en la parte superior izquierda del
elemento y escoge el nmero de columnas que quieras.
Cada fila o franja de Visual Composer se puede desplazar y cambiar de orden, borrar y
duplicar. En cada franja puedes elegir el color de fondo y otras caractersticas especiales
para cada una.
Text Block. Los Text Block son cajas de texto a los cuales
puedes dar formato mediante un editor sencillo similar al de
cualquier procesador de texto.
Separator. Lnea separadora a la que puedes dar el aspecto y
la anchura que quieras. Sirve para separar visualmente el
contenido y estructurar mejor el diseo.
Separator with text. Aade una lnea separadora con un texto
incluido. Te va a servir 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 puedes
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.

VER UN EJEMPLO

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.
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 clic 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.
VER UN EJEMPLO

Tour. Sirve para aadir una caja de contenido vertical que

clasificaremos en distintas pestaas, las cuales muestran dicho
contenido al hacer clic sobre ellas.
Accordion. Inserta una caja con franjas de contenido que
pueden desplegarse y mostrar ms contenido al hacer clic 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.
HTML Puro. Para los ms avanzados, este elemento permite
insertar cdigo HTML puro para realizar acciones que as lo
requieran.
JS 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.
VER UN EJEMPLO

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 mi blog y
editar algunos aspectos.
WP Calendar. Nos permite aadir un widget de calendario
que incluye enlaces a las diferentes fechas de publicacin de
las entradas de mi blog.
 WP Pages. Con este elemento podemos insertar en nuestra
pgina un widget que lista todas las pginas existentes en mi
sitio web de WordPress.
WP Tag Cloud. Para insertar en mi pgina web un listado en
forma de nube de tags con las etiquetas ms usadas en las
entradas de mi sitio.
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 nuestro sitio web, como un
widget de texto.
WP Recent Posts. Para mostrar en nuestro sitio web un
widget con los comentarios recientes que los visitantes han
realizado en nuestro blog.
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 de nuestro sitio.
WP RSS. Este elemento lo vamos a poder utilizar para colocar
en nuestro sitio web un widget de sindicacin RSS a nuestros
contenidos.

Ultimate Addons para Visual Composer

Es posible aumentar la biblioteca de elementos disponibles en Visual Composer.
Adquiriendo el pack de Ultimate Addons para Visual Composer en el sitio de Envato
podremos implementar una extensa biblioteca de mdulos adicionales para nuestras
pginas. Este es el listado de elementos que incluye el pack de Ultimate Addons:
Animation Block. Este elemento nos va a servir para aadir
fcilmente todo tipo de animaciones a cualquier otro elemento
de nuestro sitio.
 Advanced Button. Para crear botones de toda clase y con
mltiples opciones de personalizacin de estilo, colores,
tipografa, tamao, etc.
Advanced Carousel. Sirve para integrar los elementos que
queramos de nuestra web en una caja de estilo carrusel a la que
podemos dar efectos de animacin.
Countdown. Con este elemento aadimos un mdulo de
cuenta atrs que podemos configurar y personalizar en cuanto
a formatos de tiempo, colores, etc.
Flip Box. Inserta una caja animada con texto e icono. Tiene
muchas opciones de personalizacin: tipo de animacin, color,
tipografa, tamao, etc.
Google Map. Despliega un mapa de Google Maps altamente
personalizable en cuanto a tamao, estilo, controladores,
zoom, textos, etc
Google Trends. Inserta un grfico completo con los resultados
de Google Trends para unas palabras clave determinadas,
segn pases o en todo el mundo.
Headings. Este elemento agrega diversos tipos de headings o
encabezados con opciones de configuracin relativas a
tipografa, colores, separadores, etc.
Timeline. Es un timeline o lnea de tiempo con eventos o hitos
relevantes que podremos introducir y personalizar con iconos,
enlaces, tipografas, etc.
VER UN EJEMPLO

Icons. Nos permite agregar iconos que vamos a elegir de una

galera predeterminada y que podremos personalizar en cuanto
a tamao, color, fondo, animacin, etc.
Info Box. Aade una caja de informacin con icono que
podemos personalizar con diversos estilos, colores, tipografas,
efectos animados, etc.
Info Circle. Sirve para poner una caja de informacin circular
con icono que podemos configurar como en el caso del
elemento anterior.
Info List. Con este elemento vamos a poder conectar varios
bloques de texto en una sola lista y aadir iconos, personalizar
estilo y color, tamao de texto, etc.
Info Tables. Inserta tablas de informacin a las que podremos
asignar estilos de diseo predefinidos, colores, encabezados,
iconos, enlaces, etc.
VER UN EJEMPLO

Interactive Banner. Despliega un banner interactivo con una

imagen y un texto. Puedes elegir diversos estilos predefinidos,
colores, tipografas, etc.
Interactive Banner 2. Similar al elemento anterior. Inserta un
banner interactivo con una imagen y un texto, con posibilidad
de personalizar algunos estilos.
Just Icon. Para insertar un icono de la librera de iconos
predefinidos del plugin o desde la librera multimedia. Se
pueden aadir animaciones, estilos, colores, etc.
List Icon. Nos permite elegir y personalizar iconos de la
librera que viene predeterminada con el plugin para aadirlos
a elementos de una lista.
Modal Box. Inserta una caja predefinida de bootstrap a la que
podemos incluir un icono, textos, imagen, vdeo de Youtube o
Vimeo, botn, etc.
Price Box. Con este elemento se pueden crear cajas de precios
y elegir entre diversos diseos predefinidos y colores. Adems,
se puede colocar un botn con enlace.
VER UN EJEMPLO

Spacer Gap. Este elemento aade un espacio vaco vertical.

La diferencia con el empty space bsico es que podemos
definir la altura para cada dispositivo.
Counter. Se trata de un elemento de contador al que podemos
aadir iconos o imgenes de nuestra galera, tamaos, estilos,
animaciones, etc.

Swatch Book. Para insertar un elemento desplegable a modo

de muestrario con diferentes contenidos que podemos ver u
ocultar haciendo clic.

Extensiones all in one para Visual Composer

Aparte del anterior, existen otros packs para agregar elementos a la biblioteca, como
es el caso del pack de extensiones All in One para Visual Composer. A continuacin te
pongo un listado con los elementos que se pueden implementar con esta extensin:
Font Awesome Animation. Con este elemento podemos
aadir cajas de texto con iconos predefinidos a los que se
pueden asiganr una animacin predeterminada.
DA Gallery. Este elemento sirve para insertar una galera de
imgenes con efectos predefinidos cuando colocamos el
puntero sobre las imgenes.
Fluidbox. Para insertar una imagen con un ligero efecto
lightbox, de modo que al pinchar la imagen queda agrandada
en primer plano y alrededor un fondo suave.
App Mockup. Con este mdulo podremos insertar una galera
de imgenes en 3D con animacin que se abren en modo
lightbox al hacer clic sobre ellas.
Depth Modal. Aade un efecto animado de lightbox a
cualquier contenido y hace un efecto de alejamiento del fondo
mientras el contenido viene a un primer plano.
Scrolling Notification. Despliega una caja lateral al hacer
scroll vertical. Esta caja puede editarse en cuanto a estilo e
incluir contenido personalizado.
Masonry Gallery. Sirve para inluir una galera de imgenes
apiladas una sobre otras y con tamaos variables, las cuales se
abren en formato lightbox.
iHover. Para aadir efectos animados de hover, es decir,
efectos que se muestran cuando pasamos por encima de un
elemento con el puntero del ratn.
Profile Card. Sirve para desplegar un elemento predefinido
que muestra usuarios con foto e iconos de perfiles sociales.
Tambin puede aadirse una animacin.
Testimonial Carousel. Para incluir un mdulo con formato
carrusel que muestra testimonios y perfiles de los autores de
dichos testimonios.
Stack Gallery. Con este elemento se puede implementar una
galera animada de imgenes que simula un grupo de fotos
apiladas una encima de otra.
Figure Navigation. Para insertar un men de navegacin
cuyos elementos se despliegan de un modo muy visual
mostrando fotos, textos y botones.
Ribbon. Para aadir a las fotos un marco prediseado que
incluye un elemento ribbon o cinta sobre la que escribir un
texto. Adems, aade un pie de foto con texto.
Medium Gallery. Con este elemento podemos insertar
galeras de imgenes con diferentes estructuras de retcula que
se abren en modo lightbox de color claro.
Product Cover. Despliega una galera de imgenes con un
men inferior de navegacin formado por imgenes pequeas
o thumbnails.
Image with Arrow. Para colocar en nuestro sitio una imagen
con caja de texto explicativo que incluye un detalle grfico
triangular en forma de flecha.
Parallax. Con este elemento podemos aadir el tpico efecto
parallax de imagen de fondo con contenidos superpuestos a
modo de ventana.
Animate Button 01. Inserta un botn con efectos
predeterminados de animacin muy vistosos. Puede incluir un
icono animado sobre el botn.
HotSpot. Este elemento aade a una imagen diversos puntos
interactivos con icono y texto explicativo muy tiles para
realizar infografas
To Do List. Nos permite crear listados muy visuales de cosas
pendientes por hacer con iconos y textos, planes de precios con
botones, cajas con pestaas, etc.
Accordion. Cajas de contenido con efecto de acorden
desplegable y efectos interiores. Ms personalizables que el
elemento bsico de Visual Composer.
Tabs. Introduce una caja estilo pestaas que podemos
personalizar: colores, textos, fotos, iconos, etc. Mejora el
elemento bsico de pestaas de Visual Composer.
Carousel & Gallery. Nos permite insertar una galera de
imgenes estilo slider o carrusel, con navigacin inferior en
forma de thumbnails o imgenes pequeas.
Zoom or Magnify. Con este elemento podemos aadir
diversos efectos de zoom y ampliacin mediante un visor a las
imgenes que queramos.
Metro Carousel and Tile. Para crear diversos estilos de
slideshow o carrusel de imgenes, con diferentes tipos de
navegacin mediante botones, flechas, etc.
Draggable Timeline. Permite insertar lneas de tiempo o
timeline con diversos tipos de iconos y un marcador de
progreso que se puede deslizar a lo largo de la lnea.
Thumbnail with Caption. Aade una imagen con caja
adyacente de texto cuyo color y posicin podemos modificar,
insertar un botn, etc.
 Fullscreen Intro. Con este elemento aadimos una imagen a
tamao completo de pantalla a modo de intro que puede incluir
textos, iconos, efectos, etc.
Page Transition. Este elemento nos va a servir para aadir
diversos efectos predefinidos con espectaculares transiciones
entre las diferentes pginas del sitio.
Separator with Icon. Inserta una barra horizontal separadora
que podemos customizar a nuestra voluntad, aadirle iconos de
todo tipo, cambiar colores, etc.

Extensin de Visual Composer para copiar y

pegar franjas: VC Clipboard

Para copiar/pegar franjas o filas podemos adquirir la extensin VC Clipboard en la

web de Envato. Para copiar una franja colocamos el puntero en la zona superior derecha
de la franja, junto a los iconos de editar/duplicar/eliminar.
A continuacin, hacemos clic en copy y posteriormente en paste. Esta funcionalidad
resulta especialmente til para copiar y pegar franjas de una pgina a otra, pues la
funcin duplicar slo permita hacerlo dentro de una misma pgina.

Extensin de Visual Composer para deshacer

cambios: VC Undo/Redo

Con esta extensin aadimos la funcionalidad de Deshacer/Rehacer que resulta muy

til cuando queremos corregir cambios recientes realizados en nuestro Visual
Composer, tal como si estuviramos usando un software de edicin.
 Extensin de Visual Composer para
WooCommerce

El pack de WooCommerce para Visual Composer aade a la biblioteca de Visual

Composer una serie de elementos que van a servir para insertar con un solo clic los
shortcodes necesarios para crear una tienda online completa en WordPress.

Otras extensiones para Visual Composer

Se pueden adquirir ms extensiones de Visual Composer segn nuestras necesidades
especficas. En el apartado de Codecanyon dentro de la web de Envato tenemos
disponibles infinidad de addons o extensiones para aadir funcionalidades concretas a
nuestro men de elementos de Visual Composer.
Tambin puede suceder que haya temas que ya traigan incluidas algunas extensiones en
funcin de los plugins requeridos por el tema. Por ejemplo, un tema que traiga incluidos
los plugins Contact Form 7 y LayerSlider probablemente tendr disponibles sus
correspondientes elementos en Visual Composer para poder insertarlos fcilmente.
Entre otros, podemos encontrar los siguientes elementos:

Contact Form 7. Con este elemento podemos insertar en

nuestra pgina un formulario diseado previamente con el
plugin Contact Form 7.
LayerSlider. Este elemento sirve para implementar en nuestro
sitio web un slider que tengamos previamente hecho con el
plugin LayerSlider.
 Heading. Encabezados o ttulos jerarquizados mediante
etiquetas <h> de HTML. Sirven para escribir encabezados de
seccin o frases importantes. Claves para el SEO.
Shaped Image. Este elemento sirve para incluir una imagen
dentro de una forma predefinida a la cual podemos dar todo
tipo de efectos visuales.
Lead Paragraph. Con este elemento vamos a poder aadir un
prrafo de tipo lead o entradilla, ideal para escribir los
subttulos o prrafos iniciales.
Icono. Para aadir un icono predeterminado de la extensa
biblioteca de Font Awesome. Podemos asignarle adems el
tamao que queramos.
Featured Icon. Permite elegir una forma geomtrica
determinada y aadirle un icono de la librera. Adems,
podemos incluir un efecto de animacin y una sombra.
Feature. Este elemento es prcticamente igual que el anterior
pero incluye la posibilidad de aadirle un texto junto al icono
que hayamos insertado.
Blockquote. Permite aadir un texto determinado que
insertamos en forma de cita. Adems, podemos aadir un autor
de dicha cita o frase y una fuente.

Panel. Sirve para insertar un panel o caja con un estilo

predeterminado con un ttulo y un contenido que podemos
incluir en la edicin del elemento.
Alert. Con este elemento podemos implementar en nuestra
web una caja predeterminada de alerta y personalizarla segn
sea su funcin concreta.
Pricing Column. Sirve para aadir tablas de precios para
diferentes productos o servicios, con la posibilidad de editar
ttulos, textos descriptivos, botones y moneda.
Counter. Este elemento sirve para incluir en nuestra pgina un
contador numrico al que aadimos una cifra concreta para
que realice una simulacin de conteo.
Portfolio. Muestra un bloque de elementos o items de
portfolio divididos en diferentes columnas que podemos
especificar, as como la forma, filtrar por categoras, etc.
Staff List. Aade un listado de miembros de staff en columnas
que podemos definir y filtrar. Se pueden aadir formas
determinadas, iconos sociales, etc.
Featured Staff. Crea una seccin de staff para uno de los miembros. Podemos editar el
tamao de esta seccin, asignarle una forma determinada, iconos sociales, etc.
 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 clic 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.

Usa plantillas compatibles con Visual Composer

Con Visual Composer podrs disear pginas web avanzadas de manera rpida e
intuitiva. Resulta gratificante poder disear una web profesional en tan poco tiempo y
sin la necesidad de ser un experto en diseo web.
Es por ello que para nosotros Visual Composer es un plugin imprescindible, ya que ha
cambiado el modo de disear en WordPress y se ha convertido en un standard que te
permitir disear con las mejores plantillas.
Aprender Visual Composer permite a nuestros alumnos del curso de WordPress abordar
con garantas sus compromisos de diseo web tanto personales como profesionales y
obtener resultados sorprendentes.
 Conclusin: Por qu Visual Composer es un
Plugin imprescindible?

1. Es fcil de usar
2. Es profesional
3. Es econmico
4. Es rpido y eficaz
5. Es muy personalizable
6. Tiene buen servicio de soporte
7. Ofrece numerosas extensiones
8. Se ha convertido en un standard
9. Es compatible con muchsimos temas
10. Los contenidos son responsive (se adaptan bien a todos los dispositivos)