O seu site tem um aspecto suficientemente apelativo para os visitantes? Ou é apenas um site normal entre milhões de outros! Você deseja que o seu site se destaque da multidão? Deseja que cada página do seu site tenha um aspecto distinto com um toque diferente? E se eu disser que a chave para a solução de todos esses problemas está em suas próprias mãos? E essa chave está – Custom Header!! Sim, você leu-o bem. Vamos ver como…

Um cabeçalho é o elemento visual mais importante do seu site que ocupa a posição mais alta. É a primeira coisa que um visitante vê sempre que aterrissa no seu site. O cabeçalho do seu site é a identidade do seu site que permanece a mesma em todas as páginas do site. Você pode usá-lo para marcar um bom impacto duradouro na mente do visitante. Você pode se destacar e ganhar a confiança do usuário ao criar cabeçalhos personalizados notáveis de auto-retrato. Um cabeçalho personalizado no WordPress é uma funcionalidade que lhe permite personalizar a imagem do cabeçalho juntamente com a adição de texto, widget, etc. a ele. Você também pode ajustar esses elementos de acordo com a sua necessidade para apresentar a melhor imagem do seu site. Aqui no Templatetoaster website builder software, verifique como criar cabeçalho personalizado com o editor de temas do WordPress.

WordPress Custom Header: Porque você realmente precisa de um?

O cabeçalho é um dos elementos mais importantes do seu site. É um gesto que transmite muito sobre o seu site. Normalmente, ele contém uma imagem ou vídeo para chamar a atenção do visitante. De acordo com o grupo Nielsen Norman, um visitante permanece apenas por 10-20 segundos no seu site. Portanto, o cabeçalho deve ser apelativo para lhes interessar.

Um cabeçalho personalizado no WordPress dá-lhe mais controlo e flexibilidade. Você pode girar, redimensionar ou recortar uma imagem de cabeçalho além do reposicionamento do logotipo, texto ou widgets. Você pode desenhá-lo para contrastar a aparência do seu site. Você tem que usá-lo como uma proposta para o público-alvo. Tente citar seu slogan no cabeçalho personalizado no WordPress. Como você pode não ter uma segunda chance de causar a primeira boa impressão. Um cabeçalho bem estruturado deve responder porque você é único, o que é tudo o que o seu site apresenta, etc.

Então, um cabeçalho personalizado é importante, pois funciona como um rosto do seu site. Ele deve ser capaz de comunicar o crux e o humor do seu site para o público. Você pode ter um cabeçalho personalizado do WordPress diferente por página. Por exemplo, você pode adicionar recursos do seu produto no cabeçalho da página About Us e no resto das páginas sem recursos. Pode funcionar maravilhosamente !!

Como adicionar um cabeçalho personalizado ao WordPress?

Os temas padrão do WordPress permitem que você use cabeçalhos personalizados. Você pode colocar suas próprias imagens de cabeçalho personalizadas de acordo com suas preferências. Definir uma imagem de cabeçalho personalizada do WordPress requer alguns esforços. Basicamente envolve dois passos para adicionar um cabeçalho personalizado aos temas padrão do WordPress, como segue

1. Source and Edit your image

Primeiro de tudo, selecione uma imagem sedutora. Ela deve ser simples e única. Você pode obter muitas imagens gratuitas na Internet. Para mais detalhes, você pode ler cerca de 16 sites para obter imagens gratuitas. Uma vez que você fonte sua imagem de cabeçalho, você é deixado apenas com a edição.

Você pode usar algumas das ferramentas úteis de edição desktop ou web-based free editing tools. Você pode rejuvenescer a imagem escolhida com GIMP, paint.net etc. GIMP é um software gratuito e de código aberto para edição de imagens. Ele fornece muitas ferramentas sofisticadas para dar um toque especial à sua imagem. Já o paint.net facilita as ferramentas de edição de imagens no Windows. Faça seu cabeçalho personalizado da imagem do WordPress.

2. Carregue o cabeçalho personalizado

Para carregar a imagem do cabeçalho, faça o login no seu painel de controle do WordPress. Do painel esquerdo, navegue até Appearance → Header.

Irá abrir um painel de Cabeçalho Media à esquerda da tela. Vá até Header Image e clique no botão Add New Image.

Irá abrir a galeria de imagens para escolher a imagem. Você também pode procurar a sua imagem personalizada aqui. Selecione a imagem, corte-a, se necessário. Defina-a como a imagem de cabeçalho personalizada. Você está pronto.

Como personalizar o cabeçalho no WordPress?

Após carregar a imagem de cabeçalho personalizada do tema WordPress, você pode editá-la para aplicar vídeo, texto, widgets, ícones sociais, etc. Você pode usar qualquer tema padrão do WordPress. Aqui, você receberá um exemplo de código para editar o cabeçalho personalizado em Twenty Seventeen theme.

1. Adicione uma Área de Texto ao Cabeçalho

Com o tema padrão, você só pode alterar o título do site. Mas para adicionar uma área de texto, você tem que escrever algum código no arquivo header-image.php. Você adicionará o seguinte código para obter uma área de texto no cabeçalho

Depois de adicionar este código, você verá uma área de texto separada no cabeçalho como mostrado abaixo

2. Adicionar ícones sociais

Para adicionar ícones sociais ao cabeçalho, você adicionará o seguinte código ao site-branding.php depois da classe wrap.

Você também tem que dar CSS se você quiser dar estilo aos ícones sociais no seu próprio estilo único.

Dará os resultados necessários como mostrado

3. Adicione um Widget ao cabeçalho

Se você quiser que alguns widgets apresentem o seu site, você definirá uma função no arquivo function.php. Você pode adicionar este código no final do arquivo.

Após fazê-lo, você irá adicionar este código HTML ao arquivo header-image.php para mostrar o widget específico no frontend.

Agora, você irá mover para Appearance → Widgets. A partir daqui, você pode adicionar qualquer widget à sua Posição de Cabeçalho Personalizada. Por exemplo, o widget de Pesquisa é adicionado simplesmente arrastando-o para a posição Custom Header Position.

O cabeçalho resultante será um pouco parecido com isto

4. Reposicione o Logotipo

Pode adicionar um logotipo às opções padrão do WordPress. Navegue até Appearance → Header → Header Media Seção Logotipo →. Aqui, defina um logotipo clicando em Select Logo option.

But, para reposicioná-lo, você precisa escrever CSS adicionais. Em Twenty Seventeen theme, você terá um logotipo na posição inferior esquerda por padrão, como mostrado abaixo

Aqui, você verá um exemplo de CSS para adicionar o logotipo na posição central. Da mesma forma, você pode defini-lo em qualquer lugar no cabeçalho.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Adicionar vídeo ao cabeçalho

Finalmente, você também pode adicionar um vídeo ao seu cabeçalho do WordPress. Felizmente, não há necessidade de adicionar código para isso. O WordPress fornece uma opção padrão para adicionar vídeo ou imagem de fundo.

Para adicionar vídeo ao cabeçalho, navegue até Appearance → Header → Header Media → Header Video. Aqui, você clicará no botão Select Video como mostrado abaixo. Em seguida, você pode navegar pelo vídeo que deseja no cabeçalho a partir do seu computador. Alternativamente, você também pode dar o URL do vídeo se ele estiver online. Basta publicá-lo.

Seu Vídeo de Cabeçalho ficará assim

Simplesmente, você pode adicionar uma imagem de cabeçalho de fundo selecionando qualquer imagem de cabeçalho da seção Header Media.

Você pode ter diferentes cabeçalhos personalizados do WordPress por página, digamos alguns com uma imagem de fundo, alguns com vídeo ou Widgets, etc. Tudo depende da sua escolha e criatividade.

Como criar um cabeçalho personalizado no WordPress a partir do zero com TemplateToaster?

Você deve ter bons conhecimentos de PHP, HTML, CSS para trabalhar com arquivos de template. Se você é um iniciante e não sabe como escrever código, você pode confiar no TemplateToaster WordPress Theme Builder. Você não precisa de codificação para criar um modelo de cabeçalho personalizado do WordPress. Basta apenas alguns cliques para arrastar & e você estará pronto com seu cabeçalho personalizado. Vamos ver como adicionar cabeçalho personalizado ao WordPress com TemplateToaster

Primeiro de tudo, baixe e instale o construtor de sites TemplateToaster. Depois de instalá-lo com sucesso, você terá a tela de seleção do CMS, como mostrado abaixo. Selecione o WordPress aqui

A seguir, você terá a próxima tela para criar um modelo a partir do zero ou usar um modelo de amostra. Você selecionará Start from Scratch e clique em Modify.

Então, você será redirecionado para a interface principal do software de onde você pode começar a desenhar seu cabeçalho personalizado.

1. Cabeçalho personalizado de largura total

Você obterá a tela principal da interface do software, como mostrado abaixo. A partir daqui, você pode definir um cabeçalho de largura total. Vá para Cabeçalho → Width → Full Width.

2. Reposicione o Logotipo

Da aba Cabeçalho, clique na opção Logotipo. Abrirá uma galeria de ícones do logotipo. Você pode selecionar uma imagem do logotipo a partir de uma biblioteca de amostras ou você pode navegar em sua própria imagem personalizada. Ele irá definir o logo.

Quando você clicar duas vezes na imagem do logo, irá abrir uma aba Format, como mostrado abaixo. A partir daqui, você pode dar um link para a imagem do logotipo ou definir a sua posição. Você pode reposicionar dando posições personalizadas à esquerda e ao topo ou selecionar um atalho de posição. Por exemplo, aqui uma posição vertical-central é selecionada para o logo.

3. Adicionando Imagem de Fundo

Você selecionará a opção Fundo na aba Cabeçalho para definir uma imagem de fundo do cabeçalho. Ele abrirá uma galeria de imagens. Você também pode procurar sua própria imagem de cabeçalho personalizada na opção Mais Imagens.

Simplesmente, você pode adicionar uma imagem de cabeçalho em primeiro plano clicando na opção Imagem da aba Cabeçalho.

4. Adicionar Área de Texto ao Cabeçalho

Se você quiser exibir a tagline e informações relevantes sobre o cabeçalho, você pode usar uma área de texto. Na área de texto, você pode adicionar texto simples, botão, lista, etc. Clique na opção Áreas de Texto.

Adicionar conteúdo e estilo, clicando duas vezes. Como um duplo clique abrirá uma aba Editor para editar o conteúdo.

5. Adicionar Widget ao cabeçalho

Pode adicionar uma área widget ao cabeçalho com um único clique. Vá até a aba Widget Areas e clique na opção Widget Areas → Cabeçalho. Você também pode definir tipografia para este widget e pode reposicioná-lo em qualquer lugar do cabeçalho apenas arrastando. Você pode adicionar conteúdo a ele após exportar.

6. Adicionar ícones de mídias sociais ao cabeçalho

Adicionar ícones de mídias sociais ao cabeçalho é realmente simples. No separador Cabeçalho, clique na opção Ícones sociais. Irá abrir uma galeria de ícones sociais para seleccionar uma imagem de acordo com a sua necessidade. Você também pode navegar pelo seu ícone personalizado aqui.

Todos os ícones de mídias sociais estão disponíveis aqui. Você pode manter ícones de acordo com a sua necessidade. Você coloca ícones de redes sociais no Facebook, Twitter e Google + aqui.

7. Adicionando Vídeo ao Cabeçalho

Para adicionar um vídeo, clique na opção Adicionar Vídeo. Daqui, você pode facilmente carregar um vídeo de fundo de cabeçalho.

Palavras Finais

Até agora, você já aprendeu como criar um cabeçalho personalizado no WordPress. Isso irá definitivamente mudar a perspectiva do seu site. A solução que você optar é inteiramente sua escolha. Esperamos que você tenha gostado do post. Se você tiver dúvidas, você pode postar na seção de comentários abaixo.

Leitura relacionada: WordPress 101 tutorial

Best WordPress hosting providers

Como verificar a versão do WordPress

Como encontrar a url de login do WordPress

Como instalar o WordPress

Qual é o tema do WordPress que

Como mudar a linguagem do WordPress

Como criar página de login personalizada do WordPress

Como criar o tema do WordPress do zero

Como corrigir o não funcionamento da atualização da página do WordPress