Pular para o conteúdo
Documentação do usuário

Cabeçalhos e rodapés

O cabeçalho do site é a seção superior de uma página da web e geralmente contém elementos como o logo, o menu <website/header_footer/header-content>, a barra de pesquisa, o botão de entrada/conta do cliente, etc. O rodapé é exibido na parte inferior de uma página da web e geralmente contém informações como detalhes de contato, links, avisos legais e outras opções.

Design do cabeçalho

Para modificar o design do cabeçalho, clique em Editar, depois clique no cabeçalho. As seguintes opções estão disponíveis na seção Cabeçalho da guia Personalizar no editor do site:

  • Choose a Template from the drop-down menu.

  • Select Background settings to change the color palette through different Theme styles <website/themes/theme-colors>, Custom color options, and Gradient ones.

  • When adding a Border to the header, its size, style, and color can be defined.

  • Adapt Round corners to fit the design.

  • Add a Shadow and define its Color, Offset, Blur, and Spread.

  • Add a Scroll Effect. Hover on an effect to preview it.

  • Choose the Header Position between Regular, Hidden, and Over The Content. When Over The Content is selected, you can customize the Background and Text Color.

  • Show or hide Elements such as text, the search bar, Sign in button, social media links, Contact us button, and logo.

Para finalizar as alterações, clique em Salvar.

Conteúdo do cabeçalho

Os menus organizam o conteúdo do cabeçalho e ajudam os usuários a navegar pelas páginas da web de forma eficaz. Menus amigáveis e bem estruturados também desempenham um papel crucial na melhoria do posicionamento em mecanismos de busca.

Editor de menus

O editor de menu permite editar o cabeçalho do site e adicionar itens de menu <website/header_footer/menu-items> e mega menus <website/header_footer/mega-menus>.

Para editar o conteúdo do cabeçalho, vá para Site › Site › Editor de Menu. De lá, você pode:

  • 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 place in the menu;

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

Menu editor with sub-menus

Adicionar itens de menu

Por padrão, as páginas são adicionadas ao menu como itens de menu suspenso quando são criadas. Para adicionar um novo item de menu, siga estas etapas:

  1. Go to Website › Site › Menu Editor.

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

  3. In the pop-up window, enter the Name to be displayed in the menu.

  4. Type / in the URL or Email field to search for a page on your website or # to search for an existing custom anchor.

  5. Click OK.

  6. Edit the menu structure <website/header_footer/menu-editor> if needed, then Save.

Design do item de menu

Para modificar os itens de menu, clique em Edit, clique em um item de menu e vá para a seção Navbar do editor de site. As seguintes opções estão disponíveis:

  • Adapt the Mobile Alignment.

  • Choose the Font for the menu items.

  • Change the font size, color, and alignment in the Format field.

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

  • Change the style of the header buttons <website/themes/button-styles>.

  • Choose to display the Sub Menus On Hover or On Click.

Para finalizar as alterações, clique em Salvar.

Mega menus

Os mega menus são semelhantes aos menus suspensos, mas em vez de uma simples lista de submenus, exibem um painel dividido em grupos de opções de navegação. Isso os torna adequados para sites com grandes quantidades de conteúdo ou sites de e-commerce, pois podem ajudar a incluir todas as suas páginas da web ou categorias de e-commerce <ecommerce/categories_variants/categories> no menu, mantendo todos os itens de menu visíveis ao mesmo tempo.

Mega menu in the navigation bar.

Para criar um mega menu, vá a Site › Site › Editor de menu e clique em Adicionar item de menu de mega. Insira o Nome do mega menu na janela pop-up, clique em OK e depois em Salvar.

Para adaptar as opções e o conteúdo do mega menu, clique em um item de mega menu no header e depois clique em Edit. Os mega menus são compostos por blocos de construção, o que significa que você pode personalizar cada componente individualmente. Por exemplo:

  • Edit the text directly in the building block.

  • Edit a menu item's URL by selecting the menu item and clicking the Edit link button in the small preview pop-up. Type / to search for a page on your website, or # to search for an existing custom anchor.

    Edit a mega menu option.
  • Move a menu item by dragging and dropping the related block to the desired position in the mega menu.

  • Delete a menu item by deleting the related block.

Para adaptar o layout geral do mega menu, vá para a aba Customize do editor de site e, na seção Mega Menu:

  • Choose a Template.

  • Pick the Size: either Full-Width or Narrow.

Para finalizar as alterações, clique em Salvar.

Ocultar um item de menu dinâmico para usuários não autenticados

Para ocultar um item de menu dinâmico (ou seja, um item de menu gerado automaticamente pelo Odoo, por exemplo, quando você instala um aplicativo ou módulo, como Events, Courses, etc.) para usuários não autenticados, siga estas etapas:

  1. Enable developer mode <developer-mode>.

  2. Go to Website › Configuration › Menus.

  3. Expand the list of menus for the relevant website if needed, then click the menu item you wish to hide.

  4. In the Visible Groups section, click Add a line under Group Name.

  5. Search for the group User types / Portal, select it, then click Select.

  6. Save.

Design do rodapé

Para modificar o rodapé, clique em Editar, clique no rodapé e na seção Rodapé da aba Personalizar no editor do site:

  • Select a Template.

  • Choose its Colors.

  • Choose a Slideout Effect: Regular (i.e., no effect), Slide Hover, or Shadow.

  • Toggle the Copyright switch to hide or show the copyright.

  • Choose the Border size.

  • Add a Shadow.

  • Add a Scroll Top Button and choose its position.

  • Hide or show the footer by toggling the Page visibility switch.

Para finalizar as alterações, clique em Salvar.

ON THIS PAGE