Guía de Visual Composer Que es Visual Composer Aunque WordPress es un gestor de contenidos muy potente, uno de sus puntos flacos es sin duda la maquetación de páginas dentro del propio editor visual. Aunque los shortcodes facilitan la tarea de añadir elementos interactivos a tus contenidos, muchas veces resulta una tarea bastante laboriosa. Visual isual ompo omposer ser es un Plug!i Plug!in n premi premium um cread creado o por WP"a# WP"a#ery ery,, pensa pensado do para para ayuda ayudarr a maquetar páginas a nivel avan$ado de forma rápida y sencilla. Visual omposer ha revolucionado el modo de diseñar páginas %eb con WordPress. &s una herramienta esencial si se quiere diseñar rápido y fácil y conseguir un resultado espectacular en los proyectos. &l Plug!in en cuestión, hace uso de los shortcodes dentro de WordPress para crear contenidos especiales, y los esconde detrás de una atractiva interfa$ con la que se puede traba'ar mucho más fácilmente. Antes de la llegada Visual omposer, 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 conoc conocer er códig código o html html y css, css, o como como m(nimo m(nimo,, estar estar famil familia iari$ ri$ad ado o con con el siste sistema ma de inserc inserción ión de shortcodes. on Visua Visuall ompo omposer ser se podrá podrá dar dar a las página páginass un aspec aspecto to muy atrac atractiv tivo, o, funcio funciona nall y estructurado, con un resultado profesional y gráficamente muy atractivo, sin la obligación de aprender código )*+ ni haber maquetado nunca antes una página %eb. a posibilidad de poder insertar con un simple clic# todo tipo de elementos %eb y de crear diferent diferentes es estruct estructuras uras de página página conviert conviertee a Visual isual omposer omposer en una 'oya en nuestro nuestro WordPr WordPress. ess. Además, tambi-n puedes guardar plantillas para aplicarlas en otras páginas, o combinar diferentes plantillas. racias a esto, es posible crear contenidos incre(bles sin tener que lidiar con los shortcodes de forma forma manual manual,, lo que hace que todo el proce proceso so sea sea mucho mucho más llevade llevadero ro y senci sencillo llo sin tener tener conocimientos de programación. Visual omposer es una verdadera maravilla y a lo largo de este manual se va a e/plicar su funcionamiento.
¿Cómo funciona Visual Composer? 0u funci funciona onami mient ento o es muy muy senci sencill llo o e intuit intuitiv ivo. o. 0e puede puede diseña diseñarr página páginass elega elegante ntess y funcionales. +ediante un editor visual se puede maquetar contenidos de forma profesional. 0e podrá crear diferentes ret(culas o estructuras de página e insertar todo tipo de elementos en ellas. 1na ve$ instalado el Plug!in, se verá que al editar o crear páginas aparece una sección a$ul 'usto +iguel +oyetones
encima del editor visual. Aqu( se puede elegir entre utili$ar el editor del bac#end 2es decir, la $ona de administración3 o el frontend 2la parte p4blica de tu sitio %eb3.
Visual omposer permite maquetar las páginas en cualquiera de los dos modos, de forma que si se quiere ver cómo lucirán realmente los contenidos puedes hacerlo utili$ando el editor del front!end.
Creando filas y columnas *odos los contenidos que se creen utili$ando Visual omposer están separados por filas, y cada una de ellas se puede configurar para tener cualquier n4mero de columnas, en muchas configuraciones distintas. Por e'emplo, se puede elegir tener 5 columnas repartidas equitativamente, o bien tener sólo dos columnas estructuradas como si se tuviera un contenido con barra lateral.
0i la estructura de columnas que se busca no está entre la lista, tambi-n se puede hacer uso de una configuración más personali$ada introduciendo te/tualmente la forma en que se prefiere que apare$can.
Añadiendo elementos 6entro de cada columna, se puede añadir cualquier n4mero de elementos para crear páginas. Visual omposer ofrece una gran colección de estos elementos para que se pueda crear casi cualquier tipo de página, entre los cuales se incluyen botones, pestañas, acordeones, botones social media, y mucho más. +iguel +oyetones
Por defecto, el Plug!in trae más de 57 elementos diferentes, y da la posibilidad de añadir incluso algunos de los Widgets de WordPress para crear barras laterales sin apenas esfuer$o.
&stos elementos vienen ya instalados con el Plug!in, aunque tambi-n se puede añadir nuevas e/tensiones para ampliar la biblioteca de elementos de Visual omposer. Para añadir un elemento se hace clic# en el icono 89: dentro del contenedor donde se quiere colocar el elemento y despu-s sobre el elemento concreto que se quiere insertar. Además, se puede editar, duplicar o arrastrar de un contenedor a otro.
+iguel +oyetones
Elementos que puedes insertar con Visual Composer Visual omposer incluye una enorme biblioteca de elementos %eb que van a servir para enriquecer la %eb y dotarla de numerosas funcionalidades. os elementos aparecen listados en una interfa$ como la que ves aba'o. &sta interfa$ de elementos se despliega pulsando en el icono 89:. Para añadir un elemento de la lista simplemente se hace clic# y listo.
0eg4n se va añadiendo elementos al diseño, se puede arrastrar de un lado a otro para reordenar los contenidos sin apenas esfuer$o. *ambi-n es posible clonarlos, ahorrando tiempo cuando se necesite crear varios elementos muy similares. o me'or de todo esto es que Visual omposer se puede integrar con otros plugins gracias a su AP;, pudiendo añadir elementos nuevos a esta colección. Algunos de los temas premium más populares en *hemeforest aprovechan esto para incluir shortcodes nuevos y más modernos, con lo que las posibilidades son infinitas. A continuación enumeramos un listado completo de los elementos que se tiene disponibles en Visual omposer y e/plicamos su funcionamiento< Fila. 1na fila es un contenedor hori$ontal en el que se puede insertar contenido estructurado en columnas. Para escoger una estructura determinada se hace clic# en el icono de l(neas hori$ontales situado en la parte superior i$quierda del elemento y se escoge el n4mero de columnas que se requiere. ada fila o fran'a de Visual omposer se puede despla$ar y cambiar de orden, borrar y duplicar. &n cada fran'a se puede elegir el color de fondo y otras caracter(stica especiales para cada una. +iguel +oyetones
Text Block. os *e/t "loc# son ca'as de te/to a los cuales se puede dar formato mediante un editor sencillo similar al de cualquier procesador de te/to. Separator. (nea separadora a la que se puede dar el aspecto y la anchura que se quiere. 0irve para separar visualmente el contenido y estructurar me'or el diseño. Separator with text. Añade una l(nea separadora con un te/to incluido= sirve para separar visualmente el contenido y estructurar me'or el diseño. Message Box. rea una ca'a con mensa'e a la que se le puede asignar un estilo prediseñado y una animación que puede elegir de una lista.
Facebook Like. rea una ca'a t(pica de >aceboo# para que los usuarios puedan dar un +e usta y el enlace sea visible en su propio perfil.
Tweetmeme Button. +uestra un botón de *%ittear para que los usuarios puedan hacer un t%eet con el contenido de la página o post. ;ncluye cifra de t%eets totales. Google+ Button. 6espliega un botón de oogle Plus para que los usuarios puedan recomendar el contenido en esta red social perteneciente a oogle.
Pinterest Button. +uestra un botón de Pinterest para que los visitantes puedan pinear el contenido y colocarlo en unos de sus muros de Pinterest.
Preguntas Frecuentes. Añade una ca'a de >A? o preguntas frecuentes que podemos personali$ar, añadirle una animación predefinida, etc.
+iguel +oyetones
Single 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.
Image Galler. 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.
Image !arousel. Para insertar un carrusel animado de imágenes desde nuestra librer(a multimedia o subidas desde nuestro propio ordenador.
Pesta"as. Añade una ca'a con diversas pestañas que permiten navegar entre diferentes contenidos haciendo clic# en cada una de ellas.
Barra a#icional con wi#gets. &ste elemento nos va a servir para crear una $ona adicional en la que podemos insertar todo tipo de %idgets.
Bot$n. Para insertar un botón que elegimos de entre una serie de estilos predeterminados. *ambi-n podemos añadirle un icono de la biblioteca de iconos. Bot$n %. +uy parecido al anterior, con la venta'a de que podemos elegir entre más opciones de estilos predefinidos y añadir color y tamaño.
Tour. 0irve para añadir una ca'a de contenido vertical que clasificaremos en distintas pestañas, las cuales muestran dicho contenido al hacer clic# sobre ellas.
+iguel +oyetones
&ccor#ion. ;nserta una ca'a con fran'as de contenido que pueden desplegarse y mostrar más contenido al hacer clic# en cada una de ellas.
'ntra#as recientes. &ste elemento sirve para añadir entradas recientes que hayamos publicado y filtrarlas por categor(as determinadas.
!all to &ction Button. ;nserta un llamativo botón call to action o llamada a la acción que podemos personali$ar, cambiarle el color, añadir una animación, etc. !all to &ction Button %. &ste elemento nos va a servir para añadir un botón all to Action muy similar al anterior y que podemos personali$ar de diversos modos. (i#eo Plaer. Permite insertar un reproductor con un v(deo de @outube o Vimeo. Para añadirlo, simplemente introducimos la 1 del v(deo.
Google Map. +uestra un mapa con la dirección que insertemos mediante un código iframe que e/traemos directamente en oogle +aps. &s posible editar la altura. B Blog !arousel. &ste elemento muestra art(culos o entradas del blog en forma de carrusel animado que podemos filtrar por categor(as determinadas. Post Sli#er. +uestra un slider con art(culos o entradas del blog en forma de carrusel animado que podemos filtrar por categor(as determinadas.
Puro. Para los más avan$ados, este elemento permite insertar código )*+ puro para reali$ar acciones que as( lo requieran.
+iguel +oyetones
Puro. Al igual que el anterior, este elemento avan$ado nos va a servir para implementar directamente código puro en nuestra página, en este caso Cavascript. )i#get #e Flickr. on este elemento podrás añadir un %idget con fotos de tu cuenta de >lic#r y editar diversos aspectos relacionados con el modo de mostrarlas. Barra #e Progreso. ;nserta una barra de progreso con un porcenta'e. A la barra podemos asignarle estilos y animaciones predefinidas.
Pie !hart. on el elemento Pie hart vamos a poder insertar un cuadro en forma circular que muestra diferentes porcenta'es de manera proporcional.
'mpt Space. &s un espacio en blanco al que podemos dar una altura. &sencial para separar verticalmente los diferentes bloques de contenido y dar 8aire: a la %eb. !ustom *ea#ing. omo el anterior, pero con mayor cantidad de opciones, como la elección del tipo de letra de oogle >onts, color, interlineado, etc.
)P Buscar. Para insertar un campo de b4squeda dentro de nuestra %eb. Podemos personali$ar su estilo mediante añadi-ndole una clase de 00.
)P Meta. &ste elemento nos va a servir para insertar automáticamente diversos botones de log in, log out, admin, feed y enlaces de WordPress.
)P ecent !omments. on este elemento podemos incluir un %idget de omentarios ecientes reali$ados en el 0ite y editar algunos aspectos.
+iguel +oyetones
)P !alen#ar. Dos permite añadir un %idget de calendario que incluye enlaces a las diferentes fechas de publicación de las entradas de sitio Web.
)P Pages. on este elemento podemos insertar en nuestra página un %idget que lista todas las páginas e/istentes en el sitio Web de WordPress.
)P Tag !lou#. Para insertar en la página %eb un listado en forma de nube de tags con las etiquetas más usadas en las entradas del sitio Web.
)P !ustom Menu. on este elemento podemos insertar en un lugar determinado cualquiera de los men4s que hayamos creado en Apariencia E +en4s. )P Text. &ste elemento nos va a permitir insertar un te/to determinado o un código )*+ en el sitio Web, como un %idget de te/to.
)P ecent Posts. Para mostrar en el sitio Web un %idget con los comentarios recientes que los visitantes han reali$ado en la Web.
)P Links. on este elemento añadiremos en la $ona que queramos un %idget con los enlaces que tenemos en nuestra sección de "logroll.
)P !ategories. &ste elemento nos va a servir para añadir donde queramos un %idget con un listado de las categor(as e/istentes en nuestro sitio.
)P &rchi,es. on el módulo WP Archives, al igual que en los casos anteriores, podemos mostrar un %idget que contiene un listado con los archivos del sitio Web.
+iguel +oyetones
)P SS. &ste elemento lo vamos a poder utili$ar para colocar en el sitio Web un %idget de sindicación 00 a nuestros contenidos.
Creando plantillas 0i se desea, *ambien es posible guardar una página como plantilla para reutili$arla más adelante. as plantillas son una forma e/celente de ahorrar tiempo, ya que se tiende a repetir los mismos contenidos una y otra ve$ en diferentes páginas se puede aprovechar al crearlas sólo una ve$.
Cómo guardar una plantilla con Visual Composer Visual omposer 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 4nica página. Para guardar nuestro contenido como plantilla hacemos clic# en el botón de guardar plantilla que se encuentra en el men4 principal de Visual omposer, a la derecha del botón 9 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.
+iguel +oyetones
Videos Tutoriales: https
+iguel +oyetones
