Saltar al contenido principal

Apariencia

La página de Apariencia te permite personalizar la apariencia 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 para tu sitio web
  • Ten listo el logotipo de tu iglesia en formato PNG con fondo transparente y relación de aspecto 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 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 claros, acentuados y oscuros) 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 Colores muestra cómo funcionan juntos tus colores seleccionados.
  5. Usa Paletas Sugeridas para aplicar rápidamente un esquema de colores 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 navegador de fuentes. Puedes buscar por nombre o navegar por categorías como Serif, Sans Serif, Display, Handwriting y Monospace.
  3. Configura fuentes tanto para títulos como para texto del cuerpo.
  4. Haz clic en Escala Tipográfica para ajustar la jerarquía de tamaño para Título 1 hasta Título 4. Usa el multiplicador de escala y los campos de tamaño base para ajustar finamente.
  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. Los 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 relación de aspecto 4:1 para mejores resultados.
  3. Sube una Imagen para Redes Sociales para vistas previas de enlaces y un Favicon para el ícono de la pestaña del navegador.
tip

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

Estilos de Navegación​

Personaliza los colores de la barra de navegación de tu sitio web tanto para modos sólido como 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 navegación sólida (con fondo) y 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.

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 estilos predeterminados para personalización avanzada.
  3. Agrega HTML Personalizado para códigos de seguimiento u otros scripts.
  4. Usa la sección 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 desean usando los controles incorporados de color, fuente y espaciado. Solo usa CSS personalizado si te sientes cómodo con el desarrollo web.

Temas de Estilo​

Si deseas 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 puedes ajustar finamente configuraciones individuales después de aplicar un tema.

Próximos Pasos​