Marca

La marca es la capa visual de tu sitio web — los colores, las tipografías, el logo en el encabezado, el icono en la pestaña del navegador. La defines una vez en Website Builder → Settings → Theme, y cada página de tu sitio público (más el formulario de donación, el formulario de visitante, el reproductor de sermones y todos los bloques que respetan el tema) la toma.

TIP

El mismo tema impulsa los flujos embebidos /give y /visitor. Así que cuando defines tu color principal aquí, el botón de donación en un sitio de terceros también lo toma — por eso el formulario de donación de GCM se ve como tu iglesia y no como GCM.

Colores

Hay cinco colores principales y tres avanzados. La mayoría de equipos solo toca los cinco principales.

Paleta principal

• Primary — el color principal de la marca. Botones, enlaces, acentos. Si solo defines un color, define este.
• Secondary — usado para botones menos prominentes y la segunda mitad de los gradientes. Elige algo que funcione junto a primary, no en contra.
• Accent — color de resalte para llamados, insignias y estados hover.
• Background — el fondo de la página. La mayoría de iglesias lo deja #ffffff o casi blanco.
• Text — color del texto del cuerpo. Generalmente un gris oscuro (#1f2937) en lugar de negro puro para una lectura más suave.

Colores avanzados

Escondidos detrás de una sección expandible para que el panel se mantenga accesible:

• Heading colour — sobrescribe el color del texto para h1–h6 si quieres encabezados más oscuros (o en un color de marca) que el texto del cuerpo.
• Link colour / Link hover colour — por defecto es tu primary, pero puedes cambiarlos si los enlaces necesitan ser más visibles contra un fondo de color.

Haz clic en cualquier muestra de color para abrir el selector, o pega un código hexadecimal directamente (#3b82f6). Los cambios se previsualizan en vivo en el panel derecho — pero aún tienes que hacer clic en Save theme abajo para que se envíen al sitio público.

Tipografías

Elige una tipografía para encabezados y una para el cuerpo desde el dropdown. Hay 32 opciones servidas por Google Fonts que van desde clásicas (Inter, Roboto, Open Sans) hasta display (Bebas Neue, Syncopate, Archivo Black) y serif (Playfair Display, Cormorant Garamond, Source Serif 4).

Algunas combinaciones que funcionan bien:

• Atrevida + legible — Bebas Neue (encabezado) + Inter (cuerpo).
• Editorial — Playfair Display (encabezado) + Source Serif 4 (cuerpo).
• Cálida + moderna — Fraunces (encabezado) + DM Sans (cuerpo).
• Minimal — Inter + Inter.

Cuando cambias una tipografía, todos los bloques que respetan el tema la toman — sin sobrescrituras por bloque.

Logo

Sube un PNG, SVG o JPG. El logo aparece en el encabezado de cada página (alineado a la izquierda por defecto — configurable en Header & Footer) y como la imagen Open Graph por defecto al compartir en redes si no defines una explícitamente en SEO.

• Tamaño recomendado: 300px de ancho mínimo, fondo transparente, SVG preferido.
• Haz clic en Choose from library para reutilizar un recurso que ya subiste.
• No te preocupes por dimensiones pixel-perfect — el encabezado escala la imagen al ajuste.

Si no subes un logo, el encabezado recurre al nombre de tu organización como texto, con el estilo de tu tipografía de encabezado.

Favicon

El pequeño icono en la pestaña del navegador. La mayoría de iglesias usa una versión simplificada de su logo — una sola letra, un símbolo, la cruz. Sube un .ico, .png o .svg.

• Tamaño máximo del archivo: 100 KB. El cargador rechaza cualquier cosa más grande.
• Recomendado: PNG de 32×32 o 64×64 con fondo transparente.

El favicon también se usa como icono de pantalla de inicio en iOS/Android cuando alguien hace "Agregar a la pantalla de inicio" de tu sitio.

Subtítulo / eslogan de marca

Esto no está en la pestaña Theme — se define en cada página individual bajo Header & Footer settings. El encabezado puede mostrar el nombre de tu organización con un subtítulo opcional debajo (ej. "Grace City Church" / "Donde el cielo se encuentra con la tierra"). Mantén el subtítulo corto — menos de 50 caracteres funciona mejor.

Para el héroe de la página de inicio, el titular y el subtítulo son parte del bloque Hero banner mismo, no del tema global. Consulta Catálogo de bloques.

Estilo de animación, estilo de tarjeta, superposición de textura

Tres perillas globales de sensación en la parte inferior del panel Theme:

• Animation style — Subtle (fade-up suave al hacer scroll, el valor por defecto), Dynamic (movimiento más grande, más rápido) o None (todo aparece al instante). Afecta a cada bloque que opte por animaciones de entrada. Las sobrescrituras por bloque están disponibles en las props Puck de cada bloque.
• Card style — Flat, Elevated (sombra), Bordered o Glass (efecto de vidrio esmerilado). Maneja la apariencia de las tarjetas en Blog feed, Sermon feed, Staff directory, Testimonials.
• Texture overlay — None, Grain, Dots o Lines. Aplica una superposición sutil a toda la página. La mayoría de equipos lo deja apagado — es un toque agradable en diseños minimalistas.

Guardar

Haz clic en Save theme en la parte inferior del panel. Los cambios se envían al sitio público inmediatamente — no hay un paso de publicación separado para cambios de tema (a diferencia de las páginas, que tienen su propio estado de borrador/publicado en Publicación + borradores).

WARNING

Si tu sitio está en vivo y cambias el color principal, cada visitante ve el nuevo color en la próxima carga de página. No hay una vista previa antes de publicar para el tema — la diferencia va directo a producción. Si quieres probar un color sin comprometerte, vuelve a poner el hex viejo si no te gusta.

Dónde se guarda esto

El tema vive como un objeto JSON en tu fila de org_sites. Las configuraciones de header / footer viven junto a él. Nada de esto es por página — es una única fuente de verdad para todo tu sitio.

Consulta también: Visión general del Constructor de Sitios Web, Dominio personalizado, Formulario de visitante.