¡Divi 3.0 Ha llegado! Introducción al visual page builder más rápido y fácil de usar

Hace seis meses, el equipo de Elegant Themes decidió centrar el 100% de sus recursos en una sola idea, decidió poner toda la carne en el asador y comprometerse a crear algo más grande y mejor de lo que nunca habían construido antes: Divi 3.0.

No se trataba de mejorar el software de Divi, se trataba de reinventar Divi, la creación de una moderna aplicación que cambiaría las reglas del juego y que garantizaría la relevancia de Divi en los próximos años. Se propusieron construir lo que va a convertirse en el mejor constructor visual de contenido del mundo.

Durante los 100 días que duró el “Maratón Divi 100” han estado compartiendo contenido creado por ellos mismos para facilitar el proceso de creación de contenido con Divi. Es posible que hayas empezado a preguntarte lo buena que podría ser para tía esta herramienta. Es posible que hayas sido escéptico acerca de si necesitas o no disfrutar de una verdadera experiencia de edición de front-end en tu web. O es posible que hayas empezado a preguntarte si habrá merecido la pena la espera.

Bueno, la espera ha terminado, Divi 3.0 está aquí y deja que te diga algo … ES INCREÍBLE! La velocidad es increíble, la interfaz es hermosa y la experiencia de su uso es pura magia.

El nuevo constructor visual lleva todo lo que hizo grande a Divi, pero hace que sea infinitamente mejor a través de su nueva interfaz visual que te permite crear páginas en la front side de tu sitio web. Añadir contenido, personalizar el diseño, redacta tus textos directamente en la página y ver todo lo que sucede, y el aspecto resultante al instante, delante de tus ojos. Nos encanta, y no podemos esperar a que lo pruebes tu también.

PRUEBA LA DEMO DE DIVI 3.0

Cuando se carga el constructor visual, verás tu página exactamente como lo harías si estuviera navegando por tu sitio web con normalidad. Con el constructor activo ¡todo el contenido de la página se convierte en editable!. Puedes hacer clic en cualquier elemento y ajustar su contenido, tamaño, espacio, color, posicionamiento y más. Puedes añadir, duplicar y eliminar contenido, arrastrar el contenido de una zona a otra y cargar elementos de la biblioteca de forma instantánea.

Todos los módulos Divi y configuraciones anteriores siguen estando ahí, para que no los extrañes 😉 , pero con la posibilidad de acceder a ellos de una forma mejorada y simplificada a través de la nueva interfaz visual.

Las acciones que resultaban tediosas y frustrantes en constructores de back-end basados en bloques, como el identificar el contenido exacto en cada una de las cuadrículas de secciones y filas, la vista previa de los cambios y la previsión de cómo ciertos cambios en las configuraciones podrían afectar al resultado final.

Crear con la interfaz visual es infinitamente más intuitivo, y te aseguro que después de usarlo por primera vez te vas a preguntar ¡cómo has podido vivir sin él! Incluso para los usuarios actuales Divi, ya familiarizados con el anterior constructor, esta actualización es un cambio en las reglas del juego por completo.

Cuando se hace un cambio en el nuevo constructor visual, la página se actualiza al instante. El texto de la página se vuelve maleable, mira como cambia mientras deslizas los controles de tamaño de fuente y mira como las palabras se expanden y contraen con cada gesto. La página se vuelve algo vivo a medida que juegas con el selector de color. Es muy divertido y fácil y un poco mágico. A diferencia de otros editores de contenido que hayas podido usar, el nuevo constructor visual de Divi es increíblemente rápido, lo que hace que el proceso de diseño sea aún más divertido.

El proceso de añadir contenido a tu página no podría ser más sencillo. Si deseas agregar algo nuevo, simplemente coloca el cursor sobre el área deseada y haz clic en el botón “+” lo que hará aparecer una lista de +40 elementos de contenido de Divi. No será necesario arrastrar  elementos desde una sección fíja del constructor hasta el punto en el que queremos añadir el elemento ya que el botón ‘+’ herramientas Divi siempre está ahí cuando lo necesites. ¿He mencionado que es súper rápido?.

Por supuesto, ningún constructor de contenido estaría completo sin la funcionalidad de “arrastrar y soltar (Drag&Drop)”, y Divi 3.0 no es una excepción, incluso desde sus versiones anteriores. Hasta aquí sin novedad. La cuestión es que “Arrastrar y soltar” elementos en el constructor visual de Divi es especialmente intuitivo porque estarías trabajando con tu contenido real, directamente, en lugar de hacerlo con la abstracción en bloques y rejillas como se hacía antes.

Al editar el contenido, la nueva característica de Divi 3.0 “zoom out” le da una vista en perspectiva de su diseño que te permitirá arrastrar grandes porciones de tu contenido entre secciones muy distantes dentro de la página sin tener que desplazarte. También puedes olvidarte de arrastrar y soltar por completo y optar por la funcionalidad de copiar y pegar elementos de Divi. Copiar, pegar y eliminar en lugar de mover.

Una de las cosas que perseguían con Divi 3.0 era el permitir interacciones mucho mas significativas que aprovecharan al máximo la naturaleza visual del constructor. Anchuras y alturas que pueden ajustarse simplemente pinchando y arrastrando es un ejemplo perfecto de lo que perseguían, y alcanzaron. Es algo que no tiene sentido en el constructior tradicional Divi, pero es algo que es completamente natural y lógico en el nuevo constructor visual.

Al colocar el cursor sobre cualquiera de los cuatro lados de una fila o sección, puedes arrastrar para aumentar o disminuir su relleno (padding) aumentando o disminuyendo la anchura y la altura del elemento. ¡El poder ver como los cambios tienen lugar al instante con el movimiento el ratón es otra de las magias de Divi 3.0!

El nuevo constructor visual integra la posibilidad de definir por separado el aspecto que tu contenido tendrá en dispositivos de distinto tamaño. La capacidad responsiva no era una opción y el poder ver con tus propios ojos el resultado final de tu trabajo en un smartphone, una tablet o en la versión de escritorio no tiene precio.

Puede alternar entre estos diferentes puntos de vista mientras editas la página y el constructor visual se mantendrá totalmente funcional en los tres modos. Es más, Divi te permite especificar diferentes valores para los parámetros de cada elemento en función del tipo de dispositivo, ¡y el constructor cambiará automáticamente entre cada tipo de dispositivo mientras editas! Nunca ha sido tan fácil construir un sitio web totalmente responsivo y sin errores.

El nuevo constructor visual tiene un historial de cambios propio con el que podrás deshacer y rehacer tus cambios con un solo clic. Es una de mis características favoritas de Divi 3.0, no sólo porque es increíblemente útil, sino porque es, quizás, el ejemplo más brillante de la velocidad y la potencia del nuevo constructor.

Ya no existe el peligro de cometer un error y perder un contenido válido porque no se perderá nada, todo cambio quedará registrado y podrá ser deshecho. Puedes deshacer tus acciones más recientes, o abrir el registro histórico de cambios y “viajar por el tiempo” saltando de un punto a otro viendo como tu página se transforma de un instante a otro. Es incluso una gran manera de comparar los cambios en el diseño y decidir qué variante que te gusta más.

Este es el primer constructor de WordPress que ofrece una interfaz personalizable que no te encasille en una interfaz definida por alguien que puede no tener tus mismas prioridades.

Puedes elegir que los controladores de módulos aparezcan dentro de una ventana emergente o que lo hagan en una barra lateral. Puedes ajustar el tamaño y la posición de las ventana emergente, o utilizar los botones para expandirla y contraerla.

Si arrastras la ventana emergente a ambos lados de la página, esta se ajustará automáticamente a la posición de barra lateral en el lado que hayas elegido y ¡podrás ajustar su contenido en consecuencia!. Puedes cambiar el ancho de la barra lateral para ajustarla al tamaño de tu pantalla o arrástrala sobre el otro lado de la página si así te lo parece.

Al editar el texto en el nuevo constructor visual de Divi, no tendrás la necesidad de abrir un panel de configuración para agregar texto nuevo o editar/formatear el texto actual. Si quieres añadir un poco de contenido a la página, ¡basta con hacer clic y empezar a escribir!

Puedes componer mensajes enteros usando una sola columna y un módulo de texto de forma rápida y cómoda. Redactar texto directamente en tu página es mucho mejor que trabajar dentro de una interfaz de edición tradicional. No hay distracciones y no hay ningún misterio en cuanto a cómo va a quedar el texto una vez que se ha guardado.

Han creado una interfaz de edición en línea propia y personalizada para Divi 3.0, que realmente  es un gustazo de utilizar. Es muy sencilla y eficaz, sin herramientas inútiles que solo aturden y confunden.

Formatear el texto con el editor en línea es muy fácil. Puedes aplicar estilos estándar a cualquier otro estilo, como negrita, cursiva y subrayados, sin esfuerzo alguno.

Puedes agregar encabezados H1-H5, crear enlaces, crear listas y ajustar la alineación del texto exactamente igual que en el editor de texto de WordPress habitual.

Además, puedes aplicar fuentes personalizadas, colores y tamaños a tu texto. A través de esta combinación de opciones de estilo puedes llevar fácilmente el estilo de tu tipografía al siguiente nivel.

El año pasado Matt Mullenweg, el co-fundador de WordPress y el director general de WordPress.com, habló sobre el futuro de WordPress y la importancia de JavaScript. Más tarde ese mismo año, el equipo en WordPress.com lanzó Calypso, una interfaz de WordPress moderna construido usando “React” y “Flux”.

Esto les permitió saltarse el legado de los últimos años y crear una nueva y moderna interfaz de WordPress. Elegant Themes decidieron seguir su ejemplo y hacer lo mismo con Divi. El constructor visual en Divi 3.0 es una aplicación completamente nueva construida desde cero utilizando “React” y “Flux”, y esta nueva tecnología les ha permitido hacer algunas cosas realmente sorprendentes.

Están invirtiendo en el futuro de la web, estamos dedicados al futuro de Divi, Divi 3.0 es su manera de demostrarnos a todos que el constructor continuará evolucionando y cambiando para mejor.

El nuevo Divi Builder es rápido. Realmente rápido. De hecho, es probablemente uno de los constructores más rápidos que hemos utilizado nunca. Al agregar o cambiar contenido, la página se actualiza al instante.

Hay poca o ninguna “carga” tradicional porque el ejercicio de procesamiento se lleva a cabo en el navegador, no en el servidor (esto es javascript y su velocidad dependerá de la máquina que lo ejecute).  Este es el futuro de WYSIWYG.

Los usuarios tradicionales Divi no tienen por qué preocuparse si deciden actualizar a la versión 3.0. A pesar de que se ha rediseñado completamente el constructor, el resultado final de la página permanecerá sin cambios.

Todos los módulos y configuraciones actuales funcionarán exactamente como lo han hecho en el pasado. Divi 3.0 ofrece compatibilidad con versiones anteriores. Esto es bueno porque te permitirá seguir trabajando como siempre, con el constructor tradicional, al mismo tiempo que puedes jugar con el nuevo para familiarizarte con el.

Estamos seguros de que esta adaptación durará poco por que en el momento en el que pruebes el nuevo constructor no volverás a tu tradicional forma de trabajar.