WordPress

Tutorial de Visual Composer para crear tu página web. Guía 2018 con Vídeo

By 15 noviembre, 2017 enero 6th, 2019 79 Comments

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:

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.

¿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.

  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.

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».

Recurso extra: Aquí te dejo un listado con los mejores bancos de imágenes GRATIS para que puedas poner fotos de alta calidad en tu web

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.

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

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.

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

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.

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.

¿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.

Tutorial de Visual Composer para crear tu página web. Guía 2018 con Vídeo

5 (99.43%) 35 votes

79 Comments

  • Adrián Mancini dice:

    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..!!!!

    • 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!

    • 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 dice:

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

    • 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!

    • 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!

  • Javier Villalobos dice:

    No me aparecen esas opciones. Agregaste algún plugin o extensión que las incluya?

    • Hola tocayo. Este tutorial de Visual Composer es para la versión actualizada. Mira a ver si tienes una versión desactualizada, ya que quizás sea por eso. También puede ser porque no hayas comprado Visual Composer y te venga un versión funcionalidades reducidas con tu plantilla.

    • Hola tocayo. Este tutorial de Visual Composer es para la versión actualizada. Mira a ver si tienes una versión desactualizada, ya que quizás sea por eso. También puede ser porque no hayas comprado Visual Composer y te venga un versión funcionalidades reducidas con tu plantilla.

  • Miguel Guzman dice:

    Hola Javier. ¿VC es compatible con Genesis FrameWork?

  • Javier Villalobos dice:

    Gracias por tu respuesta, no creo que tenga que ver con el pago, creo que esos plugins image with text y otros vienen con qode de bridge, si no tienes el theme activo no los puedes utilizar?

  • Hugo dice:

    Hola Javier, muchas gracias por este post.
    Me gusta la forma didáctica y ágil de explicar en pocos minutos un tema.
    Eso es un don!

    Sólo quería saber desde qué sitio me descargo el plugin de Visual Composer.
    Porque me instalé un wordpress en el servidor del hosting, pero cuando busco plugins desde ahi, sólo me salen «ad ons». Yo lo que quiero es el plugin «Visual Composer: Page Builder for WordPress».

    Saludos y gracias nuevamente.
    PD: Si tienes pensado realizar nuevos posts explicativos, me interesaría si lo tienes planeas, alguno que explique las distintas formas de hacer una buena arquitectura de sitio. Uno para nichos grandes, nichos pequeños, blogs personales, tiendas on line, etc.
    …sé que es mucho pedir, pero bueno sólo una sugerencia 🙂

    • Hola Hugo! Me alegro de que te haya sido de utilidad este tutorial de Visual Composer :-).

      En cuanto a tu duda, cuando contratas el hosting e instalas WordPress, lo siguiente que tienes que hacer es descargarte una plantilla premium y empezar a diseñar. Te recomiendo que vayas esta recopilación de las mejores plantillas WordPress y compres una plantilla premium que incluya Visual Composer de manera gratuita como Bridge.

    • Hola Hugo! Me alegro de que te haya sido de utilidad este tutorial de Visual Composer :-).

      En cuanto a tu duda, cuando contratas el hosting e instalas WordPress, lo siguiente que tienes que hacer es descargarte una plantilla premium y empezar a diseñar. Te recomiendo que vayas esta recopilación de las mejores plantillas WordPress y compres una plantilla premium que incluya Visual Composer de manera gratuita como Bridge.

  • Rafa dice:

    Hola Javier

    Como estamos la verdad muy util el video.. te queria preguntar un cosita necesito poner en los bloques un flecha hacia abajo como en esto http://prntscr.com/eyej5v

    tengo entenido que se puede hacer pero llevo 5 dias volviendo me loco y no consigo que esto funcione y eh comprado incluso completon de parallax y nada no consigo que funcione… Si pueedes orientarme te lo agradecco de corazon… Un saludo

    • Para añadir una flecha hacia abajo, ve a Visual Composer e incrusta el elemento llamado Icon, selecciona Font Awesome y escoge el tipo de flecha que más te guste, por ejemplo Arrow-down y ponla centrada.

      • Rafa dice:

        Gracias… No se me ha ocurrido hacerlo de esta manera.. estoy acostumbrado a hacerlo en otras plantillas que en la configuración del bloque tienes el botón para que te ponga la flecha. Perfecto entonces…. voy a ello gracias de nuevo y genial por el trabajooo…

    • Para añadir una flecha hacia abajo, ve a Visual Composer e incrusta el elemento llamado Icon, selecciona Font Awesome y escoge el tipo de flecha que más te guste, por ejemplo Arrow-down y ponla centrada.

  • daniel dice:

    amigo como haces para que la imagen del header se vea completo… osea que hasta el espacio del menu esta sobre la imagen… he instalado la misma plantilla que usas, y no hay manera me sale todo muy diferente a como lo haces tu… y eso que hice los mismos pasos que te has realizado

  • pilar dice:

    hola, necesito saber como puedo incluir una pagina dentro de otra

    • Imagino que te refieres a enlazar páginas entre sí. para ello tienes que enlazar texto desde el editor pinchando en el símbolo de la cadena y en el apartado «link» que te sale ponerlo. También puedes incrustar el elemento «Button» y en el apartado «Link» poner el enlace a esa página.

    • Imagino que te refieres a enlazar páginas entre sí. para ello tienes que enlazar texto desde el editor pinchando en el símbolo de la cadena y en el apartado «link» que te sale ponerlo. También puedes incrustar el elemento «Button» y en el apartado «Link» poner el enlace a esa página.

  • Dani dice:

    Hola, tengo un caonsulta y espero de verdad me haga entender y me puedas ayudar. he manejado el visual composer muy por encima y me parece genial!! tengo varias webs con themas premium que utilizan este plugin pero los bloques o modulos varian segun el thema, es decir, el tamaño de cada bloque varia, ej: la imagen destacada se ve en su tamaño reducido pero proporcionado debajo el titulo y debajo descripcion, ese seria un bloque segun entiendo, asi normalmente puedo organizar en una fila del ancho de mi pagina 5 bloques que vendrian hacer 5 entradas publicadas y así sucesivamente se van ubicando… mi pregunta es ¿se pueden crear bloques o modulos con tamaños personalizados? Espero me haya sabido entender. Gracias!

    • Los bloques se ajustan al ancho que tengas predeterminado en los justes de tu plantilla. Para aumentar o disminuir el ancho suele haber una opción que te permite elegir entre varios. Si no la tienes, habría que hacerlo meiante código.
      Por otro lado, el tamaño de los «bloques» (columnas en realidad) los puedes modificar con css si ves que los predeterminados no te convencen 😉

    • Los bloques se ajustan al ancho que tengas predeterminado en los justes de tu plantilla. Para aumentar o disminuir el ancho suele haber una opción que te permite elegir entre varios. Si no la tienes, habría que hacerlo meiante código.
      Por otro lado, el tamaño de los «bloques» (columnas en realidad) los puedes modificar con css si ves que los predeterminados no te convencen 😉

  • Alex dice:

    Muchas gracias por el tutorial! Al crear una pagina y ponerla como pagina de inicio (y mandar las entradas al blog) no sale como deberia salir, se coloca debajo del logo como si fuese una entrada y no sale visualmente como debieria ser, uso un tema premium de studiopress con genesis flamework. No se si tiene algo que ver. A ver si se te ocurre algo. Gracias de antemano!!

    • No se si te he entendido bien Alex. Entiendo que la página de inicio que estás creando se te coloca como si fuera una entrada. En ese supuesto, verifica que la estás creando como página y no como entrada y en los atributos de página mira a ver si es que estás utilizando una plantilla de post.

      • Alex dice:

        Sí, esta creada como pagina, y la plantilla que estoy usando es una creada por mi (copia y pega de codigo de un videotutorial), vamos, que deberia funcionar pero no funciona.

        El miedo que me da es comprar el visual composer y que me pase exactamente lo mismo 🙁

    • No se si te he entendido bien Alex. Entiendo que la página de inicio que estás creando se te coloca como si fuera una entrada. En ese supuesto, verifica que la estás creando como página y no como entrada y en los atributos de página mira a ver si es que estás utilizando una plantilla de post.

  • Davincci dice:

    Hola Javier, quería preguntarte si después de realizado un tema ¿se puede exportar como un template y asi poderlo usar en otra pagina?, la otra pregunta es si ¿el terminado de cada template es profesional? ¿Hay ejemplos en linea donde se pueda ver? Gracias

    • Si. Si creas la página y ves que te gusta y que la vas a querer utilizar en el futuro para otros diseños, puedes guardarlo como template. Para ello, cuando estas diseñando la página con Visual Composer, en la parte superior del editor tienes un botón que pone ‘plantillas’ o ‘templates’ y ahí puedes guardarlos para reutilizar los diseños en otras secciones. Si quisieras exportar ese diseño con Visual Composer a otra web distinta, tendrías que utilizar un plugin de exportación de diseños como Templatera.

    • Si. Si creas la página y ves que te gusta y que la vas a querer utilizar en el futuro para otros diseños, puedes guardarlo como template. Para ello, cuando estas diseñando la página con Visual Composer, en la parte superior del editor tienes un botón que pone ‘plantillas’ o ‘templates’ y ahí puedes guardarlos para reutilizar los diseños en otras secciones. Si quisieras exportar ese diseño con Visual Composer a otra web distinta, tendrías que utilizar un plugin de exportación de diseños como Templatera.

  • albert dice:

    Excelente tutorial Javier, muchas gracias!.
    Tengo una consulta. Quiero cambiar el nombre y el color de un bloque (Block1) temático de la plantilla Newspaper de Themeforest, que está hecha con visual composer y no logro encontrar dónde.
    He encontrado una captura de pantalla de cómo se hace, pero no llegar a esa opción ni la puedo pegar aquí.

    ¿Alguna idea?
    Muchas gracias!!! 🙂

    • Ve a la página dónde está dicho elemento y edítala buscando el elemento de Visual Composer. Luego selecciona el texto, y en la propia barra de herramientas, escoge el color. Si no encontraras dicho módulo, seguramente sea un widget, por lo que ve a Apariencia > Widgets y búscalo ahí. Si aún así no lo encuentras, inspecciona el elemento para sacar la clase css que tiene asignada y cambia el color metiendo el css en el apartado de tu plantilla para ello.

    • Ve a la página dónde está dicho elemento y edítala buscando el elemento de Visual Composer. Luego selecciona el texto, y en la propia barra de herramientas, escoge el color. Si no encontraras dicho módulo, seguramente sea un widget, por lo que ve a Apariencia > Widgets y búscalo ahí. Si aún así no lo encuentras, inspecciona el elemento para sacar la clase css que tiene asignada y cambia el color metiendo el css en el apartado de tu plantilla para ello.

  • javier Rodriguez dice:

    Javier, buen día cómo estás? tengo una duda de Visual Composer. Tengo una fila dividida en dos columnas y en una de ellas hay una imagen y un texto toda la fila tiene un color de fondo, como puedo hacer para que la fila quede a la altura de la fotografía. Ejemplo si la foto es es de 400,450 que toda la fila me quede de 450px es que me queda un espacio en en la parte superior e inferior de la foto.

    • Puedes jugar añadiendo espacios vacíos con el elemento Empty Space en la columna donde añades el texto hasta que veas que cuadre uno con otro o jugar con las dimensiones de la foto que hayas incrustado para igualarlo.

    • Puedes jugar añadiendo espacios vacíos con el elemento Empty Space en la columna donde añades el texto hasta que veas que cuadre uno con otro o jugar con las dimensiones de la foto que hayas incrustado para igualarlo.

  • Jossman Suarez dice:

    Saludos Javier un placer en ver tus videos son muy completos y me han ayudado mucho, tengo una duda cuando decidimos utilizar una plantilla se utilizan las paginas contenidas o creamos nuevas paginas y borramos las paginas contenidas para empezar un diseño desde cero

    • Jossman, puedes hacerlo de ambos modos. Si quieres ahorrar tiempo, puedes utilizar algunas secciones de la plantilla elegida si te cuadra. Si no te cuadran, siempre puedes hacerlo desde cero con Visual Composer.

    • Jossman, puedes hacerlo de ambos modos. Si quieres ahorrar tiempo, puedes utilizar algunas secciones de la plantilla elegida si te cuadra. Si no te cuadran, siempre puedes hacerlo desde cero con Visual Composer.

  • Javier dice:

    Hola tocayo, en primer lugar enhorabuena por tus aportaciones tanto en esta web como en los vídeos que publicas en Youtube, me los trago todos.
    Llevo unas pocas horas con este plug-in que encontré en el código de una web muy guapa y me descargué de una web el «zip», instalé este y wordpress me instaló Visual Composer, yo creo que tiene todo y no está restringido, eso sí cuando intento buscar plantillas me redirige a una web, me he de registrar, pagar…

    El tema de mi pregunta es, cuando inserto una fila y desde esta intento insertar una imagen de fondo como en tu vídeo, no tengo esta opción de insertar imagen de fondo, si en las opciones de diseño pero no me hace nada, ¿Por qué no me sale esta opción? me salen muchas mas como: espacio entre columnas, fila de altura completa, misma altura… pero no esta.

    Y este otro problema que tengo ya es la leche, he elegido una plantilla gratuita de todas las que hay en apariencia >> temas, pero lo que yo quiero es quitar toda la cabecera y menús y a través de Visual Composer crearme yo el 100%, tanto la página de inicio como el resto de apartados del menú, incluso crearme mi propio menú, logro hacerlo en el resto de apartados pero en la página principal no hay manera, a no ser que me «cargue» los header.php, footer.php, etc. del apartado «editor». ¿Cómo podría hacer esto? O sea, como si fuese una página en «blanco» y yo empezase a diseñar poco a poco.

    Muchas gracias por tu ayuda.

    • Hola Javier, ¡me alegro que te sean de utilidad mis tutoriales! En cuanto a que no te salgan las mismas opciones, si te has descargado el plugin pirata de alguna web, seguramente se deba a eso. Quizás sea una versión muy antigua y por eso no puedas seleccionar imágenes de fondo. Por eso yo siempre recomiendo comprar el plugin aquí o, en su defecto, comprar una plantilla como Bridge aquí que te lo incluye gratis.

      En cuanto a lo segundo, el menú se construye desde Apariencia > Menú. No se puede construir con Visual Composer. Luego, en las opciones de tu plantilla, puedes tocar los estilos, aunque al ser una plantilla gratuita, quizás no tengas todas las opciones. Te recomiendo que le eches un ojo a este listado con las mejores plantillas WordPress premium.

    • Hola Javier, ¡me alegro que te sean de utilidad mis tutoriales! En cuanto a que no te salgan las mismas opciones, si te has descargado el plugin pirata de alguna web, seguramente se deba a eso. Quizás sea una versión muy antigua y por eso no puedas seleccionar imágenes de fondo. Por eso yo siempre recomiendo comprar el plugin aquí o, en su defecto, comprar una plantilla como Bridge aquí que te lo incluye gratis.

      En cuanto a lo segundo, el menú se construye desde Apariencia > Menú. No se puede construir con Visual Composer. Luego, en las opciones de tu plantilla, puedes tocar los estilos, aunque al ser una plantilla gratuita, quizás no tengas todas las opciones. Te recomiendo que le eches un ojo a este listado con las mejores plantillas WordPress premium.

  • Mar dice:

    Hola Javier, muchas gracias por él tutorías, tengo una duda que me trae de cabeza. Tengo 5 columnas con un color de fondo diferente cada una. Las 5 tienen un título, una imagen única debajo y un texto explicativo. Abajo del todo el botón de leer más. Como hay textos más largos que otros los botones de abajo no quedan alineados. Si los alineó con espacios vacíos yo lo veo correcto pero desde otras pantallas se ve distinto y se descuadra. Ni idea de la solución pero supongo será algo habitual porque el diseño queda más limpio con todo alineado, gracias!!!!

    • Mar, como tu dices, como los textos son más largos en una columna que en otra, los botones salen más separados. La mejor opción es crear textos de similar longitud para que luego al añadir los botones queden alineados.

    • Mar, como tu dices, como los textos son más largos en una columna que en otra, los botones salen más separados. La mejor opción es crear textos de similar longitud para que luego al añadir los botones queden alineados.

  • Juan dice:

    Enhorabuena por tus tutoriales Javier, llevo años creando webs y desde que conocí Visual Composer siempre trabajo con ello y con plantillas compatibles. Antes usaba Joomla para los proyectos, que en sí puede que les saques más partido a las páginas web, pero en WordPress es bastante más sencillo. Solo felicitarte por tus vídeos, tutos y explicaciones ya que pocas personas se expresan y explican como tú. Sigue así, muchas gracias porque seguro que ayudas a muchas personas. Saludos.

    • Madre mía Juan, que alegría me dan este tipo de comentarios. La verdad es que da gusto tener lectores así en el blog :-). En cuanto a lo que comentas, Visual Composer unido a una buena plantilla WordPress ha hecho que la creación de páginas web sea mucho más sencilla sin duda alguna.
      ¡Gracias por tu comentario!

    • Madre mía Juan, que alegría me dan este tipo de comentarios. La verdad es que da gusto tener lectores así en el blog :-). En cuanto a lo que comentas, Visual Composer unido a una buena plantilla WordPress ha hecho que la creación de páginas web sea mucho más sencilla sin duda alguna.
      ¡Gracias por tu comentario!

  • Iván dice:

    Hola buenas,
    felicidades por los tutoriales.
    Tengo una duda. He visto la posibilidad del tema responsive. Pero no tengo claro su finalidad. Porque he intentado cambiar algunos aspectos de mi web, por ejemplo, que el estilo de un buscador de habitaciones que tengo, sea en la versión escritorio de una forma, y en la versión smartphone vertical, diferente, ya que las pantallas son más pequeñas y se vería mejor. Pero le doy a guardar cambios, y me los aplica a todos, y no crea por así decirlo versiones diferentes.
    También alguien me comentó que quizás sólo sirve estas opciones de responsive para temas de ancho de las filas y columnas, pero me pareció ver un video de los mismo de Visual Composer, donde en una versión había una imagen, y en otra no.

    Espero haberme explicado.
    Ya me dices tu opinión al respecto, y sus posibilidades.

    Gracias,
    Iván

    • Iván, que un tema sea responsive significa que se adapta a todo tipo de dispositivos. Si has creado ese formulario de reservas y no se adapta correctamente, puede que tu tema no sea responsive o que el plugin que has utilizado no construya un formulario responsive. De todos modos, si quieres hacer algo responsive de forma manual para cada tipo de pantalla y resolución, puedes utilizar media queries.
      Un saludo

    • Iván, que un tema sea responsive significa que se adapta a todo tipo de dispositivos. Si has creado ese formulario de reservas y no se adapta correctamente, puede que tu tema no sea responsive o que el plugin que has utilizado no construya un formulario responsive. De todos modos, si quieres hacer algo responsive de forma manual para cada tipo de pantalla y resolución, puedes utilizar media queries.
      Un saludo

  • Carolina dice:

    Hola Javier, ante todo muchas gracias por toda tu ayuda. Es una guía de visual composer muy clara. Yo te escribo porque en mi visual composer, en text box, no me aparece la opción para cambiarle el color a la letra. No sé cómo hacerlo!! Estoy usando un multi pack pago también, no el bridge, y ahí me vino el visual composer. Teóricamente está actualizado. Alguna sugerencia!? Muchas gracias! Éxitos y una sonrisa

    • Carolina, entiendo que te refieres a text block. normalmente, en WordPress viene escondida. Tienes que activar la segunda barra de herramientas y te salen más opciones como la del color. El botón que te digo está al lado del de insertar la etiqueta de leer más y del de incluir enlaces. De todos modos, te recomiendo echarle un ojo a este Tutorial WordPress 😉

    • Carolina, entiendo que te refieres a text block. normalmente, en WordPress viene escondida. Tienes que activar la segunda barra de herramientas y te salen más opciones como la del color. El botón que te digo está al lado del de insertar la etiqueta de leer más y del de incluir enlaces. De todos modos, te recomiendo echarle un ojo a este Tutorial WordPress 😉

  • Papyhdh dice:

    Muy buen tutorial introductorio. A mi me gustaría saber si hay forma de incluir un boton flotante en un lateral de la web??

    • Puedes hacerlo de varias maneras. Por ejemplo, poniendo una barra lateral y luego en Apariencia > Widgets colocas el elemento botón (utilizando el shortcode que te genera visual composer) en el apartado sidebar o barra lateral. Luego, instalas el plugin Q2W3 Fixed Widget y le dices que ese elemento sea fijo.

      Otra opción es utilizar el plugin Sticky Side Buttons que está bastante bien y es muy sencillito.

  • Ucecarro dice:

    ¡Enhorabuena por el post! Muy útil la información y me ha servido para comenzar mi camino experimentando con visual composer. Sin embargo tengo un problema, estoy intentando hacer una composición de imagenes con enlaces como las de esta página (justo debajo del slider) https://lifeteen.com/

    Es decir, esta estructura:
    -Columna 1: Una imagen «tipo a4»
    -Columna2:
    -Fila 1: una imagen apaisada
    -Fila 2: Dos imágenes cuadradas

    He probado a hacerlo en otra plantilla con el muffin builder y lo hace a la perfección, sin embargo, cuando lo hago con visual composer, no hay manera de alinearlas.

    Para cuadrarlas en el visual composer, toco margenes y padding, pero claro, en dispositivos móviles se me solapan

    ¿Es un problema de filas, secciones…?

    ¿Qué me recomendáis?

    ¡Muchísimas gracias!

    • ¡Hola!

      Lo que tienes que hacer es una fila dividida en 2. A la izquierda pones el elemento Imagen única y pones la foto cuadrada grande y le dices en el apartado Alineación que esté centrada. Luego, en la columna de la derecha, mete una fila y divídela en 2. Luego en cada columna que te crea Visual Composer, mete otra vez el elemento de imagen única alineada al centro. Por último, mete otra fila en esa columna de la derecha y pon de nuevo el mismo elemento alineado al centro y queda exacto.

      Eso si, antes de subir las imágenes, mídelas para que se pongan al tamaño adecuado y cuadren bien. No hace falta tocar márgenes y paddings, solo algún espacio vacío para separar los elementos verticalmente.

  • jorge dice:

    hola, como puedo agregar texto o imagen sobre el menu. que este lo mas arriba de la pagina. utilizo el tema bridge. muchas gracias

  • Oswaldo Romero dice:

    muy buen post, muy interesante, tengo una pregunta, tengo un cliente que ya tiene un sitio web pero esta construido con Visual , que no lo he trabajado mucho , y en unas correcciones que le estoy haciendo , me doy cuenta que el modulo de «Acordeón» no funciona, que podra ser?.

    Gracias

    • Oswaldo, si no funciona dicho módulo, seguramente sea porque no tiene el plugin Visual Composer actualizado a la última versión. Por tanto, habría que actualizar el plugin y, si aún así no funcionara, tendrías que actualizar plantilla y ver si hay otro plugin que esté causando conflicto desactivando uno a uno los plugins menos Visual hasta dar con el problema.

  • La plantilla WordPress que más recomiendo para utilizar con Visual Composer es Bridge, que además tiene casi 400 páginas de demostración ya montadas. Échale un ojo y me dices qué te parece.

  • Hola Jesús,

    Hay varias versiones de Visual Composer. El que yo enlazo en el post, que es este, si que lleva el frontend editor. Comprueba que es este el que has comprado 😉

  • Alaitz, depende de la versión de Visual Composer que tengas. ¿Has comprado el plugin a parte o te venía con una plantilla? Cada plantilla añade o quita elementos de Visual Composer. Si quieres tener los mismo elementos que yo, puedes utilizar la plantilla Bridge que ya te viene con el plugin gratis y con un montón de elementos adicionales.

  • Jesús, Visual Composer es un plugin premium y no existe versión gratuita. pero no te preocupes porque es muy barato para todo lo que ofrece. Te recomiendo comprarlo sin duda alguna.

  • Hola Oliviero, te contesto ahora mismo al email que me has mandado 😉

  • Francisco dice:

    Hola Javier,

    Tengo varios elementos en una página (bloques de texto e imágenes) pero el espacio entre los bloques es excesivo.
    ¿Cómo se puede reducir el espacio entre las filas?

    Gracias por tu ayuda

    • Hola Francisco,
      El espacio entre las filas lo puedes gestionar metiendo espacios vacíos más pequeños o entrando en las opciones de la fila y metiendo más o menos padding y margin. Échale un ojo a esas opciones y verás que lo puedes personalizar a tu gusto 🙂

Leave a Reply