{"id":5085,"date":"2024-10-30T20:03:24","date_gmt":"2024-10-30T12:03:24","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=5085"},"modified":"2024-10-30T20:04:34","modified_gmt":"2024-10-30T12:04:34","slug":"how-to-create-a-vertical-sticky-sidebar-in-elementor-for-seamless-page-navigation","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/es\/como-crear-una-barra-lateral-vertical-adhesiva-en-elementor-para-una-navegacion-fluida-por-la-pagina","title":{"rendered":"C\u00f3mo crear una barra lateral vertical adhesiva en Elementor para una navegaci\u00f3n fluida en la p\u00e1gina"},"content":{"rendered":"

Una barra lateral vertical fija es un pr\u00e1ctico elemento de dise\u00f1o situado en un lateral de la p\u00e1gina que permanece visible dentro de la ventana gr\u00e1fica a medida que los usuarios se desplazan hacia abajo. Esta barra lateral de posici\u00f3n fija puede ser una herramienta eficaz para guiar a los visitantes a trav\u00e9s de su contenido permitiendo un acceso r\u00e1pido a secciones espec\u00edficas de la p\u00e1gina. Para sitios web con informaci\u00f3n extensa, como p\u00e1ginas de servicios, carteras o entradas de blog, una barra lateral fija mejora la experiencia del usuario ofreci\u00e9ndole una c\u00f3moda herramienta de navegaci\u00f3n, facilit\u00e1ndole el salto a las secciones deseadas sin necesidad de desplazarse mucho.<\/p>

\"\"<\/figure><\/div>

Este tutorial le guiar\u00e1 en la creaci\u00f3n de una barra lateral vertical adhesiva en Elementor con elementos de navegaci\u00f3n, enlaces de anclaje y un estilo personalizado que se adapte a la est\u00e9tica de su sitio web.<\/p>

Preparaci\u00f3n<\/h2>

Antes de empezar, aseg\u00farese de lo siguiente:<\/p>

  1. Elementor Pro<\/mark> Instalado y activado<\/strong>: El efecto pegajoso requiere Elementor Pro.<\/li>\n\n
  2. Configurar p\u00e1gina<\/strong>: Una p\u00e1gina nueva o ya existente en la que desee a\u00f1adir la barra lateral vertical adhesiva.<\/li>\n\n
  3. Familiaridad con Elementor Containers<\/strong>: Recomendamos trabajar con Flexbox<\/mark> Modo contenedor para un control m\u00e1s flexible de este tutorial.<\/li><\/ol>

    Paso 1: Crear una plantilla de una sola p\u00e1gina<\/h3>

    Comenzaremos creando una plantilla de p\u00e1gina \u00fanica y configur\u00e1ndola para albergar el contenedor que servir\u00e1 como nuestra barra lateral vertical adhesiva.<\/p>

    1. Navegue hasta Plantillas<\/li><\/ol>

      En su panel de control de WordPress, vaya a Elementor > Plantillas > A\u00f1adir nueva<\/strong>.<\/p>

      \"\"<\/figure><\/div>
      1. Seleccione el tipo de plantilla<\/li><\/ol>

        En la ventana emergente, elija Una p\u00e1gina<\/strong> como tipo de plantilla y dele un nombre, como \"Plantilla de p\u00e1gina de servicio comercial\".<\/p>

        \"\"<\/figure><\/div>
        1. Elija el tipo de p\u00e1gina<\/li><\/ol>

          En la parte superior de la biblioteca de plantillas, seleccione la opci\u00f3n P\u00e1ginas<\/strong> ficha.<\/p>

          Navegue por las plantillas disponibles para encontrar un estilo adecuado. Puede utilizar la barra de b\u00fasqueda para encontrar plantillas con fines espec\u00edficos, como \"Servicios\" o \"Empresa\". Si est\u00e1 creando esta barra lateral para un tipo de p\u00e1gina concreto, tambi\u00e9n puede configurar condiciones en los ajustes de visualizaci\u00f3n para limitar su aparici\u00f3n a p\u00e1ginas espec\u00edficas.<\/p>

          \"\"<\/figure><\/div>

          Puede elegir si desea insertar una plantilla existente y, si necesita a\u00f1adir una navegaci\u00f3n lateral adhesiva a una de sus p\u00e1ginas, puede editarla directamente.<\/p>

          Paso 2: Crear el contenedor en Elementor<\/h3>

          Este contenedor servir\u00e1 de base para la barra lateral vertical adhesiva.<\/p>

          1. A\u00f1adir el contenedor<\/li><\/ol>

            En el editor de p\u00e1ginas, haga clic en A\u00f1adir nuevo contenedor<\/strong> y arr\u00e1strelo a su \u00e1rea de dise\u00f1o. Este contenedor actuar\u00e1 como estructura principal de la barra lateral adhesiva.<\/p>

            \"\"<\/figure><\/div>
            1. Fijar la direcci\u00f3n del contenedor<\/li><\/ol>

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

              \"\"<\/figure>
              1. Definir la anchura del contenedor<\/li><\/ol>

                En el Estilo<\/strong> pesta\u00f1a, ajuste la anchura a las necesidades de la barra lateral, como 200px o menos, seg\u00fan sus preferencias de dise\u00f1o. Asegurarse de que ocupa el m\u00ednimo espacio en la p\u00e1gina ayuda a mantener la atenci\u00f3n en el contenido principal.<\/p>

                \"\"<\/figure><\/div>

                Paso 3: Crear la barra lateral vertical adhesiva<\/h3>
                1. Insertar t\u00edtulo y elementos de navegaci\u00f3n<\/li><\/ol>

                  A\u00f1ada un R\u00fabrica<\/strong> widget dentro del contenedor con un t\u00edtulo como \"Navegaci\u00f3n r\u00e1pida\" o \"Contenidos\".<\/p>

                  \"\"<\/figure>
                  1. A\u00f1adir elementos a la lista<\/li><\/ol>

                    Inserte un Lista de iconos<\/mark><\/strong> o Bot\u00f3n<\/strong> debajo del encabezado para crear elementos de navegaci\u00f3n. En este caso, utilizaremos una Lista de iconos para conseguir un aspecto aerodin\u00e1mico, dejando espacio entre cada elemento de la barra lateral.<\/p>

                    \"\"<\/figure>
                    1. A\u00f1adir enlaces de navegaci\u00f3n<\/li><\/ol>

                      Para la navegaci\u00f3n de su barra lateral, a\u00f1ada elementos como:<\/p>

                      • Qui\u00e9nes somos<\/strong>: Esto enlazar\u00e1 con la visi\u00f3n general de la empresa.<\/li>\n\n
                      • Nuestros servicios<\/strong>: Dirige a la secci\u00f3n de servicios.<\/li>\n\n
                      • Testimonios<\/strong><\/strong>: Lleva al \u00e1rea de comentarios de los clientes.<\/li>\n\n
                      • Contacte con nosotros<\/strong>: Enlaces al formulario de contacto o a la secci\u00f3n de informaci\u00f3n.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Personalice los nombres y los iconos como desee para reflejar el dise\u00f1o de su p\u00e1gina. Borre el icono o vaya a la galer\u00eda de iconos para seleccionarlo.<\/p>

                        \"\"<\/figure><\/div>
                        1. Establecer enlaces de anclaje<\/li><\/ol>

                          A\u00f1ada enlaces de anclaje a cada elemento de navegaci\u00f3n estableciendo puntos de anclaje en la p\u00e1gina. Por ejemplo, para una secci\u00f3n \"Sobre nosotros\", utilizaremos 1TP5Sobre nosotros<\/strong>y anclajes similares para otras secciones.<\/p>

                          A\u00f1adir un ancla para \"Sobre nosotros<\/h5>

                          En Elementor, busque el Men\u00fa Ancla<\/mark><\/strong> widget. Arr\u00e1strelo justo encima del t\u00edtulo de la secci\u00f3n \"Sobre nosotros\" o a cualquier posici\u00f3n adecuada. Asigne un nombre al ancla (por ejemplo, sobre nosotros) en los ajustes para facilitar la vinculaci\u00f3n posterior.<\/p>

                          \"\"<\/figure>
                          \"\"<\/figure>
                          Vincule el anclaje a la navegaci\u00f3n<\/h5>

                          Vuelva al elemento de la lista de iconos para \"Sobre nosotros\" y vinc\u00falelo estableciendo la URL como #about-us. Los usuarios que hagan clic en este elemento de navegaci\u00f3n saltar\u00e1n inmediatamente a la secci\u00f3n.<\/p>

                          \"\"<\/figure><\/div>

                          Repita este proceso para los restantes elementos del men\u00fa.<\/p>

                          1. Definir la anchura de la barra lateral<\/li><\/ol>

                            Para mantener un dise\u00f1o coherente, establezca la anchura tanto del contenedor de la lista de iconos como del contenedor principal en un valor fijo, como 200px.<\/p>

                            1. Personalizar el estilo de la barra lateral<\/li><\/ol>

                              Puede ajustar la fuente, los colores y el espaciado en el Estilo<\/mark> para que coincida con el estilo de su sitio. Tambi\u00e9n puede a\u00f1adir una color de fondo<\/mark>, relleno y efectos de sombra para que la barra lateral sea visualmente distinta.<\/p>

                              \"\"<\/figure>

                              Paso 4: Activar el efecto adhesivo<\/h3>

                              Para mantener fija la barra lateral mientras el usuario se desplaza, siga estos pasos:<\/p>

                              1. Configuraci\u00f3n del ID CSS para la barra de navegaci\u00f3n y el \u00e1rea de contenido<\/li><\/ol>

                                Seleccione el contenedor de la barra de navegaci\u00f3n y, en la pesta\u00f1a Avanzado, a\u00f1ada un ID de CSS; por ejemplo, establezca el ID como barra lateral-men\u00fa<\/code><\/strong>.<\/p>

                                \"\"<\/figure>
                                • A\u00f1adir c\u00f3digo CSS personalizado<\/li><\/ul>

                                  Abra CSS personalizado en Elementor (un ajuste global o CSS personalizado para el contenedor de la barra de navegaci\u00f3n). A\u00f1ada el siguiente c\u00f3digo:<\/p>

                                  #sidebar-menu {\n    position: fixed; \/* Fija la barra lateral en su sitio, para que no se mueva al desplazarse *\/\n    left: 0; \/* Alinea la barra lateral a la izquierda de la p\u00e1gina *\/\n    arriba: 0; \/* Posiciona la barra lateral en la parte superior de la p\u00e1gina *\/\n    height: 100vh; \/* Ajusta la altura de la barra lateral a la altura completa de la ventana gr\u00e1fica *\/\n    width: 200px; \/* Ajusta la anchura de la barra lateral seg\u00fan sea necesario *\/\n    z-index: 10; \/* Asegura que la barra lateral permanezca encima de otros elementos *\/\n    background-color: #e0f7fa; \/* Ajusta el color de fondo de la barra lateral *\/\n    color: #FFF; \/* Establece el color del texto dentro de la barra lateral *\/\n    padding-top: 250px; \/* A\u00f1ade relleno en la parte superior de la barra lateral *\/\n    overflow-y: auto; \/* Permite el desplazamiento si el contenido de la barra lateral es demasiado largo *\/\n}<\/code><\/pre>
                                  \"\"<\/figure>
                                  Explicaci\u00f3n<\/p>
                                  • posici\u00f3n: fija;
                                    • Mantiene la barra lateral en una posici\u00f3n fija en la pantalla mientras los usuarios se desplazan. Siempre permanecer\u00e1 visible en la ventana gr\u00e1fica independientemente del desplazamiento de la p\u00e1gina.<\/li><\/ul><\/li>\n\n
                                    • izquierda: 0;
                                      • Alinee la barra lateral con el borde izquierdo de la ventana gr\u00e1fica, coloc\u00e1ndola a ras del lado izquierdo de la p\u00e1gina.<\/li><\/ul><\/li><\/ul>
                                        • superior: 0;
                                          • Esto hace que la barra lateral comience en la parte superior de la ventana gr\u00e1fica, aline\u00e1ndola con la parte superior de la p\u00e1gina.<\/li><\/ul><\/li><\/ul>
                                            • altura: 100vh;
                                              • Establece la altura de la barra lateral para que ocupe toda la altura de la ventana gr\u00e1fica (100% de la altura de la ventana gr\u00e1fica). Esto garantiza que la barra lateral abarque desde la parte superior a la inferior de la pantalla.<\/li><\/ul><\/li><\/ul>
                                                • anchura: 200px;
                                                  • Establece la anchura de la barra lateral en 200px. Este valor puede ajustarse en funci\u00f3n de las necesidades de dise\u00f1o.<\/li><\/ul><\/li><\/ul>
                                                    • z-index: 10;
                                                      • Establece el orden de apilamiento de la barra lateral. Un \u00edndice z m\u00e1s alto garantiza que la barra lateral aparezca por encima de otros elementos que podr\u00edan solaparse.<\/li><\/ul><\/li><\/ul>
                                                        • color de fondo: #e0f7fa;
                                                          • Define el color de fondo de la barra lateral. Aqu\u00ed se ha elegido un azul pastel claro (#e0f7fa) para dar un aspecto de calma y limpieza.<\/li><\/ul><\/li><\/ul>
                                                            • 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.<\/li><\/ul><\/li><\/ul>
                                                                • padding-top: 250px;
                                                                  • A\u00f1ade relleno en la parte superior de la barra lateral. Esto puede ser \u00fatil si desea que el contenido principal de la barra lateral (como los enlaces de navegaci\u00f3n) comience m\u00e1s abajo, dejando espacio en la parte superior para la marca o los logotipos.<\/li><\/ul><\/li><\/ul>
                                                                    • 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\u00f1o general de la p\u00e1gina.<\/li><\/ul><\/li><\/ul>
                                                                        \"\"<\/figure><\/div>
                                                                        Una barra lateral vertical adhesiva es un elemento de dise\u00f1o que permanece fijo en el lateral de una p\u00e1gina web mientras los usuarios se desplazan, proporcionando una navegaci\u00f3n r\u00e1pida a secciones espec\u00edficas. Este tutorial le guiar\u00e1 en la creaci\u00f3n de una barra lateral adhesiva en Elementor, utilizando elementos de navegaci\u00f3n, enlaces de anclaje y estilos personalizados para una experiencia de usuario fluida. Con Elementor Pro instalado, crear\u00e1 una plantilla de p\u00e1gina \u00fanica, configurar\u00e1 un contenedor para la barra lateral, a\u00f1adir\u00e1 elementos de navegaci\u00f3n y asignar\u00e1 enlaces de anclaje. Por \u00faltimo, al a\u00f1adir CSS personalizado, la barra lateral se mantiene fija en la ventana gr\u00e1fica, lo que mejora la accesibilidad en p\u00e1ginas con mucho contenido, como las secciones de servicios o portafolio.<\/p>","protected":false},"excerpt":{"rendered":"
                                                                        Una barra lateral vertical adhesiva es un pr\u00e1ctico elemento de dise\u00f1o situado en un lateral de la p\u00e1gina que permanece visible dentro de la ventana gr\u00e1fica a medida que los usuarios se desplazan...<\/p>","protected":false},"author":10,"featured_media":5113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,57],"tags":[418,419],"class_list":["post-5085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugin-usage-and-recommendation","category-plugins-theme","tag-elementor-tutorial","tag-sticky-sidebar",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/5085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/comments?post=5085"}],"version-history":[{"count":2,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/5085\/revisions"}],"predecessor-version":[{"id":5116,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/5085\/revisions\/5116"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media\/5113"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media?parent=5085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/categories?post=5085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/tags?post=5085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}