Como adicionar texto em cima de uma imagem no WordPress (3 métodos)

Deseja adicionar texto em cima de uma imagem no WordPress?

Uma sobreposição de texto é uma ótima maneira de fornecer informações adicionais sobre uma imagem. É também uma maneira rápida e fácil de criar banners, cabeçalhos e até mesmo anúncios on-line.

Neste artigo, mostraremos como você pode adicionar texto em cima de uma imagem no 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:

Método 1: Adicionar texto na parte superior de uma imagem usando o Cover Block

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.

Por padrão, o bloco Cover tem uma imagem de espaço reservado e algum texto de espaço reservado.

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

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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

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

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

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

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

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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 as imagens em destaque e nossas escolhas de especialistas para o 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.