Tema general¶
Odoo ofrece varias opciones para dar forma al tema de tu sitio web, incluyendo sus colores, fuentes y diseño.
Al configurar tu sitio web por primera vez, se te solicita seleccionar un tema. Pasa el mouse sobre los temas para ver una vista previa extendida de cada uno. Haz clic en un tema para seleccionarlo.
Nota
Si sales sin seleccionar un tema, tu sitio web se crea usando el predeterminado.
Puedes cambiar de tema más tarde si es necesario.
En el constructor del sitio web, la pestaña Tema ofrece varias opciones para personalizar el tema general de tu sitio web. Para acceder a ella, haz clic en Editar y ve a la pestaña Tema.
Una vez que hayas realizado los cambios deseados, haz clic en Guardar para confirmarlos y aplicarlos a tu sitio web.
Tema¶
En la sección Sitio web, haz clic en Cambiar tema para abrir el selector de temas. Pasa el mouse sobre los temas para ver una vista previa extendida de cada uno. Haz clic en un tema para aplicarlo a tu sitio web.
Colores¶
El editor de sitios web de Odoo presenta dos tipos principales de colores: colores de tema y colores de estado.
Colores del tema¶
Los colores de tema se refieren al conjunto de colores que se muestran en todas las páginas de tu sitio web. Estos están compuestos por cinco colores: tres colores principales y dos colores claro y oscuro.
Para editar los colores de tu sitio web, ve a la sección Colores en el editor del sitio web y luego:
Haz clic en el punto de color que deseas cambiar, luego selecciona un color Sólido o haz clic en Personalizado para elegir un tono de color específico manualmente (o agregar su código #HEX o RGBA).
Haz clic en el icono de la paleta de pintura y elige una paleta de colores. Como resultado, todas las personalizaciones de color se restablecen; haz clic en un punto de color para cambiar un color específico.
Odoo crea automáticamente Preajustes de color para tu paleta elegida. Estos son combinaciones de colores predefinidas aplicadas a diferentes elementos de tu sitio web para proporcionar un diseño estructurado y visualmente atractivo. Cuando seleccionas una paleta de colores, sus preajustes definen cómo se distribuyen esos colores en diferentes elementos de un bloque de construcción, como botones, fondos y texto. Si deseas modificarlos, haz clic en Preajustes de color y haz clic en un preajuste para personalizarlo más. Cada preajuste de color contiene colores para el fondo de tu bloque de construcción, texto, encabezados, enlaces, botones principales y botones secundarios.
Para aplicar un preajuste de color a un bloque de construcción en tu sitio, selecciona el bloque de construcción, ve a la pestaña Personalizar, haz clic en el punto de color ubicado junto a Fondo y elige un Tema.
Nota
Al cambiar el color del preajuste hará que se actualicen en automático los colores de el preajuste predeterminado y de los bloques de creación donde se usó el preajuste.
Colores de estado¶
Los colores de estado se utilizan para indicar el estado de ciertas acciones (p. ej., Éxito, Advertencia, etc.). Se usan en mensajes emergentes que aparecen para proporcionar retroalimentación a los usuarios y visitantes del sitio web. Para personalizar los Colores de estado de tu sitio web, desplázate hacia abajo hasta la sección Avanzado y haz clic en los puntos para cambiar su color.
Example
Diseño de página¶
La opción Diseño de página en la sección Sitio web te permite cambiar la visualización general y el espaciado de los bloques de construcción y elementos del sitio web en las páginas. Haz clic en el menú desplegable y selecciona el diseño deseado. En Diseño de página, personaliza tu Fondo eligiendo una Imagen, usando una imagen seleccionada en un Patrón, o dejándolo en blanco.
Fuentes¶
Odoo te permite personalizar la familia de fuentes y el tamaño para elementos específicos en tu sitio web, incluyendo párrafos, encabezados, botones y campos de entrada.
Familia de fuentes: en las secciones Párrafo, Encabezados y Botón, selecciona una fuente del menú desplegable.
Tamaño de fuente: en las secciones Párrafo, Encabezados, Botón y Campos de entrada, usa el campo Tamaño de fuente para establecer un tamaño predeterminado. Haz clic en el icono (flecha) para expandir la sección y definir tamaños personalizados (por ejemplo, según el nivel de encabezado, tamaño de botón, etc.).
Además, cada sección específica de elemento ofrece opciones de estilo adicionales, como Altura de línea y Márgenes, para una mayor personalización.
Fuentes personalizadas¶
Es posible usar fuentes en tu sitio web que no se ofrecen de forma predeterminada en Odoo. Para agregar una fuente personalizada, haz clic en el menú desplegable relacionado con el campo Familia de fuentes y selecciona Agregar una fuente personalizada en la parte inferior del menú desplegable. En la ventana emergente:
Para agregar una fuente de Google, haz clic en Seleccionar una fuente de Google y haz clic en la fuente deseada en la lista. Desactiva Servir fuente desde servidores de Google si tu sitio web se opera desde una ubicación donde las regulaciones requieren el cumplimiento de leyes como, entre otras, el RGPD de la Unión Europea. Esto garantizará que la fuente de Google se almacene en el servidor de tu sitio web en lugar del de Google.
Para cargar una fuente personalizada desde tu ordenador, haz clic en Elegir archivo.
Una vez hecho, haz clic en Guardar y recargar.
Estilos de botones¶
Para personalizar el estilo de los botones primarios y secundarios de tu sitio web, navega a la sección Botón en el editor del sitio web y edita las opciones relevantes:
Haz clic en la flecha junto a los campos Estilo primario o Estilo secundario y selecciona uno de los estilos disponibles para cada tipo de botón: Relleno, Contorno o Plano. Al seleccionar Contorno, aparece la opción Ancho del borde debajo, lo que te permite ajustar el ancho del contorno del botón.
Ajusta el Relleno para cambiar el tamaño del espaciado (en píxeles) alrededor de las etiquetas de los botones.
Personaliza el radio del borde de los botones usando la opción Esquinas redondeadas.
Agrega una animación cuando se haga clic en un botón en el menú desplegable Efecto al hacer clic.
Truco
Puedes definir tamaños personalizados Pequeño y Grande para el Relleno, Tamaño de fuente y Esquinas redondeadas de los botones: haz clic en el icono (flecha) y usa los campos relacionados.
Estilo de enlace¶
En la sección Enlace, haz clic en Estilo de enlace para elegir la apariencia de los enlaces en tu sitio web. Selecciona Sin subrayado, Subrayar al pasar el cursor o Siempre subrayado en el menú desplegable.