Saltar al contenido principal

Apariencia

La página de Apariencia te permite personalizar la apariencia y sensación general de tu sitio web de 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 tu logo de iglesia listo 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

Accediendo 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 de sitio se carga con una vista previa en vivo de tu sitio web a la izquierda y opciones de Configuración de estilos a la derecha.

Paleta de colores​

  1. Haz clic en Paleta de colores en el panel de Configuración de estilos.
  2. Verás Colores base (matices claro, 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 estilos.
  2. Haz clic en Seleccionar una fuente para abrir el navegador de fuentes. Puedes buscar por nombre o explorar categorías como Serif, Sin serif, pantalla, escritura a mano y monoespaciado.
  3. Establece fuentes para títulos y texto del cuerpo.
  4. Haz clic en Escala de tipografía para ajustar la jerarquía de tamaño para títulos 1 a 4. Usa el multiplicador de escala y los campos de tamaño base para ajustar.
  5. Haz clic en Guardar para aplicar tus selecciones de fuente.

Espaciado​

  1. Haz clic en Escala de espaciado en el panel de Configuración de estilos.
  2. Ajusta los valores de espaciado para extra pequeño a 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.

Logo y marca​

  1. Haz clic en Logo en el panel de Configuración de estilos.
  2. Carga tu Logo de fondo claro y Logo de fondo oscuro. Usa imágenes con fondo transparente y relación de aspecto 4:1 para mejores resultados.
  3. Carga una imagen de redes sociales para vistas previas de enlaces y un favicon para el icono de la pestaña del navegador.
tip

Para obtener los mejores resultados, usa un logo con fondo transparente en formato PNG. Esto asegura que se vea bien en fondos claros y oscuros en 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 para modos sólidos y transparentes:

  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 de superposición)
  4. Haz clic en Guardar para aplicar tus colores de navegación

Para instrucciones detalladas, ver Estilos de navegación.

CSS y JavaScript personalizados​

  1. Haz clic en CSS y Javascript en el panel de Configuración de estilos.
  2. Agrega CSS personalizado para sobrescribir estilos predeterminados para personalización avanzada.
  3. Agrega HTML personalizado para códigos de seguimiento u otros scripts.
  4. Usa la sección Ejemplos de Javascript comunes para fragmentos como integración de Google Analytics.
aviso

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 la apariencia que desean usando los controles de color, fuente y espaciado integrados. Solo usa CSS personalizado 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​