> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Opciones de diseño
> Personalización visual por bloque mediante la pestaña Design.
## Qué son las opciones de diseño
La mayoría de los bloques tienen una pestaña **Design** en el inspector de la derecha. Las opciones de diseño le permiten anular el estilo visual de un solo bloque sin cambiar el resto de la página. Cuando un campo de diseño se deja vacío (mostrando "Theme default"), el bloque hereda su valor del tema activo.
## Cómo acceder a las opciones de diseño
Haga clic en un bloque en el lienzo o en la barra lateral izquierda para seleccionarlo.
En el panel derecho, haga clic en la pestaña **Design**. (Si un bloque no tiene ningún estilo visual que anular, esta pestaña aparece deshabilitada — por ejemplo, Footer, Menu y Contact Details no tienen pestaña Design en absoluto).
El lienzo se actualiza en tiempo real.
Para restablecer un campo a su valor predeterminado del tema, bórrelo (o vuelva a seleccionar "Theme default" en su menú desplegable).
## Typography
Las opciones de estilo de texto aparecen en bloques que contienen texto de párrafo, encabezados o etiquetas — Page Title, Description, Event Schedule, Event Venue, Couple Names, entre otros.
| Opción | Descripción |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text color | Anula el color del texto del bloque. Déjelo vacío para usar el color de primer plano del tema. |
| Font family | Anula la tipografía de este bloque. Acepta cualquier fuente del selector. |
| Font size | Un **multiplicador** de tamaño continuo, no una escala Small/Medium/Large: **0.5×, 0.75×, 1×, 1.25×, 1.5×, 2×, 2.5×, 3×, 3.5×, 4×**. 1× es el tamaño predeterminado del tema para ese texto. |
Font Size **no** es una escala con nombre (Small/Medium/Large/Extra Large). Es un multiplicador numérico aplicado al tamaño base del tema para ese elemento de texto — elija 1× para mantener el valor predeterminado del tema, o un multiplicador mayor/menor para escalarlo hacia arriba o hacia abajo.
## Card style
Las opciones de estilo de tarjeta controlan la apariencia del contenedor de un bloque. Aparecen juntas en cualquier bloque con presencia visual de tarjeta (Description, Coupon Details, About Us, Brand Info y la mayoría de los demás).
| Opción | Descripción |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Style (a veces etiquetado como "Appearance") | Elija **Card** (un panel encajado con borde y sombra) o **Full width** (sin margen exterior — el bloque ocupa todo el ancho del contenido). |
| Card Background | Anula el color de fondo de la tarjeta del bloque. Déjelo vacío para usar el color de superficie del tema. No tiene efecto visible cuando Transparent background está activado. |
| Transparent background | Fuerza un fondo completamente transparente para este bloque, en lugar del color de superficie del tema — funciona con cualquier valor de Style. |
## Effects (por bloque)
Además de Card Background, la mayoría de los bloques basados en tarjetas exponen tres anulaciones más bajo un grupo **Effects** en la pestaña Design:
| Opción | Descripción |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Card Effect | Elija "Theme default" para heredar el efecto de tarjeta del tema, o anúlelo solo para este bloque — consulte [Efectos animados](/es/page-builder/animated-effects) para ver el catálogo completo. |
| Card Surface | Anula el material de la tarjeta (predeterminado en "Theme default") — refleja el control "Card material" de la sección Surface a nivel de tema, expuesto aquí por bloque. |
| Shadow | Anula la variante de sombra usada en la tarjeta de este bloque (predeterminada en "Theme default") — refleja el control de sombra de la sección Surface a nivel de tema. |
**Card Surface** y **Shadow** son anulaciones por bloque de los mismos tokens definidos globalmente en la sección **Surface** del tema (consulte [Temas](/es/page-builder/themes)). Configurarlos aquí afecta solo al bloque seleccionado; el resto de la página sigue usando los valores del tema.
## Button styles
Las opciones de estilo de botón aparecen en el bloque **Button** y en bloques con un botón integrado (Map, File Download).
| Opción | Descripción |
| ------------- | --------------------------------------------------------------------------------------------------------- |
| Button color | Color de fondo del botón |
| Border color | Color del borde del botón |
| Corner radius | Un selector de 5 opciones preestablecidas — **None, S, M, L, Full** — no un valor de píxeles sin procesar |
| Border width | Grosor del borde del botón en píxeles. Configure en 0 para eliminar el borde. |
## Icon styles
Las opciones de estilo de icono aparecen en bloques que muestran un icono decorativo. Confirmado en producción en el bloque **Event Venue** (páginas de Wedding/Event):
| Opción | Descripción |
| ----------- | ---------------------------------- |
| Icon colour | Color aplicado al icono del bloque |
No todos los bloques con icono tienen este control — por ejemplo, Contact Us muestra iconos pero no tiene ninguna anulación de Icon colour en su pestaña Design.
## Separator styles
Las opciones de estilo de separador aparecen en bloques que incluyen una línea decorativa integrada. Confirmado en producción en el bloque **Couple Names** (páginas de Wedding):
| Opción | Descripción |
| ---------------- | ---------------------------------------------------- |
| Separator style | Elige el diseño visual del separador (estilos 01–09) |
| Separator colour | Color de la línea separadora |
Estas se diferencian del bloque independiente **Separator** — son líneas decorativas integradas en bloques específicos.
## Efectos a nivel de página
Muchos bloques permiten, en su grupo Effects, anular únicamente para sí mismos el efecto de fondo, tarjeta o botón predeterminado del tema. Consulte [Efectos animados](/es/page-builder/animated-effects) para ver la lista completa y cómo definir los valores predeterminados a nivel de tema.
## Precedencia
Las opciones de diseño siguen este orden de prioridad (de mayor a menor):
1. Configuración de la pestaña Design por bloque (si está definida)
2. Anulación de tema a nivel de página (en el panel Customise del selector de temas)
3. Valor predeterminado del tema preestablecido
Un campo vacío en la pestaña Design significa "usar el valor del tema". Un campo con valor lo anula solo para ese bloque.
## Consejos
* Use las anulaciones por bloque con moderación. Anular demasiados bloques individualmente hace que la página se vea inconsistente. Aplique la mayor parte de la personalización a través del tema, y reserve las anulaciones por bloque para casos puntuales.
* Para resaltar un solo bloque Button, dele un color de botón distintivo dejando el resto de los bloques con los valores predeterminados del tema.
* Si quiere que un bloque destaque — para una sección destacada o información importante — configure su Card Background explícitamente en lugar de cambiar todo el tema.
## Relacionado
* [Temas](/es/page-builder/themes) — los tokens a nivel de página a los que recurren estas anulaciones por bloque.
* [Efectos animados](/es/page-builder/animated-effects) — el catálogo completo detrás de las opciones Card Effect y Button Effect.
* [Referencia de bloques](/es/page-builder/blocks-reference) — qué bloques exponen una pestaña Design.