Personalizar módulo texto y diseño avanzado en Divi

El creador de páginas Divi es una herramienta poderosa que te permite crear sitios web visualmente atractivos sin necesidad de ser un experto en codificación. Sin embargo, si quieres destacar y crear diseños únicos que realmente llamen la atención, es importante aprender a aprovechar las funciones avanzadas de personalización que Divi ofrece. En esta lección, te enseñaremos cómo llevar tus diseños en Divi al siguiente nivel utilizando ajustes avanzados como la personalización de fuentes, colores, espaciado, CSS personalizado, y efectos visuales como sombras, transformaciones y animaciones.

1. Personalización de Fuentes, Colores y Espaciado

Una de las primeras áreas clave donde puedes personalizar tu diseño en Divi es en las opciones básicas de tipografía, color y espaciado. Estas configuraciones te permiten modificar la apariencia general de tu sitio, manteniendo un diseño consistente y atractivo.

1.1 Fuentes

La tipografía juega un papel crucial en el diseño web, ya que afecta tanto la legibilidad como el estilo visual de tu sitio. Divi ofrece amplias opciones para ajustar las fuentes de cualquier texto en tu página.

¿Cómo ajustar las fuentes en Divi?

• Selecciona el texto: Haz clic en cualquier módulo que contenga texto y dirígete a la pestaña «Diseño».
• Opciones de tipografía: Desde allí, puedes modificar el tipo de letra (elige entre cientos de opciones de Google Fonts), el tamaño, el grosor, el estilo (negrita, cursiva, subrayado), la altura de línea, el espaciado entre letras, y la alineación.
• Estrategias para mejorar el diseño: Puedes utilizar una fuente más gruesa y llamativa para los títulos (como una fuente «display») y una fuente más ligera y legible para los cuerpos de texto.

1.2 Colores

Los colores que utilizas en tu diseño también son fundamentales, ya que pueden transmitir el tono y la personalidad de tu marca. Un buen esquema de colores puede hacer que tu sitio se vea más cohesivo y atractivo.

Cómo cambiar los colores en Divi

• Personalización de colores: Dirígete a la pestaña «Diseño» de cualquier módulo. Allí encontrarás las opciones de color. Puedes personalizar los colores de fondo, texto, botones, bordes, entre otros.
• Consejos sobre el uso del color: Asegúrate de usar una paleta de colores coherente para reflejar el estilo de tu marca. Un esquema de tres o cuatro colores bien combinados hará que tu página sea visualmente atractiva sin ser abrumadora.
• Ejemplo: Puedes optar por un fondo claro y texto oscuro para una apariencia limpia y profesional, o un fondo oscuro y texto brillante para algo más dramático. Recuerda que el contraste es clave para la legibilidad.

1.3 Espaciado

El espaciado, tanto en márgenes como en rellenos (padding), es una de las herramientas más útiles para organizar visualmente tu contenido y evitar un diseño sobrecargado.

Cómo ajustar el espaciado en Divi

• Margen vs. Padding: El margen es el espacio exterior de un módulo o sección, mientras que el padding es el espacio interior, es decir, el espacio entre el contenido de un módulo y sus bordes.

• Acceso a las opciones de espaciado: Al igual que las fuentes y los colores, las opciones de espaciado están disponibles en la pestaña de «Diseño» de cada módulo, fila o sección.
• Recomendaciones de diseño: Mantén suficiente espacio entre secciones para evitar que tu página se sienta apretada. El uso adecuado del espaciado puede hacer que tu diseño se sienta más aireado y fácil de leer.

2. Uso de CSS Personalizado en Divi

Aunque Divi tiene muchas opciones integradas para personalizar tu diseño, si buscas más flexibilidad y control, el uso de CSS personalizado puede ser tu mejor aliado. No es necesario ser un experto en CSS, pero conocer algunos conceptos básicos te permitirá añadir estilos únicos a tu sitio web.

2.1 ¿Cómo añadir CSS personalizado?

Cada módulo, fila o sección de Divi tiene una pestaña de «Avanzado», donde puedes insertar tu propio código CSS. Esto te permite personalizar partes específicas de tu diseño que no podrías modificar a través de las opciones visuales estándar.

Pasos para añadir CSS personalizado

• Accede a la pestaña de «Avanzado»: Haz clic en el módulo, fila o sección que deseas modificar y dirígete a la pestaña «Avanzado». Allí verás campos específicos para insertar CSS, como el «Elemento principal», «Antes» o «Después».
• Propiedades básicas de CSS: Puedes añadir propiedades como background-color, font-size, padding, entre muchas otras. Estas propiedades te permiten hacer ajustes más detallados, como cambiar el color de un botón al pasar el ratón sobre él, ajustar el espaciado, o modificar la apariencia de los bordes.

Ejemplo de CSS personalizado simple

Si deseas que un botón cambie de color cuando el usuario pasa el ratón por encima, puedes agregar lo siguiente:

cssCopiar código.et_pb_button:hover {
  background-color: #3498db;
  color: #ffffff;
}

Este código hará que el botón cambie a un color azul (con el texto en blanco) cuando se produzca el efecto hover.

2.2 Ventajas de usar CSS en Divi

El uso de CSS en Divi te proporciona un nivel de personalización que las opciones visuales no pueden ofrecer. Con CSS, puedes crear efectos únicos, ajustar elementos a nivel detallado y dar un toque profesional y distintivo a tu diseño.

Ejemplos adicionales de CSS personalizado

• Sombras de caja (box-shadows): Añade sombras personalizadas alrededor de cualquier módulo para darle más profundidad y un estilo moderno. Ejemplo:

cssCopiar código.et_pb_text_module {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

• Efectos hover personalizados: Haz que una imagen gire cuando el ratón pasa sobre ella:

cssCopiar código.et_pb_image:hover {
  transform: rotate(10deg);
  transition: all 0.3s ease;
}

3. Efectos Avanzados: Sombras, Transformaciones y Animaciones

Para darle ese toque especial y profesional a tu página, Divi incluye una serie de efectos avanzados que puedes aplicar a tus módulos y secciones. Estos efectos pueden transformar tu diseño estático en una experiencia dinámica y visualmente atractiva para tus usuarios.

3.1 Sombras

Las sombras son una manera sencilla pero efectiva de dar profundidad a los elementos de tu página, haciéndolos parecer más dinámicos y atractivos.

Cómo añadir sombras en Divi

• Acceso a las sombras: Ve a la pestaña «Diseño» de cualquier módulo y selecciona la opción de «Sombra». Allí encontrarás diferentes configuraciones para ajustar la dirección, el color, la distancia y el desenfoque de la sombra.
• Recomendaciones de uso: Usa sombras ligeras para dar una sensación de profundidad sin hacer que el diseño se vea pesado. Las sombras muy oscuras o pronunciadas pueden hacer que el diseño parezca desordenado o anticuado.

Ejemplo práctico

Para un botón o cuadro de texto, una sombra suave en tonos grises puede hacer que parezca que «flota» sobre la página, lo que le da un toque más moderno.

3.2 Transformaciones

Las transformaciones te permiten modificar visualmente cualquier módulo, como cambiar su tamaño, rotarlo, o moverlo, de una manera visualmente atractiva e interactiva.

Cómo usar las transformaciones en Divi

• Acceso a las transformaciones: Desde la pestaña «Diseño», encontrarás la opción de «Transformación». Aquí puedes rotar, escalar, mover y sesgar elementos según sea necesario.
• Estrategia de uso: Usa las transformaciones con moderación para evitar que el diseño se vea sobrecargado. Por ejemplo, puedes hacer que una imagen gire ligeramente cuando el usuario pasa el ratón sobre ella, o que un botón aumente de tamaño ligeramente cuando se hace clic.

Ejemplo de uso de transformaciones

Imagina una galería de imágenes. Puedes hacer que las imágenes crezcan o se desplacen cuando el usuario las selecciona, creando una experiencia más interactiva y visualmente atractiva.

3.3 Animaciones

Las animaciones son una manera genial de guiar la atención del usuario hacia elementos específicos de la página. Con Divi, puedes hacer que los elementos entren de manera suave, deslicen, se desvanezcan o giren, añadiendo dinamismo a tu diseño.

Cómo aplicar animaciones en Divi

• Opciones de animación: Desde la pestaña «Diseño», encontrarás la opción de «Animación». Aquí puedes elegir cómo quieres que un módulo entre en la página