Como criar cabeçalhos autocolantes verticais com contentores no Elementor

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.

如何在 Elementor 中创建带有容器的垂直粘性标题

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.
如何在 Elementor 中创建带有容器的垂直粘性标题
  1. 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".
如何在 Elementor 中创建带有容器的垂直粘性标题

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".
如何在 Elementor 中创建带有容器的垂直粘性标题
  1. 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.

如何在 Elementor 中创建带有容器的垂直粘性标题

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.

如何在 Elementor 中创建带有容器的垂直粘性标题

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.

如何在 Elementor 中创建带有容器的垂直粘性标题

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".
如何在 Elementor 中创建带有容器的垂直粘性标题

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.
如何在 Elementor 中创建带有容器的垂直粘性标题
  • Adicionado:
如何在 Elementor 中创建带有容器的垂直粘性标题

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.
如何在 Elementor 中创建带有容器的垂直粘性标题

Os nomes e os ícones podem ser alterados.

如何在 Elementor 中创建带有容器的垂直粘性标题

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.

如何在 Elementor 中创建带有容器的垂直粘性标题
  • 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.
如何在 Elementor 中创建带有容器的垂直粘性标题
如何在 Elementor 中创建带有容器的垂直粘性标题
  • 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.
如何在 Elementor 中创建带有容器的垂直粘性标题
  • Os restantes itens de menu seguem este procedimento para definir as suas ligações de ancoragem.
如何在 Elementor 中创建带有容器的垂直粘性标题

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.
如何在 Elementor 中创建带有容器的垂直粘性标题
如何在 Elementor 中创建带有容器的垂直粘性标题
  • configurávelcor de fundoPara tornar a barra de navegação mais clara e mais independente, utilize as margens e os efeitos de sombra.
如何在 Elementor 中创建带有容器的垂直粘性标题

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 .

如何在 Elementor 中创建带有容器的垂直粘性标题
  • 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 */
}
如何在 Elementor 中创建带有容器的垂直粘性标题

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.

如何在 Elementor 中创建带有容器的垂直粘性标题

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.

如何在 Elementor 中创建带有容器的垂直粘性标题

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.


Contactar-nos
Não consegue ler o artigo? Contacte-nos para obter uma resposta gratuita! Ajuda gratuita para sítios pessoais e de pequenas empresas!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correio eletrónico: info@361sale.com
Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados
Publicado por photon fluctuations, retweetado com atribuição:https://www.361sale.com/pt/22538

Como (0)
Anterior 3 horas atrás
Seguinte 2 horas atrás

Recomendado

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Contactar-nos

020-2206-9892

QQ咨询:1025174874

Correio eletrónico: info@361sale.com

Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados

客服微信
Se estiver a ter problemas com o seu site WordPress, por favorApresentação de ordens de serviçoA nossa equipa técnica irá fornecer-lhe um serviço de restauro profissional.