Encabezados y pies de página

El encabezado del sitio web es la sección superior de una página web y generalmente contiene elementos como el logotipo, el menú, la barra de búsqueda, el botón de inicio de sesión/cuenta de cliente, etc. El pie de página se muestra en la parte inferior de una página web y generalmente contiene información como datos de contacto, enlaces, avisos legales y otras opciones.

Diseño del encabezado

Para modificar el diseño del encabezado, haga clic en Editar y luego haga clic en el encabezado. Las siguientes opciones están disponibles en la sección Encabezado de la pestaña Personalizar en el editor del sitio web:

  • Elija una Plantilla en el menú desplegable.

  • Seleccione los ajustes de Fondo para cambiar la paleta de colores mediante diferentes estilos de tema, opciones de color Personalizado y de Degradado.

  • Al agregar un Borde al encabezado, se pueden definir su tamaño, estilo y color.

  • Adapte las Esquinas redondeadas para que se ajusten al diseño.

  • Agregue una Sombra y defina su Color, Desplazamiento, Desenfoque y Expansión.

  • Agregue un Efecto de desplazamiento. Coloque el cursor sobre un efecto para obtener una vista previa.

  • Elija la Posición del encabezado entre Regular, Oculto y Sobre el contenido. Cuando se selecciona Sobre el contenido, puede personalizar el Fondo y el Color de texto.

  • Muestre u oculte Elementos como el texto, la barra de búsqueda, el botón Iniciar sesión, los enlaces a redes sociales, el botón Contáctenos y el logotipo.

Para finalizar los cambios, haga clic en Guardar.

Truco

Para ocultar el encabezado, haga clic en Editar, haga clic en el encabezado y vaya a la pestaña Tema del editor del sitio web. Desplácese hasta la sección Avanzado y active o desactive el interruptor Mostrar encabezado para ocultar o mostrar el encabezado.

Contenido del encabezado

Los menús organizan el contenido del encabezado y ayudan a los usuarios a navegar por las páginas web de forma eficaz. Los menús fáciles de usar y bien estructurados también desempeñan un papel crucial para mejorar el posicionamiento en motores de búsqueda.

Agregar elementos de menú

De forma predeterminada, las páginas se agregan al menú como elementos de menú desplegable cuando se crean. Para agregar un nuevo elemento de menú, siga estos pasos:

  1. Vaya a Sitio web ‣ Sitio ‣ Editor de menú.

  2. En el editor de menús, haga clic en Agregar elemento de menú.

  3. En la ventana emergente, introduzca el Nombre que se mostrará en el menú.

  4. Escriba / en el campo URL o correo electrónico para buscar una página en su sitio web, o # para buscar un ancla personalizada existente.

  5. Haga clic en Aceptar.

  6. Edite la estructura del menú si es necesario y, a continuación, haga clic en Guardar.

Megamenús

Los mega menús son similares a los menús desplegables, pero en lugar de una simple lista de submenús, muestran un panel dividido en grupos de opciones de navegación. Esto los hace adecuados para sitios web con grandes cantidades de contenido o sitios de comercio electrónico, ya que pueden ayudar a incluir todas sus páginas web o categorías de comercio electrónico en el menú mientras se mantienen visibles todos los elementos de menú a la vez.

screenshot: website-header-footer-mega-menu
menu
(website)
shows
The website navigation bar with a mega menu dropped down over the page, showing its columns of links and images.
highlight
The opened mega menu (red frame).
data
Mega menu 'Services' with three columns.
module
website
notes
English UI, light theme, 1440px width.

Para crear un mega menú, vaya a Sitio web ‣ Sitio ‣ Editor de menú y haga clic en Agregar elemento de mega menú. Escriba el Nombre del mega menú en la ventana emergente, haga clic en OK y luego en Guardar.

Para adaptar las opciones y el contenido del mega menú, haga clic en un elemento del mega menú en el encabezado y luego haga clic en Editar. Los mega menús están compuestos por bloques de creación, lo que significa que puede personalizar cada componente individualmente. Por ejemplo:

  • Edite el texto directamente en el bloque de creación.

  • Edite la URL de un elemento de menú seleccionándolo y haciendo clic en el botón Editar enlace en la pequeña ventana emergente de vista previa. Escriba / para buscar una página en su sitio web, o # para buscar un ancla personalizada existente.

    screenshot: website-header-footer-mega-menu-option
    menu
    Website ‣ Edit ‣ (mega menu)
    shows
    The editor's right sidebar for a selected mega menu with the Template and Size options.
    highlight
    The Template option (red frame).
    data
    Demo website 'My Website'.
    module
    website
    notes
    English UI, light theme, 1440px width.

  • Mueva un elemento de menú arrastrando y soltando el bloque correspondiente en la posición deseada dentro del mega menú.

  • Elimine un elemento de menú eliminando el bloque correspondiente.

Para adaptar el diseño general del mega menú, vaya a la pestaña Personalizar del editor del sitio web y, en la sección Mega menú:

  • Elija una Plantilla.

  • Seleccione el Tamaño: Ancho completo o Estrecho.

Para finalizar los cambios, haga clic en Guardar.

Mega menús de categorías automáticos

Manteniendo manualmente un mega menú sincronizado con un árbol de categorías de comercio electrónico extenso resulta tedioso. El módulo Mega Menú de Categorías Automático (website_sale_megamenu_category) genera el contenido de un mega menú a partir de las categorías de comercio electrónico.

En un elemento de mega menú del Editor de menú, active Generar mega menú automáticamente y configure lo siguiente:

  • Categoría inicial: la categoría cuyos elementos secundarios se enumeran. Déjelo vacío para empezar desde la parte superior del árbol.

  • Profundidad: cuántos niveles de subcategorías se incluyen, dos de forma predeterminada.

  • Plantilla de mega menú: el diseño utilizado para representar el menú generado.

El menú se regenera cuando cambia el árbol de categorías. Tres botones lo controlan:

  • Regenerar: reconstruye el contenido del menú a partir de las categorías;

  • Forzar regeneración (descartar cambios): lo reconstruye incluso si el menú se editó manualmente y descarta esos cambios;

  • Desvincular/hacer manual: detiene la generación automática y conserva el contenido actual como un mega menú normal editado manualmente.

screenshot: website-header-footer-auto-mega-menu
menu
Website ‣ Site ‣ Menu Editor ‣ (mega menu item)
shows
A mega menu item with Auto-generate mega menu enabled, the Starting category, Depth and Mega-menu template fields, and the Regenerate / Force regenerate / Detach buttons.
highlight
The Auto-generate mega menu checkbox and the Starting category field (red frame).
data
Starting category "Shop", depth 2, template "Columns".
module
website_sale_megamenu_category
notes
English UI, light theme, 1440px width.

Qué categorías aparecen en el menú se controla en la propia categoría. Cada categoría de eCommerce tiene un estado Mostrar en el mega menú y una opción Gestionar automáticamente la visibilidad del menú: mientras esta última está activada, una acción planificada oculta las categorías que actualmente no tienen ningún producto disponible y las vuelve a mostrar cuando lo tienen, de modo que el menú nunca lleve a una página vacía. Desactive la opción en una categoría para establecer su visibilidad de forma manual.

Los diseños en sí se gestionan en Sitio web ‣ Configuración ‣ Plantillas de mega menú, donde cada plantilla tiene su propio XML, CSS y JS, junto con un Historial de revisiones que se puede comparar y restaurar.

screenshot: website-header-footer-mega-menu-templates
menu
Website ‣ Configuration ‣ Mega Menu Templates ‣ (template)
shows
A mega menu template with its XML, CSS and JS tabs and the History section listing previous revisions with the Compare and Restore buttons.
highlight
The History section (red frame).
data
Template "Columns" with three revisions.
module
website_sale_megamenu_category
notes
English UI, light theme, 1440px width.

Nota

Los menús generados se enumeran en Sitio web ‣ Configuración ‣ Mega menús automáticos, que ofrece una vista general de todos los mega menús gestionados automáticamente y de aquellos cuyo contenido ya no coincide con el árbol de categorías.

Ocultar un elemento de menú dinámico para usuarios que no han iniciado sesión

Para ocultar un elemento de menú dinámico (es decir, un elemento de menú generado automáticamente por Odoo, por ejemplo, al instalar una aplicación o módulo, como Eventos, Cursos, etc.) para los usuarios que no han iniciado sesión, siga estos pasos:

  1. Active el modo de desarrollador.

  2. Vaya a Sitio web ‣ Configuración ‣ Menús.

  3. Expanda la lista de menús del sitio web correspondiente si es necesario y luego haga clic en el elemento de menú que desea ocultar.

  4. En la sección Grupos visibles, haga clic en Agregar una línea en Nombre del grupo.

  5. Busque el grupo Tipos de usuario / Portal, selecciónelo y luego haga clic en Seleccionar.

  6. Guardar.

Truco

Para ocultar el elemento de menú Tienda, restrinja el acceso al comercio electrónico a los usuarios que hayan iniciado sesión.