Editor de navegación en el CMS bluetronix: personaliza el menú
En esta guía aprenderás cómo personalizar la navegación de tu sitio web en el CMS de bluetronix. Desde la estructura de la barra de navegación hasta el menú móvil – aquí aprenderás paso a paso cómo configurar tu menú de manera óptima.
Editor de navegación: Personalización del menú del sitio web
Esta documentación te muestra cómo está estructurada la barra de navegación (navegación del sitio web) en el CMS de bluetronix y cómo puedes ajustarla. Te guiarás a través de la estructura, marcadores de posición (marcas de texto), barra móvil y lateral, así como el editor de navegación.
Nota: El archivo /bx_Header.html solo es visible en modo desarrollador (inicio de sesión como AAdmin).
Ubicación y visibilidad
Por defecto, la barra de navegación se encuentra en el directorio principal bajo Páginas → /bx_Header.html. Las modificaciones en la navegación se realizan en este archivo.
Ejemplo 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>
Estructura de la barra de navegación
- Left Icon & Logo: Menü-Icon und Logo.
- Center Buttons: Menü-Buttons und Untermenüs.
- Icons Right: Funktions-Icons (z. B. Warenkorb, Suche, Sprache).
Entender los marcadores de posición (marcas de texto)
Los marcadores de posición HTML se reemplazan automáticamente al guardar en el 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.
Si no deseas utilizar las opciones del CMS - encabezado, puedes eliminar las marcas __DB_GB_xxx__ y __DB_GB_xxx_Display__ en el HTML. Son opcionales.
Sección: Barra de navegación superior
La barra adicional sobre el menú se desplaza (teléfono y escritorio) hacia arriba fuera del área visible. La barra de navegación real permanece visible en la parte superior "pegajosa". Así, se pueden mostrar informaciones importantes (por ejemplo, "Descargar app ...") en la parte superior sin bloquear espacio de forma permanente.
__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.
Sección: Barra de navegación inferior
La barra adicional debajo del menú también se desplaza (teléfono y escritorio) hacia arriba.
__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.
Menú móvil
La barra móvil se desliza desde el lado derecho en modo teléfono. Al cargar la página, JavaScript (/bx_script/BxScript_own_min.js) toma el contenido del menú de bxNavPoints en la barra móvil (BxMobileBar). Además, puedes insertar bloques HTML propios arriba y abajo del menú (por ejemplo, grandes logotipos).
<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
La barra lateral se desliza desde el lado izquierdo en modo teléfono. Aquí también puedes colocar bloques HTML propios por encima o debajo del menú (por ejemplo, para grandes logotipos). Opcionalmente, el menú de navegación también se puede mostrar en la barra lateral.
<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 diseño: Puedes optar por mostrar el menú móvil o la barra lateral a la derecha/izquierda y cambiar los íconos a través de CMS → Página web → Encabezado.
Botones del menú y submenú
<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 estructura del menú se construye con UL/LI y se llena desde la tabla de la base de datos 00_Menue. A través de la etiqueta <!--bxNV_DB 00_Menue bxNV_DB-->, también puedes especificar otra tabla.
Entre <!--bxNV_Navi--> se encuentran las plantillas HTML para los elementos principales y secundarios. La etiqueta <!--bxNV_Next_Sub_Button--> se llena automáticamente con las entradas del submenú.
Importante: La conexión con la función de navegación de CMS se establece a través de las etiquetas de texto. Así también se pueden conectar completamente Plantillas personalizadas. Editas la navegación en el submenú de CMS (bajo Margen). El sistema crea automáticamente páginas y directorios, por lo que no es necesario enlazarlos manualmente.
Configurar iconos SVG
El código SVG de los íconos lo mantienes en la vista de desarrollador de CMS → Página web → Encabezado en la parte inferior.
Control de CSS y orden
Puedes cambiar el orden de los íconos mediante CSS. La barra móvil se puede mostrar a la derecha o a la izquierda según el diseño.
Consejos y trucos
- 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ón adicional para el editor de navegación
<!-- 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>
Esto habilita un botón de edición adicional en el modo de edición. Al reemplazar 00_Menue puedes especificar otra tabla de navegación. El editor de navegación estándar siempre utiliza 00_Menue.
Mejor práctica: Mantén todos los elementos de navegación agrupados en /bx_Header.html. De este modo, la barra móvil, la barra lateral y la barra de navegación de escritorio permanecen consistentes, y el intercambio de la fuente de datos (por ejemplo, otra tabla que 00_Menue) se realiza rápidamente.
Preguntas Frecuentes
lo que los clientes nos preguntan con frecuencia
La barra de navegación se encuentra en el directorio principal bajo Páginas ⯈ /bx_Header.html. Allí puedes realizar todos los cambios en la navegación de la web.
¿Por qué no veo el archivo /bx_Header.html?
El archivo solo es visible en Modo desarrollador. Inicia sesión como AAdmin para obtener acceso.
¿Cómo está estructurada la barra de navegación?
La barra de navegación consta de tres áreas principales: – Ícono izquierdo y logotipo: ícono del menú y logotipo – Botones centrales: navegación principal y submenús – Íconos derechos: íconos de funciones como búsqueda, inicio de sesión o carrito de compras.
¿Qué significan los marcadores de posición (etiquetas de texto) en el código HTML?
Los marcadores de posición se reemplazan automáticamente al guardar en el CMS. Por ejemplo, none controla la visibilidad de un elemento, mientras que inserta el contenido real. Estas etiquetas las puedes configurar en CMS ⯈ Página web ⯈ Encabezado.
¿Puedo eliminar las etiquetas de texto?
Sí, si no deseas utilizar las opciones de encabezado de CMS, puedes eliminar las etiquetas como o sin problema. Son opcionales.
¿Cómo puedo agregar contenido por encima y por debajo de la barra de navegación?
A través de las secciones Navbar-Top y Navbar-Bottom puedes activar barras adicionales. Estas se controlan mediante CMS ⯈ Página web ⯈ Encabezado y se llenan con contenido HTML.
¿Cómo funciona el menú móvil?
En modo teléfono, la barra móvil se desliza desde el lado derecho. El contenido del menú se toma automáticamente del menú de escritorio. Puedes insertar bloques HTML adicionales como logotipos por encima y por debajo.
¿Cómo activo la barra lateral?
La barra lateral se abre en el modo teléfono desde el lado izquierdo. Aquí también puedes añadir tus propios bloques HTML. El diseño lo controlas a través de CMS ⯈ Página web ⯈ Encabezado.
¿Puedo decidir si la navegación aparece en la barra lateral o en la barra móvil?
Sí, a través de las opciones de diseño puedes seleccionar si tu navegación se muestra en la barra lateral o en la barra móvil. Además, puedes especificar mediante los iconos en qué lado (izquierda/derecha) aparece.
¿Cómo se gestiona el menú en el CMS?
La estructura del menú se genera a partir de la tabla del sistema 00_Menue. La editas en el CMS bajo Margen ⯈ Navegación. Las páginas y subpáginas se crean automáticamente.
¿Cómo puedo crear mis propias plantillas de menú?
A través de la etiqueta <!--bxNV_DB 00_Menue bxNV_DB--> puedes especificar otra tabla como fuente de datos. Así puedes crear tus propias navegaciones o plantillas que se conecten con la navegación del CMS.
¿Cómo cambio los iconos SVG?
Los códigos SVG de los iconos pueden editarse en CMS ⯈ Página web ⯈ Encabezado en la parte inferior de la vista de desarrollador.
¿Cómo cambio el orden de los iconos en la barra de navegación?
Puedes ajustar el orden de los iconos a través de CSS. También la posición de la barra móvil (derecha o izquierda) se puede controlar mediante CSS.
¿Cómo puedo determinar qué botones aparecen en la barra de escritorio, móvil o lateral?
A través de la tabla 00_Menue puedes darle a cada navegación un nombre de clase CSS. Con estas clases controlas mediante CSS dónde se muestra el botón, por ejemplo, en #bxNavPoints (Escritorio), #BxMobileBar (Móvil) o #BxSideBar (Barra lateral).
¿Qué hace el botón adicional para el editor de navegación?
Este botón activa un editor adicional para elementos de navegación en modo de edición. Por defecto, utiliza la tabla 00_Menue, pero también puedes definir otra tabla.
¿Cuál es la mejor práctica recomendada para la navegación?
Mantén todos los elementos de navegación agrupados en el archivo /bx_Header.html. Así, los menús de escritorio, móvil y lateral se mantienen sincronizados y se pueden ajustar o intercambiar rápidamente si es necesario.