¿Cómo agrego CSS personalizado?
Usa código personalizado para ajustar la apariencia de tu sitio web más allá de las opciones estándar.
Respuesta corta: Ve a Sitio web > Constructor > Configuración del sitio > pestaña Diseño para agregar CSS personalizado.
Encontrar la opción de CSS personalizado
Ve a Sitio web > Constructor
Haz clic en Configuración del sitio
Selecciona la pestaña Diseño
Desplázate hacia abajo para encontrar el área de texto de CSS personalizado
Ingresa tu código CSS
Haz clic en Guardar
Qué puedes personalizar con CSS
Tamaños y estilos de fuente
Espaciado y márgenes
Colores y fondos
Apariencia de botones
Disposición de secciones
Estilos específicos para móviles
Ejemplo: Cambiar un tamaño de fuente
.section-title {
font-size: 32px;
}
Ejemplo: Ajustar espaciado
.content-section {
padding: 40px 20px;
}
Ejemplo: Color de botón personalizado
.btn-primary {
background-color: #d4a574;
border-color: #d4a574;
}
Dónde se aplica el CSS personalizado
El CSS personalizado agregado aquí se aplica solo a tu sitio web de boda (las páginas y secciones que construyes en el editor del sitio web). No se aplica a:
El formulario de confirmación de asistencia
El formulario de recopilación de detalles
El formulario de check-in
La página de código de acceso
La página de próximamente
Estas páginas usan un diseño separado y estándar que no se ve afectado por el CSS personalizado de tu sitio web. El CSS personalizado de las tarjetas digitales también es separado y solo se aplica a la tarjeta digital misma.
Notas importantes
CSS requiere algunos conocimientos técnicos
Los cambios afectan todo tu sitio web (pero no el formulario de confirmación de asistencia ni las otras páginas listadas arriba)
Prueba a fondo en móvil y escritorio
CSS inválido puede romper tu diseño
Guarda una copia de seguridad del CSS funcional antes de hacer cambios
Si algo se rompe
Si tu CSS causa problemas:
1. Regresa a la configuración de CSS personalizado
2. Elimina o comenta los cambios recientes
3. Guarda y actualiza tu sitio
4. Agrega los cambios nuevamente uno a la vez
Consejos
Comienza con cambios pequeños
Usa las herramientas de desarrollo del navegador para encontrar nombres de elementos
Prueba en múltiples dispositivos
Mantén tu CSS organizado con comentarios
No anules los estilos críticos del diseño
Artículos relacionados