Encabezados y pies de página

The website header is the top section of a web page and typically includes elements such as the logo, navigation menu, search bar, and sign-in or customer account button. The footer is displayed at the bottom of a web page and usually contains contact details, links, legal notices, and other useful information. Both can be customized as needed.

Contenido del encabezado

The header includes company information, quick-access buttons, and website menus to help users navigate the website effectively. Well-structured, user-friendly headers and menus also play an important role in improving search engine rankings.

Editor de menú

The menu editor allows you to edit the website header and add menu items and mega menus.

To open the menu editor, go to Website ‣ Site ‣ Menu Editor. From there, you can:

• Rename a menu item or change its URL using the (Edit Menu Item) icon.

• Delete a menu item using the (Delete Menu Item) icon.

• Move a menu item by dragging and dropping it to the desired location in the menu.

• Create a regular drop-down menu by dragging and dropping the sub-menu items to the right, underneath their parent menu.

Truco

You can also access the menu editor from the website editor. To do so, either:

• Select any menu item and click Edit Menu, or

  

• Navigate to the Style tab, and click Edit Menu next to the Header section title.

Añadir elementos de menú

Por defecto, las páginas se agregan al menú como elementos desplegables cuando se crean. Para agregar un nuevo elemento de menú, sigue estos pasos:

1. In the menu editor, click Add Menu Item.

2. In the pop-up window, enter the Title to be displayed in the menu.

3. In the URL or Email field, type / to search for an existing page on the website or # to search for an existing custom anchor.

   Nota

   To add a menu item for a page that does not exist yet, enter the new URL or anchor and click Create Page in the Edit Menu pop-up. If you add the menu item without creating the corresponding page, the link leads to a 404 error page.

4. Haz clic en Continuar.

5. Adjust the menu structure if needed.

6. Haga clic en Guardar.

Diseño del elemento de menú

To modify the menu items” design, click Edit in the upper-right corner and select the header. Then, go to the Style tab and navigate to the Navigation section. The following options are available:

• Adjust the Desktop Menu alignment for desktop devices.

• Adjust the Mobile Menu alignment and position for mobile devices.

• Choose whether Sub Menus open On Hover or On Click.

• Select a Link Style to highlight the current page in the menu.

Nota

The options available in the Navigation section may vary depending on the selected template.

Hide a dynamic menu item for non-logged-in users

To hide the Shop menu item for non-logged-in users, restrict e-commerce access to logged-in users.

To hide other menu items related to dynamic pages (i.e., a menu item generated automatically by Odoo, for example, when installing an app or module, such as Events, Courses, etc.) to non-logged-in users, follow these steps:

1. Activar el modo de desarrollador.

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

3. Expand the list of menus for the relevant website if needed.

4. Select the menu item you wish to hide.

5. In the Visible Groups section, click Add a line.

6. Search for the group Name Role / Portal, and Select it.

7. Guardar.

Truco

You can further customize the menu items on this menu item form. For example:

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

• Añade una Página relacionada o una Página de modelo relacionado.

• Asigna un Menú principal o Submenús para crear una jerarquía.

Ver también

Gestionar la visibilidad de las páginas estáticas

Megamenús

Los menús mega son similares a los menús desplegables, pero en lugar de mostrar una simple lista de submenús, muestran un panel dividido en grupos de opciones de navegación. Resultan especialmente útiles para sitios web con grandes cantidades de contenido o sitios web de comercio electrónico, ya que ayudan a incluir todas las páginas web o categorías de comercio electrónico en el menú manteniendo visibles todos los elementos del menú a la vez.

Para crear un menú mega, sigue estos pasos:

1. En el editor de menús, haz clic en Añadir elemento de menú mega.

2. En la ventana emergente, escribe el Título del menú mega.

3. Haz clic en Continuar.

4. Adjust the menu structure if needed.

5. Haga clic en Guardar.

Los menús mega se construyen con los bloques de creación predeterminados, lo que significa que cada componente debe personalizarse por separado. Para ello, haz clic en Editar en la esquina superior derecha y, luego, selecciona el menú mega. A continuación:

• Edita el texto directamente dentro del bloque de creación.

• Edita la URL de un elemento de menú seleccionando el elemento del menú mega y haciendo clic en el botón Editar.

  

• Mueve un elemento de menú arrastrando y soltando el bloque relacionado a la posición deseada en el mega menú.

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

Diseño del menú mega

Para personalizar el diseño general del menú mega y sus bloques de creación individuales, abre el editor del sitio web, ve a la pestaña Estilo y ve a la sección Menú mega. Están disponibles las siguientes opciones:

• Elige una Plantilla.

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

• Activa Categorías de comercio electrónico si corresponde.

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

Para modificar 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. Luego, ve a la pestaña Estilo y ve a la sección Encabezado o Pie de página. Están disponibles las siguientes opciones:

• Elige una Plantilla del menú desplegable.

• Selecciona un color de Fondo definiendo un estilo de tema, una opción de color Personalizado, o un Degradado.

• Configura el Ancho del contenido.

• Añade un Borde al pie de página y personaliza su tamaño, estilo y color.

• Adapta las Esquinas redondeadas para ajustar el diseño.

• Agrega una Sombra y define su Color, Desplazamiento, Desenfoque y Extensión.

Header-specific design optionsFooter-specific design options

To further customize the website’s header, use the following header-specific design options in the Header section:

• Add a Scroll Effect to determine how the header behaves while scrolling the page. Hover over an effect to preview it.

• Choose the Header Position for the selected page: Regular, Hidden, or Over The Content. When Over The Content is selected, you can also customize the Background and Text Color.

  Truco

  • To hide the header on all pages, go to the Theme tab of the website editor. Scroll down to the Advanced section and toggle Show Header off.

  • Hidden elements, including the header when applicable, are available under Invisible Elements.

• Change the Default Accent Color to either the Primary or Secondary color to visually distinguish drop-down buttons in the header.

• Define a font.

• Set the Format size and add a color if needed.

To control the visibility of specific elements, navigate to the Show/Hide Elements section of the Style tab and click the option related to the element you wish to show or hide. You can show or hide:

• Visuals, such as the Company logo, Text Elements (e.g., a phone number), and Social Links for linking all social media accounts.

• Actions, such as the Search Bar, the Language Selector, the Sign in button, and the Header Button (a Contact us button by default).

• eCommerce-specific elements: the Add to cart and Add to wishlist buttons.

• You can enable a Background for navigation icons, such as the wishlist or search bar icon.

Truco

You can also add Inner Content blocks to the header or footer for further customization, such as e-commerce-specific footer options.