!! YA ESTÁ AQUÍ DIVI 3.0 ¡¡, La plantilla DIVI es en mi opinión la mejor plantilla para WordPress. Yo la uso en mis dos blogs y en el 99% de los proyectos que realizo con WordPress. Además, el editor visual de la versión 3.0 de DIVI es una auténtica maravilla

En este post tengo la intención de ir añadiendo las principales características que se van incorporando a esta fabulosa plantilla para WordPress con cada actualización importante.

 

DESCUENTO DIVI

 

Ahora 20% de descuento

El plan YEARLY ACCESS de Elegant Themes incluye acceso a todas las plantillas y plugins:

  • La Plantilla DIVI
  • 86 plantillas para WordPress
  • El divi builder
  • 5 plugins para WordPress

Si quieres adquirir el plan yearly Access de Elegant Themes con un 20% de descuento, Hazlo a través de este enlace. Con el descuento de 89$ + IVA pasará costarte 70$ + IVA (soy afiliado, gracias).

 

Recuerda que tendrás licencia para utilizar las plantillas y plugins en todas las webs que quieras. No como ocurre en Theme Forest

Los planes Personal y Life time Access:

  • El plan personal permite acceso a todas las plantillas de Elegant Themes pero no a los plugins. El precio de este plan es de 69$
  • El plan Life time access permite el acceso a todas las plantillas y plugins de Elegant Themes para toda la vida. El precio de este plan es de 249$.Ahora a través del siguiente enlace puedes contratar el plan Life time Access con un 10% de descuento. Es decir se te quedaría en 224$ + IVA.

 

A excepción del plan Life time Access que da acceso de por vida a todas las plantillas y plugins presentes y futuros de Elegant Themes. Con el resto de planes será necesario renovar anualmente el plan para poder disfrutar de actualizaciones y soporte pasado el primer año. En caso de no renovar el plan podremos seguir usando las plantillas que tengamos descargadas o instaladas en cualquier web pero no podremos actualizarlas.

 

Aquí te dejo enlaces a más información sobre DIVI. También puedes visitar la categoría DIVI del blog donde encontrarás entradas de blog sobre Divi:

 

curso online wordpress con la plantilla Divi

CURSO ONLINE WORDPRESS + DIVI 3.0

Curso WordPress online + Divi / Ver más

 

 

INDICE POST SOBRE DIVI

 

 

ÍNDICE POST

 

DIVI 3.0 YA ESTÁ AQUÍ !!!

 

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

 

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.

 

CURSO WORDPRESS + DIVI 3.0

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

 

 

1.1.- OBSERVA CAMBIOS DE MANERA INSTANTANEA

 

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

 

 

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

 

 

1.3.- ARRASTRA Y SUELTA (DRAG AND DROP) Y DUPLICA

 

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

 

 

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

 

 

1.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:

 

 

 

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

 

 

3.- EDICIÓN DE TEXTO EN LÍNEA SIN TENER QUE 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.

 

 

3.1.- EL EDITOR EN LÍNEA DE TEXTO

 

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

 

 

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

 

 

 

DIVI 2.7 NOVEDADES DE LA VERSIÓN

 

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.

 

 

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.

 

 

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.- PACKS DE LA BIBLIOTECA GRATIS (FREE LIBRARY PACKS)

 

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.

 

 

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

 

 

5.- SISTEMA DE AYUDA DINÁMICO (DYNAMIC SYSTEM HELP)

 

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

 

 

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.

 

 

 

DIVI 2.6 NOVEDADES DE LA VERSIÓN DE LA PLANTILLA WORDPRESS

 

Ya está aquí DIVI 2.6. Empezando 2016, ya tenemos una nueva versión de la mejor plantilla para WordPress.

Novedades que trae Divi 2.6:

  • Page builder: novedades en el divi builder que incluyen nuevos módulos, mejoras de módulos existentes y nuevas opciones de control para dispositivos móviles.
  • Opciones del tema: entre las opciones del tema se incluyen dos nuevos tipos de header o encabezamientos para la web. También se ha rediseñado el panel de opciones del tema. Si, se ha rediseñado el epanel para adaptarlo al nuevo diseño de Divi.

 

 

1.- Controles de diseño responsive por dispositivo en el page builder de DIVI 2.6

 

Ahora podemos controlar el tamaño de fuentes, espacio y visibilidad para los diferentes dispositivos.

En algunas ocasiones es difícil conseguir que un módulo se vea correctamente en los diferentes dispositivos. A veces hemos querido modificar el tamaño de una fuente de texto, pero sólo para móviles o hacer que no se visualice un módulo cuando se vea en una Tablet. A partir de ahora tenemos un importante control sobre este tipo de cosas.

Hoy en día cada vez se hace más necesario conseguir páginas más ligeras en dispositivos móviles. Esto lo vamos a poder a hacer a partir de ahora no mostrando determinados módulos en móviles o tablets.

 

1.1.- Tamaño de fuentes y espaciado específico para cada tipo de dispositivo

 

Cuando modifiques el tamaño de una fuente de texto verás que aparece en la parte derecha un icono de un móvil. Si haces clic sobre el podrás definir el tamaño que estás configurando para escritorio, Tablet y móvil.

 

divi 2.6 nuevas opciones resposive

Opciones de DIVI 2.6 Para visualizaciones en dispositivos móviles

 

1.2.- No mostrar módulos en determinados dispositivos.

 

A partir de ahora tendremos la opción en todos los módulos, secciones y filas de ser mostrados según dispositivo: escritorio, tablet y móvil.

 

¿Aun no has elegido hosting? elige el mejor hosting para WordPress: webempresa vs 1&1, otros

 

En la parte inferior de la pestaña de Ajustes generales de módulos, secciones y filas nos aparecerá la etiqueta: “DESACTIVAR EL” con los check box Teléfono, Tableta y Escritorio. Esta opción sirve para no mostrar el módulo, sección o fila para cualquiera de los anteriores dispositivos.

 

Divi 2.6, ocultar módulos según dispositivo

Divi 2.6, ocultar módulos según dispositivo

 

 

2.- Nuevos estilos de Header o cabeceras en DIVI 2.6

 

Esta nueva versión de esta fabulosa plantilla para WordPress incluye dos nuevos diseños de header o encabezamientos web. Uno denominado “Slide-in Header” y traducido como “Deslizar” y otro denominado como “Full Screen Header” y traducido como “Pantalla completa”.

Estas dos opciones de header las tienes en: “panel de administración >DIVI > Personalizador de temas > Cabecera y navegación > Formato de cabecera” y luego despliega el selector “ESTILO DE CABECERA”. Los nuevos encabezamientos los tienes al final: deslizar y pantalla completa.

Cuando elegimos alguno de los dos tipos de encabezamientos desparecerá la opción de configuración del menú secundario y aparecerá una nueva opción para configurar cualquiera de los dos tipos de encabezamientos. La opción de configuración se denomina: “Deslizar y ajustes de título en pantalla completa” y está en: “Panel de administración > Divi > personalizador de temas > Cabecera y navegación > Deslizar y ajustes título en Pantalla completa”

 

2.1.- Encabezamiento deslizante o Slide-in Header

 

Si elegimos este encabezamiento aparecerá un botón en vez del menú superior. Si hacemos clic sobre el botón aparecerá deslizándose por la derecha un sidebar con los diferentes ítems del menú y la barra de búsqueda si así lo tenemos configurado.

 

nuevo header slider in

Header slide-in divi 2.6

 

Aprende a crea una página web y/o blog con WordPress desde cero. Curso WordPress online y Curso WordPress particular Murcia

 

2.2.- Encabezamiento de tamaño completo o Full Screen Header

 

Si elegimos este tipo de encabezado aparecerá también un botón en vez del menú superior. Ahora si hacemos clic sobre el botón aparecerá el menú a toda interface. Es decir el menú ocupará toda la pantalla del dispositivo en el cual se esté visualizando.

 

 

3.- DIVI 2.6 Aporta 5 nuevos módulos para el page builder

 

Vamos a ver ahora los 5 nuevos módulos que se han añadido al divi builder en esta nueva versión de la plantilla WordPress Divi.

 

3.1.- Button Module (Módulo Botón)

 

Este módulo sirve para añadir un botón con un diseño personalizable. Hasta la fecha era necesario utilizar el módulo de “Llamada a la acción” y personalizar el diseño del botón. Ahora ya disponemos de un módulo específico para ello.

Las posibilidades de configuración del módulo son prácticamente las mismas que teníamos con la personalización del botón en el módulo de llamada a la acción.

 

3.2.- Post slider module (Módulo de slider para posts)

 

Este módulo incluye un slider en el cual podemos insertar una imagen o poner un color de fondo. Pero en este slider lo que irá cambiando no son diferentes imágenes sino los títulos de los diferentes post del blog.

En el slider se alternarán título, extracto del post y botón de leer más. En el módulo podemos personalizar el diseño así como las categorías cuyos post queremos que se alternen.

 

3.3.- Comments module (módulo de comentarios)

 

Aunque lo cierto es que no suelo usar el divi builder para el tema de las entradas de blog, y suelo usarlo únicamente para las páginas de la web, divi da una vuelta más de tuerca e introduce un módulo de comentarios en el page builder.

Este módulo sirve para tener un mayor control sobre la estructura de un post ya que podremos colocar los comentarios en otra posición del post en vez de la habitual en WordPress.

 

3.4.- Search module (Módulo de barra de búsqueda)

 

Por fin un módulo para añadir una barra de búsqueda. Hasta la fecha solo era posible añadir una barra de búsqueda a través de un widget. Por lo que solo era posible añadir la barra de búsqueda en el sidebar o footer.

Ahora disponemos de un módulo de barra de búsqueda cuyo diseño y funcionalidades podemos personalizar.

Por ejemplo podemos configurar la barra de búsqueda para que incluya páginas o no en sus resultados. También podemos configurarla para determinadas categorías del blog no puedan obtener resultados.

 

search module divi 2.6

Módulo de búsqueda

 

 

3.5 Post navigation module (módulo de paginación de entradas de blog)

 

Este módulo ha sido traducido como: “Navegación por los mensajes” y se refiere a los botones de paginación al final de cada entrada de blog para poder ver anteriores o siguientes posts. Podremos emplazar el módulo en la posición que queramos.

 

 

4.- Mejoras en los módulos existentes del page builder con DIVI 2.6

 

No solo se han añadido nuevos módulos en esta versión de DIVI sino que además se han incluido mejoras en algunos de los módulos más conocidos del page builder.

 

4.1.- Mejoras en el módulo de formulario de contacto

 

Por fin tenemos un formulario de contacto con campos personalizables. Ya no se hace tan indispensable la utilización de formularios alternativos como Contact Form 7

Las mejoras implementadas en el módulo son:

  • Campos personalizables
  • El formulario incluye un nuevo sistema para mejorar el filtrado de spam. Se trata del Honey-pot Spam Detection.
  • Mensaje personalizado a mostrar al usuario cuando envíe el formulario con éxito.
  • Podemos crear un texto personalizado a recibir por email cuando el formulario sea completando utilizando las variables %%identificador del campo%%
  • Redirect URL: Sirve para redirigir al usuario a una url específica cunado complete la acción de envío del formulario.

 

4.2.- Slider, capa sobre el fondo y tras el texto (tamaño completo del slider)

 

Los módulos tipo slider incluyen la posibilidad de incluir una capa entre el fondo del slider y el texto. Es decir la capa aparecerá tras el texto y delante del fondo del slider.

Debemos elegir un color y transparencia para esta capa. Este tipo de capa puede ser útil para reducir el contraste y mejorar la legibilidad del texto.

Esta opción la tenemos en los ajustes generales de los módulos tipo slider. Veremos una opción que dice: “Usar superposición de fondo”. Al colocar el selector en “SI” aparecerá el elemento donde debemos seleccionar el color y transparencia de la capa.

 

4.3.- Slider, capa tras el texto

 

Esta es una opción muy similar a la anterior, con la diferencia de que la capa situada tras el texto no ocupará toda la superficie del slider sino que solo ocupará la zona entorno al texto.

 

capa tras texto en el modulo slider divi

Capa tras texto en el modulo slider divi 2.6

 

Esta opción está debajo de la anterior y se denomina: “Usar superposición de texto”.

 

4.4.- Imágenes con capa semitransparente e icono al pasar el ratón

 

Otra novedad que incorpora DIVI 2.6 es en el módulo de imágenes y los módulos de blog.

En el caso de querer que la imagen se abra o amplíe en una capa u overlay al hace clic sobre ella, ahora podremos crear el efecto de la aparición de una capa semitransparente y un icono al pasar el ratón sobre la misma.

Para ello tendremos que seleccionar: “Abrir en una capa emergente” en el módulo de imagen y a continuación aparecerá la opción de “Superposición de imagen”, que es la opción que estamos comentando.

 

4.5.- CSS Personalizado

 

Al añadir css a cualquiera de los módulos ahora aparecerá información del nombre de las clases afectadas con la finalidad de facilitar este tipo de trabajos.

 

 

 

DIVI 2.4 NOVEDADES DE LA VERSIÓN

 

El 17 junio de 2015 se produjo la actualización más importante en la historia de la plantilla Divi. Para los que no hayáis oído hablar de ella, Divi es una de las mejores plantillas para WordPress. En esta nueva versión han dado otra vuelta de tuerca ampliando aún más sus ya extraordinarias funcionalidades.

Para ir abriendo boca Aquí puedes ver cuatro demos que han realizado desde Elegant Themes para ver las capacidades de Divi 2.4

DEMO DIVI 1 | DEMO DIVI 2 | DEMO DIVI 3 | DEMO DIVI 4

Informate aquí sobre las características y precio de la Plantilla Divi. Si quieres aprender como funciona el page builder de divi sigue este enlace

1.- Divi 2.4 Estructura Flexible tipo Rejilla y reestructuración de módulos:

La columna vertebral de Divi 2.4 es su estructura fluida tipo rejilla y la reestructuración de módulos haciéndolos más personalizables y flexibles que nunca.

 

divi 2.4 sidebar anchura flexible

Divi 2.4 anchura sitio web y sidebar flexible

 

1.1- Ancho de página personalizable en Divi 2.4

Ahora puedes personalizar el ancho del contenido de la página web. Esta opción será muy relevante conforme se vayan implantando los dispositivos “super Hight resolution”.

 

1.2.- Ancho del sidebar personalizable en Divi 2.4

Si has trabajado con Divi habrás observado que la barra lateral “sidebar” que viene por defecto es algo más estrecha de lo que está ahora de moda en blogs. En la anterior versión había que introducir con código css para modificar dicha características. En esta versión, Divi nos permite personalizar este ancho desde el panel de administración, sin tener que introducir CSS.

 

 

1.3.- Personalizar el tamaño del logo y una nueva opción de logo centrado “inline”

Otro inconveniente que tenía la anterior versión, era que el logo tenía un tope máximo de altura no demasiado útil. En general era necesario introducir una pequeña modificación en el CSS para darle algo más de altura. En la versión 2.4 de Divi esta tarea ya es posible hacerla sin problemas desde el panel de administración.

 

Divi 2.4, con logo centrado inline

Nueva opción Divi con logo centrado inline

 

La versión Divi 2.4 incorpora una nueva opción de disposición del logo. Si elegimos esta opción el logo quedará centrado, pero en línea con los elementos del menú principal (no encima). Divi calculará cuantos ítems de menú existen y los repartirá a ambos lados del logo.

 

Algunos de los enlaces en este post son enlaces de afiliado. Es decir, son recomendaciones que hago y por las que recibiré una comisión en caso de compra

 

1.4.- Personalización de fuentes de textos en Divi 2.4

En la nueva versión de Divi tenemos un alto grado de personalización sobre las fuentes del menú de navegación principal, menú de navegación secundaria, texto normal del cuerpo, texto de cabeceras, footer, blog y dispositivos móviles (tablets y smartphones).

Dependiendo de la zona a personalizar podremos configurar tipo de fuente, color, tamaño de la fuente, espacio entre caracteres, estilos a aplicar sobre la fuente (cursiva, negrita, etc.), separación entre filas, etc.

 

Divi WordPress Theme

 

1.5.- Barra de navegación fija personalizable y semitransparente en Divi

Teniendo activada la navegación fija, podemos configurar el efecto que se produce cuando el usuario comienza a hacer scroll sobre la página que está visualizando. Las opciones de personalización la encontrarás en Apariencia > Personalizar > Cabecera Navegacion > “Ajustes de navegación fija”.

También tenemos opción de mantener oculta la barra de navegación hasta que el usuario comienza a hacer scroll sobre la página.

Una característica en mi opinión muy interesante que incorpora Divi 2.4. Es la posibilidad de dar semi transparencias a las barras de menú, algo que está bastante de moda en el diseño web hoy en día y que antes nos veíamos obligados a realizar modificando los CSS.

 

Divi incorpora un menú semitransparente

Divi 2.4 incorpora la posibilidad de crear una barra de menú semi transparente

 

1.6.- Espaciado entre módulos, secciones y filas interiores de sección.

Ahora, en Divi 2.4 tenemos varias opciones de espaciado entre módulos situados de manera contigua. Pudiendo acercar o alejar unos de otros.

 

Separación entre módulos en Divi 2.4

Divi 2.4: Separación entre columnas de una sección

 

Ahora podemos variar el espaciado vertical entre varias secciones, así como de las diferentes filas situadas en el interior de una sección.

 

Distribución de widgets footer en Divi

Distribución de Widgets en el footer con Divi 2.4

1.7.- Footer mas personalizable en Divi 2.4

En la nueva versión de Divi tenemos para elegir entre 8 posibles distribuciones de espacio distintas en el footer. Ahora también tenemos control sobre la personalización de las características de las fuentes de los widgets del Footer, tanto en sus elementos de cabecera como de cuerpo (tamaño texto cabecera, estilo cabecera, tamaño texto cuerpo, altura de línea de cuerpo, estilo de fuente del cuerpo, colores, etc.)

 

1.8.- Botones 100% personalizables en Divi 2.4

Por fin podemos personalizar los botones en esta versión de Divi. Se pueden establecer una serie de estilos globales y luego una serie de estilos particulares para cada botón en concreto (personalización por módulo).

Se puede personalizar la fuente, tamaño, color, anchura y color del borde, radio del borde, espacio entre caracteres, añadir iconos al botón, color del icono y efectos hover sobre el botón.

Aquí tines otra DEMO de DIVI 2.4

 

Aquí puede ver una comparativa entre el paquete de plantillas de Elegant Themes entre las que se incluye a Divi y el paquete de plantillas de Woothemes

 

2.- El personalizador de módulos de Divi

La nueva versión de Divi nos ofrece la herramienta denominada el personalizador de módulos. Con esta herramienta podremos personalizar determinadas características globales de cada uno de los diferentes tipos de módulos.

La herramienta conocida como Personalizador de módulos cuenta con 200 ajustes de personalización como la altura por defecto de los sliders, etc.

Esta herramienta la puedes encontrar en el panel de administración de WordPress: Divi > Personalizador de módulos.

 

3.- Page builder en entradas de blog con Divi 2.4

En anteriores versiones de Divi no era posible utilizar el poderoso page builder que ofrece esta maravillosa plantilla en entradas de blog.

Por fin podemos utilizar el page builder (constructor de páginas) en cualquier entrada de blog o post. Pudiendo crear de esta manera entradas de blog con todo el potencial de la plantilla Divi.

Además de utilizar el page builder en entradas de blog, también podedemos elegir entre un sidebar lateral izquierda o derecha o ancho completo. Así como mostrar la imagen destacada o el título.

Las posibilidades para escribir una entrada de blog ahora son mucho mayores con esta nueva versión de Divi 2.4

Aquí tines este espectacular ejemplo de un post realizado con el page builder: DEMO

 

4.- Personalización de filas en Divi 2.4

El page builder de Divi está formado por secciones, filas y módulos. En la anterior versión las filas no tenían opciones de ajuste. En esta nueva versión de la plantilla Divi podemos personalizar diferentes características de las filas.

 

4.1.- Cambiar la estructura de columnas de la fila

Las filas en divi pueden tener diferentes disposiciones de columnas: 1, 1/2+1/2, 1/3+1/3+3/3, etc.

En anteriores versiones de Divi si nos equivocábamos al crear la disposición de columnas dentro de una fila, teníamos que crear una nueva fila y mover los módulos hacia ella.

Ahora tenemos una opción en cada una de las filas para modificar su disposición de columnas. Los módulos se adaptarán a la nueva disposición.

 

4.2.- Espaciado entre columnas de cada fila

Además de poder configurar unas opciones globales para la separación de columnas dentro de una fila desde el personalizador de temas, también podemos establecer una separación específica entre columnas de una fila en concreto. Si ponemos separación cero los módulos quedarán pegados unos con otros (efecto últimamente utilizado en galerías de imágenes).

 

4.3.- Filas de ancho completo

Otra importante novedad de Divi 2.4 es la posibilidad de crear filas de ancho completo. La combinación de esta característica con la de gestión de márgenes entre columnas de una fila da al usuario la capacidad de crear presentaciones de gran interés.

 

Divi 2.4. control separación entre modulos

Ajustes de espacio entre módulos y ancho completo de fila en Divi 2.4

 

4.4.- Columnas con colores de fondo individuales

En anteriores versiones de Divi las imágenes, vídeos o colores de fondo (background) se debían aplicar a nivel de sección.

En esta versión de Divi, no solo se pueden incluir imágenes, vídeos o colores de fondo a nivel de filas sino que también se puede poner una imagen, vídeo o color de fondo a nivel de cada columna de una misma fila. Es decir, a nivel de cada módulo de una misma fila.

 

4.5.- Altura de columnas corregido

Como hemos comentado en el anterior punto, con esta versión de Divi podemos dar diferentes colores de fondo a cada columna de una misma fila. Pero tener en cada columna una altura de texto diferente puede provocar un efecto algo antiestético. Los creadores de Divi han tenido en cuenta esta circunstancia y han incluido una opción por la cual si queremos podemos igualar (en cuanto a color de fondo) todas las alturas en una misma fila.

 

Divi 2.4. altura de columna corregida

Altura de columna compensada en Divi 2.4

 

5.- Ajustes de diseño de módulos en Divi 2.4

Divi ha aumentado de una manera muy considerable las opciones de personalización de cada módulo del Page Builder.

 

5.1.- Nuevas pestañas de configuración en los módulos

La configuración de los módulos de Divi ahora se realiza a través de 3 pestañas:

a.- Ajustes Generales (General Settings): aquí podremos realizar la personalización del módulo a nivel funcional.

b.- Ajustes Avanzados de Diseño (Advanced Desing Settings): Desde esta pestaña realizaremos la personalización del módulo a nivel de diseño.

c.- CSS Personalizado (Custom CSS): aquí podremos introducir CSS personalizado.

 

Configuracion modulos divi 2.4

Nuevas opciones de configuración en los módulos de DIVI 2.4

 

5.2.- Opciones de Tipografía en los módulos de Divi

Ahora en Divi es posible la total personalización de las fuentes de texto que aparecen en cada módulo. Desde la pestaña Ajustes Avanzados de Diseño de cada módulo podremos personalizar aspectos del texto como: fuente, tamaño del texto, color del texto, grosor del texto, espacio entre caracteres, espaciado entre líneas, itálica, subrayado, etc.

 

5.3.- Márgenes de elementos

Para tener un control total sobre las separaciones entre los diferentes módulos que vayamos incluyendo en una página a través del Page Builder. Divi ha incluido opciones de control de lo que en CSS se conoce como Margin (márgenes exteriores) y Padding (Márgenes interiores).

 

Módulos DIVI con margin personalizado

Módulos DIVI con margin personalizado

 

Estas opciones se han incluido en las secciones a través de un margen superior e inferior. En las filas con márgenes y padding superior, derecho, izquierdo e inferior de cada uno de los elementos interiores en y en los mismos módulos de manera individualizada.

 

Margenes personalizados modulos divi 2.4

Márgenes personalizados en los módulos de DIVI 2.4

 

Estas características las podrás encontrar en los Ajustes Avanzados de diseño. Hay que tener en cuenta que el “padding”(margen interior) se ha traducido de una manera muy poco afortunada como “Relleno”, por lo que si ves las frases “columna de relleno” o “relleno personalizado” sepas que se refiere al padding o margen interior.

 

5.4.- Opciones de fondo y bordes de los módulos

Divi 2.4 introduce la capacidad de incluir colores de fondo y bordes personalizados en los módulos.

En cuanto a los colores de fondo, no solo elegiremos el color sino también el grado de transparencia del mismo. De esta manera se pueden crear efectos de diseño muy elaborados.

 

background de modulos divi

Background semi transparente en los módulos divi

 

En cuanto a los bordes de los módulos podremos personalizar: color del borde, anchura del borde y estilo del borde.

 

Modulos semitransparentes con deivi 2.4

Efecto con módulos semi transparentes en DIVI

 

6.- Opciones de CSS Personalizado

 

Si con los nuevos ajustes de personalización aun no es suficiente para poder crear lo que tenemos en mente, podemos utilizar la pestaña de CSS Personalizado que encontraremos tanto en Secciones, filas como en los mismos módulos.

 

7.- La biblioteca Divi (The Divi Library)

 

Ahora en Divi 2.4. es posible guardar páginas, secciones completas, filas o módulos ya personalizados en la biblioteca.

Posteriormente podremos usar dichas páginas, filas personalizadas, secciones o módulos en otras partes de la página web o incluso en otra web.

 

7.1.- Guardar secciones, filas y módulos

Ya es posible guardar secciones, filas y módulos en la biblioteca para posteriores usos. Además, como ocurría con los diseños de páginas podemos exportar dichos elementos para que puedan ser utilizados en otra páginas web.

A la hora de guardar en la biblioteca podemos elegir que partes del módulo personalizado se guardarán: ajustes generales, ajustes avanzados de diseño o CSS Personalizado.

 

7.2.- Elementos de la biblioteca con características Globales

Ya es posible guardar secciones, filas o módulos como Globales. Esto significa que si usamos el elemento en 5 páginas cuando actualicemos las características de uno de ellos automáticamente se actualizarán en el resto de elementos ubicados en otras páginas.

Para guardar en la biblioteca un elemento con esta característica tendremos que marcar el checkbox que dice: Hacer que este artículo sea global.

 

8.- Nuevos módulos DIVI

 

Divi 2.4 incorpora 6 nuevos módulos al page builder:

 

8.1.- Imagen de anchura completa (Fullwidth Image Module)

Permite añadir imágenes de tamaño a toda la anchura del navegador conservando su relación de aspecto (sin cortarlas).

 

8.2.- Módulo de Código (Code module)

Tanto en su versión normal como a anchura completa, este módulo sirve para introducir código html, shortcodes de módulos, etc.

 

8.3.- Título de anchura completa (Fullscreen Header)

Este módulo sirve para crear un encabezamiento a pantalla completa, gracias a la posibilidad de incorporar imágenes, logos, botones, etc.

 

Nuevo módulo divi 2.4

Nuevos módulos DIVI

 

El módulo presenta 24 posibilidades de diseño diferentes, con las posibilidades de combinación de elementos.

Si no activamos el modo de pantalla completa, la cabecera tomara la altura del contenido.

Aquí tienes una demo de una cabecera de ancho completo: DEMO

 

8.4.- Título de publicación (Post title module)

Ahora se puede utilizar el Page builder o constructor de páginas de Divi en los post o entradas de blog.

Este módulo será de especial importancia para controlar que metadatos deben mostrase en el post: fecha, autor, número de comentarios, imagen destacada, etc.

 

Nuevo Modulo título de post con DIVI 2.4

Nuevo Modulo título de post con DIVI 2.4

 

No solo podemos controlar que metadatos aparecen sino que además tenemos diferentes opciones de diseño para mostrarlos.

 

Compártelo ya!!