Tema general¶
Odoo ofrece varias opciones para definir el tema de su sitio web, incluyendo sus colores, fuentes y diseño de página.
Al configurar su sitio web por primera vez, se le pide que seleccione un tema. Pase el cursor por encima de los temas para ver una vista previa ampliada de cada uno. Haga clic en un tema para seleccionarlo.
Nota
Si sale sin seleccionar un tema, su sitio web se crea utilizando el tema predeterminado.
Si lo necesita, puede cambiar de tema más adelante.
En el creador de sitios web, la pestaña Tema ofrece varias opciones para personalizar el tema general de su sitio web. Para acceder a ella, haga clic en Editar y vaya a la pestaña Tema.
Una vez que haya realizado los cambios deseados, haga clic en Guardar para confirmarlos y aplicarlos a su sitio web.
Tema¶
En la sección Sitio web, haga clic en Cambiar tema para abrir el selector de temas. Pase el cursor por encima de los temas para ver una vista previa ampliada de cada uno. Haga clic en un tema para aplicarlo a su sitio web.
Colores¶
El editor de sitios web de Odoo cuenta con dos tipos principales de colores: los colores del tema y los colores de estado.
Colores del tema¶
Los colores del tema se refieren al conjunto de colores que se muestran en todas las páginas de su sitio web. Están formados por cinco colores: tres colores principales y dos colores, uno claro y otro oscuro.
Para editar los colores de su sitio web, vaya a la sección Colores en el editor del sitio web y, a continuación:
Haga clic en el punto de color que desea cambiar y, a continuación, seleccione un color Sólido o haga clic en Personalizado para elegir manualmente un tono de color específico (o añadir su código #HEX o RGBA).
Haga clic en el icono de la paleta de pintura y elija una paleta de colores. Como resultado, todas las personalizaciones de color se restablecen; haga clic en un punto de color para cambiar un color específico.
Odoo crea automáticamente Ajustes predefinidos de color para la paleta que ha elegido. Se trata de combinaciones de colores predefinidas que se aplican a los diferentes elementos de su sitio web para ofrecer un diseño estructurado y visualmente atractivo. Al seleccionar una paleta de colores, sus ajustes predefinidos determinan cómo se distribuyen esos colores entre los diferentes elementos de un bloque de creación, como los botones, los fondos y el texto. Si desea modificarlos, haga clic en Ajustes predefinidos de color y haga clic en un ajuste predefinido para personalizarlo más. Cada ajuste predefinido de color contiene los colores del fondo, el texto, los encabezados, los enlaces, los botones primarios y los botones secundarios de su bloque de creación.
- menu
- Website ‣ Edit ‣ Theme ‣ Colors
- shows
- The Theme tab of the editor sidebar showing the five color presets with their color combinations.
- highlight
- The color presets (red frame).
- data
- Demo website 'My Website' in the website editor.
- module
- website
- notes
- English UI, light theme, 1440px width.
Para aplicar un ajuste predefinido de color a un bloque de creación de su sitio, seleccione el bloque de creación, vaya a la pestaña Personalizar, haga clic en el punto de color situado junto a Fondo y elija 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 determinadas acciones (por ejemplo, Éxito, Advertencia, etc.). Se utilizan en los mensajes emergentes que aparecen para proporcionar información a los usuarios y visitantes del sitio web. Para personalizar los Colores de estado de su sitio web, desplácese hasta la sección Avanzado y haga clic en los puntos para cambiar su color.
Example
- menu
- Website ‣ Edit ‣ Theme ‣ Colors ‣ Advanced
- shows
- The advanced color settings with the status colors (Success, Info, Warning, Error) and their color pickers.
- highlight
- The status colors (red frame).
- data
- Demo website 'My Website' in the website editor.
- module
- website
- notes
- English UI, light theme, 1440px width.
- menu
- (website)
- shows
- A published page showing a success pop-up message rendered in the theme's Success color.
- highlight
- The success pop-up (red frame).
- data
- Demo website 'My Website' in the website editor.
- module
- website
- notes
- English UI, light theme, 1440px width.
Diseño de página¶
La opción Diseño de página de la sección Sitio web le permite cambiar la visualización general y el espaciado de los bloques de creación y los elementos del sitio web en las páginas. Haga clic en el menú desplegable y seleccione el diseño deseado. En Diseño de página, personalice su Fondo eligiendo una Imagen, utilizando una imagen seleccionada en un Patrón, o dejándolo en blanco.
Fuentes¶
Odoo le permite personalizar la familia y el tamaño de fuente de elementos específicos de su sitio web, incluidos párrafos, encabezados, botones y campos de entrada.
Familia de fuentes: en las secciones Párrafo, Encabezados y Botón, seleccione una fuente en el menú desplegable.
Tamaño de fuente: en las secciones Párrafo, Encabezados, Botón y Campos de entrada, utilice el campo Tamaño de fuente para definir un tamaño predeterminado. Haga clic en el icono (flecha) para desplegar la sección y definir tamaños personalizados (por ejemplo, según el nivel de encabezado, el tamaño del botón, etc.).
Además, cada sección específica de un elemento ofrece opciones de estilo adicionales, como Altura de línea y Márgenes, para una mayor personalización.
Fuentes personalizadas¶
Es posible utilizar en su sitio web fuentes que Odoo no ofrece de forma predeterminada. Para añadir una fuente personalizada, haga clic en el menú desplegable relacionado con el campo Familia de fuentes y seleccione Añadir una fuente personalizada en la parte inferior del menú desplegable. En la ventana emergente:
Para añadir una fuente de Google, haga clic en Seleccionar una fuente de Google y haga clic en la fuente deseada de la lista. Desactive la opción Servir fuente desde los servidores de Google si su sitio web opera desde una ubicación donde la normativa exige 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 su sitio web en lugar de en el de Google.
Para subir una fuente personalizada desde su ordenador, haga clic en Elegir archivo.
Una vez hecho esto, haga clic en Guardar y recargar.
Estilo de enlace¶
En la sección Enlace, haga clic en Estilo de enlace para elegir la apariencia de los enlaces en su sitio web. Seleccione Sin subrayado, Subrayado al pasar el cursor o Siempre subrayado en el menú desplegable.