En este tutorial + guía de Visual Composer vas a aprender a crear y maquetar las secciones de tu página web de manera totalmente profesional. No necesitas tener conocimientos de programación y código, ya que Visual Composer es un plugin que cualquier persona puede utilizar.
Podrás diseñar tu web en WordPress, o crear una landing page para tus productos y servicios, arrastrando y soltando los elementos con los que quieras ir maquetando las secciones de tu sitio web. Textos, imágenes, botones, enlaces a las redes sociales, mapas para encontrar tu negocio y todo lo que te puedas imaginar.
Otros artículos que pueden interesarte:
- Tutorial WordPress completo 2019: La guía definitiva
- Guía para aprender a instalar WordPress en tu hosting.
Además de explicarte el funcionamiento de Visual Composer y cuáles son sus elementos principales, he grabado un videotutorial en el que creo desde cero la página de inicio de una web en menos de media hora. Creo que es una buena manera de complementar este manual de Visual Composer así que te lo dejo un poco más abajo.
Por último, antes de terminar la guía de Visual Composer, te enseñaré un pequeño truco que te servirá para guardar los diseños que vayas creando y así poder utilizarlos en otras secciones de tu web.
Índice de contenidos
¿Como funciona Visual Composer?
Utilizar Visual Composer es muy sencillo. Lo primero que tienes que hacer descargar el plugin aquí. Una vez tengas descargado, accede a tu panel de WordPress (tudominio.com/wp-admin) y ve a Plugins > Añadir nuevo y pulsa en el botón de subir plugin. Arrastra el archivo zip que te acabas de descargar y pulsa en instalar. Una vez hecho esto, ve a Plugins y activa Visual Composer.
Cuando lo tengas instalado y activado, ve al apartado de Páginas > Añadir nueva. Aparecerá un botón azul que activa la maquetación con el plugin. Debes seleccionar el «Backend Editor«.
Te aparecerá una pantalla como la que te muestro a continuación, en la que verás 3 botones.
- Add element: Te permite añadir elementos concretos a tu página para ir diseñándola desde cero.
- Add text block: Sirve para añadir un bloque de texto.
- Add template: Visual Composer te da unas plantillas predeterminadas por si quieres añadir alguna que te guste en vez de insertar uno a uno los elementos.
En este tutorial de Visual Composer quiero que aprendas a crear una página desde cero así que vamos a optar por la opción de «Add element«.
Cuando hagas clic verás todos los elementos que puedes ir añadiendo a tu página. Botones, contadores, imágenes, iconos con texto, bloques de texto, botones de social media, etc.
Para agregar contenido, lo mejor es que generes filas y luego introduzcas en ellas los elementos que desees. Cada fila puede tener varias columnas. De este modo en una misma fila podrás poner varios elementos.
Por ejemplo, para poner un bloque de texto a la izquierda y una foto a la derecha, debes crear una fila, luego crear otra fila dentro y dividirla en dos columnas. A continuación, pulsar de nuevo el botón de agregar elemento «+«, añadir a la columna de la izquierda el elemento «Text block» y a la columna de la derecha el de «Imagen única».
A continuación te dejo el vídeo tutorial de Visual Composer con el que seguro lo verás mejor. Puedes ver como maqueto una página de inicio real para la web de un restaurante:
Para el video tutorial de Visual Composer, he utilizado una de las mejores plantillas WordPress Premium de la actualidad. Su nombre es Bridge y la puedes descargar aquí.
Tiene más de 200 demos que puedes utilizar para crear tu proyecto, unas enormes opciones de personalización y configuración y está optimizada para SEO. Y lo mejor es que viene con Visual Composer preinstalado gratuitamente.
Recurso extra: Si Bridge no te convence, aquí tienes una recopilación con las mejores plantillas de la actualidad por temáticas
¿Qué puedo incluir con Visual Composer?
En este tutorial de Visual Composer he querido recopilar los elementos más utilizados en el diseño web. Con ellos podrás dar a tus páginas numerosas funcionalidades y un aspecto atractivo, práctico y bien estructurado.
¿Y sabes que es lo mejor de todo? Que lo harás de manera rápida y sencilla, ya que Visual Composer es muy intuitivo y en poco tiempo te harás con ello.
Elementos organizativos básicos
Fila: Es el elemento principal que utilizarás para diseñar tu página web. Se trata de un contenedor que debes crear cada vez que quieras añadir un elemento. Puedes dividirlo en columnas para añadir elementos en horizontal.
Text Block: Cuando quieras introducir texto, este es el elemento para ello. Puedes añadir títulos, subtítulos y párrafos.
Empty Space: Sirve para añadir espacios entre los distintos elementos que vayas insertando. Si no colocas estos espacios libres de contenido, todos tus elementos aparecerán pegados unos a otros. Puedes determinar su tamaño en píxeles.
Separator: Es una línea que podrás incluir para separar elementos de una manera visual. Por ejemplo, podrás incluirla bajo los títulos de las secciones para separarlos de los párrafos y resto de elementos.
Separator with Text: Es lo mismo que un separator, pero puedes incluir texto dentro de él. Se suele utilizar mucho menos que el anterior.
Pestañas: Sirve para organizar una parte de tus contenidos en pestañas dentro de la misma página.
Accordion: Añade un contenedor con franjas desplegables para mostrar más contenido al hacer clic en cada una de ellas.
Latests Posts: Este elemento te permite insertar una fila con un extracto de los últimos artículos que tengas publicados en tu blog. Puedes seleccionar la forma en que se muestren y el número de posts que deben aparecer.
Icon with Text: Este elemento es uno de los más utilizados cuando se quieren mostrar los servicios que se ofrecen a través de la web. Podrás poner una imagen, o uno de los iconos de la lista que te da el propio plugin, y luego un pequeño texto debajo.
Team: Se trata de uno de los elementos más utilizados en las páginas web de las empresas para mostrar al equipo. Te permite incluir una cajita con el nombre de la persona, su cargo, una breve descripción, sus redes sociales y una foto suya.
Elementos gráficos y audiovisuales
En este tutorial de Visual Composer no podían faltar los clásicos elementos gráficos para adornar tus secciones y hacerlas visualmente atractivas.
Imagen única: Con este elemento podrás incluir una imagen que tengas subida a tu galería de medios de WordPress.
Image with Text: Se trata de algo parecido a Icon With Text. Sirve para poner una imagen con un pequeño texto debajo de ella.
Image with Text Over: Igual que el anterior pero en este caso, puedes escribir texto encima de la foto que hayas seleccionado para que aparezca cuando el usuario pase el ratón por encima.
Image Gallery: Sirve para añadir una galería de imágenes para mostrar varias fotografías a lo largo o en mosaico.
Image Carousel: Puedes insertar una galería de fotos a modo de carrusel para que vayan rotando entre ellas cada x segundos.
Cover Boxes: Elemento que te permite incluir una galería de imágenes con un texto asociado a cada una. De este modo, cuando el usuario se posa sobre una de ellas, la foto se desplaza hacia un lateral mostrando el texto que hay detrás.
Video Player: Si quieres incluir un vídeo, debes seleccionar este elemento. Lo único que tienes que hacer es incluir la URL de tu vídeo de YouTube o Vimeo y darle a insertar.
Map Block: Se suele utilizar en las páginas de contacto para incluir un mapa de tu ubicación interactivo a través del cuál el usuario puede moverse e interactuar ya que se trata de una inserción del propio Google Maps.
Actualmente, toda página web debería estar enlazada a varias redes sociales. Las redes sociales son un buen canal de comunicación y transparencia con nuestros clientes, por lo que aprovéchalos e incluye las tuyas con estos elementos.
Facebook Like: Inserta una pequeña caja con el número de «Me gusta» y el clásico botón para dar like a la página.
Tweetmeme Button: Sirve para incluir un botón para que las personas que visiten la web, puedan twittear el contenido de la página o post en el que se incluya este elemento. Puedes especificar un hashtag y el «Vía @usuario» para que cuando la gente te comparta, te cite y ponga el hashtag que tu quieras automáticamente.
Google+ Button: Añade un botón para que los usuarios puedan darle +1 a tus publicaciones.
Pinterest: Despliega un botón de Pinterest para que las personas que tengan cuenta en esta red social puedan pinear el contenido.
Botones y llamadas a la acción
Toda web tiene que tener unos buenos botones para hacer que el usuario se fije en ellos y que así haga clic donde nosotros queremos que lo haga.
Button: Sirve para insertar un botón. Puedes variar el tamaño, el color, la tipografía y múltiples opciones de personalización. De este modo, si no te gustan los botones que trae tu plantilla de forma predeterminada, podrás cambiarlos con este elemento.
Call to Action Buton: Este elemento permite insertar una franja que contiene un pequeño texto y un botón para llamar la atención del usuario y llevarle a un contenido estratégico de nuestra web. Suele ir en colores llamativos.
Contadores animados
Este tipo de elementos son muy útiles para representar cifras y datos de una forma dinámica y visualmente muy atractiva.
Counter: Sirve para incluir un contador animado. Cuando el usuario llega a la parte donde se encuentra este elemento, el contador empieza a mostrar números hasta que llega a la cifra que has marcado.
Progress Bar – Horizontal: Es un elemento similar al anterior pero que además tiene unas barras longitudinales que se llenan a lo largo.
Progress Bar – Vertical: Es el mismo elemento que el anterior pero esta vez en vertical.
Truco final del Tutorial de Visual Composer: las plantillas o templates
Cuando hayas terminado de crear tu página, puedes guardar esa composición y reutilizarla como si fuera una plantilla para otras secciones o webs que hagas en el futuro.
Para ello, ve arriba y haz click en el botón de «Plantillas» o «Templates». Se abrirá una ventana para que escribas el nombre que quieres darle a la plantilla y la puedas guardar.
Quizás al principio no te resulte muy útil pero, si te dedicas a crear páginas web, tener un buen repertorio de plantillas prediseñadas te ahorrará mucho tiempo en el futuro.
¿Tienes alguna duda?
Espero que te haya resultado interesante y útil esta guía de Visual Composer. Si es así, compártela en tus redes sociales y suscríbete al blog para no perderte más contenidos como este.
Si tienes cualquier duda o necesitas que te ayude con algo, solo tienes que ponerlo en los comentarios y te responderé encantado.
Y si te gusta el diseño web con WordPress o estás empezando a crear tu web, te aconsejo que visites mi canal de YouTube donde ademas de encontrar este tutorial de Visual Composer, podrás ver muchos más vídeos de SEO y Marketing Digital.
