Como Adicionar Texto em Cima de uma Imagem no WordPress (3 Métodos)
Adicionar texto sobre uma imagem é uma técnica popular para melhorar o apelo visual do seu 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ê preferir usar o Block Editor, um plugin ou código personalizado. Vamos descobrir!
Índice de conteúdo
Por que é importante adicionar o texto no topo das imagens
Antes de avançar para os métodos, você precisa saber o motivo pelo qual adicionar texto sobre as imagens é importante.
1. Chamar a Atenção
Se os usuários estiverem rolando rapidamente o conteúdo, adicionar imagens por si só pode não ser suficiente para chamar a atenção deles. É por isso que você precisa adicionar texto sobre a imagem para ajudar a capturar a atenção dos usuários e transmitir sua mensagem de forma mais eficaz.
2. Melhore a Experiência do Usuário
É verdade que as imagens podem fornecer muito valor por conta própria, no entanto, adicionar texto sobre elas, 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 possam 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 o SEO
Adicionar palavras-chave relevantes às legendas das suas imagens ou ao texto alternativo pode ajudar a melhorar o posicionamento do seu site nos mecanismos de busca. Isso porque os mecanismos de busca usam essas informações para entender o conteúdo do seu site e determinar o quão relevante ele é para as pesquisas dos usuários.
Diga adeus à biblioteca de mídia desorganizada.
WP Media Folder permite categorizar arquivos, sincronizar pastas com armazenamento em nuvem, criar galerias incríveis e até substituir imagens sem quebrar links.
Otimize seu fluxo de trabalho de mídia hoje
3 Métodos Como Adicionar Texto Sobre uma Imagem no WordPress
1. Use o Editor de Blocos do WordPress
Primeiro, vá para a página ou postagem na qual você vai adicionar o texto sobre a imagem.
Escolha Capa para escrever o texto sobre a imagem.
Depois disso, ele começará a aparecer na sua tela. Ele mostra a imagem padrão, mas você pode alterar a imagem como desejar.
Você também pode substituir a imagem padrão pela sua imagem personalizada. Clique no botão de substituir e, em seguida, faça o upload da 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ê obterá a opção de edição do texto. Você pode ajustar o tamanho, cor e muito mais de acordo com sua necessidade.
Por fim, clique no botão de atualizar, ou se você adicionou a nova postagem ou página, clique no botão de publicar.
2. Usar CSS
Abra o Editor de Blocos do WordPress e selecione o bloco de imagem onde você deseja adicionar texto. Na barra lateral direita, clique na Avançado guia.
No campo Classe CSS Adicional , adicione uma classe personalizada para o bloco de imagem.
Salvar as alterações e publicar ou atualizar a página ou postagem.
.custom-class { posição: relativa; } .custom-class p { posição: absoluta; topo: 50%; esquerda: 50%; transformar: traduzir(-50%, -50%); tamanho-da-fonte: 24px; cor: #ffffff; sombra-de-texto: 2px 2px 2px #000000; }
No código acima, substitua "custom-class" pela classe personalizada que você adicionou ao bloco de imagem. 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 WordPress
Se você deseja ter a liberdade de criar designs de página totalmente personalizados, precisará de um plugin de criação de páginas. Um dos plugins de criação de páginas para WordPress é o SeedProd, que permite adicionar texto sobre qualquer imagem em todo o seu site.
Primeiro, instale e ative o plugin SeedProd. Após a ativação, você precisará inserir uma chave de licença. Faça login na sua conta SeedProd e clique na "Download" aba
Feito isso, copie a chave na de licença" .
Agora você pode colar essa chave na sua área administrativa do WordPress acessando a página SeedProd » Configurações.
Lá, cole a chave no campo Chave de licença. Em seguida, basta clicar em Verificar chave.
Em seguida, acesse SeedProd » Páginas de destino e clique em Adicionar nova página de destino.
Depois disso, escolha um modelo. Independentemente do modelo SeedProd que você escolher, você pode personalizar cada parte 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 cursor do mouse sobre ele. Em seguida, clique no ícone de visualização.
Se você gostou da aparência deste modelo, clique no botão Escolher este modelo.
No campo Nome da Página , digite um nome para a página.
Se você quiser alterar a URL criada automaticamente, edite o texto no campo URL da Página .
Clique no 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 você esteja usando o Modelo em Branco, sua página do SeedProd já terá alguns blocos e seções. Para editar qualquer conteúdo, clique para selecionar o bloco ou a seção.
O menu à esquerda do SeedProd exibirá todas as configurações que você pode usar para personalizar esse bloco ou seção.
A maneira mais fácil de adicionar texto sobre uma imagem é usando uma das seções Hero prontas do SeedProd.
Essas seções possuem uma imagem de fundo de espaço reservado, em tela cheia, com um texto de espaço reservado adicionado por cima. Você pode simplesmente substituir a imagem de fundo e o texto padrão pelo seu próprio conteúdo.
Clique na aba "Seção" no menu à esquerda.
Em seguida, clique em "Hero" para ver todas as seções Hero prontas que você pode adicionar à sua página.
Para prosseguir e adicionar esta seção hero ao seu design, basta clicar em Escolher Esta Seção.
Clique na imagem de estoque para selecioná-la, caso queira substituir a imagem de estoque do modelo pela sua própria imagem.
Passe o cursor sobre da imagem de fundo até que um ícone de lixeira apareça. Clique nesse ícone para excluir a imagem de espaço reservado.
Em seguida, clique em " Usar sua própria imagem". Você pode escolher uma imagem da biblioteca de mídia do WordPress ou usar uma imagem de banco de imagens.
Depois de adicionar uma imagem, você está pronto para substituir o texto de exemplo.
Clique para selecionar o bloco de texto. Em seguida, na área de texto, basta digitar o texto que deseja usar.
Alguns dos modelos de destaque do SeedProd possuem conteúdo extra, como botões de chamada para ação.
Se você deseja alterar esse conteúdo, clique para selecionar o bloco e, em seguida, faça as alterações no menu à esquerda do SeedProd.
Outra opção é excluir o bloco do modelo de herói.
Para fazer isso, clique para selecionar o bloco e, em seguida, clique no ícone da lixeira.
Se estiver satisfeito com o design da sua página, clique no botão Salvar.
A partir daí, você pode optar por publicar a página ou salvá-la como um modelo.
Chamando todos os webmasters!
Economize tempo e aumente a produtividade com WP Media Folder. Organize facilmente os arquivos de mídia do cliente, crie galerias personalizadas e forneça uma experiência de usuário perfeita.
Atualize seus projetos de site agora!
Conclusão
Essas são as três maneiras de adicionar texto sobre uma imagem no WordPress. Fácil, não é? Escolha a abordagem que melhor se adapta 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. Chegou a hora de dar adeus às bibliotecas bagunçadas!
Quando você se inscrever no blog, enviaremos um e-mail quando houver novas atualizações no site para que você não perca.

Comentários