Você gostaria de adicionar contornos em uma imagem de site WordPress? Recentemente, um de nossos assinantes nos perguntou qual é a maneira mais fácil de adicionar bordas no WordPress.

Embora seja verdade que o método mais fácil é usar código CSS, esse método nem sempre está ao alcance de iniciantes.

Neste tutorial, mostrarei como adicionar bordas de imagem ao seu blog WordPress sem tocar em uma única linha de código.

Primeiro método: Usando um plugin

Este método é mais adequado para iniciantes que não desejam usar código HTML / CSS. A primeira coisa a fazer é instalar e ativar o plugin WP Border Imagem disponível em WordPress.org.

Agora tudo que você precisa fazer é acessar o " configurações> WP Image Borders » para exibir as configurações do plugin.

A primeira seção do plugin permite que você direcione imagens. Você pode adicionar bordas a todas as imagens em seus blogs do WordPress clicando na caixa de seleção clicando no botão " adicionar bordas para todas as imagens em posts"

Como alternativa, você pode especificar classes para adicionar bordas a certas imagens, especificando-as no " Adicionar classes específicas aqui"

A segunda opção permite personalizar as bordas das imagens. Você pode escolher o estilo das bordas, sua largura, sua redondeza e sua cor.

A última seção desta página permite que você adicione uma sombra às bordas. É possível definir a posição da sombra e sua intensidade. Se não quiser adicionar essa opção, você pode deixar esses campos em branco.

Lembre-se de salvar suas configurações quando terminar.

Se você optou por exibir bordas em todas as imagens postadas, seu blog, você notará as alterações em todas as imagens dos seus artigos.

Como adicionar uma aula sobre imagens para WordPress

Se você deseja adicionar bordas às imagens selecionadas, deve sempre informar ao WordPress que são as imagens que você selecionou e, para isso, é essencial adicionar classes às imagens.

Quando você está no editor de texto do WordPress, clicando em uma das imagens, você notará uma dica de ferramenta que oferece opções adicionais. Clique no ícone de edição para adicionar uma classe personalizada à imagem em questão.

imagem

Ao clicar nele, uma nova janela aparecerá. É nesta janela que você pode adicionar uma classe personalizada.

imagem

Você terá que clicar na caixa dobrável « opções avançadas", Que exibirá duas caixas de texto adicionais. Está na caixa " Classe CSS da imagem Que você pode adicionar uma classe de imagem.

Segundo método: usando código HTML e CSS

Adicionar bordas a imagens usando HTML e CSS é um método rápido. Existem várias maneiras de atingir seus objetivos, vou lhe mostrar cada método e você vai escolher o que mais lhe convier.

Como adicionar bordas em uma linha em WordPress

Depois de enviar uma imagem para a biblioteca de mídia, você deve alternar para o modo editor de texto. Você notará o código HTML correspondente à sua imagem. Este código será semelhante ao seguinte:

código de imagem

Então você só precisa adicionar um código CSS na mesma linha da imagem. Este código será semelhante ao seguinte:

picture-code-2

Você notará que um atributo " estilo Foi adicionado ao código. Você pode usar as diferentes propriedades CSS para personalizar a borda (Claro que esta manobra é reservada para usuários experientes).

É isso para este tutorial, espero que ajude você a realmente adicionar bordas às suas imagens no WordPress.