Como fazer um banner de site (3 maneiras fáceis)

Você está procurando uma maneira fácil de criar um banner para o seu site WordPress?

Um banner pode destacar os produtos, serviços ou atualizações de notícias oferecidos pelo seu site. Ele pode aumentar o envolvimento do usuário, aumentar sua taxa de cliques e incentivar os visitantes a agir.

Neste artigo, mostraremos como criar facilmente um banner para o seu site WordPress.

O que é um banner de site?

Um banner é uma exibição gráfica que se estende na parte superior, inferior ou lateral de um site WordPress. Muitas vezes inclui um nome de marca e logotipo, juntamente com outros elementos visuais, para promover um produto, serviço ou evento específico.

Por exemplo, se uma loja online acabou de anunciar uma liquidação, ela pode exibir um banner no topo de suas páginas para informar os novos visitantes sobre a promoção e incentivá-los a fazer uma compra.

Um banner bem projetado pode causar uma forte impressão e convidar os visitantes a explorar o restante do site. Além disso, os banners também podem ser usados ​​para promover produtos afiliados, aumentar o reconhecimento da marca, criar uma lista de e-mail incentivando os visitantes a se inscreverem em seu boletim informativo e direcionar tráfego para outras páginas em seu site.

Você também pode usar banners para promover suas contas de mídia social e incentivar os visitantes a seguir ou curtir suas páginas.

Qual é o melhor tamanho de banner para site?

O tamanho ideal do banner do site depende do layout e dos objetivos de marketing específicos do seu blog WordPress.

Por exemplo, se você deseja exibir um banner retangular e fino na parte superior da tela, pode usar o tamanho Large Leaderboard, que é 970 x 90.

Alguns dos outros tamanhos de banner populares e mais usados ​​incluem:

• Banner médio: 300 x 250
• Tabela de classificação: 728 x 90
• Arranha-céu largo: 160 x 600
• Meia página: 300 x 600
• Tabela de classificação grande: 970 x 90
• Outdoor: 970 x 250
• Retângulo grande: 326 x 280
• Faixa Vertical: 120 x 240
• Banner completo: 468 x 60
• Meio Banner: 234 x 60

Se você deseja mostrar um banner para um evento na barra lateral, pode usar os tamanhos de banner Arranha-céu Largo ou Meia Página. Da mesma forma, você também pode usar o tamanho de banner Médio para exibir um banner em forma de quadrado em sua página.

Se você deseja exibir banners de anúncios, consulte nosso guia para iniciantes sobre os tamanhos e formatos de banner do Google AdSense de melhor desempenho para WordPress.

Dito isso, vamos ver como você pode facilmente criar um banner em seu site WordPress. Para este tutorial, abordaremos três métodos para criar um banner e você pode usar os links abaixo para acessar o método de sua escolha:

Método 1: Faça um banner de site usando o OptinMonster (recomendado)

O OptinMonster é o melhor plug-in de banner do WordPress no mercado que permite criar facilmente barras flutuantes e banners pop-up para o seu site.

É a melhor ferramenta de otimização de conversão e geração de leads que ajuda você a transformar visitantes do site em assinantes e clientes.

Além disso, muitos dos modelos de banner do OptinMonster têm campos optin que permitem que você colete os nomes, endereços de e-mail e números de telefone dos visitantes do seu site.

Etapa 1: Instale o OptinMonster em seu site

Primeiro, você precisará se inscrever para uma conta OptinMonster. Para fazer isso, basta visitar o site do OptinMonster e clicar no botão 'Obter OptinMonster agora' para configurar uma conta.

Depois disso, você deve instalar e ativar o plugin gratuito OptinMonster em seu site WordPress. Para obter instruções detalhadas, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação, o assistente de configuração do OptinMonster será aberto no painel de administração do WordPress.

A partir daqui, você deve clicar no botão 'Conectar sua conta existente' para conectar seu site WordPress à sua conta OptinMonster.

Isso abrirá uma nova janela na tela do seu computador.

A partir daqui, você deve clicar no botão 'Conectar ao WordPress' para seguir em frente.

Etapa 2: crie e personalize seu banner

Agora que você conectou sua conta do WordPress com o OptinMonster, vá para a página OptinMonster »Campanhas na barra lateral de administração do WordPress.

A partir daqui, você precisa clicar no botão 'Criar sua primeira campanha' para começar a criar o design do banner do seu site.

Isso o direcionará para a página 'Modelos', onde você pode começar escolhendo um tipo de campanha.

Por exemplo, se você deseja mostrar seu banner como uma barra na parte superior da tela, pode escolher a campanha 'Barra flutuante'. Da mesma forma, você pode selecionar o tipo de campanha 'Popup' para exibir seu banner como pop-up.

Depois disso, você também precisará selecionar um modelo para a campanha que escolheu.

Para este tutorial, escolheremos um modelo para o tipo de campanha 'Barra flutuante'.

Em seguida, você será solicitado a dar um nome para a campanha que está criando.

Basta digitar um nome de sua escolha e clicar no botão 'Iniciar construção' para avançar.

Isso iniciará a interface de arrastar e soltar do OptinMonster em sua tela, onde você poderá começar a personalizar seu banner. A partir daqui, você pode arrastar e soltar os campos de sua escolha da barra lateral à esquerda no banner.

Por exemplo, se você deseja adicionar ícones de mídia social ao seu banner para aumentar seus seguidores, pode arrastar e soltar o bloco de mídia social na barra lateral esquerda.

Depois disso, basta clicar no bloco para abrir suas configurações na coluna da esquerda.

A partir daqui, você pode alterar o título do botão, adicionar o URL de sua mídia social e até alterar sua plataforma de mídia social no menu suspenso.

Você também pode adicionar outros blocos para exibir vídeos, imagens, texto ou CTAs no design do banner do seu site.

Depois disso, você precisa selecionar a posição do seu banner.

Por padrão, a barra flutuante do OptinMonster é exibida na parte inferior da tela do site quando você começa a rolar.

No entanto, você pode alterar facilmente essa configuração clicando no ícone 'Configurações' na parte inferior da barra lateral à esquerda.

Isso abrirá as configurações na coluna da esquerda, onde você deve expandir a guia 'Configurações da barra flutuante'. A partir daqui, simplesmente alterne a opção 'Carregar barra flutuante no topo da página?' alterne para exibir o banner na parte superior.

Etapa 3: adicione gatilhos para seu banner

Depois de criar seu banner, mude para a guia 'Regras de exibição' na parte superior. A partir daqui, você pode adicionar regras para a exibição de seu banner.

Lembre-se de que você só precisa mudar para esta guia se quiser adicionar um acionador de exibição específico para seu banner. Caso contrário, você pode pular para a próxima etapa.

Por exemplo, se você quiser mostrar seu banner quando o usuário estiver prestes a sair do seu site, você precisa escolher a opção 'Intenção de saída'.

Depois de fazer isso, basta selecionar a opção 'Em todos os dispositivos' no menu suspenso no meio. Se você deseja usar esta regra de exibição apenas para dispositivos móveis, também pode escolher essa opção.

Depois disso, escolha a sensibilidade de intenção de saída de acordo com sua preferência e clique no botão 'Próximo passo'.

Isso o levará a uma nova tela. Aqui, você precisa se certificar de que a opção 'Optin' está selecionada para o menu suspenso 'Mostrar a visualização da campanha'.

Depois de fazer isso, basta clicar no botão 'Próximo passo'.

Sua regra de exibição para o banner agora será mostrada na tela.

Se você quiser alterar algo aqui, clique no botão 'Editar' para corrigi-lo.

Etapa 4: publique seu banner

Agora você pode alternar para a guia 'Publicar' na parte superior e clicar no botão 'Salvar' no canto superior direito da tela.

Depois disso, basta clicar no botão 'Publicar' para exibir o banner em seu site.

Agora visite seu site para ver o banner na parte superior da tela.

Isto é o que parecia em nosso site de demonstração.

Método 2: Faça um Banner de Site Usando o Canva (Grátis)

Se você deseja criar um banner de site gratuitamente, esse método é para você.

O Canva é uma ferramenta popular baseada na Web que permite criar todos os tipos de gráficos, incluindo banners, logotipos, pôsteres, capas de livros e muito mais. Ele também oferece uma versão gratuita que você pode usar para criar um design de banner de site.

Etapa 1: crie uma conta no Canva

Primeiro, você precisará visitar o site do Canva e clicar no botão 'Cadastre-se' para criar uma conta.

Se você já possui uma conta do Canva, basta fazer o login.

Após a criação da conta, você será direcionado para a página inicial da sua conta do Canva.

A partir daqui, você precisa mudar para a guia 'Modelos' na coluna da esquerda e procurar modelos de banner usando a caixa de pesquisa na parte superior.

Isso exibirá todos os modelos de banner disponíveis no Canva. No entanto, alguns desses modelos podem estar bloqueados porque são recursos pagos.

Etapa 2: crie o banner do seu site

Depois de selecionar um modelo, a interface de design do Canva será iniciada na tela.

A partir daqui, você pode personalizar seu modelo de banner de acordo com sua preferência. Você pode alterar o conteúdo existente no modelo clicando nos blocos e adicionando seu próprio texto.

Você pode até adicionar diferentes elementos gráficos, como adesivos, fotos e vídeos, alternando para a guia 'Elementos' na coluna da esquerda.

Ao adicionar um elemento, você pode alterar ainda mais sua animação, posição e transparência no menu na parte superior.

Você também pode fazer upload de arquivos de mídia de seu próprio computador, alternando para a guia 'Uploads' na coluna da esquerda.

Para adicionar algum texto ao seu banner, simplesmente mude para a guia 'Caixa de texto' na coluna à esquerda.

Uma vez lá, você pode usar estilos de texto padrão ou diferentes combinações de fontes para adicionar algum conteúdo ao seu banner.

Você pode até adicionar uma frase de chamariz com um link selecionando o texto com o mouse. Isso exibirá um ícone de link na parte superior do texto.

Basta clicar nesse ícone e copiar e colar o link que deseja adicionar.

Depois disso, clique no botão 'Concluído' para salvá-lo.

Etapa 3: obter um código de incorporação para o banner

Quando estiver satisfeito com a personalização do seu banner, basta clicar no botão 'Compartilhar' no canto superior direito da tela.

Isso abrirá um menu de prompt onde você deve selecionar a opção 'Mais' na parte inferior.

Isso o levará ao menu 'Todas as opções', onde você deverá selecionar a opção 'Incorporar'.

Depois de fazer isso, um novo prompt será aberto na tela. A partir daqui, basta clicar no botão 'Incorporar'.

O Canva agora criará um código de incorporação HTML para você.

Assim que for exibido na tela, clique no botão 'Copiar' na opção 'Código de incorporação HTML'.

Etapa 4: adicionar o código de incorporação HTML no WordPress

Agora você pode exibir seu banner em sua página, postagem ou barra lateral do WordPress de acordo com sua preferência. Para este tutorial, mostraremos nosso banner em uma página do WordPress.

Primeiro, você precisa abrir a página ou postagem onde deseja adicionar o banner.

Uma vez lá, clique no botão '+' no canto superior esquerdo da tela para localizar e adicionar o bloco HTML personalizado à página.

Depois de fazer isso, basta colar o código de incorporação que você copiou no bloco.

Por fim, clique no botão 'Atualizar' ou 'Publicar' para salvar suas alterações.

Agora visite seu site para ver o banner do WordPress em ação.

Método 3: Faça um Banner de Site Usando Thrive Leads

Você também pode criar um banner de site usando o Thrive Leads. É um popular plug-in pop-up do WordPress usado por mais de 114.000 sites.

Com Thrive Leads, você pode criar banners que o ajudarão a capturar leads em seu site WordPress e aumentar sua lista de e-mail.

Passo 1: Instale Thrive Leads em seu site WordPress

Primeiro, você precisará visitar o site Thrive Themes e se inscrever para uma conta. Depois de fazer isso, vá para o painel de membros.

A partir daqui, vá em frente e clique no link 'Baixar e instalar o plugin Thrive Product Manager'.

Em seguida, você precisa visitar seu site WordPress para instalar e ativar o plug-in Thrive Product Manager. Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a guia Gerenciador de produtos no painel de administração do WordPress e clique no botão 'Fazer login na minha conta'.

Depois de inserir suas credenciais de login, você poderá ver o painel do Thrive Product Manager.

A partir daqui, você pode selecionar os produtos que deseja instalar e usar em seu site. Basta escolher o plug-in 'Thrive Leads' e clicar no botão 'Instalar produtos selecionados'.

Etapa 2: criar um banner de site

Após a instalação do plug-in, você precisa visitar a página Thrive dashboard »Thrive Leads na barra lateral de administração do WordPress.

Quando estiver lá, basta clicar no botão 'Adicionar novo' ao lado da opção 'Grupos de leads'.

Isso exibirá o pop-up 'Adicionar novo grupo de leads' na tela, onde você precisa digitar um nome para o grupo de leads que está criando.

Certifique-se de nomear o grupo principal de uma forma que o ajude a identificá-lo.

Por exemplo, se você estiver criando um banner para criar sua lista de e-mail, poderá nomear seu grupo principal como 'Campanha de lista de e-mail'.

Depois disso, o grupo de leads que você criou será adicionado à tela. A partir daqui, você deve clicar no botão 'Adicionar novo tipo de formulário de inscrição'.

Isso abrirá um novo prompt onde você deve escolher o tipo de banner que deseja criar.

Você pode criar um slide-in, faixa de opções, widget, conteúdo, caixa de luz ou banner de esteira de rolagem de acordo com sua preferência.

Esses banners serão como um formulário, pois coletarão dados de seus usuários, incluindo endereços de e-mail, números de telefone e muito mais.

Para este tutorial, criaremos um banner de fita para o nosso site.

Ao escolher um tipo de design de banner de site, o prompt desaparecerá automaticamente da tela.

Agora, para abrir o painel do grupo de leads, você deve clicar no botão 'Adicionar' no canto direito da guia Grupos de leads.

Isso levará você ao painel de grupos de leads, onde todos os formulários e relatórios de leads do grupo serão exibidos depois que sua campanha for lançada.

Por exemplo, se você deseja criar um banner para capturar endereços de e-mail, todas as informações do usuário coletadas por meio do banner serão exibidas aqui.

Por enquanto, você só precisa clicar no botão 'Criar formulário' para começar a criar seu banner.

Isso abrirá um novo prompt onde você deve fornecer um nome para o formulário e clicar no botão 'Criar formulário'.

Depois que seu formulário for criado, ele será exibido no painel de grupos de leads.

A partir daqui, você deve clicar no botão 'Editar design' no canto direito para começar a criar seu banner.

Etapa 3: personalize o banner do seu site

O editor visual Thrive agora será lançado em uma nova guia na tela.

A partir daqui, você pode começar selecionando um modelo para seu banner no prompt 'Thrive Leads Library'.

Você pode usar um dos modelos pré-fabricados como está ou personalizá-lo ainda mais com o editor visual. Ao fazer sua escolha, basta clicar no botão 'Escolher modelo' para avançar.

Depois de adicionar um modelo para um banner de fita, você pode personalizar facilmente os elementos nele clicando em cada um. Isso abrirá as configurações do elemento na barra lateral à esquerda.

Por exemplo, se você quiser alterar a cor do botão em seu modelo, basta clicar nele para abrir suas configurações na barra lateral.

Se você deseja adicionar um elemento completamente novo ao seu banner, também pode fazer isso clicando no ícone '+' no canto direito da tela.

Isso abrirá a barra lateral 'Adicionar elementos' à direita, onde você pode arrastar e soltar os elementos de sua escolha no banner.

Por exemplo, se você quiser adicionar botões de conta de mídia social ao seu banner, terá que arrastar e soltar o elemento Social Follow na barra lateral direita.

Quando estiver satisfeito com seu banner, clique no botão 'Salvar trabalho' no canto inferior esquerdo para armazenar suas alterações.

Depois disso, você precisa retornar ao seu painel de grupos de leads.

Etapa 4: definir as configurações do banner

Quando estiver de volta ao seu painel, você pode alterar a posição do seu banner clicando na opção 'Posição' na linha do formulário.

Isso abrirá o prompt 'Configurações de posição', onde você pode escolher sua posição de banner preferida no menu suspenso.

Depois disso, clique no botão 'Salvar'.

Em seguida, para configurar a frequência de exibição do banner, clique na opção 'Frequência de exibição' na linha do formulário.

Isso abrirá o prompt 'Configurações de exibição', onde você pode usar o controle deslizante para determinar o número de vezes que o banner deve ser exibido na tela.

Se você mantiver o número 0, o banner será exibido o tempo todo. Ao fazer sua escolha, clique no botão 'Salvar' para armazenar suas configurações.

Se você deseja adicionar um acionador específico para a exibição do banner, clique na opção 'Acionador' na linha do formulário.

Isso exibirá o prompt 'Configurações do acionador', onde você pode escolher um acionador para seu banner no menu suspenso, como após um determinado período de tempo ou quando um usuário chegar ao final da página.

Quando terminar, clique no botão 'Salvar' para salvar suas configurações.

Etapa 5: publique seu banner

Depois de definir as configurações do banner, você precisa sair do painel de grupos de leads e voltar ao painel Thrive Leads clicando no link na parte superior.

Quando estiver lá, expanda a guia Grupos de leads e alterne a opção 'Exibir na área de trabalho' para 'Ativar'. Se você também deseja exibir seu banner em dispositivos móveis, pode alternar a opção 'Exibir no celular' para 'Ativado'.

Depois disso, clique no ícone de engrenagem no canto superior direito da guia Grupos de leads para abrir as configurações de exibição.

Aqui, você pode selecionar as páginas do site nas quais deseja que o banner seja exibido. Por exemplo, se você deseja que o banner seja exibido no topo de todas as páginas e postagens, marque a caixa ao lado dessas opções.

Por fim, clique no botão 'Salvar e fechar' para salvar suas alterações.

Agora, você pode visitar seu site para conferir o banner exibido na parte superior da página.

Isso é o que parecia em nosso site de demonstração.

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente um banner de site para WordPress. Você também pode querer ver nosso guia para iniciantes sobre como personalizar cores em seu site WordPress e nossas principais opções para o melhor software de web design.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.