Os menus fixos da barra lateral não só dão um toque de design moderno a um sítio Web, como também proporcionam aos visitantes uma experiência de deslocação mais envolvente. Neste artigo, vamos ver como utilizar o Elementor responder com cânticos Elementor Pro Criar um poderoso menu de barra lateral autocolante.

O que é um menu de barra lateral autocolante?

Os menus fixos da barra lateral são diferentes dos tradicionais menus de navegação horizontal que ocupam espaço vertical no lado esquerdo ou direito de um sítio Web. Estes menus estão sempre presentes na página, mesmo que o utilizador desloque a página para baixo, oO menu também será fixado na posição lateralIsto proporciona opções de navegação contínuas.

Normalmente, os menus fixos da barra lateral são minimizados por defeito e ocupam apenas uma pequena quantidade de espaço. Os utilizadores podem clicar num ícone para expandir o menu e mostrar mais ligações de navegação. Este design é particularmente adequado para utilizadores de computadores de secretária e tablets, mas um menu horizontal tradicional pode ainda ser uma melhor opção para dispositivos móveis.

Vantagens dos menus fixos da barra lateral

1. Poupa espaço verticalOs menus de barra lateral fixa colocam os elementos de navegação na vertical, libertando espaço vertical no topo e permitindo que o conteúdo do sítio aproveite ao máximo a altura do ecrã.
2. Experiência do utilizador melhoradaDesign de menu: Este design de menu proporciona uma experiência de deslocação única e moderna em que os utilizadores podem aceder mais facilmente às opções de navegação sem terem de voltar ao topo da página.
3. Melhor organização dos conteúdosA disposição vertical permite apresentar as diferentes partes do sítio Web de uma forma mais clara e ordenada, o que é especialmente adequado para sítios Web com muito conteúdo.

Ferramentas necessárias para criar menus fixos na barra lateral com o Elementor

Antes de começar a criar um menu fixo da barra lateral, é necessário preparar as seguintes ferramentas e funcionalidades:

1. ElementorEste é um popular construtor de páginas do WordPress que oferece uma grande variedade de opções de design e layout.
2. Elementor ProPara implementar menus de barra lateral autocolantes, terá de utilizar algumas das funcionalidades avançadas do Elementor Pro, tais como popups e modelos de temas.
3. Modelos de cabeçalho regularesEste é um modelo de cabeçalho concebido para visitantes de dispositivos móveis para garantir uma óptima experiência de navegação em dispositivos móveis.
4. Modelo parcialUtilizado para criar menus de barra lateral de estado minimizado como base para barras laterais autocolantes.
5. janela pop-upUtilizado para apresentar o menu de navegação completo, accionando um pop-up quando o utilizador clica no ícone da barra lateral minimizada.

Passos para criar um menu fixo na barra lateral

1. ocultar os títulos gerais nas vistas de computador e tablet

Em primeiro lugar, é necessárioGarantir que os modelos de cabeçalho existentes só são apresentados em dispositivos móveis e não em computadores de secretária e tablets. Para o fazer, siga os passos abaixo:

• Aceda ao Theme Builder do Elementor (Templates → Theme Builder → Titles), selecione o seu modelo de título e edite-o com o Elementor.

• No editor Elementor, selecione a secção do título e vá para "nível elevado"Tab.
• Ativar "Ocultar no ambiente de trabalho" e "Ocultar no tablet" nas definições de Resposta.

Ao fazê-lo, garante que os utilizadores de computadores e tablets apenas vêem o menu da barra lateral e não o cabeçalho horizontal normal.

2. criação de um modelo parcial para a navegação na barra lateral

De seguida, vamos criar um novo modelo que será utilizado para definir o estado minimizado do menu da barra lateral. Será isto que o utilizador verá quando carregar a página pela primeira vez.

• Aceda à área "Templates" do backend do WordPress, selecione o separador "Sections" (Secções) e clique em "Add New" (Adicionar novo).
• Crie uma nova secção com uma coluna e configure as definições da seguinte forma:
  • Largura do conteúdo: largura total
  • Distância à coluna: sem distância
  • Altura → Altura mínima: 100vh (para que a barra lateral ocupe todo o espaço doaltura vertical)
  • Posição da coluna: estiramento
  • Etiquetas HTML: título (opcional, mas útil para SEO)

No separador Estilos, pode configurar a cor de fundo ou o gradiente da barra lateral para que seja consistente com o resto do site.

3) Configurar as definições das colunas e adicionar widgets

Adicione alguns widgets básicos a alguns dos modelos, tais como logótipos de sítios Web, ícones de navegação (para expandir o menu completo) e ícones de redes sociais.

• Adicione um logótipo utilizando o widget de imagem.
• Utilize o widget Ícone para adicionar um ícone que será utilizado para acionar o menu de navegação pop-up. Pode escolher qualquer ícone adequado, como o ícone Barras, e configurar a sua cor e o efeito de pairar.
• Utilize o widget Ícones sociais para adicionar hiperligações para redes sociais e certifique-se de que estão alinhadas verticalmente.

Depois de concluir a configuração, publique ou actualize alguns dos modelos.

4. criação de um novo modelo de uma página com navegação na barra lateral

Em seguida, é necessário criar um novo modelo de uma página utilizando o construtor de temas Elementor, que contém o conteúdo do seu sítio e cabeçalhos de navegação lateral autocolantes.

Para o fazer, vá aModelos → Theme Builder:

• mudar para"Página única" separadores
• clicar (utilizando um rato ou outro dispositivo apontador)"Adicionar novo"
• Certifique-se de que Selecionarpágina única Como um tipo de modelo
• Dizer o nome.Páginas para navegação lateral fixa

No editor do Elementor, crie uma secção com duas colunas:

• coluna da esquerda- Isto irá acomodar barras laterais autocolantes
• coluna da direita- Esta secção conterá o conteúdo normal do seu sítio

Configurar a coluna da direita (conteúdo)

Para adicionar conteúdo geral à coluna da direita, adicione o "Publicar conteúdo"Widget.

Configurar a coluna esquerda (cabeçalho da barra lateral)

Para adicionar o cabeçalho de navegação da barra lateral ao menu esquerdo, adicione o widget de modelo. Em seguida, selecione o que criou no passo anteriorModelo de cabeçalho de barra lateral fixa.

Além disso, as transferências para esta colunaDefinições avançadas, definir oZ-indexO valor é definido como10000  (dez mil) e iráreativoO controlo está definido para Ativar"Oculto em dispositivos móveis.". Isto garante que apenas os visitantes de computadores e tablets verão os cabeçalhos de navegação lateral autocolantes.

Configurar o espaçamento/layout das colunas

A barra lateral ocupa 50% da página. Para corrigir isto, selecione a coluna da esquerda (com a barra lateral) e o botãoO separador "Layout" será o seulargura da colunadefinido como5%. Isto fará com que a coluna da direita seja automaticamente igual a95%.

A definição do valor z-index garante que o pop-up de navegação completo que cria no passo seguinte desliza para baixo da navegação lateral.

seletor {
    largura: 60px;
}

Copiar Este CSS garante que a navegação lateral é sempre estreita, definindo a largura para 60 píxeis. Pode ajustar este número a seu gosto, mas não se afaste demasiado dos 60 píxeis.

Configuração Efeito desportivo

Agora, queremos certificar-nos de que a navegação lateral está sempre fixa no ecrã.

Para o fazer, clique em Modelos na coluna da direita:

• mudar para"Avançado" Tab.
• clicar (utilizando um rato ou outro dispositivo apontador)"Efeitos de movimento".
• Colocar "topo"Definir para"Topo".
• comandante-em-chefe (militar) "Pegajoso".definido como"Ambiente de trabalho".responder com cânticos"Tablet"..

Agora, publique o seu modelo de uma página e utilize oCondições de visualizaçãopara controlar onde é apresentada. Se pretender utilizar a navegação lateral autocolante em todas as páginas, defina-a para ser apresentada na secçãoTodas as páginasPara cima.

Se adicionar a um sítio que já tenha alguns modelos de página existentes, certifique-se de que altera todos os modelos existentes para o estado "Rascunho" para os desativar e evitar potenciais conflitos.

5) Configuração de menus de navegação pop-up

Para que o utilizador possa expandir o menu de navegação completo, temos de criar uma janela pop-up. Esta janela pop-up será apresentada quando o utilizador clicar no ícone na barra lateral.

• Vá a Modelos → Popups, clique em "Adicionar novo" e crie um novo popup.
• Configure as definições da janela pop-up, como a largura, a animação de entrada, a animação de saída, etc. e adicione as margens adequadas.
• Adicione um widget de menu de navegação à janela pop-up, certificando-se de que os itens de menu estão alinhados verticalmente.

Depois de publicar o pop-up, regresse ao modelo da barra lateral e configure a etiqueta dinâmica do ícone para "janela pop-up" e selecione o menu pop-up que acabou de criar.

6) Testes e otimização

Nesta altura, o menu fixo da barra lateral está quase concluído. Abra a página do sítio Web e teste a funcionalidade e o aspeto do menu da barra lateral para se certificar de que funciona como esperado.

Se encontrar algum problema durante o teste, recomenda-se que tente utilizar o tema Hello do Elementor para garantir que não existem conflitos com outros temas.

resumos

Os menus de barra lateral fixa proporcionam um design e uma experiência de navegação totalmente novos aos sítios Web WordPress. Tirando partido do poder do Elementor e do Elementor Pro, pode criar facilmente um menu de navegação vertical flexível e esteticamente agradável que proporciona uma melhor experiência de navegação aos seus visitantes.