Conoce el pagebuilder Visual Composer para WordPress

Por | 2017-10-31T17:31:05+00:00 13/03/2017|WordPress|10 Comentarios

Los pagebuilders o editores drag and drop para WordPress supusieron un gran avance, ya que al pasar de la edición mediante shortcodes en el editor de WordPress a nuevos editores con nuevas funcionalidades que permiten crear contenido más visual sin conocimientos técnicos ni líos, se consiguió acercar WordPress aún más a los diseñadores, y esto en parte se lo debemos a Visual Composer.

Uno de los primeros pagebuilders o editores drag and drop que aparecieron fue Visual Composer, y actualmente sigue siendo el más utilizado del mercado por que el 90% del TOP 50 de themes para WordPress disponibles en ThemeForest llevan Visual Composer como editor para maquetar el sitio web y esto hace que la cuota de mercado de Visual Composer se dispare, aunque tiene competidores que lo persiguen como Thrive Content Builder, Siteorigen PageBuilder o Elementor PageBuilder.

visual composerEn este blog no es la primera vez que hablamos de este pagebuilder para WordPress, ya lo hemos hecho antes, ya que es un pagebuilder muy potente, y permite utilizar addons en formato plugin para WordPress con el fin de aumentar los elementos que podemos insertar usando el editor drag and drop: https://raiolanetworks.es/blog/5-addons-para-visual-composer-sobre-wordpress/

¿Por qué decimos que Visual Composer es el editor drag and drop o pagebuilder más usado? Pues por la simple razón de que en 2017, 1,5 millones de instalaciones de WordPress en el mundo utilizan Visual Composer y que themes tan conocidos como The7, Enfold o Avada llevan incluido este pagebuilder en la instalación predeterminada.

visual composerVisual Composer se ha ido actualizando desde que se publicó la primera versión en Mayo de 2011, actualmente no solo es uno de los pagebuilders para WordPress más potente, sino que es también el más flexible, aunque todavía no llega a hacer lo mismo que Elementor Pagebuilder: poder desinstalar el plugin que el diseño persista.

Visual Composer es un plugin Premium, es decir, debemos pagar una licencia por cada sitio web WordPress donde lo usemos, a no ser que nos venga directamente en el theme que instalemos en nuestro WordPress.
Es muy importante no “piratear” este tipo de plugins, ya que la instalación de plugins y themes nulled suele ser uno de los problemas mas comunes en casos de infecciones de malware en instalaciones de WordPress.

visual composer

Una vez hecha la presentación, vamos a hablar algo del plugin en cuestion, vamos a intentar explicar todos sus conceptos parte por parte.

 

Características de Visual Composer

Vamos a empezar mostrando y listando las funcionalidades de Visual Composer para WordPress.

  • Interfaz drag and drop tanto en el front-end como en el back-end de WordPress, utilizable tanto para paginas como posts, e incluso en custom-post como pueden ser los productos de WooCommerce.
  • Ampliable mediante plugins desarrollados por la comunidad, y dado que es un plugin muy utilizado y la comunidad es muy amplia, existen muchas formas de ampliar las funcionalidades y los elementos que se pueden usar con Visual Composer.
  • Se puede traducir mediante archivos PO y MO (al igual que la mayoría de plugins para WordPress) aunque ya trae bastantes idiomas disponibles para utilizar, las traducciones las realiza la comunidad.
  • Implementa un sistema de templates o librería que nos permite tanto guardar nuestros propios diseños hechos con el editor para usarlos más tarde, como utilizar diseños de la librería.
  • Es totalmente compatible con sitios responsive, es decir, todos los montajes y diseños realizados con Visual Composer son responsive, aunque también hay que decir que las características que aportan el “responsive” a Visual Composer son totalmente configurables.
  • La herramienta Shortcode Mapper nos permite “mapear” shortcodes para utilizarlos más tarde, shortcodes totalmente ajenos a Visual Composer, con parámetros incluidos.
  • Compatible con multilenguaje, con los plugins más utilizados para crear sitios web multiidioma: WPML, qTranslate, Polylang, etc…
  • WooCommerce es el plugin de comercio electrónico más utilizado (a pesar de que hay alternativas para ecommerce en WordPress) y por eso es totalmente compatible con WooCommerce y con sus funcionalidades.
  • Sistema configurable de filas y columnas para estructurar el contenido como nosotros necesitemos, usando además espacios y permitiendo definir tamaños.
  • Posibilidad de configurar fondo parallax para las filas y posibilidad de configurar un fondo de video (por ejemplo poniendo un video de Youtube de fondo).
  • Editor de imágenes básico pero con filtros aplicables al mostrar las imágenes y colocarlas en el editor drag and drop.
  • Incluye varios packs de iconos e iconos sociales para añadir a los diseños realizados con el editor.

De forma predeterminada, permite utilizar estos elementos en los diseños:

pagebuilder wordpressComo he dicho antes, con plugins y addons podemos conseguir más elementos para utilizar en el editor drag and drop.

 

Como utilizar Visual Composer

Visual Composer es un editor intuitivo, aun así, sí que tengo que admitir que existen alternativas mucho más fáciles de utilizar que Visual Composer, ya que tiene tantas funcionalidades que a veces puede ser complicado utilizar Visual Composer.

Para utilizar el editor drag and drop de Visual Composer simplemente debemos ir al editor de WordPress de una página o post (por poner un ejemplo):

pagebuilder wordpressPodremos ver dos botones, uno para abrir el “Frontend Editor” y otro para abrir el “Backend Editor”, estos dos botones estarán situados siempre en la misma posición en relación al editor de WordPress.

Si abrimos el “Backend Editor” el editor cambiara y podremos ver algo similar a esto en el panel de administración de WordPress:

pagebuilder wordpressY como ves el botón que antes ponía “Backend Editor” ahora pone “Classic Mode” para volver al editor nativo de WordPress.

Si abrimos el “Frontend Editor” nos llevara a la interfaz de nuestro sitio web y nos permitirá editar los bloques de contenido.

Personalmente siempre recomiendo el editor “Backend editor” ya que es mucho menos pesado en lo que a javascript se refiere, aunque entiendo que muchos diseñadores web prefieran el editor frontend ya que se puede ir viendo directamente como queda la web.

Todos los elementos que insertamos tienen su propia configuración que nos permite configurar los elementos para adaptarlos a lo que nosotros necesitamos:

pagebuilder wordpressAl mismo tiempo, las filas y las columnas también tienen su propia configuración:

pagebuilder wordpressComo puedes ver, todo lo que puedes insertar tiene una configuración avanzada, por lo que con Visual Composer podemos llegar a darle la apariencia que queramos a las paginas, tan solo debemos conocer perfectamente el editor.

 

Configuración de Visual Composer

Aunque es un plugin muy potente, casi no tiene configuración, ni tampoco es necesario configurar nada para empezar a trabajar con Visual Composer.

La configuración de Visual Composer se encuentra dentro del menú “Maquetador Visual” dentro del backend de WordPress:

pagebuilder wordpressDesde las pestañas de la sección de configuración podemos configurar en que tipos de contenidos queremos utilizar Visual Composer, de hecho, el plugin detectara los custom-post y podremos elegir si queremos utilizar Visual Composer en ellos o no.

Además, desde la sección de configuración también tendremos acceso al “Role Manager”, una sección que nos permite configurar que tipos de usuarios pueden utilizar el editor drag and drop.

pagebuilder wordpressIncluso también podemos configurar algunas partes del diseño general:

pagebuilder wordpressY en la sección de configuración también tendremos disponible la herramienta “Shortcode Mapper” que nos permite mapear shortcodes con parámetros preconfigurados:

pagebuilder wordpressComo puedes ver, la sección de configuración de Visual Composer es simple, no tiene demasiada configuración.

 

Addons para Visual Composer

Como he dicho anteriormente, Visual Composer es muy utilizado y por eso cada día existen más plugins que funcionan como addons y añaden más funcionalidades y elementos a Visual Composer.

No todos los plugins son packs de addons, existen plugins específicos para insertar algunos tipos de elementos en concreto, como por ejemplo los plugins que permiten crear tablas de precios avanzadas o secciones parallax con configuraciones especificas.

A continuación vamos a listar unos cuantos Addons para Visual Composer que te pueden interesar.

 

Ultimate Addons for Visual Composer

Ultimate Addons for Visual Composer es uno de los packs de addons más utilizados, de hecho es el que nosotros utilizamos en este sitio web (raiolanetworks.es).
Podemos destacar las siguientes funcionalidades interesantes en Ultimate Addons for Visual Composer:

  • Bloques animados con movimiento.
  • Botones animados avanzados.
  • Posibilidad de insertar gráficos.
  • Tablas de precios bastante buenas y visuales.
  • Un pack de iconos más amplio que el que trae Visual Composer.
  • Banners interactivos muy personalizables.
  • Zonas clickeables y personalizables.
  • Contadores de estadísticas.

En total, Ultimate Addons for Visual Composer añade 24 elementos adicionales y tiene un precio de 20 dolares en CodeCanyon.

En el siguiente vídeo puedes ver la presentación del plugin Ultimate Addons:

Puedes encontrar más información acerca de Ultimate Addons for Visual Composer en esta dirección URL: http://raiola.es/visualcomposerextensions

 

Visual Composer Extensions

Aunque Ultimate Addons for Visual Composer es más visual en lo que se refiere a configuración y parametrización de los elementos, Visual Composer Extensions añade muchos más elementos, en total añade más de 60 elementos.
Además Visual Composer Extensions también añade mucho más iconos de los que ya trae Visual Composer de forma nativa.

Esto es un ejemplo de elementos que añade Visual Composer Extensions:

  • Contadores de diferentes formas y configuraciones.
  • Timelines de diferentes tipos.
  • Tablas de precios avanzadas y visuales, diferentes a las nativas de Visual Composer.
  • Elementos de Google Docs y Google Drive.
  • Elementos de Google Charts.
  • Popups en cualquier página de WordPress.
  • Custom-posts personalizados.
  • Elementos para WooCommerce.
  • Elementos para bbPress.

Hasta un total de más de 60 elementos que añade Visual Composer Extensions a Visual Composer.

Puedes encontrar más información acerca de Visual Composer Extensions para WordPress en la siguiente dirección: http://raiola.es/visualcomposerextensions

 

Visual Composer Extensions All in One

Visual Composer Extensions All in One añade 36 elementos diferentes, además tiene la ventaja de ser elementos muy configurables de forma visual, como en el caso de Ultimate Addons for Visual Composer.

Algunos ejemplos de elementos añadidos por Visual Composer Extensions Addon All in One son estos:

  • Galerías interactivas con imágenes y diseños diferentes.
  • Cubos interactivos con imágenes u otros elementos.
  • Secciones completas parallax.
  • Botones animados interactivos.
  • Carruseles animados y dinámicos.
  • Listas de elementos.
  • GRIDs avanzados y personalizables.
  • Galerías multimedia avanzadas.

Puedes encontrar más información acerca de Visual Composer Extensions Addon All in One para WordPress en la siguiente URL: http://raiola.es/visualcomposerallinone

 

Orbit Visual Composer Addon

Orbit Visual Composer Addon añade 25 elementos más y utiliza Boostrap como base para los elementos, ya que los hace más adaptables a móviles más fácilmente.

Estos son algunos elementos de ejemplo que añade Orbit Visual Composer Addon:

  • Bloques con pestañas y contenido.
  • Botones avanzados con posibilidad de interactuar.
  • Posibilidad de insertar imágenes con bordes y filtros.
  • Tablas de precio con un diseño mejor y más configurable.
  • Listas de servicios y características animadas.
  • Cajas con mensajes animados.

Puedes encontrar más información acerca de Orbit Visual Composer Addon para WordPress en la siguiente dirección URL: http://raiola.es/orbitvisualcomposer

 

Kaswara Modern Visual Composer Addons

Kaswara es diferente a los packs de elementos en formato addon que hemos visto hasta el momento, ya que son elementos con un diseño completamente diferente.

Kaswara Modern Visual Composer Addons añade a Visual Composer 45 elementos con más de 550 opciones diferentes al aplicar sus configuraciones.

En el siguiente listado podemos encontrar ejemplos de elementos que añaden:

  • Tablas de precios muy configurables y adaptables.
  • Filtros para las imágenes.
  • Títulos configurables y responsive.
  • Botones avanzados y configurables.
  • Cajas con información muy personalizables.
  • Gestión de shortcodes y sus parámetros.
  • Sistema de plantillas y templates que complementa al nativo.

Además incluye un pack de addons mucho más completo que Visual Composer de forma nativa.

Puedes encontrar más información acerca de Kaswara Modern Visual Composer Addons para WordPress en la siguiente dirección URL: http://raiola.es/kaswara

 

Themes compatible con Visual Composer

Como he dicho, Visual Composer es el pagebuilder más utilizado y también el que suele tener más compatibilidad oficial por parte de los principales themes del mercado.

Como he dicho, si revisamos el TOP 50 de ThemeForest nos encontraremos que el 90% de los themes tienen compatibilidad oficial con Visual Composer y que además los propios themes modifican el comportamiento o añaden más elementos para completar los que ya trae de forma nativa.

pagebuilder wordpressComo ya he dicho antes, themes tan conocidos como The7, Avada o Enfold, utilizan este pagebuilder.
Puedes encontrar más información acerca de los themes compatibles con Visual Composer y al mismo tiempo los themes más populares para WordPress aquí: http://raiola.es/themeforestwordpress

[Total: 9 Promedio: 3.6]

About the autor:

Mi nombre es Alvaro Fontela, soy consultor Wordpress y blogger activo desde hace años. Co-Fundador de Raiola Networks, escribiendo sobre Wordpress en este blog día tras día.

Utilizamos cookies propias y de terceros para obtener información estadística, mostrar publicidad personalizada a través del análisis de tu navegación, así como para interactuar en redes sociales. Si continúas navegando, consideramos que aceptas nuestra Política de cookies. ACEPTAR

Aviso de cookies