*Solo del 25 al 6 de Diciembre

black friday elegant themes divi black friday webempresa
1 Star2 Stars3 Stars4 Stars5 Stars (10 votes, average: 4.50 out of 5)

Elegant Themes DIVI – La actualización más esperada

Demos la bienvenida a la mayor actualización de la mejor plantilla para WordPress de Elegant Themes y del mundo: ¡ Divi !

Tras la apoteósica actualización 2.4 de Divi pudimos ver grandes cambios en el tema:

Y para muestra un botón… no, un vídeo: el de la presentación que realizaron los fundadores de esta prestigiosa plantilla y que me di el lujo de traducir:

 

 

Y, como se que te preocupa, te lo digo de entrada… la actualización no elimina todas las modificaciones que hiciste al tema… (a no ser que hayas tocado los archivos php, en cuyo caso te conviene siempre trabajar sobre un “child theme”)

Importante: Si tienes dudas del tipo ¿qué pasará al actualizar, y si lo pierdo todo??, te aconsejo que ANTES de hacerlo realices una copia de seguridad de tu actual diseño, ya que si te encuentras con algún problema (que deberías informar en el foro de Elegant Themes) siempre podrás volver a instalar la versión Divi 2.3 y recuperar el diseño que tenías previamente hasta que ese problema se solucione. Esto suele ocurrir siempre que un tema tiene un cambio tan fundamental como el presente y seguramente saldrán varias actualizaciones posteriores para corregir esos fallos.

En esta mega actualización, en la que el equipo de Elegant Themes ha trabajado durante un año, encontrarás mas de 1000 nuevos parámetros de configuración para los módulos, controles para personalizar tu tema y una fluidez y flexibilidad que no dejan de asombrarme y como diseñadora gráfica no puedo dejar de sentirme agradecida.

 

Si antes Divi me parecía una genial herramienta de diseño para crear páginas web y blogs únicos, ahora me siento en la gloria y paso a contarte por qué…

Pero, ¿qué es lo primero que ha cambiado?

Entras en Appearance y ups! dónde esta “Divi Theme Options”?? Ahora lo tenemos de manera independiente, con su propio ícono y opciones tales como “Theme Options”, “Theme Customizer”, “Module Customizer” y “Divi Library”

Divi 2.4 Mejor plantilla WordPress

Por si acaso, la actualización no cambia el color del Dashboard… eso lo hice yo solita 😉

Cuando clicas “Theme Options” aparece la ventana del ePanel que ya conocemos. Al clicar “Theme Customizer” aparece la ventana que antes y también ahora, se puede abrir clicando en Appearance > Customize y cuando clicas “Module Customizer” se despliega la ventana que permite modificar las características por módulo…

Y por último, la “Divi Library” abre el detalle de “Layouts” o diseños que hemos guardado en cada página o actualmente en cada post que nos haya gustado y hayamos guardado con la opción “Save Layout”.

Se pueden abrir desde esta ventana y editar a gusto… cosa que antes no podíamos hacer.

La siguiente imagen amplía en detalle el contenido de cada botón y su posibilidad de customizar o personalizar cada aspecto del diseño:

Ahora veamos más detalles sobre las bondades de esta actualización:

Personalización del Logotipo y el Menú

Finalmente podemos controlar el tamaño del logo de nuestra web o blog sin usar códigos añadidos de CSS ni sufrir en el intento!

Como es obvio diferentes logotipos requieren diferentes alturas de cabecera para una legibilidad óptima. Esta nueva opción te permite ajustar la altura de la cabecera para que puedas sacarle el máximo partido a tu logotipo.

Además de poder modificar su tamaño podremos optar por colocarlo al medio de la cabecera y en medio del menú

En cuanto a la Cabecera o Header, con la navegación fija activada tendrás un control total sobre la apariencia de lo que el usuario percibe antes de iniciar el desplazamiento hacia abajo. Estos estilos se pueden ajustar de forma independiente de los estilos principales de su navegación, que migrarán automáticamente a medida que el usuario descienda en la información.

Siguiendo con la personalización de la navegación, tenemos en nuestro poder la opción de “Hide Navigation Until User Scrolls” u ocultar la navegación hasta que los usuarios comiencen a descender hacia abajo en la página.

Cuando se habilita esta opción, tienes en tu mano la posibilidad de dar pleno protagonismo a la primera sección en tu página, como “Fullwidth Slider” o un módulo “Call To Action”.

Continuando con la personalización de la navegación, otra característica que podemos emplear es la de transparentar o semitransparentar .

El Theme Customizer  ahora soporta transparencia alfa, lo que significa que podrás transformar el fondo de las barras de navegación en semi-transparente.

Para ello Divi calcula automáticamente la altura de la barra de navegación y añade el relleno adecuado para el primer elemento en tu página, de esta manera superpone el contenido de la página sin obstruir el texto.

Incluso puedes personalizar el color de fondo de navegación y transparentarlo en el porcentaje que veas conveniente.

Personalización de la Navegación

Ahora también puedes modificar el ancho de tu página web a cualquier medida de tu elección, esto abre la posibilidad de estar a la vanguardia en lo que se refiere al futuro de las pantallas de súper alta resolución.

Por otro lado también tenemos la posibilidad de ajustar el ancho del sidebar o barra lateral utilizando una plantilla de página con sidebar, las páginas de archivos, páginas de categorías, y todos los otros tipos de posts.

Ahora el diseño es tan versátil y fluido que con solo un clic es posible definir el espacio entre columnas para que sea más amplio, más estrecho o incluso menor al basado en el tipo de contenido de la columna.

Junto con los controles horizontales de espaciado entre columnas, ahora también es posible darle a tu contenido más espacio para “respirar” ya que se puede definir el espaciado vertical de filas y secciones.

 

Nunca fue tan fácil diseñar.

Antes de Divi 2.4, las filas no podían personalizarse y luego se reforzaron con un nuevo conjunto de opciones transformándose así en el elemento más versátil del Divi Builder.

Las filas tienen sus columnas ajustadas al instante, y los módulos dentro de ellas se adaptan como un guante a su entorno.

Y finalmente han quedado atrás los días en los que teníamos que crear una nueva fila para luego arrastrarla sobre la totalidad de los módulos y sólo para cambiar la estructura de la columna!

Además ahora es posible cambiar la estructura de las columnas con un solo click, sin tener que partir de cero… se puede pedir mas?

 

Otro elemento que pedía a gritos poder modificarse a gusto son los botones, a partir de Divi 2.4 tienes un control total sobre todos los botones en tu sitio web. Puedes establecer estilos de bases globales, o incluso ajustar el estilo de los botones para los módulos individuales.

Ahora también tienes 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, así como un conjunto único de controles para los estilos de botón activable.

 

Personalización de las Tipografías

Otro elemento que se puede definir es el de las fuentes de Navegación, los tamaños de texto y estilos de texto ya que, desde el panel “Divi Theme Customizer”, se pueden elegir las fuentes primarias y secundarias de navegación, tamaños de fuente y colores de texto.

Con Divi 2.4 se introducen nuevos controles para las tipografía que se puede utilizar para ajustar cada parte de tu sitio web, incluyendo las cabeceras, cuerpo de texto, títulos de pie de página, el texto de pie de página, enlaces de navegación e incluso el estilo del texto de los módulos individuales. Tiene controles para cosas tales como tamaño, color, espaciado entre letras, interlineado, el grosor del texto, las mayúsculas y cursiva… y todavía queda mas!

Personalización de los Módulos

divi 2.4 actualización

Como sabes los módulos son la base del diseño del “Divi Builder” y en esta nueva entrega nos sorprenden con 6 nuevas características: Fullwidth Image Module, Fullwidth Code Module y Fullscreen Header Module, Fullwidth Post Title Module, Regular Code Module y Regular Post Title Module.

Veamos una a una sus características:

1. Fullwidth Image Module o “Módulo de Imagen de tamaño completo en pantalla”

Una  imagen vale mas que mil palabras:

fwimageHWP2

Esta característica  permite añadir imágenes a tu sitio que abarcan todo el ancho del navegador,  sin cortarlas y conservando su proporción o relación de aspecto.

He aquí un ejemplo del uso de esta característica:

Demo en línea

2. / 3. Módulo “Code” Fullwidth y Regular

Este Módulo básicamente ofrece una pizarra en blanco para agregar código a tu sitio web. En su modo “Regular” puedes añadir código en cualquier columna y si utilizas el módulo de “Código de Ancho Completo” no estarás restringido al tamaño de la columna o el ancho de las filas.

4. Módulo “Fullscreen Header”

Con éste módulo vas a alucinar y no veas cómo! puedes añadir imágenes, logotipos,  botones con llamadas a la acción y mucho más!

Nos dan la posibilidad de crear diferentes combinaciones de orientación, contenido y ubicación de la imagen, a partir de más de 20 diseños diferentes, que son todos completamente “responsive” o adaptables a pantallas de otros dispositivos como tablets o móviles. Esta característica también nos permite optar por desactivar el modo de pantalla completa y la cabecera coge por defecto la altura natural de su contenido.

He aquí esas 20 posibilidades de diseño… mejor imposible!:

Para ilustrar mejor cómo puede quedar la característica de Fullwidth Header mirá este demo online:

tema wordpress

Demo en línea

5. / 6. Módulo “Post Title” (Módulos Regular y Fullwidth)

Si el trabajo de diseño nos apasionaba usando el page builder, ahora esa pasión se desborda, ya que con éste módulo podemos extender las ventajas del page builder a los posts!

plantilla para wordpress divi

divi 2.4 plantilla para wordpress

Post Demo Online

No solo las páginas serán nuestro lienzo blanco, ahora también podremos personalizar cada post de acuerdo a su contenido…

Para ello nos brindan 9 diseños diferentes para combinar la ubicación del texto, la “featured image” o imagen representativa del post, y la orientación del texto:

Pero aquí no acaba todo… tenemos más!

Ahora también puedes personalizar el Pie de Página o Footer y le puedes dar un estilo personalizado a los Widgets ya que cuentas con 8 diseños de columna a elegir para tu área de pie de página, así como un control total sobre la cabecera de los widget de pie de página y el estilo de texto del cuerpo.

plantilla divi2.4

Descubre Ahora Divi

Divi 2.6

Divi 2.6 tiene como fundamental actualización la mejora de Divi Builder además de un cambio visual en la interface del ePanel, nuevos módulos, la mejora de los módulos existentes y nuevos controles de edición de respuesta.

Veamos en detalle estos cambios.

La mejora de los módulos del Divi Builder

Para transformar nuestro Divi Builder en más versátil y dotarle de más posibilidades de diseño no sólo han añadido nuevos módulos si no que también han mejorado considerablemente algunos de los módulos más populares del constructor, les paso a explicar 5 de esos módulos nuevos:

1. Módulo Botón

Como seguramente ya lo sabes, Varios de los módulos del Divi Builder ya vienen con botones integrados. Sliders, llamadas a Acciones y Opciones de correo electrónico. Sin embargo, no nos daban la opción de añadir un botón independiente para un diseño de Divi. Este módulo nuevo resuelve este problema separando el botón Divi en su propio módulo. Cuando se combina con la configuración de diseño avanzado del módulo, se pueden crear un sinnúmero de estilos de botones! a que es una pasada??

divi 2.6 botón

2. Módulo de Control deslizante Publicar

Este módulo funciona igual que el módulo de slider estándar del Divi Builder, excepto que en lugar de construir tus propias diapositivas, el contenido del slider está compuesto por las publicaciones destacadas de tu blog!. Si! no estas viendo alucinaciones jejeje Este es un gran complemento y es una manera genial de presentar tus mensajes favoritos, ya sea en una sección de ancho estándar o a pantalla completa.

divi slider

3. Módulo Comentarios

Este es un módulo que me parece genial!. Cuando hablamos de comentarios siempre tenemos presente que son una parte estándar de cada tema, y por lo general aparecen en la parte inferior y por debajo de la totalidad del contenido de nuestros posts. Pues eso a dejado de ser una regla per se… ya que lo han convertido en un módulo independiente del Divi Builder. Esto significa que ahora tienes el control total sobre la ubicación de tus comentarios y puedes colocarlos en cualquier parte dentro del contenido de tus publicaciones. Este módulo también le da la posibilidad de personalizar la apariencia de tus comentarios a través de la configuración de diseño avanzado del Divi Builder y de las opciones de css personalizado.

comentarios divi

4. Módulo de búsqueda

Hasta ahora, la única manera de añadir un formulario de búsqueda a tu sitio web era usando el widget estándar de búsqueda de WordPress. Sin embargo, esto se limitaba a emplearlo en la zona de la barra lateral destinada a widgets y al pie de página. Este módulo también incluye nuevos controles sobre los resultados de búsqueda y diseño.

tutorial divi

5. Módulo de Navegación

La posibilidad de “saltar” de un post a otro con los links de “post anterior” y “post siguiente” al pie de tus posts es una funcionalidad que, hasta ahora, estaba cubierta por plugins adicionales que teníamos que instalar en nuestro blog… con este módulo eso a terminado…

Este módulo se puede colocar en cualquier lugar dentro de tus publicaciones. El módulo también viene con algunas opciones, como la posibilidad de limitar publicar enlaces a los posts dentro de la misma categoría que la publicación que se está viendo actualmente. Esta opción sencilla mejora en gran medida la relevancia de los enlaces y aumenta la probabilidad de que los visitantes encuentren atractivo tu contenido.

Varias mejoras insuperables:

Una mejora que pedíamos a gritos: el formulario de Contacto

Este módulo ha sido objeto de la actualización más grande, con una revisión completa de su funcionalidad principal. Y estos son los aspectos mejorados:

• Campos personalizados – El módulo de contacto ahora es compatible con los campos de entrada personalizados, lo que lo convierte en un elemento completamente funcional. Ya puedes añadir todos esos campos que hacían falta, como teléfono u otros que no estaban contemplados.

• Honey-pot y Detección de Spam – A veces un código de imagen no es suficiente y puede ser frustrante para los usuarios. Es por esto que han añadido este método completamente invisible, eficaz y discreto para detectar los robots de spam.

• Mensaje personalizado y orden de contenido – Ahora puedes personalizar el contenido del mensaje que genera tu formulario de contacto, incluyendo la capacidad de ajustar el orden de las entradas de campo.

• Redireccionar URL – También es posible asignar una URL de redireccionamiento personalizado. Esto volverá a dirigir al usuario después de un envío exitoso del formulario a la URL que estimes conveniente.

• Mensaje Éxito personalizada – También tienen ahora la posibilidad de ajustar este mensaje que se muestra después de un envío exitoso del formulario.

divi tutorial

Controles de edición Responsive

Quizás la característica más emocionante en Divi 2.6 son los nuevos controles responsive de edición del Divi Builder, que te permiten asignar diferentes valores de tamaño y espaciado para cada punto de interrupción.

divi tutorial

Ajuste de tamaños para dispositivos individuales

Divi ya se ve muy bien en todos los dispositivos gracias a su diseño ajustable y a su fluida rejilla de diseño, pero a veces, cuando se modifica la configuración de diseño avanzado de un módulo, puede ser difícil asegurarse de que todo se verá perfecto en todos los dispositivos. Ahí es donde entran en juego los nuevos controles de edición sensibles de Divi Builder, ya que te dan un mayor control sobre el tamaño, el espacio y la visibilidad de los módulos en cada punto de interrupción sensible.
Cada vez que modifiques un módulo, fila o secciones de tamaño y espaciado, aparecerá un nuevo icono que al clicarlo activará nuevos controles de edición de respuesta del Divi Builder para asignar valores únicos por cada elemento.

Deshabilitar manualmente elementos individuales según en que Dispositivos serán reproducidos

Además de ser capaz de ajustar el tamaño y espaciado, también puede desactivar módulos enteros en dispositivos particulares. Todos los módulos, las filas y las secciones vienen ahora con un nuevo ajuste de “Desactivar” que te permite desactivar el elemento en teléfonos inteligentes, tabletas y / o computadoras de escritorio.
A menudo y en busca de una mejor experiencia para tu usuario querras reconfigurar la versión móvil de su sitio web para que la pequeña pantalla no está llena con un exceso de información. Puedes incluso duplicar módulos, creando dos versiones diferentes que se activarán en función del tamaño de la pantalla de tus visitantes.

divi

Cambios en la cabecera:

Estilos nueva cabecera de Divi

Divi ahora viene con 2 nuevos estilos de encabezado que se pueden seleccionar a través del Personalizador de temas. Las cabeceras Slide-In y pantalla completa son los dos grandes adiciones a los controles de cabecera ya existentes en Divi.

Slide en Cabecera

Cuando la nueva cabecera deslizable se activa, sus vínculos primarios y secundarios se consolidan y ocultan dentro de un menú de hamburguesa clásica. Al hacer clic, los elementos de menú se deslizan desde el lado derecho de la pantalla. Este nuevo estilo/aplicación se está volviendo más y más popular en la era móvil ya que permite visualizar el total de la pantalla y al clicar el despliegue dinámico muestra todo el contenido del menú. Cuando combines esta característica con fondos transparentes de cabecera y colores atractivos, podrás fácilmente dar a la cabecera de tu Divi un nuevo aspecto totalmente moderno.

plantilla wordpress divi

Cabecera de pantalla completa

El menú de pantalla completa también esconde sus vínculos primarios y secundarios de navegación hasta que se hace clic en el icono del menú de hamburguesa. Su cabecera se presenta a continuación, en un estilo de pantalla completa. Puedes personalizar fácilmente el color, la opacidad y el tamaño del menú y los enlaces a través del Personalizador de temas. Estos dos nuevos estilos de cabecera, cuando se combinan empleando los controles del personalizador del tema, abren un nuevo mundo de posibles diseños y estilos de cabecera.

divi

Otras mejoras de Divi:

Presentación de superposiciones de fondo

Todos los módulos deslizantes ahora vienen con una opción de superposición de fondo o background. Cuando está activado, un color de fondo semi-transparente se coloca sobre la imagen de fondo de la diapositiva anterior, pero por debajo del contenido del texto de diapositivas. Esto se puede utilizar para reducir el contraste y añadir color a la imagen de fondo de la diapositiva y, al mismo tiempo, mejorar la legibilidad del texto de la diapositiva.

divi plantilla

Superposiciones de imágenes para una imagen y blog Módulos

Tanto la imagen como el módulo de blog ahora vienen con una opción de superposición de imágenes. Cuando está activado, un icono y fondo de color personalizables se colocan sobre la imagen al pasar el cursor sobre la imágen.

Fondos de texto para Sliders

Cuando está activado, un color de fondo semi-transparente se coloca detrás del contenido de texto de la diapositiva. Esto ayuda a asegurar que el texto siempre será fácil de leer, no importa el tipo de foto que se utiliza en el fondo de la diapositiva.

divi tuto

Mejores Opciones de edición de CSS

Ahora cada elemento es factible de ser customizado con su propio código css. Han tenido el buen gusto de añadir docenas de nuevas opciones de estilo CSS, por lo que cada parte, de cada módulo es completamente editable. También han realizado ajustes que consiguen que los módulos sean más fáciles de utilizar, añadiendo el selector CSS para cada campo de texto, por lo que te quedará bastante claro el punto exacto en el que se está agregando tu CSS.

divi css

El ePanel ahora tiene un nuevo look!

Y el cambio es radical el diseño es más contemporáneo y organiza y facilita el acceso a todas las opciones de manera más intuitiva.

divi epanel

Una mejora importante en la compatibilidad con Plugins (Incluyendo BuddyPress)

Algunos de los cambios estructurales que se han abordao en la estructura de la “plantilla de página” de Divi, se han realizado especialmente para mejorar la compatibilidad con varios plugins.

Los problemas de compatibilidad del plugin (en particular las cuestiones relacionadas BuddyPress) que anteriormente se generaban ahora estan totalmente solucionados y ahora se puede afirmar que Divi garantiza la compatibilidad con los plugins de WordPress más populares.

Para terminar no esta demás decir que en Elegant Themes siempre estan innovando para mejorar Divi y darnos la mejor de las experiencias como usuarios apasionados que somos… o al menos yo si que lo soy!!

Lo que veremos en Divi 2.7! si… aquí les dejo un aperitivo de lo que se avecina:

– Divi 2.7 se centrará principales en 3 áreas: “Split Testing” es una herramienta que te permitirá obtener facilmente información valiosa de tus visitantes, probar la eficacia de diferentes variaciones de contenido y, finalmente, crear páginas de mayor rendimiento y mejor enganche.

– Otro área es la referente a la “portabilidad” , es decir el sistema de exportación e imporatación, para que sea sencillo crear, compartir y transferir configuraciones y diseños del Divi Builder.

– Y finalmente nos regalarán un conjunto de nuevas configuración u opciones de página en el Divi builder.

Estos tres nuevos conjuntos de características tienen una cosa en común: coger las capacidades existentes de Divi y hacerlas aún más potentes… solo tendremos que esperar un poquito para tenerlas entre manos y jugar con ellas!

¡¡¡Divi 3.0 – La actualización que hará historia!!!

Por fin llega Divi 3.0, una actualización cargada de novedades y que hace de Divi la mejor plantilla WordPress de la historia con diferencia!

Entre las novedades que se encuentran en esta nueva versión, podemos destacar su nuevo editor visual Divi Builder. A partir de ahora ya no tendrás que alternar entre la parte administrativa o de creación (back-end) y la parte de visualización de resultados (front-end).

El nuevo editor permite visualizar en vivo y en directo todos los cambios que vas haciendo en tu web. Es decir, que vas a poder crear tu sitio de una manera mucho más rápida y fácil y los resultados van a ser sorprendentes. Olvídate de ir a la “vista previa” para visualizar los resultados de tu creación – porque los vas a ver ahí mismo mientras creas el sitio.

Podéis ver un adelanto en este vídeo:

Felicidades a los que ya sois miembros de Elegant Themes y a los que no lo sois…¿¿A qué esperáis??

Cómo instalar Divi (o cualquier otra plantilla de Elegant Themes)

En este vídeo de poco más de 1 minuto puedes ver lo sencillo que es instalar Divi en tu WordPress.

En resumen…Divi se ha consagrado como el mejor tema WordPress del momento y con diferencia!!

Te ha gustado el post? tienes dudas?…. no dejes vacío el recuadrito de abajo y pregunta sin pensarlo dos veces. Y si además te animas a ayudarme… siempre puedes compartir mi blog en tus redes sociales 😉

———————————————————————————————————

Disclosure: Algunos enlaces de este artículo son de afiliado y pueden generar una pequeña comisión. Este hecho no influye para nada en las recomendaciones hechas ni por supuesto en el precio a pagar.
Divi 2.4: El poder de la característica "Global" de los módulos de Divi
¿Temas WordPress Gratis o de Pago?