divi-descubre-los-secretos-de-divi-3-0

Descubre los secretos de divi 3.0, ya está aquí y ha llegado para quedarse

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

Divi 3.0 consíguelo ahora

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.

Divi 3.0 consíguelo ahora

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!!!

Divi 3.0 consíguelo ahora

Acerca del autor

Oscar Fernández Herrero

Diseñador gráfico y web ¿ Te gustaría mejorar el aspecto visual de tu proyecto? Ayudo a bloggers y a emprendedores a mejorar su credibilidad por medio del diseño, ya que una primera buena impresión puede ser definitiva a la hora de conseguir tu próxima conversión. ¿Te animas?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable del fichero: Óscar Fernández Herrero.Finalidad:moderar comentarios. La Legitimación; es gracias a tu consentimiento.Destinatarios: tus datos se encuentran alojados en mi plataforma de hosting de Webempresa. Podrás ejercer Tus Derechos de Acceso, Rectificación, Limitación o Suprimir tus datos enviando un email a oscar@creativolandia.com o ante la Autoridad de Control.Encontrarás más información en política de privacidad

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Comentarios

  1. Isabel García Ramos dice

    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!!

    • Oscar dice

      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!

  2. Andrej dice

    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.

    • Oscar dice

      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!!!!

  3. Esperanza dice

    ¡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.

    • Oscar dice

      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!!!