Encabezados y pies de página

El encabezado del sitio web corresponde a la sección superior de una página web y suele incluir elementos como el logotipo, el menú de navegación, la barra de búsqueda y el botón para iniciar sesión o acceder a la cuenta del cliente. El pie de página aparece en la parte inferior de una página web y suele incluir datos de contacto, enlaces, avisos legales y otra información útil. Puedes personalizar ambas secciones según tus necesidades.

Contenido del encabezado

El encabezado incluye información de la empresa, botones de acceso rápido y menús del sitio web para facilitar la navegación. Un encabezado y unos menús claros también ayudan a mejorar el posicionamiento en los motores de búsqueda.

Editor de menú

El editor de menús te permite modificar el encabezado del sitio web y agregar elementos del menú y megamenús.

Para abrir el editor de menús, ve a Sitio web ‣ Sitio ‣ Editor de menú. Desde ahí puedes:

• Cambiar el nombre de un elemento del menú o modificar su URL con el icono (Editar elemento del menú).

• Eliminar un elemento del menú con el icono (Eliminar elemento del menú).

• Mover un elemento del menú al arrastrarlo hasta la ubicación que quieras.

• Crear un menú desplegable al arrastrar y soltar los elementos del submenú hacia la derecha, abajo del menú principal correspondiente.

Truco

También puedes acceder al editor de menús desde el editor del sitio web. Para hacerlo:

• Selecciona cualquier elemento del menú y haz clic en Editar menú, o

  

• Ve a la pestaña Estilo y haz clic en Editar menú junto al título de la sección Encabezado.

Agregar elementos del menú

De forma predeterminada, las páginas se agregan al menú como elementos desplegables al crearlas. Sigue estos pasos para agregar un nuevo elemento de menú:

1. En el editor de menús, haz clic en Agregar elemento del menú.

2. En la ventana emergente, escribe el título que aparecerá en el menú.

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

   Nota

   Para agregar un elemento del menú para una página que todavía no existe, escribe la nueva URL o el ancla y haz clic en Crear página en la ventana emergente Editar menú. Si agregas el elemento del menú sin crear la página correspondiente, el enlace llevará a una página de error 404.

4. Haz clic en Continuar.

5. Si es necesario, ajusta la estructura del menú.

6. Haga clic en Guardar.

Diseño de elementos de menú

Para cambiar el diseño de los elementos del menú, haz clic en Editar en la esquina superior derecha y selecciona el encabezado. Después, ve a la pestaña Estilo y abre la sección Navegación. Tendrás las siguientes opciones:

• Ajusta la alineación del menú de escritorio para dispositivos de escritorio.

• Ajusta la alineación y la posición del menú para celulares para los dispositivos móviles.

• Elige si los submenús se abren al pasar el cursor o al hacer clic.

• Selecciona un estilo de enlace para resaltar la página actual en el menú.

Nota

Las opciones disponibles en la sección Navegación pueden variar según la plantilla seleccionada.

Ocultar un elemento dinámico del menú a los usuarios que no iniciaron sesión

Para ocultar el elemento del menú Tienda a los usuarios que no iniciaron sesión, limita el acceso al comercio electrónico a los usuarios que iniciaron sesión.

Sigue estos pasos para ocultar otros elementos del menú relacionados con páginas dinámicas (es decir, elementos del menú que Odoo genera de forma automática, por ejemplo, al instalar una aplicación o un módulo, como Eventos, Cursos, etc.) a los usuarios que no iniciaron sesión:

1. Activa el modo de desarrollador.

2. Ve a Sitio web ‣ Configuración ‣ Menus.

3. Expande la lista de menús del sitio web correspondiente en caso de que sea necesario.

4. Selecciona el elemento del menú que quieras ocultar.

5. En la sección Grupos visibles, haz clic en Agregar una línea.

6. Busca el nombre del grupo Rol / Portal y selecciónalo.

7. Guarda.

Truco

Puedes personalizar más opciones de los elementos del menú desde este formulario. Por ejemplo:

• Selecciona la casilla Nueva ventana para abrir la página en una nueva pestaña al hacer clic.

• Agrega una página relacionada o una página del modelo relacionado.

• Asigna un menú principal o menús secundarios para crear una jerarquía.

Consulta

Gestionar la visibilidad de las páginas estáticas

Mega menús

Los megamenús son similares a los menús desplegables, pero en lugar de mostrar una lista simple de submenús, muestran un panel dividido en grupos de opciones de navegación. Son muy útiles para sitios web con mucho contenido o para sitios web de comercio electrónico, ya que permiten incluir todas las páginas del sitio web o las categorías de comercio electrónico en el menú y mantener todos los elementos visibles al mismo tiempo.

Sigue estos pasos para crear un megamenú:

1. En el editor de menús, haz clic en Agregar elemento de megamenú.

2. En la ventana emergente, escribe el título del megamenú.

3. Haz clic en Continuar.

4. Si es necesario, ajusta la estructura del menú.

5. Haga clic en Guardar.

Los megamenús se crean con bloques de creación predeterminados, por lo que debes personalizar cada componente por separado. Para hacerlo, haz clic en Editar en la esquina superior derecha y selecciona el megamenú. Después:

• Edita el texto de forma directa en el bloque de creación.

• Edita la URL de un elemento del menú al seleccionar el elemento del megamenú y hacer clic en el botón Editar.

  

• Mueva un elemento de menú al arrastrar y soltar el bloque relacionado en la posición deseada del mega menú.

• Elimina un elemento del menú al hacer clic en el icono (Eliminar) del bloque correspondiente.

Diseño del megamenú

Para personalizar el diseño general del megamenú y de cada bloque de creación, abre el editor del sitio web, ve a la pestaña Estilo y abre la sección Megamenú. Tendrás las siguientes opciones:

• Elija una plantilla.

• Elija el tamaño: Ancho completo o Estrecho.

• Activa o desactiva las categorías de comercio electrónico, si corresponde.

Diseño del encabezado y del pie de página

Para cambiar el diseño del encabezado o del pie de página, haz clic en Editar en la esquina superior derecha y selecciona el encabezado o el pie de página. Después, ve a la pestaña Estilo y abre la sección Encabezado o Pie de página. Tendrás las siguientes opciones:

• Elija una plantilla con el menú desplegable:

• Selecciona un color de fondo con un estilo del tema, una opción de color personalizado o un gradiente.

• Define el ancho del contenido.

• Agrega un borde al pie de página y personaliza su tamaño, estilo y color.

• Adapte las esquinas redondeadas a su diseño.

• Agregue una sombra y defina su color, desplazamiento, desenfoque y expansión.

Header-specific design optionsFooter-specific design options

Si quieres personalizar más el encabezado del sitio web, usa las siguientes opciones de la sección Encabezado:

• Agrega un efecto de desplazamiento para definir cómo se comporta el encabezado al desplazarte por la página. Coloca el cursor sobre un efecto para ver una vista previa.

• Elige la posición del encabezado para la página seleccionada: Normal, Oculto o Sobre el contenido. Si seleccionas Sobre el contenido, también podrás personalizar el fondo y el color del texto.

  Truco

  • Para ocultar el encabezado en todas las páginas, ve a la pestaña Tema del editor del sitio web. Después, dirígete a la sección Avanzado y desactiva la opción Mostrar encabezado.

  • Los elementos ocultos, incluido el encabezado cuando corresponda, están disponibles en Elementos invisibles.

• Cambia el color de énfasis predeterminado por el color principal o secundario del tema para distinguir los botones desplegables del encabezado.

• Define una fuente.

• Define el tamaño del formato y agrega un color, si hace falta.

Para controlar la visibilidad de elementos específicos, ve a la sección Ocultar o mostrar elementos de la pestaña Estilo y haz clic en la opción correspondiente al elemento que quieras mostrar u ocultar. Puedes mostrar u ocultar:

• Elementos visuales, como el logotipo de la empresa, los elementos de texto (por ejemplo, un número de teléfono) y los enlaces a redes sociales para vincular todas las cuentas de redes sociales.

• Acciones, como la barra de búsqueda, el selector de idioma, el botón Iniciar sesión y el botón del encabezado (que, de forma predeterminada, corresponde al botón Contáctanos).

• Elementos específicos de Comercio electrónico, como los botones Agregar al carrito y Agregar a la lista de deseos.

• También puedes activar un fondo para los iconos de navegación, como el icono de la lista de deseos o el de la barra de búsqueda.

Truco

También puedes agregar bloques de contenido interno al encabezado o al pie de página para personalizarlos aún más, por ejemplo, con opciones del pie de página para comercio electrónico.