#1 Actualizaciones de Elegant Themes

Hoy te voy a hablar de algo que realmente me encanta: actualizaciones de Elegant Themes.

Y es que sin tener que hacer nada ni pagar ni un sólo céntimo más la empresa no sólo mejora y optimiza tu código sino que implementa nuevas mejoras para que las puedas utilizar desde el primer día.

Por eso, para que no te pierdas ninguna de ellas hoy te traigo el primero de una serie de artículos en los que te mostraré todas y cada una de las actualizaciones que se han lanzado recientemente al mercado.

Además, si eres de los que no domina el inglés (🇬🇧 😡) y quieres ahorrarte complicaciones ésta será tú sección a la que acudir cada vez que haya una nueva actualización 😉

Nota: Las actualizaciones de hoy tratan sobre Divi y Divi Builder. Si no sabes nada sobre estos productos y te quieres poner al día te recomiendo que te pases primero por este artículo sobre Divi donde te muestro en detalle todo sobre estas magníficas herramientas.

Wireframe View para el Constructor Visual

Comenzamos con la primera actualización del mes de Mayo: Wireframe.

Y tú te preguntarás…¿qué demonios es esto? No te preocupes que es muy sencillo:

El Wireframe View es una aplicación que transforma el Constructor Visual de Divi Builder, también llamado Visual Builder, en una aplicación basada en bloques con un diseño y funcionamiento prácticamente igual a la interfaz clásica de Divi Builder.

Si eres un usuario habitual de Divi y Divi Builder conocerás los diferentes modos de edición que existen y sus carencias:

1. Back-end: el diseño a través de esta sección es mucho controlable, todos tus elementos son claramente visibles y están al alcance de tu mano. Pero tiene la desventaja de no poder comprobar la apariencia de tu diseño mientras vas maquetando teniendo que tener una ventana abierta e ir refrescando la página para ver tus resultados.
2. Front-end: en la parte visual del lado del cliente tenemos lo contrario: editas contenido y vas viendo como va quedando todo. El problema viene si tienes mucho contenido que modificar. Mover secciones, filas, módulos, etc.. se hace más complicado.

Peeero… ¡ahora con el Wireframe View todo es muuuucho más fácil ya que podrás tener todo en uno! 🤗

¿Y cómo mejora esto la experiencia de usuario?

1. Manejo: ahora maquetar es un proceso mucho más sencillo.
2. Tiempo: el proceso de diseño es mucho más rápido permitiéndote aumentar mucho más tu productividad.

Funcionamiento del Wireframe View

Para comenzar a usar esta herramienta sigue los siguientes pasos:

1. Activa el Constructor Visual.
2. Dirígete a la parte inferior y haz clic en el botón morado para expandir los ajustes:
3. A tu izquierda verás una serie de botones, presiona el botón y activarás el Wireframe View.
4. Para desactivarlo púlsalo otra vez y listo.

Una vez lo tienes activado su funcionamiento es exactamente igual al editor clásico con Divi Builder. Con él podrás:

• Añadir todos los elementos básicos que quieras: secciones, filas, columnas.
• Renombrar cada uno de ellos.
• Hacer uso de propiedades como: guardar en biblioteca, copiar módulo, copiar estilo, etc…

¿No te ha quedado claro? No te preocupes. Aquí tienes un vídeo donde te lo dejo todo un poco más mascadito 💪

Opciones de organización y búsqueda + Sincronización selectiva

Elegant Themes lanza tres mejoras que van hacer del proceso de diseño de tu web algo mucho más sencillo y efectivo teniendo un impacto brutal en tu productividad.

Analicémoslas una a una:

Opciones de organización

Anteriormente, cada vez que abrías las pestañas de algunos de los elementos del plugin Divi Builder para configurar su contenido el proceso no dejaba de ser un tanto tedioso.

El gran número de opciones que te brinda el constructor está genial pero la forma en la que estaban organizadas dejaba algo que desear. Como resultado te pasabas invirtiendo demasiado tiempo buscando qué opción es la que necesitabas configurar.

Pero ahora este problema está resuelto:

Para empezar se han añadido 3 nuevas categorías o tabs principales: Contenido, Diseño y Avanzado, sustituyendo a las antiguas (Básica, Diseño Avanzado y CSS Personalizado):

• Contenido: como su nombre indica en ella encontrarás el contenido del elemento.
• Diseño: relativa a todas las configuraciones que afecta al diseño.
• Avanzado: opciones útiles para usuarios cono conocimientos más avanzados en diseño.

Dentro de ellas el contenido ha sido organizado en subcategorías o subgrupos las cuales engloban todas y cada una de las opciones que guardan relación con ellas.

Además, gracias a su disposición tipo botón Toggle estas opciones quedan ocultas siendo visibles sólo cuando seleccionas el subgrupo que necesites, ahorrando así espacio y mejorando la navegación.

Así por ejemplo en el subgrupo “Cuerpo Texto” de un módulo de anuncio encontrarás todas las opciones de configuración relativas a la tipografía como la familia,  tamaño, color, etc…

Aparte de de estas mejoras Elegant Themes ha reorganizado todas las opciones en un orden que tiene mucho más sentido:

Por ejemplo: los subgrupos relativos a los textos están concatenados siguiendo un orden lógico de forma que sean accesibles rápidamente:

Opciones de búsqueda

Pero si esto no fuera suficiente aún queda mucho más ya que ahora todas las opciones son fácilmente localizables gracias a la la funcionalidad de búsqueda que viene incorporada en cada elemento de Divi Builder:

Es tan fácil como escribir el nombre en la caja de búsqueda y aparecerán de forma inmediata todas aquellas opciones relacionadas con esa palabra clave.

Vamos con otro vídeo de los buenos donde te hablo con más detalle de estas dos mejoras ya que quiero que se te quede todo bien clarito 😎 👌

Sistema de sincronización selectiva

Los elementos globales son aquellos que, una vez creados, quedan vinculados entre sí de tal forma que la modificación de algunas de sus opciones acabará afectando por igual a los restantes.

La utilidad de este tipo de elemento es clara: ahorrarnos una gran cantidad de tiempo durante el proceso de diseño de nuestra web.

Para implementar tú primer elemento global sólo tienes que crearlo y una vez diseñado guardarlo como «Global»:

Si esta funcionalidad es ya de por sí bastante útil los de Elegant Themes han ido más allá pudiendo ahora (en el caso exclusivo de los módulos globales) desincronizar ciertas opciones de configuración.

Por ejemplo:

1. Creamos un módulo de texto y lo guardamos como global.
2. Lo instalamos en 3 localizaciones de nuestra página.
3. Seleccionamos uno de ellos y desincronizamos en él el campo «Título».

De esta forma tenemos tres elementos sincronizados entre sí excepto uno donde el título está desincronizado por lo que un cambio en él no se visualizará en los otros dos:

Si te ha sonado un poco raro no te preocupes ya que te lo muestro con mayor detalle en este vídeo:

Sistema de documentación

Nuevo sistema de documentación

Mediante esta nueva actualización Elegant Themes ha renovado por completo su Sistema de Documentación no sólo para Divi sino también para el resto de sus productos.

Ahora toda la información va a estar a tu disposición en un único lugar de tal manera que el acceso a la documentación sea mucho más directa y sencilla.

Como verás la documentación de cada producto está organizada en «Colecciones» o también llamadas «Tutorial Collections»:

Más abajo encontrarás desplegada una la lista con todos los tutoriales que se encuentran en estas colecciones:

Barra de búsqueda

Una de las grandes novedades es la implementación de una barra de búsqueda situada en la parte superior de la página de documentación:

Sólo necesitas introducir la frase o palabra clave que estás buscando y tendrás desplegada  toda la información que necesitas.

Además al realizar esa búsqueda no sólo obtendrás resultados ubicados en las colecciones sino también aquellos publicados tanto en el blog como en los foros de Elegant Themes:

Para terminar esta sección te dejo otro vídeo explicándote de qué va todo esto del nuevo sistema de documentación de Elegant Themes:

Mejoras en el Background

Anteriormente las opciones relativas a backgrounds o fondos que el constructor de Divi ofrecía estaban organizadas en una sola lista haciendo mucho más difícil la localización de las opciones que te interesaban modificar.

Con esta nueva actualización la interfaz de los backgrounds ha cambiado quedando organizada en cuatro secciones o pestañas: Color, Imagen, Gradiente y Vídeo.

Ahora sólo tienes que seleccionar la pestaña que te interese y aplicar las configuraciones necesarias de inmediato:

Estas nuevas configuraciones se han aplicado no sólo en las secciones y filas sino en todos aquellos módulos que tenga la opción de configurar su background.

Gradientes

Dentro de las opciones de background encontrarás la pestaña nueva «Gradiente» a través de la cual puedes crear diferentes gradientes mediante sus opciones de configuración.

Sólo tienes que seleccionar los colores, el estilo de gradiente, ángulo, etc…y comenzar a hacer maravillas con él:

Control de imágenes

Dentro de la pestaña de background de imágenes se han añadido nuevas opciones para obtener un mayor control sobre el tamaño, posición y estilo de las imágenes que utilizarás como fondo.

Con un par de clic podrás seleccionar el tipo de tamaño, su posición, si deben o no repetirse, etc…

 

Además, en el caso de las images existe una opción muy interesante llamada mezclado o «blend» para controlar como tu imagen se comportará y mezclará con el color de fondo que le has dado al elemento creando diseños muy vistosos.

Conclusión

Elegant Themes sigue aportando un valor real a sus clientes con actualizaciones frecuentes mejorando así la optimización de cada uno de sus productos a la vez que añaden nuevas funcionalidades que te facilitarán muchísimo el diseño de tus páginas.

¡Pero es que además el coste económico que suponen es cero, son totalmente gratuitas! 🤗

¿Has visto una empresa que te ofrezca tanto por tan poco?

Descuento – Planes de Elegant Themes

Y hablando de costes … si estás interesado en adquirir algunos de sus planes no te olvides de mi descuento del 10%.

Nos beneficiaremos mútuamente: tú con una un pequeña rebaja que nunca está nada mal y yo llevándome una comisión que me ayudará muchísimo a seguir adelante con mi proyecto 😉

 

---

Y con esto y un bizcocho terminamos el artículo de hoy. ¿Qué te ha parecido? ¿Quieres que siga incluyendo más actualizaciones? No me dejes sólo. ¡Te espero!