Revista Comunicación

Divi 3.0 y el Nuevo Editor Visual Page Builder de Elegant Themes

Publicado el 09 septiembre 2016 por Joseliron

Esta última actualización de la plantilla más emblemática de Elegant Themes, Divi 3.0, es absolutamente radical e introduce un editor web "Visual Page Builder" tan rápido y fácil de usar que a partir de ahora pensarás que crear un blog o web profesional es un juego de niños.

Hace ya 6 meses que el equipo de Elegant Themes decidió tirar la casa por la ventana y crear la plantilla web más completa, flexible, rápida y fácil de usar del mercado. Y no es porque Divi no tuviera ya esas cualidades, pero con esta nueva actualización a Divi 3.0, han conseguido distanciarse del resto y con mucha diferencia.

La actualización no solo ha consistido en hacer mejoras en Divi, sino que ha habido un cambio desde los cimientos de la plantilla. Esta reinvención de Divi usa una moderna aplicación React y un lenguaje nuevo, y asegura la supremacía de Divi en el mercado en los años venideros.

El objetivo principal a la hora de re-diseñar la plantilla Divi, ha sido el de crear el mejor editor visual para construir webs del mercado. No solo del momento, sino de los años venideros.

Los resultados son absolutamente sorprendentes ya que han conseguido una experiencia de edición visual totalmente "Front-end", es decir, con el nuevo Divi 3.0 ya no necesitas recurrir al panel de administración "back-end" o "trastienda" para crear o modificar el contenido de tu web, sino que puedes hacerlo directamente desde el front-end o dicho de otro modo, los cambios los haces directamente en la web y ves los resultados al instante, tal y como los va a ver el usuario. Sin necesidad de acudir a ninguna vista previa. Lo que ves es lo que hay.

El nuevo Visual Page Builder de Divi, coge todo lo que los usuarios aman del theme y lo mejora infinitamente. La velocidad es increíble y la interface produce una experiencia mágica de creación, totalmente intuitiva y visual.

Es tan fácil de usar que no requiere de ninguna curva de aprendizaje para dominarlo. Trabajas la creación de contenido sobre el front-end, visualizando a tiempo real como van quedando los cambios que vas haciendo - Una maravilla!

Crear contenido, personalizar los diseños, escribir directamente en la página y ver cómo los cambios ocurren al instante delante de tus ojos...todo esto y mucho más es Divi 3.0

¡¡Solo por Tiempo Limitado!! Descuento Promoción Divi 3.0 - 20%OFF Plan Developer ¡¡Solo por Tiempo Limitado!! Si ya eres miembro de Elegant Themes, puedes hacer un Upgrade de tu plan con un 20%OFF

Crea todo de modo 100% visual con Divi 3.0

Divi 3.0 introduce una interface visual totalmente nueva que cambiará completamente el modo en que construyes tus webs. Este editor front-end te permite hacer cambios en tu web...en la propia web!

Puedes por ejemplo:

  • Clicar en un párrafo y empezar a teclear.
  • Resaltar texto y ajustar las fuentes y los estilos.
  • Arrastrar los elementos y verlos moverse.
  • Añadir nuevos elementos de entre los más de 40 módulos de contenido,
  • Ajustar los settings o configuración de los módulos,
  • Guardar y cargar elementos desde la librería y ver como todo sucede ante tus ojos al instante.

Y todo ello sin refrescar la página, sin barras de carga Ajax y sin necesidad de recurrir a ninguna vista previa, ya que todo ocurre en tiempo real en la página.

Divi Nuevo Editor Visual Page Builder Elegant Themes

El nuevo editor visual de Divi, te permite crear y editar tus páginas desde el front-end de tu web. Cuando cargas el Builder, ves la página exactamente como se vería si estuvieras navegando por ella en internet.

Con el Page Builder activado, sin embargo, todo lo que hay en la página resulta editable. Puedes clicar en cualquier elemento y ajustar su contenido, tamaño, espaciado, color, posicionamiento y más. Puedes añadir, duplicar y borrar contenido, arrastrarlo de una zona a otra y cargar elementos desde la biblioteca al instante.

Todos los módulos y configuraciones que te son familiares siguen estando ahí, mejorados y simplificados gracias a la nueva interface visual.

Todas esas cosas tan tediosas y frustantes que ocurren en los Page Builders basados en bloques operados desde el back end (o parte administrativa de la plantilla) tales como localizar el contenido en una rejilla de secciones y filas, previsualizar los cambios hechos y comprender como usar las configuraciones de los elementos, son cosa del pasado con el Editor Visual de Divi 3.0.

Construir una web con la nueva interface visual es infinitamente más sencillo e intuitivo, y una vez que lo usas por primera vez te preguntas cómo has podido vivir sin ello. Incluso para los actuales usuarios del Divi, este cambio supone una mejora increíble.

Cada vez que haces un cambio en el nuevo Visual Builder, tu página se actualiza al instante. El texto en la página es moldeable y podrás ver las palabras expandirse y contraerse con simples movimientos del cursor. Puedes explorar el selector de colores y observar cada transformación que hagas.

Es fácil, es divertido, es el mejor Editor Visual que hayas visto jamás. Al contrario que en otros editores visuales front-end que puedas haber usado, el nuevo Visual Page Builder de Divi es increíblemente rápido, lo que convierte el proceso de diseño en una diversión.

Divi Nuevo Editor Visual Page Builder Elegant Themes

Añade contenido nuevo en un instante

Añadir contenido a tu página no puede ser más fácil. Si deseas añadir algo nuevo, simplemente pasas el cursor sobre el área deseada, clicas el botón "+" y te aparecerá una lista con los más de 40 elementos de contenido de Divi.

No hay necesidad de arrastrar elementos desde un lugar central, ya que las opciones de contenido de Divi están siempre ahí donde las necesitas.

Además puedes hacer una búsqueda, lo que hace aún más fácil encontrar el elemento de contenido deseado o elemento guardado en la biblioteca. Y todo esto ocurre a la velocidad de la luz. En cuanto añades el contenido nuevo, ya está ahí.

Divi Nuevo Editor Visual Page Builder Elegant Themes

Divi tiene un módulo de contenido para cada ocasión y cada uno de ellos puede ser personalizado completamente para obtener el resultado deseado. Basta con añadir, mezclar y emparejar contenido y observar como tu nueva página ve la luz. Sin usar código, sin plugins...simplemente clicas y construyes.

No importa que clase de web estés creando, Divi tiene todas las herramientas que necesitas para convertir tus ideas en realidad:

Divi Nuevo Editor Visual Page Builder Elegant Themes
Imágenes

Divi Nuevo Editor Visual Page Builder Elegant Themes
Galería

Divi Nuevo Editor Visual Page Builder Elegant Themes
Vídeo

Divi Nuevo Editor Visual Page Builder Elegant Themes
Vídeo Slider

Divi Nuevo Editor Visual Page Builder Elegant Themes
Publicidad

Divi Nuevo Editor Visual Page Builder Elegant Themes
Etiquetas

Divi Nuevo Editor Visual Page Builder Elegant Themes
Slider

Divi Nuevo Editor Visual Page Builder Elegant Themes
Testimonios

Divi Nuevo Editor Visual Page Builder Elegant Themes
LLamadas a la acción

Divi Nuevo Editor Visual Page Builder Elegant Themes
Audio

Divi Nuevo Editor Visual Page Builder Elegant Themes
Suscripciones

Divi Nuevo Editor Visual Page Builder Elegant Themes
Login

Divi Nuevo Editor Visual Page Builder Elegant Themes
Portafolio

Divi Nuevo Editor Visual Page Builder Elegant Themes
Contadores en barra

Divi Nuevo Editor Visual Page Builder Elegant Themes
Contadores en círculo

Divi Nuevo Editor Visual Page Builder Elegant Themes
Contadores en número

Divi Nuevo Editor Visual Page Builder Elegant Themes
Alternancias

Divi Nuevo Editor Visual Page Builder Elegant Themes
Formularios de contacto

Divi Nuevo Editor Visual Page Builder Elegant Themes
Sidebar

Divi Nuevo Editor Visual Page Builder Elegant Themes
Divisores

Divi Nuevo Editor Visual Page Builder Elegant Themes
Texto

Divi Nuevo Editor Visual Page Builder Elegant Themes
Tablas de precios

Divi Nuevo Editor Visual Page Builder Elegant Themes
Portafolio

Divi Nuevo Editor Visual Page Builder Elegant Themes
Acordeón

Divi Nuevo Editor Visual Page Builder Elegant Themes
Autor

Divi Nuevo Editor Visual Page Builder Elegant Themes
Blog

Divi Nuevo Editor Visual Page Builder Elegant Themes
Tienda

Divi Nuevo Editor Visual Page Builder Elegant Themes
Cuenta atrás

Divi Nuevo Editor Visual Page Builder Elegant Themes
Título de post

Divi Nuevo Editor Visual Page Builder Elegant Themes
Mapa

Divi Nuevo Editor Visual Page Builder Elegant Themes
Redes sociales

Divi Nuevo Editor Visual Page Builder Elegant Themes
Código

¡¡Solo por Tiempo Limitado!! Descuento Promoción Divi 3.0 - 20%OFF Plan Developer ¡¡Solo por Tiempo Limitado!! Si ya eres miembro de Elegant Themes, puedes hacer un Upgrade de tu plan con un 20%OFF

Drag & Drop, Duplicar y Borrar

Por supuesto, ningún Page Builder estaría completo sin un sistema Drag & Drop de arrastre de elementos, y Divi 3.0 no es la excepción. Arrastrar y soltar elementos en el editor visual de Divi es particularmente intuitivo, ya que trabajas con el contenido actual en lugar de con ambiguos bloques y rejillas.

Cuando se trata de editar páginas grandes, la nueva característica Zoom Out de Divi, te da una visión general de tu diseño y te permite mover grandes partes de contenido largas distancias sin necesidad de hacer scroll en la pantalla. También es posible olvidar el Drag & Drop en Divi y optar por las funciones de Copiar y Pegar.

Anchura y altura mediante Arrastre en el nuevo Divi

Una de las características que se han tenido en cuenta a la hora de crear el Divi 3.0, ha sido permitir interacciones útiles y que expriman al máximo la increíble naturaleza "visual" del nuevo Page Builder. El ajuste de las alturas y anchuras mediante el método de arrastre es un claro ejemplo de esto. Es algo que no tenía sentido en el antiguo editor back-end Builder, pero que surge de manera natural y fantástica en el nuevo Visual Builder.

Cuando posas el cursor sobre cualquiera de las 4 esquinas de una fila o sección, puedes arrastrar y aumentar o disminuir el Padding (o relleno), aumentando o disminuyendo así la anchura y altura de los elementos. Y por supuesto podrás ver los cambios al instante a medida que mueves el cursor.

Trabajar en un espacio en blanco desde el panel de administración (como ocurre en un back-end Builder), puede ser intimidante y llevarte a la frustración. A veces trabajar con bloques y números, no es la manera de hacer decisiones acertadas en el diseño. Es mucho mejor poder ver y "sentir" en vivo como los cambios que vas efectuando afectan a tu diseño. Y esto es lo que ocurre con el nuevo Divi 3.0 y su brillante editor front-end "Visual Page Builder".

En cuanto trabajas con el Visual Builder y eres capaz de arrastrar alturas, anchuras, hacer modificaciones en el mismo texto, personalizar todo al instante...te das cuenta de que estás a otro nivel. Es realmente brillante.

Edición Responsive

El nuevo editor visual de Divi, viene con funciones de diseño responsive que puedes usar para visualizar como queda tu página en un smartphone, tablet u ordenador. Puedes alternar estas diferentes vistas mientras editas tu página y el editor visual permanece totalmente funcional en los 3 modos. Y lo que es más, Divi te permite especificar diferentes valores de configuración para cada uno de ellos y el Divi Builder se encarga automáticamente de conmutar entre ellos mientras los editas. Nunca ha sido tan fácil crear una web responsive profesional.

Comandos Hacer, Deshacer y Restaurar instantáneos

El nuevo Editor Visual "Page Builder" de Divi posee un sistema muy completo de Hacer y Deshacer, junto con un " historial de registro" totalmente restaurable. Esta es una de las características destacables del Divi 3.0, y no solo porque es muy útil, sino porque muestra la velocidad y poder del nuevo editor.

Nunca tienes por qué tener miedo de cometer un error, ya que nada se pierde para siempre. Puedes deshacer tus acciones más recientes o bien abrir el registro histórico, viajar atrás y adelante en el tiempo y ver tu página transformarse al instante. También es un buen método para comparar los cambios de diseño y decidir que variaciones te gustan más. Simplemente navega en tu historial, como si de un libro se tratara y decide el mejor diseño.

La Interface invisible que nunca te molestará

El nuevo Divi Builder te dota de todo el poder sin ninguna cortapisa. Divi 3.0 ofrece a sus usuarios una experiencia de diseño moderna basada en la elegancia, rapidez y simplicidad de uso. Sin duda todo un logro del equipo de Elegant Themes.

Divi Nuevo Editor Visual Page Builder Elegant Themes

En cuanto abres el Page Builder, ni siquiera eres consciente de que está ahí. En tu pantalla no aparecen Sidebars flotantes ni cabeceros fijos. Tu contenido no está atado a innumerables botones ni obstruido por molestas cuadrículas ni capas. Solo ves tu web.

La interface del Page Builder es realmente invisible. Pero eso no es todo...Cuando clicas en un párrafo, puedes empezar a teclear. Cuando resaltas un bloque de texto, puedes aplicar fuentes y estilos personalizados. Cuando arrastras algo, se mueve. Al pasar sobre cualquier elemento básico de Divi, sus opciones de configuración pueden abrirse y ajustarse. Todo lo que necesitas para añadir contenido, editarlo y crear una web asombrosa está ahí delante tuyo pero sin molestarte en absoluto, es como si la interface fuera realmente poderosa pero invisible!

Esta manera de crear sitios web es muy divertida. El nuevo Divi Builder es elegante, es sutil y es poderoso.

¡¡Solo por Tiempo Limitado!! Descuento Promoción Divi 3.0 - 20%OFF Plan Developer ¡¡Solo por Tiempo Limitado!! Si ya eres miembro de Elegant Themes, puedes hacer un Upgrade de tu plan con un 20%OFF

Personaliza tu Interface

Este es el primer Page Builder para WordPress que posee una interface personalizable que no te encasilla en ciertas convenciones.

Puedes elegir que tus controles de los módulos aparezcan dentro de un pop-up (o ventana emergente), o puedes optar por que aparezcan en una barra lateral. Puedes ajustar el tamaño del popup y la posición de este o bien usar los botones para expandirlo o contraerlo. Si arrastras el popup a cualquier lado de la página, automáticamente se cambiará a la posición Sidebar y ajustará tu contenido como es debido. Puedes cambiar el ancho del Sidebar para acomodar el tamaño de tu pantalla o arrastrarlo al lado opuesto de la página según sean tus preferencias.

Nueva y asombrosa experiencia de edición In-Line con el nuevo Divi Builder

Una de las característicasmás excitantes de este nuevo Divi Visual Page Bulder es la habilidad para añadir, editar y dar formato al texto, en la propia página, sin necesidad de abrir ningun panel de configuración de módulos. Esto ahorra muchísimo tiempo y produce una experiencia de creación web muy entretenida.

Divi Nuevo Editor Visual Page Builder Elegant Themes

A la hora de editar contenido de texto en el nuevo editor visual de Divi, no hay necesidad de abrir ningún panel de configuración para añadir o modificar el texto. Si deseas crear contenido para tu página, simplemente clicas y empiezas a teclear! Puedes componer posts enteros usando una simple columna y un módulo de texto, y la experiencia es rápida y agradable.

Componer en la misma página es mucho mejor que trabajar en una interface back-end. No hay distracciones y no hay dudas de como va a quedar todo una vez guardado, ya que ves los resultados al instante. El equipo de Elegant Themes ha creado su propia interface de edición In-line para Divi 3.0 y es realmente muy agradable de usar. Es simple, efectiva, sin herramientas superfluas y consolidada en una solo interface fácil de navegar.

Fuentes y estilos personalizables

Dar estilo al texto con el editor Inline es muy fácil. Puedes aplicar estilos estándar a cualquier selección, tal como negrita, itálica o subrayado. Puedes añadir encabezamientos H1-H5, crear links, crear listas y ajustar el alineamiento de los textos tal y como es posible hacerlo en el editor normal de texto de WordPress.

Además de todo esto, puedes aplicar fuentes personalizadas, colores y tamaños de texto.

Con toda esta combinación de opciones para dar estilo al texto, podrás llevar tu tipografía al siguiente nivel.

Un Page Builder moderno para una nueva era

La nueva interface de edición visual en Divi 3.0 ha sido re-creada desde sus cimientos usando React, una moderna biblioteca javascript para interfaces de usuario. Aunque todavía se basa en el framework modular " Divi Builder " que se ha venido usando durante los 3 últimos años, la nueva interface es totalmente independiente. Esto ha permitido a los diseñadores de Elegant Themes enfocar el nuevo Page Builder de una manera nueva y moderna y que asegura a todos los usuarios de Divi una proyección al futuro y confianza en la larga vida que le espera.

Divi Nuevo Editor Visual Page Builder Elegant Themes

Hace un año, el co-fundador de WordPress y CEO de WordPress.com, Matt Mullenweg, hablaba sobre el futuro de WordPress y la importancia de Javascript. Meses más tarde el equipo de WordPress.com lanzó Calypso, una moderna interface WordPress construida usando React y Flux. Esto les permitió dar un salto en el tiempo y crear una nueva y moderna interface WordPress superior a las demás.

Siguiendo este ejemplo, los diseñadores de Elegant Themes han hecho lo mismo con Divi. El Visual Builder de Divi 3.0 es una completa nueva aplicación construida desde cero usando React y Flux, y esa nueva tecnología les ha permitido crear algo asombroso.

Ha sido una apuesta arriesgada que demuestra el compromiso de Elegant Themes con Divi y su intención de consolidar, aún más si cabe, la supremacía de Divi sobre el resto de temas WordPress del mercado. Y esto es solo el comienzo...

¡¡Solo por Tiempo Limitado!! Descuento Promoción Divi 3.0 - 20%OFF Plan Developer ¡¡Solo por Tiempo Limitado!! Si ya eres miembro de Elegant Themes, puedes hacer un Upgrade de tu plan con un 20%OFF

Increíblemente rápido

El nuevo Divi Builder es rápido. Muy rápido. De hecho es probablemente uno de los Website builders más rápidos que hayas usado alguna vez. Cuando añades o cambias contenido, la página de actualiza de inmediato. No hay tiempo de carga ya que la creación toma lugar en tu navegador, no en tu servidor.

Ya puedes decir adios a refrescar página y a las barras de carga ajax. Es hora de disfrutar de cada ajuste que hagas en tu web...al instante!

Si alguna vez te ha echado para atrás usar un editor web front-end por su elevado tiempo de carga, con Divi 3.0 no tienes nada que temer. Este es el futuro de los editores WYSIWYG (What You See Is What You Get). Lo que ves es lo que obtienes...y al instante!

Sin ataduras

Los actuales usuarios de Divi no tienen de qué preocuparse a la hora de darle al botón de actualización a esta nueva versión Divi 3.0. Aunque el Website Builder ha sido re-diseñado desde sus cimientos, el resultado final en tu página no va a variar en absoluto. Todos los módulos y configuraciones van a funcionar exactamente igual que antes e incluso puedes usar el Page Builder desde el front-end o desde el back-end a tu gusto.

Divi 3.0 es una mejora increíble pero respeta su antiguo "modus operandi" para los que lo deseen. La compatibilidad con el antiguo Divi Builder es total. Tu eliges como usarlo.

También disponible para Extra

La plantilla Divi no es la única de Elegant Themes que puede beneficiarse de las ventajas del nuevo Divi Builder Framework. Si estás usando el tema Extra o incluso si estás usando el Plugin Divi Builder con cualquier plantilla WordPress del mercado (aunque no sea de Elegant Themes) has de saber que también vas a poder aprovechar todas las ventajas que el nuevo editor web ofrece.

Una buena noticia para los usuarios de Extra y del plugin Divi Builder

Aunque todo el foco de atención se ha puesto en la actualización de Divi 3.0, los usuarios de Divi no son los únicos que están de enhorabuena, ya que el Divi Builder Framework sirve no solo para Divi sino también para su alma gemela Extra Theme y también para todos los usuarios del plugin Divi Builder (no importa con que plantilla WordPress lo usen, de cualquier marca).

Hay que repetir que el nuevo editor visual es totalmente compatible e intercambiable con el antiguo, con lo que no hay ningún peligro en actualizar a la nueva versión. Puedes usar el nuevo front-end editor o bien usar el antiguo back-end editor según desees. Tu decides.

Las páginas que usen la nueva o antigua versión de Divi, Extra o el Plugin Divi Builder, funcionarán perfectamente al cambiar, así que no hay de qué preocuparse en absoluto a la hora de hacer la actualización a Divi 3.0, Extra 2.0 o Divi Builder Plugin 2.0.

Conclusiones sobre la actualización Divi 3.0 y su brillante Editor Page Builder 100% Visual

Si has leído hasta aquí te darás cuenta de que ya no hay mucho más que decir. Elegant Themes ha consigo mejorar lo que algunos pensábamos que era casi inmejorable, y no lo ha hecho poniendo parches, sino que se ha tomado el trabajo muy en serio y ha sacado esta super-actualización Divi 3.0, con un totalmente renovado Editor Visual construido desde cero usando la última tecnología React y que va a cambiar por completo el modo en que construyes tus webs...para mejor!!

Para el que todavía no esté seguro y desee crear contenido como hasta ahora, no hay ningún problema ya que esta actualización respeta el antiguo modo de trabajo desde el back-end editor. Puedes cambiar de forma de operar cuando gustes y sin problema. Solo tú decides lo que quieres en cada momento!

Y por supuesto, los usarios de Extra Theme y del Plugin Divi Builder (que puede usarse con cualquier plantilla web del mercado) también se benefician de esta importante actualización.

En una palabra...brillante!!

¡¡Solo por Tiempo Limitado!! Descuento Promoción Divi 3.0 - 20%OFF Plan Developer ¡¡Solo por Tiempo Limitado!! Si ya eres miembro de Elegant Themes, puedes hacer un Upgrade de tu plan con un 20%OFF

Volver a la Portada de Logo Paperblog