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

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

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

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

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. Geralmente inclui o nome e o logotipo de uma marca, além de outros elementos de design, para promover um produto, serviço ou evento específico.

Por exemplo, se uma loja de comércio eletrônico tiver acabado de anunciar uma promoção, ela poderá exibir um banner na parte superior das páginas para informar os 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 restante do seu site. Além disso, os banners podem ser usados para promover produtos de afiliados, estabelecer a identidade da marca, criar uma lista de e-mails incentivando os visitantes a se inscreverem em seu boletim informativo e direcionar o 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 de site?

O tamanho ideal do banner do site depende do layout e das metas de marketing específicas do seu blog WordPress.

Por exemplo, se você quiser exibir um banner retangular e fino na parte superior da tela, poderá 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
• Placar de líderes grande: 970 x 90
• Cartaz: 970 x 250
• Retângulo grande: 326 x 280
• Banner vertical: 120 x 240
• Banner completo: 468 x 60
• Meio banner: 234 x 60

Se você quiser exibir um banner para um evento na barra lateral, poderá usar os tamanhos de banner Wide Skyscraper ou Half-Page. Da mesma forma, você também pode usar o tamanho de banner Medium 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 criar facilmente um banner em seu site WordPress. Neste tutorial, abordaremos três métodos para criar um banner, e você pode usar os links abaixo para ir para o método de sua preferência:

Método 1: criar um banner de site usando o OptinMonster (recomendado)

O OptinMonster é o melhor plug-in de criação de banners para WordPress do mercado que permite criar facilmente banners de barra flutuante e pop-up para seu site.

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

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

Para obter mais detalhes, consulte nossa análise completa do OptinMonster.

Etapa 1: Instale o OptinMonster em seu site

Primeiro, você precisará se inscrever em uma conta do OptinMonster. Para isso, basta visitar o site do OptinMonster e clicar no botão “Get OptinMonster Now” (Obter o OptinMonster agora).

Depois disso, você precisa instalar e ativar o plug-in gratuito do OptinMonster em seu site do 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 em seu painel de administração do WordPress.

A partir daqui, clique no botão “Connect Your Existing Account” (Conectar sua conta existente) para conectar seu site WordPress à sua conta OptinMonster.

Isso abrirá uma nova janela na tela do computador.

A partir daí, clique no botão “Connect to WordPress” (Conectar ao WordPress) para seguir em frente.

Etapa 2: Crie e personalize seu banner

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

A partir daí, clique no botão “Create Your First Campaign” (Criar sua primeira campanha) para começar a criar o design do banner de seu site.

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

Por exemplo, se quiser mostrar seu banner como uma barra na parte superior da tela, escolha a campanha “Floating bar” (Barra flutuante). Da mesma forma, você pode selecionar o tipo de campanha “Popup” para exibir seu banner como um 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 “Start Building” (Iniciar criação) para avançar.

Isso abrirá a interface de arrastar e soltar do OptinMonster na sua tela, onde você poderá começar a personalizar seu banner. A partir daqui, você pode arrastar e soltar 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 o número de seguidores, poderá arrastar e soltar o bloco Mídia social da barra lateral esquerda.

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

A partir daí, você pode alterar o título do botão, adicionar o URL da mídia social e até mesmo alterar a 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 de fazer isso, você precisa selecionar a posição do banner.

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

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ê deverá expandir a guia “Configurações da barra flutuante”. A partir daí, basta alternar a opção “Carregar barra flutuante na parte superior da página?” para exibir o banner na parte superior.

Etapa 3: Adicione acionadores para seu banner

Depois de criar seu banner, vá para a guia “Display Rules” (Regras de exibição) na parte superior. A partir daí, você pode adicionar regras para a exibição do banner.

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

Por exemplo, se quiser mostrar o banner quando o usuário estiver prestes a sair do site, será necessário escolher a opção “Exit Intent” (Intenção de saída).

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

Depois disso, escolha a sensibilidade da intenção de saída de acordo com sua preferência e clique no botão “Next Step” (Próxima etapa).

Isso o levará a uma nova tela. Aqui, você precisa se certificar de que a opção “Optin” esteja selecionada no menu suspenso “Show the campaign view”.

Depois de fazer isso, basta clicar no botão “Next Step” (Próxima etapa).

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

Se quiser alterar algo aqui, você pode clicar no botão “Edit” (Editar) para corrigi-lo.

Etapa 4: Publique seu banner

Agora você pode mudar para a guia “Publish” (Publicar) na parte superior e clicar no botão “Save” (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.

Esta é a aparência em nosso site de demonstração.

Método 2: Criar um banner de site usando o Canva (gratuito)

Se você quiser 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: Criar uma conta no Canva

Primeiro, você precisará visitar o site do Canva e clicar no botão “Sign Up” (Registre-se) para criar uma conta.

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

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

A partir daí, você deve alternar para a guia “Templates” na coluna da esquerda e, em seguida, 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 o banner de acordo com sua preferência. Você pode alterar o conteúdo existente clicando nos blocos e adicionando seu texto.

Você pode até mesmo adicionar diferentes elementos gráficos, como adesivos, fotos e vídeos, alternando para a guia “Elements” (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 do seu computador, alternando para a guia “Uploads” na coluna da esquerda.

Para adicionar algum texto ao seu banner, basta alternar 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é mesmo 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.

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

Depois disso, clique no botão “Done” (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 banner, basta clicar no botão “Share” (Compartilhar) no canto superior direito da tela.

Isso abrirá um menu de prompt no qual você deverá selecionar a opção “More” (Mais) na parte inferior.

Agora você será levado ao menu “All Options” (Todas as opções), onde deverá selecionar a opção “Embed” (Incorporar).

Depois de fazer isso, um novo prompt será aberto na tela. A partir daí, basta clicar no botão “Embed”.

O Canva agora criará um código HTML incorporado para você.

Depois que ele 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 na página, na postagem ou na barra lateral do WordPress, de acordo com sua preferência. Neste 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 “Add Block” (+) no canto superior esquerdo 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: Criar um banner de site usando o Thrive Leads

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

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

Etapa 1: Instale o Thrive Leads em seu site WordPress

Primeiro, você deve visitar o site da Thrive Themes e registrar-se em uma conta. Depois de fazer isso, vá para o painel de controle do membro.

A partir daí, clique no link “Baixar e instalar o plug-in Thrive Product Manager”.

Em seguida, visite seu site do 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á até a guia Product Manager no painel de administração do WordPress e clique no botão “Log into my account”.

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 “Install selected products” (Instalar produtos selecionados).

Etapa 2: Criar um banner do site

Após a instalação do plug-in, você precisa acessar a página do painel do Thrive ” Thrive Leads na barra lateral do administrador do WordPress.

Quando estiver lá, basta clicar no botão “Add New” (Adicionar novo) ao lado da opção “Lead Groups” (Grupos de leads).

Isso exibirá o pop-up “Add New Lead Group” (Adicionar novo grupo de leads) na tela, onde você deverá digitar um nome para o grupo de leads que está criando.

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

Por exemplo, se você estiver criando um banner para construir sua lista de e-mails, poderá nomear seu grupo de leads como “Email List Campaign”.

Depois disso, o grupo de leads que você criou será adicionado à tela. A partir daí, clique no botão “Add New Type Of Opt-In Form” (Adicionar novo tipo de formulário de opt-in).

Isso abrirá um novo prompt em que você deverá escolher o tipo de banner que deseja 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, inclusive endereços de e-mail, números de telefone e muito mais.

Para este tutorial, criaremos um banner de faixa de opções 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 seu grupo de leads, você deve clicar no botão “Add” (Adicionar) no canto direito da guia Lead Groups (Grupos de leads).

Isso o levará ao painel de controle dos grupos de leads, onde todos os formulários e relatórios de leads do grupo serão exibidos depois que a campanha for ao ar.

Por exemplo, se você quiser 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 “Create Form” (Criar formulário) para começar a criar seu banner.

Isso abrirá um novo prompt no qual você deverá fornecer um nome para o formulário e clicar no botão “Create Form” (Criar formulário).

Depois que o formulário for criado, ele será exibido no painel do Lead Groups.

A partir daí, clique no botão “Edit Design” (Editar design) no canto direito para começar a criar seu banner.

Etapa 3: Personalize o banner do seu site

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

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

Em seguida, você pode usar um dos modelos predefinidos como está ou personalizá-lo ainda mais com o editor visual. Depois de fazer sua escolha, basta clicar no botão “Choose Template” (Escolher modelo) para avançar.

Após adicionar um modelo para um banner de faixa de opções, você pode personalizar facilmente os elementos nele contidos 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 em seu modelo, deverá clicar nele para abrir suas configurações na barra lateral.

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

Isso abrirá a barra lateral “Add Elements” (Adicionar elementos) à direita, onde você poderá arrastar e soltar elementos de sua escolha no banner.

Por exemplo, se quiser adicionar botões de contas de mídia social ao seu banner, será necessário arrastar e soltar o elemento Social Follow (Seguimento social) da barra lateral direita.

Quando estiver satisfeito, clique no botão “Save Work” (Salvar trabalho) no canto inferior esquerdo para armazenar suas alterações.

Depois disso, você precisa retornar ao painel de controle do Lead Groups.

Etapa 4: Configurar as definições do banner

Quando estiver de volta ao painel, você poderá alterar a posição do seu banner clicando na opção “Position” (Posição) na linha do formulário.

Isso abrirá o prompt “Position Settings” (Configurações de posição), onde você poderá escolher a posição preferida do banner 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 “Display Frequency” (Frequência de exibição) na linha do formulário.

Isso abrirá o prompt “Display Settings” (Configurações de exibição), no qual 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. Depois de fazer sua escolha, clique no botão “Save” (Salvar) para armazenar suas configurações.

Se quiser adicionar um acionador específico para a exibição do banner, você precisará clicar na opção “Trigger” (Acionador) na linha do formulário.

Isso exibirá o prompt “Trigger Settings” (Configurações de acionamento). Aqui, você pode escolher um acionador para o seu banner no menu suspenso, como após um determinado período ou quando um usuário chegar ao final da página.

Quando terminar, clique no botão “Save” (Salvar) para salvar suas configurações.

Etapa 5: Publique seu banner

Depois de definir as configurações do banner, você precisa sair do painel do Lead Groups e voltar para o painel do Thrive Leads clicando no link na parte superior.

Quando estiver lá, expanda sua guia Lead Groups e alterne a opção “Display On Desktop” para “On”. Se você também quiser exibir seu banner em dispositivos móveis, poderá alternar a opção “Display On Mobile” para “On”.

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 em que deseja que o banner seja exibido. Por exemplo, se você quiser que o banner seja exibido na parte superior de todas as páginas e postagens, marque a caixa ao lado dessas opções.

Por fim, clique no botão “Save and Close” (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.

Esta é a aparência em nosso site de demonstração.

Bônus: Adicionar banners de aplicativos inteligentes no WordPress

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

Quando os visitantes clicarem nesse banner, eles serão levados à loja de aplicativos, onde poderão fazer o download do seu aplicativo. Se o aplicativo já estiver instalado no dispositivo, o banner do aplicativo inteligente solicitará que eles abram o aplicativo.

Você pode adicionar facilmente um banner de aplicativo inteligente no WordPress com o WPCode. É o melhor plug-in de snippets de código do WordPress no mercado que permite adicionar facilmente o ID do seu aplicativo ao site.

Para obter mais informações, consulte 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 o WordPress. Talvez você também queira ver nosso guia para iniciantes sobre como personalizar cores em seu site WordPress e nossas principais opções do melhor software de web design.

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