Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

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.

Make a website banner in 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.

Shop sale preview

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.

Banner sizes

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).

OptinMonster

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.

Connect your existing account

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.

Connect OptinMonster to WordPress

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.

Create first OptinMonster campaign

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.

Select the floating bar template

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.

Click the Start Building button

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.

Add blocks to the banner

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.

Configure block settings from the left column

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.

Toggle the switch to display the banner at the top

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).

Choose Exit Intent option from the dropdown menu on the left

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).

Choose exit intent technology sensitivity

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).

Select the Optin option from the Then dropdown menu

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.

Summary for display rules

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.

Save and publish the banner

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

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

Optinmonster banner preview

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.

Create a Canva account

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.

Choose a Canva template

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.

Customize the Canva banner

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.

Add elements from the left column

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.

Click on the Link icon

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.

Add link

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.

Click the More option in the Share prompt

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”.

Click the Embed button

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”.

Copy the HTML embed code

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.

Add code into the block editor

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.

Canva banner preview

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”.

Install the Thrive Product Manager plugin

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”.

Log into the Thrive Product Manager dashboard

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).

Install the Thrive Leads plugin

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).

Create new lead group by clicking the Add New button

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”.

Type lead group name

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.

Click the Add new Opt-in form button

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.

Choose an Opt-In form type

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).

Click the Add button for a form

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.

Click the Create a form button

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).

Provide a form name

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.

Click the Edit Design button

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.

Choose banner template

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.

Choose an element and configure its settings

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.

Add elements to the banner

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.

Click the Save Work button

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”.

Configure banner position

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.

Configure banner display settings

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.

Add a trigger for banner display

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”.

Toggle the Display on desktop switch

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.

Choose where you want to display the banner

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.

Preview of banner

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.

An example of a smart app banner on a WordPress website

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

2 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph says

    I used to make banners as simple jpeg/png in canva and put images as clickable with links to where should they redirect. However this was always poor choice. What looks good on dekstop looks bad on mobile and vice versa.
    Images maybe scale and fit to screen but they don’t adapt like normal coded banners which are way better. First method looks really promising and professional which I hope will help me increase my conversions.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.