Temas del sitio web y personalización de marca
El tema de su sitio web determina la apariencia general de su sitio. Desde colores y fuentes hasta estilos de botones y diseños, la personalización del tema le permite crear una experiencia de marca única que refleje la identidad de su negocio.
Acceder a la configuración del tema: Vaya a Website → Configuración → Personalizar → Tema o haga clic en el icono de paleta de pintura en modo Edición.
Seleccionar un tema
Odoo ofrece temas diseñados profesionalmente para ayudarle a comenzar:
- Navegue a Website → Configuración → Ajustes
- Haga clic en Elegir un tema en la sección Website
- Explore los temas disponibles con vistas previas en vivo
- Haga clic en un tema para previsualizarlo en su sitio
- Haga clic en Usar este tema para aplicarlo
Importante: Cambiar de tema puede afectar el diseño de su contenido existente. Revise siempre sus páginas después de cambiar de tema y realice los ajustes necesarios.
Personalización de colores
Los colores son fundamentales para la identidad de su marca. El Website Builder proporciona una gestión completa de colores:
Colores del tema
Defina su paleta de colores principal que se aplica a todo el sitio web:
| Tipo de color | Uso | Recomendaciones |
|---|---|---|
| Primario | Color principal de la marca, botones, enlaces, acentos | Su color de marca principal |
| Secundario | Botones alternativos, elementos menos prominentes | Complementario al primario |
| Alpha (Fondo 1) | Fondos de página principales | Generalmente blanco o muy claro |
| Beta (Fondo 2) | Fondos de secciones alternos | Gris claro o tinte sutil |
| Gamma (Fondo 3) | Secciones destacadas, pies de página | Más oscuro o contrastante |
| Delta (Fondo 4) | Secciones especiales | Áreas de funcionalidades |
| Epsilon (Fondo 5) | Fondos adicionales | Variación adicional |
Colores de estado
Colores semánticos que comunican significado:
- Éxito (Verde): Confirmaciones, acciones completadas
- Info (Azul): Mensajes informativos
- Advertencia (Amarillo/Naranja): Precauciones, avisos importantes
- Peligro (Rojo): Errores, alertas críticas
Configurar los colores
- Haga clic en la muestra de color para abrir el selector de colores
- Elija entre:
- Preajustes de tema: Esquemas de colores predefinidos
- Rueda de colores: Elija cualquier color visualmente
- Valor hexadecimal: Ingrese códigos de color exactos
- Valores RGB: Control preciso de colores
- Los colores se actualizan instantáneamente en todo su sitio
Configuración de tipografía
Las fuentes transmiten personalidad y mejoran la legibilidad:
Configuración de fuentes
| Configuración | Se aplica a | Opciones |
|---|---|---|
| Fuente de títulos | H1, H2, H3, H4, H5, H6 | Google Fonts, fuentes del sistema, carga personalizada |
| Fuente de cuerpo | Párrafos, listas, texto general | Google Fonts, fuentes del sistema, carga personalizada |
| Fuente de botones | Texto de los botones | Generalmente hereda del cuerpo o título |
| Fuente de navegación | Elementos del menú | A menudo coincide con la fuente de títulos |
Fuentes disponibles
- Google Fonts: Más de 1000 fuentes gratuitas, cargadas automáticamente desde el CDN de Google
- Fuentes del sistema: Arial, Helvetica, Times, Georgia - carga rápida, sin solicitudes externas
- Fuentes personalizadas: Cargue sus propias fuentes de marca (WOFF, WOFF2, TTF, OTF)
Opciones de tipografía
- Tamaño de fuente base: Tamaño de texto predeterminado (generalmente 16px)
- Escala de títulos: Proporción entre niveles de título
- Altura de línea: Espacio entre líneas (1.5 es legible)
- Espaciado de letras: Espacio entre caracteres
Estilos de botones
Los botones guían las acciones del usuario. Configúrelos para que coincidan con su marca:
Forma de los botones
- Cuadrado: Esquinas afiladas (radio de 0px)
- Ligeramente redondeado: Redondeo sutil (4-8px)
- Redondeado: Curvas notables (12-16px)
- Píldora: Extremos completamente redondeados (9999px)
Variantes de botones
- Relleno/Sólido: Color de fondo con texto contrastante
- Contorno: Solo borde, fondo transparente
- Plano: Sin borde, estilo mínimo
Estados de los botones
| Estado | Cuándo | Cambio de estilo típico |
|---|---|---|
| Predeterminado | Apariencia normal | Estilo base |
| Hover | Ratón sobre el botón | Más oscuro/claro, sombra, ampliación |
| Activo | Al hacer clic | Apariencia presionada |
| Focus | Navegación por teclado | Anillo de contorno |
| Desactivado | No se puede hacer clic | Grisáceo, opacidad reducida |
Estilo de los enlaces
Configure cómo aparecen los enlaces en todo su sitio:
- Color del enlace: Generalmente el color principal de la marca
- Color visitado: Tono ligeramente diferente (opcional)
- Color al pasar el ratón: Tono más oscuro/diferente al pasar el ratón
- Subrayado: Siempre, nunca o solo al pasar el ratón
- Decoración: Estilo de subrayado (sólido, punteado, discontinuo)
Diseños de página
Controle la estructura general de sus páginas:
Ancho del contenedor
- Ancho completo: El contenido abarca toda la ventana
- Contenido: Ancho máximo con márgenes laterales (1140px, 960px, etc.)
- Estrecho: Contenido más ajustado para legibilidad (720px)
Diseño del encabezado
- Estándar: Barra de navegación clásica
- Fijo: Permanece visible al desplazarse
- Transparente: Transparente sobre imágenes hero
- Hamburguesa: Menú contraído en todos los dispositivos
Diseño del pie de página
- Simple: Una sola fila de enlaces
- Multi-columna: Secciones organizadas
- Extendido: Múltiples filas con contenido
- Mínimo: Solo copyright
Personalización avanzada
CSS personalizado
Para usuarios avanzados, agregue CSS personalizado:
- Vaya a Website → Configuración → Personalizar → Editor HTML/CSS
- Agregue su CSS en la sección de hoja de estilos personalizada
- Los estilos se aplican a todas las páginas
Variables CSS
Sobrescriba las variables del tema para un control preciso:
:root { --primary: #su-color; --secondary: #su-color; --font-family-base: "Su Fuente"; }Lista de verificación de coherencia de marca
Antes de publicar
- ☐ Logo cargado y correctamente dimensionado
- ☐ Los colores primario y secundario coinciden con las directrices de la marca
- ☐ Las fuentes son consistentes en todas las páginas
- ☐ Los estilos de botones son uniformes
- ☐ Favicon cargado (icono de pestaña del navegador)
- ☐ Imagen de vista previa para redes sociales configurada
- ☐ Apariencia móvil probada
- ☐ El contraste de colores cumple con los estándares de accesibilidad
Buenas prácticas
- Menos es más: Limítese a 2-3 colores y 2 fuentes como máximo
- Contraste: Asegúrese de que el texto sea legible en todos los fondos
- Consistencia: Use los mismos estilos en todas las páginas
- Pruebas: Previsualice en múltiples dispositivos y navegadores
- Accesibilidad: Use las pautas de relación de contraste WCAG (4.5:1 para texto)