Tutorial Visual Composer en Español

Tutorial Visual Composer en Español



hola chicos que tal bueno en este vídeo os voy a hablar de un plugin para wordpress que se ha puesto muy de moda y realmente está está genial el plugin se va visual con póster y se puede comprar en el incode y carió y bueno la verdad es que está genial que quien nos hace este plugin bueno nos permite de una manera muy sencilla actualizar nuestras páginas web tanto post como páginas de nuestro wordpress de una manera muy avanzada pero sin tocar ni una sola línea de código es bueno para explicar mejor os lo decía con una prueba que estoy haciendo aquí instalado en wordpress de prueba y aquí está el plugin instalado y no es que le damos a crear nueva página cuando nos podemos a crearlas vemos que nos aparece aquí estos botones nuevos que de otra manera no aparecerían pues bueno lo primero que hacer es poner un título oiga esto es una prueba y fijaros ahora mismito aquí están los botones de toda la vida para actualizar nuestra página pero voy a hacer clic en el botón de que quiero en el modo de éste desde plugin y fijaros que desaparece el marcador normal y aparece todas estas funcionalidades ya dejarlo como estaba para que veáis la diferencia aquí escribimos como queremos que es como toda la vida en cambio siguen hoy al editor de este plugin vemos cómo nos aparece todo esto mucho más visual y aquí tenemos la posibilidad de maquetar sin tener que tocar una sola línea de código con todas estas formatos fijaros cuando yo le voy a añadir un elemento cuando primero yo ahora mismo tiene una plantilla normal pero si hiciera clic en cualquiera de estas en la página que estoy creando tendría este este formato si yo le voy a crear un elemento nuevo aquí aparecen todos los elementos que puedo crear por ejemplo si cree una fila y hace clic aquí para que lo veáis aquí he creado un contenedor que es una fila que sé que si quiero lo puedo convertir en cuatro filas como podéis ver aquí y una manera muy sencilla me permite poner algo en esta columna y en esta otra etcétera si quiero que sea una sola columna vengo aquí y hago clic en la primera opción veis entonces aquí he creado un contenedor en el que yo puedo meter cosas se haga clic en este más puedo meter cualquiera de estas opciones por ejemplo si yo quiero añadir lo que se ve aquí un acordeón hago clic en esta opción y aquí ya me aparece que se tiene es quiero de mi acordeón le voy a dar editar y voy a poner aquí opción una por ejemplo salvar y aquí tengo un más para meter el texto que aparecería en la opción donde hago clic ahí y puedo meter dentro de esa opción cualquiera de estas opciones louis aquí y hacer clic es que cualquier estas opciones yo en mi caso voy a perderte esto simplemente entonces yo ya me viene con texto de ejemplo o sea que en este caso no lo voy a cambiar y le doy a cerrar y hago lo mismo con la opción 2 hago clic sobre ella le di a editar pongo opción 2 y vuelvo a hacer lo mismo en este más añado que quiero de todo las opciones que hay que equivalente de esa opción 2 es decir que un bloque de texto en un texto de prueba y le doy a salvar y aquí puede añadir tantas secciones como quieras simplemente le daría clic en una nueva sección vale no la quiero de momento con dos para la prueba vale y aquí le voy a dar a publicar para ver cómo llevamos nuestra página nuestra página creada vale yo ahora lleva tengo le doy aquí a ver página y a ver que estoy haciendo vamos pues aquí vemos como he creado una página con dos opciones se aplique la 2 me aparece el texto de los dos sí aunque en la primera en la primera veis de qué forma más sencilla hemos creado un acordeón sin tener que tocar una sola línea de código fijaros si llora en cambio el modo normal aquí vemos todo él el contenido que haya metido realmente toda la programación que hay detrás de lo que hemos hecho nosotros nosotros imaginar si tenemos que hacer todo esto nos volvemos locos en cambio de esta forma simplemente vamos añadiendo funcionalidad fijaros aquí veis como yo añadí una fila relacionados que queremos una fila con el acordeón dentro y debajo de esa fila quiero cuatro cuatro columnas os fijaros hago clic en más aquí le digo que quiero un elemento fila y en este elemento fila le voy a decir que quiero cuatro elementos y fijaros aquí ya puedo meter los diferentes la diferente información en cada uno de ellos pues le doy al max y en este caso voy a añadir bien ya ninguna imagen a ver dónde está aquí la opción imagen imagen única por ejemplo hago clic aquí y añadir una imagen cualquiera cualquier cosita que yo tenga por aquí por ejemplo esto el popping para la prueba me vale perfecto y aquí me quiero un título agregaría aquí salva y voy a hacer lo mismo en todas para ver cómo queda voy a añadir la imagen seleccionó la misma y hacer no sé si se mira pero tengo aquí a mi perrita roncando y aunque no están aquí bajito no sé si se le oye lo bueno ahí la tengo aquí arrancando que morro tiene bueno voy a darle aquí y está diciendo todo todo el rato lo mismo simplemente para que veáis de qué manera más sencilla puedo maquetar información vale ya tengo aquí las cuatro imágenes le doy a actualizar y vamos a ver qué hemos hecho actualizo la página y veis aquí tenemos nuestro acordeón con nuestra información y debajo las cuatro imágenes que le ha añadido perfectamente alineadas como podéis ver esto es esto es la leche porque podemos poner información muy bien maquetar la de una manera que de otra forma nos tocaría ottokar código o tocarlas css y de esta forma lo hacemos simplemente a golpe de clic y fijaros todas las opciones que tenemos tenemos botones tenemos barras de progreso nada que hacer aquí aun a riesgo de equivocarme que esto todavía no lo he usado fijaros aquí en valores por defecto ya nos viene con algunos ejemplos empieza con tal cual viene lo que quiero que veáis que rápido y que sencillo es hacer cosas muy avanzadas y darle actualizar a ver si esto hace algo parece que si está haciendo algo fijaros y aquí tenemos nuestras barras de progreso al tanto por ciento que está marcado en esta opción de aquí hacemos clic en modificar y aquí lo tenemos fijaros que las mías saliendo con más fechas en gris pero aquí tenemos la opción de poderlo cambiar el color que nos dé la gana ella dará azul por ejemplo el hoy aquí vienen las opciones le voy a hacer luego ir actualizar y ahora debería ser azul estas barras de progreso y carga las tenemos en azul cuando como podéis ver este plugin está está muy bien cada vez viene con más opciones con más plantillas de por defecto y en y si no vienen en tu plantilla lo podéis comprar en un codec años otra opción muy interesante es como veis aquí yo siempre está tocando para cambiar de modo normal al modo del plugin en classic mode se aplica aquí me viene al a la opción normal si le doy aquí medida la opción con todas las funcionalidades que hemos visto pero fijaros si le doy afronten editor tengo un amigo y estará riendo por mi pronunciación pero bueno yo sigo haciéndolo lo mejor que puedo bueno volviendo a esto que me lío cuando le he dado a al botón de editar en el front end me permite ver cómo está quedando la página y editar directamente en lo que ve la gente entonces ahí hay personas que le cuesta más editar en el back end porque no es como realmente se está viendo y hay gente que es más visual y le gusta modificar viendo el resultado final entonces de esta manera veis que yo puedo hacer clic en cualquier opción la puedo modificar y lo estoy viendo en tiempo real como es que está quedando aquí de añadir cualquier cosa para que veáis cómo funciona yo que sé un mensaje una caja de mensaje me viene con contexto de prueba y todo sandro dejó tal cual las algas y ahora que está cerrado de cerrar esto como veis me ha aparecido el mensaje acaba de añadir directamente en el formato que la gente lo ve recordáis que si yo soy en el back en perdonar primero voy a darle actualizar para que guarde lo que acabo de hacer ya está guardado le doy a volver al formato normal para qué y aquí veis como javier y carmen todo esto aquí está qué ver las opciones que relación que he creado como se ve cuando el formato edición pero como veis para es mucho más visual cuando le damos al fonden editor y lo estamos viendo tal luego se va a reflejar entonces a mucha gente esta funcionalidad le es muy interesante porque le gusta trabajar como realmente y luego se vea bueno esto ha sido todo de este plugin espero que os haya gustado y nos vemos en el siguiente vídeo hasta luego

40 Comments

  • SUTRIMEX MARKETING says:

    Hola Oscar, muchas gracias por tus videos. Tengo una duda ¿en visual compuse, se pueden mover las columnas en las filas que se quiera, o no tiene esa posiblidad? gracias

  • fabian porras says:

    Hola oscar tengo un problema, he añadido varios elementos y entre ellos deja mucho espacio y requiero reducir ese espacio este elementos añadido.

  • Code Man says:

    pls how can i add google using visual composer ?(wordpress)

  • Bere Sánchez Bernabé says:

    Hola, podrias apoyarme con una duda con ese tema del video.?

  • Carmen BP says:

    Si pero en el mvl se coloca como quiere. Quiero explicación sobre eso

  • David Blanco Lafuente says:

    hola Alavaro como se puede configurar el header y footer de la plantilla ?

  • diego ortiz says:

    hola amigo tengo una duda ? como hago para que los slider que cree pasen mas lento, ya que no alcanzo a leer del todo por lo rápido que son.

  • CANAL RANCHO APARTE says:

    hola, me podrias ayudar?
    Quisiera saber como es que se coloca esta imagen como te muestro aqui
    .
    http://prntscr.com/e3utsy

    Que funcion de visual composer tengo que activar para colocar una imagen de fondo como en el ejemplo que te muestro.

    gracias

  • Jhorman William Aguilar Múnera says:

    Buen tuto… Me gustaria saber el precio de este plugin?

  • Memito Del Angel says:

    que pasa si elimino el plugin si ya no lo puedo mantener

  • Maria Andrada López says:

    Hola, solo existe una version premium del plugin, o hay alguna gratuita, o algun plugin que realice cosas similares pero que sea gratis??. Gracias!!

  • lukas andre says:

    la opción de fila ya no sale, como se llama actualmente?

  • Daniel Fort Asensio says:

    Hola Oscar, yo quiero hacer una landing page, y lo que quiero es que no aparezcan los sidebars del lado derecho y nada arriba, como puedo hacerlo, el tema que tengo puesto en WP es Thesis, y tambien el optin puedo utilizar el de getresponse?? Gracias

  • qlocura says:

    Como se pueden añadir nuevos addons que no salen en visual composer.?

  • True Worship says:

    Hola, Este software sirve para crear desde cero una homepage? Las opciones de página principal que ofrece el tema que quiero comprar no me acaban de convencer y me gustaria que la página principal fuese un poco diferente. Gracias

  • Bwe Marketing says:

    Tengo un template editado con Visual Composer, pero hay una sección que no puedo editar de ninguna forma, al parecer se subió ya editada, sabes como puedo editar?

  • Jonathan Minutillo says:

    Hola, sabes si con la compra premium de este plugin se puede reutilizar para otros sitios? o cuando realizas la compra es solo para un sitio especifico?
    Mil gracias!

  • A.J. G.M. says:

    El plugin se ve genial, ojala algun dia lo integraran directamente al WordPress, porque a veces uno se acostumbra a este tipo de ayudas y de un momento a otro las descontinuan.

  • Victor Manuel Caudillo Cabrera says:

    Hola oscar fijate que soy desarrollador de código puro pero por cuestiones de dar mejor precio me veo en la necesidad de usas CSM, este plugin que tal es en aspectos de responsive, veo que le das la estructura pero en celulares que pasa?

  • Eneida Avila says:

    Hola Oscar, he visto la moyoria de tus videos y estoy suscrita en tu Zona Premium, por favor podrias decirme donde encuentro el Plugin Visual Composer Review, no lo encuentro….. gracias

  • Javier Sánchez Jiménez says:

    Saludos oscar, tengo una pequeña duda, con este Plugin puedo hacer que al momento de pasar el mause sobre una imagen esta haga aparecer textos?, me importa mucho saber sobre esto, porque por más que le busco no consigo respuesta.

  • Doramas Ventas Mexico says:

    Hola!!! Cuando le doy agregar nuevo elemento. Si y no me muestra la pantalla de los elementos. Me aparece todo en blanco la pantalla pero si le doy click en cualquier parte si me lo agrega. Pero no se que fue lo que seleccione. Como lo puedo solucionar.
    Sera que no es compatible con mi wordpress?? AYUDA..

  • Solution Maker Publicidad says:

    Saludos, buen video. Noté que hay foros donde presentan reclamos por la incompatibilidad con internet explorer, pues los estilos se desarman terriblemente. Es cierto esto? bueno el plugin es mágnífico, 🙂

  • Natacion Autoclub says:

    funciona también para las entradas ?

  • Alvaro Morales says:

    Oscar, saludos desde Valencia, Venezuela. Muy bueno tu video, estoy por empezar a usar éste plugin que, equiparando a su modismo "está de leches", acá diríamos "está arrechísimo!".

  • Pablo Escobar Carrillo says:

    Gracias por el vídeo, Pregunta Óscar, existe algún panel especifico para ajustar la visual de la pagina, para diversos soportes, como celular, o tablet?, o por defecto la pagina se adapta a estos medios de comunicación, saludos atento a tu respuesta.

  • Lola Sans says:

    Hola!!!
    acabo de comprar el plugin después de ver tu tutorial que me ha parecido muy interesante y fácil. Sin embargo el primer problema ya me ha aparecido:
    tengo que insertar un video de vimeo y lo hago con el código habitual de vimeo. Sin embargo yo quiero modificar características del video (color de las letras, que no aparezca sugerencias de video al final y el tamaño). He aprendido que para hacerlo debo usar este código:

    <iframe src="https://player.vimeo.com/video/110649865?color=ff9933&byline=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

    pero sin embargo al insertar este código en el visual composer, no me lo respeta, no enlaza el link
    QUé estoy haciendo mal?
    perdona mi ignorancia supina en wordpress
    gracias

  • Maria Orchid says:

    Thanh you teacher

  • Mary de Sojo Branding & Marketing says:

    gracias por compartilo. Es muy claro. Por cierto das clases por skype?

  • Miguel Ángel says:

    Saludos. He comprado el plugin, y lo instale en la carpetea basica que se descarga en la pagina oficial de worpdress, porque quiero hacer mi web desde 0 sin plantilla sino como aparece en el video de muestra de los propios desarrolladores.

    El problema es que se instalo sobre la plantilla por defecto de wordpress, y cuando instalo otra plantilla el espacio en medio aparece el visual composer, pero yo quiero algo desde 0 0. Podrías ayudarme? muchas gracias.

  • diego pichaco says:

    es de pago verdad?

  • Microelectronica. org says:

    Hola,  tu sabes como puedo crear un menu dentro de una pagina ?
    yo genero el menu principal que me lleva a la pagina1    y  quiero dentro de la pagina1  tener otro menu.  Gracias por tu respuesta

  • Armado para la aventura says:

    Disculpa Oscar. Otra pregunta. Si compro el Plugin con la licencia simple, en cuantos sitios web lo puedo usar?. no entiendo esa parte en la pagina codecanyon. Es decir, con la licencia simple lo puedo usar en todos mis sitios web? o solo en uno?. Gracias y Saludos!

  • Armado para la aventura says:

    Excelente Video!!!!, tengo una pregunta. Si tengo en mi WordPress el Theme de ProfitsTheme y luego instalo este plugin, son compatibles ambos?. o debo elegir entre uno u otro?. Saludos

  • Jose Guadalupe says:

    no poder centrar un texto jaja por eso odio los cms prefiero hacerlo a punta de codigo

  • Tomás M says:

    Hola Oscar, muy buen tutorial, estoy comenzado a utilizar Visual composer y aún no sé ¿cómo justificar, centrar texto, etc así como se necesita alguna configuración para hacer que el comportamiento sea responsivo?  Saludos

  • Karma y Digital says:

    hola, buen tutorial…comnsulta…1- es obligado tener una plantilla para usar visual composer?? o podría usarlo sin subir themes..solo construir con visual???..2- como hago para que desaparezca la barra negra del lateral y solo se vea la pagina a todo lo ancho??..saludos!

  • AKRA LOGISTICA says:

    Buenísimo el vídeo!! Gracias por compartirlo!!!

  • Julio Garces says:

    Gracias Oscar me sirvio de mucho

  • Anuhar Moreno says:

    Hola que tal, como le hago para traducirlo al español?

Leave a Reply

Your email address will not be published. Required fields are marked *