Edytor nawigacji w bluetronix CMS – dostosuj menu indywidualnie

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

W tej instrukcji dowiesz się, jak indywidualnie dostosować nawigację swojej strony w CMS bluetronix. Od struktury paska nawigacyjnego po menu mobilne – poznasz krok po kroku, jak optymalnie skonfigurować swoje menu.

Lokalizacja i widoczność Przykład kodu: <i>/bx_Header.html</i> Budowa paska nawigacyjnego Sekcja: Navbar-Top Sekcja: Navbar-Bottom Menu mobilne Sidebar Przyciski menu i submenu Konfiguracja ikon SVG Kontrola CSS i kolejność Porady i wskazówki Dodatkowy przycisk do edytora nawigacji FAQ

Edytor nawigacji: dostosowywanie menu stron

Ta dokumentacja pokazuje, jak zbudowany jest pasek nawigacyjny (nawigacja strony) w CMS bluetronix i jak go dostosować. Przewodnik przez strukturę, znaczniki zastępcze (markery tekstowe), menu mobilne i sidebar oraz edytor nawigacji.

Uwaga: Plik /bx_Header.html jest widoczny tylko w trybie dewelopera (logowanie jako AAdmin).

Lokalizacja i widoczność

Domyślnie pasek nawigacyjny znajduje się w głównym katalogu pod Strony → /bx_Header.html. Zmiany w nawigacji dokonujesz w tym pliku.

Przykład kodu: /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).

Zrozumienie znaczników zastępczych (markerów tekstowych)

Znaczniki HTML są automatycznie zastępowane podczas zapisywania w 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.

Jeśli nie chcesz korzystać z opcji w nagłówku CMS, możesz usunąć marki __DB_GB_xxx__ i __DB_GB_xxx_Display__ w HTML. Są one opcjonalne.

Dodatkowy pasek nad menu przesuwa się (telefon i komputer) w górę, poza pole widzenia. Sam pasek nawigacyjny pozostaje widoczny na górze w trybie „sticky”. Dzięki temu ważne informacje (np. „Pobierz aplikację …”) mogą pojawić się na górze, nie blokując trwałego miejsca.

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

Dodatkowy pasek pod menu również przesuwa się (telefon i komputer) w górę.

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

Mobilny pasek w trybie telefonu wjeżdża z prawej strony. Podczas ładowania strony JavaScript (/bx_script/BxScript_own_min.js) przejmuje zawartość menu z bxNavPoints do Mobilnego Paska (BxMobileBar). Dodatkowo możesz dodać własne bloki HTML nad i pod menu (np. duże logo).


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

Boczny pasek w trybie telefonicznym wjeżdża z lewej strony. Tutaj także możesz ustawić własne bloki HTML powyżej i poniżej menu (np. dla dużych logo). Opcjonalnie menu nawigacyjne można również wyświetlać w bocznym pasku.


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

Uwagi dotyczące układu: Możesz wyświetlić mobilne menu lub boczny pasek z prawej lub z lewej strony i wymienić ikony przez CMS → Strona → Nagłówek.

Przyciski menu i 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>

Struktura menu jest budowana za pomocą UL/LI i wypełniana z tabeli bazy danych 00_Menue. Dzięki znacznikowi  możesz również podać inną tabelę.

Między  znajdują się szablony HTML dla punktów głównych i podrzędnych. Znacznik  jest automatycznie wypełniany wpisami submenus.

Ważne: Połączenie z funkcją nawigacyjną CMS powstaje za pomocą znaczników tekstowych. Dzięki temu można w pełni zintegrować Custom Templates. Nawigację edytujesz w submenu CMS (pod Brzeg). System automatycznie tworzy strony i katalogi – ręczne linkowanie nie jest konieczne.

Konfiguracja ikon SVG

Kod SVG ikon edytujesz w widoku dewelopera w CMS → Strona → Nagłówek w dolnej części.

Kontrola CSS i kolejność

Kolejność ikon możesz zmienić za pomocą CSS. Mobilny pasek można w zależności od układu wyświetlać z prawej lub lewej strony.

Porady i wskazówki

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.

Dodatkowy przycisk do edytora nawigacji

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

Dzięki temu w trybie edycji wyświetli się dodatkowy przycisk edycji. Zastępując 00_Menue, możesz wskazać inną tabelę nawigacyjną. Standardowy edytor nawigacji zawsze korzysta z 00_Menue.

Najlepsza praktyka: Przechowuj wszystkie elementy nawigacyjne w /bx_Header.html. Dzięki temu Mobile-Bar, Side-Bar i nagłówek dla desktopu pozostają spójne, a wymiana źródła danych (np. inna tabela niż 00_Menue) jest szybka.

FAQ

co klienci często nas pytają

Gdzie znajdę plik Navbar w CMS bluetronix?

Navbar znajduje się w głównym katalogu pod Strony ⯈ /bx_Header.html. Tam możesz wprowadzać wszystkie zmiany w nawigacji strony.

Dlaczego nie widzę pliku /bx_Header.html?

Plik jest widoczny tylko w trybie dewelopera. Zaloguj się jako AAdmin, aby uzyskać dostęp.

Jak zbudowany jest Navbar?

Navbar składa się z trzech głównych obszarów: – Lewe ikony i logo: ikona menu i logo – Przyciski centralne: główna nawigacja i podmenu – Ikony po prawej: ikony funkcji, takie jak wyszukiwanie, logowanie lub koszyk.

Co oznaczają symbole zastępcze (marki tekstowe) w kodzie HTML?

Symbole zastępcze są automatycznie zastępowane podczas zapisywania w CMS. Na przykład none kontroluje widoczność elementu, podczas gdy wstawia rzeczywistą zawartość. Te znaczniki możesz skonfigurować w CMS ⯈ Strona ⯈ Nagłówek.

Czy mogę usunąć marki tekstowe?

Tak, jeśli nie chcesz używać opcji nagłówka CMS, możesz po prostu usunąć znaczniki, takie jak lub . Są one opcjonalne.

Jak mogę dodać treści powyżej i poniżej Navbar?

Za pomocą obszarów Navbar-Top i Navbar-Bottom możesz aktywować dodatkowe paski. Są one kontrolowane przez CMS ⯈ Strona ⯈ Nagłówek i wypełniane zawartością HTML.

Jak działa mobilne menu?

W trybie telefonicznym Mobilny pasek wjeżdża z prawej strony. Zawartość menu jest automatycznie pobierana z menu dla komputerów. Możesz dodać dodatkowe bloki HTML powyżej i poniżej, takie jak logo.

Jak aktywować boczny pasek?

Panel boczny otwiera się w trybie telefonu z lewej strony. Tutaj także możesz dodać własne bloki HTML. Wygląd kontrolujesz poprzez CMS ⯈ Strona ⯈ Nagłówek.

Czy mogę zdecydować, czy nawigacja pojawia się w panelu bocznym czy w pasku mobilnym?

Tak, poprzez opcje układu możesz wybrać, czy Twoja nawigacja ma być wyświetlana w panelu bocznym czy w pasku mobilnym. Możesz także określić, po której stronie (lewej/prawej) ma się pojawić, za pomocą ikon.

Jak zarządzane jest menu w CMS?

Struktura menu jest generowana z tabeli systemowej 00_Menue. Edytujesz ją w CMS w sekcji Margines ⯈ Nawigacja. Strony i podstrony są automatycznie tworzone.

Jak mogę stworzyć własne szablony menu?

Za pomocą marki  możesz wskazać inną tabelę jako źródło danych. Dzięki temu możesz tworzyć własne nawigacje lub szablony, które są połączone z nawigacją CMS.

Jak zmienić ikony SVG?

Kody SVG ikon możesz edytować w sekcji CMS ⯈ Strona ⯈ Nagłówek w dolnej części widoku dewelopera.

Jak mogę zmienić kolejność ikon w pasku nawigacyjnym?

Kolejność ikon możesz dostosować za pomocą CSS. Pozycję paska mobilnego (po prawej lub lewej stronie) również możesz kontrolować przez CSS.

Jak mogę określić, które przyciski pojawiają się w wersji desktopowej, mobilnej lub w panelu bocznym?

Za pomocą tabeli 00_Menue możesz przypisać każdej nawigacji nazwę klasy CSS. Dzięki tym klasom kontrolujesz za pomocą CSS, gdzie przycisk jest wyświetlany – np. w #bxNavPoints (desktop), #BxMobileBar (mobile) lub #BxSideBar (panel boczny).

Co robi przycisk dodatkowy dla edytora nawigacji?

Ten przycisk włącza dodatkowy edytor dla elementów nawigacji w trybie edycji. Domyślnie używa tabeli 00_Menue, ale możesz również zdefiniować inną tabelę.

Jakie są zalecane najlepsze praktyki dla nawigacji?

Zachowaj wszystkie elementy nawigacyjne w pliku /bx_Header.html. Dzięki temu menu desktopowe, mobilne i panel boczny pozostaną zsynchronizowane i szybko można je dostosować lub wymienić w razie potrzeby.