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.
This tutorial will guide you through creating a vertical sticky sidebar in Elementor with navigation items, anchor links, and custom styling to match your website’s aesthetic.
Preparación
Antes de empezar, asegúrese de lo siguiente:
- Elementor Pro Instalado y activado: El efecto pegajoso requiere Elementor Pro.
- Configurar página: Una página nueva o ya existente en la que desee añadir la barra lateral vertical adhesiva.
- 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
We’ll begin by creating a single page template and setting it up to house the container that will serve as our vertical sticky sidebar.
- Navegue hasta Plantillas
En su panel de control de WordPress, vaya a Elementor > Plantillas > Añadir nueva.
- Seleccione el tipo de plantilla
En la ventana emergente, elija Una página as the template type and give it a name, like “Business Service Page Template.”
- Elija el tipo de página
En la parte superior de la biblioteca de plantillas, seleccione la opción Páginas ficha.
Browse the available templates to find a suitable style. You can use the search bar to find templates for specific purposes, such as “Services” or “Company.” If you’re creating this sidebar for a particular type of page, you may also configure conditions in the display settings to limit its appearance to specific pages.
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.
- 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.
- 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.
- Definir la anchura del contenedor
En el Estilo tab, adjust the width to fit the sidebar’s needs, such as 200px or less, depending on your design preferences. Ensuring it takes up minimal space on the page helps maintain focus on the main content.
Paso 3: Crear la barra lateral vertical adhesiva
- Insertar título y elementos de navegación
Añada un Rúbrica widget inside the container with a title like “Quick Navigation” or “Contents.”
- Añadir elementos a la lista
Inserte un Lista de iconos o Botón widget below the heading to create navigation items. Here, we’ll use an Icon List for a streamlined look, allowing space between each item in the sidebar.
- 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.
- Establecer enlaces de anclaje
Add anchor links to each navigation item by setting up anchor points on the page. For example, for an “About Us” section, we’ll use 1TP5Sobre nosotrosy anclajes similares para otras secciones.
Add an Anchor for “About Us”
En Elementor, busque el Menú Ancla widget. Drag it just above the title for the “About Us” section or to any appropriate position. Name the anchor (for example, about-us) in the settings for easy linking later.
Vincule el anclaje a la navegación
Return to the Icon List item for “About Us” and link it by setting the URL as #about-us. Users clicking on this navigation item will immediately jump to the section.
Repita este proceso para los restantes elementos del menú.
- 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.
- Personalizar el estilo de la barra lateral
Puede ajustar la fuente, los colores y el espaciado en el Estilo tab to match your site’s style. You may also add a 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:
- 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;
- Align the sidebar to the viewport’s left edge, positioning it flush with the page’s left side.
- 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;
- Sets the sidebar’s height to occupy the entire viewport height (100% of the viewport height). This ensures the sidebar spans from the top to the bottom of the screen.
- anchura: 200px;
- Sets the sidebar’s width to 200px. This value can be adjusted based on design needs.
- z-index: 10;
- Sets the sidebar’s stacking order. A higher z-index ensures the sidebar appears above other elements that might overlap.
- 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;
- It allows vertical scrolling inside the sidebar if the content exceeds its height. This ensures the content remains accessible without affecting the page’s overall layout.
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.