Saltar al contenido principal

Apariencia

La página de Apariencia le permite personalizar la apariencia general de su sitio web de la iglesia. Desde colores y fuentes hasta espaciado y CSS personalizado, puede controlar cada aspecto visual de su sitio desde un solo lugar.

Antes de Comenzar

  • Complete la Configuración Inicial de su sitio web
  • Tenga el logotipo de su iglesia listo en formato PNG con fondo transparente y una relación de aspecto de 4:1
  • Conozca los colores de marca de su iglesia (valores hexadecimales) si tiene una guía de estilo existente

Acceder a la Configuración de Apariencia​

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

Paleta de Colores​

  1. Haga clic en Paleta de Colores en el panel de Configuración de Estilo.
  2. Verá Colores Base (tonos claros, de acento y oscuros) y Colores Semánticos (Primario, Secundario, Éxito, Advertencia y Error).
  3. Haga clic en cualquier muestra de color para abrir el selector de colores. Arrastre el selector o ingrese un valor hexadecimal para elegir su color.
  4. La Vista Previa de Combinaciones de Colores muestra cómo funcionan juntos sus colores seleccionados.
  5. Use Paletas Sugeridas para aplicar rápidamente un esquema de colores prediseñado.
  6. Haga clic en Guardar cuando esté satisfecho.

Tipografía​

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

Espaciado​

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

Logotipo y Marca​

  1. Haga clic en Logotipo en el panel de Configuración de Estilo.
  2. Suba su Logotipo para Fondo Claro y Logotipo para Fondo Oscuro. Use imágenes con fondo transparente y una relación de aspecto de 4:1 para mejores resultados.
  3. Suba una Imagen para Redes Sociales para vistas previas de enlaces y un Favicon para el icono de la pestaña del navegador.
tip

Para mejores resultados, use un logotipo con fondo transparente en formato PNG. Esto garantiza que se vea bien tanto en fondos claros como oscuros en su sitio web y aplicación móvil.

CSS y JavaScript Personalizado​

  1. Haga clic en CSS y Javascript en el panel de Configuración de Estilo.
  2. Agregue CSS Personalizado para sobrescribir estilos predeterminados para personalización avanzada.
  3. Agregue HTML Personalizado para códigos de seguimiento u otros scripts.
  4. Use la sección de Ejemplos Comunes de Javascript para fragmentos de código como la integración de Google Analytics.
aviso

El CSS personalizado es poderoso pero puede dañar el diseño de su sitio si se usa incorrectamente. La mayoría de las iglesias pueden lograr la apariencia que desean usando los controles integrados de color, fuente y espaciado. Solo use CSS personalizado si se siente cómodo con el desarrollo web.

Temas de Estilo​

Si desea 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 con un solo clic. Siempre puede ajustar configuraciones individuales después de aplicar un tema.

Próximos Pasos​