Una barra lateral vertical fija es un práctico elemento de diseño situado en un lateral de la página que permanece visible dentro de la ventana gráfica a medida que los usuarios se desplazan hacia abajo. Esta barra lateral de posición fija puede ser una herramienta eficaz para guiar a los visitantes a través de su contenido permitiendo un acceso rápido a secciones específicas de la página. Para sitios web con información extensa, como páginas de servicios, carteras o entradas de blog, una barra lateral fija mejora la experiencia del usuario ofreciéndole una cómoda herramienta de navegación, facilitándole el salto a las secciones deseadas sin necesidad de desplazarse mucho.

Este tutorial le guiará en la creación de una barra lateral vertical adhesiva en Elementor con elementos de navegación, enlaces de anclaje y un estilo personalizado que se adapte a la estética de su sitio web.

Preparación

Antes de empezar, asegúrese de lo siguiente:

1. Elementor Pro Instalado y activado: El efecto pegajoso requiere Elementor Pro.
2. Configurar página: Una página nueva o ya existente en la que desee añadir la barra lateral vertical adhesiva.
3. Familiaridad con Elementor Containers: Recomendamos trabajar con Flexbox Modo contenedor para un control más flexible de este tutorial.

Paso 1: Crear una plantilla de una sola página

Comenzaremos creando una plantilla de página única y configurándola para albergar el contenedor que servirá como nuestra barra lateral vertical adhesiva.

1. Navegue hasta Plantillas

En su panel de control de WordPress, vaya a Elementor > Plantillas > Añadir nueva.

2. Seleccione el tipo de plantilla

En la ventana emergente, elija Una página como tipo de plantilla y dele un nombre, como "Plantilla de página de servicio comercial".

3. Elija el tipo de página

En la parte superior de la biblioteca de plantillas, seleccione la opción Páginas ficha.

Navegue por las plantillas disponibles para encontrar un estilo adecuado. Puede utilizar la barra de búsqueda para encontrar plantillas con fines específicos, como "Servicios" o "Empresa". Si está creando esta barra lateral para un tipo de página concreto, también puede configurar condiciones en los ajustes de visualización para limitar su aparición a páginas específicas.

Puede elegir si desea insertar una plantilla existente y, si necesita añadir una navegación lateral adhesiva a una de sus páginas, puede editarla directamente.

Paso 2: Crear el contenedor en Elementor

Este contenedor servirá de base para la barra lateral vertical adhesiva.

1. Añadir el contenedor

En el editor de páginas, haga clic en Añadir nuevo contenedor y arrástrelo a su área de diseño. Este contenedor actuará como estructura principal de la barra lateral adhesiva.

2. Fijar la dirección del contenedor

Seleccione el contenedor y, a continuación, establezca su dirección en Vertical en el panel de configuración de la izquierda. Una dirección vertical permite que los elementos de la barra lateral se apilen de arriba abajo, lo que resulta esencial para crear una disposición vertical de la barra lateral.

3. Definir la anchura del contenedor

En el Estilo pestaña, ajuste la anchura a las necesidades de la barra lateral, como 200px o menos, según sus preferencias de diseño. Asegurarse de que ocupa el mínimo espacio en la página ayuda a mantener la atención en el contenido principal.

Paso 3: Crear la barra lateral vertical adhesiva

1. Insertar título y elementos de navegación

Añada un Rúbrica widget dentro del contenedor con un título como "Navegación rápida" o "Contenidos".

2. Añadir elementos a la lista

Inserte un Lista de iconos o Botón debajo del encabezado para crear elementos de navegación. En este caso, utilizaremos una Lista de iconos para conseguir un aspecto aerodinámico, dejando espacio entre cada elemento de la barra lateral.

3. Añadir enlaces de navegación

Para la navegación de su barra lateral, añada elementos como:

• Quiénes somos: Esto enlazará con la visión general de la empresa.
• Nuestros servicios: Dirige a la sección de servicios.
• Testimonios: Lleva al área de comentarios de los clientes.
• Contacte con nosotros: Enlaces al formulario de contacto o a la sección de información.

Personalice los nombres y los iconos como desee para reflejar el diseño de su página. Borre el icono o vaya a la galería de iconos para seleccionarlo.

4. Establecer enlaces de anclaje

Añada enlaces de anclaje a cada elemento de navegación estableciendo puntos de anclaje en la página. Por ejemplo, para una sección "Sobre nosotros", utilizaremos 1TP5Sobre nosotrosy anclajes similares para otras secciones.

Añadir un ancla para "Sobre nosotros

En Elementor, busque el Menú Ancla widget. Arrástrelo justo encima del título de la sección "Sobre nosotros" o a cualquier posición adecuada. Asigne un nombre al ancla (por ejemplo, sobre nosotros) en los ajustes para facilitar la vinculación posterior.

Vincule el anclaje a la navegación

Vuelva al elemento de la lista de iconos para "Sobre nosotros" y vincúlelo estableciendo la URL como #about-us. Los usuarios que hagan clic en este elemento de navegación saltarán inmediatamente a la sección.

Repita este proceso para los restantes elementos del menú.

5. Definir la anchura de la barra lateral

Para mantener un diseño coherente, establezca la anchura tanto del contenedor de la lista de iconos como del contenedor principal en un valor fijo, como 200px.

6. Personalizar el estilo de la barra lateral

Puede ajustar la fuente, los colores y el espaciado en el Estilo para que coincida con el estilo de su sitio. También puede añadir una color de fondo, relleno y efectos de sombra para que la barra lateral sea visualmente distinta.

Paso 4: Activar el efecto adhesivo

Para mantener fija la barra lateral mientras el usuario se desplaza, siga estos pasos:

1. Configuración del ID CSS para la barra de navegación y el área de contenido

Seleccione el contenedor de la barra de navegación y, en la pestaña Avanzado, añada un ID de CSS; por ejemplo, establezca el ID como barra lateral-menú.

• Añadir código CSS personalizado

Abra CSS personalizado en Elementor (un ajuste global o CSS personalizado para el contenedor de la barra de navegación). Añada el siguiente código:

#sidebar-menu {
    position: fixed; /* Fija la barra lateral en su sitio, para que no se mueva al desplazarse */
    left: 0; /* Alinea la barra lateral a la izquierda de la página */
    arriba: 0; /* Posiciona la barra lateral en la parte superior de la página */
    height: 100vh; /* Ajusta la altura de la barra lateral a la altura completa de la ventana gráfica */
    width: 200px; /* Ajusta la anchura de la barra lateral según sea necesario */
    z-index: 10; /* Asegura que la barra lateral permanezca encima de otros elementos */
    background-color: #e0f7fa; /* Ajusta el color de fondo de la barra lateral */
    color: #FFF; /* Establece el color del texto dentro de la barra lateral */
    padding-top: 250px; /* Añade relleno en la parte superior de la barra lateral */
    overflow-y: auto; /* Permite el desplazamiento si el contenido de la barra lateral es demasiado largo */
}

Explicación

• posición: fija;
  • Mantiene la barra lateral en una posición fija en la pantalla mientras los usuarios se desplazan. Siempre permanecerá visible en la ventana gráfica independientemente del desplazamiento de la página.
• izquierda: 0;
  • Alinee la barra lateral con el borde izquierdo de la ventana gráfica, colocándola a ras del lado izquierdo de la página.

• superior: 0;
  • Esto hace que la barra lateral comience en la parte superior de la ventana gráfica, alineándola con la parte superior de la página.

• altura: 100vh;
  • Establece la altura de la barra lateral para que ocupe toda la altura de la ventana gráfica (100% de la altura de la ventana gráfica). Esto garantiza que la barra lateral abarque desde la parte superior a la inferior de la pantalla.

• anchura: 200px;
  • Establece la anchura de la barra lateral en 200px. Este valor puede ajustarse en función de las necesidades de diseño.

• z-index: 10;
  • Establece el orden de apilamiento de la barra lateral. Un índice z más alto garantiza que la barra lateral aparezca por encima de otros elementos que podrían solaparse.

• color de fondo: #e0f7fa;
  • Define el color de fondo de la barra lateral. Aquí se ha elegido un azul pastel claro (#e0f7fa) para dar un aspecto de calma y limpieza.

• color: #FFF;
  • Establece el color del texto dentro de la barra lateral en blanco (#FFF). Esto proporciona contraste contra el fondo azul pastel, mejorando la legibilidad.

• padding-top: 250px;
  • Añade relleno en la parte superior de la barra lateral. Esto puede ser útil si desea que el contenido principal de la barra lateral (como los enlaces de navegación) comience más abajo, dejando espacio en la parte superior para la marca o los logotipos.

• overflow-y: auto;
  • Permite el desplazamiento vertical dentro de la barra lateral si el contenido supera su altura. Esto garantiza que el contenido siga siendo accesible sin afectar al diseño general de la página.

Una barra lateral vertical adhesiva es un elemento de diseño que permanece fijo en el lateral de una página web mientras los usuarios se desplazan, proporcionando una navegación rápida a secciones específicas. Este tutorial le guiará en la creación de una barra lateral adhesiva en Elementor, utilizando elementos de navegación, enlaces de anclaje y estilos personalizados para una experiencia de usuario fluida. Con Elementor Pro instalado, creará una plantilla de página única, configurará un contenedor para la barra lateral, añadirá elementos de navegación y asignará enlaces de anclaje. Por último, al añadir CSS personalizado, la barra lateral se mantiene fija en la ventana gráfica, lo que mejora la accesibilidad en páginas con mucho contenido, como las secciones de servicios o portafolio.