Como Criar MENU e RODAPÉ com Elementor Free [Grátis]

Como criar um menu e rodapé com Elementor Free

Visão geral da seção: Nesta seção, a Micaela do Descomplicando Sites ensina como criar um menu e rodapé utilizando o Elementor Free.

Configurando o plugin Elementor Header Footer & Blocks Template

• Instale o plugin "Elementor Header Footer & Blocks Template" para adicionar funcionalidades de criação de menu e rodapé.

• O plugin pode ser encontrado na seção "Adicionar novo" dos plugins do WordPress.

• Após a instalação, ele estará disponível no painel de aparência como "Header Footer".

Criando um modelo de menu personalizado

• Acesse o editor do Elementor clicando em "Editar com Elementor" no painel do Header Footer.

• Crie um novo menu e defina seu nome.

• Escolha onde deseja que o menu seja exibido (em todo o site, páginas específicas, etc.).

Personalizando o menu com Elementor

• Utilize as opções de customização fornecidas pelo plugin para criar um menu personalizado.

• Arraste o widget "Navigation Menu" para adicionar itens ao seu menu.

• Personalize as configurações do item do menu, como adicionar botões ou alterar a aparência visual.

• Configure as opções de estilo, como fonte, cor e espessura do texto.

• Defina cores diferentes para os estados de hover e ativo do menu.

Criando um modelo de rodapé personalizado

• Siga os mesmos passos para criar um modelo de rodapé personalizado utilizando o Elementor Header Footer & Blocks Template.

Conclusão

Com o plugin Elementor Header Footer & Blocks Template, é possível criar modelos personalizados de menu e rodapé utilizando o Elementor Free. Essa funcionalidade permite uma maior customização e controle sobre a aparência do site.

Configuração de Estilo e Tamanho

Visão Geral da Seção: Nesta seção, é explicado como configurar o estilo e tamanho dos elementos no site.

Configurando a Aparência do Elemento

• É possível configurar o tamanho, espessura e estilo do elemento.

• Também é possível ajustar o border-radius para deixá-lo mais arredondado ou quadrado.

• Para adicionar um botão ao elemento, basta configurar as opções de layout.

Configurando a Versão Responsiva

• É possível configurar a aparência do site na versão móvel.

• As configurações podem ser feitas para tablet e celular separadamente.

• É recomendado ocultar elementos desnecessários na versão mobile.

Configurando Layout e Colunas

Visão Geral da Seção: Nesta seção, são abordadas as configurações de layout e colunas no site.

Configurando Largura das Colunas

• A largura das colunas pode ser ajustada para determinar se elas ficam lado a lado ou empilhadas.

• A soma das larguras das colunas define sua disposição no layout.

Personalizando Estilos do Menu

• O menu pode ser personalizado alterando cores de fundo, bordas e ícones.

• É possível definir a cor do texto para que seja visível no menu.

Personalizando o Menu Drop-down

Visão Geral da Seção: Nesta seção, são apresentadas opções de personalização para o menu drop-down.

Alterando a Aparência do Menu

• É possível configurar a cor de fundo e remover bordas do menu drop-down.

• Também é possível ajustar a opacidade e curvatura dos elementos.

Personalizando Ícones e Bordas

Visão Geral da Seção: Nesta seção, são explicadas as opções de personalização para ícones e bordas no site.

Configurando Ícones

• É possível ajustar o tamanho, largura da borda e estilo dos ícones.

• Também é possível deixá-los mais arredondados ou quadrados.

Visualizando as Configurações Aplicadas

Visão Geral da Seção: Nesta seção, é mostrado como visualizar as configurações aplicadas no site.

Verificando as Alterações

• Ao clicar em "Visualizar", é possível ver as alterações feitas no site.

• As configurações serão aplicadas em todas as páginas, incluindo o menu e rodapé.

Personalizando o Rodapé

Visão Geral da Seção: Nesta seção, são apresentadas opções de personalização para o rodapé do site.

Criando um Novo Rodapé

• É possível criar um novo rodapé selecionando a opção correspondente.

• Diversas configurações podem ser feitas, como adicionar colunas e definir estilos de fundo.

Personalizando Textos no Rodapé

Visão Geral da Seção: Nesta seção, são explicadas as opções de personalização para textos no rodapé.

Configurando Textos

• É possível definir a cor, fonte, tamanho e alinhamento dos textos no rodapé.

• Também é possível adicionar títulos e estilizá-los conforme desejado.

Configuração de Estilo e Tamanho

Visão geral da seção: Nesta parte do vídeo, o palestrante discute como configurar o estilo e tamanho dos elementos no site.

Configurando a tipografia e espessura

• É possível configurar a tipografia e espessura dos elementos.

• As configurações referentes à tipografia estão disponíveis nesta seção.

• O border-radius pode ser ajustado para deixar os cantos mais arredondados ou quadrados.

• É possível adicionar um botão para treinar o elemento fralda.

Configurando ícones

• Os ícones podem ser personalizados em relação ao tamanho, cor e estilo.

• As configurações podem ser feitas na seção de ícones.

• É possível definir o tamanho do ícone e sua largura.

Configurando layout responsivo

• O layout também pode ser configurado para dispositivos móveis.

• É necessário ativar o modo responsivo para fazer os ajustes necessários.

• Elementos como logotipo, colunas e fundos podem ser ocultados em dispositivos móveis.

Configurando Cores e Bordas

Visão geral da seção: Nesta parte do vídeo, são abordadas as configurações relacionadas a cores e bordas no site.

Personalizando cores

• É possível personalizar as cores de diferentes elementos do site.

• Na seção de estilo, é possível escolher uma cor de fundo para o menu drop-down.

• A cor das letras também pode ser configurada nessa seção.

Configurando bordas

• As bordas podem ser removidas ou configuradas com cores diferentes.

• É possível ajustar a largura da borda e o arredondamento dos cantos.

Configurando Layout Responsivo

Visão geral da seção: Nesta parte do vídeo, o palestrante explica como configurar o layout responsivo para diferentes dispositivos.

Configurando colunas

• As colunas podem ser configuradas para se adaptarem ao layout responsivo.

• É possível definir a largura das colunas para que fiquem lado a lado ou empilhadas verticalmente.

Ajustando elementos no celular

• No modo responsivo para celular, é possível ocultar elementos específicos.

• É recomendado ajustar a largura das colunas e o tamanho das linhas para melhor visualização em dispositivos móveis.

Personalizando Menu e Estilo

Visão geral da seção: Nesta parte do vídeo, são abordadas as configurações relacionadas ao menu e estilo do site.

Personalizando o menu

• O menu pode ser personalizado em relação à cor de fundo e letras.

• É necessário configurar as opções corretamente para que as letras sejam exibidas no menu.

Removendo bordas

• As bordas podem ser removidas ou configuradas com cores diferentes.

• Na seção de estilo, é possível ajustar a cor de fundo e transparência dos elementos.

Finalizando Configurações de Estilo

Visão geral da seção: Nesta parte do vídeo, são apresentadas as últimas configurações relacionadas ao estilo do site.

Configurando ícones e bordas

• É possível ajustar o tamanho, largura da borda e arredondamento dos cantos dos ícones.

• As cores das listras também podem ser configuradas.

Verificando as configurações

• Após fazer as configurações, é importante verificar se tudo está funcionando corretamente.

• No exemplo do vídeo, o palestrante verifica a aparência do menu na página inicial.

Criando um Rodapé Personalizado

Visão geral da seção: Nesta parte do vídeo, o palestrante demonstra como criar um rodapé personalizado no site.

Adicionando um novo modelo de rodapé

• É possível adicionar um novo modelo de rodapé no painel administrativo do WordPress.

• O palestrante seleciona a opção "rodapé" ao criar um novo modelo.

Personalizando o rodapé

• Na seção de estilo avançado, é possível configurar a cor de fundo e adicionar elementos como imagens e texto ao rodapé.

• O tamanho, fonte e alinhamento do texto também podem ser ajustados.

Finalizando Configurações do Rodapé

Visão geral da seção: Nesta parte final do vídeo, são feitas as últimas configurações relacionadas ao rodapé.

Personalizando elementos adicionais

• É possível personalizar outros elementos adicionais no rodapé, como títulos e cores.

• O palestrante demonstra como alterar a cor e tamanho dos títulos no exemplo apresentado.

Inserindo links em uma página de blog

Visão geral da seção: Nesta seção, o palestrante discute como inserir links em uma página de blog.

Inserindo links

• Para adicionar um link em uma página de blog, é necessário utilizar a tag HTML <a>.

• A tag <a> deve conter o atributo href, que especifica o URL para onde o link irá redirecionar.

• Exemplo de código para adicionar um link em uma página de blog:

<a href="https://www.exemplo.com">Texto do Link</a>

• O atributo href pode ser usado tanto para URLs externos quanto para URLs internos dentro do próprio site.

• É possível adicionar links em diferentes partes da página, como no texto principal, nas imagens ou nos botões.

• Ao criar um link, é importante fornecer um texto descritivo que indique ao usuário para onde ele será redirecionado.

Repetir a estrutura acima conforme necessário e usar subtítulos para organizar as notas. Evitar misturar seções e seguir a ordem cronológica do vídeo.