Como Adicionar uma Borda ao Redor de uma Imagem no WordPress (3 Métodos Fáceis)

Você já sentiu que suas imagens simplesmente desaparecem no fundo do seu site WordPress? Você escolhe ótimos visuais, mas assim que eles estão na página, ficam sem graça, como se mal estivessem ali.

Isso acontece muito, especialmente em layouts limpos e brancos. E pode fazer com que seu conteúdo pareça menos envolvente, mesmo quando todo o resto parece polido.

É aqui que adicionar uma borda simples pode fazer uma grande diferença.

Na WPBeginner, gostamos de adicionar bordas limpas ao redor de nossas capturas de tela para ajudá-las a se destacar e melhorar a aparência geral de nossas páginas. É um de nossos truques favoritos para um melhor engajamento, um design mais equilibrado e uma sensação mais profissional.

Neste guia, mostraremos três maneiras fáceis de adicionar uma borda ao redor de uma imagem no WordPress. Ao final, você saberá como fazer suas imagens se destacarem e manter os visitantes interessados em seu conteúdo. 🙌

Por que adicionar uma borda ao redor de uma imagem no WordPress?

Uma borda ajuda suas imagens a se destacarem do restante do seu conteúdo, especialmente em páginas com fundos claros ou agitados. Ela cria um limite visual claro que torna suas imagens mais fáceis de ver e com maior probabilidade de chamar a atenção.

Imagens são ferramentas poderosas de comunicação. Elas podem compartilhar informações rapidamente e tornar páginas com muito texto mais atraentes.

No entanto, às vezes as imagens podem se misturar ao fundo do site. Isso é mais provável se você usar uma imagem de fundo ou se as cores do seu site forem semelhantes às das suas imagens.

Pessoas com deficiências visuais ou daltonismo também podem achar desafiador distinguir imagens do fundo. Se você quiser saber mais, temos um guia sobre como melhorar a acessibilidade de sites WordPress.

Adicionar uma borda ao redor de uma imagem no WordPress distingue claramente a imagem do fundo do seu site. É também uma ótima maneira de chamar a atenção para seus visuais mais importantes.

Com isso em mente, vamos guiá-lo por como você pode adicionar uma borda ao redor de uma imagem em seu blog WordPress.

Aqui está uma visão geral rápida de todos os métodos que abordaremos neste artigo:

• Método 1: Usando Classes CSS Personalizadas para Adicionar uma Borda ao Redor de uma Imagem no WordPress
• Método 2: Usando um Page Builder para Adicionar uma Borda ao Redor de uma Imagem no WordPress
• Método 3: Usando HTML e CSS para Adicionar uma Borda ao Redor de uma Imagem no WordPress
• Dica Bônus: Usando uma Ferramenta de Design Gráfico para Adicionar uma Borda ao Redor de uma Imagem
• Perguntas Frequentes: Adicionando uma Borda ao Redor de uma Imagem no WordPress
• Mais Guias sobre o Uso de Imagens no WordPress

Pronto? Vamos começar.

Método 1: Usando Classes CSS Personalizadas para Adicionar uma Borda ao Redor de uma Imagem no WordPress

Criar uma classe CSS personalizada é uma maneira inteligente e fácil de adicionar bordas às suas imagens. Uma classe CSS é um bloco reutilizável de código que permite aplicar a mesma estilização, como bordas, cores ou espaçamento, a vários elementos em seu site.

Portanto, em vez de editar cada imagem uma por uma, você pode definir suas configurações de borda em um lugar e aplicá-las onde precisar com apenas alguns cliques. Isso é perfeito se você planeja adicionar bordas a várias imagens em todo o seu site.

Existem algumas maneiras de criar uma classe CSS personalizada. Você pode usar o personalizador de tema, o Editor de Site Completo ou o plugin WPCode.

Sempre recomendamos o uso do plugin WPCode porque ele é fácil para iniciantes e independente de tema. Isso significa que seu CSS personalizado continuará funcionando mesmo se você mudar para um tema diferente.

Em todas as nossas marcas parceiras, usamos o WPCode para adicionar e gerenciar trechos de código personalizados. Para saber mais sobre ele, veja nossa análise detalhada do WPCode.

Então, vamos instalar e ativar o plugin WPCode. Se precisar de ajuda, você pode consultar nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você desejará navegar para Snippets de Código » + Adicionar Snippet.

Em seguida, você pode passar o mouse sobre a opção ‘Adicionar seu código personalizado (Novo Snippet)’ e clicar em ‘Usar snippet’.

Na próxima tela, o WPCode pedirá que você escolha um tipo de código.

Você pode notar que as configurações padrão do WPCode apontam para ‘Snippet PHP’, mas aqui você precisará clicar em ‘Snippet CSS’.

Isso abrirá o editor do WPCode. A partir daqui, você pode primeiro criar um nome para o snippet personalizado. Por exemplo, usamos ‘border-black’.

Observe que, ao criar sua classe CSS, você precisará especificar a cor e a largura da borda.

Por exemplo, você pode definir pixels (px) para a largura e um código de cor hexadecimal para a cor.

No trecho de código a seguir, estamos criando uma borda preta com 5 pixels de largura:

.border-black {
    border: #000 solid 5px;
}

No código de exemplo acima, border-black é o nome da classe CSS (o mesmo que nosso snippet de código personalizado no WPCode, facilitando a organização).

Você pode usar qualquer nome que desejar, mas precisará digitar o nome da classe CSS toda vez que quiser criar uma borda. Com isso em mente, você desejará criar um nome de classe CSS que seja curto e fácil de lembrar.

Agora, tudo o que você precisa fazer é copiar esse trecho de código para o campo ‘Visualização do Código’ do WPCode, assim:

Depois disso, você pode alternar o controle para ativar o snippet e clicar no botão ‘Salvar Snippet’ ou ‘Atualizar’. Para instruções detalhadas, você pode ver nosso guia sobre adicionar CSS personalizado ao WordPress.

Você pode adicionar quantas classes CSS desejar. Por exemplo, você pode criar bordas com cores diferentes.

Agora, adicionar uma borda a uma imagem é bem simples.

Para começar, clique na imagem na sua página ou post do WordPress. Em seguida, procure a aba ‘Bloco’ no lado direito da sua tela e localize a opção ‘Avançado’ lá.

Clique nela para expandir a seção.

No campo ‘CLASSE(S) CSS ADICIONAL(IS)’, você pode digitar o nome da classe CSS que deseja adicionar à imagem.

Observe que, como você pode ver na imagem a seguir, a borda não aparecerá no editor de conteúdo do WordPress.

Para ver como a borda ficará para seus visitantes, clique no botão ‘Visualizar’.

Agora você verá sua imagem com a borda aplicada.

Se você estiver satisfeito com a aparência da borda, basta publicar ou atualizar a página.

Método 2: Usando um Page Builder para Adicionar uma Borda ao Redor de uma Imagem no WordPress

Outro método é usar um plugin de construtor de páginas.

Construtores de páginas de arrastar e soltar permitem que você crie e personalize facilmente páginas da web, como páginas de login e landing pages. Você pode adicionar texto, imagens e outros elementos sem precisar de nenhuma habilidade de codificação.

Essas ferramentas também permitem que você crie facilmente bordas exclusivas para cada imagem. Você pode projetá-las usando um editor visual, o que é mais fácil para muitas pessoas.

Recomendamos SeedProd, que é o melhor construtor de landing pages para WordPress. É fácil de usar e permite criar páginas com aparência profissional facilmente.

Sinta-se à vontade para conferir nossa análise completa do SeedProd para ver por que recomendamos esta ferramenta.

O SeedProd tem um bloco de Imagem especial com opções de borda integradas. Você também pode adicionar sombras e ajustar o espaçamento facilmente.

Primeiro, você precisará instalar e ativar o plugin. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin WordPress.

Após a ativação, vamos para SeedProd » Landing Pages no seu painel do WordPress.

O SeedProd vem com centenas de modelos projetados profissionalmente, que são agrupados em categorias. Na parte superior da tela, você verá categorias que pode usar para:

• Criar uma página 404.
• Criar uma página de login personalizada.
• Criar uma bela página de 'em breve'.
• E muito mais.

Para dar uma olhada em um design, basta passar o mouse sobre um modelo e clicar no ícone de lupa quando ele aparecer.

Isso mostrará uma prévia do modelo.

Se você estiver satisfeito com a aparência do modelo, clique em 'Escolher Este Modelo'.

No campo 'Nome da Página', digite um nome para a página. Por padrão, o SeedProd usará este nome como o URL da página.

Se você quiser alterar este URL criado automaticamente, basta editar o texto no campo 'URL da Página'.

Depois de inserir as informações, você pode clicar no botão 'Salvar e Começar a Editar a Página'. Isso abrirá o modelo escolhido no editor de arrastar e soltar do SeedProd.

No menu à esquerda, você verá todos os blocos que pode adicionar à sua página do WordPress usando arrastar e soltar.

Simplesmente encontre o bloco ‘Imagem’ e arraste-o para o design da sua página.

Depois de fazer isso, basta clicar no bloco ‘Imagem’ para ver todas as configurações que você pode usar para personalizar o bloco.

No menu à esquerda, você desejará clicar em ‘Usar sua própria imagem’.

Agora você pode escolher qualquer imagem da biblioteca de mídia do WordPress.

Depois disso, clique na aba ‘Avançado’ no menu à esquerda.

Em seguida, clique para expandir a seção ‘Borda da Imagem’.

Por padrão, todas as configurações de Largura da Borda do SeedProd são 0, o que significa que a imagem não tem borda.

A primeira coisa que você desejará fazer é aumentar esses valores para 1 ou mais. Isso adicionará uma borda visível à imagem.

Para começar, clique em cada um dos campos de ‘Largura da Borda’ e, em seguida, digite um número maior ou use os botões de seta que aparecem.

Quando estiver satisfeito com a espessura da borda, você pode começar a estilizar.

Uma opção é alterar a cor da borda clicando no campo ao lado de ‘Cor da Borda’. Isso abrirá um pop-up onde você pode escolher uma nova cor de borda.

O SeedProd oferece três estilos de borda simples: sólida, pontilhada e tracejada. Você pode escolher o que melhor se adapta à sua imagem.

Para experimentar esses diferentes estilos de borda, basta abrir o menu suspenso ‘Estilo da Borda’ e, em seguida, escolher uma opção na lista.

Aí está!

E se você quiser adicionar uma borda a outras imagens, basta seguir o mesmo processo descrito acima.

Assim que estiver satisfeito com o design da sua página, você pode clicar no botão ‘Salvar’ e, em seguida, escolher ‘Publicar’ para torná-la ativa.

Método 3: Usando HTML e CSS para Adicionar uma Borda ao Redor de uma Imagem no WordPress

Você também pode adicionar bordas usando HTML e CSS. Este método não requer um plugin, o que pode ser útil.

No entanto, personalizar a aparência da borda significa escrever algum código, então pode não ser a melhor opção para iniciantes. Se você se sente confortável com um pouco de codificação, este método oferece grande flexibilidade.

Para começar, vamos adicionar uma imagem a qualquer página ou postagem.

Depois de fazer isso, você pode clicar no ícone de três pontos no canto superior direito e, em seguida, clicar em 'Editor de código'.

O WordPress agora mostrará todo o código que compõe a página ou postagem.

Agora você pode encontrar a seção de código que adiciona a imagem à sua página. Este código começará com wp:image .

Se a página tiver várias imagens, verifique o valor img src=. Esta é a URL da imagem em sua biblioteca de mídia do WordPress e será diferente para cada imagem.

Depois de encontrar a seção de código correta, o próximo passo é escrever uma linha de código que adiciona a borda e controla como ela é estilizada.

Por exemplo, no seguinte trecho de código, a borda tem uma largura de 3 pixels. Também estamos adicionando 3 pixels de preenchimento e margem:

style="border:3px solid #000000; padding:3px; margin:3px;" />

No trecho de código acima, solid #000000 define a cor da borda. O valor #000000 é o código hexadecimal para a cor preta.

E se você *não* quiser criar uma borda preta, pode substituir o valor por qualquer outro código hexadecimal.

Depois de decidir sobre o código da borda, você precisará encontrar a seção /></figure> e adicionar seu código diretamente antes do primeiro caractere /.

Vamos ver um exemplo:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Quando estiver satisfeito com seu código, saia do editor de código clicando em ‘Sair do editor de código’.

Agora você deve ver uma borda ao redor da sua imagem. Não se preocupe se receber um aviso sobre HTML inválido. Isso é normal e não afetará como sua imagem é exibida.

Se você estiver satisfeito com a aparência, pode prosseguir e atualizar ou publicar sua página normalmente.

Agora, se você visitar seu site WordPress, verá uma borda ao redor da sua imagem.

Dica Bônus: Usando uma Ferramenta de Design Gráfico para Adicionar uma Borda ao Redor de uma Imagem

Embora o WordPress ofereça vários métodos para adicionar bordas, essas opções às vezes podem ser limitadas em estilo e personalização. Então, por que não editar sua imagem primeiro e depois carregá-la no WordPress?

É aqui que as ferramentas de design gráfico são úteis.

Adobe Photoshop é o grande nome aqui, com toneladas de recursos sofisticados para os profissionais. Se você não quer gastar muito, então Affinity Photo é uma ótima opção – ele tem recursos semelhantes, mas você paga apenas uma vez.

Para uma experiência mais amigável e baseada em navegador, Canva é uma ferramenta excelente. Nossa equipe a usa regularmente para criar imagens de destaque e gráficos de mídia social rapidamente.

E se você estiver de olho no seu orçamento, GIMP (GNU Image Manipulation Program) pode ser sua escolha. É totalmente gratuito, de código aberto e pode fazer muito do que as ferramentas pagas fazem.

O GIMP também é uma ótima opção para iniciantes e usuários experientes. Você pode usá-lo em Mac e Windows.

Para este tutorial, demonstraremos como adicionar uma borda a uma imagem usando o GIMP.

Após a instalação, você desejará abrir o aplicativo desktop do GIMP. Em seguida, você pode clicar em Arquivo » Abrir e escolher uma imagem para editar em seu disco local. Ou, você pode arrastar e soltar uma no editor do GIMP.

Assim que a imagem for carregada no editor do GIMP, vamos desenhar uma borda ao redor da imagem usando a ‘Ferramenta de Seleção de Retângulo’. Você pode encontrar esta ferramenta na barra de ferramentas no canto superior esquerdo.

Em seguida, você pode querer verificar as configurações de cor de primeiro plano e de plano de fundo.

Isso ocorre porque o GIMP usa a cor de primeiro plano para traçar as linhas. Portanto, se você precisar usar uma cor específica para sua borda, pode clicar na cor de primeiro plano para ajustá-la.

Isso abrirá o seletor de cores, onde você pode mover o mouse sobre a área de seleção de cores ou inserir o código hexadecimal da cor.

Depois de fazer isso, você pode clicar em ‘OK’.

Agora que você definiu a cor da borda, é hora de aplicá-la. Você pode navegar até Editar » Seleção de Traço, e isso abrirá o pop-up ‘Seleção de Traço’.

Aqui, você pode ajustar o estilo do traço, a largura da linha e muito mais. Por exemplo, definimos nossa largura de linha para 5 px.

Depois de fazer isso, prossiga e clique em ‘Traço’, e a borda deverá ser adicionada à sua imagem.

Antes de fazer o upload para o WordPress, você pode querer otimizar a imagem para manter excelente velocidade e desempenho do site. Imagens brutas geralmente são grandes, então esta etapa pode ser uma grande ajuda.

No GIMP, você pode otimizar sua imagem redimensionando-a.

Para começar, você precisará navegar até Imagem » Escalar Imagem. Isso abrirá o pop-up ‘Escalar Imagem’, onde você pode ajustar o ‘Tamanho da Imagem’ assim:

Após ajustar o tamanho da imagem, você pode clicar no botão ‘Escalar’.

O GIMP redimensionará a imagem e exibirá a nova versão no editor.

Concluído, você pode salvar a imagem indo para Arquivo » Exportar Como.

Em seguida, você pode seguir as instruções para escolher um local, nomear o arquivo e definir o formato da imagem. Quando tudo estiver definido, prossiga e clique em ‘Exportar’.

Agora, você pode fazer o upload da sua imagem para sua postagem ou página do WordPress. Veja como isso pode parecer no editor de blocos:

Pronto – você aprendeu a adicionar uma borda em volta de uma imagem usando uma ferramenta de design gráfico!

Você pode usar este método sempre que quiser fazer o upload de uma imagem para o WordPress.

Perguntas Frequentes: Adicionando uma Borda ao Redor de uma Imagem no WordPress

Ainda tem dúvidas sobre como estilizar suas imagens? Aqui estão algumas FAQs comuns para ajudá-lo a solucionar problemas, personalizar e aproveitar ao máximo a adição de bordas no WordPress.

Posso adicionar a mesma borda a todas as imagens do meu site de uma vez?

Sim, você pode fazer isso com CSS personalizado, aplicando estilos à tag img principal. No entanto, isso também pode afetar elementos como logotipos, ícones ou imagens em widgets.

Para um melhor controle, recomendamos criar uma classe CSS (como no Método 1) e aplicá-la apenas às imagens onde você deseja a borda.

Como posso criar cantos arredondados para a borda da minha imagem?

Você pode facilmente criar cantos arredondados usando a propriedade CSS border-radius. Basta adicionar uma linha border-radius: 15px; ao seu trecho de CSS personalizado. Quanto maior o valor em pixels, mais arredondados serão os cantos.

Posso remover uma borda que meu tema do WordPress adiciona automaticamente?

Sim. Para substituir isso, você pode criar uma classe CSS personalizada – por exemplo, .no-border com border: none !important;. Você pode então aplicá-la a imagens específicas usando o campo ‘Classes CSS Adicionais’ nas configurações do bloco ou da imagem.

Adicionar uma borda CSS deixará meu site mais lento?

Não, uma borda CSS simples é apenas uma linha de código e não tem impacto perceptível na velocidade de carregamento da sua página. O tamanho do arquivo da própria imagem é o que afeta o desempenho, portanto, sempre certifique-se de otimizar suas imagens para a web.

Mais Guias sobre o Uso de Imagens no WordPress

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma borda em torno de uma imagem no WordPress.

Se você achou isso útil, então você também pode conferir nossos guias sobre:

• Como Adicionar Imagens Corretamente no WordPress
• Como Fazer Edição Básica de Imagens no WordPress
• Como redimensionar e aumentar imagens sem perder qualidade
• Como Criar Tamanhos de Imagem Adicionais no WordPress
• Como Carregar Imagens Lentamente (Lazy Load) Facilmente no WordPress
• Texto Alternativo da Imagem vs Título da Imagem no WordPress
• Como Adicionar uma Imagem de Destaque no WordPress (Funciona para Todos os Temas)
• Melhores Plugins e Ferramentas de Imagem Destacada para WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.