Quer o seuNavegação no rodapéSempre à vista, como uma aplicação móvel? Este guia vai ensinar-lhe como fazer isso no Elementor.Crie uma navegação autónoma no rodapéAplicável aversão gratuitaresponder com cânticosVersão paga do Elementor. A criação de uma navegação deste tipo pode melhorar significativamente a experiência do utilizador de um sítio Web, especialmente em dispositivos móveis, facilitando o acesso dos utilizadores a páginas importantes.

O que precisa de saber antes de começar

Antes de começarmos, é útil conhecer algumas CSS básicas, uma vez que vamosUtilizar CSS personalizado para estilizar a navegação autónoma. Certifique-se de que o Elementor está instalado e de que podeCriar página.

Passo 1: Crie um novo contentor

Em primeiro lugar, pode criar uma nova página ou editar uma já existente selecionando "Utilização de editores elementares".

Ao clicar no botão Sinal de mais (+) para criar um novo contentor ou, a partir do painel do Elementor, defina a opção "contentores"Arraste a opção para a página.

Para uma melhor organização dos itens de navegação, recomenda-se que escolha uma estrutura com duas ou mais colunas.

• Clique no botão de adição ( + ) no Elementor para adicionar um novo contentor.

• Defina a estrutura para duas ou mais colunas para facilitar a adição de itens de navegação.

exemplo típicoSe estiver a trabalhar numCriar uma navegação de rodapé fixa para sítios Web de comércio eletrónicopode utilizar a coluna da esquerda para "Voltar à página principal"ícone, coluna da direita para "carrinho" para que os utilizadores possam aceder facilmente a páginas importantes.

Passo 2: Personalizar o contentor

Em seguida, é necessário personalizar o contentor. Clique no botão Ícones de dados ou seis pontos na parte superior do recipiente para abrir a definição.

• Largura do conteúdoEscolha "em caixa" ou "largura total", consoante a sua preferência de design. Nós escolhemos largura total.

• amplitudeAjuste a largura conforme necessário. As restantes opções permanecem nas suas predefinições e podem ser ajustadas posteriormente, conforme necessário.

• contextos: emtipoadicione um fundo ao contentor para garantir que o menu de navegação não é confundido com outro conteúdo.

• ID CSS: em nível elevado para especificar um contentor para o ID CSSNeste tutorial, usamos o der-sticky-navigation-footer. Se forem selecionadas outras classes, certifique-se de que, nas etapas seguintes, oAjustar o código CSS.

exemplo típicoSe o seu fundo de rodapé formais escuroPode escolhercor claraícones de navegação para garantir um aspeto visualmente mais apelativo.

Passo 3: Adicionar conteúdo ao contentor

Adicione conteúdo de navegação, como ícones e ligações, ao contentor.

• Widget de caixa de íconesUtilização recomendada caixa de íconesWidgets para um acesso fácil aoCada item de navegaçãoAdicione ícones e etiquetas. Adicione cada ícone e etiqueta a uma coluna separada para manter as coisas arrumadas e organizadas.

Exemplo: para um sítio de comércio eletrónico que inclui "página inicial","procurar algo","carrinho"e"menu". Os utilizadores podem aceder facilmente a páginas importantes.

Passo 4: Adicione HTML e CSS personalizados

Para tornar a barra de navegação fixa, tem de adicionar um HTML e CSSpara o manter no lugar na parte inferior do ecrã.

• Widgets HTML: Encontrar Widgets HTMLe arraste-o para o ficheiro criadoPor baixo do menu de navegaçãode qualquer área.

• Adicione código HTMLAdicione o seguinte código ao widget HTML:

#der-sticky-navigation-footer {
    display: flex; justify-content: space-around; /* Distribua os ícones uniformemente pelo contentor */
    justify-content: space-around; /* Distribua os ícones uniformemente pelo contentor */ align-items: centre; /* Centre verticalmente os ícones */
    align-items: centre; /* Centralize verticalmente os ícones */
    flex-wrap: nowrap; /* Assegure-se de que todos os ícones ficam numa única linha */
    position: fixed; bottom: 20px; /* Assegure-se de que todos os ícones ficam numa única linha */
    bottom: 20px; /* Ajustado de 10px para 20px para o tornar mais alto */ right: 0; /* Ajustado de 10px para 20px para o tornar mais alto */
    right: 0; left: 0; /* Ajustado de 10px para 20px para o tornar mais alto */
    left: 0; max-width: 400px; /* Ajustado de 10px para 20px para o tornar mais alto */ right: 0; left: 0; /* Ajustado de 10px para 20px para o tornar mais alto
    largura máxima: 400px; altura máxima: 60px
    
    margem: auto; z-index: 1000;
    z-index: 1000; }
}

#custom-html {
    display: none; }
}

#der-sticky-navigation-footer .elementor-icon-box {
    margin: 0; /* Remova as margens extra para um espaçamento consistente */
}

@media (max-width: 768px) {
    #der-sticky-navigation-footer {
        flex-direction: row; /* Organize os ícones numa linha para visualização móvel */
        justify-content: space-evenly; /* Organize os ícones numa linha para visualização móvel */.
        justify-content: space-evenly; width: 100%;
    }
    #der-sticky-navigation-footer .elementor-icon-box {
        flex: 1; /* Distribua espaço igual para cada ícone */
    }
}

Este código fixa a navegação do rodapé na parte inferior do ecrã e assegura o espaçamento e o posicionamento corretos.

• posição: fixa Fixe o rodapé na parte inferior.
• largura máxima responder com cânticos altura máxima Limita o tamanho do rodapé.
• índice-z Certifique-se de que o rodapé é apresentado acima do resto do conteúdo.

Ocultar HTML personalizadoAdiciona um novo elemento ao elemento HTML personalizado chamado html personalizado (utilizado como expressão nominal) ID CSSpara ocultar o elemento.

exemplo típicoSe pretender que a navegação esteja sempre no topo, pode aumentar a índice-z para garantir que a navegação não é substituída por outros conteúdos.

Etapa 5: Ajustes finais e conclusão

Pode ajustar o CSS ou fazer outras alterações de design conforme necessário para melhorar o resultado final. O design de navegação do rodapé autocolante deste tutorial é relativamente básico e pode ser optimizado com alguma criatividade.

exemplo típicoPor exemplo, os ícones podem ser substituídos por logótipos de marcas ou podem ser utilizadas diferentes animações para melhorar a interatividade da navegação e torná-la mais única.

Dicas para criar uma navegação de rodapé autocolante

• Adicionar um efeito de focoAumentar a interatividade dos ícones através de efeitos de pairar que fornecem feedback visual quando o utilizador passa o cursor do rato ou clica numa ligação.
• Utilizar cores contrastantesEscolha uma cor que contraste com o fundo do sítio para tornar a navegação autocolante mais apelativa.
• Adicionar efeitos de animaçãoAdicione animações subtis ao rodapé quando este aparece, para o tornar mais atrativo, como por exemplo, o desvanecimento ou o deslizamento quando se desloca.
• Garanta a compatibilidade com dispositivos móveisTeste diferentes tamanhos de ecrã para garantir que a navegação funciona sem problemas em dispositivos móveis, ajustando o CSS conforme necessário.

exemplo típicoÍcones de navegação maiores em dispositivos móveis para que os utilizadores possam clicar neles facilmente. Isto é especialmente importante para melhorar a experiência do utilizador, sobretudo em ecrãs pequenos.

Porquê utilizar a navegação autocolante no rodapé?

A navegação no rodapé é particularmente útil para melhorar a experiência do utilizador, especialmente em dispositivos móveis. Permite que os utilizadores acedam rapidamente a páginas importantes sem terem de voltar ao topo da página, ajudando a melhorar a usabilidade, a aumentar o envolvimento e, em última análise, a melhorar as conversões do sítio Web.

resumos

Ao manter a barra de navegação sempre à vista do utilizador, os visitantes podem aceder facilmente a páginas importantes em qualquer altura, sem terem de voltar ao topo da página. Isto não só melhora a usabilidade do seu sítio Web, como também aumenta a interação do utilizador.