tutorial de visual composer español

Tutorial de Visual Composer + Video explicativo completo

Tutorial de Visual Composer + Video explicativo completo
5 (100%) 16 votes

WordPress por defecto incluye un editor que permite modificar la apariencia de tu web. No obstante, es bastante limitado si no sabes tocar el código o no te manejas bien con los shortcodes. Por ello, hoy te presento este tutorial de Visual Composer, uno de los mejores plugins de todo WordPress.

Visual Composer hace posible que cualquier persona pueda crear su página web sin tener que recurrir a un profesional. Con una buena plantilla, un plugin como este y un poco de paciencia, podrás hacer casi cualquier cosa.

En este tutorial de Visual Composer te explicaré cómo funciona, cuáles son sus elementos principales y aprenderás a crear tu propia página web arrastrando y soltando elementos.

Además, he incluido un vídeo explicativo en el que te enseño a diseñar una página de inicio desde cero 😉 .

pinel_pantalla¿Qué es Visual Composer?

Es un plugin pensado para que la tarea de diseño web sea más sencilla y rápida. Prescinde de códigos y eso hace que aunque seas novato y acabes de aprender cómo funciona WordPress, puedas crear tu propia página.

Este plugin está dirigido a aquellos que no se conforman con instalar una plantilla y punto.

Si te has adentrado en este mundillo, seguro que al escoger un tema para tu web, ha habido algún elemento que no te ha convencido y no has sabido cambiarlo por otro. Hoy acabarás con ese problema 😉 .

como instalar google analytics¿Como funciona Visual Composer?

Utilizar Visual Composer es muy sencillo. Una vez tengas lo tengas instalado y vayas a crear una nueva página, verás que aparece 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.

  1. Add element: Te permite añadir elementos concretos a tu página para ir diseñándola desde cero.
  2. Add text block: Sirve para añadir un bloque de texto.
  3. 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.

tutorial visual composer

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 a lo largo.

Por ejemplo, para poner una foto a la derecha y un texto a la izquierda, debes crear una fila y dividirla en dos columnas. Luego, 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ídeotutorial explicativo con el que seguro lo verás mejor:

foto_portada-1¿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 😉 .

tutorial de visual composer

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.

guia visual composer

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.

tutorial de visual composer

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

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.

tutorial visual composer

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.

manual visual composer

Elementos para redes sociales

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

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

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.

responsiveReutiliza elementos y usa las plantillas

Cuando hayas terminado de crear tu página, puedes guardar esa composición y reutilizarla como si fuera una plantilla para otras webs que hagas en el futuro.

Para ello, ve arriba y haz click en el botón de “Plantillas“. Se abrirá una ventana para que escribas el nombre que quieres darle a la plantilla y la puedas guardar.

guia visual composer

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.

conversacion_movil¿Tienes alguna duda?

Espero que te haya resultado interesante y útil este tutorial de Visual Composer. Si es así, compártelo 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.

4 Comentarios
  • Adrián Mancini
    Publicado a las 23:34h, 10 diciembre Responder

    Hola, cuando creo una fila con dos columnas, no puedo separar las mismas. Voy a editar la fila y le doy la cantidad de px para el gap entre columnas y nada, no responde. Alguna sugerencia? GRACIAS..!!!!

    • Javier Balcázar
      Publicado a las 09:49h, 11 diciembre Responder

      Hola Adrián,

      Si no te funciona prueba a meter los píxeles en el margen del elemento que quieras separar en vez aplicárselo a la fila entera. También puedes dividir la fila principal en 3 y meter esa tercera fila entre medias con la anchura con la que quieras separarlas.

      Un saludo!

  • Jose Ignacio Garate Cisternas
    Publicado a las 15:43h, 28 diciembre Responder

    Hola Javier, muy útil tu tutorial, claro y explicativo, solo tengo la duda en que theme ocupaste para ocupar vicual composer.

    • Javier Balcázar
      Publicado a las 15:49h, 28 diciembre Responder

      Hola Jose,
      He utilizado la plantilla multipropósito Bridge, que la verdad es que da muy buenos resultados y es tremendamente versátil. Además, lo bueno de esta plantilla es que te incluye el plugin Visual Composer gratis y así no tienes que comprarlo.
      No obstante, hay muchos otros temas que son compatibles con este plugin o que incluso también lo traen gratis. Te dejo un listado con más plantillas (casi todas compatibles con VC).
      Un saludo!

Escribe un comentario