Aprende cómo usar la herramienta de creación de sitios web Hostinger para crear menús desplegables.

En laherramienta de creación de sitios web Hostinger, hay dos formas de creación según si deseas que el menú desplegable tenga una página de destino exclusiva:

Los enlaces (incluidos los menús desplegables) a menudo se bloquean en el editor y enel modo de vista previa, porque algunos de esos enlaces técnicamente podrían no existir incluso antes de quepubliquesoactualicesel sitio web 💡

Crear un menú desplegable simple

Website Builder Pages and navigation panel with the Add new dropdown button highlighted
Website Builder Pages and navigation panel with the Add new dropdown button highlighted
Website Builder pages menu with New dropdown settings open and Rename option highlighted
Website Builder pages menu with New dropdown settings open and Rename option highlighted

Un menú desplegable simple se expande automáticamente cuando se pasa el mouse sobre su título. El título no es clicable, es decir, incluso si se hace clic no abrirá ninguna página.

  1. En el editor, expande el panelPáginas y navegación (Pages and navigation)en el lado izquierdo, y haz clic enAgregar un nuevo menú desplegable (Add a new dropdown):

Los elementos desplegables se insertarán en el menú de navegación de tu sitio web.

  1. Renombrar el menú desplegable:

  2. Para asignar páginas (o enlaces) a un menú desplegable, arrastra cada página (o enlace) con el manejador de seis puntos para que aparezca debajo del menú desplegable:

Crear un menú desplegable con página de destino exclusiva

Hostinger Website Builder pages and navigation panel with a drag handle highlighted for moving a menu item
Hostinger Website Builder pages and navigation panel with a drag handle highlighted for moving a menu item

Un menú desplegable con página de destino exclusiva se expande automáticamente cuando el cursor se coloca sobre su título. Pero a diferencia de un menú desplegable simple, este título es clicable y abrirá la página principal de tu menú desplegable.

  1. En el editor del sitio web, abre la sección izquierda dePáginas y navegación (Pages and navigation). Selecciona la página que deseas usar como página principal del menú desplegable. Esto significa que el título de esta página se convertirá en el título de tu menú desplegable. También puedesCrear una nueva página; cuando alguien haga clic en el título desplegable, se abrirá.

  2. Para crear un menú desplegable, arrastra páginas (o enlaces) con el manejador de seis puntos para que aparezcan debajo de tu página principal del menú desplegable (hacia la derecha, para que aparezcan debajo del icono de la subpágina):

Quitar un elemento del menú desplegable

Hostinger Website Builder pages menu open with “Move out of dropdown” option highlighted for a page
Hostinger Website Builder pages menu open with “Move out of dropdown” option highlighted for a page

Para eliminar una página o enlace del menú desplegable, expande el panel de páginas y navegación en el lado izquierdo, encuentra el elemento (página o enlace) que deseas eliminar del menú desplegable. Haz clic en el engranaje de configuración y seleccionaMover fuera del menú desplegable (Move out from dropdown):

El elemento eliminado no será borrado. Solo se convertirá en un elemento individual visible en tu menú de navegación (página o enlace).

Si eliminas todo el menú desplegable, los elementos asignados a él tampoco se eliminarán; se convertirán en elementos individuales (páginas o enlaces) y serán visibles en tu menú de navegación.

Cambiar el color de fondo del menú desplegable

Hostinger Website Builder header settings panel with transparent header toggle highlighted
Hostinger Website Builder header settings panel with transparent header toggle highlighted

Si activaste la configuración de encabezado transparente (transparent header) en la configuración del encabezado, el fondo del menú desplegable también se mostrará como transparente.

Para solucionar este problema: entra en la configuración del encabezado (Header Settings) y luego desactiva la configuración de Encabezado Transparente (Transparent Header):

Finalmente, selecciona el color de fondo específico del encabezado que desees (el mismo color que elijas para el fondo del encabezado también se aplicará al fondo del menú desplegable).

Fuente: documentación oficial de Hostinger