Personalizar el diseño de su sitio web
El Estudio del sitio web incluye un sistema completo de personalización de diseño con temas prediseñados, anulaciones de color personalizadas, opciones de tipografía y estilos de encabezado y pie de página. Toda la configuración de diseño se gestiona desde la página Tema y colores.
Acceder a la configuración del tema
- Haga clic en Sitio web en la barra lateral izquierda para abrir el Estudio del sitio web.
- Haga clic en la tarjeta Tema y colores en el panel.
La vista previa en vivo
En la parte superior de la página, la Vista previa en vivo muestra su sitio web público tal como lo ven los visitantes. Guarde sus cambios y luego haga clic en Actualizar para verlos en la vista previa. Expandir hace la vista previa más alta; Contraer la reduce de nuevo.
Elegir un tema
El Estudio del sitio web incluye 10 temas diseñados profesionalmente. Cada tema proporciona un conjunto completo de colores, fuentes, radio de borde y estilos de sombra.
Temas disponibles
| Tema | Descripción | Estilo |
|---|---|---|
| Classic | Diseño atemporal y tradicional con acentos azul marino y dorado | Títulos serif, sombras sutiles |
| Modern | Limpio y contemporáneo con acentos azul y violeta llamativos | Sans-serif, esquinas redondeadas |
| Minimal | Simple y elegante con mucho espacio en blanco | Tonos neutros, sin bordes ni sombras |
| Warm Earth | Acogedor y cálido con tonos ámbar terrosos | Títulos serif, sombras cálidas |
| Ocean Blue | Tranquilo y sereno con colores azul cielo inspirados en el océano | Esquinas redondeadas, sombras suaves |
| Forest Green | Natural y refrescante con acentos verdes | Títulos serif, sombras sutiles |
| Sunset Orange | Vibrante y enérgico con tonos naranja cálidos | Esquinas muy redondeadas, sombras cálidas |
| Royal Purple | Elegante y sofisticado con acentos púrpura real | Títulos serif decorativos |
| Slate Gray | Profesional y moderno con tonos grises neutros | Sans-serif, bordes pequeños |
| Midnight Dark | Diseño audaz en modo oscuro para iglesias modernas | Fondo oscuro, acentos luminosos |
Cómo seleccionar un tema
- En la página Tema y colores, explore las tarjetas de tema en Elija un tema.
- Cada tarjeta muestra una vista previa de color, el nombre del tema y una breve descripción.
- Haga clic en una tarjeta de tema para seleccionarla. Aparecerá una marca de verificación para confirmar su selección.
- Desplácese hasta el final y haga clic en Guardar configuración del tema.
Consejo: Las vistas previas del tema le muestran la barra de color primario, el color del texto y el color de fondo para que pueda tener una idea del aspecto antes de seleccionar.
Personalizar colores
Puede anular los colores predeterminados del tema con los colores de su marca. Esto le permite usar el diseño y la estructura de un tema mientras coincide con la identidad visual de su iglesia.
Anulaciones de color disponibles
- Color primario — Se usa en botones, enlaces y elementos de acento.
- Color secundario — Se usa en elementos de interfaz secundarios.
- Color de acento — Se usa en resaltados y elementos especiales.
Cómo personalizar colores
- En la página Tema y colores, desplácese a la sección Personalizar colores.
- Para cada color:
- Haga clic en la muestra de color para abrir el selector de color.
- Seleccione el color deseado.
- El código hexadecimal se mostrará en el campo de texto junto al selector.
- Haga clic en Guardar configuración del tema para aplicar.
Para restablecer los colores a los valores predeterminados del tema, haga clic en el enlace Restablecer a los valores predeterminados del tema en la parte inferior de la sección de colores.
Si un color que elige es demasiado claro para leer texto blanco encima, aparece una advertencia debajo: «Bajo contraste con el texto blanco (WCAG AA recomienda 4.5:1)». Elija un tono más oscuro para que los botones sigan siendo legibles.
Consejo: Si deja un campo de color vacío, se usará el color predeterminado del tema para esa ranura. No tiene que anular los tres colores — solo los que desee cambiar.
Elegir fuentes
Puede personalizar las fuentes de títulos y del cuerpo de forma independiente.
Fuentes disponibles
| Fuente | Estilo |
|---|---|
| System Default | La fuente sans-serif predeterminada del dispositivo |
| Inter | Sans-serif moderna y limpia |
| Poppins | Sans-serif geométrica y amigable |
| Montserrat | Sans-serif geométrica y audaz |
| Georgia | Serif clásica |
| Merriweather | Serif legible |
| Lora | Serif elegante |
| Playfair Display | Serif decorativa de display |
Cómo cambiar fuentes
- En la página Tema y colores, desplácese a la sección Tipografía.
- Seleccione una fuente en el menú desplegable Fuente de los títulos.
- Seleccione una fuente en el menú desplegable Fuente del cuerpo.
- Haga clic en Guardar configuración del tema.
Seleccionar «Usar el valor predeterminado del tema» usará la fuente definida por el tema seleccionado.
Estilos de encabezado
El estilo del encabezado controla cómo aparece la navegación de su sitio en la parte superior de cada página.
Estilos de encabezado disponibles
| Estilo | Descripción |
|---|---|
| Classic | Logo a la izquierda, enlaces de navegación a la derecha |
| Centered | Logo centrado en la parte superior, enlaces de navegación debajo |
| Transparent | Se superpone a la imagen de portada (ideal para páginas de inicio con muchas imágenes) |
| Modern | Logo a la izquierda, navegación centrada, botón de llamada a la acción a la derecha |
| Minimal | Solo logo y un icono de menú hamburguesa |
Cómo elegir un estilo de encabezado
- En la página Tema y colores, desplácese a la sección Estilo del encabezado.
- Cada opción incluye una vista previa visual que muestra el diseño.
- Haga clic en su estilo preferido.
- Haga clic en Guardar configuración del tema.
Estilos de pie de página
El estilo del pie de página controla el diseño de la parte inferior de cada página.
Estilos de pie de página disponibles
| Estilo | Descripción |
|---|---|
| Full | Pie de página de varias columnas con información de contacto, enlaces de navegación y redes sociales (el predeterminado) |
| Minimal | Una sola línea con texto de derechos de autor e iconos de redes sociales |
| Centered | Todo centrado: logo, enlaces de navegación, iconos sociales y derechos de autor |
| Grand | Pie de página grande y prominente con marca, llamada a la acción y varias columnas |
Cómo elegir un estilo de pie de página
- En la página Tema y colores, desplácese a la sección Estilo del pie de página.
- Cada opción incluye una vista previa visual.
- Haga clic en su estilo preferido.
- Haga clic en Guardar configuración del tema.
Diseño de la página de formularios
Diseño de la página de formularios define cómo se ve la lista de sus formularios para los visitantes en la página de formularios de su sitio web. Todas las opciones se adaptan a teléfonos y tabletas:
| Diseño | Ideal para |
|---|---|
| Tarjetas | Mosaicos grandes con un banner de icono — ideal para unos pocos formularios |
| Cuadrícula compacta | Mosaicos más pequeños, más por fila — bueno para muchos formularios |
| Lista | Uno por fila, fácil de recorrer |
| Lista detallada | Uno por fila con la descripción completa |
Haga clic en el diseño que desee y luego en Guardar configuración del tema.
Logo de la iglesia
El logo de su iglesia aparece en el encabezado del sitio web y se configura en la configuración de su iglesia:
- Abra Configuración de la iglesia (el enlace Configuración de la iglesia al final de la barra lateral) y permanezca en la pestaña Perfil.
- Suba la imagen de su logo.
- El logo aparecerá automáticamente en su sitio web según la configuración de estilo del encabezado.
Puede controlar si el logo se muestra en el encabezado desde la configuración de Navegación (consulte Navegación y menús).
Guardar sus cambios de diseño
Todos los cambios de tema, color, fuente, encabezado, diseño de formularios y pie de página se guardan juntos cuando hace clic en Guardar configuración del tema. Los cambios surten efecto de inmediato en su sitio web público — no hay un paso de publicación separado para la configuración de diseño.
Próximos pasos
- Navegación y menús — Configure el menú de su sitio, el encabezado y el contenido del pie de página
- Configuración de SEO — Optimice su sitio web para los motores de búsqueda