Navigaatio-editori bluetronix CMS:ssä – muokkaa valikkoa yksilöllisesti

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

Tässä oppaassa opit, kuinka voit mukauttaa verkkosivustosi navigaatiota bluetronix CMS:ssä. Navbarin rakenteesta mobiilivalikkoon – tässä opit vaihe vaiheelta, kuinka voit optimoida valikkosi asetukset.

Tallennuspaikka & näkyvyys Koodiesimerkki: <i>/bx_Header.html</i> Navbar-rakenne Osio: Navbar-yläosa Osio: Navbar-alataso Mobiilivalikko Sivupalkki Valikkonapit & alavalikko SVG-kuvakkeet konfiguroidaan CSS-hallinta & järjestys Vinkit & temput Lisäpainike navigaatiokeditorille UKK

Navigaatiokeditori: verkkosivuston valikon mukauttaminen

Tässä dokumentaatiossa näet, miten Navbar (verkkosivuston navigaatio) on rakennettu bluetronix CMS:ssä ja kuinka voit muokata sitä. Sinut viedään läpi rakenteen, täytepisteet (tekstimerkit), mobiili- ja sivupalkin sekä navigaatiokeditorin.

Huomautus: Tiedosto /bx_Header.html on näkyvissä vain kehittäjätilassa (kirjautuminen Ylläpitäjänä).

Tallennuspaikka & näkyvyys

Oletusarvoisesti Navbar sijaitsee päähakemistossa kohdassa Sivut → /bx_Header.html. Teet muutokset navigaatioon tässä tiedostossa.

Koodiesimerkki: /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).

Ymmärrä täytepisteet (tekstimerkit)

HTML-täytepisteet korvataan automaattisesti tallennettaessa CMS:ssä:

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

Jos et halua käyttää CMS:n yläosan vaihtoehtoja, voit poistaa HTML:stä merkit __DB_GB_xxx__ ja __DB_GB_xxx_Display__. Ne ovat valinnaisia.

Valikoiden ylle sijoitettu lisälinja vierittää (puhelin & työpöytä) ylös näkyvyysalueen ulkopuolelle. Itse Navbar pysyy ylhäällä "sticky"-näkyvänä. Näin tärkeät tiedot (esim. "Lataa sovellus ...") voivat näkyä ylhäällä ilman, että ne jatkuvasti estävät tilan.

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

Valikoiden alapuolella oleva lisälinja vierittää (puhelin & työpöytä) myös ylös pois.

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

Mobiilivalikko

Mobile-nauha tulee puhelinmoodissa oikealta puolelta. Sivun lataamisen yhteydessä JavaScript (/bx_script/BxScript_own_min.js) siirtää valikkosisällön bxNavPoints Mobile-nauhaan (BxMobileBar). Lisäksi voit lisätä omia HTML-lohkoja valikon ylle ja alle (esim. suuria logoja).


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

Sivupalkki tulee puhelinmoodissa vasemmalta puolelta. Täällä voit myös asettaa omia HTML-lohkoja valikon ylle ja alle (esim. suuria logoja). Valinnaisesti navigointivalikko voidaan esittää myös sivupalkissa.


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

Asetteluvihje: Voit valita mobiilivalikon tai sivupalkin esittämisen oikealla/vasemmalla ja vaihtaa kuvakkeita noin CMS → Verkkosivusto → Otsikko.

Valikkonapit & alavalikko



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

Valikkorakenne rakennetaan UL/LI -elementeistä ja täytetään tietokantataulusta 00_Menue. Voit myös antaa toisen taulun merkin  avulla.

 -merkin sisällä ovat HTML-mallit päälukemille ja alalukemille.  -merkki täytetään automaattisesti alivalikkojen sisällöillä.

Tärkeää: Yhteys CMS:n navigointitoimintoon muodostuu tekstimerkkien kautta. Näin voit liittää myös Custom Templates kokonaan. Voit muokata navigointia CMS-alivalikossa (kohdassa Reuna). Järjestelmä luo sivut ja hakemistot automaattisesti – manuaalista linkittämistä ei tarvita.

SVG-kuvakkeet konfiguroidaan

SVG-koodin kuvakkeet hallitaan kehittäjänäytössä kohdassa CMS → Verkkosivusto → Otsikko alareunassa.

CSS-hallinta & järjestys

Voit muuttaa kuvakkeiden järjestystä CSS:llä. Mobiilibaari voidaan näyttää oikealla tai vasemmalla asettelusta riippuen.

Vinkit & temput

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.

Lisäpainike navigaatiokeditorille

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

Näin voit näyttää lisämuokkauspainikkeen muokkaustilassa. Korvaamalla 00_Menue voit antaa toisen navigointitaulun. Oletusnavigointieditori käyttää aina 00_Menue.

Parhaat käytännöt: Pidä kaikki navigointielementit koottuina /bx_Header.html. Näin mobiilibaari, sivupalkki ja työpöydän navigointipalkki pysyvät johdonmukaisina, ja tietolähteen vaihto (esim. toinen taulukko kuin 00_Menue) on nopeaa.

UKK

mitä asiakkaat meiltä usein kysyvät

Missä löydän Navbar-tiedoston bluetronix CMS:stä?

Navbar sijaitsee pääkansiossa alla Sivut ⯈ /bx_Header.html. Siellä voit tehdä kaikki muutokset verkkosivuston navigaatioon.

Miksi en näe tiedostoa /bx_Header.html?

Tiedosto on näkyvissä vain Kehittäjätilassa. Kirjaudu sisään AAdmin:na saadaksesi käyttöoikeuden.

Kuinka Navbar on rakennettu?

Navbar koostuu kolmesta pääalueesta: – Vasen kuvake & logo: Valikkokuvake ja logo – Keskuspainikkeet: Päänavigaatio ja alatason valikot – Kuvakkeet oikealla: Toimintokuvakkeet kuten haku, kirjautuminen tai ostoskori

Mitä tarkoittavat paikkamerkit (tekstimerkit) HTML-koodissa?

Paikkamerkit korvataan automaattisesti tallennettaessa CMS:ssä. Esimerkiksi none ohjaa elementin näkyvyyttä, kun taas liittää varsinaisen sisällön. Näitä merkkejä voit konfiguroida kohdassa CMS ⯈ Verkkosivusto ⯈ Otsikko.

Voinko poistaa tekstimerkit?

Kyllä, jos et halua käyttää CMS:n otsikkovaihtoehtoja, voit yksinkertaisesti poistaa merkit kuten tai . Ne ovat valinnaisia.

Kuinka voin lisätä sisältöä Navbarin ylle ja alle?

Osioiden Navbar-Top ja Navbar-Bottom kautta voit aktivoida lisäkaistoja. Nämä hallitaan kohdassa CMS ⯈ Verkkosivusto ⯈ Otsikko ja täytetään HTML-sisällöllä.

Kuinka mobiilivalikko toimii?

Puhelinmoodissa mobiilibaari tulee oikealta puolelta. Valikkos sisältö otetaan automaattisesti työpöydän valikosta. Voit lisätä ylle ja alle lisä HTML-lohkoja kuten logoja.

Kuinka aktivoidaan sivupalkki?

Sivupalkki avautuu puhelinkäytössä vasemmalta puolelta. Voit myös lisätä omia HTML-lohkojasi. Näyttöä hallitset kautta CMS ⯈ Verkkosivusto ⯈ Otsikko.

Voinko päättää, näkyykö navigaatio sivupalkissa tai mobiilivalikossa?

Kyllä, asetteluvaihtoehdoissa voit valita, näytetäänkö navigaatio sivupalkissa vai mobiilivalikossa. Voit myös määrittää kuvakkeiden sijainnin (vasen/oikea) kautta.

Kuinka valikko hallitaan CMS:ssä?

Valikkorakenne luodaan järjestelmätaulusta 00_Menue. Muokkaat tätä CMS:ssä kohdassa Reuna ⯈ Navigointi. Sivut ja alakategoriat luodaan automaattisesti.

Kuinka voin luoda omia valikkopohjia?

Merkinnän  avulla voit määrittää toisen taulun tietolähteeksi. Tällä tavoin voit luoda omia navigaatioita tai pohjia, jotka ovat yhteydessä CMS-navigaatioon.

Kuinka vaihdan SVG-kuvakkeet?

Voit muokata kuvakkeiden SVG-koodia kohdan CMS ⯈ Verkkosivusto ⯈ Otsikko kehittäjänäkymän alalaidassa.

Kuinka vaihdan kuvakkeiden järjestyksen navigointipalkissa?

Voit muokata kuvakkeiden järjestystä CSS:llä. Myös mobiilivalikon sijaintia (oikea tai vasen) voidaan hallita CSS:llä.

Kuinka voin määrittää, mitkä painikkeet näkyvät työpöytävaihtoehdoissa, mobiilissa tai sivupalkissa?

Taulun 00_Menue avulla voit antaa jokaiselle navigaatiolle CSS-luokan nimen. Näiden luokkien avulla ohjaat CSS:llä, missä painike näkyy – esimerkiksi #bxNavPoints (työpöytä), #BxMobileBar (mobiili) tai #BxSideBar (sivupalkki).

Mitä lisäpainike navigointieditorille tekee?

Tämä painike avaa muokkaustilassa ylimääräisen editorin navigaatiokomponenteille. Oletuksena se käyttää taulua 00_Menue, mutta voit myös määrittää toisen taulun.

Mikä on suositeltu parhaat käytännöt navigaatiolle?

Pidä kaikki navigaatiokomponentit tiiviisti yhdessä tiedostossa /bx_Header.html. Näin työpöydän, mobiilin ja sivupalkin valikot pysyvät synkronoituna ja niitä voidaan nopeasti muokata tai vaihtaa tarvittaessa.