Tema general¶
Odoo provides a range of theme customization options to define the website’s colors and fonts, 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 by:
Click Save to apply the changes to the website.
Colores¶
El editor de sitios web de Odoo presenta dos tipos principales de colores: colores de tema y colores de estado.
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 edit the website’s colors, navigate to the Colors section of the Theme tab. Then:
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¶
Los colores de estado indican el estado de ciertas acciones (p. ej., Éxito, Advertencia, etc.). Se utilizan en mensajes emergentes que aparecen para proporcionar información a los usuarios y visitantes del sitio web. Para personalizar los Colores de estado del sitio web, desplázate hacia abajo hasta la sección Avanzado y haz clic en los puntos para cambiar su color.
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.
Configuración avanzada¶
Se pueden configurar ajustes adicionales en la sección Avanzado, como mostrar u ocultar el encabezado, usar Inyección de código para la verificación del sitio web mediante una etiqueta HTML, y configurar colores de estado y Grises.
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.