O que são os títulos autocolantes verticais?

Os cabeçalhos autocolantes verticais são um tipo de barra de cabeçalho que é fixada na parte lateral da página e permanece visível à medida que o utilizador percorre a página, permitindo um acesso fácil a outras áreas da página ou uma navegação rápida. Este design pode ser utilizado para conteúdos como catálogos, menus de navegação e informações de contacto para facilitar a navegação do utilizador.

preliminar

Antes de começar, certifique-se de que tem os seguintes elementos:

1. Instalado e ativado Elementor Pro (porque o efeito autocolante requer a versão Pro).
2. Criou uma nova página ou está pronto para adicionar cabeçalhos autocolantes verticais a uma página existente.
3. Já compreendeu a utilização básica do contentor Elementor (recomenda-se que o Flexbox (funcionando em modo de contentor).

Passo 1: Crie um modelo de página única

Desta vez, criamos um modelo de página única e, para este modelo, criamos cabeçalhos autocolantes verticais com contentores.

Aceda à página de criação de modelos

1. No backend do WordPress, navegue até Elementor > Modelos > Novo.

2. Na janela pop-up, selecione página única como o tipo de modelo e dê um nome ao modelo, por exemplo, "Modelo de página de serviço empresarial".

Selecione o tipo de página

1. Na parte superior da galeria de modelos, selecione "Páginas". Etiquetas.
2. Navegue pela biblioteca de modelos de página disponíveis. Pode utilizar a caixa de pesquisa para encontrar um estilo de modelo adequado, como "Serviços" ou "Empresa".

3. Se for dedicado a um determinado tipo de página, pode também adicionar uma condição específica nas definições de condição.

Passo 2: Criar um contentor no Elementor

1,Adicionar contentores

Na página, clique em "Adicionar um novo contentor" e arraste-o para a área de design da página. Este contentor servirá como contentor principal para o cabeçalho autocolante vertical.

2,Definir a orientação do contentor

Selecione o contentor e, no painel de definições à esquerda, defina a orientação do contentor para perpendicularou seja, alinhado verticalmente para que o conteúdo possa ser empilhado verticalmente. Este passo é a chave para conseguir cabeçalhos verticais.

3,Defina a largura do contentor

Em "tipo", defina a largura do contentor para um tamanho adequado, como 200px ou menos, para garantir que não ocupa demasiado espaço na página. Esta largura pode ser personalizada de acordo com o design e os requisitos da página.

Passo 3: Crie uma barra de navegação autocolante vertical

Inserção de títulos e itens de navegação

• No contentor, adicione um "legenda", defina o título para "Navegação rápida" ou "Catálogo".

Adicionar lista

• Por baixo do títulocontinue a acrescentar no mesmo contentor que o título Lista de ícones talvez Widget de botãoUtilizado como um item de navegaçãoUtilizamos uma lista de ícones.

• Adicionado:

Adicionar projeto

• Sobre nósClique nele para saltar para a secção de perfil da empresa.
• ServiçosSaltar para a área de introdução da linha de serviço.
• TestemunhosSalte para a secção Feedback do cliente.
• Contactar-nosSaltar para informações de contacto e formulários.

Os nomes e os ícones podem ser alterados.

Configurar ligações de ancoragem

Adicione ligações de âncora à lista de botões ou ícones para cada item de navegação. Defina âncoras para cada secção de conteúdo da página, por exemplo 1TP5Sobre nós,#serviços,#testemunhos,#contacto-Us etc.

• prepararSobre nósponto de ancoragem
  • No editor do Elementor, encontre o "Âncoras de menu" Widget. Arraste o widget para cima do título da secção Sobre nós (ou outra localização adequada). Nas definições do widget, introduza um nome para o ponto de ancoragem (por exemplo sobre nós) para ligar a essa localização mais tarde.

• Definir ligações âncora
  • Voltar à lista de íconesSobre nósno topo da página, adicione1TP5Sobre nósPode clicar no salto após a ligação de ancoragem.

• Os restantes itens de menu seguem este procedimento para definir as suas ligações de ancoragem.

Personalizar o estilo da barra de navegação

• Em "tipo" para personalizar os tipos de letra, as cores e o espaçamento de acordo com o estilo do sítio Web.

• configurávelcor de fundoPara tornar a barra de navegação mais clara e mais independente, utilize as margens e os efeitos de sombra.

Passo 4: Definir o efeito de aderência

Para que a barra lateral se mantenha fixa enquanto o utilizador se desloca, siga estes passos:

1. Definir IDs CSS para barras de navegação e áreas de conteúdo

Selecione o contentor da barra de navegação e "nível elevado "; por exemplo, defina o ID parabarra lateral .

• Adicione código CSS personalizado

Abra as CSS personalizadas no Elementor (Definições globais ou CSS personalizadas para o contentor da barra de navegação). Adicione o seguinte código:

#sidebar{
    position: fixed; /* Posição fixa da barra lateral, não se move quando se desloca */
    left: 0; /* Alinhe a barra lateral com o lado esquerdo da página */
    top: 0; /* A barra lateral começa no topo da página */
    height: 100vh; /* Defina a altura da barra lateral para a altura da janela de visualização */
    width: 200px; /* Ajuste a largura da barra lateral conforme necessário */
    z-index: 10; /* Certifique-se de que a barra lateral está acima de outros elementos */
    padding-top: 250px; /* Ajuste a margem interna superior conforme necessário */
    overflow-y: auto; /* Permitir o deslocamento quando o conteúdo da barra lateral é longo */

    display: flex; /* Utilize a disposição flexbox */
    flex-direction: column; /* alinhar o conteúdo verticalmente */ justify-content: centre; //
    justify-content: centre; /* Centrar verticalmente o conteúdo */
}

Passo 5: Adicione estilos de fundo e efeitos de sombra (opcional)

Definir a cor de fundo
Em "tipo", selecione a cor de fundo adequada para garantir que os contentores são claramente distinguíveis na página.

Adicionar um efeito de sombra
Para que o título autocolante pareça mais hierárquico, pode definir o efeito de sombra em "Box Shadow", para que tenha um efeito visual de pairar sobre a página.

Passo 6: Pré-visualizar e publicar

1. Efeito de pré-visualização
   Clique na página "antevisões" para ver como o cabeçalho autocolante se comporta quando a página é deslocada. Certifique-se de que o contentor está sempre fixo no topo da página quando se desloca e não é coberto por outros elementos.
2. Ajustamentos
   De acordo com o efeito de pré-visualização, ajuste o tamanho, o alinhamento e as margens do contentor do conteúdo do título para garantir que o conteúdo é claro e não afecta a disposição de outros elementos na página.
3. Página de lançamento
   Depois de confirmar que tudo está a funcionar corretamente, clique em "posto" para colocar a página online. O seu cabeçalho autocolante vertical foi criado.

Resumo:

Os cabeçalhos autocolantes verticais são barras de navegação que são fixadas na parte lateral de uma página e permanecem visíveis à medida que os utilizadores se deslocam, permitindo-lhes aceder rapidamente a diferentes partes da página. A criação destes cabeçalhos no Elementor envolve alguns passos fundamentais: primeiro, crie um modelo de página única e adicione um contentor orientado verticalmente como o corpo da barra de cabeçalho autocolante. Em seguida, os cabeçalhos e os itens de navegação são adicionados ao contentor, utilizando uma lista de ícones ou widgets de botões com ligações de ancoragem para cada item. Depois, aplique o código CSS para ancorar a barra lateral, de modo a garantir que está sempre visível quando se desloca.