Lleva a los visitantes de tu página a páginas de destino, ofertas y más con enlaces en el formato optimizado de un menú desplegable.
Nota: Este artículo se refiere a las Plantillas Heredadas Premier. Si usas las Plantillas de Páginas de Kajabi, consulta la guía actualizada aquí.
Nota: Agregar un Menú Desplegable con Premier requiere acceso al Editor de Código, disponible con el Plan Pro. Aprende más sobre nuestros distintos planes en kajabi.com/pricing.
Menú desplegable
Agregar un Menú Desplegable a tu Encabezado de Página es una excelente forma de ofrecer enlaces adicionales usando el diseño elegante y sofisticado de un menú desplegable:
Paso 1. Agrega el código
Importante: Introducir código personalizado en tu sitio puede exponerte a vulnerabilidades y posibles ataques de malware. Te recomendamos usar herramientas de vulnerabilidad como VirusTotal o Snyk para escanear cualquier código personalizado que planees usar y aplicar ciertas mejores prácticas para ayudar a reducir el impacto potencial.
Primero, abre el Editor de Código de la Página que deseas personalizar.
Haz clic para abrir la carpeta Sections
Luego, haz clic en el archivo header.liquid
Ubica
{% if h-ShowMenu %}cerca de la línea 24Copia y pega
{% include "dropdown" %}en la línea debajo de{% if h-ShowMenu %}Haz clic en Save para guardar tus cambios:
Paso 2. Crea el archivo del menú desplegable
Luego, abre la carpeta Snippets
Después, haz clic en + Add a new Snippet
Ingresa dropdown en el campo 'Name' y haz clic en Create File:
Paso 3. Edita el menú desplegable
En tu nuevo archivo dropdown.liquid, copia y pega el siguiente código:
<ul class="nav navbar-nav" style="margin: 0; display: inline-block;"><div class="dropdown"><div class="dropdown-content"></div></div><li class="dropdown" style="margin: 0;"><a href="#" class="dropdown-toggle" data-toggle="dropdown">ENTER NAME ON NAV BAR</a><ul class="dropdown-menu"><li><a href="https://enterlinkhere.com/">OPTION 1</a></li><li><a href="https://enterlinkhere.com/">OPTION 2</a></li><li><a href="https://enterlinkhere.com/">OPTION 3</a></li></ul></li></ul>
Reemplaza ENTER NAME ON NAV BAR con el nombre del enlace que quieres mostrar a los usuarios de tu sitio
Personaliza los sub-enlaces y el texto en tu Menú Desplegable sobrescribiendo https://enterlinkhere.com/, OPTION 1, OPTION 2, OPTION 3 con tus propias URLs y textos
Haz clic en Save para guardar y aplicar tus cambios
Luego, Preview tu Página:
Consejo: Enlaza a tus otras páginas construidas en Kajabi copiando y pegando el enlace de tu página. Aprende a copiar el enlace de tu página.
Cambia el espaciado del menú desplegable (opcional)
¿Buscas cambiar el espaciado vertical entre los enlaces de navegación de tu menú desplegable? Este paso requiere código adicional en el Editor de Código.
En tu Editor de Código, abre la carpeta Assets
Selecciona el archivo override.scss.liquid
Copia y pega el siguiente código:
li{margin: 1px}Cambia el valor del margen (1px) en el código para ajustar el espaciado a tu preferencia
Haz clic en Save para guardar y aplicar tus cambios
Luego, Preview tu Página: