Aprende cómo usar funciones avanzadas como el modo de diseño simplificado, superposiciones del encabezado y CSS personalizado para control total del diseño.

¿Quieres más control sobre la apariencia de tu sitio web? ¡WedSites ofrece opciones avanzadas de diseño como modo de diseño simplificado, efectos de superposición del encabezado y CSS personalizado para usuarios avanzados!

Diseño simplificado: Elimina las texturas de fondo por defecto para un aspecto más limpio.

Superponer imagen con texto blanco: Cambia el color del texto a blanco y lo superpone sobre la imagen de fondo del encabezado para mejor legibilidad.

CSS personalizado: Agrega tu propio código CSS para control total del diseño.

¡Todas estas opciones están en Configuración del sitio → pestaña Diseño!

¡Cada opción está en una sección diferente de la pestaña Diseño!

Esto elimina las texturas de fondo de tu tema para un aspecto más limpio y minimal.

Qué hace:
- Oculta texturas de fondo por defecto
- Crea una versión simplificada de tu tema
- Hace tu sitio sentirse más moderno y limpio
- Afecta los patrones de fondo de la plantilla general

Cómo activar:
1. Ve a Configuración del sitio → pestaña Diseño
2. Encuentra la sección Diseño simplificado (cerca de la parte superior, debajo de la vista previa de tu tema)
3. Activa el interruptor
4. Haz clic en Guardar cambios en la parte inferior

Cuándo usar:
- Quieres un aspecto minimal y moderno
- Tu tema tiene texturas de fondo muy cargadas
- Prefieres diseños limpios sobre decorativos
- Tus fotos son las protagonistas y no quieres patrones que compitan

Cuándo omitir:
- Te encantan las texturas del tema
- Tu estilo de boda es romántico o vintage (las texturas agregan carácter)
- El diseño por defecto ya se ve limpio

¡Esta configuración solo funciona si tu tema incluye texturas de fondo. Algunos temas no mostrarán ninguna diferencia!

Cambia el color del texto del encabezado a blanco y lo superpone sobre la imagen de fondo del encabezado, haciendo el texto más fácil de leer contra imágenes oscuras o muy cargadas.

Qué hace:
- Cambia el color del texto del encabezado a blanco
- Superpone texto blanco sobre tu imagen de fondo del encabezado
- Hace que el texto destaque contra imágenes cargadas
- Mejora la legibilidad de tus nombres y contenido del encabezado
- Solo afecta el área del encabezado (no todo el sitio)

Cómo activar:
1. Ve a Configuración del sitio → pestaña Diseño
2. Desplázate hasta la sección del Encabezado
3. Asegúrate de tener una imagen de fondo del encabezado subida (si no, no hay nada sobre qué superponer)
4. Encuentra la casilla Superponer imagen con texto blanco
5. Marca la casilla
6. Haz clic en Guardar cambios en la parte inferior

Cuándo usar:
- Tu fondo del encabezado es oscuro o cargado
- El texto es difícil de leer sobre tu imagen del encabezado
- Quieres un encabezado más suave y elegante
- Tu foto tiene muchos detalles que compiten con el texto

Cuándo omitir:
- Tu fondo del encabezado ya es claro
- Quieres un encabezado audaz y dramático
- No tienes imagen de fondo del encabezado
- El texto ya es fácil de leer

Nota: ¡Esto solo aparece si has subido una imagen de fondo del encabezado. Sin imagen = sin opción de superposición!

Para usuarios avanzados que conocen CSS, puedes agregar tus propios estilos personalizados para personalizar completamente tu sitio.

Qué es:
- Un área de texto donde puedes escribir código CSS
- Te da control total sobre los estilos
- Anula los valores por defecto del tema
- Aplica a todo tu sitio web de boda

Cómo agregar CSS personalizado:
1. Ve a Configuración del sitio → pestaña Diseño
2. Desplázate hasta el final (debajo de la sección del encabezado)
3. Haz clic en el enlace Agregar CSS personalizado
4. Aparece un área de texto de CSS personalizado
5. Escribe o pega tu código CSS
6. Haz clic en Guardar cambios en la parte inferior

¡Tu CSS personalizado ahora está activo!

Cómo eliminar CSS personalizado:
1. Ve a Configuración del sitio → pestaña Diseño
2. Desplázate hasta la sección de CSS personalizado (ahora es visible ya que has agregado CSS)
3. Haz clic en el enlace Eliminar CSS personalizado
4. El área de texto desaparece y tu CSS personalizado se elimina
5. Haz clic en Guardar cambios

¡Tu sitio vuelve a los estilos por defecto del tema!

Características del editor CSS:
- Resaltado de sintaxis para lectura más fácil
- Números de línea
- Indentación automática
- Admite todo CSS estándar

Quién debería usar CSS personalizado:
- Desarrolladores web o diseñadores
- Personas cómodas con código
- Usuarios con necesidades de diseño específicas no cubiertas por las opciones integradas
- Cualquiera que quiera coincidir con una marca existente exactamente

Quién debería omitir CSS personalizado:
- Usuarios no familiarizados con CSS
- Cualquiera que solo quiera personalización básica (usa las herramientas de color y fuente en su lugar)
- Personas preocupadas por romper su sitio

Ejemplos de usos de CSS:
- Cambiar tamaños de fuente para secciones específicas
- Ajustar espaciado y márgenes
- Ocultar o mostrar elementos específicos
- Agregar animaciones personalizadas
- Anular colores del tema en lugares específicos
- Estilizar elementos no expuestos en la configuración

Apunta a elementos específicos:
Usa clases e IDs para apuntar solo a lo que quieres cambiar. ¡Inspecciona tu sitio para encontrar los selectores correctos!

Prueba exhaustivamente:
El CSS personalizado puede romper tu diseño si no tienes cuidado. ¡Siempre ve tu sitio en vivo después de guardar para asegurarte de que todo se vea bien!

Empieza pequeño:
Haz un cambio a la vez y prueba. No pegues cientos de líneas de una vez.

Usa comentarios:
Agrega comentarios CSS para recordar qué hace cada sección:
​ css
/* Hace los encabezados más grandes en móvil */
h1 { font-size: 32px; }
​

Compatible con móvil:
Recuerda probar en dispositivos móviles. Usa media queries si es necesario:
​ css
@media (max-width: 768px) {
/* Estilos móviles aquí */
}
​

No elimines código !important:
Si necesitas anular estilos del tema, podrías necesitar !important:
​ css
.heading { color: red !important; }
​

Puedes usar múltiples opciones avanzadas juntas:

¡Mezcla y combina según tus necesidades!

Después de usar opciones avanzadas de diseño:

¡Siempre prueba antes de compartir tu sitio con invitados!

El sitio se ve roto:
Elimina tu CSS personalizado y empieza de nuevo. Probablemente tengas un error de sintaxis o regla conflictiva.

Los cambios no aparecen:
Asegúrate de hacer clic en Guardar cambios. También intenta forzar la actualización de tu navegador (Cmd+Shift+R en Mac, Ctrl+Shift+R en Windows).

El texto es invisible:
Revisa tus valores de color. Podrías haber puesto el texto del mismo color que el fondo.

El móvil se ve raro:
Agrega media queries para ajustar estilos en pantallas más pequeñas.

¿Sigues atascado?
Elimina el CSS personalizado y usa las herramientas integradas de color y fuente en su lugar. ¡Están diseñadas para funcionar perfectamente con tu tema!

Si has hecho cambios avanzados y quieres empezar de nuevo:

¡Vuelves a la apariencia por defecto de tu tema!

Usa herramientas integradas (colores, fuentes, configuración del encabezado):
- Quieres cambios rápidos y fáciles
- No eres desarrollador
- Quieres compatibilidad garantizada
- Te preocupa romper algo

Usa CSS personalizado:
- Necesitas algo muy específico
- Te sientes cómodo con código
- Las opciones integradas no cubren tus necesidades
- Estás replicando marca existente

El soporte de WedSites no puede ayudar con la depuración de CSS personalizado (ya que es código generado por el usuario), pero puedes:

Siempre puedes ajustar estas configuraciones avanzadas más tarde:

¡Tu sitio puede evolucionar según cambien tus necesidades!

¡Las opciones avanzadas de diseño te dan control completo sobre la apariencia de tu sitio web de boda, ya sea que quieras un tema simplificado o personalización completa con CSS!