Saltar al contenido principal

Apariencia

La página de Apariencia te permite personalizar el aspecto general de tu sitio web de la iglesia. Desde colores y fuentes hasta espaciado y CSS personalizado, puedes controlar cada aspecto visual de tu sitio desde un solo lugar.

Antes de Comenzar

  • Completa la Configuración Inicial de tu sitio web
  • Ten listo el logotipo de tu iglesia en formato PNG con fondo transparente y una relación de aspecto de 4:1
  • Conoce los colores de marca de tu iglesia (valores hexadecimales) si tienes una guía de estilo existente

Acceder a la Configuración de Apariencia​

  1. En B1 Admin, haz clic en Sitio Web en el menú izquierdo.
  2. Haz clic en la pestaña Apariencia en la parte superior de la vista de Páginas del Sitio Web.
  3. La página de Estilos del Sitio se carga con una vista previa en vivo de tu sitio web a la izquierda y las opciones de Configuración de Estilo a la derecha.

Paleta de Colores​

  1. Haz clic en Paleta de Colores en el panel de Configuración de Estilo.
  2. Verás Colores Base (tonos claro, de acento y oscuro) y Colores Semánticos (Primario, Secundario, Éxito, Advertencia y Error).
  3. Haz clic en cualquier muestra de color para abrir el selector de color. Arrastra el selector o ingresa un valor hexadecimal para elegir tu color.
  4. La Vista Previa de Combinaciones de Color muestra cómo funcionan juntos tus colores seleccionados.
  5. Usa Paletas Sugeridas para aplicar rápidamente un esquema de color prediseñado.
  6. Haz clic en Guardar cuando estés satisfecho.

Tipografía​

  1. Haz clic en Configuración de Tipografía en el panel de Configuración de Estilo.
  2. Haz clic en Seleccionar una Fuente para abrir el explorador de fuentes. Puedes buscar por nombre o explorar categorías como Serif, Sans Serif, Display, Manuscrita y Monoespaciada.
  3. Configura las fuentes tanto para encabezados como para el texto del cuerpo.
  4. Haz clic en Escala Tipográfica para ajustar la jerarquía de tamaños de Encabezado 1 a Encabezado 4. Usa los campos de multiplicador de escala y tamaño base para ajustar con precisión.
  5. Haz clic en Guardar para aplicar tus elecciones de fuente.

Espaciado​

  1. Haz clic en Escala de Espaciado en el panel de Configuración de Estilo.
  2. Ajusta los valores de espaciado desde Extra Pequeño hasta Extra Grande. Ejemplos prácticos muestran cómo cada valor afecta el diseño.
  3. Haz clic en Guardar Espaciado para aplicar los valores en todo tu sitio.

Logotipo y Marca​

  1. Haz clic en Logotipo en el panel de Configuración de Estilo.
  2. Sube tu Logotipo para Fondo Claro y Logotipo para Fondo Oscuro. Usa imágenes con fondo transparente y una relación de aspecto de 4:1 para obtener mejores resultados.
  3. Sube una Imagen para Redes Sociales para las vistas previas de enlaces y un Favicon para el ícono de la pestaña del navegador.
tip

Para obtener mejores resultados, usa un logotipo con fondo transparente en formato PNG. Esto asegura que se vea muy bien tanto en fondos claros como oscuros en todo tu sitio web y en la aplicación móvil.

Estilos de Navegación​

Personaliza los colores de la barra de navegación de tu sitio web tanto para el modo sólido como para el transparente:

  1. Desplázate a la sección Estilos de Navegación
  2. Haz clic en Editar Estilos de Navegación
  3. Configura colores para la navegación sólida (con fondo) y la navegación transparente (modo superpuesto)
  4. Haz clic en Guardar para aplicar tus colores de navegación

Para instrucciones detalladas, consulta Estilos de Navegación.

Widgets del Sitio​

Los widgets del sitio aparecen en cada página de tu sitio, flotando sobre el contenido de la página:

  • Banner de Anuncio -- Una barra descartable en la parte superior de tu sitio para mensajes urgentes, como un próximo evento o un cambio de servicio.
  • Lanzador -- Un botón flotante que abre un menú de acceso rápido, por ejemplo enlaces para dar, registrarte o ver el boletín.
  1. Haz clic en Widgets del Sitio en el panel de Configuración de Estilo.
  2. Activa los widgets que quieras y configura su texto, enlaces y colores.
  3. Haz clic en Guardar.

Análisis​

Agrega tu ID de Medición de Google Analytics 4 en el panel de Configuración de Estilo para rastrear el tráfico de visitantes en tu sitio web.

CSS y JavaScript Personalizados​

  1. Haz clic en CSS y Javascript en el panel de Configuración de Estilo.
  2. Agrega CSS Personalizado para anular los estilos predeterminados para personalización avanzada.
  3. Agrega HTML Personalizado para códigos de rastreo u otros scripts.
  4. Usa la sección de Ejemplos Comunes de Javascript para fragmentos como la integración de Google Analytics.
aviso

El CSS personalizado es poderoso, pero puede romper el diseño de tu sitio si se usa incorrectamente. La mayoría de las iglesias pueden lograr el aspecto que quieren usando los controles integrados de color, fuente y espaciado. Usa CSS personalizado solo si te sientes cómodo con el desarrollo web.

Temas de Estilo​

Si quieres un punto de partida rápido, las Paletas Sugeridas en la sección de Paleta de Colores ofrecen temas prediseñados que establecen colores coordinados en un clic. Siempre puedes ajustar configuraciones individuales después de aplicar un tema.

Próximos Pasos​