Como Criar um Banner para Site (3 Maneiras Fáceis)

Um banner visualmente impactante é uma das primeiras coisas que os visitantes notam ao acessar seu site. Ele define o tom da sua marca, comunica sua mensagem e incentiva conversões, tornando-se uma ferramenta poderosa para destacar seus produtos, serviços ou atualizações importantes.

Ao longo dos anos, utilizamos diferentes tipos de banners no WPBeginner para promover nossa newsletter, destacar ofertas de Black Friday, compartilhar cursos gratuitos, exibir nossos serviços profissionais e muito mais.

Através dessas campanhas, notamos que os banners consistentemente chamam a atenção das pessoas, incentivam cliques nos botões de call-to-action e geram leads para o nosso negócio.

Neste artigo, mostraremos como criar facilmente um banner para o seu site WordPress. Dessa forma, você poderá aproveitar todos esses benefícios para melhorar o seu negócio.

O Que É um Banner de Site?

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

Por exemplo, se uma loja de comércio eletrônico acabou de anunciar uma promoção, ela pode exibir um banner na parte superior de suas páginas para informar aos novos visitantes sobre as ofertas de desconto e incentivá-los a fazer uma compra.

Um banner bem projetado pode causar uma forte impressão e convidar os visitantes a explorar o resto do seu site. Além disso, banners podem ser usados para promover produtos de afiliados, estabelecer a identidade da marca, construir uma lista de e-mails incentivando os visitantes a se inscreverem na sua newsletter e direcionar tráfego para outras páginas do 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 de banner para 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:

• Medium Banner: 300 x 250
• Leaderboard: 728 x 90
• Wide Skyscraper: 160 x 600
• Half-Page: 300 x 600
• Large Leaderboard: 970 x 90
• Billboard: 970 x 250
• Large Rectangle: 326 x 280
• Vertical Banner: 120 x 240
• Full Banner: 468 x 60
• Half Banner: 234 x 60

Se você quiser mostrar um banner para um evento na barra lateral, pode usar os tamanhos de banner Wide Skyscraper ou Half-Page. Da mesma forma, você também pode usar o tamanho Medium banner para exibir um banner quadrado em sua página.

Se você está procurando exibir banners de anúncios, talvez queira ver nosso guia para iniciantes sobre os tamanhos e formatos de banner do Google AdSense de melhor desempenho para o WordPress.

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

• Método 1: Crie um Banner para o Site Usando o OptinMonster (Recomendado)
• Método 2: Crie um Banner para o Site Usando o Canva (Grátis)
• Método 3: Crie um Banner para o Site Usando o Thrive Leads
• Bônus: Adicione Smart App Banners no WordPress

Método 1: Crie um Banner para o Site Usando o OptinMonster (Recomendado)

OptinMonster é o melhor plugin criador de banners para WordPress do mercado que permite criar facilmente banners de barra flutuante e pop-up para o seu site.

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

Além disso, muitos dos modelos de banner do OptinMonster possuem campos de opt-in que permitem coletar nomes, endereços de e-mail e números de telefone dos visitantes do seu site.

Ao longo dos anos, usamos a ferramenta várias vezes para adicionar banners e criar campanhas de geração de leads bem-sucedidas no WPBeginner. Para mais detalhes, veja nossa análise completa do OptinMonster.

Etapa 1: Instale o OptinMonster no Seu Site

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

Depois disso, você precisa instalar e ativar o plugin gratuito OptinMonster em seu site WordPress. Para instruções detalhadas, você pode consultar nosso guia para iniciantes sobre como instalar um plugin do WordPress.

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

A partir daqui, clique 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, clique no botão ‘Conectar ao WordPress’ para prosseguir.

Etapa 2: Crie e personalize seu banner

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

A partir daqui, clique 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ê quiser exibir seu banner como uma barra na parte superior da tela, poderá escolher a campanha ‘Barra flutuante’. Da mesma forma, você pode selecionar o tipo de campanha ‘Popup’ para exibir seu banner como um popup.

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 à campanha que está criando. Simplesmente digite um nome de sua escolha e clique 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 para o banner.

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

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

A partir daqui, você pode alterar o título do botão, adicionar seu URL de mídia social e até mesmo 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.

Assim que fizer isso, você precisará selecionar a posição do banner.

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

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

Isso abrirá as configurações na coluna da esquerda, onde você deve expandir a aba ‘Configurações da Barra Flutuante’. A partir daqui, basta ativar o interruptor ‘Carregar Barra Flutuante no topo da página?’ para exibir o banner no topo.

Etapa 3: Adicionar Gatilhos para o seu Banner

Depois de ter projetado seu banner, mude para a aba ‘Regras de Exibição’ no topo. A partir daqui, você pode adicionar regras para a exibição do seu banner.

Lembre-se que você só precisa mudar para esta aba se quiser adicionar um gatilho de exibição específico para o 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, então 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ê desejar usar esta regra de exibição apenas para dispositivos móveis, você também pode escolher essa opção.

Depois disso, escolha a Sensibilidade de Intenção de Saída de acordo com seu gosto e clique no botão ‘Próxima Etapa’.

Isso o levará a uma nova tela. Aqui, você precisa garantir que a opção ‘Optin’ esteja selecionada para o menu suspenso ‘Mostrar a visualização da campanha’.

Depois de fazer isso, basta clicar no botão ‘Próxima Etapa’.

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

Se você quiser mudar algo aqui, então você pode clicar no botão ‘Editar’ para corrigi-lo.

Etapa 4: Publicar o seu Banner

Agora você pode mudar para a aba ‘Publicar’ no topo 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 no topo da sua tela.

É assim que ficou em nosso site de demonstração.

Método 2: Crie um Banner para o Site Usando o Canva (Grátis)

Se você quiser fazer um banner para site gratuitamente, então este método é para você.

Canva é uma ferramenta popular baseada na web para 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 para site.

Etapa 1: Crie uma Conta no Canva

Primeiro, visite o site do Canva e clique no botão ‘Inscrever-se’ para criar uma conta.

Se você já tem uma conta no Canva, pode simplesmente fazer login.

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

A partir daqui, você deve mudar para a aba ‘Modelos’ na coluna esquerda e, em seguida, pesquisar por modelos de banner usando a caixa de pesquisa no topo.

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 Design do Seu Banner para Site

Assim que você selecionar um modelo, a interface de design do Canva será aberta na tela.

A partir daqui, você pode personalizar seu banner de acordo com seu gosto. Você pode alterar o conteúdo existente clicando nos blocos e adicionando seu texto.

Você pode até adicionar diferentes elementos gráficos como adesivos, fotos e vídeos mudando para a aba ‘Elementos’ na coluna esquerda.

Após adicionar um elemento, você pode alterar ainda mais sua animação, posição e transparência no menu no topo.

Você também pode fazer upload de arquivos de mídia do seu computador mudando para a aba ‘Uploads’ na coluna esquerda.

Para adicionar texto ao seu banner, mude para a aba ‘Textbox’ na coluna à esquerda.

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

Você pode até adicionar uma chamada para ação com um link selecionando o texto com o mouse. Isso exibirá um ícone de link na parte superior do texto.

Simplesmente clique nesse ícone e copie e cole o link que você deseja adicionar.

Depois disso, clique no botão ‘Done’ para salvar.

Passo 3: Obtenha um Código de Incorporação para o Banner

Assim que estiver satisfeito com a personalização do seu banner, basta clicar no botão ‘Share’ no canto superior direito da tela.

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

Agora você será levado ao menu ‘All Options’, onde terá que selecionar a opção ‘Embed’.

Assim que fizer isso, um novo prompt aparecerá na tela. A partir daqui, simplesmente clique no botão ‘Embed’.

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

Assim que for exibido na tela, clique no botão ‘Copy’ abaixo da opção ‘HTML embed code’.

Passo 4: Adicione o Código de Incorporação HTML no WordPress

Agora você pode exibir seu banner em sua página, post 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 post onde deseja adicionar o banner.

Uma vez lá, clique no botão ‘Add Block’ (+) no canto superior esquerdo para encontrar e adicionar o bloco Custom HTML à página.

Assim que fizer isso, simplesmente cole o código de incorporação que você copiou no bloco.

Finalmente, clique no botão ‘Update’ ou ‘Publish’ para salvar suas alterações.

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

Método 3: Crie um Banner para o Site Usando o Thrive Leads

Você também pode criar um banner para o seu site usando o Thrive Leads. É um plugin popular de pop-ups para WordPress usado por mais de 114.000 sites.

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

Testamos essa ferramenta exaustivamente em tempo real e descobrimos que ela é super amigável para iniciantes, com uma interface intuitiva e modelos atraentes. Para mais detalhes, veja nossa análise da Thrive Themes Suite.

Passo 1: Instale o Thrive Leads no seu site WordPress

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

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

Em seguida, visite seu site WordPress para instalar e ativar o plugin Thrive Product Manager. Para instruções detalhadas, você pode consultar nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, vá para a aba Gerenciador de Produtos no painel de administração do WordPress e clique no botão 'Entrar na minha conta'.

Após inserir suas credenciais de login, você poderá ver seu painel do Thrive Product Manager.

A partir daqui, você pode selecionar os produtos que deseja instalar e usar em seu site. Simplesmente escolha o plugin ‘Thrive Leads’ e clique no botão ‘Instalar produtos selecionados’.

Passo 2: Crie um Banner para o Site

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

Uma vez 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 sua tela, onde você terá que digitar um nome para o grupo de leads que está criando.

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

Por exemplo, se você estiver criando um banner para construir sua lista de e-mail, poderá nomear seu grupo de leads como ‘Campanha de Lista de E-mail’.

Depois disso, o grupo de leads que você criou aparecerá na tela. Para acessá-lo, clique no botão ‘Adicionar Novo Tipo de Formulário de Opt-In’.

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

Você pode criar um banner slide-in, ribbon, widget, in-content, lightbox ou scroll mat de acordo com sua preferência.

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

Para este tutorial, criaremos um banner tipo ribbon para o nosso site.

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

Agora, para abrir o painel do seu grupo de leads, você deve clicar no botão ‘Adicionar’ no canto direito da sua aba Grupos de Leads.

Isso o levará ao painel de seus Grupos de Leads, onde todos os formulários e relatórios de leads do grupo serão exibidos após o lançamento da sua campanha.

Por exemplo, se você quiser criar um banner para capturar endereços de e-mail, todas as informações do usuário que você coletar através do banner serão exibidas aqui.

Por enquanto, você só precisa clicar no botão ‘Criar Formulário’ para começar a construir 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’.

Assim que seu formulário for criado, ele será exibido no seu painel de Grupos de Leads.

A partir daqui, clique no botão ‘Editar Design’ no canto direito para começar a construir seu banner.

Etapa 3: Personalize o Banner do Seu Site

O editor visual do Thrive será iniciado em uma nova aba na sua tela.

A partir daqui, você pode começar selecionando um modelo para o seu banner no prompt ‘Biblioteca Thrive Leads’.

Você pode então 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 prosseguir.

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

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

Se você quiser adicionar um elemento totalmente novo ao seu banner, você 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, você terá que arrastar e soltar o elemento Social Follow da barra lateral direita.

Quando estiver satisfeito, 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: Configurar Configurações do Banner

Assim que você 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á a janela de 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á a janela de prompt ‘Configurações de Exibição’, onde você pode usar o controle deslizante para determinar quantas vezes 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ê quiser adicionar um gatilho específico para a exibição do seu banner, você precisa clicar na opção ‘Gatilho’ na linha do formulário.

Isso exibirá a janela de prompt ‘Configurações de Gatilho’. Aqui, você pode escolher um gatilho para o seu banner no menu suspenso, como após um certo período 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: Publicar Seu Banner

Após configurar as configurações do banner, você precisa sair do seu painel do Thrive Leads Groups e voltar para o painel do Thrive Leads clicando no link no topo.

Uma vez lá, expanda sua aba de Grupos de Leads e alterne o interruptor ‘Exibir no Desktop’ para ‘Ativado’. Se você também quiser exibir seu banner em dispositivos móveis, pode alternar o interruptor ‘Exibir no Celular’ para ‘Ativado’.

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

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

Finalmente, clique no botão ‘Salvar e Fechar’ para salvar suas alterações.

Agora, você pode visitar seu site para conferir o banner exibido no topo da página.

Assim era como aparecia em nosso site de demonstração.

Bônus: Adicione Smart App Banners no WordPress

Se você tem um aplicativo móvel para o seu site, então é uma boa ideia exibir banners de aplicativos inteligentes. Esses banners promoverão seus aplicativos e incentivarão usuários de iPhone ou iPad a baixá-los.

Assim que os visitantes clicarem neste banner, eles serão levados para a loja de aplicativos, onde poderão baixar seu aplicativo. Se o aplicativo já estiver instalado em seus dispositivos, o banner de aplicativo inteligente pedirá para abrir o aplicativo em vez disso.

Você pode facilmente adicionar um banner de aplicativo inteligente no WordPress com o WPCode. Na nossa opinião, é o melhor plugin de snippets de código WordPress do mercado. Ele permite que você adicione facilmente o ID do seu aplicativo ao site.

Para mais informações, veja nosso tutorial sobre como adicionar facilmente um banner de aplicativo inteligente no WordPress.

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 no seu site WordPress e nossas principais escolhas para o melhor software de design web.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.