Tema general¶
Odoo provides a range of theme customization options to define the website’s colors, fonts, and shadow styles, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
Nota
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout’s background:
Click Save to apply the changes to the website.
Colores¶
Odoo’s website editor features two main types of colors: theme colors and status colors. Click the color palette bar to open the Website / Colors menu in the Theme tab.
Colores del tema¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To customize the theme colors:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
Truco
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
Nota
Cambiar un ajuste de color actualiza automáticamente los colores tanto del ajuste predeterminado como de los bloques de construcción que lo utilizan.
Colores de estado¶
Status colors indicate the status of certain actions (e.g., Success, Warning, etc.). They are used in pop-up messages that appear to provide feedback to users and website visitors. To customize the website’s Status Colors, go to the Advanced section and click the dots to change their color. You can also configure Grays.
Example
La información relacionada con una acción exitosa en el sitio web aparece en verde.
Fuentes¶
Odoo te permite personalizar la familia de fuentes y el tamaño de fuente de los elementos del sitio web, incluyendo párrafos y encabezados, botones, y campos de entrada.
Tamaño de fuente: en las secciones Párrafo, Encabezados, Botón y Campos de entrada, utiliza el campo Tamaño de fuente para establecer un tamaño predeterminado. Haz clic en el icono (Alternar más opciones) para expandir la sección y definir tamaños personalizados (p. ej., según el nivel de encabezado, tamaño del botón, etc.).
Familia de fuentes: en las secciones Párrafo, Encabezados y Botón, selecciona una fuente del menú desplegable.
Nota
Cuando se selecciona Fuentes del sistema, Odoo utiliza las fuentes nativas ya instaladas en el sistema operativo del visitante. Por ejemplo, Android utiliza Roboto como su fuente del sistema predeterminada.
Fuentes personalizadas¶
Para añadir una fuente personalizada no disponible por defecto en Odoo, haz clic en el desplegable Familia de fuentes y selecciona Añadir una fuente personalizada en la parte inferior. En la ventana emergente Añadir una fuente de Google o subir una fuente personalizada:
Para añadir una fuente de Google, abre el desplegable Seleccionar una fuente de Google y selecciona la fuente deseada. Desactiva Servir fuente desde servidores de Google si tu sitio web opera desde una ubicación donde las regulaciones requieren cumplimiento con leyes como, entre otras, el RGPD de la Unión Europea. Esto garantizará que la fuente de Google se almacene en el servidor del sitio web en lugar de en los servidores de Google.
Para subir una Fuente personalizada desde tu ordenador, haz clic en Elegir archivo.
Una vez hecho, haz clic en Guardar y recargar.
Truco
Se muestra una Vista previa de la fuente seleccionada en el lado derecho de la ventana.
Estilos¶
La apariencia de los elementos del sitio web se puede personalizar aún más. Por ejemplo, puedes personalizar párrafos y encabezados, botones, enlaces, y campos de entrada.
Párrafos y encabezados¶
Las secciones Párrafo y Encabezados ofrecen opciones de estilo adicionales para estos elementos de texto. Puedes:
Modificar la configuración de fuentes.
Ajustar la Altura de línea para definir el espaciado entre líneas de texto.
Ajustar los Márgenes para definir el espaciado alrededor de párrafos y encabezados.
Botones¶
Para personalizar el estilo de los botones primarios y secundarios del sitio web, navega a la sección Botón y edita las opciones relevantes:
Abre el menú desplegable junto a los campos Estilo primario o Estilo secundario para cambiar el estilo de cada tipo de botón, como 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.
Modificar la configuración de fuentes.
Ajusta el Relleno para cambiar el espaciado alrededor de las etiquetas de los botones.
Usa la opción Esquinas redondeadas para ajustar el radio del borde de los botones.
Agrega una animación cuando se haga clic en un botón en el menú desplegable Efecto al hacer clic.
Truco
Para 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 (Activar más opciones) y luego usa los campos relacionados.
Enlaces¶
En la sección Enlace, abre el menú desplegable junto a Estilo de enlace para elegir la apariencia de los enlaces en el sitio web. Puedes elegir entre:
Sin subrayado;
Subrayar al pasar el ratón; o
Siempre subrayado.
Campos de entrada¶
Para personalizar el estilo de los campos de entrada del sitio web, navega a la sección Campos de entrada y edita las opciones relevantes:
Ajusta el Relleno para cambiar el espaciado alrededor de los campos.
Modificar la configuración de fuentes.
Personaliza el Ancho del borde alrededor de los campos.
Define un Radio del borde para redondear las esquinas de los campos.
Elige un Fondo color para rellenar los campos.
Shadows¶
Configure the default shadow styles used across sections, cards, and other elements. To customize them, go to the Shadow section, and define the Color, Blur, and Spread values for each shadow size: Normal, Small, and Large. These settings serve as the default shadow styles. Whenever you apply a shadow option to a building block or another website element, the corresponding configured shadow option is automatically applied.
Configuración avanzada¶
Additional settings can be configured in the Advanced section, such as showing or hiding the header and using Code Injection for website verification through an HTML tag.
También puedes configurar Google Maps para mostrar mapas y habilitar funciones de geolocalización en el sitio web, por ejemplo, en la página Contacto y en fragmentos específicos. Para configurar esta opción:
Ve a tu cuenta de Google.
Habilita la API Maps Static, la API Maps JavaScript y la API Places.
Importante
No habilites Places API (nueva), ya que aún no es compatible con Odoo.
El uso de las API de Google podría requerir pago a Google.
Crea una clave de API y cópiala.
En el editor del sitio web de Odoo, ve a la pestaña Tema y, en la sección Avanzado, haz clic en Clave personalizada junto a Google Map.
Pega la clave de API generada en el campo Clave de API.
Haga clic en Guardar.