Os títulos são um dos primeiros elementos que os utilizadores vêem quando visitam um sítio Web e uma ferramenta de navegação fundamental para navegarem no sítio. EmboraCabeçalho autocolanteÉ até uma das principais tendências em web design devido à suaCapacidade de manter os títulos visíveis durante a deslocação da páginao que melhora consideravelmente a experiência do utilizador e a navegabilidade do sítio.

Este artigo descreve em pormenor como utilizar o Elementor Plugin para criar cabeçalhos fixos no WordPressVeremos também algumas técnicas avançadas para otimizar ainda mais o aspeto e o comportamento dos sticky headers, como a personalização das CSS. Veremos também algumas técnicas avançadas, como a personalização das CSS, para otimizar ainda mais o aspeto e o comportamento dos sticky headers.

Porquê utilizar o Elementor para criar títulos autocolantes?

O Elementor é um dos construtores de páginas mais populares do WordPress, popular pela sua interface intuitiva de arrastar e largar e pelas suas poderosas funcionalidades. Há várias vantagens em utilizar o Elementor para criar cabeçalhos autocolantes:

1. Não é necessário escrever códigoElementor permite aos utilizadores criar layouts web complexos com operações simples de arrastar e largar sem escrever uma única linha de código. Isto é especialmente amigável para os principiantes.
2. Opções de design flexíveisO Elementor fornece uma grande variedade de ferramentas de design que permitem aos utilizadores ajustar facilmente a disposição, as cores, os tipos de letra, os fundos, etc. dos cabeçalhos.
3. Opções adesivas incorporadasO Elementor tem opções de aderência incorporadas que os utilizadores podem simplesmente definir para manter os títulos visíveis à medida que a página se desloca.
4. Compatibilidade com outras ferramentasElementor vs. Astra Pro A compatibilidade com temas de qualidade superior, como os temas premium, pode alargar ainda mais as possibilidades de design de um sítio Web.

Passos para criar títulos autocolantes com o Elementor

Passo 1: Criar o menu principal

Antes de criar títulos autocolantes, é necessário configurar o menu principal do seu sítio Web. O menu principal é o coração da navegação do utilizador e contém ligações para as páginas principais do sítio.

1. Inicie sessão no backend de administração do WordPress e navegue até "estado exterior">"menu".

2. Crie um novo menu, adicione as páginas ou ligações personalizadas que pretende apresentar no cabeçalho.

3. Guarde o menu e certifique-se de que está definido como o menu principal.

Passo 2: Criar títulos no Elementor

Depois de configurar o menu, o próximo passo é criar o modelo de título no Elementor.

1. No backend do WordPress, navegue até "modelo">"Criador de temas".

2. Selecionar "Adicionar novo modelo", na janela de contexto selecionar "legenda" e, em seguida, nomear o modelo.

3. Opcionalmente, pode escolher entre os modelos de título predefinidos ou criar um modelo de título totalmente novo a partir do zero.

Passo 3: Conceber a disposição do cabeçalho

No editor do Elementor, comece a desenhar o layout do seu título. Aqui está um fluxo simples para desenhar um título:

1. Adicionar estrutura: Em primeiro lugar, adicione uma estrutura de duas colunas. Defina a largura do conteúdo como "boxed".
2. Adicionar logótipoAdicionar o logótipo do sítio na primeira coluna e alinhá-lo à esquerda.

3. Adicionar menu de navegaçãoAdicionar o menu de navegação na segunda coluna e selecionar o menu principal que acabou de criar. Alinhe o menu de navegação à direita.

O aspeto do cabeçalho pode ser ainda mais optimizado ajustando a largura das colunas, as cores de fundo, os estilos de letra e muito mais. Se pretender adicionar mais elementos de design, como botões, caixas de pesquisa, ícones de redes sociais, etc., pode utilizar outros widgets fornecidos pelo Elementor.

Passo 4: Tornar o título autocolante

Uma vez concebido o título, o passo seguinte é defini-lo como um título fixo.

1. Clique em Editar secção de título (toda a secção de título) e vá para Avançadas > Efeitos de movimento.

2. Em "Efeitos de movimento", procure "colar algo no topo", defina-a como activada.
3. Opção para escolher em que dispositivos apresentar títulos autocolantes (por exemplo, computador, tablet, telemóvel, etc.).

4. Clique "posto" e siga as instruções para definir as condições de apresentação do título, por exemplo, apresentá-lo em todo o sítio ou excluir páginas específicas.

Otimizar os cabeçalhos fixos com CSS personalizado

Embora as ferramentas de design fornecidas com o Elementor já sejam muito poderosas, se pretender personalizar ainda mais o aspeto dos cabeçalhos autocolantes, pode utilizar CSS personalizado para obter efeitos mais sofisticados.

Segue-se um exemplo de CSS personalizado para ajustar a altura, a cor de fundo e os efeitos de transição de um título autocolante:

Código cssCopy
seletor.elementor-sticky--effects {
    cor de fundo: rgb(255, 220, 168) !importante;
}
seletor {
    transição: background-color 3s ease !important; }
}
seletor.elementor-sticky--effects >.elementor-container {
    altura mínima: 80px;
}
seletor > .elementor-container {
    transição: min-height 1s ease !important; }
}

Com estas regras CSS, é possível controlar a forma como o cabeçalho autocolante se desloca quando o botãoEfeitos de transição para mudança de cor de fundo, altura do títuloetc. Para aplicar este CSS, basta, no editor Elementor, selecionar a secção do cabeçalho e ir para "nível elevado">"CSS personalizado", basta colar o código.

chegar a um veredito

Cabeçalhos fixosPode melhorar significativamente a experiência do utilizador do seu sítio Web, especialmente se o conteúdo for longo ou exigir uma navegação frequente. Com o Elementor, é fácil criar cabeçalhos autocolantes e os principiantes podem começar rapidamente.