Cómo crear un menú lateral fijo en WordPress: tutorial detallado

Los menús de barra lateral adhesiva no sólo aportan un toque de diseño moderno a un sitio web, sino que también proporcionan a los visitantes una experiencia de desplazamiento más envolvente. En este artículo, vamos a sumergirnos en cómo utilizar los Elementor responder cantando Elementor Pro Cree un potente menú lateral adhesivo.

¿Qué es un menú lateral fijo?

Los menús de barra lateral adhesiva son diferentes de los tradicionales menús de navegación horizontales que ocupan espacio vertical en el lado izquierdo o derecho de un sitio web. Estos menús están siempre presentes en la página, incluso si el usuario se desplaza por ella.El menú también se fijará en la posición lateralEsto proporciona opciones de navegación continua.

Los menús de la barra lateral suelen estar minimizados por defecto y ocupan poco espacio. Los usuarios pueden hacer clic en un icono para ampliar el menú y mostrar más enlaces de navegación. Este diseño es especialmente adecuado para usuarios de ordenadores de sobremesa y tabletas, pero un menú horizontal tradicional puede seguir siendo una mejor opción para dispositivos móviles.

Ventajas de los menús laterales fijos

1. Ahorra espacio vertical: Los menús de barra lateral pegajosa colocan los elementos de navegación verticalmente, liberando espacio vertical en la parte superior y permitiendo que el contenido del sitio aproveche al máximo la altura de la pantalla.
2. Experiencia de usuario mejorada: Este diseño de menú proporciona una experiencia de desplazamiento única y moderna en la que los usuarios pueden acceder más fácilmente a las opciones de navegación sin tener que volver a la parte superior de la página.
3. Mejor organización de los contenidosDisposición vertical: mediante la disposición vertical, las distintas partes del sitio web pueden mostrarse de forma más clara y ordenada, especialmente indicada para sitios web con mucho contenido.

Herramientas necesarias para crear menús de barra lateral adhesiva con Elementor

Antes de empezar a crear menús de barra lateral adhesiva, debe preparar las siguientes herramientas y funciones:

1. Elementor: Se trata de un popular constructor de páginas de WordPress que ofrece una gran cantidad de opciones de diseño y maquetación.
2. Elementor ProPara implementar menús de barra lateral adhesivos, tendrás que utilizar algunas de las funciones avanzadas de Elementor Pro, como las ventanas emergentes y las plantillas de temas.
3. Plantillas de cabecera normales: Se trata de una plantilla de cabecera diseñada para visitantes de dispositivos móviles con el fin de garantizar una gran experiencia de navegación en móviles.
4. Plantilla parcial: Se utiliza para crear menús de barra lateral de estado minimizado como base para las barras laterales adhesivas.
5. ventana emergente: Se utiliza para mostrar el menú de navegación completo, activando una ventana emergente cuando el usuario hace clic en el icono minimizado de la barra lateral.

Pasos para crear un menú de barra lateral adhesiva

1. Ocultar los títulos generales en las vistas de escritorio y tableta

En primer lugar, necesitaGarantizar que las plantillas de cabecera existentes sólo se muestren en dispositivos móviles y no en ordenadores de sobremesa y tabletas.. Para ello, siga los pasos que se indican a continuación:

• Ve al Creador de temas de Elementor (Plantillas → Creador de temas → Títulos), selecciona tu plantilla de título y edítala con Elementor.

• En el editor de Elementor, seleccione la sección de título y vaya a "alto nivel"Tab.
• Active "Ocultar en escritorio" y "Ocultar en tableta" en los ajustes de Respuesta.

De este modo, los usuarios de ordenadores de sobremesa y tabletas sólo verán el menú de la barra lateral y no la cabecera horizontal normal.

2. Creación de una plantilla parcial para la navegación de la barra lateral

A continuación, crearemos una nueva plantilla que se utilizará para definir el estado minimizado del menú de la barra lateral. Esto será lo que el usuario vea cuando cargue la página por primera vez.

• Vaya al área de Plantillas del backend de WordPress, seleccione la pestaña "Secciones" y haga clic en "Añadir nueva".
• Cree una nueva sección que contenga una columna y configure los parámetros como sigue:
  • Ancho del contenido: ancho completo
  • Distancia a la columna: sin distancia
  • Altura → Altura mínima: 100vh (para que la barra lateral ocupe la totalidad delaltura vertical)
  • Posición de la columna: estiramiento
  • Etiquetas HTML: título (opcional, pero útil para SEO)

En la pestaña Estilos, puede configurar el color de fondo o el degradado de la barra lateral para que sea coherente con el resto del sitio.

3. Configurar las columnas y añadir widgets

Añade algunos widgets básicos a algunas de las plantillas, como logotipos de sitios web, iconos de navegación (para ampliar el menú completo) e iconos de redes sociales.

• Añade un logotipo utilizando el widget de imagen.
• Utilice el widget Icono para añadir un icono que se utilizará para activar el menú de navegación emergente. Puede elegir cualquier icono adecuado, como el icono de las barras, y configurar su color y efecto hover.
• Utiliza el widget Iconos sociales para añadir enlaces a redes sociales y asegúrate de que estén alineados verticalmente.

Una vez completada la configuración, publique o actualice algunas de las plantillas.

4. Creación de una nueva plantilla de una página con barra lateral de navegación

A continuación, es necesario crear una nueva plantilla de una página utilizando el constructor de temas Elementor que contiene el contenido de su sitio y cabeceras de navegación laterales pegajosas.

Para ello, diríjase aPlantillas → Creador de temas:

• cambiar a"Página única" pestañas
• hacer clic (con un ratón u otro dispositivo señalador)"Añadir nuevo"
• Asegúrese de que Seleccionaruna sola página Como tipo de plantilla
• Dilo.Páginas para navegación lateral fija

En el editor de Elementor, crea una sección con dos columnas:

• columna izquierda- Esto acomodará barras laterales adhesivas
• columna derecha- Contendrá el contenido habitual de su sitio

Configurar la columna derecha (contenido)

Para añadir contenido general a la columna de la derecha, añada el botón "Publicar contenido"Widget.

Configurar la columna izquierda (cabecera de la barra lateral)

Para añadir el encabezado de navegación de la barra lateral al menú de la izquierda, añade el widget de plantilla. A continuación, seleccione el que ha creado en el paso anteriorPlantilla de cabecera de barra lateral adhesiva.

Además, las transferencias a esta columnaConfiguración avanzada, configure laÍndice ZEl valor se fija en10000  (diez mil) y sereceptivoEl control está en Activar"Oculto en dispositivos móviles".. Esto garantiza que sólo los visitantes de ordenadores de sobremesa y tabletas verán sus cabeceras de navegación lateral adhesivas.

Configurar el espaciado/disposición de las columnas

La barra lateral ocupa 50% de la página. Para solucionarlo, seleccione la columna de la izquierda (con la barra lateral) y el botónpestaña "Diseño" a suancho de columnaajustado a5%. Esto hará que la columna de la derecha sea automáticamente igual a95%.

Establecer el valor z-index garantiza que la ventana emergente de navegación completa que cree en el paso siguiente se deslice por debajo de la navegación lateral.

selector {
    anchura: 60px;
}

Copia Este CSS garantiza que la navegación lateral sea siempre estrecha estableciendo la anchura en 60 píxeles. Siéntete libre de ajustar este número a tu gusto, pero no te desvíes demasiado de 60px.

Configuración Efecto Deporte

Ahora queremos asegurarnos de que la navegación lateral esté siempre fija en la pantalla.

Para ello, haga clic en Plantillas en la columna de la derecha:

• cambiar a"Avanzado" Tab.
• hacer clic (con un ratón u otro dispositivo señalador)"Efectos de movimiento".
• Pon "top"Ajustar a"Arriba".
• comandante en jefe (militar) "Pegajoso".ajustado a"Escritorio".responder cantando"Tableta"..

Ahora, publique su plantilla de una página y utilice la funciónCondiciones de visualizaciónpara controlar dónde se muestra. Si desea utilizar la navegación lateral fija en todas las páginas, configúrela para que se muestre en la secciónTodas las páginasArriba.

Si se añade a un sitio que ya tiene algunas plantillas de página existentes, asegúrese de cambiar todas las plantillas existentes al estado "Borrador" para desactivarlas y evitar posibles conflictos.

5. Configuración de menús de navegación emergentes

Para que el usuario pueda desplegar el menú de navegación completo, necesitamos crear una ventana emergente. Esta ventana emergente se mostrará cuando el usuario haga clic en el icono de la barra lateral.

• Vaya a Plantillas → Ventanas emergentes, haga clic en "Añadir nuevo" y cree una nueva ventana emergente.
• Configure los ajustes de la ventana emergente, como la anchura, la animación de entrada, la animación de salida, etc., y añada los márgenes adecuados.
• Añade un widget de menú de navegación a la ventana emergente, asegurándote de que los elementos del menú están alineados verticalmente.

Después de publicar la ventana emergente, vuelva a la plantilla de la barra lateral y configure la etiqueta dinámica del icono como "ventana emergente" y selecciona el menú emergente que acabas de crear.

6. Pruebas y optimización

En este punto, el menú de la barra lateral adhesiva está casi completo. Abra la página del sitio web y pruebe la funcionalidad y el aspecto del menú de la barra lateral para asegurarse de que funciona como se espera.

Si encuentras algún problema durante las pruebas, se recomienda probar con el tema Hello de Elementor para asegurarse de que no hay conflictos con otros temas.

resúmenes

Los menús de barra lateral adhesiva aportan una experiencia de diseño y navegación totalmente nueva a los sitios web de WordPress. Aprovechando la potencia de Elementor y Elementor Pro, puedes crear fácilmente un menú de navegación vertical flexible y estéticamente agradable que ofrezca una mejor experiencia de navegación a tus visitantes.