Diseña y publica tus sitios rápidamente

Agrega una app de navegación con un menú desplegable

Acerca de la app de Dropdown Navigation

En este artículo te enseñaremos todo lo que tienes que saber sobre la nueva app de navegación. Es mucho mejor que la anterior ya que con ella puedes agregar un menú desplegable en cada uno de los vínculos principales.

Diferencias con la app de navegación anterior

La app de navegación anterior te permitía un estilo para cada elemento; es decir, podrías tener varios estilos en la misma app.

Vínculos

Con la app anterior, tenías la opción de tener diferentes colores para cada elemento

Esto puede ser algo confuso en un menú de navegación.

Con el nuevo menú de navegación, todos los estilos se actualizan al mismo tiempo.

Dropdown Navigation

Varios elementos “compartiendo” el mismo estilo en la nueva app de navegación

Además, con la app anterior, era posible que olvidaras incluir algunas palabras dentro del vínculo pero con esta nueva, todo se maneja a través del panel CMS, que evitará este error.

Panel CMS para editar vínculos

El panel CMS te permite editar todos los vínculos en el menú desplegable de la app

A continuación, te enseñaremos a usarla en su totalidad.

Cómo configurar la app de Dropdown Navigation

Instálala

Accede a tu sitio Breezi y dirígete a la App Store. Arrastra el botón de ”Install New”, que está del lado derecho de la app de Dropdown Navigation, hasta tu layout.

Dropdown Navigation en la App Store

Abre la App Store y arrastra el botón de Dropdown Navigation hasta el layout para instalar esta app

La app se cargará donde la hayas colocado en tu layout. Su forma predeterminada se ve como en la imagen a continuación.

Esta es la apariencia predeterminada de esta app

Esta es la apariencia predeterminada de esta app

Modifica los elementos predeterminados

Una vez que la instales, podrás agregar tus propios elementos. Para hacerlo, haz clic en el botón con el ícono del lápiz llamado “Edit Content” en la barra de herramientas de la app.

"Edit Content" en la barra de herramientas de la app

Haz clic en este botón para abrir el panel CMS

Esto abrirá el panel CMS.

El panel CMS para la app de dropdown navigation

Con el panel CMS podrás editar los elementos de la app con gran facilidad

La primera de las pestañas de la izquierda, llamada “Manage Navigation Links”, es para administrar los vínculos principales (es decir, aquellos que no son parte del menú desplegable). En la pestaña de “Manage Links” es donde podrás editar los sub-vínculos.

Para editar un elemento, haz clic en el botón de “Edit” a su derecha. Esto abrirá una ventana como la que se muestra a continuación:

"Edit Navigation Link"

Aquí puedes editar el nombre y el URL del vínculo

Ahí podrás editar el nombre del vínculo en “Link Title”, que es el que aparecerá en el sitio (por ejemplo: Inicio). Ahí mismo es donde deberás asignarle un destino de URL al vínculo. Puede ser para una página dentro de tu sitio o para un URL externo, dependiendo de a dónde quieres redirigir a tus visitantes.

Además puedes seleccionar si quieres que el vínculo se abra en la misma ventana (“Same Window”) o en una nueva (“New Window”).

Para agregar más elementos

Para agregar un vínculo principal, haz clic en la pestaña de “New Navigation Link” que está a la izquierda. Esto agregará un vínculo principal a tu menú de navegación. Esta ventana es casi idéntica a la de “New Link” pero sin la opción de “Parent Link” o de vínculo principal. Nos adentraremos más en esto a continuación.

Para agregar un sub-vínculo, haz clic en la pestaña de “New Link”. Como podrás darte cuenta, el nombre no incluye la palabra “Navigation”. Esto es porque no es para agregar uno de los vínculos principales, sino para añadir una subsección.

"New Link"

Con la opción de “New Link” podrás agregar subvínculos a tu app de navegación

Para agregar un sub-vínculo, deberás seleccionar un “Parent Link” o vínculo principal. El elemento que crees aparecerá en el menú desplegable del vínculo principal que seleccionaste.

Para cambiar el orden de los elementos

Existen dos lugares donde puedes cambiar el orden de los vínculos en tu app de dropdown navigation. Esto afecta la posición en que se muestran cada uno de los elementos.

Primero, puedes cambiar el orden de los vínculos principales en la pestaña de “Manage Navigation Links”. Para reorganizar los sub-vínculos, dirígete a “Manage Links”. Ambos páneles funcionan de la misma manera.

Se verán como en la siguiente imagen.

"Managing Links"

Puedes arrastrar cada uno de los elementos para cambiar su posición

Para cambiar a los elementos de posición, haz clic en alguno y arrástralo hacia arriba o abajo. Suéltalo cuando esté en la posición deseada.

Para estilizar los vínculos principales

Para cambiar el estilo de los vínculos principales (color, tipografía, tamaño, etc.) deberás pasar el cursor sobre el primero de estos elementos y hacer clic en el dot de estilo que está del lado derecho. En la imagen a continuación tendrás una referencia visual.

Dot de estilo

Este dot de estilo puede ser difícil de alcanzar si no se pasa el cursor por el lugar correcto

Una vez que hagas clic en este dot, verás que se abrirá una barra de herramientas donde tendrás las opciones para dar formato al texto.

Barra de herramientas

Edita el estilo del texto con las opciones en esta barra de herramientas

Al hacer clic en la opción de color, obtendrás dos opciones diferentes: “Default Color” (color predeterminado para el estado normal del vínculo) y “Rollover Color” (para cuando el cursor pasa sobre el vínculo).

Opciones de colores para los vínculos

Puedes seleccionar un color de “Default” y otro de “Rollover” para tus vínculos

Al editar los colores, los sub-vínculos también reflejarán el cambio. Si quieres que los vínculos principales y los sub-vínculos tengan colores diferentes, continúa leyendo este tutorial.

Para estilizar los sub-vínculos

Si quieres editar los estilos de los sub-vínculos, pasa tu cursor sobre el primero de los sub-vínculos que se desplega del primer vínculo principal. Haz clic en su dot de estilo.

Dot de estilo para los sub-vínculos

Dot de estilo para los sub-vínculos

Toma en cuenta que debe ser el primer sub-vínculo del primer vínculo principal.

Se abrirá la misma barra de herramientas y tendrás las mismas opciones con ella. Sin embargo, estas opciones solamente afectarán a los sub-vínculos.

Barra de herramientas

Estas opciones no modificarán los vínculos principales

Preguntas frecuentes

¿Todavía puedo usar la app de navegación anterior?

Si la tienes instala en tu sitio actualmente (es decir, si no eres un usuario nuevo de Breezi), todavía podrás usar esta app. No obstante, los sitios nuevos no tendrán la versión anterior de la app de navegación.

Aun así, te recomendamos usar esta versión. ¡Es mejor en muchas formas!

¿Por qué el color de los vínculos principales modifican el de los sub-vínculos?

Esto es normal. Si quieres que tengan colores diferentes, te recomendamos editar el color de los vínculos principales primero. Una vez que hayas establecido su color, haz clic en el dot de estilo de los sub-vínculos. Sigue los pasos que te presentamos en este tutorial al respecto.

¿Cuál es la diferencia entre “Navigation Links” (vínculos principales) y “Links” (vínculos)?

Básicamente, los “Navigation Links” se refiere a los vínculos de los cuales se desplega el menú (que a su vez, contiene “Links”).