Editor di navigazione nel bluetronix CMS – personalizza il menu

Name: Website builder App
Brand: bluetronix
Rating: 4.7 (831 reviews)

In questa guida scoprirai come personalizzare la navigazione del tuo sito web nel CMS di bluetronix. Dalla struttura della navbar al menu mobile – qui imparerai passo dopo passo come configurare al meglio il tuo menu.

Posizione di archiviazione & visibilità Esempio di codice: <i>/bx_Header.html</i> Struttura della Navbar Sezione: Navbar-Top Sezione: Navbar-Bottom Menu Mobile Barra laterale Pulsanti di menu & sottomenu Configurare le icone SVG Controllo CSS & ordine Consigli & trucchi Pulsante aggiuntivo per l'editor di navigazione FAQ

Editor di navigazione: personalizzazione del menu del sito web

Questa documentazione ti mostra come è strutturata la Navbar (navigazione del sito) nel CMS di bluetronix e come personalizzarla. Sarai guidato attraverso la struttura, i segnaposto (marche di testo), il menu mobile e la barra laterale, oltre all'editor di navigazione.

Nota: Il file /bx_Header.html è visibile solo in modalità sviluppatore (accesso come AAdmin).

Posizione di archiviazione & visibilità

Di default, la Navbar si trova nella directory principale sotto Pagina → /bx_Header.html. Le modifiche alla navigazione si effettuano in questo file.

Esempio di codice: /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>

Left Icon & Logo: Menü-Icon und Logo.
Center Buttons: Menü-Buttons und Untermenüs.
Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).

Comprendere i segnaposto (marche di testo)

I segnaposto HTML vengono automaticamente sostituiti al momento del salvataggio nel 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 non desideri utilizzare le opzioni dalla intestazione del CMS, puoi rimuovere i marchi __DB_GB_xxx__ e __DB_GB_xxx_Display__ dall'HTML. Sono opzionali.

La barra aggiuntiva sopra il menu scorre (telefono e desktop) verso l'alto fuori dalla vista. La Navbar effettiva rimane visibile in modo "sticky" nella parte superiore. In questo modo, informazioni importanti (ad es. "Scarica l'app …") possono apparire in alto senza occupare spazio in modo permanente.

__DB_GB_DesktopHTML1_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTML1__: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

La barra aggiuntiva sotto il menu scorre (telefono e desktop) anch'essa verso l'alto.

__DB_GB_DesktopHTML2_Display__: Aktiv/Inaktiv über CMS → Webseite → Kopfzeile.
__DB_GB_DesktopHTML2__: HTML-Inhalt aus Kopfzeile.
: Editier-Button für den HTML-Eintrag.

Menu Mobile

La Mobile-Bar entra dalla destra in modalità Phone. Durante il caricamento della pagina, JavaScript (/bx_script/BxScript_own_min.js) trasferisce il contenuto del menu da bxNavPoints alla Mobile-Bar (BxMobileBar). Inoltre, puoi inserire i tuoi blocchi HTML sopra e sotto il menu (ad esempio, loghi grandi).


<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>

La Side-Bar appare in modalità telefono dal lato sinistro. Anche qui puoi posizionare blocchi HTML personalizzati sopra/sotto il menu (ad esempio, per loghi grandi). Facoltativamente, il menu di navigazione può essere visualizzato anche nella 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 sul layout: Puoi visualizzare a scelta il Mobile-Menù o la Side-Bar a destra/sinistra e scambiare le icone tramite CMS → Sito Web → Intestazione.

Pulsanti di menu & sottomenu



         <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>

La struttura del menu viene creata con UL/LI e popolata dalla tabella del database 00_Menue. Puoi anche specificare un'altra tabella tramite il tag .

Tra  si trovano i modelli HTML per i punti principali e secondari. Il tag  viene riempito automaticamente con le voci del sottomenu.

Importante: La connessione alla funzione di navigazione del CMS avviene tramite i tag di testo. In questo modo si possono integrare completamente anche Template Personalizzati. Puoi modificare la navigazione nel sottomenu del CMS (sotto Margine). Il sistema crea automaticamente pagine e directory – non è necessaria una connessione manuale.

Configurare le icone SVG

Puoi gestire il codice SVG delle icone nella vista sviluppatore di CMS → Sito Web → Intestazione nella parte inferiore.

Controllo CSS & ordine

Puoi cambiare l'ordine delle icone tramite CSS. La Mobile-Bar può essere visualizzata a destra o a sinistra a seconda del layout.

Consigli & trucchi

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, BxSideBar bestimmst 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.

Pulsante aggiuntivo per l'editor di navigazione

<!-- 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>

In questo modo attivi un ulteriore pulsante di modifica in modalità di editing. Sostituendo 00_Menue puoi specificare un'altra tabella di navigazione. L'editor di navigazione standard utilizza sempre 00_Menue.

Best Practice: Mantieni tutti gli elementi di navigazione raggruppati in /bx_Header.html. In questo modo la Mobile-Bar, la Side-Bar e la Navbar per desktop rimangono coerenti ed è veloce cambiare la fonte dei dati (ad esempio, un'altra tabella rispetto a 00_Menue).

FAQ

cosa ci chiedono spesso i clienti

Dove trovo il file Navbar nel CMS bluetronix?

La Navbar si trova nella directory principale sotto Pagine ⯈ /bx_Header.html. Qui puoi apportare tutte le modifiche alla navigazione del sito.

Perché non vedo il file /bx_Header.html?

Il file è visibile solo in modalità sviluppatore. Accedi come AAdmin per ottenere l'accesso.

Come è strutturata la Navbar?

La Navbar è composta da tre aree principali: – Icona sinistra e logo: icona del menu e logo – Pulsanti centrali: navigazione principale e sottomenu – Icone a destra: icone funzionali come ricerca, accesso o carrello

Cosa significano i segnaposto (tag di testo) nel codice HTML?

I segnaposto vengono automaticamente sostituiti al momento del salvataggio nel CMS. Ad esempio, none controlla la visibilità di un elemento, mentre inserisce il contenuto effettivo. Puoi configurare questi tag sotto CMS ⯈ Sito Web ⯈ Intestazione.

Posso rimuovere i tag di testo?

Sì, se non vuoi utilizzare le opzioni di intestazione del CMS, puoi semplicemente eliminare i tag come o . Sono facoltativi.

Come posso aggiungere contenuti sopra e sotto la Navbar?

Puoi attivare barre aggiuntive tramite le aree Navbar-Top e Navbar-Bottom. Queste sono controllate tramite CMS ⯈ Sito Web ⯈ Intestazione e riempite con contenuti HTML.

Come funziona il Mobile Menu?

In modalità telefono, la Mobile-Bar appare dal lato destro. Il contenuto del menu viene automaticamente preso dal menu desktop. Puoi inserire blocchi HTML aggiuntivi come loghi sopra e sotto.

Come attivo la sidebar?

La barra laterale si apre in modalità telefono dal lato sinistro. Anche qui puoi aggiungere blocchi HTML personalizzati. Puoi controllare la visualizzazione tramite CMS ⯈ Sito Web ⯈ Intestazione.

Posso decidere se la navigazione appare nella barra laterale o nella barra mobile?

Sì, tramite le opzioni di layout puoi scegliere se la tua navigazione viene visualizzata nella barra laterale o nella barra mobile. Inoltre, puoi impostare tramite le icone su quale lato (sinistra/destra) appare.

Come viene gestito il menu nel CMS?

La struttura del menu viene generata dalla tabella di sistema 00_Menue. Puoi modificarla nel CMS sotto Margine ⯈ Navigazione. Le pagine e le sottopagine vengono create automaticamente.

Come posso creare modelli di menu personalizzati?

Attraverso il tag  puoi specificare un'altra tabella come sorgente dati. In questo modo puoi creare navigazioni o modelli personalizzati, che sono collegati alla navigazione del CMS.

Come cambio le icone SVG?

Puoi modificare i codici SVG delle icone sotto CMS ⯈ Sito Web ⯈ Intestazione nella parte inferiore della vista sviluppatore.

Come cambio l'ordine delle icone nella Navbar?

Puoi adattare l'ordine delle icone tramite CSS. Anche la posizione della barra mobile (a destra o a sinistra) può essere controllata tramite CSS.

Come posso stabilire quali pulsanti appaiono nella barra desktop, mobile o laterale?

Attraverso la tabella 00_Menue puoi assegnare un nome di classe CSS a ciascuna navigazione. Con queste classi controlli tramite CSS dove il pulsante viene visualizzato – ad esempio in #bxNavPoints (desktop), #BxMobileBar (mobile) o #BxSideBar (barra laterale).

Qual è la funzione del pulsante aggiuntivo per l'editor di navigazione?

Questo pulsante attiva un editor aggiuntivo per gli elementi di navigazione in modalità modifica. Di default utilizza la tabella 00_Menue, ma puoi anche definire un'altra tabella.

Qual è la migliore prassi raccomandata per la navigazione?

Conserva tutti gli elementi di navigazione nel file /bx_Header.html in modo compatto. In questo modo i menu desktop, mobile e laterale rimangono sincronizzati e possono essere rapidamente adattati o sostituiti se necessario.