Como Adicionar Texto Sobre uma Imagem no WordPress (3 Maneiras Fáceis) 

Quer destacar uma promoção, adicionar uma chamada para ação ou tornar suas fotos mais envolventes? Adicionar texto sobre uma imagem no WordPress é a maneira mais rápida de fazer isso, e você pode fazer tudo dentro do seu site sem Photoshop ou uma ferramenta online separada. Você pode transformar uma imagem simples em um banner, um cabeçalho principal ou até mesmo um mini anúncio em apenas alguns cliques.

Neste guia, mostrarei três maneiras fáceis de colocar texto sobre imagens no WordPress, desde o editor de blocos integrado até um construtor de arrastar e soltar que oferece mais controle de design.

Por que Adicionar Texto Sobre uma Imagem no WordPress?

Adicionar texto sobre uma imagem a torna mais útil. Você pode destacar recursos de produtos, adicionar chamadas para ação em banners ou colocar rótulos diretamente nas fotos para que os visitantes entendam instantaneamente o que estão vendo.

Você não precisa de Photoshop ou habilidades de design gráfico para nada disso. O WordPress oferece várias maneiras integradas de adicionar sobreposições de texto diretamente no seu site, que é onde os três métodos abaixo entram em jogo.

Como Adicionar Texto Sobre uma Imagem no WordPress

Abaixo, você encontrará 3 maneiras diferentes de adicionar texto sobre uma imagem no WordPress. Começaremos com um plugin do WordPress e, em seguida, mostraremos como criar sobreposições de texto com o editor de blocos do WordPress.

Método 1. Adicionar Texto Sobre uma Imagem Usando o Bloco Galeria do SeedProd

O plugin com o qual começaremos é o SeedProd, o melhor construtor de sites para WordPress. O SeedProd permite que você crie layouts de texto sobre imagem visualmente, arrastando blocos para o lugar sem tocar em nenhum código.

Você pode começar com um kit completo de site ou um modelo de página de destino, e então personalizar seu design com blocos do WordPress. O bloco Galeria, por exemplo, permite ativar uma sobreposição colorida e mostrar os títulos, descrições e legendas de suas fotos ao passar o mouse.

Siga o guia abaixo para aprender como adicionar texto sobre uma imagem com o SeedProd.

Passo 1. Instale e Ative o SeedProd

Primeiro, clique no botão abaixo para criar sua conta SeedProd e baixar o arquivo do plugin para o seu computador.

Comece com o SeedProd Hoje

Em seguida, dentro do painel da sua conta, clique na guia Downloads e copie sua chave de licença do SeedProd.

Em seguida, carregue o arquivo .zip do plugin para o seu site WordPress. Se precisar de ajuda com esta etapa, siga estas instruções sobre como instalar e ativar um plugin do WordPress.

Após ativar o SeedProd, vá para SeedProd » Configurações na área de administração do WordPress e cole a chave de licença que você copiou anteriormente.

Agora clique no botão Verificar Chave e vá para a próxima etapa.

Etapa 2. Crie um Novo Layout do WordPress

Para esta etapa, você precisará decidir qual tipo de layout do WordPress deseja criar com o SeedProd. Você pode criar um tema do WordPress do zero usando um dos Kits de Site completos, ou escolher um modelo de página de destino para criar uma página de destino independente.

A opção Construtor de Temas é ideal se você deseja substituir completamente seu tema WordPress existente. Se você deseja apenas criar ou personalizar uma página e manter seu tema atual, o Construtor de Páginas de Destino é uma opção melhor.

Temos tutoriais para ambos os caminhos. Siga este guia para criar um tema do WordPress ou estes passos para criar uma página de destino no WordPress com o SeedProd.

Ambos os tutoriais guiam você na escolha de um modelo pré-fabricado e na configuração do seu layout básico. Para este guia, selecionaremos a opção Construtor de Temas.

Depois de escolher um modelo para o seu design, você pode editá-lo e adicionar suas personalizações. Neste caso, estamos usando o Portfolio Theme de Fotografia e planejamos personalizar a página do Portfólio.

Para editar a página Portfólio, vá para Páginas » Todas as Páginas, encontre a página desejada e clique no link Editar com SeedProd.

Etapa 3. Incorporar e Personalizar o Bloco de Galeria

Ao abrir seu design, você verá um layout como o exemplo abaixo.

À direita está uma prévia ao vivo da sua página que você pode clicar e editar em tempo real. À esquerda estão os blocos do WordPress e seções que você pode arrastar e soltar em seu design.

Você também pode remover elementos passando o mouse sobre eles e clicando no ícone da lixeira. Faremos isso para o bloco Galeria que veio com nosso modelo, pois o substituiremos pela Galeria Avançada.

O bloco Galeria Avançada do SeedProd permite definir a cor da sobreposição, fonte, alinhamento e qual texto de legenda é exibido ao passar o mouse. Usaremos para adicionar texto sobre as imagens no portfólio, então encontre o bloco Galeria Avançada e arraste-o para sua página.

As configurações do bloco são abertas na barra lateral esquerda. Dentro deste painel, primeiro escolha Único ou Múltiplo no menu suspenso "Tipo".

A opção "Múltiplo" permite adicionar mais de uma galeria à sua página com um filtro no qual você pode clicar para ver cada galeria. A opção "Único" exibe apenas uma galeria sem os filtros.

Após escolher o tipo de galeria, você pode começar a adicionar suas fotos. Clique no botão Adicionar Imagens da Galeria e selecione imagens do seu computador ou da biblioteca de mídia do WordPress.

Você pode adicionar quaisquer fotos, incluindo JPEG/JPG, PNG, GIF e outros tipos de arquivo.

Depois de carregar suas fotos, você pode abrir o menu Configurações e escolher o número de colunas, espaçamento, proporção, tamanho da imagem e link.

Abaixo, você pode escolher qual texto será exibido ao passar o mouse sobre cada foto. Para ambas as opções, você pode mostrar o seguinte:

• Título
• Legenda
• Alt
• Descrição

É assim que fica com a legenda da imagem exibida ao passar o mouse.

Se suas legendas forem difíceis de ler, você pode ajustar a cor de fundo da sobreposição e editar a fonte do texto, o alinhamento do texto e o estilo do texto.

A aba Avançado tem muitas outras opções de personalização, incluindo sombra, borda, espaçamento e estilos de visibilidade para dispositivos móveis.

Com a Visibilidade do Dispositivo, você pode mostrar e ocultar elementos específicos em diferentes tamanhos de dispositivo, como tablets Android, iPhones, iPads da Apple, laptops Mac iOS e desktops Microsoft.

Quando estiver satisfeito com seu design, lembre-se de salvar suas alterações clicando no botão Salvar no canto superior direito.

Etapa 4. Publique Suas Alterações

Agora, tudo o que resta é publicar as personalizações do WordPress em seu site. Se você estiver criando uma landing page, clique em Publicar no menu suspenso Salvar.

Se você estiver usando o Theme Builder do SeedProd, precisará ir para SeedProd » Theme Builder e ativar a opção Ativar Tema SeedProd.

Agora você pode visualizar sua página e ver seus textos sobrepostos em imagens em ação.

Método 2. Adicionar Texto Sobre uma Imagem Usando Seções do SeedProd

Outra maneira de adicionar texto sobre uma imagem no WordPress é com as seções prontas do SeedProd. Ao editar qualquer modelo com o editor de arrastar e soltar do SeedProd, você verá uma aba Seções no lado esquerdo da sua tela.

Clicar nessa aba mostra várias seções para seu Cabeçalho, Rodapé, Herói, Chamada para Ação, Recursos e FAQs. São coleções de blocos do WordPress em um layout pronto que você pode adicionar à sua página com um clique.

Se você quiser exibir uma imagem com um botão de chamada para ação, pode escolher uma seção da biblioteca de Chamada para Ação e clicar no ícone de mais para incorporá-la.

A seção aparece na parte inferior do seu design, onde você pode personalizá-la para atender às suas necessidades.

Neste caso, alteramos a imagem de fundo, adicionamos uma cor de sobreposição para escurecer o fundo e personalizamos o texto do título e os botões de chamada para ação.

Lembre-se de Salvar e Publicar suas alterações quando terminar. Em seguida, você pode visualizar seu design ao vivo em seu site.

Método 3. Adicionar Texto Sobre uma Imagem Com o Bloco Capa do WordPress

O método a seguir mostra como adicionar texto sobre uma imagem no WordPress sem um plugin. Você pode usar o bloco Capa do WordPress para exibir qualquer imagem e digitar texto sobre ela.

Este método não oferece tantas opções de personalização quanto o anterior. Ainda é uma maneira útil de adicionar texto a imagens se você não quiser adicionar outro plugin do WordPress ao seu site.

Para adicionar o bloco Capa a uma postagem ou página, clique no ícone de mais (+) no editor de blocos do WordPress. Em seguida, digite "Capa" e escolha o bloco Capa quando ele aparecer.

Em seguida, clique no botão "Upload" ou "Biblioteca de Mídia" para escolher uma imagem para sua capa.

Após escolher uma imagem, você pode digitar diretamente na foto para adicionar um título ou descrição.

Você pode personalizar sua imagem de fundo no painel direito ativando um fundo fixo ou repetido. Você também pode alterar o foco da imagem arrastando o marcador na visualização.

O painel Configurações de Sobreposição permite escolher uma cor ou gradiente de sobreposição para sua imagem. No mesmo painel, você pode definir a opacidade da sobreposição, o preenchimento e as dimensões.

Clicar no texto da sobreposição abre as ferramentas de texto onde você pode alterar a cor do texto e a cor de fundo e brincar com os diferentes estilos de fonte.

Alterar a caixa das letras, o espaçamento entre letras e o tamanho da fonte nos permite criar este efeito de rótulo.

Quando estiver satisfeito com a aparência do seu bloco de Capa, você pode publicar ou atualizar sua página. Ao visitar seu site, você verá seu texto sobre a imagem.

Como Manter o Texto Legível Sobre uma Imagem?

O truque para um texto legível sobre uma imagem é o contraste, para que as palavras nunca compitam com a foto por trás delas. Uma imagem agitada ou brilhante é o motivo mais comum para o texto de sobreposição desaparecer, e alguns pequenos ajustes o corrigem.

• Use texto de alto contraste: Texto claro em uma foto escura, ou texto escuro em uma foto clara, permanece legível rapidamente.
• Adicione uma sobreposição para escurecer o fundo: Uma camada de cor semitransparente acalma uma imagem agitada, da mesma forma que você escurece uma imagem de fundo atrás de uma seção principal.
• Ajuste o tamanho da fonte para o dispositivo: O texto que fica bom no desktop pode encolher para nada no celular, portanto, verifique ambos antes de publicar.
• Evite as áreas agitadas da foto: Coloque suas palavras sobre uma parte calma do céu, parede ou sombra, em vez de sobre um assunto detalhado.

Como Adicionar Texto Atrás de uma Imagem no WordPress?

Adicionar texto atrás de uma imagem é um efeito de design em camadas, onde uma palavra fica atrás do assunto para que a foto pareça sobrepô-la. O WordPress não tem um único botão "texto atrás da imagem", mas você pode simular o visual com blocos sobrepostos.

A rota mais simples é o bloco Capa. Defina um título grande como texto de sobreposição e, em seguida, reduza a opacidade da imagem nas Configurações de sobreposição para que o texto pareça estar atrás da foto em vez de sobre ela.

Para um efeito mais forte, use blocos de Grupo sobrepostos. Coloque um título em um grupo e uma imagem com fundo transparente (um recorte PNG) em outro, e então use margens negativas ou preenchimento para puxar a imagem sobre parte do texto.

Como Circular Texto em Torno de uma Imagem no WordPress?

Envolver texto em torno de uma imagem significa que o parágrafo flui ao lado da foto em vez de parar acima e abaixo dela. O editor de blocos do WordPress lida com isso com o alinhamento de imagem, sem necessidade de código.

Adicione seu bloco de Imagem primeiro, depois selecione-o e escolha Alinhar à esquerda ou Alinhar à direita na barra de ferramentas do bloco. Digite seu parágrafo no bloco diretamente após a imagem, e o texto envolverá o lado aberto.

Mantenha a imagem em uma largura modesta para que haja espaço para o texto ao lado dela. Em telas estreitas de celular, o WordPress automaticamente coloca o texto envolvido abaixo da imagem, o que mantém o layout legível.

Perguntas Frequentes sobre Adicionar Texto Sobre uma Imagem no WordPress

Como adicionar texto sobre uma imagem no WordPress sem um plugin?

Use o bloco Capa integrado do WordPress. Adicione um bloco Capa no editor de blocos, escolha sua imagem e digite seu texto diretamente na foto. Você pode então definir uma cor de sobreposição e ajustar o estilo do texto no painel direito.

Como adicionar texto atrás de uma imagem no WordPress?

O WordPress não tem um botão único para isso, então você simula o visual em camadas com blocos sobrepostos. Defina um título como texto de sobreposição do bloco Capa e diminua a opacidade da imagem, ou empilhe dois blocos de Grupo e puxe a imagem sobre parte do texto com margens negativas.

Como envolver texto em torno de uma imagem no WordPress?

Adicione um bloco de Imagem, selecione-o e escolha Alinhar à esquerda ou Alinhar à direita na barra de ferramentas do bloco. Digite seu parágrafo no bloco logo após a imagem, e o texto flui ao redor do lado aberto. No celular, o WordPress coloca o texto abaixo da imagem automaticamente.

Como manter o texto legível sobre uma imagem com muito detalhe?

Adicione uma sobreposição semitransparente para escurecer a foto, depois use texto de alto contraste para que as palavras se destaquem. Coloque o texto sobre uma parte calma da imagem, como o céu ou uma parede lisa, e verifique o tamanho da fonte no celular antes de publicar.

Comece a Adicionar Texto Sobre Suas Imagens Hoje

Agora você pode adicionar texto sobre qualquer imagem no WordPress, desde uma rápida sobreposição de bloco Capa até uma galeria SeedProd totalmente estilizada. Escolha o método que corresponde ao nível de controle de design que você deseja, e você pode tê-lo no ar em minutos.

Comece com o SeedProd Hoje

Você também pode gostar dos seguintes tutoriais do WordPress:

• Como Criar Abas no WordPress para Conteúdo em Abas
• Como Personalizar Trechos de Posts do WordPress (Sem Código)
• Como Criar Animações de Texto no WordPress (Passos Fáceis)

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.