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 adicionar texto em cima de uma imagem no WordPress (3 métodos)

Muitas vezes, você precisa adicionar uma sobreposição de texto a uma imagem no WordPress.

Talvez você esteja criando um banner atraente para a sua página inicial. Ou talvez você queira adicionar um título atraente à sua imagem em destaque. Nós mesmos já nos deparamos com essa situação, e adicionar uma sobreposição de texto é uma ótima maneira de tornar suas imagens mais informativas e envolventes.

Se precisar de ajuda para adicionar texto à sua imagem no WordPress, você está no lugar certo. Encontramos três maneiras fáceis de adicionar texto em cima de imagens no WordPress, sem necessidade de conhecimentos de design.

How to add text on top of an image in WordPress

Quando adicionar texto sobre imagens no WordPress

As imagens podem tornar seu site WordPress mais interessante e ajudar a quebrar parágrafos grandes de texto.

Entretanto, às vezes suas imagens podem precisar de mais explicações. Por exemplo, você pode adicionar um texto na parte superior de uma imagem para explicar o que a imagem mostra e por que você a adicionou à publicação.

Muitos blogs do WordPress também adicionam texto em cima de uma imagem para criar banners e cabeçalhos atraentes e informativos.

Nesta postagem, apresentamos três maneiras fáceis para iniciantes de adicionar texto sobre uma imagem no WordPress. Se preferir ir direto para um método específico, você pode usar os links abaixo:

Uma maneira de adicionar texto em cima de uma imagem no WordPress é usar o bloco Cover. Você pode usar esse bloco para mostrar qualquer imagem e, em seguida, digitar o texto sobre a imagem. Isso torna o bloco Cover perfeito para criar imagens de heróis, cabeçalhos e banners.

Para adicionar um bloco de capa a uma página ou postagem, basta clicar no botão de adição “+ Add Block” no editor de blocos do Gutenberg.

Agora você pode digitar “Cover” e selecionar o bloco correto quando ele aparecer.

The WordPress Cover block

Aqui, você pode escolher o bloco Cover padrão. Mas você também pode escolher a opção de modelo com a imagem e o texto do espaço reservado. Com a segunda opção, você pode simplesmente substituir a imagem e o texto existentes pelos seus próprios.

Para substituir a imagem padrão, basta clicar para selecionar a imagem. Depois de fazer isso, clique no botão “Replace” (Substituir).

How to add text on top of an image in WordPress

Se quiser usar uma imagem que já esteja na biblioteca de mídia do WordPress, basta clicar em “Open Media Library” (Abrir biblioteca de mídia). Em seguida, você poderá escolher uma imagem existente.

Se você quiser carregar uma nova imagem, clique em “Upload”.

Uploading an image to the WordPress Cover block

Isso abre uma janela na qual você pode escolher qualquer arquivo do seu computador.

Depois de escolher uma imagem, você pode usar as configurações do bloco para criar alguns efeitos interessantes e atraentes. Por exemplo, você pode tornar a imagem fixa no lugar à medida que o visitante rola a página ou adicionar uma sobreposição de cores à imagem.

A colored cover overlay

Se você usar uma sobreposição, poderá alterar sua opacidade usando o controle deslizante “Opacity” (Opacidade). A configuração de opacidade controla a transparência da imagem de fundo.

Quando estiver satisfeito com a aparência da imagem, você estará pronto para adicionar algum texto.

Por padrão, o bloco Cover tem um bloco Heading (Título) e um bloco Paragraph (Parágrafo) onde você pode adicionar texto sobre a imagem.

How to add text on top of an image in WordPress

Para adicionar algum texto, basta clicar para selecionar o bloco Título ou Parágrafo. Em seguida, digite o texto que você deseja usar.

Quando você adiciona texto em cima de uma imagem, às vezes pode ser difícil ler esse texto. Isso é particularmente verdadeiro para os visitantes que têm problemas de visão. Para saber mais, consulte nosso guia sobre como melhorar a acessibilidade em seu site WordPress.

Dito isso, talvez você queira estilizar seu texto para facilitar a leitura.

Se estiver trabalhando com um bloco de título, também poderá experimentar os diferentes estilos de título para ver qual deles é mais fácil de ler.

Styling the text on top of a WordPress image

Você também pode ajudar seu texto a se destacar usando uma cor contrastante.

Para escolher uma cor diferente, selecione a guia “Block” (Bloco) no menu à direita. Em seguida, clique em “Color” (Cor) para expandir essa seção.

Depois de fazer isso, clique em “Texto”. Isso abre uma janela pop-up na qual você pode escolher uma nova cor para todo o texto do bloco.

Changing the color of text on top of an image

Normalmente, textos maiores são mais fáceis de ler.

Para aumentar o tamanho do texto, clique no campo ao lado de “Tamanho” e digite um número maior nesse campo.

Adding text on top of an image in WordPress

Quando estiver satisfeito com a aparência do Cover Block, você poderá publicar ou atualizar sua página normalmente. Agora, se você visitar o site do WordPress, verá o texto na parte superior da imagem.

Método 2: Adicionar texto em cima de uma imagem usando o bloco de imagem

O bloco Cover é ótimo para criar banners e cabeçalhos. No entanto, você também pode adicionar texto em cima de um bloco de imagem padrão do WordPress.

Para começar, você precisará adicionar um bloco de imagem à sua página ou postagem. Para fazer isso, basta clicar no botão de adição “+ Add Block” no editor de blocos do WordPress.

Em seguida, você pode digitar “Image” (Imagem) e selecionar o bloco correto para adicioná-la à sua postagem.

The WordPress Image block

Em seguida, você pode carregar uma imagem do seu computador ou clicar em “Biblioteca de mídia” para escolher uma imagem da biblioteca de mídia do WordPress.

Depois de escolher a imagem, você pode alterar o ponto focal, adicionar uma sobreposição e alterar a opacidade seguindo o mesmo processo descrito acima.

Você também pode experimentar os diferentes controles deslizantes “Fundo fixo” e “Fundo repetido” para ver o que funciona melhor para o seu bloco de imagem.

Quando estiver satisfeito com a aparência da imagem, basta clicar no botão “Add text over image” (Adicionar texto sobre a imagem).

Adding text on top of an image in WordPress

Isso adiciona uma área onde você pode digitar seu texto.

Dependendo da sua imagem, os visitantes podem ter dificuldade para ler o texto sobreposto. Nesse caso, pode ser útil deixar o texto em negrito ou alterar sua cor seguindo o mesmo processo descrito acima.

Changing the text color in WordPress

Você também pode aumentar o tamanho do texto.

Para fazer isso, localize a seção “Size” (Tamanho) no menu à direita. Em seguida, você pode clicar nos diferentes números para aumentar ou diminuir o tamanho do texto.

Increasing the text size

Quando estiver satisfeito com a aparência do texto e da imagem, vá em frente e visualize o site. Em seguida, clique em “Save Draft” (Salvar rascunho), “Update” (Atualizar) ou “Publish” (Publicar) para salvar suas alterações.

Se você usar um tema WordPress em blocos, poderá usar os Métodos 1 e 2 para adicionar texto sobre uma imagem em qualquer parte do tema usando o Full Site Editor (FSE) do WordPress.

Você pode saber mais sobre o FSE em nosso guia completo para iniciantes sobre edição completa de sites no WordPress.

Método 3: Criar um layout de página personalizado com texto em cima de uma imagem

Os blocos integrados do WordPress são uma maneira rápida e fácil de adicionar texto sobre uma imagem no WordPress. No entanto, se você quiser ter a liberdade de criar designs de página totalmente personalizados, precisará de um plug-in de construtor de páginas.

O SeedProd é o melhor plug-in de criação de páginas do WordPress no mercado. Ele permite que você adicione texto sobre qualquer imagem em todo o seu site.

Observação: existe uma versão gratuita do SeedProd, mas, para este guia, usaremos a versão Pro, pois ela tem mais recursos.

Você pode ler nossa análise completa do SeedProd para obter mais detalhes.

Primeiro, você precisa instalar e ativar o plug-in SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisará inserir sua chave de licença do SeedProd. Você pode obter essa chave fazendo login na sua conta do SeedProd. Em seguida, clique na guia “Downloads”.

Depois de fazer isso, você pode copiar a chave na seção “License key” (Chave de licença).

The SeedProd Downloads page

Agora você pode colar essa chave na área de administração do WordPress, acessando a página SeedProd ” Settings.

Quando estiver aqui, vá em frente e cole sua chave no campo “License key” (Chave de licença).

Verifying your SeedProd license

Em seguida, basta clicar em “Verify Key” (Verificar chave).

Depois disso, vamos acessar SeedProd Landing Pages e clicar em “Add New Landing Page”.

SeedProd's page design templates

Sua próxima tarefa é escolher um modelo, que será o ponto de partida de sua página. Independentemente do modelo SeedProd escolhido, você pode personalizar cada parte do modelo para que ele se adapte perfeitamente ao seu site e à sua marca.

Se preferir começar com uma tela em branco, você pode clicar em “Blank Template” (Modelo em branco).

The SeedProd ready-made templates

Em todas as nossas imagens, estamos usando o modelo Tasty Squeeze Page, que é perfeito para obter mais campanhas de assinantes.

Depois de encontrar um modelo que queira usar, passe o mouse sobre ele. Em seguida, você pode clicar no ícone “Preview” (Visualizar).

SeedProd's professionally-designed templates

Isso mostrará uma visualização do modelo.

Se você estiver satisfeito com a aparência desse modelo, clique no botão “Choose This Template” (Escolher este modelo).

A lead generation and squeeze template

No campo “Nome da página”, digite um nome para a página.

Por padrão, o SeedProd usará esse nome como URL da página. Se você quiser alterar esse URL criado automaticamente, basta editar o texto no campo “URL da página”.

Creating a custom page layout with SeedProd

Quando estiver satisfeito com as informações inseridas, clique no botão “Save and Start Editing the Page” (Salvar e começar a editar a página). Isso abrirá o modelo no editor de arrastar e soltar do SeedProd.

Na barra lateral esquerda, você verá todos os blocos e seções que podem ser adicionados à sua página usando o recurso de arrastar e soltar.

Adding blocks to your SeedProd design

A menos que esteja usando o modelo em branco, sua página do SeedProd já terá alguns blocos e seções. Para editar qualquer conteúdo, basta clicar para selecionar o bloco ou a seção.

O menu à esquerda do SeedProd agora mostrará todas as configurações que podem ser usadas para personalizar esse bloco ou seção. Como pode ser visto na imagem a seguir, se você clicar em um bloco Headline (Título), poderá alterar o texto que aparece nesse bloco.

Customizing a ready-made SeedProd page design

A maneira mais fácil de adicionar texto em cima de uma imagem é usar uma das seções Hero prontas do SeedProd.

Essas seções têm um espaço reservado, uma imagem de fundo de largura total, com algum texto de espaço reservado adicionado na parte superior. Você pode simplesmente substituir a imagem de fundo e o texto padrão por seu próprio conteúdo.

Para começar, clique na guia “Sections” (Seções) no menu à esquerda do SeedProd.

Em seguida, clique em “Hero” (Herói) para ver todas as seções de herói prontas que podem ser adicionadas à sua página.

A SeedProd section template

Para visualizar qualquer um desses modelos de seção, basta passar o mouse sobre o modelo e clicar no ícone da lupa.

Para adicionar essa seção de herói ao seu design, basta clicar em ‘Choose This Section’.

A SeedProd hero template

Em seguida, substitua a imagem de estoque do modelo por sua própria imagem. Para fazer isso, basta clicar na imagem padrão para selecioná-la.

Em seguida, no menu à esquerda do SeedProd, passe o mouse sobre a visualização da “Imagem de fundo” até que apareça um ícone de lixeira.

Em seguida, você pode clicar nesse ícone para excluir a imagem de espaço reservado.

Deleting a background image in SeedProd

Em seguida, clique em “Use Your Own Image” (Usar sua própria imagem). Em seguida, você pode escolher uma imagem da biblioteca de mídia do WordPress ou usar uma imagem de estoque.

O SeedProd lhe dá acesso fácil a milhares de imagens de banco de imagens isentas de royalties. Para dar uma olhada na biblioteca de imagens de estoque do SeedProd, clique em ‘Use a Stock Image’.

Na barra de pesquisa, digite uma palavra ou frase que descreva a imagem que você está procurando e clique no botão “Search” (Pesquisar).

Choosing a SeedProd stock image

O SeedProd agora mostrará todas as imagens de estoque que correspondem ao seu termo de pesquisa.

Quando você encontrar uma imagem que deseja adicionar ao seu design, basta clicar nela.

SeedProd's stock image library

Depois de adicionar uma imagem, você está pronto para substituir o texto do espaço reservado.

Para fazer isso, clique para selecionar o bloco Text (Texto). Em seguida, na área “Text”, basta digitar o texto que você deseja usar.

Add text on top of an image using SeedProd

Alguns dos modelos de herói do SeedProd têm conteúdo extra, como botões de chamada para ação.

Deseja alterar esse conteúdo? Basta clicar para selecionar o bloco e fazer suas alterações no menu à esquerda do SeedProd.

Editing your SeedProd text

Outra opção é excluir o bloco do modelo de herói.

Para fazer isso, basta clicar para selecionar o bloco e, em seguida, clicar no ícone da lixeira.

Deleting SeedProd sections and blocks

Quando estiver satisfeito com o design da página, clique no botão “Save” (Salvar).

A partir daí, você pode optar por publicar a página ou salvá-la como modelo.

Publishing a SeedProd design

Para obter mais detalhes sobre a criação de layouts de página personalizados com o SeedProd, consulte nosso guia sobre como criar uma página de destino no WordPress.

Dicas de bônus para gerenciar imagens e arquivos no WordPress

Adicionar texto a imagens é apenas uma maneira de melhorar a aparência de seu site. Deseja fazer mais com suas imagens? Dê uma olhada nestes guias fáceis:

Esperamos que este artigo tenha ajudado você a aprender como adicionar texto em cima de uma imagem no WordPress. Talvez você também queira ver nosso guia sobre como editar em massa imagens em destaque e nossas escolhas de especialistas para os melhores plugins de controle deslizante do WordPress.

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

5 ComentáriosDeixe uma resposta

  1. Syed Balkhi

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

    Hi, I am trying to add a title and when you press on it it leads you to an image.

    • WPBeginner Support

      For what it sounds like you’re wanting, you would want to use method 2 and add a link to that block.

      Administrador

  3. Trish

    Hi Editorial Staff,

    Am a bit disappointed with the WordPress Cover Block in that the text overlay is NOT responsive in Mobile view, sadly, making the text totally unreadable.

    Thought you should know of this issue.

    • WPBeginner Support

      Thank you for sharing that the block is not currently responsive.

      Administrador

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.