Usar el Editor de Páginas
El editor de páginas de B1 es un constructor visual de arrastrar y soltar que te permite diseñar las páginas de tu sitio web de la iglesia sin escribir ningún código. Puedes agregar secciones y bloques de contenido, personalizar estilos, previsualizar tu trabajo y deshacer cambios -- todo desde tu navegador.
Antes de Comenzar
- Completa la Configuración Inicial para tener tu sitio web configurado
- Crea al menos una página en Administrar Páginas
- Necesitas el permiso content.edit para acceder al editor
Abrir el Editor
- En B1 Admin, haz clic en Sitio Web en el menú izquierdo.
- Encuentra la página que quieres editar en la tabla de Páginas y haz clic en Editar.
El editor se abre en modo de pantalla completa. El panel izquierdo muestra la estructura de tu página y los elementos de contenido disponibles; el área central muestra una vista previa en vivo de tu página.
El editor siempre se muestra en modo claro, independientemente de tu configuración de tema de B1 Admin. Esto asegura que la vista previa coincida exactamente con cómo se verá tu página para los visitantes del sitio web.
Estructura de la Página: Secciones y Elementos
Cada página se construye a partir de dos niveles:
- Secciones -- Los contenedores de nivel superior que dividen tu página en bandas horizontales (por ejemplo, una sección hero, un bloque de contenido, o una franja de pie de página). Cada página debe tener al menos una sección antes de poder agregar contenido.
- Elementos -- Las piezas individuales de contenido colocadas dentro de una sección, como texto, imágenes, botones, tarjetas, formularios y calendarios.
Agregar una Sección
- Haz clic en Agregar Sección (o el botón + en la parte superior del panel izquierdo).
- Elige cómo comenzar:
- Desde una plantilla — explora la galería de plantillas de sección organizada por categoría (Hero, Acerca de, Servicios, Donaciones, etc.) y haz clic en una para insertarla como una sección completamente estilizada y precompletada. Puedes personalizar todo después de agregarla.
- Sección en blanco — elige un diseño de columnas (una sola, dos columnas, tres columnas, etc.) y construye desde cero.
- La nueva sección aparece en la vista previa. Haz clic en ella para seleccionarla y configurar su color de fondo, relleno y otras opciones de estilo.
Cambiar el Diseño de una Sección
¿Ya construiste una sección pero quieres una estructura diferente? Usa el selector de diseño en esa sección para cambiar su disposición de columnas por otra de la galería, manteniendo tu contenido y elementos existentes en su lugar.
Agregar Elementos a una Sección
- Haz clic dentro de una sección en la vista previa para seleccionarla.
- Haz clic en Agregar Contenido y elige un tipo de elemento de la lista:
- Texto -- Encabezados, párrafos y texto enriquecido
- Imagen -- Sube o enlaza a una foto
- Botón -- Un enlace de llamada a la acción en el que se puede hacer clic
- Tarjeta -- Una imagen con un título y descripción
- Formulario -- Incrusta un formulario directamente en la página
- Calendario -- Muestra un calendario de eventos
- Preguntas Frecuentes -- Bloques de preguntas y respuestas estilo acordeón
- Video -- Incrusta un video por URL
- Explorador de Grupos -- Un directorio filtrable de todos los grupos de la iglesia con búsqueda opcional, filtro de categoría y filtro de etiqueta
- Función con Ícono -- Un ícono con un título y una breve descripción, para destacar funciones o ministerios
- Galería -- Una cuadrícula de múltiples fotos o diseño tipo mosaico
- Testimonio -- Una o más citas con nombre del autor, rol y foto
- Íconos Sociales -- Íconos enlazados a los perfiles de redes sociales de tu iglesia
- Cuenta Regresiva -- Un temporizador que cuenta regresivamente hasta una fecha o un horario semanal de servicio
- Estadísticas -- Una fila de números grandes con etiquetas (miembros, años, sedes)
- Progreso de Campaña -- Una barra de progreso en vivo para una campaña de donación, mostrando el total recaudado hacia una meta de fondos
- Cuadrícula de Personal -- Tarjetas con foto para los miembros de un grupo; el grupo debe tener activada su opción de nómina pública
- Horarios de Servicio -- El horario de servicios de tus sedes, obtenido automáticamente de la configuración de asistencia
- Sermones -- Tu biblioteca de sermones, como explorador completo o como diseño de cuadrícula, lista o destacado-más-reciente
- Mapa -- Un mapa incrustado centrado en la dirección de tu iglesia
- Tabla -- Una cuadrícula simple de filas y columnas para contenido tabular
- Texto con Foto -- Texto e imagen uno junto al otro
- Logotipo -- El logotipo de tu iglesia, obtenido de Apariencia
- Transmisión en Vivo -- Tu reproductor de transmisión en vivo, incrustado directamente en la página
- Donación -- Un botón de donación o un formulario de donación incrustado
- HTML Sin Procesar -- Marcado HTML personalizado para casos de uso avanzados
- iFrame -- Incrusta contenido externo por URL
- Configura el elemento usando el panel de configuración que aparece.
Reordenar Contenido
Arrastra secciones o elementos usando el ícono de asa (seis puntos) en el lado izquierdo de cada elemento para reordenarlos. Puedes arrastrar elementos dentro de una sección o moverlos entre secciones.
Dar Estilo a tu Página
Estilos de Sección
Haz clic en cualquier sección para abrir su panel de estilo. Puedes configurar:
- Fondo -- Color sólido, degradado o imagen. Al usar un fondo de imagen, un selector de Punto Focal te permite hacer clic para establecer qué parte de la imagen permanece centrada a medida que la sección cambia de tamaño, y una opción de color de Superposición te permite agregar un tinte semitransparente sobre la imagen para mejorar la legibilidad del texto.
- Relleno -- Espaciado superior e inferior dentro de la sección
- Ancho -- Ancho completo o centrado/contenido
- Divisores -- Divisores de forma decorativos (onda, inclinado, curva, triángulo y más) en el borde superior o inferior de la sección, con opciones de color, altura e inversión
Estilos de Elemento
Haz clic en cualquier elemento para abrir su panel de estilo. Las opciones comunes incluyen tamaño de fuente, color, alineación, margen y relleno. Para las imágenes, puedes configurar el texto alternativo y los destinos de los enlaces.
CSS Personalizado
Para estilos avanzados, cada sección y elemento tiene un campo de CSS Personalizado donde puedes escribir tus propias reglas CSS. Estas están limitadas a ese elemento, por lo que no afectarán involuntariamente al resto de la página.
Si necesitas aplicar estilos en todo tu sitio -- como una fuente personalizada o un color global -- usa la configuración de Apariencia en lugar de CSS personalizado en páginas individuales.
Previsualizar tu Página
Usa los controles de vista previa en la barra de herramientas para comprobar cómo se ve tu página en diferentes tamaños de pantalla:
- Escritorio -- Vista de navegador de ancho completo
- Móvil -- Vista estrecha del tamaño de un teléfono
Haz clic en Vista Previa para abrir una versión en vivo de la página en una nueva pestaña del navegador, exactamente como la verán los visitantes.
Comprobar la Accesibilidad
Haz clic en el ícono de Accesibilidad en la barra de herramientas para ejecutar una verificación rápida de problemas comunes -- imágenes sin texto alternativo, bajo contraste de color o encabezados fuera de orden. Cada problema enlaza directamente al elemento que necesita atención para que puedas corregirlo en el lugar.
Deshacer Cambios
El editor rastrea automáticamente tu historial de edición. Usa los botones de la barra de herramientas o los atajos de teclado para navegar:
- Deshacer (Ctrl+Z / Cmd+Z) -- Revierte tu última acción
- Rehacer (Ctrl+Y / Cmd+Y) -- Vuelve a aplicar una acción deshecha
También puedes restaurar la página a una instantánea anterior. Haz clic en Historial en la barra de herramientas para ver una lista de instantáneas guardadas con descripciones, y haz clic en cualquier entrada para restaurar a ese punto.
Restaurar una instantánea reemplaza el contenido actual de tu página con la versión de la instantánea. Esto no se puede deshacer con el botón de deshacer estándar. Guarda una instantánea de tu estado actual antes de restaurar una anterior si quieres conservar la opción de regresar.
Guardar y Publicar
Los cambios se guardan automáticamente mientras trabajas. Un indicador de estado en la barra de herramientas muestra si tus cambios se han guardado.
Estado de borrador y publicado
Las páginas pueden tener un estado publicado, que controla cuándo los visitantes ven tus cambios. La barra de herramientas muestra una etiqueta de estado que indica el estado actual:
- En Vivo al Guardar -- La página no usa un flujo de trabajo de publicación. Cada cambio guardado se publica de inmediato. Este es el valor predeterminado para páginas nuevas.
- Cambios Sin Publicar -- La página se ha publicado antes, pero has hecho cambios desde la última publicación. Los visitantes todavía ven la versión previamente publicada.
- Publicada -- La página está en vivo y tu contenido guardado coincide con lo que ven los visitantes.
Para publicar tus cambios, haz clic en el botón Publicar en la barra de herramientas. La página se activa de inmediato.
Para revertir a la última versión publicada sin afectar lo que ven los visitantes, abre el menú desplegable adicional (⋮) y haz clic en Descartar Cambios.
Para retirar una página por completo, abre el menú desplegable adicional y haz clic en Anular Publicación. Los visitantes ya no verán esa página hasta que la publiques de nuevo.
Usa el flujo de trabajo de borrador/publicación cuando quieras preparar una página -- por ejemplo, para un próximo evento -- y solo activarla en el momento adecuado. Construye y previsualiza la página, luego haz clic en Publicar cuando estés listo.
Artículos Relacionados
- Administrar Páginas -- Crea páginas, establece URLs y administra la navegación del sitio
- Apariencia -- Configura colores, fuentes y marca en todo el sitio
- Archivos -- Sube imágenes y documentos para usar en el editor
- Crear Formularios -- Construye formularios que puedes incrustar en páginas