Antes de que empieces a leer este post, quiero y debo advertirte de algo:

Es muy posible, que una vez lo leas, te enamores. Eso me ha pasado a mi. El tema DIVI 2.4 es tan extraordinario que se pone por encima de todas las plantillas o temas de WordPress que conoces hasta ahora, llámese Génesis, Avada o cualquier otro tema que puedas encontrar en Themeforest o Woothemes. Y ya sabes, si después de leerlo te enamoras, no digas que no te lo advertí, que luego llegan los celos, las discusiones de pareja, etc. y a ver como le explicas a tu pareja que te has enamorado de un/a tal DIVI 2.4  😉

Divi 2.4: El mejor tema de WordPress de la historia

© darco2010 – Fotolia.com

Bueno, antes de empezar a desnudar a DIVI 2.4 y ya que voy a ejercer de Celestina, me presento: Me llamo Gonzalo de la Campa y trabajo en www.paginaswebempresas.es y soy profesor de DIVI, WordPress y Woocommerce en www.cursowordpress-online.com

Ver vídeo sobre DIVI 2.4

Tabla de contenidos,

¿Qué ganarás con el tema DIVI 2.4?

  • La mayor flexibilidad que jamas hayas conocido
  • Podrás maquetar de forma super sencillas páginas, post, etc.
  • No necesitarás usar código CSS para nada (a diferencia de Genesis que sin saber CSS estás perdido)
  • Podrás exportar tus diseños de páginas a otras posts, páginas o webs y ahorrar mucho tiempo
  • Podrás hacer diseños con una calidad estética a años luz de Génesis, Wothemes, etc. lo que generará confianza en tus clientes y mejorará muchísimo tu imagen de marca
  • La sencillez y facilidad de aprendizaje es brutal comparado con cualquier otro tema de WordPress con lo que te evitará muchos dolores de cabeza

¿Cómo puedo conseguir DIVI?

Nota: Ya ha salido la versión de DIVI 2.5 que incluye todos estos cambios y algunos más, puedes verlo aquí: Divi 2.5, el mejor tema de WordPress, mejora.

Tienes dos opciones (por tiempo limitado):

  • COMPRA CURSO WORDPRESS + TEMA DIVI 2.5: Compra ahora el curso de: WordPress + DIVI 2.5 y tendrás un descuento del 30% en el curso si eres de los 5 primeros.
  • COMPRA EL TEMA DIVI 2.5: Entra ahora y consigue un 20% de descuento en la suscripción anual en Elegant Themes en este enlace (si dejas de pagar futuros años no pierdes tu tema, dejas de poder actualizarlo, simplemente). O si prefieres realizar un único pago y tener derecho a todas actualizaciones, soporte, temas y plugins de por vida pincha aquí y consigue un 10% de descuento.

Y ahora vamos a ver la Novena Maravilla del Mundo: DIVI 2.4

Bienvenido a la mayor actualización en la historia del Divi y al mejor tema de la historia de WordPress. Se trata de una actualización monumental, incluyendo más de 1.000 nuevos ajustes y controles para personalizar el tema a tu gusto, así como un maquetador de páginas integrado y un conjunto alucinante de módulos flexibles para añadir dinamismo a tu web.

Los diseños son ultra personalizables y más fáciles de usar que nunca gracias a la Biblioteca Divi, toda una nueva manera de conservar, utilizar y organizar su propia colección de diseños del maquetador de páginas y post: Divi Builder.

Antes DIVI sólo podía usarse en las páginas y era una pena no poder tener toda esa flexibilidad al maquetar los post, pero ahora: El constructor ya no se limita a las páginas, lo que significa que somos libres de utilizar para crear post alucinantes.

Se trata de un tema épico que no necesita siquiera de temas hijos, vamos a desnudarlo lentamente:

La columna vertebral de Divi 2.4 es su sección de Personalizador, que nos va a permitir cambiar absolutamente de todo de la forma más sencilla que te imaginas, vas a poder:

  • Cambiar los anchos de los contenidos
  • Los espacios entre columnas
  • Las alturas, anchuras y transparecias del menú
  • Crear sliders, iconos, formularios en segundos y sin plugins
  • Cambiar el tamaño y la posición del logo sin CSS
  • Cambiar tipos de letra y miles de formatos sin necesidad de plugins
  • Cambiar los diseños de los botones en segundos
  • Y millones de cosas más

Pero hay cosas que vas a ver mucho más claro viendo las imágenes. Mira y disfruta:

divi-2-4_theme_customizer

Cambia a tu gusto el ancho del contenido de las páginas

Y ahora ve diciendome, ¿qué plantilla conoces en la que puedas hacer todas estas cosas que vas a ir viendo de forma tan fácil y sin tocar un pelo de código? 😉

divi-content-width

Cambia el tamaño del sidebar en segundos.

global-sidebar-width

Modifica el tamaño del logo de forma súper sencilla

Esto en la mayoría de temas o plantillas de WordPress implica necesariamente tenér que poner un código CSS y si no sabes CSS estás jorobado, con DIVI 2.4 el CSS ha muerto, jeje. Han estado más de un año trabajando en está nueva actualización, para que no tengamos que hacerlo nosotros. ¡Una maravilla!

header-height

Cambia la cabecera de tu web, formatos y estilos en segundos

En la sección de Personalizar vas a poder elegir las fuentes primarias y secundarias de navegación, tamaños de fuente, colores de texto…

divi-2-4-navstyles

Consigue efectos chulísimos en la cabecera de tu web

Podrás activar o desactivar la navegación fija. Esto significa que al hacer scroll el menú permanece o no arriba, lo que tu quieras. Estos estilos se pueden ajustar de forma independiente de los estilos principales de su navegación y así podrás tener un estilo cuándo esté la web estática y otro cuándo el usuario esté haciendo scroll lo que le dará a la web un aspecto súper moderno y atractivo.

fixed-nav

Esconde el menú de navegación hasta que hagan scroll

Cuando se habilita esta opción, la barra de navegación permanecerá oculta hasta que el visitante comienza el desplazamiento hacia abajo de la página. Esta es una gran manera de dar pleno protagonismo a la primera sección en tu página y evitar distracciones al usuario. La uabilidad web cada vez es más importante para convertir a los usuarios en clientes. No sólo es un tema estético.

hidden-header

Pon el logo en el centro del Menú para darle protagonismo

Este ajuste se calculará automáticamente el número de elementos de menú que tienes y centrará el logo entre los textos del menú.

divi-2-4-centerednav

Añade transparencias o semi-transparencias a tu menú.

Con este efecto vas a poder crear diseños espectaculares y modificarlos en un futuro en cuestión de segundos si quieres

divi-2-4-transparentnav

Millones de combinaciones para que la cabecera de tu web enamore a tus clientes

Al cliente hay que enamorarle en menos de 5 segundos. Y lo primero que va a ver es la cabecera y el slider o imagen principal, así que vas a tener que esforzarte especialmente en estas secciones, y con DIVI 2.4 vas a conseguir diseños espectaculares en segundos, lo que ter permitirá incluso ir cambiando a tu gusto y viendo lo que mejor te funciona.

Hay maneras ilimitadas de combinar los colores de menú, fuentes, estilos de texto y opciones de diseño… Mira algunos ejemplos:

divi-2-4_navmocks

Ajusta la tipografia al milímetro sin tener que instalar plugins que ralenticen tu web

Divi 2.4 introduce nuevos controles para la tipografía que se puede utilizar para ajustar cada parte de tu sitio web, incluyendo las cabeceras, cuerpo, títulos de pie de página, el texto de pie de página, enlaces de navegación, el texto del cuerpo, e incluso por defecto de estilo de texto para los módulos individuales. Tiene controles para cosas tales como tamaño, color, espaciado entre letras, line-height, Font-Peso, todas mayúsculas y cursiva.

Esta imagen vale más que mil palabras:

typography

Cambia el tamaño de las columnas a tu gusto de forma súper fácil y crea efectos chulísimos con imágenes o lo que quieras

divi-2-4_gutters-global

divi-2-4_gutters_global_example

Cambia la altura de las filas en segundos

divi-2-4_padding-global

Diseña un footer o pie de página a medida con todos estos formatos

A diferencia de la mayoría de los temas de WordPress que solo permiten de 1 a 4 columnas en el pie de página, DIVI 2,4 ahora tiene 8 diseños de columnas para elegir , así como un control total sobre los widget que sitúes en el pie de página y los estilos, textos, etc.

divi-2-4-footers

Cambia el estilo de los botones a tu gusto

Divi 2.4 ahora te da un control total sobre todos los botones que vayas a poner en tu web. Esta es otra cosa que en casi cualquier tema de WordPress te implica tener que saber CSS o instalarte algún plugin que ralentizará la web y penalizará en el SEO a ojos de Google. Con DIVI 2.4 puede establecer estilos globales o tener botones con diseños exclusivos en distintas páginas. Vas a tener un control total sobre la fuente, el tamaño de la letra, el color del texto, color de fondo, estilos de trazo, la selección de icono… y todo ello de forma independiente tanto para el botón en estático como para cuando pases por encima con el ratón.

buttons

Mira algunas webs diseñadas con el tema DIVI 2.4

Pulsa sobre la imagen y disfruta con los especataculares diseños que vas a poder crear:

divi-2-4-casestudydemo

 

El brutal Personalizador de DIVI 2.4

Te va a permitir ajustar todo lo que te puedas imaginar, a tu gusto. Lo que un programador consigue en semanas o meses de trabajo tu lo podrás hacer en segundos.

Ya no es necesario tener un tema hijo o escribir CSS personalizado que te puede dar problemas en las actualizaciones, ahora tienes más de 200 ajustes sólo en el módulo Personalizador Divi, tales como alturas deslizantes, superposición de colores… Sólo esto te ahorrará un montón de tiempo y dolores de cabeza y conseguirás una imagen para tu web que te diferenciará del resto de tu competencia.

divi-2-4_modulecustomizer

¡Tachán! El maquetador de páginas, también el los post ¡una maravilla!

Esto era algo que había que hacer mediante código y que todo el mundo esperaba con anhelo para esta próxima actualización y es poder usar el Divi Builder también en nuestro blog.

Literalmente vas a flipar con los post que vas a poder hacer, ¡diseños muy por encima de cualquier otro blogger del mundo!

Post de ancho completo:

divi-2-4_post-fw

Con sidebar a la izquerda

divi-2-4_post-left-sidebar

O a la derecha

divi-2-4_post-right-sidebar

Mira algunos ejemplos de post diseñados con DIVI 2.4 y enamórate de lo que vas a poder hacer

Tus lectores van a flipar 😉 Pulsa sobre las imágenes para verlo:

divi-2-4_chair-post-thumb
divi-2-4_bread-post-thumb
divi-2-4_coffee-post-thumb

 

Más opciones en el diseño de las filas

Antes de Divi 2.4, las filas no venían con ninguna opción. Ahora que las filas y de sus estructuras de columna son fluidas, filas se han reforzado con un nuevo conjunto de opciones, por lo que, de lejos el elemento más versátil en el Divi Constructor. Las nuevas opciones de fila en Divi 2.4 facilitan el camino a una nueva generación de diseños únicos y espectaculares que no eran posibles antes. Echa un vistazo a continuación para ver cómo se puede modificar la estructura de la columna existente de una fila, ajustar sus anchos canalones, e ¡incluso cómo hacer una fila fullwidth!

Cambia el número de módulos de cada fila en segundos

Ahora podrás cambiar fácilmente la estructura de la columna de cualquier fila existente en tus diseños. Podrás cambiar el número de columnas dentro de una fila al instante, así como los módulos dentro dichas columnas. Atrás han quedado los días de la creación de una nueva fila y tener que arrastrar todos los módulos sólo para cambiar la estructura de la columna. ¡Otra cosa que nos ahorrará mucho tiempo!

divi-2-4_adjust-columns
Increase Columns…
divi-2-4_increase-columns
or decrease columns in seconds.
divi-2-4_decrease-columns

Cambia el espacio entre columnas

No sólo vas a poder ajustar los anchos de columna de toda la web a la vez en el Personalizador si no que también se pueden ajustar en función de cada columna en cada página o post. Incluso podrás quitar el espacio entre ellas creando efectos impresionantes.

divi-2-4_gutters

Haz que las secciones que quieras sean completamente Full With

Esto te va a permitir combinar secciones y abre un mundo espectacular a nuevos diseños increíbles donde el límite ya solo será tu creatividad, no lo que te permita el tema o plantilla.

divi-2-4_fw-rows

Cambia los colores de cada columna

Con esto vas a poder dar unos efectos chulisimos haciendo que el cliente mire, solo dónde tu quieres.

divi-2-4_column-options

Ajusta la altura de los módulos de forma fácil

Esto en cualquier tema de WordPress suele resultar bastante caótico y te acaba obligando a crear contenidos con el mismo número de palabras y párrafos para que no quede todo a distintas alturas. Con DIVI 2.4 estos problemas se acabaron.

divi-2-4_column-heights

Mira más ejemplos de diseños web hechos con DIVI 2.4

Haz clic en el siguiente enlace para ver una demostración en vivo que ilustra cómo se pueden aprovechar las filas ancho completo y alturas iguales de columna.

divi-2-4-interiordemo

DIVI 2.4 ya no solo te va a permitir añadir infinidad de módulos tipo (sliders, iconos, imágenes, testimonios, desplegables…) si no que tambien los podrás personalizar a tu gusto

Nueva pestaña de ajustes avanzados

Si eres de los que has llegado hasta aquí leyendo el post, intuyo que eres de los que ya se está enamorando. Pues con esto, vas a querer irte a vivir con DIVI 2.4 para el resto de tu vida 😉

Ahora cada módulo que añadas a tu web además de las configuraciones generales va a tener una pestaña de Diseño Avanzado que es todo eso que tendrías que hacer en cualquier otro tema tocando las CSS, pero con DIVI lo harás en segundos y tendrás una web que no se parecerá a ninguna otra.

divi-2-4_advsettings

Miles de opciones en las tipografías

Control total en el interlinieado, interletrado, tamaños, etc.

divi-2-4-moduletext

Ajusta el tamaño de los margenes (Padding y Margin) con un click

Visual Composer y las CSS han muerto con DIVI 2.4.

divi-2-4-allpadding

Cambia los tamaños de las barras y miles de módulos:

divi-2-4-barcounters

Cambia padings en los textos:

divi-2-4-ctapadding

Cambia los margenes de las llamadas a la acción:

divi-2-4-ctamargin

Cambia los colores de los fondos y los bordes

En los ajustes avanzados podrás cambiar a tu gusto cualquier módulo como por ejemplo estas tablas

divi-2-4-pricingtables

o personalizar a tu gusto los formularios dándoles un aspecto espectacular con transparencias:

divi-2-4-contactform

O ajustar las transparencias de las cajas para tener textos legibles…

divi-2-4-blurbbgs

Mira ejemplos de ajustes avanzados en los módulos

divi-2-4-cafedemo

Pero si además controlas de CSS… te va a ser muy fácil añadir tus propios ajustes

Tendrás una sección en cada módulo para poder añadir lo que quieras

divi-2-4_customcss-tab

Por ejemplo, se puede dar una imagen de módulo de estilos personalizados para hacer que se superpongan dos de ellos. Esto es sólo un solo ejemplo de las posibilidades infinitas CSS a tu alcance!

divi-2-4_customcss-ex

La librería de DIVI 2.4 es una de las cosas más súper maravillosas que tiene. Increíble!

Si te has trabajado una página, un post o has hecho ajustes que te han encantado en algún módulo en concreto o en toda una fila, te apetecerá conservarlo y usarlo en otras páginas de tu web o incluso en otras webs en un futuro. Esto no es posible en ningún tema de WordPress salvo en DIVI 2.4.

En otros temas tienes que comprar un plugin tipo Visual Composer que te permitirá maquetar y luego un segundo plugin para poder exportar o importar tus diseños, pero con DIVI lo tienes todo integrado si tener que hacer gastos adicionales.

idivi-2-4_divi-library

Podrás guardar secciones, módulos, páginas completas, etc.

Si seguimos enamorándonos esto ya entra en la parte del erotismo, estamos muy cerca del éxtasis 😉

Este es el momento que todos hemos estado esperando, Divi ahora permite guardar no sólo los diseños, sino también individuales Secciones, Filas y Módulos. Al igual que los diseños, puede exportar estos para su uso en otros sitios también.

Guarda lo que quieras en tu librería y cambia los diseños de toda tu web en segundos

Ahora además de guardar cualquier Sección, Fila o módulo para su uso posterior, cada cosa que guardes podrás guardarla para hacer que cambie en toda tu web a la vez si es un módulo que has usado en muchas páginas o hacer que esos ajustes se reflejen en un solo módulo. Sincronízalo como quieras y cámbialo más adelante si quieres.

divi-2-4_save-element

Esto se sale: «Selective Sync»

Como se puede ver en la imagen de abajo, los ajustes se pueden sincronizar de forma selectiva cuando se guardan en la Biblioteca. Esto significa que puede guardar cualquier combinación de los ajustes generales, de ajusstes avanzados o de lo que hayas cambiado en la pestaña de CSS. De todo ello te hablaré en el curo de WordPress + DIVI 2.4 que estoy preparando.

divi-2-4_save-adv-settings-ex

Los elementos globales en la librería

Sí, esto es tan increíble como suena. La opción de tener un único módulo en varias ubicaciones a través de su página web por fin está aquí! Al guardar un elemento global a la Biblioteca Divi, ese elemento (ya sea una Sección, Fila o módulo) se refleja en cada página que existe.

Es decir, te va a permitir actualizar los diseños en un solo lugar, y se actualizará en toda tu web donde hayas metido ese módulo, al instante.

Además esos elementos globales cambian de color en el maquetador de paginas para que lo identifiques rápidamente.

divi-2-4_global-element

Guardar como «módulo global»

Mira que fácil es guardar un módulo como global para que lo que cambies en ese módulo cambie en toda la web dónde lo hayas ubicado. Por ejemplo si metes iconos en muchas páginas o formularios o cabeceras o lo que sea, puedes cambiarlo en toda la web en segundos.

divi-2-4_save-global

Mira como cambiándolo en la librería cambia en toda la web

Podrás crear un solo módulo, guardarlo como una Biblioteca Global de artículos, y luego añadir en cualquier lugar en su sitio. Si desea actualizar este módulo, es simplemente una cuestión de cambiar en una página y el resto se actualizará automáticamente. Módulos tienes muchísimos, cabeceras, llamadas a la acción botones, imágenes…

global-module-purple

Guarda también secciones enteras en tu librería

Si has diseñado secciones chulas como zonas con iconos, textos combinados con imágenes, barras, tablas… guarda toda esa sección y úsala dónde quieras.

divi-2-4_globa-sections

divi-2-4_cond-global-elements

Nuevos módulos en DIVI 2.4

Además de todo lo que estamos viendo, Divi 2.4 añade 6 nuevos módulos:

  • Imagenes Fullwidth
  • Código Fullwidth (esto permite por ejemplo añadir Revolution Slider en las secciones que quieras)
  • Header Fullscreen
  • Post Title Fullwidth
  • Añadir códigos o shortcodes
  • Post Title estandar

Módulo para añadir imágenes full with

El módulo de imagen fullwidth te permite añadir imágenes a su sitio que abarcan todo el ancho del navegador, conservando su relación de aspecto, sin cortarlas.

fw-image-animation

Mira ejemplos con este módulo de imágenes full with para ver los efectos espectaculares

divi-2-4-casestudydemo

Módulo para añadir código (Regular and Fullwidth Modules)

El Módulo Código esencialmente nos abre la puerta a una sección en blanco para agregar código a su sitio web. Puede agregar código en cualquier columna con el módulo Código regular o utilizar el módulo de código de ancho completoy así añadir por ejemplo shortcodes de Revolution Slider para que lleguen al borde de la web sin cortes ni espacios en blanco.

divi-2-4-codemodule

Cabeceras FULLSCREEN

Esto es simplemente espectacular. No confundir full with con full screen. Full Screen permite poner un vídeo o una imagen en toda la pantalla creando efectos brutales

divi-2-4-fullscreenmodule

Distintas posibilidades de maquetar estas secciones de pantalla completa

Con diferentes combinaciones de orientación contenido y colocación de la imagen, hay más de 20 diseños diferentes que se pueden crear. También puedes optar por no activar el modo de pantalla completa y la cabecera tendrá la altura natural de su contenido.

divi-2-4-fullscreenwireframes

divi-2-4-fullscreenmocks

Mira este efecto de cabeceras de pantalla completa y alucina!

Haz clic en el siguiente enlace para ver una demostración en vivo que ilustra cómo se puede aprovechar el Módulo de Cabecera Pantalla Completa para dar a sus visitantes un saludo impresionante a su página.

divi-2-4-casestudydemo

Módulo de título de los Post (Regular and Fullwidth Modules)

Normalmente en cualquier tema, la sección del propio título del post o página no se puede editar. Puedes editar todo lo que hay dentro del post pero no su propio título.

Cuando se utiliza el Divi Builder, ahora se pueden editar fácilmente los títulos haciendo diseños espectaculares.

divi-2-4-posttitlemodule

Posibilidades de edición de los títulos de los post

Podrás cambiar la posición del los títulos de los post, añadir imágenes en los títulos, poner los textos sobre las imágenes… hay 9 diseños diferentes que se pueden utilizar para mostrar el título de muy distintas formas. En el curso veremos ejemplos de como hacerlo.

divi-2-4-posttitlewireframes

Si eres de los que has llegado hasta el final del post, seguro que estás deseando empezar a usarlo, así que ya sabes…

Nota: Ya ha salido la versión de DIVI 2.5 que incluye todos estos cambios y algunos más, puedes verlo aquí: Divi 2.5, el mejor tema de WordPress, mejora.

Para adquirir Divi…

Tienes dos opciones (por tiempo limitado):

  • COMPRA CURSO WORDPRESS + TEMA DIVI 2.5: Compra ahora el curso de: WordPress + DIVI 2.5 y tendrás un descuento del 30% en el curso si eres de los 5 primeros.
  • COMPRA EL TEMA DIVI 2.5: Entra ahora y consigue un 20% de descuento en la suscripción anual en Elegant Themes en este enlace (si dejas de pagar futuros años no pierdes tu tema, dejas de poder actualizarlo, simplemente). O si prefieres realizar un único pago y tener derecho a todas actualizaciones, soporte, temas y plugins de por vida pincha aquí y consigue un 10% de descuento.

Si quieres puedes ver un vídeo sobre DIVI 2.4 en: Las maravillosas novedades de DIVI 2.4 de Elegant Themes.

Espero que te haya gustado.

 

Tutorial del tema Divi de ElegantthemesGonzalo de la Campa es fundador la web www.paginaswebempresas.es que da servicio integral de diseño web, diseño gráfico y posicionamiento a pymes. Y profesor de DIVI, WordPress y Woocommerce en www.cursowordpress-online.com.

Ayuda a pequeñas y medianas empresas a conseguir clientes a precios muy razonables porque cree que hoy tener una buena web y estar posicionado debe ser un derecho y no el privilegio de unos pocos.

Nota: Alguno de los enlaces son de afiliados.

Shares
Share This