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

Adicionar texto sobre uma imagem é uma técnica popular para aprimorar o apelo visual do conteúdo ou site. Além disso, é uma ótima maneira de tornar suas imagens mais informativas e envolventes.

Neste artigo, encontramos três maneiras fáceis de adicionar texto sobre uma imagem no WordPress. Se você prefere usar o editor de blocos, um plug -in ou código personalizado. Vamos descobrir!

Por que é importante adicionar o texto na parte superior das imagens

Antes de avançar para os métodos, você precisa saber o motivo por que adicionar o texto na parte superior das imagens é importante.

1. Atenda a atenção

Se os usuários estiverem rolando rapidamente pelo conteúdo, adicionar imagens sozinho pode não ser suficiente para chamar sua atenção. É por isso que você precisa adicionar texto sobre uma imagem para ajudá -lo a chamar a atenção dos usuários e transmitir sua mensagem com mais eficiência.

2. Aprimore a experiência do usuário

É verdade que as imagens podem fornecer muito valor por conta própria, no entanto, adicionar texto em cima delas, como legendas, citações ou outro conteúdo baseado em texto, pode torná-las ainda mais úteis. Além disso, os usuários podem entender o contexto da imagem e como ela se relaciona com o seu conteúdo.

3. Melhorando a acessibilidade

Você também pode ajudar a melhorar a acessibilidade para usuários que podem ter dificuldade em visualizar a própria imagem. Ao fornecer uma alternativa de texto, você pode garantir que seu conteúdo seja acessível a uma gama mais ampla de usuários.

4. Aumentando SEO

Adicionar palavras -chave relevantes às legendas de sua imagem ou texto ALT pode ajudar a melhorar a classificação do mecanismo de pesquisa do site . Isso ocorre porque os mecanismos de pesquisa usam essas informações para entender o conteúdo do seu site e determinar o quão relevante é para as consultas de pesquisa dos usuários.

3 Métodos Como adicionar texto em cima de uma imagem no WordPress

1. Use o editor do WordPress Block

Primeiro, vá para a página ou poste sobre o qual você adicionará o texto sobre a imagem.

Escolha a cobertura para escrever o texto sobre a imagem.

Depois disso, começará a aparecer na tela. Ele mostra a imagem padrão, mas você pode alterar a imagem como deseja.

Você também pode substituir a imagem padrão pela sua imagem personalizada. Clique no botão Substituir e envie a imagem ou simplesmente escolha na biblioteca de mídia .

Parecerá assim, então você pode escrever o texto sobre a imagem como desejar.

Clique duas vezes no texto, você receberá a opção de edição para o texto. Você pode ajustar o tamanho, a cor e muito mais conforme sua exigência.

Por último, clique no botão Atualizar ou, se você adicionou a nova postagem ou página e clique no botão Publicar.

2. Use CSS

Abra o editor do WordPress Block e selecione o bloco de imagem onde deseja adicionar texto. Na barra lateral direita, clique na Avançado .

No de classe CSS adicional , adicione uma classe personalizada para o bloco de imagens.

Salve as alterações e publique ou atualize a página ou postagem.

.Custom-Class {Position: relativo; } .Custom-Class P {Posição: Absolute; TOP: 50%; Esquerda: 50%; Transformar: traduzir (-50%, -50%); Size da fonte: 24px; Cor: #ffffff; Shadow de texto: 2px 2px 2px #000000; } 

No código acima, substitua " classe personalizada " pela classe personalizada adicionada ao bloco de imagens. Você também pode personalizar o tamanho da fonte, a cor e outras opções de estilo para corresponder às suas preferências.

3. Use o plugin do WordPress

Se você deseja a liberdade de criar designs de página completamente personalizados, precisará de um plug -in de construtor de páginas. Um dos plugins do WordPress Page Builder é o SEEDPROD, que permite adicionar texto sobre qualquer imagem em todo o seu site.

Primeiro, instale e ative o plug -in SEEDPROD. Após a ativação, você precisará inserir uma chave de licença. Faça login na sua conta do SEEDPROD e clique na Download .

Depois de concluído, copie a chave na da licença .

Agora você pode colar essa chave na sua área de administrador do WordPress indo para a página Configurações do SeedProd » .

Quando estiver aqui, vá em frente e cole sua chave no campo da chave da licença. Em seguida, basta clicar na tecla Verificar .

Em seguida, indo para o SeedProd »Páginas de destino e clique em Adicionar nova página de destino .

Depois disso, escolha um modelo. Independentemente do modelo do SEEDPROD que você escolher, você pode personalizar todas as partes do modelo para se adequar perfeitamente ao seu site e à marca.

No entanto, se você preferir começar com uma tela em branco, clique no modelo em branco .

Depois de encontrar um modelo, passe o mouse sobre ele. Você pode clicar no ícone de visualização .

Se você estiver feliz com a aparência deste modelo, vá em frente e clique no botão Escolha este modelo .

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

Se você deseja alterar o URL criado automaticamente, edite o texto no URL da página .

Clique no Salvar e iniciar a edição do botão da página. Isso abrirá o modelo no editor de arrastar e soltar da SeedProd.

Na barra lateral esquerda, você verá todos os blocos e seções que você pode adicionar à sua página usando arrastar e soltar.

A menos que você esteja usando o modelo em branco, sua página do SEEDPROD já terá alguns blocos e seções. Para editar qualquer um desse conteúdo, clique para selecionar o bloco ou seção .

O menu esquerdo do SeedProd agora mostrará todas as configurações que você pode usar para personalizar este bloco ou seção.

A maneira mais fácil de adicionar texto sobre uma imagem é usando uma das seções de heróis prontas da SeedProd.

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

Clique na guia Seção no menu esquerdo.

Em seguida, clique em Hero para ver todas as seções de heróis prontas que você pode adicionar à sua página.

Para prosseguir e adicionar esta seção de heróis ao seu design, basta clicar em escolher esta seção.

Clique na imagem do estoque para selecioná -la se você deseja substituir o estoque do modelo pela sua própria imagem.

de imagem em segundo plano em que um ícone lata de lixo apareça. Você pode seguir em frente e clicar neste ícone para excluir a imagem do espaço reservado.

Em seguida, clique em usar sua própria imagem . Você pode escolher uma imagem na biblioteca de mídia do WordPress ou usar uma imagem de estoque.

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

Clique para selecionar o bloco de texto . Então, na área de texto , basta digitar o texto que você deseja usar.

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

Se você deseja alterar esse conteúdo, clique para selecionar o bloco e faça suas alterações no menu esquerdo da SeedProd.

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

Para fazer isso, clique para selecionar o bloco e clique no ícone do lixo .

Se você estiver satisfeito com o design da sua página, clique no botão Salvar .

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

Conclusão

São todos os três métodos para adicionar texto sobre uma imagem no WordPress. Fácil, certo? Escolha a abordagem que melhor se ajusta ao seu nível de habilidade e preferências de design.

Além disso, organize, otimize e gerencie seus arquivos de mídia como um profissional com WP Media Folder . É a hora certa de dizer adeus às bibliotecas confusas!