Cómo crear un menú de barra lateral fijo en WordPress con Elementor

Te mostramos paso a paso cómo crear un menú de navegación de barra lateral vertical para una experiencia de desplazamiento envolvente.
imagen destacada
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Cansado del menú horizontal estándar? En esta publicación, te mostramos paso a paso cómo crear un menú de navegación de barra lateral vertical para una experiencia de desplazamiento envolvente.

¿Desea obtener acceso a más espacio vertical en su sitio web de WordPress y crear una experiencia de desplazamiento inmersivo? Un menú de barra lateral sticky podría ser la clave.

Con este tipo de encabezado, puede pegar verticalmente su menú y navegación al costado de su sitio, en lugar de usar un menú horizontal tradicional:

En esta publicación, te muestro paso a paso cómo crear este menú de navegación de barra lateral sticky usando Elementor y Elementor Pro. ¡Vamos a profundizar!

¿Qué es un menú de barra lateral fijo?

A diferencia de un encabezado fijo tradicional o que se encoge que se pega horizontalmente en la parte superior de su sitio, un encabezado de barra lateral pegajoso ocupa un espacio vertical a la izquierda o a la derecha de su sitio.

Siempre está ahí, pero ocupa muy poco espacio en su estado minimizado predeterminado. Si un visitante desea expandir el menú completo, puede hacer clic en el ícono para hacer que el menú de navegación completo se “deslice”.

Así es como se ve el menú de la barra lateral adhesiva de forma predeterminada:

Y así es como se ve si un visitante hace clic para expandir el menú completo:

Una cosa a tener en cuenta es que este efecto solo funciona para los visitantes de computadoras de escritorio y tabletas; no es una opción viable para los visitantes de dispositivos móviles. Por esa razón, querrá tener un encabezado alternativo regular que se cargue para los visitantes móviles. Lo ayudaremos a configurar este encabezado móvil de respaldo en el tutorial.

¿Cuáles son los beneficios de un menú de barra lateral fijo?

El principal beneficio es que este tipo de encabezado deja más espacio vertical para su contenido porque no hay un encabezado que ocupe espacio en la parte superior. Puede utilizar el 100% del espacio vertical; todo lo que necesita hacer es sacrificar un poco de espacio en el lateral.

Esto también crea una experiencia de desplazamiento envolvente para sus visitantes mientras les da acceso a su navegación en cualquier momento.

Lo que necesita para crear un menú de barra lateral pegajoso con Elementor

Para crear su menú de barra lateral pegajoso, deberá combinar algunas plantillas / funciones diferentes. Esto es lo que necesitará:

  • Encabezado normal: será el encabezado alternativo que utiliza su sitio para los visitantes móviles. Ocultará este encabezado para los visitantes de computadoras de escritorio y tabletas para que pueda usar el encabezado de la barra lateral en su lugar.
  • Plantilla de sección: creará una plantilla de sección separada para el encabezado de la barra lateral minimizado (el estado predeterminado).
  • Menú emergente: esta es la navegación de la barra lateral completa que aparece cuando un visitante hace clic en el menú de la barra lateral minimizado. En el ejemplo anterior, la ventana emergente es lo que contiene los enlaces de menú reales para «Página de inicio», «Acerca de», etc.
  • Plantilla de página: esto es lo que le permite decirle a Elementor que muestre el encabezado de la barra lateral junto con su contenido habitual.

Debido a que necesitará trabajar con ventanas emergentes y plantillas de temas, necesita Elementor Pro para seguir este tutorial. Si aún no lo tiene, puede comprar su copia aquí.

¿Prefieres un encabezado que se encoge? Aprenda a crear uno

Cómo crear un menú de barra lateral fijo

1. Oculte su encabezado en la vista de escritorio y tableta

Para comenzar, debe asegurarse de que su encabezado existente solo se muestre a los visitantes móviles.

Para hacer eso, abra su plantilla de encabezado usando Elementor Theme Builder (Plantillas → Theme Builder → Encabezado. Luego, busque el nombre de su encabezado y haga clic en Editar con Elementor ). 

O, si aún no ha creado su plantilla de encabezado inicial, puede crear una nueva plantilla de encabezado para que sirva como su encabezado móvil. Elementor Pro incluye una serie de plantillas prediseñadas con las que puede empezar. O bien, siempre puede crear su encabezado móvil desde cero. Como referencia, usamos la plantilla de encabezado del kit de plantillas de agencia digital.

Una vez que haya abierto la interfaz de Elementor, abra la configuración de la sección que contiene su encabezado:

  • Vaya a la pestaña Avanzado.
  • Busque la configuración de respuesta.
  • Use la palanca para habilitar Ocultar en el escritorio y Ocultar en la tableta en la configuración de Visibilidad.

2. Cree una nueva plantilla para la navegación de la barra lateral

Ahora es el momento de crear la plantilla de sección que actuará como navegación de la barra lateral.

Nota: al principio, todo en su plantilla se verá muy grande, demasiado grande para funcionar como un menú de navegación de la barra lateral. ¡Que no cunda el pánico! No está haciendo nada malo; más adelante, lo solucionará con algunos CSS que proporcionamos.

Para crear su plantilla, vaya al área Plantillas en su panel de control:

  1. Vaya a la pestaña Sección.
  2. Haga clic en Agregar nuevo.
  3. Nombrarlo Sticky Side-Nav cabecera.

Nota n. ° 2:está creando una plantilla de «Sección» normal, no una plantilla de «Encabezado» con Theme Builder (aunque va a utilizar esta plantilla como su encabezado de navegación lateral adhesivo).

Configurar ajustes de sección

Primero, cree una nueva sección con una columna. En la configuración de Diseño , configure la sección así:

  • Ancho del contenido: ancho completo
  • Altura → Altura mínima: 100 vh (esto configura el encabezado de la barra lateral para que ocupe el 100% de la altura vertical)
  • Posición de la columna: Estirar
  • Etiqueta HTML: encabezado (esto es opcional, pero es bueno para SEO configurarlo de esta manera)

Una vez que haya configurado el diseño, puede ir a la pestaña Estilo para configurar el fondo de su navegación lateral. Querrá elegir un color o degradado que coincida con el resto de su sitio.

Configurar ajustes de columna

A continuación, abra la configuración de la columna única dentro de su sección:

  • En la pestaña Diseño , establezca el menú desplegable Alineación vertical igual a Espacio entre.
  • En la pestaña Avanzado , agregue un relleno de 50 px en la parte inferior de la columna.

Agregar widgets

Ahora, puede agregar los widgets para que se muestren en el menú de la barra lateral. Para nuestro ejemplo, hemos agregado:

  • Un logo
  • Un icono para abrir el menú completo
  • Iconos de seguimiento social

Nota: recuerde que utilizará una ventana emergente para contener los elementos reales del menú de navegación; todavía no necesita preocuparse por agregar un menú de navegación. Todo lo que necesita hacer es agregar el ícono en el que los visitantes harán clic para abrir el menú completo.

Logotipo del sitio:

Agregue la imagen de su logotipo usando un widget de imagen.

Icono:

Agregue el icono de alternar usando un widget de icono. Para nuestro ejemplo, usamos el ícono de barras. Sin embargo, puede utilizar cualquier icono, o incluso una imagen o un archivo Lottie. Solo asegúrese de que los visitantes puedan entender claramente que pueden abrir el menú completo haciendo clic aquí.

También debe elegir un color y un color de desplazamiento que coincida con su tema.

Iconos sociales:

Puede agregar tantas redes sociales como desee utilizando el widget Iconos sociales. También puede configurar las formas y los colores para que coincidan con su tema.

Para asegurarse de que sus íconos estén alineados verticalmente en una sola columna, debe usar un widget de íconos sociales separado para cada red.

¡Y eso es! Asegúrese de publicar / actualizar su plantilla de sección y luego vuelva al panel de WordPress.

3. Cree una nueva plantilla única que incluya la navegación de la barra lateral

A continuación, debe utilizar Elementor Theme Builder para crear una nueva plantilla de página única que incluya tanto el contenido de su sitio como su encabezado de navegación lateral.

Para hacer esto, vaya a Plantillas → Creador de temas:

  • Vaya a la pestaña Individual.
  • Haga clic en Agregar nuevo.
  • Elija Individual como tipo de plantilla.
  • Seleccione Página como tipo de publicación.
  • Asígnele el nombre Page con Fixed Side-Nav.

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

  • Columna izquierda: esto mantendrá la barra lateral adhesiva.
  • Columna derecha: contendrá el contenido habitual de su sitio.

Configurar columna derecha (contenido)

Para agregar su contenido habitual a la columna de la derecha, agregue los widgets de contenido necesarios para su sitio. Es probable que este sea el título de la publicación y el contenido de la publicación , así como cualquier otro widget que desee incluir.

Configurar columna izquierda (encabezado de la barra lateral)

Para agregar su encabezado de navegación lateral al menú de la izquierda, agregue un widget de plantilla. Luego, seleccione la plantilla de Encabezado de barra lateral adhesiva que creó en el paso anterior.

Además, vaya a la configuración avanzada de esta columna y utilice los controles de respuesta para habilitar Ocultar en el móvil. Esto asegura que solo los visitantes de computadoras de escritorio y tabletas vean su encabezado de navegación lateral fijo.

Configurar el espaciado / diseño de columnas

En este momento, su navegación lateral ocupa el 50% de la página. Para solucionarlo, seleccione la columna izquierda (con su navegador lateral) y establezca su Ancho de columna igual al 5% en la pestaña Diseño. Esto debería hacer que la columna de la derecha sea automáticamente igual al 95%.

Ahora, debe agregar CSS personalizado adicional para terminar las cosas:

  1. Abra la configuración de la columna de la izquierda.
  2. Vaya a la pestaña Avanzado.
  3. Pegue el siguiente CSS en el cuadro CSS personalizado.

selector {

    posición: fija;

    izquierda: 0px;

    arriba: 0px;

    ancho: 60px;

    margen izquierdo: 0px;

    relleno: 0px;

    margen superior: 0px;

    índice z: 10000;

}

Este CSS hace algunas cosas:

  1. Se asegura de que la navegación lateral siempre se mantenga estrecha al establecer el ancho igual a 60 px; no dude en ajustar este número de acuerdo con sus preferencias, pero no se desvíe demasiado de 60 px.
  2. Garantiza que la navegación lateral permanezca fija en la pantalla en todo momento.
  3. Se asegura de que la ventana emergente de navegación completa que creará en el siguiente paso se deslice debajo de la navegación lateral al establecer el índice Z en 10,000.

Ahora, publique su plantilla de página única y use las condiciones de visualización para controlar dónde aparece. Si desea utilizar su navegador lateral fijo en cada página, configúrelo para que se muestre en Todas las páginas.

Si está agregando esto a un sitio donde ya tiene algunas plantillas de página existentes, asegúrese de cambiar todas esas plantillas existentes al estado «Borrador» para deshabilitarlas y evitar posibles conflictos.

4. Cree el menú de navegación emergente

A continuación, debe crear la ventana emergente que muestra el menú de navegación completo cuando un visitante hace clic en el icono en su encabezado de navegación lateral. La ventana emergente se deslizará debajo de la navegación lateral para crear un efecto realmente elegante.

Para los pasos del tutorial a continuación, mantendremos las cosas simples. Sin embargo, puedes experimentar todo lo que quieras aquí para crear algo realmente asombroso. Si desea obtener más información sobre cómo crear menús con Elementor Popup Builder, consulte nuestra guía completa sobre ese tema.

Para comenzar, vaya a Plantillas → Ventanas emergentes → Agregar nuevo y asigne un nombre a su ventana emergente para ayudarlo a recordarla, como Navegación deslizante.

Configurar los ajustes emergentes

Abra la Configuración emergente haciendo clic en el icono de engranaje en la esquina inferior izquierda y configúrelos así:

  • Ancho: 450px
  • Altura: ajustar a la pantalla
  • Posición horizontal: izquierda
  • Superposición: Ocultar (desactivado)
  • Animación de entrada: deslice hacia la izquierda
  • Salir de la animación: deslizar hacia la izquierda

Para asegurarse de que su ventana emergente aparezca a la derecha del navegador lateral existente cuando se deslice, debe agregar un margen:

  • Vaya a la pestaña Avanzado.
  • Busque la configuración de margen.
  • Agregue 60 píxeles a la izquierda (o la derecha si elige mostrar el navegador lateral adhesivo en el otro lado).
  • Agregue 20 píxeles debajo de Padding.

Agregue su menú de navegación

A continuación, use widgets para agregar su menú de navegación al cuerpo de la ventana emergente. En mi ejemplo, utilicé cuatro widgets de Encabezado. También puede usar el widget Menú de navegación para agregar rápidamente uno de sus menús de navegación existentes; solo asegúrese de establecer el Diseño igual a Vertical. También es posible que desee alinearlo al centro.

Una vez que haya terminado, asegúrese de publicar su ventana emergente. No necesita configurar ninguna condición de visualización, activadores o reglas avanzadas; manejará la activación de su ventana emergente en el siguiente paso.

5. Configure el icono de navegación lateral para activar la ventana emergente del menú de navegación completa

Para terminar, debe configurarlo de modo que la ventana emergente del menú de navegación se deslice hacia afuera cuando un visitante haga clic en el ícono en la plantilla de la sección de navegación lateral.

Para hacer esto, vaya a Plantillas → Plantillas guardadas y edite su plantilla de sección de encabezado Sticky Side-Nav existente.

Abra la configuración del icono de navegación. Luego:

  1. Haga clic en la opción Etiquetas dinámicas para el enlace.
  2. Elija Ventana emergente en Acciones en la lista de opciones de etiquetas dinámicas.

Una vez que haya configurado el enlace como emergente:

  1. Haga clic en el icono de llave inglesa para elegir la ventana emergente específica.
  2. Establezca la Acción igual a Alternar ventana emergente.
  3. Utilice el campo de búsqueda emergente para buscar y seleccionar la ventana emergente de navegación deslizante que creó en el paso anterior.

Luego, actualice su plantilla de sección.

6. Pruebe y disfrute

En este punto, ¡deberías haber terminado! Abra una página en su sitio y asegúrese de que su nuevo encabezado fijo de navegación lateral esté funcionando como se esperaba.

Si tiene algún problema, intente cambiar temporalmente al Hello theme para asegurarse de que no haya ningún conflicto con su tema.

Si bien este tutorial debería funcionar con cualquier tema de WordPress, siempre existe la posibilidad de que surjan problemas inesperados. Si su encabezado de navegación lateral sticky funciona en Hello pero no en su tema, es posible que desee comunicarse con el desarrollador de su tema para obtener ayuda.

screen tagSupport1