El nuevo Fusion Builder en Avada 5.0
El principal cambio que encontrarás en Avada 5.0 es sin duda el nuevo Fusion Builder. Si aun no has tenido oportunidad de leer las novedades de Avada 5.0 te recomiendo que leas el post.
Un cambio que marca un punto de inflexión en el desarrollo de Avada e inicia un nuevo camino para esta plantilla.
2016 está siendo un año ambicioso para Theme-Fusion. Lejos de apoltronarse en su primera posición como theme más vendido de la historia en ThemeForest con más de 240.000 licencias, siguen trabajando duro e innovando para mantener Avada como una plantilla wordpress referente.
Para ello era necesario “reordenar la casa” y lo han hecho con Avada 4.0. Ahora, tan solo unos meses después, lanzarán la versión 5.0 con un nuevo constructor que promete hacer las delicias de diseñadores y usuarios.
A través del nuevo Fusion Builder será mucho más sencillo y preciso construir páginas web profesionales con una mayor facilidad de manejo y experiencia visual.
Contents
Un constructor completamente nuevo
A través de estos años, a medida que Avada avanzaba aparecían nuevas necesidades y peticiones de los usuarios.
Para poder satisfacerlas era necesario partir completamente de cero.
Por eso en 2015, el equipo de theme-fusion decidió crear un nuevo Fusion Builder y separarlo del núcleo de Avada.
El resultado de meses de trabajo es lo que ahora vas a poder ver y disfrutar en el nuevo Avada 5.0
Facilidad de uso, rendimiento y modularidad
Son los aspectos en los que se ha trabajado en el nuevo constructor.
La idea es que con el tiempo Fusion Builder sea la columa vertebral de otros productos y funcionalidades. Por eso se han propuesto que sea extensible, con gran rendimiento, fácil de usar y muy modular.
Para su construcción han utilizado Backbone.js, una herramienta de desarrollo/API para Javascript, muy rápida y eficiente.
Según ellos, todo ha sido re-imaginado completamente para asegurar que el diseño web sea fácil, intuitivo y rápido.
Compatibilidad con versiones anteriores
Llevo años trabajando con Avada y puedo asegurar que siempre han tenido muy en cuenta este factor.
En el proceso de actualización todas las páginas anteriores construidas con Fusion Builder serán convertidas para ser utilizadas en el nuevo constructor de Avada 5.0.
Características más importantes del nuevo Fusion Builder
Nueva interfaz de usuario
Todo es completamente nuevo. Les ha llevado más tiempo, pero de cara al futuro podrán hacer lo que quieran.
Según parece, la velocidad a la que opera es como mínimo 10 veces más rápida que su predecesor.
Entre los principales objetivos de utilizar un nuevo código fue asegurar la velocidad, con independencia del tamaño total de la página.
Todo esto es importante, pero lo que realmente hará a Fusion Builder tan especial es su interfaz de usuario.
Edición backend y front-end
Hay usuarios que prefieren editar en el back-end y otros en el front-end.
La primera versión del nuevo Fusion Builder solo permitirá edición en backend y a continuación vendrá la posibilidad de hacerlo en el front-end.
Con el tiempo Fusion Builder no solo se podrá utilizar en Avada, sino que será apto para ser utilizado en cualquier tema de Wordpress.
Una Interfaz de usuario intuitiva
El problema con muchos constructores de páginas es que o no hay suficiente espacio para diseñar porque te obliga a editar en la barra lateral…, la interfaz es tan compleja que se necesitan muchos clics para hacer algo simple… o sencillamente son malos.
El diseño de la interfaz de usuario puede representar claramente el éxito o fracaso de cualquier software.
Por lo que se ve, no se han tomado esto a la ligera.
Lo primero que notarás es que el nuevo Fusion Builder se ve diferente al anterior.
Salvo algunas similitudes en los controles de las columnas, ya no hay una barra de control superior con columnas / elementos / y páginas predefinidas.
Te estarás preguntando… ¿por qué este cambio? La respuesta es sencilla, ¡ya no es necesario!
La nueva interfaz permite agregar cualquier cosa, en cualquier lugar, en cualquier momento
Ahora Fusion Builder te permite hacer cosas que antes simplemente no podías hacer.
Incluso han creado una página de «inicio» que te servirá como punto de partida.
La mayoría de los maquetadores (incluido el actual Fusion Builder) necesitan arrastrar y soltar los elementos desde una barra superior estática y muchos clics adicionales para hacer cosas que se pueden optimizar.
El nuevo Fusion Builder corta de raíz con todos estos problemas y proporciona una interfaz limpia y simple que te permite crear rápidamente páginas incluso aunque antes nunca hubieras utilizado un maquetador.
Es un cuadro de columna 1/2 en un diseño de página completa. Se ve rápido que es posible agregar fácilmente un nuevo elemento, un contenedor entero o un conjunto de columnas en cualquier lugar de la página.
Se trata de un importante ahorro de tiempo y cambia la manera de trabajar con el maquetador.
Las áreas que se ven + Contenedor, + Columna, + Elementos son botones que activan ventanas modales para que selecciones rápidamente lo que deseas insertar.
Por ejemplo, cuando se hace clic en + Elemento se presenta una ventana emergente para elegir cualquier elemento pre-definido o personalizado que hayas creado (luego veremos que es esto).
El proceso de construcción y diseño
Fíjate que a los contenedores de ancho completo, ahora solo le llaman contenedores, pero siguen funcionando igual.
Me imagino que el cambio de nombre es porque hasta ahora su uso era opcional, sin embargo, en el nuevo Fusion Builder, todos los elementos deberán ir dentro de un contenedor.
El proceso de construcción de una página será:
Contenedores > Columnas > Elementos …
Primero se agregan los contenedores, a continuación las columnas y luego los elementos o códigos cortos.
Es el proceso correcto para diseñar y construir una página tanto en Avada como en cualquier theme Wordpress.
Biblioteca y contenido
Actualmente puedes guardar el contenido completo de una página. Si lo utilizas en otra que tenga contenido, este se elimina.
No se puede coger un trozo del contenido y reutilizarlo en otra, salvo que copies el código y lo insertes.
Este escenario era absolutamente necesario cambiarlo y el nuevo Fusion Builder no te decepcionará en este sentido.
Han añadido una sección completa como biblioteca y te permite gestionar todo el contenido guardado.
Como puedes ver, el botón Biblioteca siempre es visible en la barra de control principal del área superior.
Si haces clic en Biblioteca, se abre una ventana emergente con los diferentes contenidos pre-definidos y a medida
El contenido pre-definido se compone de las páginas demo de Avada y el contenido personalizado es cualquier contenido que tú guardes de tus diseños… ¿a que es genial?
Puedes guardar cualquier contenido personalizado. Por ejemplo, diseños de página entera, contenedores, columnas, elementos…
Cada elemento de la página tiene un icono de guardar. Al hacer clic en el icono se agrega a la biblioteca.
Cualquier elemento de la biblioteca se puede reutilizar fácilmente en cualquier momento.
Organización de la biblioteca
La biblioteca está organizada en varias secciones.
Existe una barra principal superior. Es la barra de control y siempre está disponible para configurar y añadir cualquier elemento.
También destacar que al guardar tus propias plantillas, puedes administrarlas mediante la edición o eliminación de la mismas.
Por sí mismo esta característica es una gran ventaja, pero también dispones de otras posibilidades.
Por ejemplo, imagina que ya tienes una página creada y solo quieres añadir un único elemento o plantilla que guardaste anteriormente.
Fusión Builder te permite elegir cómo se añade el contenido en la página y tienes 3 posibilidades:
Reemplazar todo el contenido, insertar antes del contenido e insertar después del contenido actual. ¡Mira lo que te digo!
La biblioteca está perfectamente organizada para que coincida con la funcionalidad global de Fusion Builder.
Todo este mecanismo te supondrá un importante ahorro de tiempo en tu trabajo.
Importar, exportar y compartir contenido
Otra opción muy interesante es que el contenido también podrá ser exportado o importado a través de la biblioteca.
No sólo se puede exportar el contenido completo, sino cualquier tipo de contenido personalizado…contenedores, columnas, elementos, etc… Las posibilidades son infinitas.
La barra de control principal está siempre visible
Cuando creamos una página con mucho contenido, a medida que añadimos nuevos elementos, la barra de control cada vez va quedando más y más lejos. Esto te tiene de arriba para abajo continuamente.
La barra de control ahora es más pequeña, pero está fija y eso te permite trabajar con mucha más comodidad.
No importa si estás en la parte superior, en la mitad o en la parte inferior. Siempre la tienes ahí disponible para añadir, modificar o eliminar cualquier elemento.
Echa un vistazo al lado derecho de la barra de desplazamiento del navegador.
Este es un diseño largo, aunque en la imagen no puedas apreciarlo.
La ubicación actual es la mitad de la página. La barra de control se queda fija en la parte superior de la pantalla para que siempre puedas acceder a él.
La barra de control principal está muy bien pensada por todo lo que puedes hacer desde ella.
En primer lugar el maquetador siempre está activo y tienes controles de acceso a la biblioteca.
Puedes colapsar todas las secciones a la vez, añadir CSS personalizado, guardar la página como una plantilla, borrar todo el contenido y controlar el historial.
Todo esto desde la misma barra que te permite utilizar rápidamente cada función.
Control del historial
Ya que hablamos del historial, te comento una opción muy interesante.
En la mayoría de los maquetadores se puede avanzar o retroceder en el historial de uno en uno con una flecha hacia atrás o una flecha de avance.
El nuevo Fusion Builder tiene un botón de historial que muestra una lista desplegable de las últimas 30 acciones para que puedas navegar rápidamente varios pasos con un solo clic.
Esta opción no solo permite retroceder o avanzar con un solo clic. El icono de estado del historial abre un cuadro desplegable al vuelo y muestra los nombres de cada paso, por lo que puedes identificar rápida y fácilmente cada estado.
CSS personalizado en cada página
¡Bueno! esto era algo tan necesario como el oxígeno para vivir y ¡por fin lo tenemos!
Hasta ahora podías aplicar una clase o id css a cada elemento, pero ahora es posible aplicar un estilo css a cada página de forma independiente. Mira este ejemplo.
La barra de control principal tiene un icono que cambia todo el campo css arriba y hacia abajo. Cualquier CSS introducido en este campo sólo se aplicará a esta página. Siempre es accesible desde la barra de control y cuando se guarda una plantilla de página, el CSS se guardará con él.
Como el CSS se guarda con la plantilla de página, también se importará a nuevas páginas cuando se inicia a partir de una plantilla de página personalizado.
Si la página ya tiene CSS personalizado, el nuevo se anexa al existente al cargar una nueva plantilla.
Importar cualquier página de cualquier DEMO
Sí has leído bien! El nuevo Fusion Builder permite importar una única página desde cualquier demo de Avada con unos pocos clics.
Basta con abrir la Biblioteca y seleccionar la ficha Demo. encontrar la que deseas en el menú desplegable y te presenta una lista completa de cada página que contiene la demo.
Busca la página que deseas y haz clic en el botón de carga … voilá!
Esta es una característica muy interesante y hace que sea fácil de mezclar y combinar los diseños de demostración de Avada.
Si deseas la demo completa con todas las páginas, los posts, opciones del tema, widgets, etc tendrás que importar la demo completa en la sección Avada> Demos.
Pero si necesitas una sola página de cualquiera de las demos Fusión Builder es el camino a seguir.
Por razones técnicas y de usabilidad ten en cuenta que cuando importas una sola página de una demo a través de fusión builder se incluye en la plantilla todo el diseño de página, las opciones de páginas de fusión y los atributos de los marcadores de imagen.
Columnas anidadas
¡Por fin…! Tal vez un usuario normal no se diese cuenta de este detalle, pero un diseñador profesional, probablemente no entendía que no existiese esa posibilidad en un theme como Avada, sobre todo si trabajas con otros maquetadores.
Este era sin lugar a dudas (en mi opinión) el punto débil de Avada y solo por este cambio, ya ha valido la pena todo este esfuerzo.
¡Te confieso que esto me tuvo cabreado durante un tiempo! hasta que entendí porque no era posible en ese momento. Lo cierto, es que fuese o no posible, era una «auténtica putada» no disponer de esa posibilidad.
¿Qué son las columnas anidadas? Pues son columnas que van dentro de otras columnas y disponer de esta opción abre todo un mundo de nuevas posibilidades de diseño.
Puede que no te parezca importante, pero créeme, esto lo cambia todo.
Por ejemplo, ahora puedes tener una columna a la izquierda 1/3 y otra a la derecha de 2/3. Pues imagínate que ahora en el interior de la de 2/3 quieres incluir 3 columnas pero que funcionen dentro del mismo conjunto. Esto te permite crear un diseño de este tipo.
Máxima flexibilidad de diseño
Observa cómo la columna de la izquierda 1/3 va a la misma altura que las columnas de la derecha. Y las columnas de la derecha tienen una columna principal 2/3 en la parte superior, a continuación, un conjunto de 1/3 columnas de abajo. Las posibilidades con columnas anidadas son prácticamente infinitas. Por cierto, que el ejemplo anterior es el diseño de una nueva demo Avada que se está creando.
Para acceder a las columnas anidadas haces clic en el botón + Elemento interior de cualquier columna y se mostrará una ventana emergente.
En la parte superior hay 3 fichas: Elementos (códigos cortos), biblioteca (los elementos personalizados) y las columnas anidadas.
La ficha columnas anidadas también muestra un conjunto de combinaciones de columnas pre-definidas para ahorrar tiempo.
Estas son algunas de las características más impactantes, pero también hay otras muy interesantes que debes conocer.
Personalizar el nombre de un contenedor
Si tu página es muy extensa, te vendrá muy bien esta opción, ya que te ayudará a poner orden en tú trabajo.
Simplemente haz clic en el nombre de «contenedores» y escribre un nuevo nombre directamente en la página. Esto te ayuda a identificar fácilmente que es cada sección.
También puedes plegar fácilmente cada contenedor con lo que ahorrarás mucho espacio en la plantalla.
Colapsar los contenedores
Esta posibilidad ahorra mucho tiempo y te permite mantener todo bien organizado y limpio. Y en la barra de control principal tienes una opción para «contraer todos los contenedores de la páginaa la vez”. Esto es muy útil si necesitas reorganizar el contenido de toda la página. Al colapsar todos a la vez sólo tienes que arrastrar y soltar distintos contenedores en donde tú quieras y ¡listo!
Tamaño de las columnas
Ahora para cambiar el tamaño de las columnas ya no se hace con un el icono de + y -.
Al igual que los estados de historia, dispones de un recuadro emergente con todas las posibilidades y tamaños de las columnas. Podrás hacerlo con un clic.
Ya no hay una necesidad de hacer clic en el botón + varias veces para convertir una columna completa en una de un 1/6. ¡Parece una tontería pero te ahorrará tiempo!
Shortcodes con elementos secundarios
Por ejemplo, las tabs, que son un poco coñazo….
Ahora tendrás una interfaz más amigable y que te permite reordenar los elementos simplemente arrastrando y soltando e incluso puedes añadir un nombre para identificarlos con más rapidez.
Activar y desactivar funcionalidades
El nuevo Fusion Builder viene con un conjunto de opciones globales que te permiten activar o desactivar cualquier elemento.
Por ejemplo, si no estás utilizando el elemento tabs, simplemente desactívalo y desaparecerá. Estas opciones globales también tienen la función de importación y exportación para todo el contenido personalizado.
Activar o desactivar en los Post personalizados
Otra opción interesante es permitir que Fusion Builder se active o no por defecto en los distintos post personalizados, por ejemplo, el portfolio, faqs, etc.
En el área de configuración global puedes activar o desactivar fácilmente Fusión Builder para cualquier tipo de post.
Una casilla de verificación permite gestionar de forma rápida si se utiliza Fusion builder en ellos o no.
Planes de futuro con Fusion Builder
La versión 1.0 es simplemente el comienzo de un producto extraordinario que continuará mejorando dia a dia. Uno de los principales objetivos de los desarrolladores es que Fusion Builder sea un producto extensible y modular.
Confirman que ya están trabajando con otros desarrolladores para iniciar y construir una biblioteca de add-ons. Me imagino que esto va a llevar su tiempo y sólo una vez que el constructor funcione de manera completamente independiente se lanzará como un producto independiente.
En cualquier caso, esta posibilidad también abre un camino de infinitas posibilidades.
Conclusiones
Avada 4.0 cambió la manera en como se trabaja con la configuración general del theme con una nueva interfaz que funciona a las mil maravillas y facilita mucho el proceso de aprendizaje.
Ahora, con Avada 5.0 y el nuevo Fusion Builder, se abre un mundo de nuevas posibilidades, con un trabajo más eficiente, rápido y limpio
¡Yo ya estoy deseando tenerlo en mis manos! ¿y tú?
Hola, Fabián:
He dado con este artículo buscando información sobre Fusion Builder. No se si podrá ayudarme, te comento:
Partiendo de la base de que todos mis plugin están actualizados, de un tiempo a esta parte me encuentro con un problema. Cuando quiero incluir algún elemento (un botón, un área, separador, etc.) una vez lo tengo seleccionado y configurado y le doy a «Insertar» no responde. Pero ni siquiera responde el botón de «Cancelar», con lo que tengo que refrescar la página y ¡ay de mi! si no había guardado los cambios….
De momento me apaño copiando y editando códigos, pero en un «coñazo». No se si te te ocurre alguna idea o me puedes orientar, yo estoy perdido.
Gracias de antemano.
Un saludo,
Hola Armando. Eso es algún plugin que está provocando algún tipo de conflicto con Javascript. Dependiendo de la cantidad de ellos que tengas, puede ser algo tedioso, pero es de eso seguro. A mi solo me ha pasado una vez y era del plugin. Me gustaría decirte cual es, pero es que sinceramente no me acuerdo.
Saludos