Skip to main content

​
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.
Pestaña Design abierta en un bloque Description, mostrando los grupos Card Style (Style, Card Background, Transparent background), Effects (Card Effect, Card Surface, Shadow) y Typography (Text Color, Font Family, Font Size)

La pestaña Design en un bloque Description, mostrando los grupos Card Style, Effects y Typography

​
Cómo acceder a las opciones de diseño

1

Seleccionar un bloque

Haga clic en un bloque en el lienzo o en la barra lateral izquierda para seleccionarlo.
2

Abrir la pestaña Design

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).
3

Ajustar una opción

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.
Menú desplegable Font Size abierto mostrando opciones de multiplicador de 0.5x a 4x, con 1x marcado como selección actual

El menú desplegable Font Size abierto en la pestaña Design de un bloque, mostrando la lista completa de multiplicadores de 0.5× a 4×

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).

​
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:
Card Surface y Shadow son anulaciones por bloque de los mismos tokens definidos globalmente en la sección Surface del tema (consulte Temas). 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).

​
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):
Pestaña Design en el bloque Event Venue mostrando Typography, Card Style, un grupo ICON con Icon colour, y Effects

La pestaña Design de Event Venue, mostrando el campo Icon colour bajo un grupo ICON

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):
Pestaña Design en el bloque Couple Names mostrando Typography, Card Style, un grupo SEPARATOR con Separator style configurado en 01 y Separator colour, y Effects

La pestaña Design de Couple Names, mostrando el grupo SEPARATOR con Separator style y Separator colour

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 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 — los tokens a nivel de página a los que recurren estas anulaciones por bloque.
  • Efectos animados — el catálogo completo detrás de las opciones Card Effect y Button Effect.
  • Referencia de bloques — qué bloques exponen una pestaña Design.