{"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\/pt\/como-criar-uma-barra-lateral-autocolante-vertical-no-elementor-para-uma-navegacao-perfeita-na-pagina","title":{"rendered":"Como criar uma barra lateral vertical fixa no Elementor para uma navega\u00e7\u00e3o perfeita na p\u00e1gina"},"content":{"rendered":"

Uma barra lateral fixa vertical \u00e9 um elemento de design pr\u00e1tico posicionado na parte lateral da p\u00e1gina que permanece vis\u00edvel na janela de visualiza\u00e7\u00e3o \u00e0 medida que os utilizadores se deslocam para baixo. Esta barra lateral de posi\u00e7\u00e3o fixa pode ser uma ferramenta eficiente para orientar os visitantes atrav\u00e9s do seu conte\u00fado, permitindo um acesso r\u00e1pido a sec\u00e7\u00f5es espec\u00edficas da p\u00e1gina. Para s\u00edtios Web com informa\u00e7\u00f5es extensas, como p\u00e1ginas de servi\u00e7os, portef\u00f3lios ou publica\u00e7\u00f5es de blogues, uma barra lateral fixa melhora a experi\u00eancia do utilizador ao oferecer uma ferramenta de navega\u00e7\u00e3o conveniente, facilitando o acesso \u00e0s sec\u00e7\u00f5es pretendidas sem necessidade de percorrer muito o ecr\u00e3.<\/p>

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

Este tutorial ir\u00e1 gui\u00e1-lo atrav\u00e9s da cria\u00e7\u00e3o de uma barra lateral vertical fixa no Elementor com itens de navega\u00e7\u00e3o, liga\u00e7\u00f5es de \u00e2ncora e estilo personalizado para corresponder \u00e0 est\u00e9tica do seu s\u00edtio Web.<\/p>

Prepara\u00e7\u00e3o<\/h2>

Antes de come\u00e7ar, certifique-se do seguinte:<\/p>

  1. Elementor Pro<\/mark> Instalado e ativado<\/strong>: O efeito autocolante requer o Elementor Pro.<\/li>\n\n
  2. Configura\u00e7\u00e3o da p\u00e1gina<\/strong>: Uma p\u00e1gina nova ou existente onde pretende adicionar a barra lateral autocolante vertical.<\/li>\n\n
  3. Familiaridade com os contentores Elementor<\/strong>: Recomendamos que trabalhe com Flexbox<\/mark> Modo de contentor para um controlo mais flex\u00edvel para este tutorial.<\/li><\/ol>

    Passo 1: Crie um modelo de p\u00e1gina \u00fanica<\/h3>

    Vamos come\u00e7ar por criar um modelo de p\u00e1gina \u00fanica e configur\u00e1-lo para alojar o contentor que servir\u00e1 de barra lateral vertical.<\/p>

    1. Navegue para Modelos<\/li><\/ol>

      No seu painel de controlo do WordPress, aceda a Elementor > Modelos > Adicionar novo<\/strong>.<\/p>

      \"\"<\/figure><\/div>
      1. Selecione o tipo de modelo<\/li><\/ol>

        Na janela pop-up, selecione P\u00e1gina \u00fanica<\/strong> como o tipo de modelo e d\u00ea-lhe um nome, como \"Modelo de p\u00e1gina de servi\u00e7o comercial\".<\/p>

        \"\"<\/figure><\/div>
        1. Selecione o tipo de p\u00e1gina<\/li><\/ol>

          Na parte superior da biblioteca de modelos, selecione a op\u00e7\u00e3o P\u00e1ginas<\/strong> tab.<\/p>

          Percorra os modelos dispon\u00edveis para encontrar um estilo adequado. Pode utilizar a barra de pesquisa para encontrar modelos para fins espec\u00edficos, como \"Servi\u00e7os\" ou \"Empresa\". Se estiver a criar esta barra lateral para um determinado tipo de p\u00e1gina, pode tamb\u00e9m configurar condi\u00e7\u00f5es nas defini\u00e7\u00f5es de visualiza\u00e7\u00e3o para limitar o seu aparecimento a p\u00e1ginas espec\u00edficas.<\/p>

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

          Pode optar por inserir um modelo existente e, se precisar de adicionar navega\u00e7\u00e3o lateral autocolante a uma das suas p\u00e1ginas, pode editar a p\u00e1gina diretamente.<\/p>

          Passo 2: Crie o contentor no Elementor<\/h3>

          Este contentor servir\u00e1 de base para a barra lateral vertical autocolante.<\/p>

          1. Adicione o contentor<\/li><\/ol>

            No editor de p\u00e1ginas, clique em Adicionar novo contentor<\/strong> e arraste-o para a sua \u00e1rea de design. Este contentor funcionar\u00e1 como a estrutura principal da barra lateral autocolante.<\/p>

            \"\"<\/figure><\/div>
            1. Defina a dire\u00e7\u00e3o do contentor<\/li><\/ol>

              Selecione o contentor e, em seguida, defina a sua dire\u00e7\u00e3o para Vertical no painel de defini\u00e7\u00f5es \u00e0 esquerda. Uma dire\u00e7\u00e3o vertical permite que os itens da barra lateral sejam empilhados de cima para baixo, o que \u00e9 essencial para criar um esquema de barra lateral vertical.<\/p>

              \"\"<\/figure>
              1. Defina a largura do contentor<\/li><\/ol>

                No Estilo<\/strong> ajuste a largura de acordo com as necessidades da barra lateral, como 200 px ou menos, dependendo das suas prefer\u00eancias de design. Garantir que ocupa o m\u00ednimo de espa\u00e7o na p\u00e1gina ajuda a manter o foco no conte\u00fado principal.<\/p>

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

                Passo 3: Crie a barra lateral autocolante vertical<\/h3>
                1. Inserir t\u00edtulo e itens de navega\u00e7\u00e3o<\/li><\/ol>

                  Adicione um T\u00edtulo<\/strong> dentro do contentor com um t\u00edtulo como \"Navega\u00e7\u00e3o r\u00e1pida\" ou \"Conte\u00fados\".<\/p>

                  \"\"<\/figure>
                  1. Adicionar itens de lista<\/li><\/ol>

                    Insira um Lista de \u00edcones<\/mark><\/strong> ou Bot\u00e3o<\/strong> abaixo do t\u00edtulo para criar itens de navega\u00e7\u00e3o. Aqui, utilizaremos uma Lista de \u00edcones para um aspeto simplificado, permitindo espa\u00e7o entre cada item na barra lateral.<\/p>

                    \"\"<\/figure>
                    1. Adicione liga\u00e7\u00f5es de navega\u00e7\u00e3o<\/li><\/ol>

                      Para a navega\u00e7\u00e3o na barra lateral, adicione itens como:<\/p>

                      • Sobre n\u00f3s<\/strong>: Esta liga\u00e7\u00e3o leva-o \u00e0 vis\u00e3o geral da empresa.<\/li>\n\n
                      • Os nossos servi\u00e7os<\/strong>: Aceda \u00e0 sec\u00e7\u00e3o de servi\u00e7os.<\/li>\n\n
                      • Testemunhos<\/strong><\/strong>: Conduza \u00e0 \u00e1rea de feedback do cliente.<\/li>\n\n
                      • Contacte-nos<\/strong>: Liga\u00e7\u00f5es para o formul\u00e1rio de contacto ou para a sec\u00e7\u00e3o de informa\u00e7\u00f5es.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Personalize os nomes e os \u00edcones conforme pretendido para refletir a disposi\u00e7\u00e3o da sua p\u00e1gina. Elimine o \u00edcone ou v\u00e1 \u00e0 galeria de \u00edcones para o selecionar.<\/p>

                        \"\"<\/figure><\/div>
                        1. Definir liga\u00e7\u00f5es de ancoragem<\/li><\/ol>

                          Adicione liga\u00e7\u00f5es de ancoragem a cada item de navega\u00e7\u00e3o, definindo pontos de ancoragem na p\u00e1gina. Por exemplo, para uma sec\u00e7\u00e3o \"Sobre n\u00f3s\", utilizaremos 1TP5Sobre n\u00f3s<\/strong>e ancoragens semelhantes para outras sec\u00e7\u00f5es.<\/p>

                          Adicione uma \u00e2ncora para \"Sobre n\u00f3s\"<\/h5>

                          No Elementor, encontre o \u00c2ncora de menu<\/mark><\/strong> widget. Arraste-o para cima do t\u00edtulo da sec\u00e7\u00e3o \"Sobre n\u00f3s\" ou para qualquer posi\u00e7\u00e3o adequada. D\u00ea um nome \u00e0 \u00e2ncora (por exemplo, about-us) nas defini\u00e7\u00f5es para facilitar a liga\u00e7\u00e3o posterior.<\/p>

                          \"\"<\/figure>
                          \"\"<\/figure>
                          Ligue a \u00e2ncora \u00e0 navega\u00e7\u00e3o<\/h5>

                          Regresse ao item da lista de \u00edcones para \"Sobre n\u00f3s\" e ligue-o definindo o URL como #about-us. Os utilizadores que clicarem neste item de navega\u00e7\u00e3o ir\u00e3o imediatamente para a sec\u00e7\u00e3o.<\/p>

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

                          Repita este processo para os restantes itens do menu.<\/p>

                          1. Defina a largura da barra lateral<\/li><\/ol>

                            Para manter um esquema consistente, defina a largura do contentor Lista de \u00edcones e do contentor principal para um valor fixo, como 200px.<\/p>

                            1. Personalize o estilo da barra lateral<\/li><\/ol>

                              Pode ajustar o tipo de letra, as cores e o espa\u00e7amento no Estilo<\/mark> para combinar com o estilo do seu s\u00edtio. Tamb\u00e9m pode adicionar um separador cor de fundo<\/mark>A barra lateral \u00e9 composta por efeitos de sombra, preenchimento e sombra para a tornar visualmente distinta.<\/p>

                              \"\"<\/figure>

                              Passo 4: Active o efeito de ader\u00eancia<\/h3>

                              Para manter a barra lateral fixa \u00e0 medida que o utilizador se desloca, siga estes passos:<\/p>

                              1. Definir a ID CSS para a barra de navega\u00e7\u00e3o e a \u00e1rea de conte\u00fado<\/li><\/ol>

                                Selecione o contentor da barra de navega\u00e7\u00e3o e, no separador Avan\u00e7adas, adicione uma ID CSS; por exemplo, defina a ID como menu da barra lateral<\/code><\/strong>.<\/p>

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

                                  Abra as CSS personalizadas no Elementor (uma defini\u00e7\u00e3o global ou CSS personalizada para o contentor da barra de navega\u00e7\u00e3o). Adicione o seguinte c\u00f3digo:<\/p>

                                  #sidebar-menu {\n    position: fixed; \/* Fixa a barra lateral no s\u00edtio, para que n\u00e3o se mova quando se desloca *\/\n    left: 0; \/* Alinha a barra lateral com o lado esquerdo da p\u00e1gina *\/\n    top: 0; \/* Posiciona a barra lateral no topo da p\u00e1gina *\/\n    height: 100vh; \/* Define a altura da barra lateral para a altura total da janela de visualiza\u00e7\u00e3o *\/\n    width: 200px; \/* Ajusta a largura da barra lateral conforme necess\u00e1rio *\/\n    z-index: 10; \/* Assegura que a barra lateral se mant\u00e9m no topo de outros elementos *\/\n    background-color: #e0f7fa; \/* Define a cor de fundo da barra lateral *\/\n    color: #FFF; \/* Define a cor do texto dentro da barra lateral *\/\n    padding-top: 250px; \/* Acrescenta um enchimento no topo da barra lateral *\/\n    overflow-y: auto; \/* Permite o deslocamento se o conte\u00fado da barra lateral for demasiado longo *\/\n}<\/code><\/pre>
                                  \"\"<\/figure>
                                  Explica\u00e7\u00e3o<\/p>
                                  • posi\u00e7\u00e3o: fixa;
                                    • Mant\u00e9m a barra lateral numa posi\u00e7\u00e3o fixa no ecr\u00e3 \u00e0 medida que os utilizadores se deslocam. Permanecer\u00e1 sempre vis\u00edvel na janela de visualiza\u00e7\u00e3o, independentemente da desloca\u00e7\u00e3o da p\u00e1gina.<\/li><\/ul><\/li>\n\n
                                    • esquerda: 0;
                                      • Alinhe a barra lateral com a margem esquerda da janela de visualiza\u00e7\u00e3o, posicionando-a ao n\u00edvel do lado esquerdo da p\u00e1gina.<\/li><\/ul><\/li><\/ul>
                                        • topo: 0;
                                          • Isto define a barra lateral para come\u00e7ar no topo da janela de visualiza\u00e7\u00e3o, alinhando-a com o topo da p\u00e1gina.<\/li><\/ul><\/li><\/ul>
                                            • altura: 100vh;
                                              • Define a altura da barra lateral para ocupar toda a altura da janela de visualiza\u00e7\u00e3o (100% da altura da janela de visualiza\u00e7\u00e3o). Isto assegura que a barra lateral se estende desde o topo at\u00e9 \u00e0 base do ecr\u00e3.<\/li><\/ul><\/li><\/ul>
                                                • largura: 200px;
                                                  • Define a largura da barra lateral para 200px. Este valor pode ser ajustado com base nas necessidades de design.<\/li><\/ul><\/li><\/ul>
                                                    • z-index: 10;
                                                      • Define a ordem de empilhamento da barra lateral. Um \u00edndice z mais elevado assegura que a barra lateral aparece acima de outros elementos que se possam sobrepor.<\/li><\/ul><\/li><\/ul>
                                                        • cor de fundo: #e0f7fa;
                                                          • Isto define a cor de fundo da barra lateral. Aqui, foi escolhido um azul pastel claro (#e0f7fa) para dar um aspeto de calma e limpeza.<\/li><\/ul><\/li><\/ul>
                                                            • cor: #FFF;
                                                              • Define a cor do texto na barra lateral para branco (#FFF). Isto proporciona contraste com o fundo azul pastel, melhorando a legibilidade.<\/li><\/ul><\/li><\/ul>
                                                                • enchimento superior: 250px;
                                                                  • Adiciona preenchimento na parte superior da barra lateral. Isto pode ser \u00fatil se pretender que o conte\u00fado principal da barra lateral (como as hiperliga\u00e7\u00f5es de navega\u00e7\u00e3o) comece mais abaixo, deixando espa\u00e7o no topo para a marca ou log\u00f3tipos.<\/li><\/ul><\/li><\/ul>
                                                                    • overflow-y: auto;
                                                                      • Permite a desloca\u00e7\u00e3o vertical dentro da barra lateral se o conte\u00fado exceder a sua altura. Isto assegura que o conte\u00fado permanece acess\u00edvel sem afetar a disposi\u00e7\u00e3o geral da p\u00e1gina.<\/li><\/ul><\/li><\/ul>
                                                                        \"\"<\/figure><\/div>
                                                                        Uma barra lateral vertical fixa \u00e9 um elemento de design que permanece fixo na parte lateral de uma p\u00e1gina Web \u00e0 medida que os utilizadores se deslocam, proporcionando uma navega\u00e7\u00e3o r\u00e1pida para sec\u00e7\u00f5es espec\u00edficas. Este tutorial orienta-o na cria\u00e7\u00e3o de uma barra lateral fixa no Elementor, utilizando itens de navega\u00e7\u00e3o, liga\u00e7\u00f5es de ancoragem e estilo personalizado para uma experi\u00eancia de utilizador perfeita. Com o Elementor Pro instalado, ir\u00e1 criar um modelo de p\u00e1gina \u00fanica, configurar um contentor para a barra lateral, adicionar itens de navega\u00e7\u00e3o e atribuir liga\u00e7\u00f5es de ancoragem. Por fim, ao adicionar CSS personalizado, a barra lateral permanece fixa na janela de visualiza\u00e7\u00e3o, melhorando a acessibilidade em p\u00e1ginas com muito conte\u00fado, como sec\u00e7\u00f5es de servi\u00e7os ou de portef\u00f3lio.<\/p>","protected":false},"excerpt":{"rendered":"
                                                                        Uma barra lateral adesiva vertical \u00e9 um elemento de design pr\u00e1tico posicionado na parte lateral da p\u00e1gina que permanece vis\u00edvel na janela de visualiza\u00e7\u00e3o \u00e0 medida que os utilizadores se deslocam...<\/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\/pt\/wp-json\/wp\/v2\/posts\/5085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/comments?post=5085"}],"version-history":[{"count":2,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5085\/revisions"}],"predecessor-version":[{"id":5116,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5085\/revisions\/5116"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media\/5113"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media?parent=5085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/categories?post=5085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/tags?post=5085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}