Editor de navegação no CMS bluetronix – customize o menu individualmente
Neste guia, você aprenderá como personalizar a navegação do seu site no CMS bluetronix. Desde a estrutura da Navbar até o menu para dispositivos móveis – aqui você aprenderá passo a passo como configurar seu menu da melhor forma.
Editor de navegação: personalização do menu do site
Esta documentação mostra como a Navbar (navegação do site) é estruturada no CMS bluetronix e como você pode ajustá-la. Você será guiado pela estrutura, marcadores (texto) para dispositivos móveis, barra lateral e pelo editor de navegação.
Atenção: O arquivo /bx_Header.html é visível apenas no modo desenvolvedor (login como Admin).
Local de armazenamento & visibilidade
Por padrão, a Navbar está no diretório principal em Páginas → /bx_Header.html. Você faz alterações na navegação neste arquivo.
Exemplo de código: /bx_Header.html
<div style="display:__DB_GB_DesktopHTML1_Display__" class="bx-DesktopHTML1"><!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->
__DB_GB_DesktopHTML1__
</div>
<div class="bx-nav-outer">
<nav class="bx-nav">
<!-- left Icon logo -->
<div class="bx-navbar-left">
<div style="display:__DB_GB_DesktopNavIcon_Display__">
<button class="bx-nav-icon" id="BxMobileBarToggle">__DB_GB_DesktopNavIcon_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopLogo_Display__;">
<a href="/index.html"><img src="__DB_GB_DesktopLogo_Src__" class="bx-nav-brand"></a>
</div>
</div>
<!-- center buttons -->
<div class="bx-navbar-center" id="bxNavPoints">
<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>
<ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->
<!--bxNV_Navi-->
<li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
<li class="bx-nav-item has-submenu">
<a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
<button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>
<ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
</ul>
</li>
<!--bxNV_Navi-->
<li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
</ul>
</div>
<!-- icons right -->
<div class="bx-navbar-right">
<div style="display:__DB_GB_DesktopIconSearch_Display__ ">
<button class="bx-nav-icon" onclick="BlueSearchBar();">__DB_GB_DesktopIconSearch_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLight_Display__">
<button class="bx-nav-icon" onclick="BlueLightDdark();">__DB_GB_DesktopIconLight_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLogin_Display__">
<button class="bx-nav-icon" onclick="BlueLoginBar();">__DB_GB_DesktopIconLogin_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconLang_Display__">
<button class="bx-nav-icon" onclick="BlueLangBar();">__DB_GB_DesktopIconLang_SVG__</button>
</div>
<div style="display:__DB_GB_DesktopIconBasket_Display__">
<button class="bx-nav-icon" onclick="BlueBasketBar();">__DB_GB_DesktopIconBasket_SVG__<div class="WKGBAnzDiv"><div class="WKGBAnzDivInner" id="WKGBAnz"></div></div></button>
</div>
<div style="display:__DB_GB_DesktopIconSide_Display__">
<button class="bx-nav-icon" id="BxSideBarToggle">__DB_GB_DesktopIconSide_SVG__</button>
</div>
</div>
</nav>
</div>
<!-- Mobile Menü -->
<div class="bx-mobile-bar" id="BxMobileBar">
<div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>
<div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
<div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>
</div>
<!-- Sidebar -->
<div class="bx-side-bar" id="BxSideBar">
<div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>
<div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
<div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>
</div>
<div style="display:__DB_GB_DesktopHTML2_Display__" class="bx-DesktopHTML2"><!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->
__DB_GB_DesktopHTML2__
</div>
Estrutura da Navbar
- Left Icon & Logo: Menü-Icon und Logo.
- Center Buttons: Menü-Buttons und Untermenüs.
- Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).
Entendendo marcadores (texto)
Os marcadores HTML são automaticamente substituídos ao serem salvos no CMS:
__DB_GB_DesktopHTMLxxx_Display__: Steuert die Sichtbarkeit (Aktiv/Inaktiv) über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTMLxxx__: Wird durch Inhalte (z. B. HTML, Bild-URL, SVG) ersetzt, die Du in Kopfzeile hinterlegst.__DB_Nav_xxx__: Werte aus der Navigationstabelle (z. B. Link, Name, Ziel, CSS-Klasse).__DB_GB_xxx_SVG__: SVG-Code des jeweiligen Icons.
Se você não quiser usar as opções do cabeçalho do CMS, pode remover as marcas __DB_GB_xxx__ e __DB_GB_xxx_Display__ no HTML. Elas são opcionais.
Seção: Navbar Superior
A barra adicional acima do menu rola (telefone & desktop) para fora da área visível. A Navbar real permanece visível na parte superior, 'fixa'. Assim, informações importantes (por exemplo, 'Baixar App ...') podem aparecer no topo, sem ocupar espaço permanentemente.
__DB_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.<!--bxEB_DSedit 00_Config DesktopHTML1 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.
Seção: Navbar Inferior
A barra adicional abaixo do menu também rola (telefone & desktop) para fora.
__DB_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.__DB_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.<!--bxEB_DSedit 00_Config DesktopHTML2 bxEB_DSedit-->: Editier-Button für den HTML-Eintrag.
Menu para dispositivos móveis
A Mobile-Bar aparece no modo telefone a partir do lado direito. Ao carregar a página, o JavaScript (/bx_script/BxScript_own_min.js) assume o conteúdo do menu de bxNavPoints na Mobile-Bar (BxMobileBar). Adicionalmente, você pode inserir seus próprios blocos HTML acima e abaixo do menu (por exemplo, logotipos grandes).
<div class="bx-mobile-bar" id="BxMobileBar">
<div style="display:__DB_GB_MobilHTML1_Display__" class="bx-MobilHTML1"><!--bxEB_DSedit 00_Config MobilHTML1 bxEB_DSedit-->__DB_GB_MobilHTML1__</div>
<div id="bxNavPointsMobile" style="display:__DB_GB_MobilNav_Display__"></div>
<div style="display:__DB_GB_MobilHTML2_Display__" class="bx-MobilHTML2"><!--bxEB_DSedit 00_Config MobilHTML2 bxEB_DSedit-->__DB_GB_MobilHTML2__</div>
</div>
Barra lateral
A Side-Bar entra no modo telefone a partir do lado esquerdo. Aqui também, você pode colocar blocos HTML personalizados acima/abaixo do menu (por exemplo, para grandes logotipos). Opcionalmente, o menu de navegação pode ser exibido na Sidebar.
<div class="bx-side-bar" id="BxSideBar">
<div style="display:__DB_GB_SideHTML1_Display__" class="bx-SideHTML1"><!--bxEB_DSedit 00_Config SideHTML1 bxEB_DSedit-->__DB_GB_SideHTML1__</div>
<div id="bxNavPointsSide" style="display:__DB_GB_SideNav_Display__"></div>
<div style="display:__DB_GB_SideHTML2_Display__" class="bx-SideHTML2"><!--bxEB_DSedit 00_Config SideHTML2 bxEB_DSedit-->__DB_GB_SideHTML2__</div>
</div>
Nota de Layout: Você pode optar por exibir o menu móvel ou a Side-Bar à direita/esquerda e trocar os ícones através de CMS → Página da Web → Cabeçalho.
Botões do menu & submenu
<ul style="display:__DB_GB_DesktopNav_Display__">
<!--bxNV_DB 00_Menue bxNV_DB-->
<!--bxNV_Navi-->
<li class="bx-nav-item __DB_Nav_CSSclass__"><a class="bx-nav-link" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
<li class="bx-nav-item has-submenu">
<a class="bx-nav-link __DB_Nav_CSSclass__" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a>
<button class="bx-nav-icon submenu-toggle d-none d-lg-inline" type="button"><span>__DB_GB_NavIconChevron_SVG__</span></button>
<ul class="bx-menu bx-navbar-dropdown" role="menu">
<!--bxNV_Next_Sub_Button-->
</ul>
</li>
<!--bxNV_Navi-->
<li class="bx-dropdown-item __DB_Nav_CSSclass__" role="none"><a class="bx-dropdown-link" role="menuitem" href="__DB_Nav_Link__" __DB_Nav_NewZiel__>__DB_Nav_MenuePunktName__</a></li>
<!--bxNV_Navi-->
</ul>
A estrutura do menu é construída com UL/LI e preenchida a partir da tabela de banco de dados 00_Menue. Através da marca <!--bxNV_DB 00_Menue bxNV_DB-->, você também pode especificar outra tabela.
Entre <!--bxNV_Navi--> estão os modelos HTML para os pontos principais e secundários. A marca <!--bxNV_Next_Sub_Button--> é automaticamente preenchida com as entradas do submenu.
Importante: A conexão com a função de navegação do CMS é feita através das marcas de texto. Assim, modelos personalizados também podem ser completamente integrados. A navegação é editada no submenu do CMS (sob Margem). O sistema cria automaticamente páginas e diretórios - a vinculação manual é eliminada.
Configurar ícones SVG
Você pode gerenciar o código SVG dos ícones na visão de desenvolvedor de CMS → Página da Web → Cabeçalho na parte inferior.
Controle CSS & ordem
Você pode alterar a ordem dos ícones via CSS. A Mobile-Bar pode ser exibida à direita ou à esquerda, dependendo do layout.
Dicas & truques
- In Kombination mit der Systemtabelle 00_Menue und CSS legst Du je Button fest, ob er in der Desktop-Navigation, der Mobile-Bar und/oder in der Side-Bar erscheint.
- In 00_Menue kann jedem Button eine CSS-Klasse in der Spalte CSSclass zugewiesen werden.
- Über CSS und die IDs
bxNavPoints,BxMobileBar,BxSideBarbestimmst Du, welche Buttons wo gerendert werden. So baust Du auch komplexe Navbar-Strukturen, die der Endkunde später selbst mit der CMS-Navigation verändern kann.
Botão adicional para o editor de navegação
<!-- zusatz icon Menue-Editor - display:none -->
<div style="position:relative;display:none;"><div style="position:absolute;left:15px;top:-21px;width:35px;height:35px;z-index:100000;"><!--bxEB_Navi 00_Menue bxEB_Navi--></div></div>
Assim, você insere um botão de edição adicional no modo de edição. Ao substituir 00_Menue, você pode especificar uma tabela de navegação diferente. O editor de navegação padrão sempre usa 00_Menue.
Melhores Práticas: Mantenha todos os elementos de navegação reunidos em /bx_Header.html. Assim, a Mobile-Bar, a Side-Bar e a Navbar do desktop permanecem consistentes, e a troca da fonte de dados (por exemplo, uma tabela diferente de 00_Menue) é rápida.
FAQ
o que os clientes nos perguntam frequentemente
A Navbar está localizada no diretório principal em Páginas ⯈ /bx_Header.html. Lá você pode fazer todas as alterações na navegação do site.
Por que não vejo o arquivo /bx_Header.html?
O arquivo só é visível no Modo de Desenvolvedor. Faça login como AAdmin para obter acesso.
Como a Navbar é estruturada?
A Navbar consiste em três áreas principais: – Ícone e Logo Esquerda: Ícone de menu e logotipo – Botões Centrais: Navegação principal e submenus – Ícones Direito: Ícones de função como pesquisa, login ou carrinho de compras
O que significam os marcadores de posição (marcas de texto) no código HTML?
Os marcadores de posição são automaticamente substituídos ao salvar no CMS. Por exemplo, none controla a visibilidade de um elemento, enquanto insere o conteúdo real. Você pode configurar essas marcas em CMS ⯈ Página da Web ⯈ Cabeçalho.
Posso remover as marcas de texto?
Sim, se você não quiser usar as opções de cabeçalho do CMS, pode simplesmente excluir marcas como ou . Elas são opcionais.
Como posso adicionar conteúdo acima e abaixo da Navbar?
Por meio das áreas Navbar-Top e Navbar-Bottom, você pode ativar barras adicionais. Elas são controladas através de CMS ⯈ Página da Web ⯈ Cabeçalho e preenchidas com conteúdos HTML.
Como funciona o Menu Móvel?
No modo telefone, a Mobile-Bar entra a partir do lado direito. O conteúdo do menu é automaticamente assumido do menu do desktop. Você pode inserir blocos HTML adicionais como logotipos acima e abaixo.
Como ativo a Sidebar?
A barra lateral abre-se no modo telefone a partir do lado esquerdo. Aqui você também pode adicionar seus próprios blocos HTML. O layout é controlado por CMS ⯈ Site ⯈ Cabeçalho.
Posso decidir se a navegação aparece na barra lateral ou na barra móvel?
Sim, por meio das opções de layout você pode escolher se sua navegação é exibida na barra lateral ou na barra móvel. Além disso, você pode definir em qual página (esquerda/direita) ela aparece através dos ícones.
Como é gerido o menu no CMS?
A estrutura do menu é gerada a partir da tabela do sistema 00_Menu. Você pode editá-la no CMS em Margem ⯈ Navegação. Páginas e subpáginas são criadas automaticamente.
Como posso criar meus próprios templates de menu?
Por meio da marca <!--bxNV_DB 00_Menu bxNV_DB-->, você pode especificar uma tabela diferente como fonte de dados. Assim, você pode criar suas próprias navegações ou templates que estão conectados à navegação do CMS.
Como mudo os ícones SVG?
Os códigos SVG dos ícones podem ser editados em CMS ⯈ Site ⯈ Cabeçalho, na parte inferior da visão do desenvolvedor.
Como mudo a ordem dos ícones na navbar?
A ordem dos ícones pode ser ajustada através do CSS. A posição da barra móvel (direita ou esquerda) também pode ser controlada via CSS.
Como posso definir quais botões aparecem na barra de desktop, móvel ou lateral?
Por meio da tabela 00_Menu, você pode atribuir um nome de classe CSS a cada navegação. Com essas classes, você controla via CSS onde o botão é exibido – por exemplo, em #bxNavPoints (Desktop), #BxMobileBar (Móvel) ou #BxSideBar (Barra Lateral).
O que faz o botão adicional para o editor de navegação?
Esse botão exibe no modo de edição um editor adicional para elementos de navegação. Por padrão, utiliza a tabela 00_Menu, mas você também pode definir uma outra tabela.
Qual é a melhor prática recomendada para a navegação?
Mantenha todos os elementos de navegação agrupados no arquivo /bx_Header.html. Assim, os menus de desktop, móvel e lateral permanecerão em sincronia e poderão ser rapidamente ajustados ou trocados, se necessário.