Visual Composer: mis funciones favoritas

diciembre 22, 2016

Visual Composer: mis funciones favoritas

Descubre lo fácil que es diseñar páginas a tu antojo con el plugin de maquetación más popular de WordPress: Visual Composer. Esta herramienta cuenta con multitud de opciones, tantas, que al principio puedes bloquearte sin saber cuál escoger. Por eso quiero mostrarte las que en mi opinión son las mejores funciones para crear una página o un artículo, sin marearte mucho.

Mis funciones favoritas de Visual Composer

Con WordPress no tengo termino medio: hay veces que alucino en colores por todo el potencial que tiene y otras, me saca de mis casillas tanta configuración. La primera vez que me topé con Visual Composer, me sentí tan pequeñita como en mis comienzos en Blogger, cuando intentaba enterarme de cómo funcionaban el HTML y el CSS.

Tenía que frenarme y respirar hondo para resistir el impulso de cerrar el ordenador y volver a meterme detrás del mostrador del que había sido mi oficio durante más de 10 años. Es lo que comúnmente se llama cagarse de miedo ante situaciones nuevas que no controlas.

Pero como además de cagona, soy cabezota, pues ahí que me volví a meter, dispuesta a merendarme el plugin de la misma forma que 2 años atrás, me zampé la sábana del html y toda la codificación CSS.

Y como pasa con todo lo nuevo, una vez lo entiendes no es tan complicado. Hoy quiero mostrarte mis funciones favoritas de Visual Composer, para que te hagas una idea del poder de esta herramienta. Si quieres conocer todos sus elementos con detalle, te recomiendo este artículo de Aula CM, porque como tenga que explicarlos yo (con lo que me enrollo), sale un vademécum.

Una buena opción tanto para adornar los títulos de tus contenidos como para resaltar una oferta especial que no quieras que pase inadvertida para tus lectores. Puedes añadirle iconos, diferentes estilos de línea, jugar con los tamaños e incluir un fondo en el color que quieras.

Como ejemplo, lo he usado como llamada visual para ofrecer un regalo ¿qué te parece la idea? ¿se te está ocurriendo ya el uso que le puedes dar?

Otras funciones similares de Visual Composer:

Esta función es estupenda para añadir una nota aclaratoria en relación a la información que estés desarrollando en tu contenido. También se puede usar para resaltar una frase célebre o incluso para personalizar un twitt, en caso de que uses el plugin social Vcgs Toolbox de Víctor Campuzano.

Este elemento es muy práctico para añadir varias funciones en un mismo espacio. Puede venirte bien para añadir varias imágenes de manera horizontal que se vean a tamaño completo y no ocupen espacio de manera vertical en el contenido.

Otra manera estupenda, de resumir información sin agobiar al lector con tanto texto o imágenes. Este elemento te permite meterlo todo en contenedores verticales que el usuario podrá desplegar a su antojo, si le interesa.

Custom Headings (cabecera personalizada)

Para personalizar títulos o resaltar partes de un contenido a través del texto. Viene muy bien cuando quieres incluir tipografías diferentes a las que has asignado por defecto en tu plantilla.

Podrás cambiar fácilmente a otras tipografías de Google Font que tengas instaladas en tu web.
Incluir un borde alrededor, del estilo que quieras.
Añadirle un fondo de color.
Y las opciones clásicas que tienes en el editor de texto: personalizar tamaño, color, alineación y enlaces.

Barra de progreso

Para insertar gráficos fácilmente con un resultado profesional. Las posibilidades son infinitas, desde documentar con cifras alguna información que estés tratando hasta mostrar el nivel de conocimientos que tienes sobre un tema. Muy fácil de configurar y lo mejor, puedes añadirles animación.

Otras funciones similares a la barra de progreso, son:

Gráfico de sectores: para presentar los datos en porciones (o quesitos como digo yo)

Round Chart: en forma de rueda.

Line Chart: en líneas verticales.

Advanced button (botón avanzado)

El botón de los botones, el que parte la pana en el reino de los clics, indiscutiblemente “el boss”. Tiene tantas virguerías, que sinceramente, me marea… ¡con lo que sudé yo en Blogger para aprender a hacer uno que tuviera relieve, sombra y efecto click a base de CSS!

Y ahora llega este elemento, con toda su pompa y me hace hasta la cama con un par de clics:

diferentes efectos al pasar el ratón
25 animaciones (en cristiano, maneras de aparecer: desde arriba, por el larguero, por la izquierda haciendo el pino…)
posibilidad de sustituir el botón por una imagen
incluir iconos
añadir sombra y bordes

Además de las funciones normales, claro está: alineación, tamaño, color de texto, fondo…

Info Banner

A este no le hace falta traducción: lo que comúnmente usamos para llamar la atención hacia alguna información que queremos que vean bien. Viene genial para mostrar un producto, un sorteo, un regalo para suscriptores, etc

Es tan sencillo como añadir una imagen, darle un título, una descripción y añadir un botón enlazado a donde quieras llevar a tus lectores.

Yo lo he usado para currarme una caja de autor: ahora que voy a hacer más entrevistas y colaboraciones con otros compis, estoy mirando opciones para su presentación 😉

Info List Item (lista de secciones informativas)

Para plasmar información de forma atractiva. Es ideal cuando quieres desarrollar algunos puntos en forma de lista, con un resultado similar a una infografía.

Podrás acompañar tu explicación con iconos o imágenes, personalizando colores, tamaños, líneas, etc…

Lo del Botón avanzado está muy bien, pero ¿qué pasa cuando en vez de añadir un botón, necesitas incluir dos?. Pues que Visual Composer ya lo había pensado y te ofrece el Dual Button.

Puedes:

incluir iconos o imágenes
añadir bordes
cambiar tamaño, alineación, color, fondo, tipografía..
personalizar la línea divisoria mediante texto, imagen o iconos

Para añadir varios enlaces o información a un elemento (normalmente una imagen). Esto es lo que se llama presentación interactiva: enriquecer una imagen o composición, con información adicional.

Ya te he mostrado cómo hacerlo con la herramienta Genial.ly, pero también lo puedes conseguir fácilmente con esta función de Visual Composer.

Tan sólo tienes que crear tu item, seleccionar el icono que quieras usar, personalizarlo (color, tamaño…) y situarlo en el punto de la composición, que quieres que aparezca. Puedes añadir simplemente información o incluir además un enlace.

Y si quieres hacer una galería de imágenes para mostrar a tu antojo la cantidad que necesites, vas a alucinar con Media Grid. Podrás:

elegir entre mostrarlas todas a la vez o activar una secuencia a través de botones o paginación
ordenarlas en filas y columnas
ajustar la separación entre ellas
darles diferentes tipos de animación (tienes más de 40 para elegir)
seleccionar diferentes estructuras para presentarlas
añadir bordes y fondo

Para terminar, no podía olvidar una de las funciones que más uso en mis contenidos: el vídeo (raro es el post en el que no lo incluyo). Con este elemento, se acabó insertar los vídeos por HTML:

subes tu vídeo a la plataforma que quieras (Vimeo, Youtube, Google Drive…)
copias la dirección de enlace
la pegas en Video Player, ajusta alineación y guardas

No hay más. Bueno sí, puedes incluir un título, ajustar el tamaño, añadir bordes y fondos…pero a lo que me refiero es que tiene una configuración muy sencilla.

Videotutorial para aprender a manejar Visual Composer

Como yo sé que al principio el manejo de este plugin, se hace bastante cuesta arriba, te he preparado un tutorial, en el que te enseño cómo usar Visual Composer sin perder pelo. No es ninguna novedad, que me enrollo más que las bobinas en cada tutorial. La razón es que quiero que asimiles lo que cuento lo mejor posible.

Por esa razón, lo que en un principio iba a ser un tutorial “ligerito” se ha alargado más de 90 minutos 😵 . Así que, he decidido dividirlo en 5 partes. De esa forma, no te agobio y lo vas viendo como prefieras ¿te parece? pues dale al play 😉