Guía de Visual Composer: el page builder con el que se siguen creando asombrosas webs en WordPress

Visual Composer es el plugin page builder que sigue haciendo maravillas en WordPress. Y es que cuando hablamos de WPBakery Visual Composer, nos referimos al rey de los constructores que se ha hecho más fuerte gracias a la gran competencia existente en el campo de los maquetadores visuales.

WordPress y Visual Composer llevan años caminando de la mano y aunque siga recibiendo críticas sobre sus  leves deficiencias en la velocidad de carga web, ¿puede ser que Visual Composer solamente reciba críticas porque es simplemente el mejor maquetador visual en WordPress? ¿O puede que sea porque como pasa con otros programas o herramientas los programas de afiliados alejan a los usuarios de la realidad?

Actualmente existen una gran multitud de maquetadores visuales para crear webs en WordPress. Por ejemplo Page Builder by SiteOrigin, Elementor, Thrive Content Builder, Divi Builder, etc. Y como no, Visual Composer, un page builder que lleva años aguantando en la cresta de la ola.

Visual Composer es mucho más que los elementos que incorpora por defecto o las extensiones que se pueden adquirir para potenciarlo aún más.

Imaginemos dos simples aspectos que nos ayudarán a entender perfectamente el potencial de este plugin constructor de webs:

• La gran mayoría de temas que puedes comprar para crear una web WordPress traen incorporado Visual Composer por lo que están maquetadas en base a este plugin.
• Visual Composer ofrece un montón de alternativas de visualización para diferentes dispositivos, así como la seguridad de que podrás crear casi cualquier diseño que necesites. No hay modificación que se le resista.

¿Puede incorporar Visual Composer más extensiones que las suyas propias?

Claro que si. Ya sabes que WordPress es fabuloso y WPbakery Visual Composer no iba a ser menos. Los temas de WordPress incorporan extensiones propias que te ayudarán a tener ciertas alternativas de maquetación y visualización que no conseguirás en otros temas.

Ahora que ya sabemos que Visual Composer es algo más que un plugin de WordPress, ¿empezamos a conocer lo que puedes conseguir utilizándolo?

WPBakery Page Builder for WordPress (Visual Composer)

Este fabuloso plugin de maquetación visual habla por si sólo. Simplemente tenemos que visitar el sitio web de descargas y dejarnos convencer por sus valoraciones y las compras realizadas de WPBakery Page Builder.

Multitud de descargas, valoraciones, premios, recomendaciones, actualizaciones constantes, etc. ¿Porqué WPBakery Page Builder ha recibido tantas críticas en blogs y la gran mayoría de temas siguen apostando fuertemente por este preciso y elegante maquetador visual?

¿Qué caracteriza a Visual Composer?

• Estructurar el contenido en una página web de una forma sencilla en un tiempo record.
• Obtendrás grandes alternativas de maquetación y construirás auténticas maravillas.
• Una página llena de usabilidad y visualización unidos a un buen posicionamiento web.

¿Cómo funciona Visual Composer?

Este maquetador visual funciona como una alternativa, la que tendrás que escoger a la hora de empezar a diseñar tu proyecto.

Al presionar en el editor, empezarás en una nueva aventura creando sitios web. Es tan fácil que conseguirá que nunca lo dejes.

Para utilizar WPBakery Page Builder en un proyecto, lo primero que tienes que tener en cuenta es que trabajarás por estructuras de página. Tendrás 3 opciones en el momento de empezar un proceso de maquetación, tal como puedes ver en la imagen inferior.

Si aún eres un principiante, tendrás que conocer todos los elementos que incorpora Visual Composer para entender realmente su funcionamiento. Con el paso de las pruebas, encontrarás la alternativa de guardar y añadir plantillas en otros puntos de la web.

Pero para empezar, vamos a centrar la atención a estos 3 apartados iniciales de Visual Composer:

• Añadir Elemento. Existen muchos elementos que podemos utilizar en Visual Composer. Pero la fila y la sección son la base de la estructura web que quieras crear.
• Añadir Bloque de Texto. La estructura es importante, pero contenido lo es más. Con este apartado podrás incorporar directamente un bloque de texto para iniciar tu estructura.
• Añadir Plantilla. Si ya has encontrada una plantilla base con la que trabajar, podrás guardarla y usarla para comenzar otros puntos de contenido en tu sitio web.

Cuando queremos agregar un elemento, simplemente tenemos que acceder al icono de «+ Añadir Elemento» y nos desplegará todos los subelementos que tenga incorporado por defecto, los Ultimate Addons for Visual Composer en caso de que los tengamos o los que incorpore el propio tema a través de Visual Composer.

Elementos Fundamentales de Visual Composer

Existen una gran cantidad de elementos que puedes encontrar en este fantástico plugin de WordPress. ¿Por donde empezar?

A partir de estos dos elementos principales, ya puedes empezar a incorporar los elementos que con los que obtendrás diferentes funciones.

Fila. Elemento fundamental de maquetación. A través de las filas podrás incorporar los elementos que desees. Es un contenedor en donde escoges las columnas y buscas el diseño que más se adapte en un sitio concreto de la web. Cada fila, al igual que todos los elementos, la puedes mover, editar o duplicar.

Sección. Elemento que se utiliza para agrupar filas. Tienen ciertas características para que las filas no se desplacen. Si entiendes su función, las utilizarás con más frecuencia.

 

Elementos de Contenido de Visual Composer

Después de entender estos dos importantes elementos, podrás acceder a desarrollar tu proyecto y disfrutar maquetando con los siguientes elementos básicos:

Bloque de Texto. Caja de texto con la que podrás incorporar títulos, subtítulos, párrafos y otros elementos de texto. Se utiliza de forma similar a cualquier procesador de texto WYSIWYG cómo podría ser por ejemplo el de WordPress.

Separador. Este elemento se utiliza para conseguir espacios adicionales entre los diferentes elementos y filas. Ayuda a estructurar el contenido de mejor forma a nivel visual.

Espacio Vacío. Este elemento es muy útil para insertar espacios en el diseño de los contenidos. Se trata de un elemento fundamental en Visual Composer a la hora de desarrollar el diseño de una web.

ZigZag Separator. Este elemento realiza la misma función que el separador horizontal, pero con otro diseño en forma de zigzag.

 

Separador con Texto. Con este elemento es posible incorporar un separador con el texto incluido. Es muy útil para para estructurar mejor el diseño y separar filas o seciones entre sí introduciendo texto.

Caja de Mensaje. Este elemento suele utilizarse para resaltar un apartado importante en algún lugar de la web. Establece unos colores y advertencias por defecto, pero puede cambiarse gracias a la multitud de estilos y opciones que incluye.

Pestañas. Este elemento sirve para organizar el contenido en pestañas dinámicas en las que se pueden incorporar otro tipo de elementos, texto, etc. Las pestañas dan mucho juego en el diseño con Visual Composer, aunque debes utilizarlas bien para obtener un contenido usable y visual.

 

Tour. Es un elemento similar al anterior tabulador con pestañas, solo que en lugar de en horizontal las pestañas se ordenan en sentido vertical. Cómo el contenido en pestañas, pueden añadirse otros elementos de Visual Composerl, texto, etc.

Acordeón. Este tipo de elementos permite añadir paneles de contenido que se despliegan al hacer clic sobre cada uno de sus apartados. Muy útiles para añadir texto pero sin que se encuentre visible a simple vista.

Contenedor Paginable. Se trata de contenedores de contenido dinámico creados en base a una sección. Permiten crear diferentes tipos de estructuras de filas y elementos según sea necesario.

Icono. Utilizando este botón puedes acceder a toda la recopilación de iconos de Visual Composer que puedes utilizar para personalizar el diseño de tu web. Permite elegir el color del icono, la forma, el tamaño, añadir una URL, etc.

Encabezado Personalizado. Es un elemento indispensable en el momento de estructurar una página. La buena utilización de los títulos o encabezados supone un plus en el SEO o posicionamiento orgánico.

Botón. Con esta opción tendrás acceso a un gran repertorio de botones prediseñados que puedes utilizar para incorporar acciones en tu página web. Permite incorporar enlaces así como insertar código Javascript.

Llamada a la acción. Con este elementos pueden insertarse diferentes alternativas de botones call to action o botones de llamada a la acción del usuario. Estos elementos vienen con diseños predefinidos, pero permiten añadir texto, enlaces, iconos, etc.

Preguntas Frecuentes. Tal como define Visual Composer, es un elemento alternador de preguntas frecuentes o FAQ. Puede ser una excelente opción para romper una pequeña barrera hacia el usuario y potenciar la usabilidad de la web.

Hover Box. Se trata de un elemento animado compuesto por una imagen con texto que permite utilizar también otra imagen y texto en el reverso. Una pequeña animación de vez en cuando, se agradece.

Imagen Única. Esta opción es muy sencilla de usar tal como su nombre indica. Permite añadir una imagen en cualquier lugar a la que se pueden añadir efectos o animaciones CSS.

 

Galería de Imágenes. Esta opción de Visual Composer permite añadir imágenes en forma de galería con diferentes opciones de diseño y deslizamiento.

 

Carrusel de imágenes. Este elemento funciona de forma similar al anterior, solo que incluye desplazamiento en forma de slider o carrusel.

 

Slider de Entradas. Se trata de un elemento similar al carrusel o slider de imágenes que acabamos de ver más arriba, solo que en lugar de mostrar imágenes muestra entradas del blog de WordPress.

Reproductor de Vídeo. Este elemento permite insertar vídeos de Youtube o Vimeo, así como modificar el ancho del vídeo o la relación de aspecto.

 

Google Maps. Esta opción de Visual Composer permite insertar la localización de tu ubicación en Google Maps, además de un título y la altura de la sección donde se muestra.

 

Cuadrícula de Medios. Esta opción posibilita insertar estilos de visualización de imágenes en bloques. Es posible obtener una gran diversidad de diseños, pudiendo elegir entre diferentes visualizaciones, el número de columnas o el espacio entre ellas.

Cuadrícula de Medios en Bloques Irregulares. Este elemento funciona de forma idéntica al anterior, con la diferencia de que se trata de bloques irregulares. También permite una gran diversidad de diseños y visualizaciones para poder personalizarlo.

Cuadrícula en Bloques Irregulares. Este elemento es similar al anterior, solo que no funciona solo con medios, es decir imágenes o vídeos. Es por lo tanto un elemento ideal para presentar diferentes contenidos mediante visual composer en el sitio web, como pueden ser por ejemplo las entradas del blog. Admite igual que los dos anterior, diversas personalizaciones del estilo.

Widget de Flickr. Con este elemento se puede añadir un feed que muestra las imágenes de una cuenta de Flickr. Tan solo es necesario introducir la ID de usuario y elegir el número de columnas a mostrar.

Barra de Progreso. Esta opción permite añadir una barra de progreso animada a la que se pueden asignar diversos valores en forma de porcentajes, así como añadir efectos y animaciones, además de modificar el color.

Gráfico Circular. Al igual que la opción de la barra de progreso, este elemento muestra un gráfico circular de porcentajes que tiene opciones de personalización similares al anterior.

 

Gráfico de Tarta y Donut. Este elemento funciona de forma similar a un gráfico circular que representa porcentajes, solo que en forma de donut o tarta. De igual forma que los anteriores gráficos de Visual Composer, tiene varias opciones de personalización.

Gráfico de Líneas. Esta opción funciona de forma parecida a las anteriores, con la diferencia de que representa los porcentajes asignados en forma de un gráfico de líneas.

 

Elementos Sociales de Visual Composer

Además de los elementos de contenido que incorpora inicialmente WPBakery Page Builder, te ofrece unas alternativas sociales que puedes incorporar en tu estructura web. Actualmente te ofrece las siguientes posibilidades:

Elementos de Estructura

Barra Adicional con Widgets. Este elemento de Visual Composer permite incorporar contenido de widgets en una barra. Puede ser una buena alternativa en algunas situaciones a la hora de diseñar una página web.

HTML Puro. Si sabes algo de HTML o tienes algún trozo de código que te interesa mostrar, puedes insertarlo en este elemento. Puede ser una gran solución para realizar acciones de diseño que requieran de algo de código.

JS Puro. Al igual que el anterior, este elemento avanzado nos puede ser muy útil para implementar directamente código puro en la estructura o diseño nuestra página, solo que en este caso Javascript.

Elementos de WordPress

Si necesitas elementos propios de WordPress, podrás utilizar sus alternativas en el contenido y estructura de tu proyecto web. Los elementos de WordPress que encontrarás son los siguientes:

Elementos adicionales en relación a las plantillas

Además de todos los elementos citados anteriormente, cada tema o plantilla de WordPress incorpora elementos adicionales propios de la plantilla para añadir funciones a la estructura y el diseño de la web. Estos son por ejemplo los elementos de una plantilla premium de WordPress que utiliza Visual Composer.

Pero dependiendo del theme cada desarrollador crea sus propios elementos. Por tanto suelen ser diferentes entre plantillas y lo más seguro es que en otros temas te encuentres elementos diferentes.

Ultimate Addons para Visual Composer

Aunque este page builder para WordPress trae por defecto bastantes elementos para personalizar el diseño de una web, es posible aumentar la biblioteca de elementos disponibles gracias al gran numero de extensiones que existen.

Comprando el pack de Ultimate Addons para Visual Composer en la página web de Envato podrás obtener una amplia biblioteca de funciones adicionales para el diseño de tus páginas web como puedes ver en la imagen de arriba.

All in One Addons para Visual Composer

Además de las anteriores extensiones, existen más packs de funcionalidades que se pueden adquirir para Visual Composer y que pueden resultar muy interesantes para muchos diseños de páginas web. Un ejemplo es el completísimo pack de All In One Addons for WPBakery Page Builder.

Gracias a estos addons podrás obtener una buena cantidad de funcionalidades de lo más interesante: galerías de imágenes en 3D, iconos animados, carrusel de testimonios, efectos de zoom, listas personalizadas, etc.

Otras extensiones para Visual Composer

Además de las que ya hemos hablado, se pueden comprar más extensiones de Visual Composer según las necesidades del diseño web. En Codecanyon existen infinidad de addons para implementar funcionalidades concretas a nuestra web realizada con Visual Composer. Estas son algunas de las extensiones más interesantes de Visual Composer:

• VC Clipboard: este addon sirve para copiar o pegar franjas o filas de forma muy sencilla. Resulta muy interesante para copiar y pegar franjas de una página a otra, ya que la función de duplicar sólo permite hacerlo dentro la propia página.
• VC Undo/Redo: esta extensión añade la función de Deshacer/Rehacer como un software de edición. Resulta muy práctica a la hora de corregir cambios recientes realizados en el diseño de nuestra web Visual Composer.
• Woocommerce Visual Composer: este pack añade a la biblioteca una colección de elementos que permiten añadir con solo un clic los shortcodes necesarios para crear una tienda online completa en WordPress.

Asimismo existen muchas más extensiones, funciones o elementos con los que puedes potenciar tu página web diseñada con WPBakery Page Builder.

Además, cómo ya hemos dicho también existen otras funciones o elementos que puede que sean propios de la plantilla premium utilizada. Por ejemplo, un tema que traiga incorporado ya Contact Form 7 por defecto, probablemente traerá su respectivo elemento en Visual Composer para poder insertarlo de forma sencilla en cualquier parte de la web.

Guía Visual Composer: conceptos importantes en el momento de comenzar a diseñar webs

Existen ciertos conceptos y aspectos que debes tener en cuenta a la hora de comenzar tu andadura con este page builder. Ya sabes los elementos y la trayectoria de Visual Composer, ¿pero que más tienes que entender para empezar a diseñar páginas web?

Empecemos por la barra principal que se incorpora en la parte superior de la estructura que estés creando.

El símbolo «+» te dará la función de incorporar directamente un elemento.

A la derecha del símbolo «+» te aparece la opción de incorporar una plantilla que tengas guardada o incorporar alguna alternativa de la biblioteca de plantillas. Esta es una función que veremos en detalle más adelante.

Cada vez que incorporas la función de maquetar una parte de tu sitio web con este plugin, es importante que entiendas que puedes utilizar un CSS propio. Lo encontrarás en la rueda de configuración en la derecha de la barra. Se te mostrará una caja tal como esta:

Es ahí donde puedes añadir tu CSS personalizado llamando a las clases que has creado previamente y asignádole los estilos que deseas.

La última opción que encontrarás en la barra principal de Visual Composer es la función de aumentar la estructura y centrar tu atención únicamente en ella. Una buena alternativa para aumentar la concentración.

Filas y Columnas

Como hemos dicho con anterioridad, las filas incorporan columnas. Si esto es así, ¿que debes tener en cuenta?, ¿Cómo haces un diseño responsive que se adapte a todo tipo de dispositivos? ¿Dónde se establece la extensión de la fila?

Te propongo una estructura simple para que entiendas mejor las posibilidades en las estructuras a través de las filas y las columnas.

En la fila superior, podrás modificar la expansión de la fila y del contenido. Además, tienes la opción de estipular los espacios entre columnas, incorporar vídeo, introducir parallax, etc.

En las columnas te ofrecen alternativas generales, pero es importante que entiendas que aquí es donde podrás adaptar el contenido de la columna a los diferentes dispositivos.

Un punto a tener en cuenta aunque ya sea algo más avanzado, son las opciones CSS que te permite modificar en todas las estructuras de Visual Composer. Si quieres probar las opciones de margin, borde y padding tendrás que ir a las opciones de diseño del elemento que quieras modificar.

Cómo ves, utilizar Visual Composer es muy sencillo y las opciones de personalización son casi ilimitadas, tantas como creatividad tengas.

Podrás crear todo tipo de estructuras que puedas imaginar, añadir elementos como te venga en gana e insertar efectos y botones o cualquier otro tipo de funcionalidad que te interese. Y finalmente, podrás modificarlo con CSS para darle el toque final si alguna cosa no te convence.

Guardar plantillas o templates en Visual Composer

Las posibilidades de personalización de Visual Composer son muy amplias, así que puede que a veces consigas un diseño o estructura algo laborioso que te interesa replicar en otras partes de tu web. Por eso cuando hayas terminado de crear tu página, este page builder te ofrece la posibilidad de guardar esa composición y reutilizarla como si fuera una plantilla en otras secciones de tu web o en páginas que hagas en el futuro.

Para guardar plantillas de Visual Composer, simplemente haz clic en el botón de “Plantillas” o “Templates” y se mostrará una ventana para que asignes un nombre a la plantilla y la puedas guardar.

Quizás si estás comenzando esta función no te resulte muy útil o no te resulte imprescindible. A fin de cuentas no tendrás muchos diseños creados para guardar.

Pero si te dedicas a crear páginas web, agradecerás tener una buena colección de plantillas prediseñadas por ti mismo que te ahorrarán bastante tiempo en el futuro.

¿Qué más razones existen para utilizar Visual Composer?

Cómo ya has visto Visual Composer es un editor visual que ofrece una gran variedad de alternativas a la hora de diseñar un sitio web. Si aún así no te has convencido, te dejo una lista de razones o motivos por lo que utilizar este page builder.

1. Es extremadamente fácil de usar. Incluso para personas que no entiendan de diseño web o no estén acostumbrados a la interfaz de un maquetador visual.
2. Es una herramienta para crear páginas de forma profesional. Seguro que te sorprenderías de la cantidad de webs que utilizan Visual Composer para su diseño.
3. Es económico. Visual Composer tiene un precio para todos los bolsillos y la licencia es de por vida. No es necesario renovarla de forma anual.
4. Es rápido y eficaz
5. Es realmente personalizable, más que otros page builders o plugins de maquetación visual.
6. Tiene un soporte muy bueno y profesional.
7. Permite vitaminarlo con numerosas extensiones o addons.
8. Se ha convertido en un estándar en el diseño web en WordPress. Multitud de plantillas lo traen incorporado para generar sus diseños.
9. Es compatible con muchos temas de WordPress.
10. Permite crear contenidos responsive de diseño profesional que se adaptan a todos los dispositivos.

¿Tienes alguna duda más sobre Visual Composer?

Espero que esta guía de Visual Composer te haya resultado útil e interesante y además te haya aclarado dudas sobre este maquetador visual. Si es así, puedes compártirla en las redes sociales con tus amigos. ¡Seguro que le resulta práctica a muchas personas!

Si tienes cualquier duda o necesitas que te ayude con algo, déjanos un comentario y te responderemos encantados, como siempre 😉

Y si te gusta el diseño web con WordPress o estás empezando a dar tus primeros pasos en este CMS, puedes echarle un vistazo a nuestro canal de YouTube donde puedes ver muchos más vídeos sobre Marketing Digital, SEO y cómo no, diseño web WordPress.