Configuraciones de Diseño de Divi y Configuraciones Avanzadas del Módulo

Configuraciones de Diseño de Divi y Configuraciones Avanzadas del Módulo

Configuraciones de Diseño de Divi y Configuraciones Avanzadas del Módulo

Puedes personalizar absolutamente todo sobre cualquier módulo utilizando las configuraciones avanzadas de diseño.


Siempre que edites un Módulo, Fila o Sección, notarás que en la ventana emergente de configuración hay tres pestañas:

  • Pestaña Contenido

  • Pestaña Diseño

  • Pestaña Avanzado


Pestaña Contenido

Todo lo que necesitas para crear increíbles diseños en Divi y aprovechar al máximo cada módulo se encuentra en la pestaña Contenido.

Sin embargo, si deseas tener aún más control sobre la apariencia del módulo, puedes ir a la pestaña Diseño. Si eres desarrollador y prefieres usar tu propio código CSS en lugar de los controles de diseño que ofrece la pestaña  Diseño, puedes ir aún más allá entrando en la pestaña Avanzado.Cuando se usan juntas, no hay nada que no se pueda personalizar.

Pestaña Diseño

Las configuraciones de diseño varían de un módulo a otro.

Hemos incorporado todas las opciones de diseño posibles que podrías necesitar dentro de la pestaña Diseño.

Debido a la gran cantidad de configuraciones disponibles en ciertos módulos, estas se han organizado en menús desplegables con etiquetas, lo que permite alternar fácilmente entre los distintos grupos de opciones.

También encontrarás un cuadro de búsqueda muy práctico en la parte superior, que facilita encontrar rápidamente una opción de diseño específica.

Para localizar y utilizar las configuraciones de diseño: Edita un módulo, fila o sección existente (o crea uno nuevo), se abrirá la ventana emergente de configuración, haz clic en la pestaña Diseño para desplegar todas las opciones de personalización visual.

Desde esta pestaña, puedes hacer prácticamente de todo. Las configuraciones disponibles variarán dependiendo del tipo de módulo que estés editando.
Normalmente encontrarás opciones para ajustar:
  • Tipografía: tamaño del texto, espaciado entre letras, altura de línea, etc.
  • Espaciado: valores personalizados de margen y relleno (padding)
  • Colores: color del texto, color de superposición, colores de fondo de columnas, entre otros
  • Además, encontrarás una gran cantidad de ajustes únicos para elementos específicos según el módulo
Aprovechar todas estas opciones de diseño te permite crear algo verdaderamente único y personalizado.

Pestaña Avanzada

En la pestaña Avanzada, puedes agregar un ID de CSS personalizado o una clase CSS para aplicar tu propio código CSS desde el archivo style.css de tu tema hijo.

Si deseas evitar la necesidad y complicación de crear temas hijos, puedes aplicar CSS directamente a módulos individuales en páginas específicas utilizando las opciones del menú desplegable CSS Personalizado.

Aquí hemos desglosado todos los elementos estructurales del módulo y te ofrecemos campos de texto donde puedes escribir directamente tus propias propiedades CSS.

Puedes aplicar CSS a partes específicas del módulo desde este panel.
Por ejemplo: Aplicar CSS personalizado directamente a un ícono de módulo Blurb, crear un pseudo-elemento ::after directamente desde el Constructor Visual de Divi

También puedes controlar la visibilidad de un elemento (sección, fila, módulo) utilizando la opción Visibilidad, o modificar el comportamiento del elemento, como hacer que sea sticky (pegajoso) en la página, entre muchas otras funciones.

    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • El módulo de suscripción por correo electrónico de Divi

      Cómo agregar, configurar y personalizar el módulo de suscripción por correo electrónico de Divi <br> El módulo de suscripción por correo electrónico de Divi simplifica el proceso de aumentar tus suscriptores de correo electrónico al ...
    • El sistema de gestión de colores de Divi

      Cómo usar las opciones avanzadas de color de Divi. El sistema de gestión de colores de Divi ha evolucionado a lo largo de los años para convertirse en uno de los sistemas de color más robustos en el universo de WordPress. El sistema de colores de ...
    • El Módulo de Totales del Carrito Woo de Divi

      Cómo agregar, configurar y personalizar el módulo de Totales del Carrito Woo de Divi. El Módulo Totales del Carrito Woo de Divi muestra el precio total de los productos añadidos al carrito. Usa este módulo en el diseño de la página del carrito de Woo ...
    • El Módulo de Descripción del Producto de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de descripción de producto de Divi Woo. El Módulo de Descripción del Producto de Divi Woo te permite colocar descripciones de productos en cualquier lugar de tu sitio web. El módulo de descripción del ...
    • El módulo de productos del carrito Divi Woo

      Cómo agregar, configurar y personalizar el módulo de productos del carrito Divi Woo. El módulo Divi Woo Productos del Carrito se integra perfectamente con WooCommerce. Este módulo puede añadirse al diseño de la página del Carrito Woo y/o a una ...