अब ऐप डाउनलोड करें और 10 दिन मुफ्त परीक्षण करें
google play store logo apple store logo
मुद्रा भाषा चुनें क्षेत्र चुनें

ब्ल्यूट्रॉनिक्स सीएमएस में नेविगेशन-एडिटर – मेनू को व्यक्तिगत रूप से अनुकूलित करें

इस मार्गदर्शिका में, आप जानेंगे कि कैसे आप अपनी वेबसाइट की नेविगेशन को ब्लूट्रोनिक्स CMS में व्यक्तिगत रूप से अनुकूलित कर सकते हैं। Navbar संरचना से लेकर मोबाइल मेनू तक - यहाँ आप कदम से कदम सीखेंगे कि कैसे आप अपने मेनू को बेहतर तरीके से कॉन्फ़िगर करें।

स्थानीयकरण & दृश्यता कोड उदाहरण: <i>/bx_Header.html</i> नेविगेशन बार का निर्माण खंड: नेविगेशन बार-टॉप खंड: नेविगेशन बार-बॉटम मोबाइल मेन्यू साइडबार मेन्यू बटन और सबमेन्यू SVG आइकन कॉन्फ़िगर करना CSS नियंत्रण और क्रम टिप्स और ट्रिक्स नेविगेशन संपादक के लिए अतिरिक्त बटन बहुत पूछे जाने वाले प्रश्न

नेविगेशन संपादक: वेबसाइट मेन्यू कस्टमाइजिंग

यह डॉक्यूमेंटेशन आपको दिखाता है कि ब्लुएट्रोनिक्स CMS में नेविगेशन बार (वेबसाइट-नेविगेशन) कैसे बनी है और आप इसे कैसे अनुकूलित कर सकते हैं। आपको संरचना, प्लेसहोल्डर्स (टेक्स्ट-मार्क्स), मोबाइल और साइड बार, साथ ही नेविगेशन संपादक के माध्यम से मार्गदर्शन किया जाएगा।

नोट: फ़ाइल /bx_Header.html केवल डेवलपर मोड में दिखाई देती है (लॉगिन करें AAdmin के रूप में)।

स्थान और दृश्यता

डिफ़ॉल्ट रूप से, नेविगेशन बार मुख्य निर्देशिका में पृष्ठ → /bx_Header.html के तहत है। आप इस फ़ाइल में नेविगेशन में बदलाव कर सकते हैं।

कोड उदाहरण: /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).

प्लेसहोल्डर्स (टेक्स्ट-मार्क्स) को समझना

HTML प्लेसहोल्डर्स को 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.

यदि आप CMS के शीर्षलेख से विकल्पों का उपयोग नहीं करना चाहते हैं, तो आप HTML में __​DB​_GB_xxx__ और __​DB​_GB_xxx_Display__ को हटा सकते हैं। ये वैकल्पिक हैं।

खंड: नेविगेशन बार-टॉप

मेन्यू के ऊपर अतिरिक्त पट्टी (फोन और डेस्कटॉप) दृश्य क्षेत्र से ऊपर स्क्रॉल होती है। वास्तविक नेविगेशन बार ऊपर की ओर "स्टिकी" दिखाई देती है। इस तरह महत्वपूर्ण जानकारी (जैसे "ऐप डाउनलोड करें …") ऊपर दिखाई दे सकती है, बिना स्थायी रूप से स्थान घेरने के।

  • __​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.

खंड: नेविगेशन बार-बॉटम

मेन्यू के नीचे अतिरिक्त पट्टी (फोन और डेस्कटॉप) भी ऊपर हट जाती है।

  • __​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.

मोबाइल मेन्यू

मोबाइल-बार फ़ोन मोड में दाहिनी ओर से प्रवेश करती है। पृष्ठ लोड करते समय जावास्क्रिप्ट (/bx_script/BxScript_own_min.js) मेनू सामग्री को bxNavPoints से मोबाइल-बार (BxMobileBar) में ले लेता है। अतिरिक्त रूप से, आप मेनू के ऊपर और नीचे अपने स्वयं के एचटीएमएल ब्लॉकों (जैसे बड़े लोगो) को जोड़ सकते हैं।


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

साइडबार

साइडबार फोन मोड में बायीं ओर से प्रवेश करती है। यहां भी आप मेन्यू के ऊपर/नीचे अपने HTML ब्लॉकों को स्थापित कर सकते हैं (जैसे बड़े लोगो के लिए)। वैकल्पिक रूप से, नेविगेशन मेन्यू को साइडबार में भी प्रदर्शित किया जा सकता है।


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

लेआउट नोट: आप वैकल्पिक रूप से मोबाइल मेन्यू या साइडबार को दाहिने/बायीं ओर प्रदर्शित कर सकते हैं और आइकनों को CMS → वेबसाइट → हैडर के माध्यम से बदल सकते हैं।

मेन्यू बटन और सबमेन्यू



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

मेन्यू संरचना को UL/LI के साथ बनाया जाता है और इसे डेटाबेस तालिका 00_Menue से भरा जाता है। आप <!--bxNV_DB 00_Menue bxNV_DB--> मार्क के माध्यम से एक और तालिका निर्दिष्ट कर सकते हैं।

<!--bxNV_Navi--> के बीच में मुख्य और उप-बिंदुओं के लिए HTML टेम्पलेट होते हैं। <!--bxNV_Next_Sub_Button--> मार्क को स्वचालित रूप से उप-मेनू प्रविष्टियों के साथ भरा जाता है।

महत्वपूर्ण: CMS-नेविगेशन फ़ंक्शन के लिए कनेक्शन टेक्स्ट मार्कों के माध्यम से स्थापित होता है। इस प्रकार कस्टम टेम्पलेट्स को पूरी तरह से जोड़ा जा सकता है। आप नेविगेशन को CMS-सबमेनू में संपादित करते हैं (उपर मार्जिन)। पृष्ठ और निर्देशिकाएं प्रणाली द्वारा स्वचालित रूप से बनाई जाती हैं - मैनुअल लिंकिंग की आवश्यकता नहीं होती।

SVG आइकन कॉन्फ़िगर करना

आप आइकनों का SVG कोड CMS → वेबसाइट → हैडर के विकास दृश्य में निचले क्षेत्र में रख सकते हैं।

CSS नियंत्रण और क्रम

आप CSS के माध्यम से आइकनों के क्रम को बदल सकते हैं। मोबाइल-बार को लेआउट के आधार पर दाएं या बाएं प्रदर्शित किया जा सकता है।

टिप्स और ट्रिक्स

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

नेविगेशन संपादक के लिए अतिरिक्त बटन

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

इससे आप संपादन मोड में एक अतिरिक्त संपादन-बटन दिखाते हैं। 00_Menue को बदलकर आप एक अलग नेविगेशन टेबल निर्दिष्ट कर सकते हैं। मानक नेविगेशन-एडिटर हमेशा 00_Menue का उपयोग करता है।

सर्वश्रेष्ठ प्रथा: सभी नेविगेशन तत्वों को /bx_Header.html में एकत्रित रखें। इस प्रकार मोबाइल-बार, साइड-बार और डेस्कटॉप-नेवबार निरंतर रहते हैं, और डेटा स्रोत का आदान-प्रदान (जैसे कि 00_Menue से अलग तालिका) जल्दी किया जा सकता है।

बहुत पूछे जाने वाले प्रश्न

ग्राहक अक्सर हमसे क्या पूछते हैं

मैं bluetronix CMS में Navbar फ़ाइल कहाँ पा सकता हूँ?

Navbar मुख्य निर्देशिका में पृष्ठ ⯈ /bx_Header.html के तहत है। वहाँ आप वेबसाइट-नेविगेशन में सभी बदलाव कर सकते हैं।

मैं /bx_Header.html फ़ाइल क्यों नहीं देखता?

यह फ़ाइल केवल डेवलपर-मोड में दिखाई देती है। इस पर पहुंच प्राप्त करने के लिए AAdmin के रूप में लॉगिन करें।

Navbar कैसे संरचित है?

Navbar तीन मुख्य क्षेत्रों में बंटा हुआ है: – बाएं आइकन और लोगो: मेनू-आइकन और लोगो – केंद्र बटन: मुख्य नेविगेशन और उप-मेनू – दाएं आइकन: कार्यात्मक आइकन जैसे खोज, लॉगिन या शॉपिंग कार्ट

HTML कोड में प्लेसहोल्डर (टेक्स्ट मार्क) का क्या अर्थ है?

प्लेसहोल्डर CMS में सहेजने पर स्वचालित रूप से बदल जाते हैं। उदाहरण के लिए none किसी तत्व की दृश्यता को नियंत्रित करता है, जबकि वास्तविक सामग्री सम्मिलित करता है। आप इन मार्कों को CMS ⯈ वेबसाइट ⯈ हैडर में कॉन्फ़िगर कर सकते हैं।

क्या मैं टेक्स्ट मार्क हटा सकता हूँ?

हाँ, यदि आप CMS-हेडर विकल्पों का उपयोग नहीं करना चाहते हैं, तो आप या जैसे मार्कों को सरलता से हटा सकते हैं। ये वैकल्पिक हैं।

मैं Navbar के ऊपर और नीचे सामग्री कैसे जोड़ सकता हूँ?

आप Navbar-Top और Navbar-Bottom क्षेत्रों के माध्यम से अतिरिक्त बार सक्रिय कर सकते हैं। ये CMS ⯈ वेबसाइट ⯈ हैडर के माध्यम से नियंत्रित होते हैं और HTML सामग्री से भरे जाते हैं।

मोबाइल मेनू कैसे काम करता है?

फोन मोड में मोबाइल-बार दाएं तरफ से आता है। मेनू सामग्री स्वचालित रूप से डेस्कटॉप मेनू से ली जाती है। आप ऊपर और नीचे अतिरिक्त HTML ब्लॉकों जैसे लोगो डाल सकते हैं।

मैं साइडबार कैसे सक्रिय करूँ?

साइडबार फोन मोड में बाईं तरफ से खुलती है। यहाँ भी आप अपने HTML ब्लॉक्स जोड़ सकते हैं। दृश्यता आप CMS ⯈ वेबसाइट ⯈ हैडर के माध्यम से नियंत्रित करते हैं।

क्या मैं तय कर सकता हूँ कि नेविगेशन साइडबार या मोबाइल-बार में दिखाई दे?

हाँ, लेआउट विकल्पों के माध्यम से आप चुन सकते हैं कि आपकी नेविगेशन साइडबार या मोबाइल-बार में दिखाई देगी। इसके अलावा, आप आइकों के माध्यम से निर्धारित कर सकते हैं कि यह किस पक्ष (बाएं/दाएं) में दिखाई देगी।

CMS में मेन्यू कैसे प्रबंधित किया जाता है?

मेन्यू संरचना सिस्टम टेबल 00_Menue से उत्पन्न होती है। इसे आप CMS में Rand ⯈ Navigation के तहत संपादित कर सकते हैं। पृष्ठों और उप-पृष्ठों का स्वतः निर्माण किया जाता है।

मैं अपने खुद के मेन्यू-टेम्प्लेट्स कैसे बना सकता हूँ?

मार्क <!--bxNV_DB 00_Menue bxNV_DB--> के माध्यम से आप डेटा स्रोत के रूप में एक अलग टेबल निर्दिष्ट कर सकते हैं। इस तरह आप अपनी खुद की नेविगेशन या टेम्प्लेट बना सकते हैं, जो CMS-नेविगेशन से जुड़े होते हैं।

मैं SVG-आइकोन कैसे बदल सकता हूँ?

आप SVG कोड को CMS ⯈ Webseite ⯈ Kopfzeile में डेवलपर व्यू के निचले हिस्से में संपादित कर सकते हैं।

मैं Navbar में आइकोन की क्रमबद्धता कैसे बदल सकता हूँ?

आप CSS के माध्यम से आइकोन की क्रम को समायोजित कर सकते हैं। Mobile-Bar की स्थिति (दाईं या बाईं) को भी CSS के माध्यम से नियंत्रित किया जा सकता है।

मैं यह कैसे निर्धारित कर सकता हूँ कि कौन से बटन डेस्कटॉप, मोबाइल या साइडबार में दिखाई देंगे?

आप टेबल 00_Menue के माध्यम से हर नेविगेशन को एक CSS क्लास नाम दे सकते हैं। इन क्लास के माध्यम से आप CSS के जरिए नियंत्रित करते हैं कि बटन कहाँ प्रदर्शित होगा - जैसे #bxNavPoints (डेस्कटॉप), #BxMobileBar (मोबाइल) या #BxSideBar (साइडबार)।

नेविगेशन-एडिटर के लिए अतिरिक्त बटन का क्या काम है?

यह बटन संपादन मोड में नेविगेशन तत्वों के लिए एक अतिरिक्त संपादक प्रदर्शित करता है। डिफ़ॉल्ट रूप से यह टेबल 00_Menue का उपयोग करता है, लेकिन आप एक अन्य टेबल भी परिभाषित कर सकते हैं।

नेविगेशन के लिए अनुशंसित सर्वोत्तम पद्धति क्या है?

सभी नेविगेशन तत्वों को /bx_Header.html फ़ाइल में समेकित रखें। इस तरह डेस्कटॉप, मोबाइल और साइडबार मेन्यू समकालिक रहेंगे और जरूरत पड़ने पर तेजी से समायोजित या बदल सकते हैं।

CMS