Mega-Guía de Visual Composer: el plugin que cambió WordPress

Visual Composer es el plugin definitivo que ha revolucionado el modo de diseñar páginas web con WordPress. Es una herramienta esencial si quieres diseñar rápido y fácil 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 maquetación web como Visual Composer, las posibilidades de diseñar contenido visual en páginas de WordPress eran bastante limitadas. Para obtener un resultado profesional, un diseñador tenía que conocer código html y css o, como mínimo, estar familiarizado con el sistema de inserción de shortcodes.

Ahora, con Visual Composer puedes construir una web rápidamente y con un resultado profesional y gráficamente muy atractivo. En el Curso de WordPress presencial en Madrid y en el  Curso de WordPress Online te enseñamos a hacer una página web completa usando Visual Composer para diseñar las secciones e insertar todo tipo de elementos como sliders, formularios, mapas, iconos, efectos parallax, etc.

La posibilidad de poder insertar con un simple click todo tipo de elementos web y de crear diferentes estructuras de página convierte a Visual Composer en una joya en nuestro WordPress. Además, también puedes guardar plantillas para aplicarlas en otras páginas, o combinar diferentes plantillas. A continuación te enseño un ejemplo de creación rápida de 3 columnas con iconos animados y texto.

¿Cómo funciona Visual Composer?

Estos elementos vienen ya instalados con el plugin, aunque también puedes añadir nuevas extensiones para ampliar la biblioteca de elementos de Visual Composer. Para añadir un elemento haces click en el icono + dentro del contenedor donde quieras colocar el elemento y después sobre el elemento concreto que quieras insertar. Además, puedes editarlos, duplicarlos o arrastrarlos de un contenedor a otro.

Con Visual Composer vas a poder dar a tus páginas un aspecto muy atractivo, funcional y estructurado, similar a esos temas premium que los desarrolladores web ponen a la venta en Themeforest, sin la obligación de aprender código HTML ni haber maquetado nunca antes una página web. Y además lo harás muy rápido.

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 añadir un elemento de la lista simplemente haces click y ya lo tienes.

A continuación 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 click en el icono de líneas horizontales situado en la parte superior izquierda del elemento y escoge el número 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 característica 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. Línea separadora a la que puedes dar el aspecto y la anchura que quieras. Sirve para separar visualmente el contenido y estructurar mejor el diseño.

Separator with text. Añade una línea separadora con un texto incluido. Te va a servir para separar visualmente el contenido y estructurar mejor el diseño.

Message Box. Crea una caja con mensaje a la que se le puede asignar un estilo prediseñado y una animación que puedes elegir de una lista.

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

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 elección del tipo de letra de Google Fonts, color, interlineado, etc.

WP Buscar. Para insertar un campo de búsqueda dentro de nuestra web.  Podemos personalizar su estilo mediante añadiéndole una clase de CSS.

WP Meta. Este elemento nos va a servir para insertar automáticamente 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 añadir un widget de calendario que incluye enlaces a las diferentes fechas de publicación de las entradas de mi blog.

WP Pages. Con este elemento podemos insertar en nuestra página un widget que lista todas las páginas existentes en mi sitio web de WordPress.

WP Tag Cloud. Para insertar en mi página web un listado en forma de nube de tags con las etiquetas más usadas en las entradas de mi sitio.

WP Custom Menu. Con este elemento podemos insertar en un lugar determinado cualquiera de los menús que hayamos creado en Apariencia > Menús.

WP Text. Este elemento nos va a permitir insertar un texto determinado o un código 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 añadiremos en la zona que queramos un widget con los enlaces que tenemos en nuestra sección de Blogroll.

WP Categories. Este elemento nos va a servir para añadir donde queramos un widget con un listado de las categorías existentes en nuestro sitio.

WP Archives. Con el módulo 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 sindicación 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 módulos adicionales para nuestras páginas. Este es el listado de elementos que incluye el pack de Ultimate Addons:

Animation Block. Este elemento nos va a servir para añadir fácilmente todo tipo de animaciones a cualquier otro elemento de nuestro sitio.

Advanced Button. Para crear botones de toda clase y con múltiples opciones de personalización de estilo, colores, tipografía, tamaño, 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 animación.

Countdown. Con este elemento añadimos un módulo de cuenta atrás que podemos configurar y personalizar en cuanto a formatos de tiempo, colores, etc.

Spacer Gap. Este elemento añade un espacio vacío vertical. La diferencia con el empty space básico es que podemos definir la altura para cada dispositivo.

Counter. Se trata de un elemento de contador al que podemos añadir iconos o imágenes de nuestra galería, tamaños, estilos, animaciones, etc.

Swatch Book. Para insertar un elemento desplegable a modo de muestrario con diferentes contenidos que podemos ver u ocultar haciendo click.

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 continuación te pongo un listado con los elementos que se pueden implementar con esta extensión:

Font Awesome Animation. Con este elemento podemos añadir cajas de texto con iconos predefinidos a los que se pueden asiganr una animación predeterminada.

DA Gallery. Este elemento sirve para insertar una galería de imágenes con efectos predefinidos cuando colocamos el puntero sobre las imágenes.

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 módulo podremos insertar una galería de imágenes en 3D con animación que se abren en modo lightbox al hacer click sobre ellas.

Depth Modal. Añade 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 galería de imágenes apiladas una sobre otras y con tamaños variables, las cuales se abren en formato lightbox.

iHover. Para añadir efectos animados de hover, es decir, efectos que se muestran cuando pasamos por encima de un elemento con el puntero del ratón.

Profile Card. Sirve para desplegar un elemento predefinido que muestra usuarios con foto e iconos de perfiles sociales. También puede añadirse una animación.

Testimonial Carousel. Para incluir un módulo con formato carrusel que muestra testimonios y perfiles de los autores de dichos testimonios.

Stack Gallery. Con este elemento se puede implementar una galería animada de imágenes que simula un grupo de fotos apiladas una encima de otra.

Figure Navigation. Para insertar un menú de navegación cuyos elementos se despliegan de un modo muy visual mostrando fotos, textos y botones.

Ribbon. Para añadir a las fotos un marco prediseñado que incluye un elemento ribbon o cinta sobre la que escribir un texto. Además, añade un pie de foto con texto.

Medium Gallery. Con este elemento podemos insertar galerías de imágenes con diferentes estructuras de retícula que se abren en modo lightbox de color claro.

Product Cover. Despliega una galería de imágenes con un menú inferior de navegación formado por imágenes pequeñas o thumbnails.

Image with Arrow. Para colocar en nuestro sitio una imagen con caja de texto explicativo que incluye un detalle gráfico triangular en forma de flecha.

Parallax. Con este elemento podemos añadir el típico efecto parallax de imagen de fondo con contenidos superpuestos a modo de ventana.

Animate Button 01. Inserta un botón con efectos predeterminados de animación muy vistosos. Puede incluir un icono animado sobre el botón.

HotSpot. Este elemento añade a una imagen diversos puntos interactivos con icono y texto explicativo muy útiles para realizar infografías

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 pestañas, etc.

Accordion. Cajas de contenido con efecto de acordeón desplegable y efectos interiores. Más personalizables que el elemento básico de Visual Composer.

Tabs. Introduce una caja estilo pestañas que podemos personalizar: colores, textos, fotos, iconos, etc. Mejora el elemento básico de pestañas de Visual Composer.

Carousel & Gallery. Nos permite insertar una galería de imágenes estilo slider o carrusel, con navigación inferior en forma de thumbnails o imágenes pequeñas.

Zoom or Magnify. Con este elemento podemos añadir diversos efectos de zoom y ampliación mediante un visor a las imágenes que queramos.

Metro Carousel and Tile. Para crear diversos estilos de slideshow o carrusel de imágenes, con diferentes tipos de navegación mediante botones, flechas, etc.

Draggable Timeline. Permite insertar líneas de tiempo o timeline con diversos tipos de iconos y un marcador de progreso que se puede deslizar a lo largo de la línea.

Thumbnail with Caption. Añade una imagen con caja adyacente de texto cuyo color y posición podemos modificar, insertar un botón, etc.

Fullscreen Intro. Con este elemento añadimos una imagen a tamaño completo de pantalla a modo de intro que puede incluir textos, iconos, efectos, etc.

Page Transition. Este elemento nos va a servir para añadir diversos efectos predefinidos con espectaculares transiciones entre las diferentes páginas del sitio.

Separator with Icon. Inserta una barra horizontal separadora que podemos customizar a nuestra voluntad, añadirle iconos de todo tipo, cambiar colores, etc.

Curso de WordPress Online

Aprende WordPress y diseña tu propia Página Web al terminar el curso

32 horas + 18 horas de clases en directo

3 tutorías de 45 minutos con el profesor

6 clases en directo de 3 horas cada una

Tutorías grupales para avanzar los proyectos en equipo

Acceso al Área Privada de por vida

Precio: 400€

Extensión de Visual Composer para copiar y pegar franjas: VC Clipboard

Para copiar/pegar franjas o filas podemos adquirir la extensión 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 continuación, hacemos click en copy y posteriormente en paste. Esta funcionalidad resulta especialmente útil para copiar y pegar franjas de una página a otra, pues la función duplicar sólo permitía hacerlo dentro de una misma página.

Extensión de Visual Composer para deshacer cambios: VC Undo/Redo

Con esta extensión añadimos la funcionalidad de Deshacer/Rehacer que resulta muy útil cuando queremos corregir cambios recientes realizados en nuestro Visual Composer, tal como si estuviéramos usando un software de edición.

Extensión de Visual Composer para WooCommerce

El pack de WooCommerce para Visual Composer añade a la biblioteca de Visual Composer una serie de elementos que van a servir para insertar con un solo click los shortcodes necesarios para crear una tienda online completa en WordPress.

Otras extensiones para Visual Composer

Se pueden adquirir más extensiones de Visual Composer según nuestras necesidades específicas. En el apartado de Codecanyon dentro de la web de Envato tenemos disponibles infinidad de addons o extensiones para añadir funcionalidades concretas a nuestro menú de elementos de Visual Composer.

También puede suceder que haya temas que ya traigan incluidas algunas extensiones en función 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 fácilmente. Entre otros, podemos encontrar los siguientes elementos:

Contact Form 7. Con este elemento podemos insertar en nuestra página un formulario diseñado 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 títulos jerarquizados mediante etiquetas <h> de HTML. Sirven para escribir encabezados de sección 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 añadir un párrafo de tipo lead o entradilla, ideal para escribir los subtítulos o párrafos iniciales.

Icono. Para añadir un icono predeterminado de la extensa biblioteca de Font Awesome. Podemos asignarle además el tamaño que queramos.

Featured Icon. Permite elegir una forma geométrica determinada y añadirle un icono de la librería. Además, podemos incluir un efecto de animación y una sombra.

Feature. Este elemento es prácticamente igual que el anterior pero incluye la posibilidad de añadirle un texto junto al icono que hayamos insertado.

Blockquote. Permite añadir un texto determinado que insertamos en forma de cita. Además, podemos añadir un autor de dicha cita o frase y una fuente.

Panel. Sirve para insertar un panel o caja con un estilo predeterminado con un título y un contenido que podemos incluir en la edición del elemento.

Alert. Con este elemento podemos implementar en nuestra web una caja predeterminada de alerta y personalizarla según sea su función concreta.

Pricing Column. Sirve para añadir tablas de precios para diferentes productos o servicios, con la posibilidad de editar títulos, textos descriptivos, botones y moneda.

Counter. Este elemento sirve para incluir en nuestra página un contador numérico al que añadimos una cifra concreta para que realice una simulación 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 categorías, etc.

Staff List. Añade un listado de miembros de staff en columnas que podemos definir y filtrar. Se pueden añadir formas determinadas, iconos sociales, etc.

Featured Staff. Crea una sección de staff para uno de los miembros. Podemos editar el tamaño de esta sección, asignarle una forma determinada, iconos sociales, etc.

Cómo guardar una plantilla con Visual Composer

Visual Composer permite guardar como plantilla una página que estemos editando para posteriormente cargar su contenido en otra página diferente, ya sea una página nueva totalmente vacía o una página que estemos editando.

Además, podemos guardar diferentes páginas como plantillas y más adelante cargarlas en una página nueva, lo cual nos permite hacer combinaciones de diversas páginas en una única página. Para guardar nuestro contenido como plantilla hacemos click en el botón de guardar plantilla que se encuentra en el menú principal de Visual Composer, a la derecha del botón + de añadir elementos.

A continuación ponemos un nombre para nuestra plantilla y guardamos. Posteriormente, cuando queramos cargar esta plantilla en otra página diferente, iremos de nuevo a esta sección de plantillas y cargaremos la que queramos.

Usa plantillas compatibles con Visual Composer

Con Visual Composer podrás diseñar páginas web avanzadas de manera rápida e intuitiva. Resulta gratificante poder diseñar una web profesional en tan poco tiempo y sin la necesidad de ser un experto en diseño web.

Es por ello que para nosotros Visual Composer es un plugin imprescindible, ya que ha cambiado el modo de diseñar en WordPress y se ha convertido en un standard que te permitirá diseñar con las mejores plantillas. Además, puedes complementar este excelente plugin con otros más que te listamos en nuestro artículo de Los plugins de WordPress que utilizan los mejores blogs de Marketing. Con ellos vas a mejorar aún más tu sitio web.

Aprender Visual Composer permite a nuestros alumnos del curso de WordPress presencial y online abordar con garantías sus compromisos de diseño web tanto personales como profesionales y obtener resultados sorprendentes.

Conclusión: ¿Por qué Visual Composer es un Plugin imprescindible?

1. Es fácil de usar
2. Es profesional
3. Es económico
4. Es rápido 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 muchísimos temas
10. Los contenidos son responsive (se adaptan bien a todos los dispositivos)

¿Y tú? ¿Conocías ya el plugin Visual Composer? ¿Lo has usado en algún proyecto web? Ya sabes que puedes consultarnos dudas y compartir tus experiencias. Nos encantará leer tus comentarios.