Te guste o no, la realidad es que el tema Divi se ha convertido en poco tiempo en un auténtico estándar entre los temas WordPress profesionales, y te aseguro que nos por casualidad, sino por sus muchas virtudes.
Y no es que haya hecho nada nuevo en realidad, sino que ha tomado la idea de los temas multipropósito y la maquetación visual llevándola a otro nivel, mejorando la experiencia del usuario y, en definitiva, facilitando la creación web para todo tipo de usuarios, y también para los desarrolladores profesionales.
Pero eso ya lo sabías ¿no?
Índice de contenidos
Las novedades de Divi 3.0
Hoy toca hablar del lanzamiento de Divi 3.0, que acaba de salir a la luz, con una experiencia de maquetación visual totalmente nueva que cambiará para siempre el modo en que creas webs con el constructor Divi, a mejor por supuesto.
El nuevo editor en portada convive con el anterior constructor del editor, y ambas experiencias son totalmente coincidentes e intercambiales, lo que implica que si ya eres usuario de Divi y has adquirido cierto grado de maestría con la interfaz del constructor Divi, podrás dar el salto al nuevo constructor en portada con una curva de aprendizaje nula.
De hecho, lo primero que te llamará la atención es que en la barra de admin cuando ves tu web tendrás un nuevo botón para Habilitar el constructor visual, al lado del de Editar página, y ahí empieza la magia.
Por supuesto, siempre puedes seguir usando al interfaz previa e, incluso una vez dentro de la misma sigues teniendo la oportunidad de lanzar el nuevo constructor visual de Divi 3.0.
Hay montones de cosas que hacen que sea excitante este nuevo editor visual, pero sobre todo que mientras lo utilizas todos los cambios aparecen al instante en la página. Puedes hacer clic, arrastrar, soltar y editar la página directamente, en vez de utilizar el editor de bloques.
Pero lo que más llama la atención, especialmente si ya has utilizado otros maquetadores en portada, es lo rápido que es el nuevo constructor Divi en portada, además de adaptable.
Olvídate de tener que actualizar la página para ver los cambios, de barras de carga Ajax, lo que tienes es manipulación instantánea gracias a React. De hecho es ReactJS el responsable de hacer que Divi 3.0 disponga del maquetador en portada más rápido del mercado.
En este vídeo tienes, en poco más de 2 minutos, una estupenda introducción de lo que te espera…
La experiencia de la maquetación visual
Cuando lanzas el maquetador visual en portada de Divi ves tu página exactamente como se muestra en tu web y, al contrario que con la versión anterior del constructor Divi, en el que los elementos de la página están representados por bloques, los elementos del maquetador visual en portada se representan por sí mismos, los ves tal cual son.
Puedes hacer clic en cualquier sección, fila o módulo y modificar los ajustes del elemento como lo harías en el constructor anterior, pero todo con tu página a la vista.
Cuando estás en el maquetador visual en portada se mejora enormemente la experiencia de edición, especialmente al acceder a los ajustes, infinitamente más intuitivo que en la versión anterior.
Pero lo mejor es que cuando haces un cambio se muestra al instante, pero al instante de verdad. Toda la maquetación la haces en tu navegador, por lo que no hay que hacer llamadas Ajax para cargar elementos o actualizar el diseño, y al utilizar React, la actualización del DOM es tremendamente eficiente.
Vamos, que crear una nueva página es muy muy rápido.
Uno de los conceptos vitales de la nueva experiencia de maquetación visual es que es una interfaz de usuario invisible. Lo que tienes es una experiencia de maquetación totalmente natural, sin ninguna interfaz de usuario que se interponga delante de la visión natural de tu página.
Por ejemplo, si haces clic en un texto podrás editarlo directamente sobre la página, en vez de tener que abrirlo en un panel de ajustes.
Si arrastras una fila desde su borde podrás hacerla más grande o pequeña sin tener que activar ningún «ancho personalizado» en los ajustes de la fila y luego tener que poner unidades de tamaño o lo que sea. Todo es más natural.
El nuevo editor integrado en portada
Este nuevo editor integrado en portada es un modo totalmente novedoso, pero sobre todo natural e instantáneo, de editar textos de manera totalmente visual.
Olvídate de buscar módulos de texto, abrirlos uno a uno hasta encontrar el que contiene lo que buscas, desplazarte hasta la caja de texto, modificar tus textos, previsualizar los cambios, guardar y actualizar de nuevo.
¿No sería mejor que cuando estás viendo la página simplemente haces clic en el texto que quieres modificar y lo editas a tu gusto, viendo los cambios al instante, directamente como se verán?
Pues eso es lo que tienes con el nuevo editor visual en portada de Divi 3.0, quizás una de las experiencias más satisfactorias, útiles y prácticas de esta nueva versión de Divi.
Las capturas anteriores están bien, como muestra de todo lo que puedes utilizar, pero como mejor se ve es en acción, aquí lo tienes:
¿O prefieres otro vídeo? Empieza a babear…
La interfaz invisible y personalizable
Divi 3.0 introduce un nuevo concepto de interfaz de maquetación visual que te permite modificar tus páginas en portada, pero lo que hace realmente especial de esta nueva interfaz, creada con React y Flux, es su cualidad de ser invisible y totalmente personalizable.
La tecnología que utiliza Divi 3.0 es la misma que el equipo de WordPress.com utilizó para Calypso, y ha permitido crear un maquetador tremendamente rápido, sin tiempos de carga o espera.
Cuando haces clic en un módulo o sus ajustes para modificar o configurar su contenido o diseño se abre al instante delante de tus ojos.
Puedes hacer clic en un párrafo y empezar a escribir directamente texto en tu página, o seleccionar texto y aplicarle formatos. No necesitas previsualizar cambios porque los estás viendo en directo, todo pasa delante de tus ojos, en tiempo real.
Lo que hace que Divi 3.0 sea realmente especial no es solo la velocidad y naturaleza visual del maquetador, sino la simplicidad y lo intuitivo de su interfaz, por eso le han llamado «interfaz invisible«, ya que se basa en la filosofía de diseño de que «el mejor diseño es el que no se ve«.
Es más, una buena interfaz no debe seguirte, debe predecir tus intenciones y ofrecerte las herramientas que necesites, cuando las necesites. Eso es lo que solemos definir como «intuitivo», algo que escuchamos a menudo pero que no experimentamos con tanta frecuencia.
Con Divi 3.0 es lo que tenemos, de verdad.
Cuando activas el nuevo maquetador ni siquiera te das cuenta de que está ahí. A medida que exploras la página es cuando van apareciendo los controles, sin abarrotar ni estorbar en el diseño de tu página.
Pero además, también puedes personalizar la interfaz para que se ajuste a tu pantalla, a tu contenido y así adaptarse a tus preferencias particulares. Es una experiencia de diseño sin igual.
¿Lo vemos? Ponte algo de música y dale al reproductor…
Deshacer, rehacer, copiar, pegar, historial de revisiones, pero mejor
Divi hace tiempo que ofrece deshacer acciones, rehacerlas, e incluso un historial de revisiones, pero con el nuevo maquetador visual en portada la experiencia va aún más allá.
No es solo que funcione, que ya lo hacía, sino que estas funcionalidades son uno de los mejores ejemplos de lo rápida, intuitiva y eficaz que es la nueva interfaz invisible, y la tecnología que la hace posible.
Además, deshacer o rehacer en el nuevo maquetador visual en portada es especialmente útil para comparar modificaciones recientes y ver las diferencias en tiempo real.
Siempre ha sido una de mis herramientas favoritas de Divi, de las que lo distinguen del resto de maquetadores visuales, pero es que con el nuevo maquetador es una auténtica gozada, dan ganas hasta de jugar con él, y sino mira como funciona en este otro vídeo.
¿Conclusión?
En realidad no hay ninguna conclusión, máxime cuando acaba de salir a la luz Divi 3.0 y nos queda mucho que disfrutar esta nueva experiencia y aprovechar sus ventajas para crear nuevos y mejores diseños, sin tener que imaginar nada ni perder tiempo y cientos de clics, viendo los resultados de nuestras modificaciones en tiempo real.
Son del tipo de herramientas que realmente ayudan a crear mejores webs, pues realmente diseñamos en vivo, pero además ahorran mucho tiempo de desarrollo, consiguiendo mejores resultados en mucho menos tiempo.
El tiempo de Divi 3.0 empieza ahora, y tiene mucho futuro por delante. Divi se ha ganado el cariño de miles de usuarios, y de desarrolladores, pues realmente es una herramienta que ayuda a crear mejores webs para uno mismo o para los clientes, y ahora, con la nueva versión Divi 3.0, ha tenido unas mejoras tan importantes, pero sobre todo relevantes de cara a los resultados y la optimización que seguramente se convierta en poco tiempo en uno de los frameworks más utilizados y exitosos, si no lo es ya.
De momento, el nuevo Divi Framework 3.0 está disponible para Divi y Extra, y dentro de nada también para el constructor Divi, con el que podrás gozar de esta maravilla en cualquier tema que quieras.
Y si ya usas Divi, la nueva versión es totalmente compatible con las versiones anteriores, lo que significa que tus páginas, secciones y módulos seguirán funcionando como antes.
¿Cuanto cuesta Divi 3.0?
Si ya tienes cuenta en Elegant Themes no tienes que pagar nada, la nueva versión está incluida como cualquier otra actualización de todos los temas y plugins de tu cuenta. De hecho ya están listos para actualizar o descargar en tu área de miembro o en el escritorio de tu WordPress.
Y si aún no eres de Elegant Themes, puedes tenerlo, además de otros 86 preciosos temas para todo tipo de usos, y plugins tan fantásticos como Monarch o Bloom, por suscripciones desde 89€ al año o 249$ de por vida.
Yo utilizo temas de Elegant Themes desde hace años y realmente merecen la pena, son bonitos, están bien programados y son tremendamente eficaces.
Además, por el lanzamiento de Divi 3.0 tienes un . con lo que su precio se queda en 70$, e incluye los 86 temas y todos los plugins y sus actualizaciones durante 1 año.
¿Quieres probar Divi 3.0?
Estás de enhorabuena, solo tienes que ir a esta demo y empezar a maquetar directamente en la portada, directamente, sin tener que registrarte ni nada.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Hola Fernando,
ayer estuve probando la demo del editor y es realmente expectacular. Soy usuario tanto de Divi como de Visual Composer. Hecho de menos todos los desarrollos de terceros que tiene Visual Composer y que añaden tanto funcionalidades como nuevos objetos que usar en el diseño de una web pero la verdad es que me quedé realmente impresionado con el nuevo Builder. Tengo como 10 temas premium de Themeforest y yo diría que hoy en día no hay nada parecido.
Por otra parte, ¿sabes si existen planes para permitir usar objetos de terceras empresas? ¿Qué tal es el código final que genera Divi con respecto a un tema con Visual Composer desde un punto de vista SEO? ¿Y los tiempos de carga?
Creo que pasaré a una suscripción «for life» y usaré un enlace tuyo 😉 Un saludo!
Hola @javierojuel:disqus
En cuanto a extensiones cada vez hay más, solo que no están en Envato, un día pongo por aquí la cantidad de cosas que hay para Divi 🙂
Sobre el código, es mucho más limpio el de Divi que el de VC, lo mismo los tiempos de carga, en mis pruebas muchísimo más ligero con enorme diferencia.
Sobre el SEO lo importante es el código html que generan, y es más limpio el de Divi.
Conozco varias webs con contenidos adicionales para Divi pero mi impresión es que Elegant Themes no las apoya suficiente para crear una verdadera plataforma. Hay plugins interesantes que al actualizar Divi la versión dejan de funcionar bien, no he visto plugins con módulos suficientes que sean «suficientemente buenos»… Visual Composer ha conseguido crear un ecosistema alrededor suyo super-potente. Elegant Themes lo tiene en su mano y si lo consigue, hará aún más deseable pasarse a Divi!
Bueno, eso era hasta hace tiempo, precisamente en los 100 días hasta Divi 3 han estado publicando un montón en el blog de ET
Hola,
Yo tengo un divi child theme en mi página, y creo que es la versión 2.4 o quizás la 2.5.
Si instalo la 3.0 será compatible? o por el contrario se trastocará todo con el consiguiente trabajo de reorganizar todo desde cero?
Un saludo y gracias.
Sí. Yo he realizado pruebas en un entorno de pruebas y no me ha dado problema, el child theme me sigue funcionando correctamente. Un saludo.
Ningún problema, con y sin child theme, es como cualquier otra actualización en ese sentido
Hi Fernando , un buen post !! ,
yo al igual que @javierojuel:disqus estoy usando los dos editores , visual composer y Divi . Al igual que te pasa a ti hice pruebas de carga y divi ganaba con bastante margen a VC . El caso es que quiero cambiar un par de webs que tengo hechas en Visual composer a Divi … y claro no quiero dejarme la vida en ello …… en alguna ocasión te » lei o escuche» decir que hay gente que esta haciendo cosas para que esto sea posible . Podrías darme alguna información sobre el tema .
Un saludo y gracias !!
Pues no me ha tocado de momento, pero vamos, que pasa por una de dos:
1. Sustituir unos shortcodes por otros
2. Crear páginas nuevas con Divi, aprovechando textos y fotos de las anteriores (mi método preferido, parece más manual pero al final es lo más rápido)
Estoy diseñando mi tercera web. Esta vez con un child theme pero he aprendido mucho haciendo esta web. El problema es que cambié tanto el diseño del child que he perdido mucho tiempo para contrarestar los estilos del parent. He visto que es mejor usar Underscores. La página inicial (front-page.php) de la web que estoy trabajando tiene dos columnas, la de noticias (blog) y luego otra con los próximos eventos. Para ello he creado esta parte de la web con un editor donde he aprendido ha utilizar wp_query para filtrar por categorías lo que quiero mostrar en cada columna. Luego creé otra pagina personalizada para mostrar los eventos con una maquetación diferente a la del blog.
Mi segunda web la hice con Divi 2.6 y no encontré un módulo para añadir php por lo que creo que lo que explicado antes no podría hacerlo.
Estoy contento porque todo funciona pero no tengo claro la manera de trabajar en WordPress a la hora de hacer páginas personalizadas sobretodo si quisiera añadir Divi al flujo de trabajo.
El jugo que un desarrollador puede sacar a Divi supongo que es para maquetar páginas de la web muy visuales, sobretodo con la versión 3 para ir veloz pero luego habrá páginas como la de inicio que he comentado antes que toca hacerlas a mano. Entiendo que debido al sistema de shortcuts de Divi no puedes hacer una parte con el builder para luego añadir a mano, en tu editor preferido, los hooks que necesites para cosas avanzadas. Al menos lo entiendo así ¿o me equivoco?
Total que me parece un poco lio, porque tengo la página inicial creada a mano y el resto dentro de Wordpress ¿Puede que no sea así como haya que trabajar, o es que los más pros hagan todas las páginas con un editor? y dentro de Wordpress sólo están las entradas para que el cliente pueda ir añadiendo sus entradas.
Si alguien me puede explicar como hay que hacerlo si ven mi planteamiento incorrecto os agradecería ayuda para poder avanzar. Muchas gracias
Hombre, creo que te estás liando un poco, vamos por partes.
Divi es una ayuda de maquetación enorme, pero no vale para todo, como ningún tema, ni ningún plugin, ni siquiera WordPress.
Si necesitas añadir códigos PHP a alguna página o funcionalidad lo mejor es hacerlo mediante un plugin personalizado (en el blog lo he explicado varias veces) o sino el archivo correspondiente del tema hijo, así sigues pudiendo actualizar el tema sin problemas y no pierdes las personalizaciones.
Y no, no hay ningún módulo, ni en Divi ni en WordPress, para añadir PHP directamente, básicamente porque es un riesgo enorme de seguridad, aunque hay por ahí algún plugin que hace que se pueda, y una vez lo activas ya puedes meter PHP en widgets, entradas, módulos de texto y código de Divi o donde quieras. Pero no te lo recomiendo.
En definitiva, que yo lo abordaría como te comento al principio de este comentario.
Muchísimas gracias Fernando por tu recomendación. He buscado por «plugin personalizado» pero no he encontrado lo que se supone que me estás recomendando. He encontrado sobre custom post types, que precisamente también aprendí a implementar en esta tercera web, precisamente para que el cliente introdujera los eventos con (fecha, nombre, país) y también les añadí un subapartado en el backend de WP de Eventos bajo Entradas para tenerlas todas listadas.
Te agradecería si me pusieras algún post de los que me decías que has hablado en varias ocasiones porque como te he dicho no he sabido encontrarlo. Muchas gracias de nuevo.
El post sobre donde meter funciones y códigos:
https://ayudawp.com/crea-un-plugin-para-liberar-el-fichero-functions-php/
El plugin para ejecutar PHP (que NO recomiendo):
https://ayudawp.com/ejecutar-php-en-widgets-de-texto/
Hola Fernando, mil gracias por tu rápida respuesta. No me expliqué buen porque no era eso lo que preguntaba. Me gustaría saber cómo trabajan los desarrolladores avanzados de WP. Si crean todas las páginas a mano en un editor de código, o sólo hacen a mano las más complejas y el resto con el editor integrado de WP o builders tipo Divi. Yo tengo todas creadas y accesibles desde WP pero hay dos, front-page.php y eventos.php creadas con un editor y claro mi cliente no puede acceder desde Páginas ¿Esto es así? Me refiero a que las páginas creadas a mano, mi cliente no las puede ver/editar porque quedan externas al backend.
Hola Fernando,
llevo un tiempo leyendo ya sobre Divi y me tiene casi conquistado.
¿Sabes si puedo hacer algo como esto? –>
Me refiero a la parte de abajo donde cada producto le acompaña el título y la descripción.
Un abrazo
Marcos.
Hola Fernando. Actualmente desarrollo con Genesis aunque reconozco que Divi tiene buena pinta, pero no tengo claro que me deje hacer todo lo que yo quiera. Por ejemplo, cómo podría hacer para mostrar un grid con los contenidos de un custom post type y lso campos configurados con Advanced Custom Fields? He visto que sólo funciona con posts normales. Sería posible con Divi? Gracias
Cualquier custom post type que se pueda mostrar en un tema se puede mostrar en otro, cualquier shortcode, lo que sea, claro. Otra cosa es que tengas custom fields específicos para Genesis, tendrías que crearlos para el otro tema, en este caso Divi, o el que sea.
Gracias por la respuesta. Me refiero obviamente a Post types creados en un plugin o en el propio tema Divi. Lo pregunto por el componente «Blog» que tiene el maquetador visual. En la demo no veo que tenga la opción de hacer un grid de un post type que no se el post type «post». Me lo puedes aclarar?
Hola Fernando. Creo que no me expliqué bien. Te expongo mi situación:
– Tengo un plugin propio en el que tengo creado un post type que se llama por ejemplo: «Trabajos». Tengo ya varios trabajos metidos con sus respectivas imagenes destacadas y textos.
– Con los módulos que trae Divi, podría hacer para que en mi página de inicio (suponiendo que usa el constructor Divi) salgan los títulos e imágenes de esos trabajos usando el módulo «Blog» (o algún otro)? Si no es así, podría crear mis propios módulos para lograr este fin?
Gracias
Pues en principio Divi reconoce todo tipo de custom post types, y sino se le puede añadir soporte. Mira a ver si esto te sirve, es un truco para cambiar el cpt projects por el que tu quieras, con lo que tendrías el asunto solucionado:
http://blog.garethjmsaunders.co.uk/2015/03/07/changing-the-divi-projects-custom-post-type-to-anything-you-want/
Eso es una tienda online, hecha con Magento si no me equivoco. Claro, con Divi, con cualquier tema, y un WooCommerce. De hecho irá más ligero, Magento es un devorador de recursos de hosting.
No estas ofreciendo un 20%, SOLO ESTAN DANDO EL 10% DE DESCUENTO, POR FAVOR CORRIGE LA INFORMACION.
Hola Fernando,
Estoy usando el builder que viene con un tema de Themeforest llamado flatsome y echo de menos una mejor integración, estaba pensando pasarme a Divi, Crees que es más avanzado? Lo recomiendas para tiendas online con woocommerce? y para webs con gestión de reservas?
Totalmente. Ahora bien, prueba antes si no vas a cambiar de tema, porque también tienes Divi como plugin, solo el maquetador.
Dicho sea de paso Flatsome es un tema bonito pero un horror en cuanto a optimización, consume enormes recursos