Novedad Divi 4.5.: Divi Presets, una nueva forma de construir páginas web con Divi

Lydia Calero

Diseñadora Web Freelance

Tras algunos meses sin ninguna novedad importante por culpa de este dichoso coronavirus que ha aparecido en nuestras vidas, por fin llega la versión 4.5. de Divi con una gran novedad que va a cambiar la forma de diseñar páginas web con este constructor de Elegant Themes.

Llega Divi Presets, un sistema de estilos predeterminados basado en las clases CSS.

Ahora, cuando personalicemos el estilo de un módulo, una fila o una sección podremos guardar dicho estilo como predeterminado y aplicarlo al resto de elementos de toda la web para que todos compartan la misma apariencia.

Y lo mejor de todo es que cuando modifiquemos un estilo predeterminado, todos los elementos que tengan dicho estilo aplicado cambiarán automáticamente.

¡Ole, ole!

Además, cada vez que añadamos un nuevo elemento a la página, podremos asignarle rápidamente cualquiera de los estilos predeterminados que hayamos creado y guardado previamente, en lugar de tener que editarlo desde cero.

Esta novedad supone un gran cambio en la forma de diseñar páginas web con Divi y a los que nos dedicamos a esto nos va a cambiar la vida.

¡Gracias por tanto, amigos de Elegant Themes!

Aquí tenéis un vídeo (en inglés) donde Nick Roach nos habla de los nuevos estilos predeterminados o Divi Presets.

¿Qué son los Divi Presets o estilos predeterminados?

Cada módulo de Divi viene con una gran variedad de ajustes de diseño que podemos manejar a nuestro gusto para cambiar la apariencia de dicho elemento.

Por ejemplo, podemos añadir un módulo Botón y darle un color de fondo, esquinas redondeadas o cambiar el tamaño del texto, entre otras muchas cosas.

Esta es una de las grandes ventajas de Divi: control total sobre el diseño.

Sin embargo, diseñar cientos de módulos por toda nuestra web, aplicando estilo a cada uno de ellos uno a uno o con el sistema copia-pega, llevaba mucho, mucho tiempo… hasta ahora.

Ahora, una vez aplicamos un estilo predeterminado a un módulo, el diseño por defecto es controlado por el predeterminado.

Y si hacemos cualquier cambio en dicho estilo predeterminado, todos los módulos que usen dicho estilo predeterminado se actualizarán automáticamente.

Esto nos va a permitir controlar el diseño de toda nuestra página web usando simplemente un pequeño conjunto de estilos predeterminados.

Además, ahorraremos un montón de tiempo a la hora de añadir nuevos módulos a nuestra página, ya que no tendremos que diseñar cada uno de ellos desde cero.

Solo tendremos que ir a nuestra biblioteca de estilos predeterminados y seleccionar el que queramos.

¡Maravilla!

Cómo crear estilos predeterminados

Los estilos predeterminados pueden controlarse a través del nuevo menú desplegable que encontraremos en la parte superior del panel de ajustes de cada módulo.

Para crear un nuevo estilo predeterminado, simplemente hacemos clic en “Add New Preset” (añadir nuevo estilo predeterminado) y le asignamos el nombre que queramos.

Después, usamos los ajustes de diseño disponibles para ir creando nuestro diseño predeterminado.

Cuando terminemos, guardamos nuestro estilo predeterminado y veremos que ya nos aparece disponible en el menú desplegable.

De esta forma, la próxima vez que añadamos un módulo a nuestra página, podremos seleccionar dicho estilo predeterminado y aplicarlo de forma automática, sin necesidad de tener que editar dicho módulo desde cero.

Creando nuevos estilos predeterminados a partir de elementos ya existentes

También podemos transformar elementos ya diseñados previamente en estilos predeterminados reutilizables.

Si tenemos un módulo cuyo diseño ya hemos personalizado, podemos guardar dicha personalización como un estilo predeterminado usando el botón “Create New Preset From Current Styles” (crear un nuevo estilo predeterminado a partir de estilos actuales.

Por ejemplo, si en nuestra web todos nuestros botones de llamada a la acción son iguales, ahora podemos meternos en el panel de ajustes de cualquiera de estos botones, crear un nuevo estilo predeterminado a partir de sus estilos y ya, cada vez que queramos añadir un nuevo botón a nuestra web, no tendremos que editarlo desde cero o buscar otro botón y copiar/pegar estilos.

Simplemente aplicaremos el estilo predeterminado y voilá.

Asignando estilos predeterminados por defecto

El año pasado, Divi lanzó el editor de estilos globales por defecto (Global Defaults Editor), que nos permitía personalizar la apariencia por defecto de cualquier módulo de Divi.

El nuevo sistema de estilos predeterminados (Divi Presets) va mucho más allá y sustituye a los estilos globales por defecto, permitiéndonos crear y mantener un conjunto de estilos predeterminados diferentes además de los estilos por defecto.

Todos los módulos llevan un estilo por defecto, que puede ser ajustado para cambiar la apariencia por defecto de los módulos de toda nuestra web.

Cualquiera de los estilos predeterminados puede asignarse como estilo predeterminado por defecto. Una vez lo hacemos, todos los módulos de nuestra web adoptarán la nueva apariencia por defecto.

Cuando añadamos un nuevo módulo, este usará el estilo predeterminado por defecto de forma automática.

Si tenías estilos globales aplicados en tu web, no te preocupes porque se migrarán al nuevo estilo por defecto predeterminado cuando actualices a la nueva versión.

Cómo editar estilos predeterminados ya existentes

También podemos cambiar el diseño de un estilo predeterminado ya guardado.

Cuando editemos un estilo predeterminado, la apariencia de todos los módulos que usen dicho estilo se actualizarán automáticamente en toda la web.

Para editar un estilo predeterminado, simplemente hacemos clic en el icono de lapiz que encontraremos dentro del menú desplegable.

Así que ahora podemos diseñar páginas web con Divi de forma mucho más rápida y sencilla.

Sin duda, esta novedad es un gran avance en la metodología de diseño de Divi y una gran ventaja para todos los que usamos este constructor visual.

¡Qué alegría!

Cómo funciona la interfaz de los estilos predeterminados

Todos los estilos predeterminados pueden controlarse dentro del menú desplegable de estilos predeterminados.

Aquí podemos crear nuevos estilos predeterminados y gestionar los ya existentes.

Vamos a ver cada una de las opciones con más detalle:

divi-presets-interfaz

1. Menú desplegable: aquí podemos ver todos los estilos predeterminados activos del módulo. Para verlos, simplemente hacemos clic.

2. Default Preset (estilo predeterminado por defecto): este es el estilo predeterminado por defecto. Si queremos activarlo, lo seleccionamos.

3. Estilo predeterminado asignado: esta estrella nos indica qué estilo predeterminado es el estilo predeterminado por defecto. Todos los módulos básicos usarán este estilo por defecto. Si queremos que sea el estilo predeterminado por defecto, hacemos clic en la estrella.

4. Estilo predeterminado seleccionado: el símbolo check verde nos indica qué estilo predeterminado está asignado al módulo que estamos editando. Los estilos base del módulo están controlados por el estilo predeterminado seleccionado.

5. Editar un estilo predeterminado: para editar un estilo predeterminado hacemos clic en el icono de lápiz. Cuando editemos el diseño de un estilo predeterminado, los cambios que hagamos se aplicarán automáticamente a todos los módulos que usen ese estilo.

6. Gestionar los ajustes del estilo predeterminado (icono tuerca): aquí podemos cambiar el nombre del estilo predeterminado para diferenciarlos mejor unos de otros y tener nuestra biblioteca de estilos bien organizada.

7. Actualizar los estilos del estilo predeterminado: si hacemos clic en este símbolo, el estilo predeterminado se actualizará para adaptarse al diseño del módulo que estemos editando.

8. Duplicar el estilo predeterminado: podemos duplicar cualquiera de los estilos predeterminados existentes. Esto nos permite crear diferentes variaciones sin necesidad de tener que empezar desde cero.

9. Borrar un estilo predeterminado: si borramos un estilo predeterminado, desaparecerá de la biblioteca y todos los módulos que lo tuvieran aplicado tomarán el estilo predeterminado por defecto.

10. Crear un nuevo estilo predeterminado a partir de los estilos actuales: si nos gusta cómo nos está quedando el diseño del módulo y queremos usarlo para otros, simplemente hacemos clic en este botón para convertir dicho diseño en un estilo predeterminado y guardarlo para poder utilizarlo siempre que queramos.

11. Añadir un nuevo estilo personalizado: si hacemos clic aquí, se creará un estilo predeterminado totalmente nuevo y en blanco, listo para que lo editemos utilizando los ajustes de diseño disponibles.

¿Qué te parece esta novedad? ¿Vas a utilizar los estilos predeterminados en tus diseños con Divi? ¡Yo desde luego que sí!

Y si te ha gustado el post, anímate a compartirlo en redes sociales 🙂.

Imágenes y vídeos: Elegant Themes.

Soy Lydia Calero y ayudo a pymes y emprendedores autónomos a conseguir una página web atractiva y eficaz para su negocio. Estoy especializada en el diseño de páginas web con WordPress y Divi, tema Premium de Elegant Themes, la combinación perfecta para crear sitios web espectaculares. Pídeme presupuesto sin compromiso para diseñar tu página web con WordPress y Divi. Te lo enviaré en menos de 24/48 horas, totalmente a la medida y adaptado a tus necesidades específicas.

¿Te ha resultado útil este artículo?

Average rating / 5. Vote count:

¡Aún no hay votos! Sé el primero en valorar este artículo

¡Siento mucho que el post no te haya resultado útil!

¡Ayúdame a mejorarlo!

¿Cuáles son tus sugerencias para mejorar este post?

8 trucos infalibles para triunfar con tu página web

Descubre las claves para conseguir una página web que te ayude a atraer nuevos clientes, multiplicar tus resultados y destacar sobre tu competencia.

También podría gustarte…

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

tres × 3 =

Información básica sobre protección de datos Ver más

  • Responsable Lidia Calero Jimenez.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  LUCUSHOST.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Share This
¡Hey! La ley me obliga a informarte de que esta web utiliza deliciosas cookies para asegurarte una mejor experiencia de usuario. Puedes leer más sobre el tema o aceptarlas para seguir navegando tan ricamente.    Leer más
Privacidad