O cabeçalho do site é a área onde os usuários interagem com seu site pela primeira vez. É usado principalmente para navegar no site, para que os visitantes recebam uma direção clara enquanto visitam diferentes páginas. Além disso, você pode usar este lugar para branding, adicionar um botão CTA e manter muitas informações necessárias. Por padrão, os temas WordPress fornecem um formato de design global para um cabeçalho. Mas se você quiser criar um cabeçalho personalizado, você pode editar os arquivos básicos do tema. O que leva muito tempo e é difícil para um usuário sem tecnologia.
Qual poderia ser a solução mais fácil? Elementor é o plugin popular para criar páginas, que faz as tarefas de design do seu site. Web ser mais fácil do que nunca com funções de arrastar e soltar. Usando Elementor, você pode criar e personalizar um cabeçalho muito eficaz. Neste blog, mostraremos um guia passo a passo sobre como editar o cabeçalho no Elementor. Hoje você aprenderá como: Editar o cabeçalho do site existente com o Elementor Criar cabeçalhos usando modelos de cabeçalho Elementos pré-fabricados Projetar o cabeçalho Elementor do zero usando widgets úteis No final do guia, você receberá um ponto bônus que levará a capacidade de design do seu site. para o próximo nível. Por isso, não falhes.
Como editar o cabeçalho do site existente com o Elementor
É hora de mostrar como editar o cabeçalho atual do nosso site Elementor. Aqui, usamos widgets gratuitos e pro Elementor para projetar nosso cabeçalho. Então você precisa instalar esses dois plugins. Elementor Pro Primeiro, dê uma olhada no cabeçalho atual do nosso site. Observe que adicionamos o logotipo do nosso site e um menu de navegação ao cabeçalho.
Parece um cabeçalho muito comum, então decidimos editá-lo. Agora, vamos adicionar um botão ao cabeçalho atual. Projete também um cabeçalho superior para exibir um f
Formulário de pesquisa, nossos canais sociais e nosso endereço do escritório.
Leva apenas 5 passos para obter a aparência desejada – Passo 1: Adicionar um botão Passo 2: Adicionar e personalizar o formulário de pesquisa Passo 3: Adicionar e personalizar o ícone social Passo 4: Adicionar o ícone Mapa Passo 5: Adicionar e personalizar o título Passo 1: Adicionar um botão para adicionar o botão, precisamos adicionar uma nova coluna à direita do menu de navegação. Confira esta imagem abaixo para saber como adicionar uma nova coluna ao Elementor.
Formulário de pesquisa, nossos canais sociais e nosso endereço do escritório.
Leva apenas 5 passos para obter a aparência desejada – Passo 1: Adicionar um botão Passo 2: Adicionar e personalizar o formulário de pesquisa Passo 3: Adicionar e personalizar o ícone social Passo 4: Adicionar o ícone Mapa Passo 5: Adicionar e personalizar o título Passo 1: Adicionar um botão para adicionar o botão, precisamos adicionar uma nova coluna à direita do menu de navegação. Confira esta imagem abaixo para saber como adicionar uma nova coluna ao Elementor.
Agora encontre o widget Botão na galeria de widgets Elementor. Em seguida, arraste e coloque-o na nova coluna.
Na área Conteúdo, você obtém todas as opções necessárias para adicionar o conteúdo do botão. Aqui, você pode definir o botão Tipo como Padrão, Informação, Sucesso, Aviso e Perigo. Você pode digitar o botão Texto, inserir Link, gerenciar o botão Alinhamento e Tamanho. Você também pode adicionar um ícone e controlar o espaço entre ícones conforme necessário. No entanto, você pode adicionar um ID de botão que o ajudará a adicionar código personalizado ao botão.
Para personalizar o estilo de botão padrão, você pode acessar a área Estilo. Aqui, você pode alterar o design do botão usando as opções de estilo abaixo.
Tipografia de tamanho fixo Texto Sombra Texto Cor Tipo de fundo Faixa de borda Caixa Sombra Forro
Tipografia de tamanho fixo Texto Sombra Texto Cor Tipo de fundo Faixa de borda Caixa Sombra Forro
É hora de adicionar nosso cabeçalho principal. Para fazer isso, precisamos adicionar uma nova seção junto com três colunas no topo do cabeçalho. Vamos ver como adicionar uma nova seção ao Elementor.
Passo 2: Adicionar e personalizar o formulário de pesquisa Depois de adicionar com sucesso a nova seção, você adicionará o widget Formulário de pesquisa à coluna direita.
Você pode alterar o conteúdo padrão do formulário de pesquisa indo para a seção Conteúdo. Você pode selecionar o layout do formulário de pesquisa, como f
Clássico, Mínimo e Tela Cheia. Podes escrever o espaço reservado. Defina também o botão ou ícone de texto e o tipo de ícone Pesquisar e Seta. No entanto, você pode gerenciar o tamanho do ícone aqui na área de conteúdo.
Clássico, Mínimo e Tela Cheia. Podes escrever o espaço reservado. Defina também o botão ou ícone de texto e o tipo de ícone Pesquisar e Seta. No entanto, você pode gerenciar o tamanho do ícone aqui na área de conteúdo.
Na área Estilo, você pode alterar o estilo de entrada do formulário de pesquisa e também personalizar a Cor do Texto do Botão, Cor do Fundo, Tamanho do Ícone e Largura.
Passo 3: Adicione e personalize o ícone social Queremos exibir nossos canais sociais no cabeçalho superior. Então adicionamos o widget Elementor Social Icons à coluna do meio.
Você pode efetivamente adicionar contas sociais clicando no botão + ADICIONAR ARTIGO. Você pode duplicar e remover um item de acordo com suas necessidades. Também escolha a forma personalizada, como arredondado, quadrado e círculo. E gerencie Colunas e defina Alinhamento.
Para adicionar um artigo, conteúdo, primeiro você precisa abrir um artigo. Em seguida, você pode adicionar o ícone social, inserir um Link e definir a cor .
A área Estilo permite personalizar a cor do ícone, tamanho, preenchimento, espaçamento, espaçamento entre linhas, tipo de borda e raio de borda. Aqui, você também escolhe animação de passagem de ícones para dar uma aparência vibrante aos seus ícones. social.
É hora de adicionar o endereço do nosso escritório ao cabeçalho superior. Queremos adicionar um ícone Location Man e um título. É por isso que você precisa adicionar uma seção interna à coluna esquerda do cabeçalho superior. Você pode encontrar o widget no painel Elementor à esquerda e adicioná-lo à coluna.
Passo 4: Adicionar o ícone Mapa Agora temos duas colunas na coluna pai no lado esquerdo do cabeçalho superior. Primeiro, adicionamos o widget Ícone. Em seguida, adicionamos um ícone Mapa e definimos seu alinhamento.
Alterou a cor primária e o tamanho do ícone indo para a área
Estilo. Aqui, você pode definir o valor Ícone Girado.
Estilo. Aqui, você pode definir o valor Ícone Girado.
Passo 5: Adicionar e personalizar o título Para adicionar o endereço, adicionamos o widget Título. Usando a seção Conteúdo, você pode adicionar seu título, inserir um link de acordo com suas necessidades Defina também o título Tamanho, HTML Tag e Alinhamento para seu próprio estilo.
Você também pode personalizar o título usando as opções de estilo padrão, como Cor do Texto, Tipografia, Contorno de Texto, Sombra de Texto e Modo de Mistura.
Pré-visualização final do cabeçalho atual Depois de personalizar o cabeçalho, este é o novo visual do nosso cabeçalho.
Se você quiser criar um cabeçalho Elementor personalizado do seu jeito, deve seguir o guia abaixo. Você pode criar um Elementor personalizado usando ambos os modos. Você pode escolher o bloco pré-fabricado Heard Elementor ou criá-lo do zero usando widgets Elementor. Vamos ver. Criar cabeçalhos usando modelos de cabeçalho do Elementor
Para criar um cabeçalho usando o Construtor de Temas do Elementor, você precisa instalar o Elementor (gratuito e profissional) em seu site. web.
Siga estas etapas abaixo e crie seu cabeçalho personalizado. Navegue até Template->Theme Builder->Header . Clique no botão Adicionar Novo ou no botão Adicionar Novo Cabeçalho. Escolha Tipo de modelo->Cabeçalho e digite o nome do modelo. Clique no botão Criar modelo para salvar o modelo. Na próxima página, você terá a Biblioteca Elementor com blocos e páginas pré-fabricadas. Selecione um bloco de cabeçalho correto e instale-o em seu site. web. Projete e personalize o cabeçalho Elementor do zero usando o widget Elementor
Siga estas etapas abaixo e crie seu cabeçalho personalizado. Navegue até Template->Theme Builder->Header . Clique no botão Adicionar Novo ou no botão Adicionar Novo Cabeçalho. Escolha Tipo de modelo->Cabeçalho e digite o nome do modelo. Clique no botão Criar modelo para salvar o modelo. Na próxima página, você terá a Biblioteca Elementor com blocos e páginas pré-fabricadas. Selecione um bloco de cabeçalho correto e instale-o em seu site. web. Projete e personalize o cabeçalho Elementor do zero usando o widget Elementor
Se você for um usuário regular do Elementor, poderá usar widgets do Elementor para criar seu cabeçalho personalizado. Elementor fornece todos os widgets necessários em sua versão gratuita que você precisa para projetar seu cabeçalho. Basicamente, um cabeçalho comum tem um logotipo do site, um menu de navegação e um