Blog de Aula CM

Community Manager, Marketing de Contenidos, Blogs y SEO

mega-guia-visual-composer.svg

Mega-Guía de Visual Composer: el plugin que cambió WordPress

Visual Composer es el plugin definitivo que ha revolucionado el modo de diseñar páginas web con WordPress. Es una herramienta esencial si quieres diseñar rápido y fácil y conseguir un resultado espectacular en tus proyectos. Se trata de una verdadera maravilla y a lo largo de este post te voy a explicar su funcionamiento.

Antes de la llegada de los plugins de maquetación web como Visual Composer, las posibilidades de diseñar contenido visual en páginas de WordPress eran bastante limitadas. Para obtener un resultado profesional, un diseñador tenía que conocer código html y css o, como mínimo, estar familiarizado con el sistema de inserción de shortcodes.

Ahora, con Visual Composer puedes construir una web rápidamente y con un resultado profesional y gráficamente muy atractivo. En el Curso de WordPress presencial y online te enseñamos a hacer una página web completa usando Visual Composer para diseñar las secciones e insertar todo tipo de elementos como sliders, formularios, mapas, iconos, efectos parallax, etc.

La posibilidad de poder insertar con un simple click todo tipo de elementos web y de crear diferentes estructuras de página convierte a Visual Composer en una joya en nuestro WordPress. Además, también puedes guardar plantillas para aplicarlas en otras páginas, o combinar diferentes plantillas. A continuación te enseño un ejemplo de creación rápida de 3 columnas con iconos animados y texto.

Cómo funciona Visual Composer

¿Cómo funciona Visual Composer?

Su funcionamiento es muy sencillo e intuitivo. En poco tiempo podrás diseñar páginas elegantes y funcionales.

Mediante un editor visual maquetarás tus contenidos como si estuvieras usando un programa de maquetación al uso.

Serás capaz de crear diferentes retículas o estructuras de página e insertar todo tipo de elementos en ellas.

Visual Composer

 

Estos elementos vienen ya instalados con el plugin, aunque también puedes añadir nuevas extensiones para ampliar la biblioteca de elementos de Visual Composer. Para añadir un elemento haces click en el icono + dentro del contenedor donde quieras colocar el elemento y después sobre el elemento concreto que quieras insertar. Además, puedes editarlos, duplicarlos o arrastrarlos de un contenedor a otro.

 

Elementos Visual Composer
Con Visual Composer vas a poder dar a tus páginas un aspecto muy atractivo, funcional y estructurado, similar a esos temas premium que los desarrolladores web ponen a la venta en Themeforest, sin la obligación de aprender código HTML ni haber maquetado nunca antes una página web. Y además lo harás muy rápido.

 

Elementos Visual Composer

Elementos que puedes insertar con Visual Composer

Visual Composer incluye una enorme biblioteca de elementos web que van a servir para enriquecer tu web y dotarla de numerosas funcionalidades. Los elementos aparecen listados en una interfaz como la que ves abajo. Esta interfaz de elementos se despliega pulsando en el icono +. Para añadir un elemento de la lista simplemente haces click y ya lo tienes.

Elementos Visual Composer
A continuación te enumero un listado completo de los elementos que tienes disponibles en Visual Composer y te explico su funcionamiento:

Captura de pantalla 2014-12-02 a la(s) 16.19.24Fila.
Una fila es un contenedor horizontal en el que puedes insertar contenido estructurado en columnas. Para escoger una estructura determinada haz click en el icono de líneas horizontales situado en la parte superior izquierda del elemento y escoge el número de columnas que quieras.

Cada fila o franja de Visual Composer se puede desplazar y cambiar de orden, borrar y duplicar. En cada franja puedes elegir el color de fondo y otras característica especiales para cada una.

Captura de pantalla 2014-12-02 a la(s) 16.19.49Text Block. Los Text Block son cajas de texto a los cuales puedes dar formato mediante un editor sencillo similar al de cualquier procesador de texto.

Captura de pantalla 2014-12-02 a la(s) 16.17.19Separator. Línea separadora a la que puedes dar el aspecto y la anchura que quieras. Sirve para separar visualmente el contenido y estructurar mejor el diseño.

Separator with text. Añade una línea separadora con un texto incluido. Te va a servir para separar visualmente el contenido y estructurar mejor el diseño.

Message Box. Crea una caja con mensaje a la que se le puede asignar un estilo prediseñado y una animación que puedes elegir de una lista.

Captura de pantalla 2014-12-10 a la(s) 14.52.30Facebook Like. Crea una caja típica de Facebook para que los usuarios puedan dar un Me Gusta y el enlace sea visible en su propio perfil.

Captura de pantalla 2014-12-10 a la(s) 14.52.38Tweetmeme Button. Muestra un botón de Twittear para que los usuarios puedan hacer un tweet con el contenido de la página o post. Incluye cifra de tweets totales.

Captura de pantalla 2014-12-10 a la(s) 14.58.45Google+ Button. Despliega un botón de Google Plus para que los usuarios puedan recomendar el contenido en esta red social perteneciente a Google.

Captura de pantalla 2014-12-10 a la(s) 14.58.55Pinterest Button. Muestra un botón de Pinterest para que los visitantes puedan pinear el contenido y colocarlo en unos de sus muros de Pinterest.

Captura de pantalla 2014-12-10 a la(s) 14.59.05Preguntas Frecuentes. Añade una caja de FAQ o preguntas frecuentes que podemos personalizar, añadirle una animación predefinida, etc.

Captura de pantalla 2014-12-12 a la(s) 11.23.09Single Image. Para insertar una imagen de la librería multimedia o subida desde el ordenador. Podemos darle tamaño y alineación, además de un enlace.

Captura de pantalla 2014-12-11 a la(s) 16.25.47Image Gallery. Añade una galería de imágenes que vamos a cargar desde nuestra librería multimedia o el ordenador. Podemos editar el formato de la galería.

Captura de pantalla 2014-12-12 a la(s) 10.06.57Image Carousel. Para insertar un carrusel animado de imágenes desde nuestra librería multimedia o subidas desde nuestro propio ordenador.

Captura de pantalla 2014-12-02 a la(s) 16.19.41Pestañas. Añade una caja con diversas pestañas que permiten navegar entre diferentes contenidos haciendo click en cada una de ellas.

Captura de pantalla 2014-12-10 a la(s) 17.09.06Barra adicional con widgets. Este elemento nos va a servir para crear una zona adicional en la que podemos insertar todo tipo de widgets.

Captura de pantalla 2014-12-02 a la(s) 16.20.25Botón. Para insertar un botón que elegimos de entre una serie de estilos predeterminados. También podemos añadirle un icono de la biblioteca de iconos.

Captura de pantalla 2014-12-02 a la(s) 16.17.50Botón 2. Muy parecido al anterior, con la ventaja de que podemos elegir entre más opciones de estilos predefinidos y añadir color y tamaño.

Captura de pantalla 2014-12-10 a la(s) 16.58.17Tour. Sirve para añadir una caja de contenido vertical que clasificaremos en distintas pestañas, las cuales muestran dicho contenido al hacer click sobre ellas.

Captura de pantalla 2014-12-02 a la(s) 16.20.00Accordion. Inserta una caja con franjas de contenido que pueden desplegarse y mostrar más contenido al hacer click en cada una de ellas.

Captura de pantalla 2014-12-10 a la(s) 16.52.28Entradas recientes. Este elemento sirve para añadir entradas recientes que hayamos publicado y filtrarlas por categorías determinadas.

Captura de pantalla 2014-12-10 a la(s) 17.14.49Call to Action Button. Inserta un llamativo botón call to action o llamada a la acción que podemos personalizar, cambiarle el color, añadir una animación, etc.

Call to Action Button 2. Este elemento nos va a servir para añadir un botón Call to Action muy similar al anterior y que podemos personalizar de diversos modos.

Captura de pantalla 2014-12-02 a la(s) 16.18.27Video Player. Permite insertar un reproductor con un vídeo de Youtube o Vimeo. Para añadirlo, simplemente introducimos la URL del vídeo.

Captura de pantalla 2014-12-10 a la(s) 17.34.41Google Map. Muestra un mapa con la dirección que insertemos mediante un código iframe que extraemos directamente en Google Maps. Es posible editar la altura.

Captura de pantalla 2014-12-12 a la(s) 10.08.59Blog Carousel. Este elemento muestra artículos o entradas del blog en forma de carrusel animado que podemos filtrar por categorías determinadas.

Captura de pantalla 2014-12-12 a la(s) 10.10.32Post Slider. Muestra un slider con artículos o entradas del blog en forma de carrusel animado que podemos filtrar por categorías determinadas.

Captura de pantalla 2014-12-10 a la(s) 17.56.37HTML Puro. Para los más avanzados, este elemento permite insertar código HTML puro para realizar acciones que así lo requieran.

Captura de pantalla 2014-12-10 a la(s) 17.56.51JS Puro. Al igual que el anterior, este elemento avanzado nos va a servir para implementar directamente código puro en nuestra página, en este caso Javascript.

Captura de pantalla 2014-12-10 a la(s) 17.57.07Widget de Flickr. Con este elemento podrás añadir un widget con fotos de tu cuenta de Flickr y editar diversos aspectos relacionados con el modo de mostrarlas.

Captura de pantalla 2014-12-02 a la(s) 16.20.34Barra de Progreso. Inserta una barra de progreso con un porcentaje. A la barra podemos asignarle estilos y animaciones predefinidas.

Pie Chart. Con el elemento Pie Chart vamos a poder insertar un cuadro en forma circular que muestra diferentes porcentajes de manera proporcional.

Captura de pantalla 2014-12-02 a la(s) 16.19.00Empty Space. Es un espacio en blanco al que podemos dar una altura. Esencial para separar verticalmente los diferentes bloques de contenido y dar “aire” a la web.

Captura de pantalla 2014-12-02 a la(s) 16.19.16Custom Heading. Como el anterior, pero con mayor cantidad de opciones, como la elección del tipo de letra de Google Fonts, color, interlineado, etc.

Captura de pantalla 2014-12-12 a la(s) 10.11.41WP Buscar. Para insertar un campo de búsqueda dentro de nuestra web.  Podemos personalizar su estilo mediante añadiéndole una clase de CSS.

Captura de pantalla 2014-12-12 a la(s) 10.12.38WP Meta. Este elemento nos va a servir para insertar automáticamente diversos botones de log in, log out, admin, feed y enlaces de WordPress.

Captura de pantalla 2014-12-12 a la(s) 10.16.06WP Recent Comments. Con este elemento podemos incluir un widget de Comentarios Recientes realizados en mi blog y editar algunos aspectos.

Captura de pantalla 2014-12-12 a la(s) 10.22.18WP Calendar. Nos permite añadir un widget de calendario que incluye enlaces a las diferentes fechas de publicación de las entradas de mi blog.

Captura de pantalla 2014-12-12 a la(s) 10.24.05WP Pages. Con este elemento podemos insertar en nuestra página un widget que lista todas las páginas existentes en mi sitio web de WordPress.

Captura de pantalla 2014-12-12 a la(s) 10.27.55WP Tag Cloud. Para insertar en mi página web un listado en forma de nube de tags con las etiquetas más usadas en las entradas de mi sitio.

Captura de pantalla 2014-12-12 a la(s) 10.30.05WP Custom Menu. Con este elemento podemos insertar en un lugar determinado cualquiera de los menús que hayamos creado en Apariencia > Menús.

Captura de pantalla 2014-12-12 a la(s) 10.34.56WP Text. Este elemento nos va a permitir insertar un texto determinado o un código HTML en nuestro sitio web, como un widget de texto.

Captura de pantalla 2014-12-12 a la(s) 10.35.10WP Recent Posts. Para mostrar en nuestro sitio web un widget con los comentarios recientes que los visitantes han realizado en nuestro blog.

Captura de pantalla 2014-12-12 a la(s) 10.35.24WP Links. Con este elemento añadiremos en la zona que queramos un widget con los enlaces que tenemos en nuestra sección de Blogroll.

Captura de pantalla 2014-12-12 a la(s) 10.35.32WP Categories. Este elemento nos va a servir para añadir donde queramos un widget con un listado de las categorías existentes en nuestro sitio.

Captura de pantalla 2014-12-12 a la(s) 10.35.50WP Archives. Con el módulo WP Archives, al igual que en los casos anteriores, podemos mostrar un widget que contiene un listado con los archivos de nuestro sitio.

Captura de pantalla 2014-12-12 a la(s) 10.35.57WP RSS. Este elemento lo vamos a poder utilizar para colocar en nuestro sitio web un widget de sindicación RSS a nuestros contenidos.

 

Extensiones Visual ComposerUltimate Addons para Visual Composer

Es posible aumentar la biblioteca de elementos disponibles en Visual Composer. Adquiriendo el pack de Ultimate Addons para Visual Composer en el sitio de Envato podremos implementar una extensa biblioteca de módulos adicionales para nuestras páginas. Este es el listado de elementos que incluye el pack de Ultimate Addons:

Captura de pantalla 2014-12-17 a la(s) 12.11.57Animation Block. Este elemento nos va a servir para añadir fácilmente todo tipo de animaciones a cualquier otro elemento de nuestro sitio.

Captura de pantalla 2014-12-17 a la(s) 12.36.08

Advanced Button. Para crear botones de toda clase y con múltiples opciones de personalización de estilo, colores, tipografía, tamaño, etc.

Captura de pantalla 2014-12-17 a la(s) 12.36.19

Advanced Carousel. Sirve para integrar los elementos que queramos de nuestra web en una caja de estilo carrusel a la que podemos dar efectos de animación.

Captura de pantalla 2014-12-17 a la(s) 12.36.32

Countdown. Con este elemento añadimos un módulo de cuenta atrás que podemos configurar y personalizar en cuanto a formatos de tiempo, colores, etc.

Captura de pantalla 2014-12-17 a la(s) 12.36.46Flip Box. Inserta una caja animada con texto e icono. Tiene muchas opciones de personalización: tipo de animación, color, tipografía, tamaño, etc.

Captura de pantalla 2014-12-17 a la(s) 12.37.01Google Map. Despliega un mapa de Google Maps altamente personalizable en cuanto a tamaño, estilo, controladores, zoom, textos, etc

Captura de pantalla 2014-12-17 a la(s) 12.37.10

Google Trends. Inserta un gráfico completo con los resultados de Google Trends para unas palabras clave determinadas, según países o en todo el mundo.

Captura de pantalla 2014-12-17 a la(s) 12.37.43

Headings. Este elemento agrega diversos tipos de headings o encabezados con opciones de configuración relativas a tipografía, colores, separadores, etc.

Captura de pantalla 2014-12-17 a la(s) 12.37.54Timeline. Es un timeline o línea de tiempo con eventos o hitos relevantes que podremos introducir y personalizar con iconos, enlaces, tipografías, etc.

[icon_timeline timeline_style=”csstime” timeline_line_style=”dotted”][icon_timeline_item time_title=”El timeline de Aula CM” icon_type=”noicon” img_width=”48″ icon_size=”32″ icon_color=”#de5034″ icon_style=”circle” icon_color_bg=”#ffffff” icon_color_border=”#dbdbdb” icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″ time_read_text=”Read More”][/icon_timeline_item][/icon_timeline]

Captura de pantalla 2014-12-17 a la(s) 12.38.02

Icons. Nos permite agregar iconos que vamos a elegir de una galería predeterminada y que podremos personalizar en cuanto a tamaño, color, fondo, animación, etc.

Captura de pantalla 2014-12-17 a la(s) 12.38.23Info Box. Añade una caja de información con icono que podemos personalizar con diversos estilos, colores, tipografías, efectos animados, etc.

Captura de pantalla 2014-12-17 a la(s) 12.38.32Info Circle. Sirve para poner una caja de información circular con icono que podemos configurar como en el caso del elemento anterior.

Captura de pantalla 2014-12-17 a la(s) 12.38.44Info List. Con este elemento vamos a poder conectar varios bloques de texto en una sola lista y añadir iconos, personalizar estilo y color, tamaño de texto, etc.

Captura de pantalla 2014-12-17 a la(s) 12.38.50Info Tables. Inserta tablas de información a las que podremos asignar estilos de diseño predefinidos, colores, encabezados, iconos, enlaces, etc.

[ultimate_info_table design_style=”design01″ color_scheme=”black” package_heading=”Título de la tabla” package_sub_heading=”Esto es una info table” icon_type=”selector” icon=”Defaults-info-sign” img_width=”48″ icon_size=”32″ icon_color=”#333333″ icon_style=”none” icon_color_bg=”#ffffff” icon_color_border=”#333333″ icon_border_size=”1″ icon_border_radius=”500″ icon_border_spacing=”50″][/ultimate_info_table]

Captura de pantalla 2014-12-17 a la(s) 12.39.06Interactive Banner. Despliega un banner interactivo con una imagen y un texto. Puedes elegir diversos estilos predefinidos, colores, tipografías, etc.

Captura de pantalla 2014-12-17 a la(s) 12.38.59Interactive Banner 2. Similar al elemento anterior. Inserta un banner interactivo con una imagen y un texto, con posibilidad de personalizar algunos estilos.

Captura de pantalla 2014-12-17 a la(s) 12.39.14Just Icon. Para insertar un icono de la librería de iconos predefinidos del plugin o desde la librería multimedia. Se pueden añadir animaciones, estilos, colores, etc.

Captura de pantalla 2014-12-17 a la(s) 12.39.23List Icon. Nos permite elegir y personalizar iconos de la librería que viene predeterminada con el plugin para añadirlos a elementos de una lista.

Captura de pantalla 2014-12-17 a la(s) 12.39.37Modal Box. Inserta una caja predefinida de bootstrap a la que podemos incluir un icono, textos, imagen, vídeo de Youtube o Vimeo, botón, etc.

Captura de pantalla 2014-12-17 a la(s) 12.39.43Price Box. Con este elemento se pueden crear cajas de precios y elegir entre diversos diseños predefinidos y colores. Además, se puede colocar un botón con enlace.

[ultimate_pricing design_style=”design03″ color_scheme=”green” package_heading=”Curso de WordPress” package_sub_heading=”Diseña tu web con Aula CM” package_price=”350″ package_unit=”€” package_btn_text=”Inscríbete” package_link=”url:http%3A%2F%2Faulacm.com%2Fcurso-de-wordpress%2F||target:%20_blank”][/ultimate_pricing]

Captura de pantalla 2014-12-17 a la(s) 12.40.01Spacer Gap. Este elemento añade un espacio vacío vertical. La diferencia con el empty space básico es que podemos definir la altura para cada dispositivo.

Captura de pantalla 2014-12-17 a la(s) 12.40.10Counter. Se trata de un elemento de contador al que podemos añadir iconos o imágenes de nuestra galería, tamaños, estilos, animaciones, etc.

Captura de pantalla 2014-12-17 a la(s) 12.40.33

Swatch Book. Para insertar un elemento desplegable a modo de muestrario con diferentes contenidos que podemos ver u ocultar haciendo click.

 

Extensiones Visual ComposerExtensiones all in one para Visual Composer

Aparte del anterior, existen otros packs para agregar elementos a la biblioteca, como es el caso del pack de extensiones All in One para Visual Composer. A continuación te pongo un listado con los elementos que se pueden implementar con esta extensión:


Captura de pantalla 2014-12-11 a la(s) 16.52.12Font Awesome Animation.
 Con este elemento podemos añadir cajas de texto con iconos predefinidos a los que se pueden asiganr una animación predeterminada.

Captura de pantalla 2014-12-11 a la(s) 16.52.24DA Gallery. Este elemento sirve para insertar una galería de imágenes con efectos predefinidos cuando colocamos el puntero sobre las imágenes.

Captura de pantalla 2014-12-11 a la(s) 16.52.35Fluidbox. Para insertar una imagen con un ligero efecto lightbox, de modo que al pinchar la imagen queda agrandada en primer plano y alrededor un fondo suave.

Captura de pantalla 2014-12-11 a la(s) 16.52.47App Mockup. Con este módulo podremos insertar una galería de imágenes en 3D con animación que se abren en modo lightbox al hacer click sobre ellas.

Captura de pantalla 2014-12-11 a la(s) 16.53.04Depth Modal. Añade un efecto animado de lightbox a cualquier contenido y hace un efecto de alejamiento del fondo mientras el contenido viene a un primer plano.

Captura de pantalla 2014-12-11 a la(s) 16.53.13Scrolling Notification. Despliega una caja lateral al hacer scroll vertical. Esta caja puede editarse en cuanto a estilo e incluir contenido personalizado.

Captura de pantalla 2014-12-11 a la(s) 16.53.23Masonry Gallery. Sirve para inluir una galería de imágenes apiladas una sobre otras y con tamaños variables, las cuales se abren en formato lightbox.

Captura de pantalla 2014-12-11 a la(s) 16.53.45iHover. Para añadir efectos animados de hover, es decir, efectos que se muestran cuando pasamos por encima de un elemento con el puntero del ratón.

Captura de pantalla 2014-12-11 a la(s) 16.53.51Profile Card. Sirve para desplegar un elemento predefinido que muestra usuarios con foto e iconos de perfiles sociales. También puede añadirse una animación.

Captura de pantalla 2014-12-11 a la(s) 16.54.00Testimonial Carousel. Para incluir un módulo con formato carrusel que muestra testimonios y perfiles de los autores de dichos testimonios.

Captura de pantalla 2014-12-11 a la(s) 16.54.10Stack Gallery. Con este elemento se puede implementar una galería animada de imágenes que simula un grupo de fotos apiladas una encima de otra.

Captura de pantalla 2014-12-11 a la(s) 16.54.17Figure Navigation. Para insertar un menú de navegación cuyos elementos se despliegan de un modo muy visual mostrando fotos, textos y botones.

Captura de pantalla 2014-12-11 a la(s) 16.54.28Ribbon. Para añadir a las fotos un marco prediseñado que incluye un elemento ribbon o cinta sobre la que escribir un texto. Además, añade un pie de foto con texto.

Captura de pantalla 2014-12-11 a la(s) 16.54.43Medium Gallery. Con este elemento podemos insertar galerías de imágenes con diferentes estructuras de retícula que se abren en modo lightbox de color claro.

Captura de pantalla 2014-12-11 a la(s) 16.54.50Product Cover. Despliega una galería de imágenes con un menú inferior de navegación formado por imágenes pequeñas o thumbnails.

Captura de pantalla 2014-12-11 a la(s) 16.54.57Image with Arrow. Para colocar en nuestro sitio una imagen con caja de texto explicativo que incluye un detalle gráfico triangular en forma de flecha.

Captura de pantalla 2014-12-11 a la(s) 16.55.04Parallax. Con este elemento podemos añadir el típico efecto parallax de imagen de fondo con contenidos superpuestos a modo de ventana.

Captura de pantalla 2014-12-11 a la(s) 16.55.12Animate Button 01. Inserta un botón con efectos predeterminados de animación muy vistosos. Puede incluir un icono animado sobre el botón.

Captura de pantalla 2014-12-11 a la(s) 16.55.22HotSpot. Este elemento añade a una imagen diversos puntos interactivos con icono y texto explicativo muy útiles para realizar infografías

Captura de pantalla 2014-12-11 a la(s) 16.55.30To Do List. Nos permite crear listados muy visuales de cosas pendientes por hacer con iconos y textos, planes de precios con botones, cajas con pestañas, etc.

Captura de pantalla 2014-12-11 a la(s) 16.55.45Accordion. Cajas de contenido con efecto de acordeón desplegable y efectos interiores. Más personalizables que el elemento básico de Visual Composer.

Captura de pantalla 2014-12-11 a la(s) 16.56.04Tabs. Introduce una caja estilo pestañas que podemos personalizar: colores, textos, fotos, iconos, etc. Mejora el elemento básico de pestañas de Visual Composer.

Captura de pantalla 2014-12-11 a la(s) 16.56.11Carousel & Gallery. Nos permite insertar una galería de imágenes estilo slider o carrusel, con navigación inferior en forma de thumbnails o imágenes pequeñas.

Captura de pantalla 2014-12-11 a la(s) 16.56.19Zoom or Magnify. Con este elemento podemos añadir diversos efectos de zoom y ampliación mediante un visor a las imágenes que queramos.

Metro Carousel and Tile. Para crear diversos estilos de slideshow o carrusel de imágenes, con diferentes tipos de navegación mediante botones, flechas, etc.

Captura de pantalla 2014-12-11 a la(s) 16.56.41Draggable Timeline. Permite insertar líneas de tiempo o timeline con diversos tipos de iconos y un marcador de progreso que se puede deslizar a lo largo de la línea.

Captura de pantalla 2014-12-11 a la(s) 16.56.51Thumbnail with Caption. Añade una imagen con caja adyacente de texto cuyo color y posición podemos modificar, insertar un botón, etc.

Captura de pantalla 2014-12-11 a la(s) 16.56.58Fullscreen Intro. Con este elemento añadimos una imagen a tamaño completo de pantalla a modo de intro que puede incluir textos, iconos, efectos, etc.

Captura de pantalla 2014-12-11 a la(s) 16.57.04Page Transition. Este elemento nos va a servir para añadir diversos efectos predefinidos con espectaculares transiciones entre las diferentes páginas del sitio.

Captura de pantalla 2014-12-11 a la(s) 16.57.12Separator with Icon. Inserta una barra horizontal separadora que podemos customizar a nuestra voluntad, añadirle iconos de todo tipo, cambiar colores, etc.

 

Extensiones Visual ComposerExtensión de Visual Composer para copiar y pegar franjas: VC Clipboard

Para copiar/pegar franjas o filas podemos adquirir la extensión VC Clipboard en la web de Envato. Para copiar una franja colocamos el puntero en la zona superior derecha de la franja, junto a los iconos de editar/duplicar/eliminar.

A continuación, hacemos click en copy y posteriormente en paste. Esta funcionalidad resulta especialmente útil para copiar y pegar franjas de una página a otra, pues la función duplicar sólo permitía hacerlo dentro de una misma página.

Copiar Pegar Visual Composer

 

Extensiones Visual ComposerExtensión de Visual Composer para deshacer cambios: VC Undo/Redo

Con esta extensión añadimos la funcionalidad de Deshacer/Rehacer que resulta muy útil cuando queremos corregir cambios recientes realizados en nuestro Visual Composer, tal como si estuviéramos usando un software de edición.

Deshacer Visual Composer

 

Visual Composer WooCommerceExtensión de Visual Composer para WooCommerce

El pack de WooCommerce para Visual Composer añade a la biblioteca de Visual Composer una serie de elementos que van a servir para insertar con un solo click los shortcodes necesarios para crear una tienda online completa en WordPress.

Visual Composer WooCommerce

 

Extensiones Visual ComposerOtras extensiones para Visual Composer

Se pueden adquirir más extensiones de Visual Composer según nuestras necesidades específicas. En el apartado de Codecanyon dentro de la web de Envato tenemos disponibles infinidad de addons o extensiones para añadir funcionalidades concretas a nuestro menú de elementos de Visual Composer.

También puede suceder que haya temas que ya traigan incluidas algunas extensiones en función de los plugins requeridos por el tema. Por ejemplo, un tema que traiga incluidos los plugins Contact Form 7 y LayerSlider probablemente tendrá disponibles sus correspondientes elementos en Visual Composer para poder insertarlos fácilmente. Entre otros, podemos encontrar los siguientes elementos:


Captura de pantalla 2014-12-02 a la(s) 16.18.51Contact Form 7.
 Con este elemento podemos insertar en nuestra página un formulario diseñado previamente con el plugin Contact Form 7.

Captura de pantalla 2014-12-12 a la(s) 12.00.11LayerSlider. Este elemento sirve para implementar en nuestro sitio web un slider que tengamos previamente hecho con el plugin LayerSlider.

Captura de pantalla 2014-12-02 a la(s) 16.20.57Heading. Encabezados o títulos jerarquizados mediante etiquetas <h> de HTML. Sirven para escribir encabezados de sección o frases importantes. Claves para el SEO.

Captura de pantalla 2014-12-02 a la(s) 16.22.30Shaped Image. Este elemento sirve para incluir una imagen dentro de una forma predefinida a la cual podemos dar todo tipo de efectos visuales.

Captura de pantalla 2014-12-02 a la(s) 16.21.57Lead Paragraph. Con este elemento vamos a poder añadir un párrafo de tipo lead o entradilla, ideal para escribir los subtítulos o párrafos iniciales.

Captura de pantalla 2014-12-02 a la(s) 16.20.48Icono. Para añadir un icono predeterminado de la extensa biblioteca de Font Awesome. Podemos asignarle además el tamaño que queramos.

Captura de pantalla 2014-12-03 a la(s) 11.04.54Featured Icon. Permite elegir una forma geométrica determinada y añadirle un icono de la librería. Además, podemos incluir un efecto de animación y una sombra.

Captura de pantalla 2014-12-02 a la(s) 16.22.22Feature. Este elemento es prácticamente igual que el anterior pero incluye la posibilidad de añadirle un texto junto al icono que hayamos insertado.

Captura de pantalla 2014-12-02 a la(s) 16.22.06Blockquote. Permite añadir un texto determinado que insertamos en forma de cita. Además, podemos añadir un autor de dicha cita o frase y una fuente.

Captura de pantalla 2014-12-02 a la(s) 16.20.10

Panel. Sirve para insertar un panel o caja con un estilo predeterminado con un título y un contenido que podemos incluir en la edición del elemento.

Captura de pantalla 2014-12-02 a la(s) 16.20.17Alert. Con este elemento podemos implementar en nuestra web una caja predeterminada de alerta y personalizarla según sea su función concreta.

Captura de pantalla 2014-12-02 a la(s) 16.22.39Pricing Column. Sirve para añadir tablas de precios para diferentes productos o servicios, con la posibilidad de editar títulos, textos descriptivos, botones y moneda.

Captura de pantalla 2014-12-09 a la(s) 17.59.05Counter. Este elemento sirve para incluir en nuestra página un contador numérico al que añadimos una cifra concreta para que realice una simulación de conteo.

Portfolio. Muestra un bloque de elementos o items de portfolio divididos en diferentes columnas que podemos especificar, así como la forma, filtrar por categorías, etc.

Staff List. Añade un listado de miembros de staff en columnas que podemos definir y filtrar. Se pueden añadir formas determinadas, iconos sociales, etc.

Featured Staff. Crea una sección de staff para uno de los miembros. Podemos editar el tamaño de esta sección, asignarle una forma determinada, iconos sociales, etc.

 

Guardar Plantilla Visual ComposerCómo guardar una plantilla con Visual Composer

Visual Composer permite guardar como plantilla una página que estemos editando para posteriormente cargar su contenido en otra página diferente, ya sea una página nueva totalmente vacía o una página que estemos editando.

Además, podemos guardar diferentes páginas como plantillas y más adelante cargarlas en una página nueva, lo cual nos permite hacer combinaciones de diversas páginas en una única página. Para guardar nuestro contenido como plantilla hacemos click en el botón de guardar plantilla que se encuentra en el menú principal de Visual Composer, a la derecha del botón + de añadir elementos.

A continuación ponemos un nombre para nuestra plantilla y guardamos. Posteriormente, cuando queramos cargar esta plantilla en otra página diferente, iremos de nuevo a esta sección de plantillas y cargaremos la que queramos.

Guardar Plantilla Visual Composer

 

Curso de WordPress MadridUsa plantillas compatibles con Visual Composer

Con Visual Composer podrás diseñar páginas web avanzadas de manera rápida e intuitiva. Resulta gratificante poder diseñar una web profesional en tan poco tiempo y sin la necesidad de ser un experto en diseño web.

Es por ello que para nosotros Visual Composer es un plugin imprescindible, ya que ha cambiado el modo de diseñar en WordPress y se ha convertido en un standard que te permitirá diseñar con las mejores plantillas.

Aprender Visual Composer permite a nuestros alumnos del curso de WordPress abordar con garantías sus compromisos de diseño web tanto personales como profesionales y obtener resultados sorprendentes.

 

Visual Composer WordPressConclusión: ¿Por qué Visual Composer es un Plugin imprescindible?

  1. Es fácil de usar
  2. Es profesional
  3. Es económico
  4. Es rápido y eficaz
  5. Es muy personalizable
  6. Tiene buen servicio de soporte
  7. Ofrece numerosas extensiones
  8. Se ha convertido en un standard
  9. Es compatible con muchísimos temas
  10. Los contenidos son responsive (se adaptan bien a todos los dispositivos)

¿Y tú? ¿Conocías ya el plugin Visual Composer? ¿Lo has usado en algún proyecto web? Ya sabes que puedes consultarnos dudas y compartir tus experiencias. Nos encantará leer tus comentarios.

Si te ha gustado este post, te agradeceríamos mucho que nos votaras aquí como mejor blog de Marketing y Social Media de los Premios Bitácoras 2015. ¡Nos encantaría contar con tu ayuda! Es muy sencillo, no te llevará mucho tiempo. ¡Gracias!

Danos tu opinión, cuéntanos tu experiencia

Mega-Guía de Visual Composer: el plugin que cambió WordPress
5 (100%) 22 votes

Sobre el Autor 

Especialista en WordPress y SEO, Diseñador y Periodista. Me apasiona la comunicación gráfica y escrita. En Aula CM me dedico sobre todo a los Cursos de WordPress y SEO, tutorías con alumnos y también a crear webs y optimizarlas. Mi blog es ErnestoGBustamante.com

    Más en:
  • facebook
  • googleplus
  • linkedin
  • pinterest
  • twitter
Ernesto G BustamanteMega-Guía de Visual Composer: el plugin que cambió WordPress
Comparte esta publicación

161 comentarios

Únete a la conversación
  • Elena - 4 febrero, 2015 responder

    ¡Impresionante el artículo Ernesto! útil y explicado de una forma visual que facilita su aprendizaje. Creo que es una de las mejores chuletas de visual que he visto, me dan ganas de ponerme a crear páginas como una loca, allá que voy!!

  • Carlos Naranjo - 4 febrero, 2015 responder

    Que buen post y que útil información. ¡Muchas gracias Ernesto!

  • Carolina - 4 febrero, 2015 responder

    Me dejas sin palabras ;p Pero me queda una que vale por todas: IMPRESIONANTE!!

  • EVA MARÍA RUBIO - 4 febrero, 2015 responder

    Sois geniales, de verdad. Gracias por el trabajo, la estética de la página, las explicaciones y el saber trasmitir amigablemente y no provocar la sensación de querer salir corriendo. Un gusto conoceros y seguiros.

  • Miguel Garvía - 5 febrero, 2015 responder

    ¡Enhorabuena Ernesto! Magnifico resumen de las posibilidades de VC, muchas de ellas desconocidas para mi hasta hoy. Gracias por tus aportaciones y ayudas.

  • Delia Jorge - 7 febrero, 2015 responder

    Gracias por descubrirme este nuevo mundo para mí. Con tu ayuda y la de Bruno (no se nos vaya a olvidar) he aprendido mucho y me habéis abierto muchas puertas donde indagar.

  • José Luis Culebras - 7 febrero, 2015 responder

    Esta semana probé a instalar Visual Composer y me gustó, aunque también me sobrepasó un poco porque no encontré apenas tutoriales. Este post me viene como caído del cielo. ¡Gracias!

  • Ernesto - 9 febrero, 2015 responder

    Gracias a todos por comentar. Me alegro de que os sea de utilidad. Para cualquier duda que tengáis con Visual Composer estoy a vuestra disposición 😉

    Manuel - 6 marzo, 2015 responder

    Buenas tardes,
    Tengo un problema con el componente,
    Si creo una pagina con una sola fila y en ella dos columnas como puedo asignarle una imagen de fondo a la fila entera?? a las páginas de wordpress se les asignan algun ID que luego pudiera utilizar en css para otorgarle esa imagen de fondo?

    Gracias de antemano

    Un saludo

    cristian - 18 noviembre, 2015 responder

    es sencillo, visual composer trae la funcion de editar a nuestro gusto cada row, debes de editar la que estan indicando agregado el fondo pero por separado.

  • Luis Rodríguez Cid - 9 febrero, 2015 responder

    Espectacular Ernesto!!!!
    Pondré este post como el favorito de mis favoritos.
    Muchas gracias por compartir esta información tan útil.

    Ernesto - 4 marzo, 2015 responder

    Gracias por comentar, Luis, me alegro de que te sea de utilidad 😉

  • Luis A. Román - 10 febrero, 2015 responder

    Magnifico artículo, has conseguido que tenga curiosidad por Visual Composer. Enhorabuena

  • Rubén Suárez - 18 febrero, 2015 responder

    Sencillamente BRUTAL. No hay más que añadir 🙂

  • Hector Tudanca - 19 febrero, 2015 responder

    Una bomba de post!!!

  • Sandra Sucre - 23 febrero, 2015 responder

    excelente post… tendrás un link de descarga gratuita para probarlo, se ve genial.

  • Santos - 24 febrero, 2015 responder

    Genial Ernesto. Me ha gustado mucho tu post. Yo quería preguntarte algo. ¿Cómo se pueden meter esos elementos dentro de la página de inicio? Como supones, tengo una pagina estática y las entradas se ven en la página “blog”, una página en blanco a la que tengo asignado recoger las entradas. Pero claro, luego por mucho que yo añada con el Visual composer, no me aparece en esa página de “indice de entradas”, sino en la página “blog” que, evidentemente no puedo ni ver porque la tengo a signada a recoger el indice de entradas. Por favor a ver si alguien me puede ayudar. Gracias.

    Ernesto - 4 marzo, 2015 responder

    Hola Santos,
    para páginas especiales como Blog, que muestran dinámicamente las entradas de tu sitio, no podrías crear un diseño personalizado con Visual Composer, pues no se trata de una página estática al uso, sino que sirve como recipiente de las entradas.

    Para poder crear diferentes diseños y estructuras de páginas de Blog, Portfolio, etc., te recomiendo que uses un plugin muy interesante que se llama Essential Grid. Funciona muy bien y te va a permitir hacer esto que deseas. Te dejo un enlace a la página del plugin en Themeforest.

    Espero haberte ayudado con mi respuesta, un saludo 😉

  • Lucas - 26 febrero, 2015 responder

    Hola! que temas recomendas para instalar visual composer??

    Ernesto - 4 marzo, 2015 responder

    Hola Lucas, te aconsejo que cuando vayas a comprar un tema en Themeforest, te asegures de que incluyen Visual Composer, suele decirlo en las especificaciones del tema.

    Nosotros recomendamos que uses temas premium como Total y Hazel. Son plantillas profesionales para hacer páginas web en WordPress que funcionan muy bien con Visual Composer y tienen un diseño muy moderno y elegante. En Aula CM enseñamos a usar la plantilla Total en el curso de WordPress, y hacemos una página web completa desde cero usando Visual Composer.

    Espero haber resuelto tu duda, saludos 😉

  • Rocío - 6 marzo, 2015 responder

    Muchas gracias Ernesto por el post. Estoy utilizando visual composer y hay cosas que no me gustan, seguramente porque aún no controle la herramienta ¿hay alguna forma de reducir los espacios que se crean entre los elementos? Por ejemplo, titular y fotografía. Además, cuando pongo un marco a una imagen- insertada en una fila de tres columnas- y clono ese diseño no respeta el marco, es decir, que une las tres imágenes… Si me pudieras ayudar estaría muy agradecida

    Ernesto G Bustamante - 9 marzo, 2015 responder

    Hola Rocío,
    para modificar esto que comentas, el modo de hacerlo sería definiendo estilos nuevos en Custom CSS. Puedes desplegar el Inspector de Elementos en Chrome, apuntar el nombre de las clases de los elementos en cuestión, y después redefinir sus márgenes y rellenos.

    Un consejo, si por ejemplo quieres colocar una imagen debajo de un titular y ves que queda mucho espacio entre ambos, mete la imagen dentro del mismo Text Block donde tienes el título y así reduces los espacios.

    Espero que te haya servido de ayuda. Saludos 😉

  • Manuel - 7 marzo, 2015 responder

    Buenas tardes,
    El componente es muy bueno, facilita muchas cosas pero tengo un problema con el componente,
    Si creo una pagina con una sola fila y en ella dos columnas como puedo asignarle una imagen de fondo a la fila entera?? a las páginas de wordpress se les asignan algun ID que luego pudiera utilizar en css para otorgarle esa imagen de fondo?

    Gracias de antemano

    Un saludo

    Ernesto G Bustamante - 9 marzo, 2015 responder

    Hola Manuel,
    puedes definir una imagen de fondo para una fila entera haciendo click en el icono de lápiz de la parte superior derecha de la fila, que es donde se definen las opciones globales de la fila. Saludos

  • DLuiso - 8 marzo, 2015 responder

    Tengo una duda: como puedo insertar elementos de visual composer en un sidebar?. Existe algún widget que sirva como vía para aplicar VC dentro de ellos?

    Ernesto G Bustamante - 9 marzo, 2015 responder

    Hola DLuiso,
    puedes hacer esto que planteas descargando un addon o extensión del plugin en Themeforest. Te dejo el enlace: Visual Composer in Sidebars Addon

    Saludos 😉

  • Marcela Talero - 9 marzo, 2015 responder

    ¡¡Gracias Ernesto!!. Me ha sido de gran utilidad conocer a fondo los elementos de Visual Composer.
    Como te decía el otro día, con el curso de WP has conseguido quitarme el miedo que me daba crear una página web 😉

    Ernesto G Bustamante - 10 marzo, 2015 responder

    Gracias a ti por ponerle tantas ganas, Marcela. Cambiemos el miedo por entusiasmo y a diseñar 😉

  • David - 28 abril, 2015 responder

    Una pregunta referente al plugin, sabes si existe una extención para poder añadir el editor de visual composer en alta de un producto para una tienda woocommerce, tengo el visual composer pero solo lo tengo activo en la parte de creacción de páginas! Me gustaría saber si existe un extención del plugin para el alta de productos de woocommerce!!

    Gracias por todo Ernesto, has hecho un gran post!!!
    Felicidades!

    Ernesto G Bustamante - 28 abril, 2015 responder

    Hola David,
    gracias por comentar. Te respondo a tu pregunta. En realidad, para activar el editor de Visual Composer en los productos no necesitas ningún plugin. Es mucho más fácil. Tienes que ir a Ajustes > Maquetador Visual, que es la zona donde puedes gestionar algunas cosas del plugin. En Configuración General > Tipos de contenidos, puedes marcar las secciones en las que quieras tener activo el editor visual. Por defecto lo tienes en páginas, pero haciendo click en la casilla correspondiente puedes activarlo para entradas y productos, además de los Custom Post Types como Portfolio, Testimonios, Staff, etc.

    Saludos 😉

  • Claudio - 1 mayo, 2015 responder

    Hola estoy probando visual Composer, y he generado una plantilla de prueba, pero no me aparece el boton “+”, para guardarla y poder usarla en otra página. Tenes alguna idea de lo puede estar sucediendo, para que no me aparezca?. Gracias

    Claudio - 2 mayo, 2015 responder

    Perdón, ya encontré al botón para agregar plantillas.
    En realidad cuando hice la pregunta estaba en la opción “Grid elements”.
    Cierro esta pregunta y abro otra.

  • Claudio - 2 mayo, 2015 responder

    Para que sirve la opción “Grid elements”??

    Ernesto G Bustamante - 13 mayo, 2015 responder

    Hola Claudio,
    la opción Grid Elements sirve para crear estructuras predeterminadas para páginas o entradas que luego puedes cargar con Visual Composer. Saludos 😉

  • veronica - 6 mayo, 2015 responder

    Hola, me gustaría saber si alguien sabe como insertar una imagen “testimonials”, no lo puedo editar.

    Ernesto G Bustamante - 13 mayo, 2015 responder

    Hola Verónica,
    para añadir una imagen con la foto del autor de cada testimonio, debes ir a Testimonials en tu menú lateral principal del escritorio de WordPress, donde verás un listado con todos los testimonios creados. Aquí puedes entrar a editar los testimonios y asignarles una imagen destacada a cada uno. Al tratarse de un Custom Post Type, este tipo de items (al igual que los items de Portfolio, Staff, etc) se editan en esta parte, y posteriormente en la edición de la página insertas un Testimonials Grid o Testimonials Slider para hacer que se muestren. Además, puedes filtrarlos por categorías concretas.

    Espero haber resuelto tu duda, saludos 😉

  • Ruben - 8 mayo, 2015 responder

    Muy buen post Ernesto! Aclaraste mis dudas y me motivaste mas de lo que estaba a usar Visual Composer. Solo tengo unas preguntillas como novato al fin…, cuando compro VC y lo uso en un proyecto de WP cómo puedo reutilizar el plugin en otro proyecto?, es posible? donde y como guardo las plantillas que ya he creado con VC? Cuando me registro para comprarlo es una cuenta de por vida, osea el plugin es mio para siempre que lo quiera usar?? Gracias…

    Ernesto G Bustamante - 13 mayo, 2015 responder

    Hola Rubén, gracias por comentar,
    a pesar de que técnicamente es fácil usar un mismo plugin en varias webs subiendo el .zip de instalación, en realidad hay que tener en cuenta unas consideraciones legales.
    Si compras el plugin con licencia regular (la compra a precio normal de 33$) legalmente sólo podrías usarlo en un proyecto propio. Comprando la licencia extendida además podrías incluir el plugin en una web que hagas a un cliente. Te dejo un enlace al documento de licencia oficial del plugin para que puedas ver las condiciones: http://codecanyon.net/licenses/standard?license=regular

    Espero haberte servido de ayuda, ¡saludos!

  • Eva - 18 mayo, 2015 responder

    ¡Hola Ernesto!
    Lo primero felicitarte por el post. Muy completo, claro y sencillo. A pesar de eso, yo que soy profana en esto de diseñar mi propia web, tengo una pregunta. Me he leído casi todas las aplicaciones que has descrito pero no sé cuál es la más adecuada para lo que quiero hacer. ¿Cuál crees que debería utilizar para hacer un slide o carrusel en el que la imagen de fondo sea fija pero que el texto vaya pasando solo? porque no sé si con las herramientas básicas del Visual Composer se puede hacer o por el contrario debería comprar uno de los packs a mayores. ¡Saludos y gracias!

    Eva.

    Ernesto G Bustamante - 22 mayo, 2015 responder

    Hola Eva,
    para hacer un slider yo usaría el plugin LayerSlider para WordPress, que es más específico para hacer lo que comentas. Con este plugin vas a poder diseñar tus sliders con total libertad.

    En este enlace puedes obtenerlo: http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246

    Gracias por tu comentario, un saludo 😉

  • Julian Arroyo - 22 mayo, 2015 responder

    Buenos días. ¿Sabes si con este plugin u otro puedo hacer que mi WordPress sea “fullscreen” en logar de “boxed”? Es lo que tengo ahora pero no puedo, o no se, cambiarlo desde las opciones del “theme options”.
    GRACIAS!!!!

    Ernesto G Bustamante - 22 junio, 2015 responder

    Hola Julian,
    para cambiar los layouts de página y hacer que sean full width o boxed debes mirar en las opciones de tu tema, pues este tipo de cosas no dependen de Visual Composer sino de la plantilla en sí. Espero haberte resuelto la duda, saludos!

  • Carlos - 26 mayo, 2015 responder

    He comprado el visual composer, me parece buenisimo. Solo veo un problema veo que es incompatible con CKeditor, el CKeditor lo utilizaba para ordenarme las fotos en diferentes carpetas. Eso He desactivado el CK y ahora no veo como clasificarme las cientos de fotos que tengo con el visual.
    Existe algo para poder ordenar las fotos en carpetas y no tener todas las fotos mezcladas en la biblioteca de medios? Hay alguna extensión del Visual que integre carpetas en el editor del wordpress?
    Gracias

    Ernesto G Bustamante - 22 junio, 2015 responder

    Hola Carlos,
    hay un plugin muy bueno para ordenar todos los elementos de tu librería multimedia en diferentes categorías. Se llama Enhanced Media Library, y lo puedes descargar gratis desde este enlace: https://wordpress.org/plugins/enhanced-media-library/

    Saludos 😉

  • Eleni - 28 mayo, 2015 responder

    Hola, me compre el plugin después de leer el artículo. Y me gusto pero para conseguir customizar tu web por completo tienes que comprar otros para complementarlo.

    Una cosa que creo que podríais incluir, no se si lo mencionáis y se me ha pasado a mi. Es que algunos temas premium incluyen una versión del visual composer adaptadas a sus temas, que entran en conflicto con el propio plugin, como sucedió en mi caso con el tema Salient. Sería un poco jodienda comprarte un theme de 60€ y pagar 30€ o más por el plugin de visual composer para que esté guardado en una carpeta.

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Eleni,
    cuando compras una plantilla que incluye Visual Composer no es necesario que lo compres aparte porque la plantilla ya te lo incluye en el pack y te lo van actualizando con cada nueva versión que descargas del tema. Además, como bien dices, algunos temas traen un Visual Composer adaptado para aprovechar aún más las posibilidades del tema.

    Gracias por tu sugerencia 😉

  • Raquel - 3 junio, 2015 responder

    Enhorabuena por el post, está estupendo una pregunta ¿qué pasa con las columnas? tiene algunas por defecto y cuando le das a custom layout aunque te deja crear las tuyas propias luego se desconfigura en la página, no te deja, yo quería cambiar una que tengo de 1/4 + 1/4 + 1/2 a 1/6 + 2/6 + 3/6 porque quiero esa proporción la primera más pequeña, la segunda un poco más grande y la tercera más grande ¡pero no me deja! ¿alguna solución? gracias

    Ernesto G Bustamante - 22 junio, 2015 responder

    Hola Raquel,
    de momento el plugin no deja configurar layouts complejos como el que comentas, al igual que estructuras impares que no sean las tres columnas. Esperemos que en sucesivas actualizaciones amplíen esta funcionalidad. Un saludo

  • Mariona R - 6 junio, 2015 responder

    Ernesto sabes como puedo coger un shortcode de un milestone creado con Ultimate visual Addons? me gustaría pegarlo en la plantilla predefinida que tiene mi wordpress. Sabrias como se cogen los shortcodes? Muy útil tu explicación y lo más importante! completa.

    Muchas gracias,
    Mariona R

    Ernesto G Bustamante - 30 junio, 2015 responder

    Hola Mariona,
    para ver los elementos de Visual Composer en formato shortcode haces click en Classic Mode en la edición de la página. De este modo verás todo el contenido en código y sólo tendrías que buscar la parte que muestra los milestones. Espero que te haya servido, saludos 😉

  • israel - 20 junio, 2015 responder

    Muy buenas, antes de nada agradecer el post, y me gustaría saber por que cuando añado una imagen simple desde el maquetador visual la imagen no ocupa toda la pantalla aun así estando el tamaño de ella en full, tengo que configurar algún margen o algo? le agradecería la respuesta. Gracias.

    Ernesto G Bustamante - 30 junio, 2015 responder

    Hola Israel,
    para que las imágenes se vean en ancho total de pantalla debes configurar tu tema WordPress para que te permita hacerlo, pues esto no depende directamente del plugin Visual Composer. Generalmente, estas opciones del tema se encuentran en la propia página que estás editando, en la parte derecha donde dice Atributos de página, o en la zona de opciones de las páginas que normalmente están en la parte inferior de la página bajo la edición. En otras ocasiones, este tipo de configuraciones las tienes en las opciones de Layout en las Theme Options generales.

    Saludos 😉

  • David Alejandro - 26 junio, 2015 responder

    Buenas tardes, soy incapaz de enlazar una imagen a un sitio web, he incluido la imagen con single image y no veo la opción para crear el hipervinculo, enhorabuena por tu blog

    Ernesto G Bustamante - 6 julio, 2015 responder

    Hola David Alejandro,
    en Visual Composer, dentro del elemento Imagen Única o Single Image, tienes una casilla donde dice “Image link”. Es aquí donde introduces la URL para crear el enlace. Saludos

  • José Manuel - 4 julio, 2015 responder

    Hola Ernesto.
    Este pluguin me parace impresionante,
    ¿Cómo puedo añadir elementos de pluguins/widgets que instalo?
    Éstos no salen ej: Flexible Recent Post o My Calendar.

    Estoy migrando de Page Builder a Visual Composer y en Page Builder si que salen

    Saludos

    Ernesto G Bustamante - 6 julio, 2015 responder

    Hola José Manuel,
    asegúrate de que estos plugins/widgets sean compatibles con Visual Composer y de que estén creados para trabajar con un maquetador visual, pues en muchos casos este tipo de plugins sirven para añadir contenidos a las zonas de widgets.

    Otro modo de añadir este tipo de funcionalidades puede ser mediante shortcodes en Visual Composer, dentro de un html puro o un text block, siempre y cuando estos plugins permitan dicha posibilidad.

    Saludos

  • felix - 6 julio, 2015 responder

    hola.
    estoy atascado, acabo de adquirir una plantilla premium, que viene con visual composer, hasta aqui todo bien, puedo ver facilmente como controlar las paginas y las entradas con VC, pero luego no puedo utilizarlo en la parte del portfolio, no me aparece la opcion de VC, y me he asegurado que esta activa en la configuración general del maquetador, porque me pasa esto?…es que Vc no sirve para la parte del portfolio?, o hay que conseguir un plugin a parte para esta sección?.

    gracias

    Ernesto G Bustamante - 8 julio, 2015 responder

    Hola Félix,
    si has habilitado el maquetador visual para las páginas de portfolio debería permitirte cargar el backend editor directamente dentro de cada item de portfolio. Ahora bien, por experiencia, este tipo de contenidos, al igual que los posts, suelen dar aún algunos problemas cuando tratas de usarlos con Visual Composer, que está realmente pensado para trabajar con páginas.

    Saludos

  • Sisters Ideas - 20 julio, 2015 responder

    Buenas noches Ernesto,

    Muchísimas gracias por este post, ha sido muy interesante. Te quería preguntar si tú sabes de algún plugin que nos sirva para crear anclas dentro de la misma página. Muchísimas gracias!

    Ernesto G Bustamante - 20 julio, 2015 responder

    Buenas,
    para hacer lo que comentas, hay un plugin gratuito llamado WP LocalScroll, que permite crear anclas y navegar por ellas con un efecto de scroll:
    https://wordpress.org/plugins/wp-localscroll/

    Saludos 😉

  • Víctor - 28 julio, 2015 responder

    ¡Ernesto, está de lujo tu reseña!
    Tengo una duda, si me puedes ilustrar,
    ¿con qué incluyes lo de “VER UN EJEMPLO” a lo largo del contenido?
    Gracias por el dato, saludos desde México

  • Paco - 3 agosto, 2015 responder

    Hola,

    Enhorabuena por el post!! Es completisimo!!

    Tengo una duda, quiero poner una página tipo moderna que por los lados se vea una imagen de fondo y en el centro escribir normal. Esto sería posible con visual composer? ¿Podría ayudarme?

    Millones de gracias

  • Sara - 10 agosto, 2015 responder

    Hola a todos!
    Un post super interesante que me sirvió para terminar de engancharme a este plugin. Pero vuelvo por aquí porque tras convertirme en una auténtica adicta al mismo, ahora tengo un problema y necesito ayuda. Empecé a elaborar mi web en local y todo funcionaba sin problemas, ahora al pasarla al hosting, pasa una cosa (desde mi punto de vista) muy rara… cuando edito con visual composer y paso a ver el resultado final, los elementos: pestañas, acordeón y tour no muestran el contenido que si se ve cuando lo edito, no se si me explico bien… por ejemplo introduzco un elemento pestaña, lo edito y le doy contenido, hasta aquí todo sin problemas, guardo cambios, pero cuando voy a el resultado final, todo aquello que he insertado en las pestañas no aparece. Ni en la vista previa, ni si visito el sitio… he probado casi de todo y nada funciona… alguien me podría ayudar??? Mil millones de gracias!

    Ernesto G Bustamante - 11 septiembre, 2015 responder

    Hola Sara,
    te agradezco tu comentario. Lo que comentas podría ser debido a una desactualización del plugin. ¿Has comprobado que la versión instalada es la última disponible en Codecanyon?

    Ya me cuentas qué tal, saludos 😉

  • IRENE SEVILLA - 10 agosto, 2015 responder

    Un artículo perfecto. Enhorabuena por el buen trabajo realizado.

    Ernesto G Bustamante - 11 septiembre, 2015 responder

    Gracias Irene,
    si tienes cualquier duda sobre el uso del plugin Visual Composer consúltame lo que necesites,
    saludos 😉

  • Posonty - 14 septiembre, 2015 responder

    Uno de los mejores post que he leído en muchísimos años!, mil gracias por tremendo trabajo de crear este impresionante post!. Te has ganado el cielo compañero…

    Ernesto G Bustamante - 16 septiembre, 2015 responder

    Muy agradecido con tu comentario, la idea era escribir un post que os sirva de guía para usar Visual Composer a todos los que hacéis páginas web WordPress.

    Si necesitas cualquier consejo o ayuda cuenta conmigo 😉

  • Mikel - 14 septiembre, 2015 responder

    Enhorabuena por el post, increíble la de opciones de que dispone visual composer. El caso es que con el tema que estoy trabajando viene incluido el visual, que me esta facilitando las cosas mucho, pero de entre el extenso listado de elementos que has incluido en este post no he visto una opción que si viene incluido en el visual de mi theme, “page children”. He buscado información en internet pero tampoco he encontrado nada al respecto. No se si me podrías aclarar el uso de este elemento y donde puedo encontrar información de como usarlo.

    Ernesto G Bustamante - 16 septiembre, 2015 responder

    Hola Mikel,
    en algunos temas de WordPress los desarrolladores incluyen elementos extra de Visual Composer, personalizados para esa plantilla en concreto. En WordPress, la funcionalidad children sirve para crear una versión paralela de tu sitio sobre la que trabajar sin afectar a la versión original del tema.

    A priori no puedo darte más información sin haberlo visto por dentro, pero si me pasas los datos de acceso a tu web le puedo echar un vistazo. Mi correo es ernesto@aulacm.com

    Saludos

  • Sergio - 16 septiembre, 2015 responder

    Hola! Yo ya usaba visual composer, pero me entusiasmó tanto tu post que decidí añadir algunas extensiones (all in one y ultimate addons). El problema es que al editar con visual composer no me carga las nuevas bibliotecas. Instalé correctamente los plugins y están activados. Me da la impresión de que se trata de un problema de configuración, pero no estoy seguro. ¿Me puedes guiar?

    Ernesto G Bustamante - 23 noviembre, 2015 responder

    Hola Sergio,
    si has instalado correctamente las extensiones deberían aparecer. ¿Qué plantilla estás usando? ¿Tienes instalada la plantilla y tu versión de Visual Composer? ¿Tienes instalados muchos plugins? Quizá se trate de una incompatibilidad. Probaría a desinstalar todos los plugins excepto Visual Composer y sus extensiones para ver si se trata de una incompatibilidad con algún plugin en concreto.

    Saludos

  • Lucía - 22 septiembre, 2015 responder

    Hola muy buenas! me gustaria saber cuales son las condiciones legales de este plugin, es decir, si lo compro podré utilizarlo para muchas paginas webs? y me explico mejor, puedo instalar este plugin en varias paginas web a la vez?

    Ernesto G Bustamante - 23 noviembre, 2015 responder

    Hola Lucía,
    tal y como indican en las condiciones legales del plugin, la licencia regular permite usar el plugin en un proyecto no comercial y la licencia extendida en un proyecto comercial. Aquí tienes la documentación legal del plugin: http://codecanyon.net/licenses/standard

  • Claudio - 3 octubre, 2015 responder

    Necesitaria agregar un icono representado a un archivo pdf, y que al cliquearlo abra dicho archivo en otra ventana o en en algun lighbox. Tu detalle de cada elemento muy bueno, pero la verdad me perdi o no pude encontrar si algo como para lo que necesito. Gracias

    Ernesto G Bustamante - 23 noviembre, 2015 responder

    Hola Claudio,
    hacer esto sería muy sencillo. Simplemente añade un elemento Icon al que pones un enlace. Este enlace será la URL que obtengas del PDF cuando lo subes a tu Librería Multimedia.

    Un saludo

  • NAcho - 3 noviembre, 2015 responder

    Hola Ernesto, felicidades por tu artículo tan detallado. Quería preguntarte una cosa. Ya tengo el Visual Composer y me gustaría ampliarlo con una extensión, pero no sé cual de las dos extensiones que hay (la ultimate addons y la all in one) es mejor. ¿Cual es más completa y eficiente en la práctica? Gracias

    Ernesto G Bustamante - 23 noviembre, 2015 responder

    Hola Nacho,
    ambas son bastante similares. Echa un vistazo al listado de elementos que incluye este post para tomar la decisión. También puedes mirar en la página de venta de ambas extensiones, donde amplían la información e incluso te permiten ver una preview de los elementos incluidos.

    Ultimate Addons: http://codecanyon.net/item/ultimate-addons-for-visual-composer/6892199?ref=brunovd

    All in One: http://codecanyon.net/item/visual-composer-extensions-all-in-one/7731868?WT.oss_phrase=&WT.oss_rank=11&WT.z_author=sike&WT.achttp://codecanyon.net/item/visual-composer-clipboard/8897711?WT.oss_phrase=visual%20composer&WT.oss_rank=5&WT.z_author=bitorbit&WT.ac?ref=brunovd

  • Rosa - 10 noviembre, 2015 responder

    Buenos días Ernesto, llevo un tiempo utilizando visual composser y me parece una chuleta genial, te quería hacer una pregunta sobre un problema que tengo.
    Cuando le pongo el enlace a Boton2, no lo aplica y me pone “URL: undefined” , ya no sé que hacer, incluso he pensado que dejar de utilizarlo. Sabes algo sobre ese problema?
    Gracias de todas formas

    Ernesto G Bustamante - 23 noviembre, 2015 responder

    Hola Rosa,
    ¿has colocado como enlace una URL absoluta con http:// ? Si sigue dando fallos, podría ser por estar desactualizado. Asegúrate de que tienes la última versión de Visual Composer y también de tu plantilla. Prueba también a instalar tu versión de Visual Composer en otra plantilla por si se trata del tema.

    Saludos 😉

  • Juan - 10 noviembre, 2015 responder

    Hola, enhorabuena por el artículo. Tengo un problema, no se porque, pero ahora me aparece en la fila el icono basura (eliminar) en rojo y no me deja eliminarla. Ni siquiera puedo eliminar los elementos que hay dentro de la fila. ¿Alguien sabe porqué o cómo hacer que vuelva a eliminar? Gracias.

    Ernesto G Bustamante - 23 noviembre, 2015 responder

    Hola Juan,
    es posible que tu perfil de usuario no tenga permitido realizar modificaciones en Visual Composer. En Maquetador Visual > Configuración General tienes los diferentes perfiles de usuarios y sus correspondientes permisos de edición.

    Saludos

  • Lea - 6 diciembre, 2015 responder

    Excelente post!!!, tengo una consulta compre una platilla VERO, para wordpress, y trae este plugin, pero el tema vero, viene con 7 plantillas la cual no he podido identificar quisiera cololar la que se llama homepage 1 default sidebar, pero no logro encontrarla. Gracias de antemano, Saludos!

    Ernesto G Bustamante - 21 diciembre, 2015 responder

    Hola Lea,
    normalmente, cuando una plantilla incluye plantillas demo, debes realizar la importación del contenido demo desde tu escritorio de WordPress.

    Observa si en tu escritorio hay alguna sección donde se pueda importar directamente la demo. Si no, busca un archivo que termina en .xml entre las carpetas que te has descargado de la plantilla. Estos archivos .xml los importas en Herramientas > Importar.

  • Fernando - 8 diciembre, 2015 responder

    Fantástico post compañero, muchísimas gracias por tan impresionante guía. Antes de leerte ya tenía el VC incluido en un theme que compré hace poco, me ha permitido hacer genialidades en poco tiempo, pero tengo un problema con el carrousel y el slider de VC, selecciono las imágenes, los links y todo correctamente, pero cuando cargo la página las imágenes no se ven, sólo las flechas de desplazamiento… a qué crees que se puede deber este problema? Muchas gracias.

    Ernesto G Bustamante - 21 diciembre, 2015 responder

    Hola Fernando,
    a priori debería funcionar bien. Cuando algo no funciona como debería, ve a Plugins y desactiva momentáneamente todos los plugins a excepción de Visual Composer, luego ve a tu página, refresca y mira si muestra el contenido correctamente. Si este es el caso, se trata de alguna incompatibilidad de un plugin, ve activándolos todos de nuevo y refrescando la página cada vez que activas uno hasta que encuentres cuál es el “culpable”.

    Saludos

  • Angel - 10 diciembre, 2015 responder

    Enhorabuena por el post!! Tengo una consulta, hace un mes recibí un email de ENVATO avisándome de problemas con el Visual Composer con una plantilla y me ofrecen actualizarme a la versión 4.7.4.
    Desde ese momento, el pluging no acaba de cargarse y al hacer una página nueva no deja de dar vueltas un reloj, sin terminar de cargarse, en alguna página deja ver el contenido con sus opciones pero no deja aplicar ningún elemento.
    He intentado borrarlo y volver a instalarlo, pero es como si se hubiera quedado algo que no le deja funcionar. En opciones cuando se le dice que muestre el Visual Composer y el editor por defecto, el VC desaparece. ¿Podrías indicarme alguna solución? Muchas gracias y un saludo.

    Ernesto G Bustamante - 21 diciembre, 2015 responder

    Hola Ángel,
    ¿has mirado si tu plantilla y los demás plugins están actualizados? Si después de comprobarlo sigue sin funcionar, desactiva todos los plugins salvo Visual Composer y refresca tu página. Si vuelve a funcionar, entonces ya puedes saber que es por culpa de algún plugin incompatible con Visual Composer.

    Ve activándolos y refrescando la página hasta que des con el plugin que puede estar provocando el problema.

    Angel - 22 enero, 2016 responder

    Gracias Ernesto por tus indicaciones, pero sigue igual, he probado con la última versión 4.9.2 y no hay manera, se pone a dar vueltas y no termina de cargarse. Lo dejo solo y refresco pero no se carga.

  • Raúl Llopis - 8 enero, 2016 responder

    Hola me gustó el articulo , completo!…pero me gustaría adquirirlo pero en una pagina que no sea la de themeforest, pues tengo problema con mi tarjeta en esa pagina y como solo se puede pagar con paypal y me hace recargar mucho dinero pues…..si sabes de alguna otra web que se pueda comprar me harias un favor gracias de nuevo por el articulo.!!

    Ernesto G Bustamante - 2 marzo, 2016 responder

    Hola Raúl,
    puedes comprarlo directamente en la web del desarrollador:

    https://vc.wpbakery.com/

    Saludos 😉

  • Javi pedalo - 22 enero, 2016 responder

    Hola, tengo una consulta técnica a ver si alguien me puede decir como se puede cambiar en el formulario de busqueda de VC, que en vez de dar los resultados de búsqueda como post, me los de en productos de woocommerce. Gracias de antemano

    Ernesto G Bustamante - 2 marzo, 2016 responder

    Hola Javi,
    para ello debes añadir un widget de Buscar Productos.

    Saludos

  • Reneé - 27 enero, 2016 responder

    Muy buen post Ernesto! Con el entendí un poco más de cada elemento de Visual Composer, de hecho ya compre algunos plugins que recomiendas. Gracias!

    Ernesto G Bustamante - 2 marzo, 2016 responder

    Genial Renée,
    si necesitas cualquier consejo o ayuda cuenta con nosotros 😉

  • Francisco Hernandez - 4 febrero, 2016 responder

    Muy buen post, estaba buscando informacion sobre este plugin y la verdad que me quistaste muchas dudas. Lo unico que me queda por preguntar es, si por ejemplo, puedo modificar el header o el footer de la plantilla. siempre veo que se agregan filas, pero digamos que las agregas dentro del body, tanto el header como el footer hay que modificarlo a mano todavia, cierto?

    Ernesto G Bustamante - 2 marzo, 2016 responder

    Hola Francisco,
    para esto, hay una extensión del plugin estupenda que se llama Visual Composer in Sidebar Addons. Te dejo enlace donde puedes obtenerlo: http://codecanyon.net/item/visual-composer-in-sidebars-addon/8558485

    Te permite agregar elementos de Visual Composer a la zona de widgets que quieras 🙂

  • Francisco Hernandez - 4 febrero, 2016 responder

    Perdon se me paso despedirme, muchas gracias de antemano y genial el post.

  • Josue - 8 febrero, 2016 responder

    Hola llevo algun tiempo ya utilizando el VC, pero ahora tengo el siguiente problema en una de las paginas estoy utilizando el Elemento TOUR. este elemento lo puedes configurar para que por defecto venga 1 de las pestañas abiertas . El problema esta en que el cliente quiere en version de escritorio 1 abierta y version movil todas cerradas..
    Alguien tendra una idea de como podria complacer su exigencia.
    saludos

    Ernesto G Bustamante - 2 marzo, 2016 responder

    Hola Josue,
    esto va a requerir personalización de código, ya que se trata de algo bastante complejo que no hace el plugin por defecto. En este tipo de casos, es necesario contar con un programador o experto en código.

    Saludos

  • Miguel - 1 marzo, 2016 responder

    Buenos días.
    Necesito saber si a través del masonry media Grid se pueden enlazar las imaganes a páginas en lugar de a su lightbox. ¿Es eso posible? Si no lo es, necesito algún plugin que haga el efecto Masonry pero que enlace con url’s, para poder tener los destacados de mi home con ese estilo pero sin abrir lightbox, sino enlazando a sus páginas correspondientes…
    Muchas gracias de antemano!

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Miguel,
    los elementos de galería no dejan colocar enlaces a cada una de las fotos, pero podrías hacerlo de otro modo. Crear una fila, divídela en columnas y en cada columna colocas una imagen única. A las imágenes sí les puedes dar enlaces personalizados a donde quieras 😉

  • Rossalba - 1 marzo, 2016 responder

    Hola Ernesto, es super útil la información que proporcionas sobre Visual Composer. TEngo una duda, ojalá me puedas orientar.
    He construido mi home page con Visual Composer pero cuando quiero verla en dispositivos móviles únicamente me muestra el html de cada uno de los elementos que conforman mi página pero no puedo ver los mismos. ¿Sabes si hay algún problema con la compatibilidad? ¿Qué me recomiendas?

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Rossalba,
    Visual Composer es un plugin responsive, esto quiere decir que se adapta muy bien a todos los dispositivos. Por lo que cuentas, tiene pinta de ser por tu plantilla. Asegúrate de que sea responsive y de que esté actualizada.

  • saul - 20 marzo, 2016 responder

    tienes algun tutorial, de como configurar el row, para que pueda hacer el efcto parallax?

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Saúl,
    en algunas plantillas premium como Bridge es muy sencillo hacer un efecto parallax dentro de una fila, simplemente haciendo click en el botón lápiz de editar fila y eligiendo el tipo de fila parallax. Si tu plantilla no incluye esta posibilidad, puedes adquirir este addon para poder hacerlo: https://vc.wpbakery.com/addons/parallax-background/

  • Yeray - 28 marzo, 2016 responder

    Buenas, tengo una duda con respecto a la inserción de un iframe. He añadido a través de un html una web pero me gustaría limitar lo que se ve de ella, por ejemplo el bottom de la página. Es posible de alguna manera?. Un saludo

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Yeray,
    puedes ocultar cualquier parte que quieras de una web mediante código CSS. En este post tienes una guía detallada para hacerlo: http://aulacm.com/codigos-web-css-y-html-wordpress/

  • Iván Serrano - 29 marzo, 2016 responder

    Holá estimado!!, muy buen post!!, quería aclarar una duda. Existe algún plugin para administrar noticias, que estas se puedan archivar pero que se pueda tener acceso a ellas cuando uno las necesite?

    Ernesto G Bustamante - 5 septiembre, 2016 responder

    Hola Iván,
    si te refieres a que las pueda archivar el admin, te basta con colocar las entradas en borrador para que no se vean en la web pero sí que las puedes consultar en Entradas.

  • solo se puede comprar mediante paypal? - 29 marzo, 2016 responder

    quise comprar plantilla avada pero paypal me pido gastarme 80 euros para pagar 59…ni de coña vamos, es una pena lo mismo me pasa en cualquier articulo que he mirado en la famoseta paginucha de themeforest no hay como pagar con tarjeta de una forma u otra te lleva al maldito paypal….te cobra por mirar…sabes de algun lugar donde comprar visual composer sin que sea este metodo gracias

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola,
    en Themeforest puedes comprar mediante PayPal o con tarjeta de crédito normal eligiendo el método de pago Skrill. Mira bien porque además con PayPal no te pide ingresar 80 sino 60 dólares (Avada cuesta 59$).

    En mi opinión, Themeforest junto a las demás plataformas de Envato son sin duda los mejores sitios para comprar temas, plugins y todo tipo de contenido multimedia, dale una oportunidad porque merece la pena 😉

  • Jorge Vázquez - 30 marzo, 2016 responder

    Buenas, tengo una duda. Quiero cambiar de orden los post que se muestran dentro del Big Grid 2. Me muestra los 4 post en el grid en el orden que los agregué, pero necesito poder cambiarlos de orden dentro del grid según sea necesario. Espero explicarme con claridad, gracias por la ayuda.

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Jorge,
    dentro del elemento de latest posts que has incluido tienes una opción Order para poder ordenar según fecha o título del post, en orden ascendente o descendente

  • lucas - 6 abril, 2016 responder

    Hola Ernesto, que tal el SEO con el plugin de YOAST para el posicionamiento ? se puede hacer en la páginas editadas con V.Composer ? Es igual que editar una página normal de wordpres?

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Lucas,
    SEO Yoast y Visual Composer son perfectamente compatibles, puedes usarlos juntos sin problema 😉

  • Claudia - 12 abril, 2016 responder

    Hola, tengo una consulta. Estoy trabajando en mi plantilla de wordpress con el plugin pero no puedo ver la información que esta en visual composer, no me permite ver donde esta todo lo que ya he hecho para continuar con la edición. Que puedo hacer? Espero me puedan ayudar! Gracias!

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Claudia,
    este problema se soluciona instalando la última versión del plugin

  • Elsa - 13 abril, 2016 responder

    Hola Ernesto,
    Me pasa como a Claudia, llevo unos días que no puedo ver el contenido del visual composer de las páginas. No sé qué pasa 🙁

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Elsa,
    instala la última versión del plugin como le he comentado a Elsa un comentario más arriba 😉

  • MIREIA - 21 abril, 2016 responder

    Hola buenos dias!
    He estado usando Visual composer durante los últimos 3 meses y ahora no se porqué motivo no me lo carga.
    He mirado en la pagina oficial, y lo que dicen es actualizar a la última versión de WordPress, y desactivar el resto de pluggins, por si alguno caisa incompatibilidad.
    Hecho esto, el pluggin Visual Composer sigue sin cargarse.
    No sé si es el mismo problema que les pasa a Claudia y a Elsa.
    Gracias de antemano, y enhorabuena por el artículo!
    Mireia

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Mireia,
    como ya he comentado más arriba, esto lo puedes solucionar instalando la última versión de Visual Composer

  • Joan Morci - 29 abril, 2016 responder

    Bueno Ernesto, descomunal el tutorial como siempre y lo mejor al detalle con iconos de todos los widgets (santa paciencia). Se nota que has utilizado mucho la herramienta, jeje.

    Si algún día me toca utilizar este maquetador, ya te tengo fichado en el artículo relacionado que hice, el cual, te agradezco que hayas compartido. Eres un buen tipo con ganas de enseñar.

    ¡Saludos jefe!
    Pd.: Cuando incluyes enlaces muy largos, salen cortados estos y los comentarios, es una pena porque el diseño de esta web es muy agradable.

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Joan,
    gracias por tus palabras y por el buen contenido que compartes en tu blog 😉

    ¿A qué te refieres exactamente con los enlaces largos? ¿En qué zona de la web? Please, dime y le echamos un vistazo

  • Alberto - 3 mayo, 2016 responder

    Buenas amigos, he comprado la reciente actualización de visual composer y no me deja guardar las imagenes nuevas. Cuando intento insertar una imagen única y hago click en “save” ni se inmuta. Tengo todos los permisos en las opciones del plugin.
    ¿Os ha pasado?
    Gracias de antemano.

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Alberto,
    asegúrate de tener actualizada tu versión de WordPress y la plantilla además del plugin, de este modo funcionará de manera óptima.

  • Nati - 10 mayo, 2016 responder

    Hola! Tengo un blog en wordpress.org con la plantilla Bridge y no me salen todas las opciones que mencionas. Por ejemplo, echo en falta “Post Carrusel”, “Post Slider”, “Entradas recientes”… ¿Como puedo incluirlas?
    Gracias

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Nati,
    ¿tienes actualizada tu plantilla? También podría ser debido a que lo tengas en inglés. En lugar de entradas recientes podrías tener latests posts, etc.

  • Matias - 17 mayo, 2016 responder

    Hola, como estas? muy completo e interesante tu post.

    Quisiera saber si conoces de alguna manera de mejorar el tiempo de carga de los js de vc, dado que tarda considerablemente bastante a veces en mostrar los posts.

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Matías,
    te dejo dos plugins gratuitos que mejoran la carga de javascript en las páginas:

    https://es.wordpress.org/plugins/wp-performance-score-booster/
    https://es.wordpress.org/plugins/wp-super-simple-speed/

  • Esther - 23 mayo, 2016 responder

    Hola! estoy empezando en wordpress, he añadido una pagina con entradas a la web que me hicieron profesionales, y al utilizar el visual composer me aparece el codigo del elemento que he añadido (text block o PHOTO GALERY..) como lo evito?

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Esther,
    es raro que se vea el código en lugar del elemento. Asegúrate de que tienes activado el plugin en Plugins Instalados.

  • Keiner Chará  (@KeinerChara) - 26 mayo, 2016 responder

    Yo tengo una duda, se puede usar en los post? es que veo que este artículo usa alguna de esas funciones o me equivoco? como hacen para poner los botones si no es una página?

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Keiner,
    Visual Composer se puede habilitar donde quieras, incluidos los posts. Puedes hacerlo en tu menú principal de WordPress, en Maquetador Visual > Role Manager.

  • Rebeca - 31 mayo, 2016 responder

    Buen dia Ernesto, me encontre con tu pagina buscando informacion sobre el visual composer de WordPress. Muy bien explicado e interesante. En especial amo el diseño de tu pagina.
    La verdad es que yo no soy programadora pero tengo una pagina web para aprender a modificar.
    Y ando batallando con el visual composer. Quiero saber si es necesario comprarlo o si ya esta instalado con mi tema. No se quien me pudiera ayudar, gracias.

    Ernesto G Bustamante - 23 junio, 2016 responder

    Hola Rebeca,
    depende del tema. Hay plantillas premium que ya incluyen Visual Composer y te ahorran tener que comprarlo aparte. Te dejo 3 que me parecen de las mejores y que lo incluyen:

    http://themeforest.net/item/bridge-creative-multipurpose-wordpress-theme/7315054?s_rank=2

    http://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019

    http://themeforest.net/item/hazel-multiconcept-creative-wordpress-theme/8146099

  • Francisco Gomez - 4 agosto, 2016 responder

    MUY BIEN , pusiste aqui lo que le falta al soporte de vc. Genial.

    Ernesto G Bustamante - 5 septiembre, 2016 responder

    Te agradezco tu comentario, Francisco, un saludo 😉

  • patricia - 8 agosto, 2016 responder

    Hola, instalé una plantilla wordpress que ya tenía el VC, no lo podía usar ya que ahora es pago.
    Pagué la licencia de VC, instalé nuevamente el plugin pero no me permite editar.
    ¿Podrías ayudarme?
    Muchas gracias.

    Ernesto G Bustamante - 5 septiembre, 2016 responder

    Hola Patricia,
    Visual Composer siempre ha sido de pago. si la plantilla lo incluye, no tienes que pagarlo aparte.

    No obstante, si ya has comprado el plugin, asegúrate de desinstalar correctamente la versión anterior y de instalar la nueva. Muy importante: actualiza también tu versión de WordPress y los demás plugins para que funcione de manera óptima.

    Un saludo

  • Montse - 29 agosto, 2016 responder

    Hola Ernesto,
    está genial el post sobre Visual Composer. Super completo. Estoy empezando a hacer una pagina con Bridge, concretament una One page Multipurpose, y no se como hacer las anclas, para que desde el menu se pueda ir a las distintas partes de la One page. Es la primera vez que hago una web así, y tengo problemas para entender como creo el menu y como enlazo este con las distintas partes de la página. Tambien, quería saber si es posible añadir otras páginas aparte de la Onepage. Muchas gracias de antemano por la respuesta.
    Un saludo,
    Montse

    Ernesto G Bustamante - 5 septiembre, 2016 responder

    Hola Montse,
    lo que comentas es muy fácil de hacer con Bridge, sin necesidad de instalar ningún plugin. Te explico:

    1. Entra a editar la página de inicio. Ve a cada fila de Visual Composer en la que quieras colocar un ancla y entra a editar cada una de esas filas. Dentro de la edición de fila, en el campo Anchor ID, introduce una palabra (por ejemplo, si la fila es sobre Servicios, le pones servicios).

    2. Ve a Apariencia > Menús y añade un Enlace Personalizado por cada botón que quieras en el menú principal. Por ejemplo, para poner el botón Servicios enlazado a la zona servicios de la home, añades el enlace personalizado, en Texto le pones Servicios y en URL le pones #servicios, y listo, ya lo tienes funcionando.

    Para añadir otras secciones al menú, simplemente creas las páginas correspondientes y en Apariencia > Menús las añades al menú.

    Un saludo 😉

  • Nacho - 1 septiembre, 2016 responder

    Hola! queria saber como hago pra ajustar mejor las columnas… es decir:
    Hice tres columnas ( 1/2 + 1/6 + 1/3 ) esa es la configuración de VC… pero quiero adaptarlo mas minucioso en medidas en píxeles, porque la columna 1/6 es muy chica y quiero que sea a 160px o 200px de ancho. Quiero mas o menos que las tres columnas tengan 500px 200px 300px de ancho. Muchas Gracias

    Ernesto G Bustamante - 5 septiembre, 2016 responder

    Hola Nacho,
    con Visual Composer no puedes hacer estas estructuras tan complejas. Lo que sí puedes hacer es jugar con los paddings interiores de las columnas para conseguir los anchos que deseas.

    Un saludo

  • luis - 4 septiembre, 2016 responder

    Hola, quisiera saber si puedes ayudarme. Estoy intentando editar mi página creada con visual composer pero es muy lenta la carga para ingresar al back editor y al front editor. ¿Que debo hacer? puede durar hasta 5 minutos para ingresar.

    Ernesto G Bustamante - 5 septiembre, 2016 responder

    Hola Luis,
    ¿qué hosting usas? Esto podría ser problema del hosting, que no ofrezca un buen rendimiento con WordPress.

    Otro posible motivo: plugins. Desactiva momentáneamente todos los plugins a excepción de Visual Composer y vuelve a intentar entrar, a ver si mejora. Si es así, se trata de un plugin que está generando alguna incompatibilidad con Visual Composer. Ve activando uno a uno y refrescando la página para ver cuál es el plugin que genera el problema.

    Otro posible motivo: ¿tienes las versiones de WordPress y Visual Composer actualizadas?

  • Raúl López - 10 septiembre, 2016 responder

    Hola Ernesto,

    Enhorabuena por el post, es genial. ¿Qué opinas del código que generan los “bloques” o elementos de Visual Composer para SEO?. Según tengo entendido, no es un código limpio y optimizado para SEO, ya que además de ralentizar algo la carga, inserta muchas referencias “style” en el html.

    Pregunto desde la ignorancia porque estoy desarrollando un theme, y estoy valorando la posibilidad de integrarle Visual Composer, pero me preocupa lo que te comento.

    Muchas gracias de antemano,

    Un saludo!

  • Juan - 2 noviembre, 2016 responder

    Alguien me podría decir porque visual composer al momento de tratar de agregar una imagen o vídeo, la opción no me direcciona a la opción de medios, donde se guardar las imágenes ya almacenadas.

  • John R. - 28 noviembre, 2016 responder

    Buenas tardes amigos disculpen alguien me puede sacar de la duda. estoy terminado una web algo super sencillo que no tengo ni idea en que estoy fallando. voy al rollo. es de tipo onepage, pero cuando le doy específicamente a uno de los botones me va a la sección pero no me da el efecto de deslizamiento. simplemente parece en ella y listo. los demás funcionan pero esa sección no , ya copie otra fila revice minuciosamente por código y no cacho porque ese desgraciado topic del menu no desliza quien me puede dar una luz gracias!!: PD. uso el Visual Compuoser Gracias..

  • andres - 9 diciembre, 2016 responder

    Este es solo para crear o tambien sirve para editar y sobre escribir cualquier plantilla ya diseñada ? Un saludo.

  • yahiri - 9 diciembre, 2016 responder

    hola que tal? gracias por tu aporte. Soy nueva utilizando esta valiosa herramienta, me gustaría saber si hay posibilidad de realizar estas modificaciones desde un tema donde el homepage no sea estático? es decir en estos momentos tengo isntalado un tema pero el home me gustaría personalizarlo un poco, pero hasta ahora no he visto alguna información en la que pueda usar estos componentes de diseños desde un homepage estático, existe la posibilidad de usarlo sin realizar esa configuración? gracias!

    Agencia SEO Linmago - 22 diciembre, 2016 responder

    Normalmente visual composer, se adapta a cualquier tema cuando lo instalas. Lo mas recomendado es comprar un tema que ya traiga por defecto visual composer. En ocasiones he notado que cuando el código esta escrito de manera estática visual composer lo empieza a hacer como espagueti, si tienes paciencia es cuestión de arreglar poco a poco, sino compra un tema.

  • Xavier - 26 diciembre, 2016 responder

    Te felicito por la gran información. Ahora e de ir seccionandola y probando poquito a poco pues soy bastante principiante en composición de las webs y blogs.
    Por eso un articulo como el tuyo me ayuda a seguir mejorando.
    Gracias y felicitaciones.

Únete a la conversación