Trabalhando com o bloco de imagens do WordPress: como adicionar imagens no WordPress [+Dica secreta]

Para muitos usuários, trabalhar com imagem pode ser realmente frustrante. Nem sempre é fácil escolher a proporção correta ou redimensionar as imagens corretamente para que fiquem bem em todo o layout.

1. Por que usar o bloco de imagem do WordPress
2. Como adicionar imagens com o bloco de imagens do WordPress
3. Processo adicional de formatação de imagens
4. Dica extra nossa dentro do artigo

Versões mais antigas do WordPress (até v5.0) adicionam imagens usando o botão +Adicionar mídia. O problema era que, mesmo com uma alteração mínima no tamanho da imagem, você precisaria carregá-la novamente. Isso significa perda de tempo e cliques redundantes.

O novo editor baseado em blocos, Gutenberg, muda a maneira de adicionar imagens ao WordPress para tornar esse processo mais simples para os usuários finais. Neste artigo, mostraremos um guia prático sobre como adicionar e editar o bloco de imagens do WordPress. Além disso, explicaremos mais uma opção de colar imagens – como copiar e colar uma imagem na área de conteúdo com apenas alguns cliques. Também apresentaremos recursos recém-adicionados que vêm do WP 5.3.

Mas primeiro vamos falar sobre por que você deve usar imagens em posts e páginas.

Por que o bloco de imagens do WordPress é obrigatório para o seu site

Atrair atenção

As imagens atraem a atenção dos visitantes do site. Eles devem ser interessantes para manter os visitantes em seu site por mais tempo. Pense em um post de blog sem imagens. É apenas um monte de texto. À primeira vista, não é muito interessante, embora possa ser valioso e cheio de informações. Além disso, as fotos podem ajudar a imaginar e descrever melhor o seu tópico.

Por esse motivo, precisamos usar o bloco de imagens do WordPress para focar a atenção em coisas importantes.

Texto ilustrativo e contexto

As imagens também são parte essencial para a compreensão do conteúdo, pois permitem que os visitantes entendam melhor do que se trata o artigo. Graças aos infográficos, você pode explicar conexões complicadas e contar as coisas de maneira simples. Ajuda os visitantes a se orientarem melhor no problema sobre o qual você está falando.

Tornar o site mais agradável

Além disso, as imagens dão toques finais a todo o design do site. Não se trata apenas do layout do site, mas também da usabilidade. A imagem escolhida e colocada corretamente pode ajudar o visitante a navegar em seu site com mais facilidade.

Como adicionar imagens no editor de blocos do WordPress

Para inserir uma imagem no Post ou na Página, você precisa adicionar o bloco principal – Bloco de imagem. Há várias maneiras de fazer isso:

– Usando “+” na barra superior ou em qualquer lugar do editor

– Usando a barra “/“ e depois escrevendo a palavra “imagem”

Novo bloco será criado onde você pode adicionar imagens reais.

Upload de imagens para o WordPress

Como colocar as imagens onde você quiser?

• Use Upload e selecione uma imagem do seu disco rígido
• Use a Biblioteca de mídia, onde você pode selecionar imagens que já foram carregadas em seu site
• Use o mouse e arraste e solte a imagem
• Inserir endereço URL da imagem

Método menos conhecido de adicionar imagens do WordPress

Além de enviar imagens através da janela de upload mencionada anteriormente, há outra maneira de inserir imagens (e é uma maneira tão rápida!). Com o editor WordPress aprimorado, você pode:

• Copie a imagem de qualquer conteúdo ou
• Basta “arrastar” a imagem com o cursor do mouse

Em seguida, insira ou mova (solte) a imagem selecionada para o local na área de conteúdo que você deseja.

A mesma técnica que você pode usar também no caso de querer colar uma imagem capturada da tela. Apenas três passos simples são necessários. Primeiro, você precisa tirar uma captura de tela usando o recurso de tela de impressão. Por exemplo, o Windows 10 fornece sua ferramenta Snippet padrão chamada Snip & Sketch, que também está disponível por meio de um atalho - basta pressionar as teclas Win + Shift + S juntas no teclado. Em seguida, selecione a área da imagem que deseja capturar. A última etapa é colar a imagem copiada (ou parte dela) na área de conteúdo usando o atalho básico Ctrl+V.

E o que aconteceu com a imagem do WordPress que você colou em seu editor? Bem, ela é adicionada automaticamente à Biblioteca de mídia, onde você pode editar esta imagem.

Opções limitadas de metadados de imagem

Na edição de imagens, você pode definir seu título, legenda, descrição e texto alternativo. Infelizmente, você não pode alterar o nome do arquivo de imagem – ele manterá seu nome gerado automaticamente, como imagem-1.png e assim por diante. Esse tipo de nome de arquivo pode ser uma pequena desvantagem em termos de otimização de SEO devido ao conflito com as recomendações de nomenclatura de arquivo. Portanto, você precisa considerar esse aspecto antes de mover as imagens do WordPress para a área de conteúdo.

Alinhamento de imagem

O alinhamento da imagem é um dos principais recursos. Não importa se você adiciona o bloco de imagem do WordPress em postagem ou página, você sempre deve considerar o posicionamento, dependendo do design do site. Com base nessa imagem, o alinhamento pode ser escolhido na barra de ferramentas acima dela. Por padrão, você pode alinhar a imagem à esquerda, à direita ou centralizá-la. Alguns temas do WordPress permitem que as imagens sejam centralizadas em largura ou largura total. Realmente depende dos recursos do tema, pois nem todos os temas o suportam.

Redimensionando imagens

O recurso revolucionário do bloco de imagem no editor do WordPress é o redimensionamento prático. Basta arrastar o lado da imagem para torná-la menor ou maior. Dessa forma, você pode ajustar o tamanho da imagem dependendo do texto no conteúdo. O Editor mantém automaticamente as proporções da imagem, o que significa que você não precisa se preocupar com deformações.

Novo estilo de bloco que transforma uma imagem em forma de círculo

Se você estiver usando a versão mais recente disponível do WordPress, deve ter notado um novo estilo de recorte circular que pode ser usado para sua imagem. A forma da imagem pode ser alterada na barra de ferramentas superior, clicando no primeiro ícone “Alterar tipo ou estilo de bloco”. A forma padrão (retângulo) será cortada em forma de círculo.

Novos recursos no bloco de imagens do WordPress (adicionados no WP 5.3)

Suporte para imagens de alta resolução

Um dos maiores destaques do WP 5.3 é o processamento aprimorado de imagens na plataforma WordPress. Trabalhar com imagens tem agora duas funcionalidades principais:

1. Continuando o upload – Se você estiver enviando fotos em alta resolução e a conexão com a Internet falhar, o processo de upload continuará automaticamente a partir do ponto interrompido
2. Rotação automática de imagem - a versão mais recente do WP lançada garante que as imagens giradas incorretamente girem automaticamente para a posição correta à medida que são carregadas

Configurações no Inspetor

Para configurar as dimensões exatas, você pode usar o Inspetor na barra lateral direita do editor. As configurações de tamanho da imagem oferecem formatos prontos para uso, como miniatura, tamanho médio, grande ou completo. Você pode definir a largura e a altura em pixels ou porcentagens, é claro.

É muito rápido e prático porque você pode fazer todas as alterações de redimensionamento de imagem dentro do bloco de imagens do WordPress e tudo em um só lugar no editor de blocos.

Outras configurações de bloqueio de imagens

Como adicionar endereço URL

As imagens podem ser usadas como imagens estáticas ou também podem ser clicáveis e vinculadas a:

•   Arquivo de mídia
•   Página de Anexo
•   URL personalizado

Como editar imagens no bloco de imagens do WordPress

Cada imagem pode ser editada depois de clicar no ícone de lápis. A janela modal com a Biblioteca de mídia será aberta, onde você poderá escrever texto alternativo, título, legenda e descrição. Da mesma forma que você já está acostumado a fazer na versão mais antiga do WordPress com editor clássico.

Por que é importante ter esses textos preenchidos?

Se os visitantes clicarem na imagem para vê-la maior, eles verão o título da imagem (por exemplo, página inicial Citadela) e não o nome do arquivo da imagem. Além disso, se houver algum problema com o carregamento da imagem, um texto alternativo será exibido em seu site.

dicas extras

Além de todos esses motivos e configurações para os blocos de imagens do WordPress, há o mais importante. Você pode ganhar mais visitantes em seu site usando imagens. Então, como obtê-los?

Hoje em dia as pessoas têm preguiça de ler. Eles preferem rolar as imagens para encontrar respostas. Como suas fotos e imagens podem classificar? Textos é a resposta. Muito importante para a otimização de SEO é o título e a descrição da imagem perfeita. Não se esqueça de preencher o texto alternativo. Então o Google pode entender melhor a imagem. Assim, você teria uma chance maior de classificá-lo nos resultados da pesquisa de imagens.

2 maneiras de adicionar legenda de imagem

Adicionar legenda de imagem é muito fácil usando o editor de blocos. Logo abaixo da imagem há um espaço para escrever o texto. Esta é a primeira maneira - a legenda é gravada nesta imagem exata em determinada subpágina.

A segunda maneira é escrever a legenda da imagem usando o ícone de lápis (Editar imagem) na Biblioteca de mídia. Dessa forma, você adiciona legendas de imagem globalmente em todo o site. Isso significa que se você usar a mesma imagem em três locais diferentes, ela sempre usará essa legenda.

Você gosta de como é fácil adicionar imagens no bloco de imagens do WordPress? Experimente você mesmo!

Saiba mais sobre o nosso novo tema WordPress Citadela e seus pacotes de layout personalizados. Eles foram especialmente projetados e desenvolvidos para diferentes tipos de negócios e também suportam a nova maneira de editar conteúdo através do editor de blocos do WordPress.