Skip to content

Como adicionar bordas ao redor de imagens com CSS no WordPress (exemplo)

16 de abril de 2021

Então vamos ver como adicionar bordas ao redor de imagens com CSS no WordPress de uma forma bastante simples e, sobretudo, em poucos passos.

Faça o efeito de zoom nas imagens ou adicione As bordas podem ser bastante elegantes dependendo do design do blog e do motivo pelo qual precisamos delas. Quer destacar uma imagem específica? Seja qual for o motivo, colocar duas imagens juntas e adicionar bordas a uma imagem no WordPress é, na verdade, um processo muito simples que pode ser executado em poucas etapas.

Para isso vamos precisar de um plugin, pois facilita consideravelmente a nossa vida. Mais do que tudo para aquelas pessoas que não sabem muito sobre CCS e querem algo mais rápido. Este plugin tem a possibilidade de adicione bordas CCS às imagens que você escolher ou diretamente a todas as que você carregou em seu blog.

Este tutorial está dividido em duas partes, é bastante fácil de realizar e em muito pouco tempo você poderá criar uma galeria de imagens ou adicionar bordas personalizadas a todas as fotos que você carregar no seu blog sem nenhum tipo de problema. Também possui outra opção para que você possa adicionar automaticamente bordas a todas as imagens que você carrega e que você carregou anteriormente no blog.

Como adicionar bordas a uma imagem no WordPress

  • A primeira coisa que você precisa é baixe e ative o plugin Wp Image Borders que você pode fazer no mesmo painel do WordPress.
  • Este plugin será bastante útil para adicionar bordas a todas as imagens que você enviar no WordPress.
  • A primeira opção que encontramos quando vamos Configurações> Bordas da imagem WP. Isso nos permitirá selecionar a opção “Adicionar bordas a todas as imagens nas postagens do blog”. Isso serve precisamente para que todas as imagens do seu blog tenham bordas.
  • No caso de você querer apenas alguns com bordas, então o que você deve fazer é adicionar um CCS específico para eles. Desta forma, poderemos chamar “bordas-img“Para o referido CCS, por exemplo.
  • Você também pode adicionar sombras às bordas das imagens que carrega no WordPress. Da mesma forma, a opção mais simples e acima de tudo automática é justamente selecionar a primeira opção para adicionar bordas a todas as imagens que você tem no seu blog.
  • No entanto, uma vez você configurou o CCS específico neste pluginVamos ver como adicioná-lo separadamente a cada uma das fotos que você envia ao seu blog.

logotipo do wordpress

Como adicionar bordas a uma imagem com CSS no WordPress

  • Para adicionar bordas ao redor de uma imagem com CSS, o que devemos fazer é dizer ao WordPress que a imagem deve ter bordas.
  • Para isso, teremos que fazer o upload da imagem em questão e adicioná-la ao post como normalmente faríamos.
  • Depois disso através do editor visual, teremos que clicar na imagem e depois apertar o botão “Edição”Isso podemos ver no pequeno menu que aparece cada vez que clicamos na imagem em questão.
  • O que isso significa é que se abre uma janela onde podemos ver os detalhes da imagem e editá-la como quisermos.
  • Aqui teremos que clicar em “Opções Avançadas” para que apareçam mais opções.
  • Depois disso, teremos que entrar na classe CSS da imagem em questão.
  • Aqui você terá que adicionar “Classe CSS de imagemEdges-img e voila.

Como você pode ver, é extremamente fácil aprender rapidamente como adicionar bordas ao redor de imagens com CSS no WordPress. Porém, se ainda tiver alguma dúvida, lembre-se que, como sempre, estamos totalmente dispostos a ajudá-lo em tudo que você precisar. E você também pode entrar em seu site oficial para conferir os planos que traz para você.