El panel de opciones es una de las herramientas principales para configurar y personalizar los elementos dentro de Divi 5. Mientras que los controles contextuales permiten realizar acciones rápidas sobre los elementos, el panel de opciones proporciona acceso a la configuración detallada de cada sección, fila, columna o módulo.
Dominar este panel es fundamental para aprovechar realmente las posibilidades de Divi 5, ya que prácticamente cualquier aspecto del contenido y del diseño puede configurarse desde sus diferentes opciones.
El panel de opciones es el espacio desde el que puedes configurar el elemento seleccionado dentro del builder.
Cuando seleccionas un módulo, por ejemplo, puedes acceder a sus opciones para modificar tanto su contenido como su apariencia.
Dependiendo del elemento seleccionado, el panel mostrará diferentes configuraciones. No tiene sentido que una imagen y una fila tengan exactamente las mismas opciones, por lo que Divi adapta el contenido del panel al contexto.
De esta forma, el panel se convierte en el centro de configuración de los diferentes componentes que forman una página.
Las opciones disponibles dependen del tipo de elemento, pero normalmente permiten controlar diferentes aspectos relacionados con el contenido, el diseño y el comportamiento.
Entre las posibilidades más habituales se encuentran:
La combinación de todas estas opciones permite crear diseños muy diferentes utilizando los mismos módulos.
El panel de opciones cambia en función del componente que estés editando.
Por ejemplo, un módulo de imagen puede ofrecer opciones relacionadas con:
En cambio, un módulo de botón tendrá opciones relacionadas con el texto del botón, su enlace, colores, tipografía y diferentes aspectos visuales.
Las filas y secciones, por su parte, dispondrán de opciones relacionadas principalmente con su estructura, dimensiones, fondos y espaciado.
Una de las ideas fundamentales al trabajar con Divi es diferenciar entre el contenido y el diseño.
El contenido determina qué información se muestra, mientras que el diseño determina cómo se presenta visualmente.
Por ejemplo, en un módulo de texto puedes escribir:
Solicita información sin compromisoy posteriormente decidir que ese texto aparezca con una determinada tipografía, tamaño, color, alineación y espaciado.
Esta separación facilita modificar la apariencia sin tener que cambiar el contenido.
Las opciones de diseño permiten personalizar la apariencia de cada elemento.
Dependiendo del módulo, pueden incluir controles relacionados con:
Estas opciones permiten conseguir desde diseños sencillos y minimalistas hasta composiciones visuales mucho más elaboradas.
Dos de los conceptos que más utilizarás dentro del panel de opciones son el margen y el padding.
El margen controla el espacio exterior de un elemento, mientras que el padding controla el espacio interior entre el contenido y los límites del elemento.
Una representación sencilla sería:
┌───────────────────────────┐
│ Margen │
│ ┌───────────────────┐ │
│ │ Padding │ │
│ │ Contenido │ │
│ └───────────────────┘ │
│ │
└───────────────────────────┘Comprender esta diferencia es fundamental para evitar utilizar elementos adicionales únicamente para generar espacios.
Una de las características más importantes del panel de opciones es la posibilidad de adaptar diferentes propiedades a distintos dispositivos.
Una misma configuración puede necesitar valores diferentes en escritorio, tablet y móvil.
Por ejemplo, un título puede utilizar un tamaño grande en ordenador y uno más reducido en móvil.
También puede ser necesario modificar:
El objetivo no es crear tres diseños completamente diferentes, sino adaptar el mismo diseño para que funcione correctamente en cada dispositivo.
Además de las configuraciones visuales, Divi permite acceder a opciones avanzadas para controlar aspectos más técnicos del elemento.
Dependiendo del componente, estas opciones pueden utilizarse para trabajar con:
Estas herramientas son especialmente útiles cuando necesitas ir más allá de las opciones estándar del builder.
Divi ofrece una gran cantidad de controles visuales, por lo que muchas modificaciones pueden realizarse directamente desde el panel sin necesidad de escribir CSS.
El CSS personalizado debería utilizarse cuando realmente aporta una solución que no resulta práctica mediante las opciones disponibles.
Por ejemplo, puede ser útil para crear determinados efectos, ajustar comportamientos específicos o aplicar estilos personalizados a elementos concretos.
Utilizar CSS para cada pequeño cambio puede generar una estructura difícil de mantener, especialmente en proyectos grandes.
Los presets permiten evitar que tengas que configurar manualmente los mismos estilos una y otra vez.
Por ejemplo, si todos los botones de una web deben tener una determinada tipografía, color, borde y tamaño, puedes definir un estilo común y aplicarlo a diferentes botones.
Esto convierte el panel de opciones en una herramienta no solo para editar elementos individuales, sino también para construir un sistema de diseño coherente.
Los presets se estudiarán con detalle en el bloque dedicado al sistema de diseño de Divi 5.
Una buena práctica consiste en modificar únicamente las propiedades necesarias.
Si un módulo ya tiene una configuración correcta y únicamente necesitas cambiar su tamaño, no es necesario modificar simultáneamente la tipografía, los colores, el espaciado y otras propiedades.
Cuantos menos cambios innecesarios realices, más fácil será mantener una configuración coherente.
Imagina que tienes un título que aparece demasiado grande en móvil.
En lugar de crear un segundo título exclusivamente para teléfonos, puedes utilizar las opciones responsive del panel para establecer un tamaño diferente en dispositivos pequeños.
De esta forma mantienes un único elemento:
Título
├── Escritorio: tamaño grande
├── Tablet: tamaño intermedio
└── Móvil: tamaño reducidoEsto simplifica la estructura de la página y facilita su mantenimiento.
Es importante recordar que el panel de opciones funciona sobre el elemento que hayas seleccionado.
Si seleccionas una sección, las modificaciones pueden afectar a una zona completa. Si seleccionas una fila, afectarán a la estructura de esa fila. Si seleccionas un módulo, afectarán únicamente a ese módulo.
Por este motivo, antes de modificar una propiedad conviene comprobar qué nivel de la estructura estás editando.
Al comenzar a trabajar con Divi es frecuente utilizar demasiadas configuraciones manuales. Esto puede provocar que cada módulo termine teniendo un estilo diferente.
Otros errores habituales son:
Para trabajar de forma eficiente con el panel de opciones de Divi 5 es recomendable:
Un flujo de trabajo eficiente puede combinar los diferentes sistemas que ofrece Divi:
Este proceso permite trabajar de forma ordenada y evita realizar cambios aleatorios que posteriormente puedan resultar difíciles de mantener.
El panel de opciones de Divi 5 es el centro de configuración de los elementos que forman una página. Desde él puedes controlar el contenido, diseño, espaciado, responsive y diferentes aspectos avanzados de secciones, filas, columnas y módulos.
La clave para utilizarlo correctamente no está en modificar todas las opciones disponibles, sino en saber qué propiedad necesitas cambiar y en qué nivel de la estructura debes hacerlo.
Cuando combines el panel de opciones con los controles contextuales, el sistema de arrastrar y soltar y los presets, tendrás una base sólida para trabajar de forma rápida, ordenada y profesional con Divi 5.
Rellena la mayor cantidad de datos posibles y acepta las políticas de privacidad para obtener más información de nuestros servicios:
© 2009-2025 webkamy diseño de páginas web y seo
