Todos os menus aplicados no site são criados em Loja online -> Menu. Este manual do Sellrocket fornece instruções detalhadas sobre como criar/editar/salvar menus.
Existem dois locais para os menus: o Main navigation e o Mobile navigation. Um mesmo menu pode ser tanto o Main navigation quanto o Mobile navigation. Além disso, o tema oferece várias opções para exibir menus em qualquer lugar do site, sendo possível criar quantos menus forem necessários. Descrições mais detalhadas das opções de menus são fornecidas aqui: Adicionando um menu ao site.
Mega menu #
Os blocos de Megamenu são modelos do construtor de páginas Visual editor page builder, que permitem adicionar qualquer elemento ou widget: texto, imagens, grade de produtos e outros elementos estáticos. Na maioria dos casos, a demonstração utiliza o elemento/widget Extra menu para tornar o submenu melhor organizado e com uma aparência mais agradável.
Para criar um megamenu, é necessário criar um bloco HTML separado para cada item de menu em Loja online -> Blocos HTML -> Adicionar novo.
Assim que os blocos de Megamenu estiverem prontos, eles podem ser adicionados aos itens de menu em Loja online -> Menu -> Selecione o menu -> insira o item de menu -> Bloco HTML para o menu suspenso, que aparece apenas depois que o menu foi salvo e a página foi recarregada.
Primeiramente, é necessário definir “Largura total” ou “Tamanho definido” na opção de Design para tornar o menu suspenso do Bloco HTML disponível.
Campos personalizados do menu #
Conceção– esta opção determina a largura do bloco de megamenu: Predefinição , Largura total, Á parte, Altura total e Tamanhos de conjuntos:
- Predefinição – o menu suspenso terá a largura padrão e nenhuma opção de bloco mega aparecerá.
- Largura total – o bloco terá a largura total do contêiner do menu alinhado no centro e a opção de escolher o bloco HTML como bloco mega do menu aparecerá.
- Altura total – o bloco terá a altura total do contêiner do menu alinhado à esquerda e a opção de escolher o bloco HTML como bloco mega do menu aparecerá.
- Tamanho de conjuntos – permite definir o tamanho personalizado do bloco e a opção de escolher o bloco HTML como bloco mega do menu aparecerá.
- Á parte – arranja os subitens ao lado, mostrando seus menus suspensos ao passar o mouse como abas. Confira na nossa demonstração aqui.
Bloco HTML para o menu suspenso – este menu suspenso aparece se “Largura total” ou “Tamanho de conjuntos” for escolhido no menu Conceção e apresenta todos os blocos HTML existentes para seleção como bloco de megamenu.
Carregar menu suspenso com AJAX – opção para carregar blocos HTML com AJAX para otimizar o desempenho.
Dropdown color scheme – escuro ou branco. Um esquema de cores escuro garante texto escuro e fundo claro. Um esquema de cores claro garante texto claro e fundo escuro para o bloco de megamenu.
Abrir no evento do rato – permite definir evento de passar o rato ou clique no item do menu, como resultado o bloco de megamenu aparecerá ao passar o rato ou clicar.
Texto do etiqueta – opção para adicionar uma dica de ferramenta personalizada ao item do menu.
Imagem. Podes carregar um ícone para ser exibido imediatamente antes do texto do item do menu. SVG ou PNG são recomendados aqui.
Usar a imagem como. Podes exibir a imagem carregada como um ícone ao lado do texto do item do menu ou como um fundo para o menu suspenso.
Cor do etiqueta – a opção para definir a cor da dica de ferramenta no item do menu.
Nome do ícone este campo suporta apenas ícones da fonte fornecida pela fonte FontAwesome – o campo requer a inserção da palavra-chave do ícone FontAwesome.
Por exemplo, o código de ícone ID home parece assim: <i class=”fas fa-home”></i>
É necessário extrair a parte que identifica o ícone, que é “fas fa-home“, e inseri-la no campo.
Âncora de página – permite usar um menu de navegação de uma única página. Se ativado, é necessário definir o link para este item como este: http://seu_site.com/pagina_inicial/#id_da_âncora onde id_da_âncora será o ID da LINHA na sua página inicial.
Classes CSS (opcional) permitem inserir uma classe e atribuir CSS personalizado, além de inserir a classe “woodmart-open-newsletter” que atribuiria o item do menu ao pop-up promocional do tema.
