Tema general¶
Odoo cuenta con varias opciones para configurar el tema de su sitio web, incluidos sus colores, fuentes y diseño.
Al configurar su sitio web por primera vez se le pedirá que seleccione un tema. Pase el cursor sobre los temas para ver una vista previa extendida de los mismos y haga clic en uno para seleccionarlo.
Nota
Si no selecciona un tema al crear su sitio web, este usará el tema predeterminado.
Si lo desea, puede cambiar el tema después.
La pestaña Tema del creador de sitios web cuenta con 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.
Haga clic en Guardar para confirmar los cambios que haga hecho y aplicarlos a su sitio web.
Tema¶
Haga clic en Cambiar tema en la sección Sitio web para abrir el selector de temas. Pase el cursor sobre los temas para ver una vista previa extendida de los mismos y haga clic en uno para aplicarlo a su sitio web.
Colores¶
El editor de sitios web de Odoo cuenta con dos tipos principales de colores, que son los colores del tema y los colores de estado.
Colores del tema¶
Los colores del tema es el conjunto de colores que aparecen en todas las páginas de su sitio web. Este conjunto consta de cinco colores: tres colores principales, un color claro y un color oscuro.
Para editar los colores de su sitio web, vaya a la sección Colores del editor y haga lo siguiente:
Haga clic en el punto de color que desea cambiar y luego seleccione un color sólido o haga clic en Personalizado para elegir un tono de color específico de forma manual (o escribir su código #HEX o RGBA).
Haga clic en el icono de la paleta de pintura y elija una paleta de colores. Esta acción restablecerá todas las personalizaciones que haya hecho relacionadas con colores. Haga clic en un punto de color para cambiar un color específico.
Odoo crea valores predeterminados de color en automático para la paleta que eligió. Estos valores son combinaciones de colores predefinidas aplicadas a diferentes elementos de su sitio web para que este tenga un diseño estructurado y visualmente llamativo. Cuando selecciona una paleta de colores, los valores preestablecidos definen cómo se distribuyen esos colores entre los diferentes elementos de un bloque de creación, como botones, fondos y texto. Si desea modificarlos, haga clic en Valores predeterminados de color y seleccione uno para personalizarlo. Cada uno de ellos contiene colores para el fondo, el texto, los encabezados, los enlaces y los botones primarios y secundarios del bloque de creación.
Seleccione un bloque de creación de su sitio para aplicar un valor predeterminado de color, vaya a la pestaña Personalizar, haga clic en el punto de color que se encuentra junto a Fondo y elija un tema.
Nota
Cambiar el color de los valores preestablecidos actualizará en automático los colores del valor predeterminado y de los bloques de creación donde se utiliza.
Colores de estado¶
Los colores de estado sirven para indicar el estado de ciertas acciones (por ejemplo, en caso de éxito, de una advertencia, etc.). Estos se utilizan en mensajes emergentes que aparecen para proporcionarle información a los usuarios y visitantes del sitio web. Para personalizar los colores de estado de su sitio web, diríjase a la sección Avanzado y haga clic en los puntos para cambiar su color.
Example
Diseño de la página¶
La opción Diseño de la 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 la página, elija una imagen para personalizar el fondo y seleccione un patrón o deje la opción vacía.
Fuentes¶
Odoo le permite personalizar la fuente y el tamaño de elementos específicos de su sitio web, como párrafos, encabezados, botones y campos de entrada.
Familia de la fuente: Seleccione una fuente en el menú desplegable de las secciones Párrafo, Títulos y Botón.
Tamaño de la fuente: Use el campo Tamaño de la fuente de las secciones Párrafo, Títulos, Botón y Campos de entrada para definir un tamaño predeterminado. Haga clic en el icono (flecha) para expandir la sección y definir tamaños personalizados (por ejemplo, según el nivel del título, el tamaño del botón, entre otras cosas).
Además, las secciones específicas de cada elemento ofrecen otras opciones para personalizar más el estilo, como ajustar la altura de la línea y los márgenes.
Fuentes personalizadas¶
En su sitio web puede utilizar fuentes que no están disponibles en Odoo de forma predeterminada. Para agregar una, haga clic en el menú desplegable relacionado con el campo Familia de la fuente y presione la opción Agregar una fuente personalizada que se encuentra al final del menú desplegable. En la ventana emergente:
Haga clic en Seleccione una fuente de Google Fonts… para agregar una perteneciente a esta página, luego seleccione la fuente correspondiente. Desactive la opción Almacenar la fuente en los servidores de Google si opera su sitio web desde una ubicación donde las normas requieren el cumplimiento de leyes como 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 del de Google.
Haga clic en Elegir archivo para subir una fuente personalizada desde su computadora.
Haga clic en Guardar y actualizar una vez que haya terminado.
Estilos de los botones¶
Diríjase a la sección Botón del editor del sitio web para personalizar el estilo de los botones primarios y secundarios de su sitio web. Una vez allí, edite las opciones correspondientes:
Haga clic en la flecha junto a los campos Estilo primario o Estilo secundario y seleccione uno de los estilos disponibles para cada tipo de botón: Relleno, Contorno o Plano. Si selecciona Contorno aparecerá la opción Ancho del borde que le permitirá ajustar el ancho del contorno del botón.
Ajuste el padding para cambiar el tamaño del espaciado (en píxeles) alrededor de las etiquetas de los botones.
Use la opción Esquinas redondeadas para personalizar el radio del borde de los botones.
Seleccione la animación que se activará al hacer clic en el botón desde el menú desplegable Efecto al hacer clic.
Truco
Puede definir tamaños pequeños y grandes personalizados para el relleno, el tamaño de la fuente y las esquinas redondeadas de los botones: haga clic en el icono (flecha) y utilice los campos correspondientes.
Estilo del enlace¶
Haga clic en Estilo del enlace en la sección Enlace para elegir la apariencia de los enlaces en su sitio web. Seleccione Sin subrayado, Subrayar al pasar el cursor por encima o Siempre subrayado en el menú desplegable.