Ha llegado la última versión oficial de Divi 3.0 y con ella un giro de 360º ya que uno de los mayores problemas de Divi era que no se podía editar en tiempo real y a pesar de ser un editor muy versátil esto lo limitaba y mucho.
He trabajado muchísimo con Divi, como ya comentaba hace meses en un post me parece una solución más que digna para novatos, su potencial y la relación calidad precio me parece súper interesante y bastante recomendable frente a otras opciones como Bridge o Avada, ahora creo que se los ha fumado con el editor visual en el front end.
Puedes leer aquí el artículo en el que propongo a Divi como la solución final para novatos
Aquí puedes leer lo que pienso de themeforest y los temas que se venden en ese marketplace
Pues sí por lo que se ve ya se puede editar la plantilla en tiempo real, la verdad que es una de esas cosas que siempre me ha parecido un retraso y por qué no decirlo un coñazo de Divi, antes para poder ver el resultado tras un cambio ya sea mínimo o no tener que guardar primero y después darle a visualizar.
Esto ya se acabó con divi 3.0
Muchos diréis pero si, sí tenía un botón de previsualizar, ¿pero tú lo has visto ahora? es flipante poder trabajar directamente en el resultado final.
Por lo que ahora se puede editar tanto desde el backend o administración como desde el frontend que sería la parte que ven los usuarios o render de la página.
Cuando estás trabajando especialmente como freelance necesitas velocidad y si estás maquetando hay veces que tienes que repetir un cambio más de una vez hasta dejarlo fino, por lo que si para verlo tienes que guardar y cambiar de pestaña para recargar la página es una señora putada, por lo que me parece un acierto que lo hayan convertido en live editor.
Os he preparado un tutorial – reseña de divi 3.0 que podréis encontrar al final del artículo
Primeras impresiones sobre Divi 3.0
La verdad es que es bastante fluido, cierto que tarda un poquito en cargar o esa ha sido mi impresión
Si ya habías trabajado con las anteriores versiones de Divi , no te va a costar mucho hacerte con su nuevo constructor visual, ya que el constructor visual está basado en la antigua interface y aunque en el frontend sus módulos se configuran de la misma forma, eso sí viene con muchísimas mejoras que te ayudan a trabajar más rápido.
Lanzarlo es bastante fácil lo puedes lanzar directamente desde la administración una vez crees la página sobre la que vas a trabajar, se empieza igual que como se hacía antes haces click en usar el constructor divi y te aparecerá el antiguo interface esta vez con dos botones en la parte superior uno para volver al editor clásico de WordPress y otro para lanzar el editor visual.
La otra forma seria desde el front-end o la página en si , en la barra de administración de wordpress en la parte superior hay un botón morado super cantoso que dice lanzar el constructor visual de Divi.
Una vez lo lanzas es bastante intuitivo ya que usa los mismos códigos de color que el antiguo interface para diferenciar las secciones las filas y los módulos.
He de decir que en algún momento se me ha quedado colgado, puedo decir que me ha pasado varias veces por lo que es importante que guardes regularmente, me atrevería a decir que casi con cada cambio que hagas, tiene un botón de guardar en la barra inferior de herramientas.
Novedades en Divi 3.0
La primera novedad a mencionar evidentemente sería el editor visual, ver tus cambios en tiempo real, esto ya lo hemos comentado en el punto anterior.
Destaca el historial, te procura un historial con todos los cambios que has realizado desde que abres la página y puedes volver a cualquiera de estos estados, una vez sales de la página el historial se resetea.
Puedes modificar los textos al vuelo es decir puedes seleccionarlos, ponerte a escribir sobre el texto completo, una parte o insertar el cursor en cualquier punto de un texto y comenzar a escribir como si del mismísimo word se tratase.
Además tienes una mini ventana flotante que te permite cambiar los estilos del texto, tamaños e incluso la tipografía.
Puedes cambiar el padding o los márgenes internos de la página simplemente arrastrando desde los bordes tanto de las secciones como de las filas.
Las ventanas flotantes con la configuración de los módulos están muy bien diseñadas, ya que se pueden agrandar y mover por toda la ventana, incluso las puedes convertir en barras laterales, lo que te permite trabajar cómodo en todo momento.
Puedes cargar los diseños desde el frontend así como guardar secciones, filas y módulos con un simple click para reutilizarlos posteriormente, los puedes incluso guardar por categorías para tener absoluto control sobre ellos
Puedes importar y exportar estos a otras o de otras instalaciones de Divi que tengas según corresponda, directamente desde ella página en la que estás trabajando sin tener que irte a la administración.
Lo que me ha faltado en Divi 3.0
Nos hubiera faltado que hubieran solucionado lo del lock-in, es decir que si en el futuro encontramos otra opción que nos conviene más no perdamos el contenido de nuestra web, por dejar de usar divi, como hacen eficientemente otros constructores visuales como por ejemplo Beaver builder
Columnas solo se pueden usar 4 columnas o los formatos especiales, en algún momento he necesitado usar más de 4 columnas con divi 3.0 y no ha habido opción.
Hojas de estilo y de scripts por página, por desgracia no todo se puede tocar desde la pestaña de estilos
Nos hubiera faltado que a la vez hubieran actualizado el plugin de Divi builder para poder probar el constructor en otros temas, así como en Extra
Nos hubiera faltado que hubieran optimizado la carga de recursos como hacen eficientemente otros constructores como una vez más citamos a Beaver Builder, es decir solo cargar los recursos que usas no todo por si acaso, esto mejoraría los tiempos de carga.
Tiempos de carga todavía es uno de los problemas de divi especialmente por lo que hemos observado en el punto anterior.
El videotutorial – review de Divi 3.0 que te había prometido
Código de tiempo:
1:08 Cómo instalar Divi
1:49 Instalar un tema hijo para divi o child theme
3:26 Activar tema hijo para Divi 3.0
3:54 Creando páginas para poder trabajar con Divi
6:05 Creando un menú de navegación principal en Divi
6:25 Añadiendo paginas al menú principal de Divi
7:58 Personalizar la barra de menú de DIvi 3.0 colores.
9:44 Poner o cambiar logo en Divi
10:12 Customizar Css para el header de Divi.
12:07 Cambiar el tamaño de la barra de navegación y cambiar tamaño del logo con Divi.
14:28 Cargar plantilla de página en divi desde la administración
16:28 Lanzar el constructor visual desde la admin de wordpress
17:16 editar el texto en modo live En Divi 3.0
17:55 Ventanas flotantes en Divi 3.0
18:59 El historial de cambios en Divi 3.0.
20:03 Módulos columnas y secciones.
20:46 Duplicar módulos
Bueno esto es todo en este post espero te sirva y puedas utilizarlo en tu proyecto.
Cuéntame en los comentarios que te parece Divi 3.0: si lo has probado, ¿qué echas en falta? ¿qué no te gusta ?
Lo dicho te espero en los comentarios, un fuerte abrazo!!!
Hola Oscar, muchas gracias por el post y el tutorial!, acabo de descubrirte y la verdad me estas ayudando mucho!,tengo una duda, estoy creando mi sitio web con wordpress y compre con el black friday el tema divi, ya lo instale y lo active, pero como no sabia lo del tema hijo, lo puedo hacer ahora que ya esta activado?, también con la compra de este tema me enviaron varios enlaces de divi, que realmente no se para que son!!
Muy buenas Isabel,
Si, estás a tiempo de instalar y activar el tema hijo sin problemas, es más te aconsejo que lo hagas hoy mismo.
Referente a los enlaces, no se a que enlaces te refieres, si quieres mandamelos por el formulario de contacto y te diré para que son con gusto.
Un fuerte abrazo!
Gracias por este post, Oscar. El constructor visual es una característica muy buena de Divi 3.0. Pero yo personalmente todavía prefiero trabajar con el constructor backend y utilizo el constructor visual sólo para depurar los margenes y rellenos. No digo que el constructor visual no es bueno, sólo es que estoy más acostumbrado al constructor backend.
Muy buenas Andrés,
Lo importante de toda herramienta es que te haga sentir cómodo al usarla, si tu prefieres usar Divi desde el backend a mi me parece genial.
No creo para nada que estés desmereciendo el constructor visual por el hecho de preferir el backend.
Una de las cosas que más me gusta de Divi es precisamente la posibilidad de usarlo desde el backend o desde el frontend.
He de decir que a mi me parece más interesante la opción de usarlo desde el frontend ya que en todo momento ves el resultado final
Mil gracias por tu comentario y tu punto de vista.
Un fuerte abrazo!!!!
¡Hola, Óscar! Gracias por tu dedicado servicio en actualizarnos y acompañarnos en el manejo de Divi. Me encuentro investigando si es la mejor opción de editor en wordpress para una página web que estoy diseñando y tengo una pregunta: ¿en Divi puedo insertar mis propios iconos? ¿Qué sabes sobre eso?
Gracias.
Abrazos.
Buenas Esperanza;
Ante todo mil gracias por tu pregunta, te respondo:
No, en principio no hay una opción como la que pueda tener Elementor, Brizy o Beaver Builder que te permita subir iconos directamente a tu instalación de WordPress con Divi, para conseguir esto necesitaras usar plugins premium de terceros como por ejemplo:
Otra opción es insertar la fuente de iconos mediante la función wp_enqueue_style() en tu tema hijo pero después los tendrías que insertar a mano con código html en la página ya que no te aparecerían en el selector de iconos de Divi
Espero haberte respondido, fuerte abrazo!!!