Seleccionar página

Divi, permite a WordPress una flexibilidad antes desconocida en el diseño de páginas web con este popular CMS. Divi premite a a WordPress la posibilidad de crear cabeceras, cuerpos y pies de página web 100% personalizados.

Con Divi, la barrera que había entre los diseños a medida y los diseños con plantilla con wordpress se está rompiendo.

Pero, Divi ha ido evolucionando a lo largo de los años. Precisamente, esa ha sido su característica principal. La incansable tarea de sus desarrolladores por ir inocorporando nuevas funcionalidades. El resultado es la impresionante capacidad que tiene Divi para flexibilizar el diseño total de WordPress

En este post te voy explicando las diferentes funcionalidades que ha ido añadiendo Divi a lo largo de las diferentes versiones que han ido publicando.

 

ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES


VER CURSOS

 

 

En la actualidad existen 2 planes diferentes para contratar un plan de Elegant themes:

 

Ahora 20% de descuento

SUPER DESCUENTO DIVI

 

->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins. Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año.

La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA

NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.

DESCUENTO 20% PLAN YEARLY ACCESS

 

 

->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins. Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida.

La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA

NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.

DESCUENTO 20% PLAN LIFE TIME ACCESS

 

ENLACES PARA AMPLIAR INFORMACIÓN SOBRE DIVI:
Cómo usar el Divi Theme Builder

 

 

ÍNDICE POST

 

 

1.- DIVI y LAS NOVEDADES DE LA VERSIÓN 4.0 (DIVI 4.0)

 

Fecha de lanzamiento de la plantilla Divi 4.0 -> día 17 de octubre de 2019

La principal novedad que incluye Divi 4.0 es la incorporación de un Theme Builder o constructor de plantilla

 

 

¿y qué es un theme builder? ¿Divi no incorpora ya un page builder?

Te lo explico a continuación en primer apartado

 

 

1.1.- ¿Qué diferencia hay entre un theme builder y un page builder wordpress?

 

Cada página de un sitio web dispone de tres partes:

a.- Cabecera o header: parte superior, que en general, es común a todas las páginas, donde se ubica el logo y el menú de navegación.

b.- Cuerpo o contenido: situado en el centro, entre el header y el footer, es el contenido específico y exclusivo de cada pagina

c.- El footer o pie: situado en la parte inferior de la página. Compuesto habitualmente por enlaces de información general, iconos de redes sociales y datos de contacto.

 

***Page builder: una page builder, constructor de página o maquetador visual es una herramienta que nos permite diseñar y construir partes de una página web WordPress, generalmetne el cuerpo de la página.

Como ya sabes, el Divi builder es el page builder que incluye la plantilla Divi

 

***Theme Builder: es un constructor que nos permite diseñar y crear templates o diseños completos de página y asignarlos flexiblemente a páginas,posts, etc. Un theme builder nos permitirá crear y asignar todos los elementos fijos de un sitio web (que se repiten en todas las páginas de la web) como header o footer. Un Theme builder puede permitirnos utilizar diferente diseños de header y footer en diferentes páginas.

El Theme builder puede utilizar la misma herramienta de construcción que el page builder o una herramienta específica. Lo que si tendrá es una herramienta de asignación de templates o diseños a páginas, post, productos, etc.

 

Pues bien, la principal novedad de Divi 4.0, es que incluye un theme builder.

 

 

1.2.- Divi 4.0 y el Nuevo Divi Theme Builder

 

Hasta Divi 4.0, la plantilla, gracias al potente Divi Builder, ofrecía una gran potencia en cuanto a la construcción y personalización del contenido de cada página realizada con WordPress (cuerpo de cada página), entradas de blog e incluso fichas de producto de Woocommerce a través de los últimos módulos que se añadieron a Divi (Módulos Woocommerce) en una de las últimas actualizaciones de Divi 3. Pero, la plantilla disponía de unas opciones bastante limitadas en cuanto a opciones de diseño y personalización del header o cabecera del sitio web.

De hecho, lo que podíamos hacer, hasta la llegada de Divi 4.0 era elegir entre diferentes diseños de header, personalizarlo en cuanto a colores, tipos de letra, tamaños, posición de logo,… y utilizar dicho header o cabecera en todas las páginas del sitio. Aquí tienes un post sobre este tema: Headers o cabeceras con Divi

Aquí tienes un post específico sobre el DIVI Theme builder

 

 

1.2.1.- Construcción de header y footer con Divi 4.0

 

A partir de Divi 4.0 podremos diseñar y construir headers o cabeceras con el Divi Theme builder y asignar a cada página o post de la web el tipo de header o cabecera que queramos. Es decir, podremos tener diferentes páginas con diferentes diseños de header o cabeceras, y más importante aún, podremos personalizar a medida el diseño de las cabeceras.

Resumiendo, se extiende la flexibilidad y potencia de construcción de páginas con Divi al header o cabecera.

Y no solo eso . Lo mismo sucede con el footer del sitio web. También podremos diseñar y construir el footer de la web

Aquí tienes un ejemplo de cómo crear un footer de cero con el Divi Theme builder:

 

SUPER DESCUENTO DIVI

 

 

1.2.2.- Menú Theme Builder

 

En el menú lateral de la administración de WordPress, dentro del ítem de menú Divi, encontrarás un nuevo ítem de menú denominado: “Theme Builder”.

 

A nivel de diseño, una página realizada con Divi 4.0 está compuesta de 3 áreas:

a.- header area (área de cabecera): situado en la parte superior de la página

b.- body area (área de cuerpo o contenido): situado en la parte central de la página.

c.- Footer area (área de footer o pie) : situado en la parte inferior de la página.

A un bloque formado por estas tres áreas, es lo que denominan en Divi un template, que se podría traducir como plantilla. pero que, para no confundirnos con la terminología, voy a llamar “Diseño” o “template”.

 

areas template del divi theme builder

Áreas de un template o diseño realizado con el Divi Theme Builder

 

Con el Theme builder podremos diseñar, crear y asignar cada una de esas tres áreas. Podremos asignar un diseño o template (compuesto por las tres áreas) a diferentes páginas del sitio web. Podremos establecer un diseño o template (compuesto de las 3 áreas) de manera general para toda la web, exceptuando páginas específicas que dispongan de un diseño o template específico.

Es decir, podremos crear un diseño o template general para la web (con un área de header y área de footer común) y un diseño específico para la home o página de inicio (con un área de header y área de footer diferente).

 

Divi Theme builder creación de diseños o templates con divi

Pantalla / Interface: Divi Theme Builder

 

 

Desde el Theme builder podremos:

a.- Lanzar el constructor Divi builder: para crear un área concreta de un diseño o template.

b.- Asignar áreas a páginas: asignar un área a una página, a través de un diseño o template.

c.- Insertar área desde la librería: insertar áreas que tengamos predefinidas.

d.- Asignar áreas globales o áreas personalizadas: un área global es una que se va a repetir de manera general en muchas páginas. Un área personalizada, es un área específicamente diseñada para una página concreta.

e.- Asignar diseños o templates: podremos asignar diseños a páginas, entradas de blog y páginas de archivo con mucha flexibilidad. Podremos asignar diseños a todas las páginas, página de inicio, páginas específicas, todas la entradas, entradas de categorías específicas, posts específicos, páginas de todas las categorías, páginas de categorías específicas, etc.

 

asignar diseño o template a página con divi

Opciones de asignación de un template o diseño con el Theme Builder de Divi

SUPER DESCUENTO DIVI

 

 

1.2.3.- Herramienta de construcción del Theme builder

 

La herramienta con la que podremos personalizar el diseño de cada área es, como no podría ser de otra manera, el todo poderoso y flexible Divi builder, siguiendo el formato introducido en las últimas versiones de Divi 3, y que se denominó la nueva experiencia del Divi Builder.

 

 

1.2.4.- Templates o diseños para posts y productos Woocommerce

 

Con el Theme builder podemos crear templates o diseños para las entradas de blog de wordpress y las fichas de productos de Woocommerce de un plumazo, y sin tener que ir realizando la personalización en cada elemento.

Por ejemplo, podemos crear un diseño o template de ficha de producto con un header o cabecera, footer y cuerpo personalizados y que dicho template se aplique a todos los productos de la tienda. También, podemos crear un template o diseño que tenga un header y footer común para todos los productos y un cuerpo personalizado. La flexibilidad es máxima.

Esta flexibilidad se repite en cuanto a lo que diseño de entradas de blog se refiere.

 

 

1.3.- Resumen

 

En definitiva, el Divi Theme Builder incluido en Divi 4.0 permite utilizar el constructor Divi builder en diseños de header y footer del sitio web. Pero, además, el Divi Theme Builder, permite crear diseños o templates divididos en 3 partes o áreas con un gran poder de asignación, personalización y combinación.

Podremos crear todos los diseños o templates que queramos, ya sea para posts, productos, páginas de categorías, etc. También podremos personalizar páginas especiales, como la página 404

El Divi Theme builder desata el Divi builder a todo el sitio web. La flexibilidad y personalización, es máxima.

 

DIVI 4.0 y el Divi Theme Builder

DIVI 4.0 y el Divi Theme Builder

 

DESCUENTO DIVI + REGALO CURSO

 

 

2.- DIVI Y FUNCIONALIDADES DE LA VERSIÓN 3.0 (DIVI 3.0) – NUEVO VISUAL BUILDER

 

La principal novedad de Divi 3.0 es que incluye un maravilloso page builder tipo Front End o visual Builder

 

 

2.1.- Pero, ¿Cuál es la diferencia entre un page builder Front End y Back End?

 

En un page buider Front End vas viendo los cambios realizados en la página sin tener que hacer pre visualizaciones, ya que se trabaja directamente sobre la «parte pública» de la web, es decir, los cambios se visualizan en tiempo real. Por el contrario en un page builder tipo Back End se construye desde el panel de administración y hay que ir realizando vistas previas de la página para ver cómo va quedando. Aquí tienes un enlace con más info sobre tipos de page builders y características de los más importantes.

En Divi 3.0 puedes utilizar el page builder en su forma Front End o en la tradicional Back End. Si conoces la forma actual de trabajar con el Divi builder no te costará ningún trabajo trabajar con el modo Front End…te va a encantar.

 

Divi 3.0 novedades

Lanzamiento de Divi 3.0 en septiembre de 2016

 

Con la finalidad de mejorar la experiencia del usuario, Divi 3.0 se reinventa con lo que es el mejor page builder visual o de front Office del momento.

Los creadores del nuevo page builder de Divi han hecho hincapié en la velocidad del constructor ya que saben que la experiencia de usuario es hoy en día uno de los elementos clave en el diseño web.

Divi 3.0 conserva el page builder de back office que presentaban las anteriores versiones, pero además añade este builder visual que es una auténtica maravilla.

 

Antes de entrar en detalles quiero decirte que en breve tendrás disponible un curso online para aprender a hacer una página web y/o blog con WordPress y la plantilla DIVI 3.0. Si quieres mantenerte informado sobre este curso, visita la página del mismo y escríbeme en el formulario de contacto.

 

2.2.- Construye tu web con Divi 3.0 de manera visual

 

Divi 3.0 introduce un page builder visual o page buider de front end (front office) que permite crear y modificar los elementos de tu página web mientras estás visualizando su parte pública. Es decir, puedes ir viendo cómo quedan los cambios sin tener que hacer previsualizaciones. No necesitarás refrescar el navegador para ver los cambios, todo sucede en tiempo real.

Con el nuevo page builder de Divi cuando estés en modo edición verás la web como se muestra a todos los visitantes del sitio. La diferencia, es que los elementos serán editables y tendrás a tu disposición todas las opciones para añadir nuevos elementos, duplicarlos, guardarlos en la biblioteca, etc.

El problema de los page builders de back end donde tienes que ir haciendo previsualizaciones para encontrar un determinado contenido que quieres editar es cosa del pasado. Con el nuevo page builder de Divi 3.0 construyes sobre la parte púbica de tu página web en tiempo real.

Trabajar con un page builder front end es muchísimo más intuitivo y sencillo que con un page builder de back end. En cualquier caso Divi conserva el page builder de back end para el que prefiera el sistema antiguo.

 

 

2.2.1.- Observa cambios de manera instalantánea

 

En el antiguo constructor cuando realizábamos un cambio de tamaño en un determinado texto teníamos que ir haciendo previsualizaciones y modificaciones hasta que el texto aparecía al tamaño que queríamos.

Con el constructor visual de la plantilla Divi 3.0 vemos de manera instantánea el nuevo tamaño del texto al modificar su tamaño. Esta visualización instantánea de las modificaciones, nos va a ahorrar mucho tiempo a la hora de construir una página.

 

Modificaciones en tiempo real con Divi 3.0

Al modificar el “texto tamaño de fuente” los cambios en el tamaño del texto se visualizan en tiempo real

 

 

 

2.2.2.- Añade nuevos módulos sobre la marcha

 

 

Si quieres añadir un nuevo módulo haz clic en el botón en forma de círculo negro con el signo “+” en su interior, te aparecerá un desplegable con todos los módulos disponibles, y una barra de búsqueda. Nada más ser añadido te aparecerá la ventana emergente de configuración de dicho módulo que puedes desplazar para colocarla en el sitio que menos te moleste.

No tendrás que seleccionar los módulos de un menú lateral como sucede en otros page builders como Forge mucho más engorrosos y menos intuitivo.

Para editar un texto solo tendrás que situar el cursor donde quieras y comenzar a escribir.

 

Como añadir módulos con el nuevo editor visual de Divi

Añadiendo módulos a una fila con Divi 3.0

 

Divi dispone de módulos para cualquier tipo de contenido: sliders, imágenes, botones, recomendaciones, texto, videos, iconos, formulario de contacto, etc.

Aquí te dejo un enlace para que te familiarices con todos los tipos de módulos

 

PRUEBA EL EDITOR VISUAL

 

 

2.2.3.- Arrastra y suelta (Drag and Drop) y duplica con Divi 3.0

 

Un constructor no podría recibir dicho nombre si no contara con las funcionalidades de “Arrastra y suelta” o duplicar elementos.

Con el nuevo Page builder visual de la plantilla para WordPress Divi 3.0 podrás arrastrar módulos de un sitio a otro. Por supuesto también podrás duplicar módulos y posteriormente arrastrarlos hasta su posición definitiva.

Para mover un módulo acerca el ratón hacia la cruz que hay en la barra de color negro del módulo y cuando el cursor se transforme en una cruz, haz clic con el botón izquierdo del ratón y manteniéndolo pulsado arrastra el módulo hacia otra posición.

Para duplicar un módulo acerca el ratón hacia el icono formado por un rectángulo y una L invertida, situado en la barra negra y haz clic sobre él.

 

Cómo desplazar un módulo con Divi 3.0

Desplazar un módulo con Divi

 

 

2.2.4.- Alturas y anchuras modificables visualmente

 

Con el nuevo constructor visual podrás modificar el “padding” sobre la marcha. En divi al padding se le denomina “relleno”, que no es más que el margen interior, de secciones y filas.

Acerca el cursor a un lateral de una sección o fila, haz clic con el botón izquierdo del ratón y arrastra el margen interior hasta la posición que quieras.

 

Modificar el padding con Divi 3.0

Modificar el margen interior, relleno o padding sobre la marcha con Divi 3.0

 

 

2.2.5.- Visualización Responsive en tiempo real

 

 

Con el editor visual de la plantilla WordPress Divi 3.0 podrás visualizar la web en visualización para escritorio, tablet o móvil y editar al mismo tiempo en cualquiera de las tres visualizaciones. De esta manera sabrás de manera instantánea como queda el elemento que estás construyendo en escritorio, tablet o móvil y trabajar sobre ellos de manera directa e instantánea.

 

Page builder en modo visión móvil con Divi 3.0

Editor visual en modo móvil

 

 

Aquí tienes un vídeo donde puedes ver como funciona el editor visual de Divi 3.0:

 

 

 

2.2.6.- Deshacer, rehacer e histórico de modificaciones

 

No tengas miedo a equivocarte, el editor visual de Divi 3.0 no solo permite rehacer y deshacer sino que también te permite visualizar un histórico de modificaciones para volver a un estado anterior de una manera muy sencilla.

 

Histórico de modificaciones con el editor de la plantilla Divi 3.0

Histórico de modificaciones + rehacer + deshacer

 

Para ver el panel “historial de ediciones”, primero haz clic en el botón circular que aparece en la parte inferior con tres puntos en su interior “para expandir los ajustes”. A continuación haz clic en el círculo con el icono del reloj.

 

 

2.3- La interface del constructor de Divi 3.0, limpia y elegante

 

En la creación de la interface visual del constructor de Divi 3.0 se hizo hincapié en la limpieza que debía tener la pantalla. Al editar una página verás tal cual esta se muestra a los visitantes de la web, no verás una maraña de líneas estructurales de soporte al constructor. La elegancia, el diseño y la limpieza son características esenciales de este page builder visual.

 

 

2.3.1.- Interface Personalizable

 

Otros page builder disponen de interfaces rígidas que te pueden gustar más o menos. El page builder visual de Divi 3.0 te permite personalizar la interface a tu medida.

Arrastra las ventanas emergentes hasta un lateral para convertirlas en un menú fijo, si prefieres esta forma de trabajo. También podrás redimensionar dicho menú.

Mueve las ventanas emergentes por la interface hasta colocarlas en la posición más adecuada para poder trabajar. Redimensiona la ventana hasta el tamaño más adecuado

 

personaliza la interface de divi 3.0

Personaliza si las configuraciones las quieres como una ventana emergente o como un menú fijo en Divi 3.0

 

 

2.4.- Edición de texto en línea sin abrir configuración del módulo

Un elemento destacable del nuevo editor visual es la capacidad que tenemos de editar y formatear contenidos de texto sin tener que abrir la configuración del módulo. Simplemente tendrás que situar el cursor y comenzar a editar y formatear texto.

 

 

2.4.1.- El editor en línea de texto de Divi

 

Los creadores de Divi han añadido un editor en línea para poder editar texto sin tener que abrir la configuración del módulo.

Con el editor en línea podrás formatear con negrita, cursiva, subrayado, formatear con H1, H2, H3, H4, H5 o H6 el texto, crear links, alineaciones, crear listas. Es decir, todo lo que puedes hacer con el editor estándar de WordPress. Además puede aplicar colores, elegir tipo y redimensionar fuentes.

 

Nuevo editor en línea en la plantilla divi 3.0

Nuevo Editro en línea en Divi 3.0

 

 

2.5.- Un nuevo constructor para una nueva era

 

Matt Mullenweg, creador de WordPress ya apostó por la importancia de Java Script en la construcción de interfaces. Ahora el equipo de Elegant Themes sigue su estela.

Este constructor es una nueva prueba de la apuesta del equipo de Divi por la evolución y mejora constante de la plantilla Divi y de su page builder.

El constructor visual de Divi 3.0 es una aplicación completamente nueva construida desde cero, utilizando React y Flux, y esta nueva tecnología ha permitido al equipo realizar cosas muy sorprendentes.

El trabajo se realiza en el navegador y no en el hosting o servidor por lo que los cambios son instantáneos sin necesidad de refrescar las páginas. Este hace que el trabajo con el editor visual de Divi 3.0 sea muy rápido. De hecho es probablemente el page builder más rápido del mercado.

La compatibilidad de Divi 3.0 con versiones anteriores es total. Por eso no te debes preocupar al actualizar desde la versión anterior de Divi. Todo funciona igual que antes, solo que ahora tienes la posibilidad de usar esta potente herramienta de diseño web visual.

Podrás disfrutar de las novedades del constructor incluido en Divi 3.0 también con la plantilla EXTRA y con el plugin del Divi builder (muy pronto)

Aquí tienes una demo o test para que veas lo potente, limpio y ligero que es este editor visual. Puedes probar como funciona…te va a encantar

 

PRUEBA EL EDITOR VISUAL

 

 

3.- DIVI Y LAS CARACTERÍSTICAS DE LA VERSIÓN 2.7 (DIVI 2.7)

 

La plantilla Divi para WordPress en su versión 2.7 ha incorporado una serie de interesantes funcionalidades:

 

I.- Divi Leads Split testing and conversion optimization system (Sistema de test y optimización de conversiones Divi Leads ): Divi 2.7 permitirá realizar test A/B mostrando a los usuarios diferentes versiones de una página y obtener resultados estadísticos de las conversiones. Es decir, la versión 2.7 de Divi permitirá analizar diferentes versiones de una página y averiguar cuál obtiene mejores resultados.

II.- Portability System (Sistema de portabilidad): ampliación de las opciones para importar y exportar diseños y opciones de la plantilla Divi para poder ser utilizadas en otra instalación de WordPress.

III.- Divi builder Page Options (Opciones de página del Divi Builder): Nuevas opciones de página en el Divi builder

IV.- New Help System (Sistema de ayuda): nuevo sistema de ayuda ante posibles incidencias con la plantilla Divi.

 

 

3.1.- Divi Leads split testing (Sistema de tests Divi Leads)

 

Sistema muy efectivo para crear landing pages optimizadas donde aumentan las conversiones gracias a pruebas sencillas test A/B y seguimiento de las conversiones.

Las herramientas Divi Leads se incluyen en el page builder de Divi, el conocido Divi builder.

Con Divi 2.7 el Divi builder se ha convertido en una potente herramienta de construcción de Landing Pages. En combinación con Divi Leads podemos realizar varias versiones de una Landing y medir los resultados de conversiones.

 

En la siguiente imagen puedes ver dos versiones del módulo Fullwidth Header. Uno es la opción A y el otro la B. Uno ha obtenido un 56,33% de conversiones y el otro un 33,87%

 

Con DIVI 2.7 Divi leads split testing (sistema ed test divi leads)

 

El funcionamiento de Divi Leads se puede resumir en tres pasos:

  • Crear varias versiones de una página
  • Establecer un objetivo
  • Analizar con los datos obtenidos a través de Divi Leads cuál de las versiones ha obtenido más conversiones.

 

En la siguiente imagen puedes ver dos variaciones de una página. El texto de llamada a la acción o Call to Action es diferente, así como el color del botón. Una ha obtenido un 56,33% de conversiones y la otra un 33,87 %.

 

Con Divi 2.7 podemos Crear dos variaciones de una página y ver cual obtiene más conversiones

 

Con Divi Leads puedes realizar test sobre páginas completas, módulos individuales o secciones. Cualquier cosa puede ser analizada.

Puedes crear tantas versiones como quieras para realizar el análisis

 

Versiones de un Call to Action y averiguar cual funciona mejor

Con Divi 2.7 se pueden realizar muchas versiones de un CTA y ver cual funciona mejor

 

Cualquier módulo puede ser el objetivo de la conversión. ¿Quieres que el objetivo sea el botón del CTA (Call To Action)? Pues marca el módulo CTA como objetivo. ¿Quieres que el objetivo sea el formulario de contacto? Pues marca el formulario como objetivo.

Con Divi 2.7 y Divi Leads podremos también establecer objetivos fuera de la página a través de un código de seguimiento. Esto permite analizar al mismo tiempo la página de inicio del embudo de conversión y la página final (añadiendo dicho código).

 

Codigo de seguimiento test Divi Leads

Código de seguimiento para establecer objetivos fuera de la página

 

Divi Leads es fácil de usar. Simplemente deberás hacer clic con el botón derecho del ratón sobre un elemento y seleccionar “Split test”. Después deberás elegir el objetivo y a continuación personalizar las variaciones. Posteriormente podremos analizar los resultados a través del panel de estadísticas.

 

 

3.2.- Divi 2.7 incorpora una mejora de la portabilidad

 

Con el sistema de portabilidad que incorpora esta versión de Divi podremos importar y exportar diseños de páginas, opciones de configuración, opciones de la plantilla y roles.

 

Se ha mejorado el sistema de importación y exportación de la biblioteca del Divi Builder, por lo que ahora es más fácil que nunca utilizar elementos de la biblioteca de Divi de una web en otra. La interfaz es sencilla e intuitiva.

 

Mejora de la portabilidad en Divi 2.7

Divi 2.7 ofrece unas opciones de portabilidad muy mejoradas

 

Una de las principales innovaciones en el sistema de portabilidad es que también se exportan las imágenes. Al importar los diseños el sistema añade las imágenes a la biblioteca de medios y modifica las urls para que cuadren con el nuevo sitio web.

Ahora también es posible exportar las opciones de configuración de la plantilla (theme options y Theme customizer settings) de un sitio web a otro. De esta manera podemos crear un sitio web estándar con Divi que nos sirva de base para el desarrollo de sitios web para diferentes clientes.

 

Con Divi 2.7 podemos importar y exportar opciones de configuración

Importar y exportar opciones de configuración de la plantilla

 

 

 Exportar theme options y Theme customizer settings

Con Divi 2.7 podemos Exportar theme options y Theme customizer settings

 

Los roles de Divi (Divi Roles) también pueden ser importados y exportados.

 

 

3.3.- Packs de la biblioteca Gratis

 

Para demostrarnos lo potente que es el sistema de portabilidad, han creado para Divi 2.7 algunos diseños que podemos importar y utilizar gratis (también valen para la plantilla Extra).

Puedes descargarte el pack gratuito que está formado por 3 diseños diferentes.

 

Diseño gratuito para Divi 2.7

Diseño de ejemplo

Descargar diseño gratis para divi 2.7

 

Descargar PACK

 

Para usar alguno de los diseños debes:

  • Actualizar Divi, Extra o el plugin del Divi Builder a la última versión.
  • Después debes descargar el pack y descomprimirlo.
  • Dentro de la biblioteca Divi haz clic en el botón “Import/Export” situado en la parte superior de la página y selecciona el archivo JSON que acabas de descargar.
  • Una vez cargados los diseños, éstos aparecerán cuando hagas clic en “Load from library” (Cargar desde la biblioteca) en el Divi Builder.

 

 

3.4.- Página de configuración del Divi Builder

 

Con Divi 2.7 el Divi Builder cuenta con una nueva serie de opciones de configuración de página. Estas opciones sirven para ajustar el diseño y establecer los valores por defecto para toda la página, y por tanto no tener que ir estableciendo dichas opciones en cada uno de los módulos que conforman la estructura y diseño de la página.

Al usar el Divi builder verás que hay un nuevo icono situado en la parte superior derecha de la interface del builder. Igual que existen opciones de configuración para módulos, secciones o filas, ahora también las hay para toda la página construida con el Divi builder.

 

Divi 2.7 incorpora opciones de configuración global para toda una página

Opciones de configuración global para una página realizada con el Divi bhilder

 

Aquí aparecerán opciones de configuración para toda la página como los márgenes y colores por defecto. También se podrá usar para activar o desactivar opciones específicas de página como el nuevo sistema Divi Leads.

 

Una nueva funcionalidad interesante es la paleta de colores personalizados (custom color Picker Palette). Esta paleta se corresponde con los colores favoritos o habituales que aparecen en el selector. Puedes elegir un esquema de diseño de colores que aparecerá cada vez que aparezca el selector de color en el Divi Builder.

 

Opciones de configuración del selector de colores para toda la página

 

La anterior opción de colores favoritos era para una página completa. Pero tenemos otra opción más general, es decir una opción que sirve para todo el sitio web.

Esta opción está en el epanel o panel de administración de Divi. Los colores que aquí configures aparecerán en cualquier página en la que aparezca el selector de colores (siempre que no entre en contradicción con la configuración anterior, la cual tiene preferencia en la página en la cual está configurado)

 

paleta colores por defecto para toda la web

Con Divi 2.7 podemos configurar la paleta colores por defecto para toda la web

 

Divi 2.7 también incluye una caja de texto CSS para página en la cual se pueden añadir código CSS específico para la página. Es más interesante añadir el código CSS aquí que en un tema hijo o child theme ya que el código del child theme se cargará siempre y no siempre será necesario. Por el contrario el código CSS que se incluya en la caja de la página solo se cargará cuando se cargue dicha página.

Esto no significa que ya no sean útiles los child themes o temas hijo para Divi, ya que existen otros muchos archivos que interesa personalizar con los temas hijos a parte de los archivos CSS.

 

caja de texto css para página con el divi builder de divi 2.7

Divi 2.7 incorpora una caja de texto CSS para la página completa

 

 

3.5.- Sistema de ayuda dinámico

 

Algunos errores que se producen en WordPress como incompatibilidades de plugins, errores de memoria o problemas de caché son un gran incordio. Ahora con Divi 2.7, el Divi Builder ha introducido unas funcionalidades que te ayudarán a identificar el problema, arreglarlo y evitar que pierdas mucho tiempo.

Ahora cuando no se puede cargar el Divi builder obtendremos causas y posibles soluciones. El Divi Builder detectará problemas comunes nos aportará posibles soluciones.

El Divi builder buscará errores de memoria, errores de configuración del archivo wp-config de WordPress, archivos de caché problemáticos, temas o versiones wordpress desactualizados, incompatibilidades de plugins y más.

 

Sistema de ayuda que incorpora la versión 2.7 de la plantilla divi

Sistema de ayuda de Divi 2.7

 

 

3.6.- Actualización de la plantilla Extra y el Divi Builder

 

Con la actualización de la plantilla Divi también se ha actualizado la plantilla Extra y el Divi builder. Ya que ambas plantillas están muy relacionadas entre sí y con el Divi Builder.

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com