Quando lançamos o WPBeginner, rapidamente percebemos o quão valiosa a barra lateral poderia ser para nos conectarmos com nossos visitantes.
Começamos a usar imagens em nossa barra lateral para torná-la mais visualmente envolvente, e os resultados foram impressionantes.
As imagens nos ajudaram a promover nossos cursos gratuitos, destacar ofertas de cupons, exibir artigos populares e guiar os leitores para diferentes tipos de artigos e kits de ferramentas.
Com apenas alguns toques visuais, a barra lateral se tornou uma das partes mais eficazes do nosso site para gerar engajamento e cliques.
Neste guia, mostraremos como adicionar facilmente imagens a widgets de barra lateral em seu site WordPress — não importa qual tema você esteja usando ou sua experiência técnica.
💡 Resposta Rápida: Como Adicionar uma Imagem à Barra Lateral do WordPress
Para a maioria dos usuários, a maneira mais rápida de adicionar uma imagem à barra lateral é usando o bloco padrão do WordPress:
- Vá para Aparência » Widgets no seu painel.
- Localize sua área de barra lateral e clique no botão Adicionar Bloco (+).
- Procure e selecione o bloco Imagem.
- Faça o upload da sua foto e clique em Atualizar para salvar as alterações.
Por que Adicionar Imagens à Sua Barra Lateral do WordPress?
Adicionar imagens à sua barra lateral do WordPress pode melhorar significativamente o apelo visual e a funcionalidade do seu site.
Imagens chamam a atenção mais rápido do que texto simples. Isso ajuda você a destacar guias importantes, promoções ou recursos de forma eficaz.
Uma barra lateral bem projetada também melhora a experiência do usuário. Isso pode resultar em visitas mais longas ao site e taxas de rejeição reduzidas.
Dito isso, vamos dar uma olhada em como adicionar facilmente imagens à sua barra lateral do WordPress.
Simplesmente clique nos links abaixo para pular para a seção de sua preferência:
- Opção 1: Usando o Bloco de Widget de Imagem do WordPress
- Opção 2: Usando um Plugin de Widget de Imagem
- Opção 3: Usando o Widget de Galeria de Imagens
- Opção 4: Adicionando Imagem na Área de Widget Clássica
- Opção 5: Usando o Bloco de Widget de HTML Personalizado
- Perguntas Frequentes Sobre Imagens e Barras Laterais no WordPress
Opção 1: Usando o Bloco de Widget de Imagem do WordPress
Observação: Este tutorial se aplica a Temas Clássicos que usam a tela padrão Aparência » Widgets. Se você estiver usando um Tema de Blocos (como o Twenty Twenty-Four), você deve ir para Aparência » Editor para modificar sua barra lateral.
Você pode usar o bloco de Imagem padrão para adicionar fotos à barra lateral do seu site.
A área de widgets agora usa o mesmo editor baseado em blocos encontrado em posts e páginas. Você pode usar blocos para adicionar formulários, posts relacionados, imagens e outros elementos facilmente.
Para começar, você precisará visitar a página Aparência » Widgets do seu painel do WordPress. Depois disso, basta clicar no botão '+' e adicionar um bloco de imagem.
Em seguida, você pode adicionar uma imagem no bloco de widget de 3 maneiras.
Por exemplo, você carrega uma imagem, escolhe uma imagem existente da sua biblioteca de mídia do WordPress ou insere a imagem de um URL.
Nas configurações do bloco, você verá opções para alterar o estilo e o tamanho da imagem.
Você também deve adicionar Texto Alternativo aqui. Isso ajuda os leitores de tela a entender a imagem e melhora seu ranking de SEO.
Quando terminar, não se esqueça de clicar no botão 'Atualizar'.
Em seguida, você pode visitar seu site e ver a imagem na barra lateral.
🔎 Quer tornar suas imagens mais interativas? Experimente adicionar hotspots às suas imagens para destacar recursos específicos dos seus visuais!
Opção 2: Usando um Plugin de Widget de Imagem
Outra forma de adicionar imagens é usando um plugin.
Você pode preferir este método se desejar uma interface legada específica ou se não se sentir confortável com o editor de blocos padrão.
Primeiro, você precisa instalar e ativar o plugin Image Widget. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, basta ir para a página Aparência » Widgets e adicionar o bloco ‘Image Widget’.
Em seguida, clique no botão ‘Selecionar Imagem’ para carregar uma imagem ou selecionar uma da biblioteca de mídia.
Depois disso, você precisa clicar no botão ‘Inserir no Widget’, e você verá a prévia da imagem nas configurações do widget.
Você pode adicionar um título ou texto alternativo, bem como um link e legenda para a imagem.
Você também pode escolher um tamanho de imagem na lista de opções disponíveis, editar o alinhamento e mais.
Quando estiver satisfeito, basta clicar no botão Atualizar para salvar o widget de imagem. É só isso. Agora você pode ir ao seu site e ver a imagem exibida na sua barra lateral.
Opção 3: Usando o Widget de Galeria de Imagens
Se você quiser exibir várias imagens, então você pode usar o widget de Galeria em vez do widget de Imagem.
Novamente, basta ir para a página Aparência » Widgets e depois clicar na opção ‘Galeria’.
A partir daqui, você pode personalizar as imagens na sua galeria. Por exemplo, você pode arredondar os cantos das imagens.
Quando estiver satisfeito com a aparência da galeria, basta clicar em ‘Atualizar’.
Se você quiser mais opções de personalização, então recomendamos o uso de um plugin de galeria de imagens como o Envira Gallery.
Ele oferece responsividade móvel, funcionalidade de lightbox e velocidade otimizada que o widget padrão não possui. Você também pode adicionar marca d'água às suas imagens para proteger seu trabalho.
Para mais informações, confira nosso guia sobre como criar uma galeria de imagens responsiva no WordPress.
Assim que você tiver o plugin instalado e configurado algumas galerias, você verá o widget 'Envira Gallery' no seu editor de widgets baseado em blocos.
Tudo o que você precisa fazer a seguir é escolher a galeria que deseja exibir.
Vá em frente e clique no menu suspenso para fazer isso.
Uma vez feito, você pode personalizar ainda mais a galeria. Por exemplo, você pode alterar o layout das colunas e ativar o modo lightbox quando uma imagem é clicada.
Quando estiver satisfeito, basta clicar em 'Atualizar'.
Opção 4: Adicionando Imagem na Área de Widget Clássica
Se você estiver usando uma versão mais antiga do WordPress ou se tiver desativado os blocos de widgets, você também poderá adicionar facilmente uma imagem à barra lateral.
Simplesmente vá para a página Aparência » Widgets no seu painel de administração do WordPress e adicione o widget 'Imagem' à sua barra lateral. Se você nunca usou widgets antes, consulte nosso guia sobre como adicionar e usar widgets no WordPress.
O widget será expandido e você poderá ver suas configurações.
A primeira opção é adicionar um título ao widget de imagem. Depois disso, clique no botão 'Adicionar Imagem' para continuar.
Isso abrirá o carregador de mídia do WordPress, onde você pode clicar no botão de upload de arquivos para carregar sua imagem ou selecionar uma imagem que você já carregou.
Após o upload da imagem, você verá as configurações da imagem na coluna da direita. A partir daqui, você pode fornecer um título ou texto alternativo para a imagem, adicionar uma descrição, selecionar um tamanho ou até mesmo adicionar um link.
Quando terminar, você pode clicar no botão ‘Adicionar ao Widget’ para salvar suas alterações. Agora você verá uma prévia da imagem dentro da área de configurações do widget.
Não se esqueça de clicar no botão ‘Salvar’ para salvar seu widget de imagem.
Agora você pode visitar seu site para ver a imagem exibida na barra lateral do seu blog WordPress.
Opção 5: Usando o Bloco de Widget de HTML Personalizado
Em alguns casos, você pode precisar adicionar classes de rastreamento específicas ou atributos avançados que o bloco de Imagem padrão não suporta. Nesse caso, você precisará adicionar manualmente uma imagem à barra lateral do seu blog.
Primeiro, faça o upload da imagem para o seu site WordPress via Mídia » Adicionar Nova.
Após fazer o upload da imagem, você precisa clicar no link Editar ao lado da imagem.
O WordPress o levará para a página ‘Editar Mídia’, onde você verá o URL do arquivo de imagem no lado direito da tela.
Você precisa copiar este URL e colá-lo em um editor de texto como o Bloco de Notas.
Em seguida, você precisa ir para a tela Aparência » Widgets no seu painel do WordPress.
Depois disso, você pode adicionar o bloco de widget ‘HTML Personalizado’ à sua barra lateral onde deseja exibir a imagem.
Na área de caixa de texto do widget, você precisa adicionar sua imagem usando este código:
<img src="Paste The File URL Here" alt="Strawberries" />
A tag img é usada em HTML para exibir imagens. Ela precisa de dois atributos. O primeiro é src, que define a localização do arquivo de imagem. É aqui que você colará o URL que copiou anteriormente.
O segundo é alt, que é usado para fornecer um texto alternativo para a imagem. Sua tag de imagem final ficará parecida com isto:
<img src="https://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />Você precisa clicar no botão ‘Atualizar’ para armazenar as configurações do seu widget e, em seguida, visualizar seu site.
Perguntas Frequentes Sobre Imagens e Barras Laterais no WordPress
Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como adicionar imagens e personalizar suas barras laterais no WordPress:
Como adiciono imagens lado a lado no WordPress?
Você pode adicionar imagens lado a lado usando o bloco de Galeria padrão. Simplesmente adicione o bloco ao seu conteúdo, selecione várias fotos da sua biblioteca de mídia e o WordPress as organizará automaticamente em um layout de grade, uma ao lado da outra.
Para mais informações, consulte nosso tutorial sobre como colocar imagens lado a lado facilmente no WordPress.
Como edito widgets da barra lateral no WordPress?
Para editar widgets da barra lateral, navegue até Aparência » Widgets no seu painel do WordPress. A partir daí, você pode clicar em qualquer bloco existente para alterar suas configurações, movê-lo ou excluí-lo completamente usando o editor visual.
Como adiciono uma imagem à barra de menu no WordPress?
A maneira mais fácil de adicionar imagens ao seu menu é usando um plugin como o Menu Image. Após a instalação, vá para Aparência » Menus, onde você verá um novo botão para carregar um ícone ou foto para cada item do menu.
Para começar, você pode conferir nosso guia sobre como adicionar ícones de imagem ao menu de navegação do WordPress.
Como projetar uma barra lateral no WordPress?
Você pode projetar uma barra lateral personalizada usando um construtor de páginas de arrastar e soltar como o SeedProd para criar layouts sem codificação. Alternativamente, você pode usar o editor de blocos em Aparência » Widgets para agrupar blocos, adicionar cores de fundo e estilizar títulos visualmente.
Você pode personalizar um widget?
Sim, a maioria dos widgets modernos do WordPress são blocos que podem ser totalmente personalizados. Basta clicar no widget no editor e usar o painel de configurações à direita para ajustar cores, tipografia, alinhamento e opções de visibilidade.
Esperamos que este artigo tenha ajudado você a adicionar uma imagem ao widget da barra lateral do WordPress. Você também pode querer conferir nossas seleções de especialistas dos melhores construtores de página de arrastar e soltar no WordPress e como mudar o lado da barra lateral no 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.
Holly
Olá,
Acabei de enviar uma pergunta sobre minha imagem que só aparece na página inicial e não em outras páginas do site. Resolvi meu problema e queria compartilhar a solução caso ajude mais alguém. Eu estava tentando usar o widget de HTML Personalizado para MOSTRAR algumas imagens na minha Barra Lateral de Conteúdo e, quando configurei especificamente a adição das páginas que eu queria mostrar (deixando “Corresponder a tudo” DESmarcado), as imagens só apareceram na página inicial.
The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages.
Obrigado,
Holly
WPBeginner Support
Thanks for sharing your resolution
Admin
Holly
Olá,
Consegui fazer o widget de HTML personalizado funcionar na página inicial, mas as imagens não estão aparecendo nas outras páginas estáticas. Configurei as opções para “Mostrar se” minhas páginas desejadas forem selecionadas, mas a imagem só aparece na página inicial. Tentei excluir e adicionar o widget novamente, e remover e adicionar as páginas novamente. Alguma ideia?
Obrigado!
Holly
WPBeginner Support
Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show
Admin
Alice
Olá, estou tentando adicionar a imagem e fazê-la aparecer no canto superior esquerdo da postagem. Quando adiciono e visualizo, tudo está lá, mas quando publico, não está. Alguma ideia?
WPBeginner Support
Você pode querer tentar limpar o cache para ter certeza de que não é causado por isso: https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/
Além disso, se você verificar com o suporte do seu tema, pode haver uma configuração específica do tema que precise ser alterada.
Admin
Kathy Turner
Adicionei uma imagem ao meu rodapé e no Chrome em um desktop ela aparece e depois desaparece imediatamente. Reduzi o tamanho, tentei adicioná-la como uma imagem em html, mas nada resolve o problema. No Chrome no meu celular está tudo bem. Não tenho adblock no meu desktop. O problema também ocorre com o Firefox, mas no Microsoft Edge tudo funciona bem. Alguma ideia?
harika
olá, criei um blog no wordpress, mas a linguagem do conteúdo das postagens é telugu. como mudo o estilo da fonte da postagem em telugu?
Micky
Olá,
Já tentei ambos os métodos listados neste vídeo, e a imagem da barra lateral ainda não aparece de forma alguma.
Alguma ideia de como posso solucionar isso?
Obrigado!
Doma
Obrigado, foi rápido e direto ao ponto... muito útil.
MS Rahman
Quero mostrar uma imagem padrão quando não houver nada no widget. Como faço isso?
Obrigado
Krishna
Existe alguma maneira de definir a imagem para que ela seja exibida apenas na página inicial?
Sara william
Obrigado. Estou me esforçando muito para fazer o upload da minha foto de perfil e agora isso pode ser feito facilmente.
Anette
Obrigado por explicar em passos fáceis!
Rebecca Claxton
Obrigado por estar sempre no topo das pesquisas aleatórias que faço sobre coisas do WordPress – e obrigado pelas informações úteis adequadas para pessoas comuns que usam WP!
WPBeginner Support
Olá Rebecca,
We are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Karthik Marripoodi
Obrigado por escrever sobre isso em detalhes. Quero colocar meus anúncios na seção de widgets. Este método se adequará perfeitamente à minha necessidade. Mas tenho apenas um problema. Como adicionar uma imagem diferente para posts de blog diferentes. Existe uma maneira de fazer isso?
Minhaz
ótimo post, adoro wpbeginner
Mark
Acredito que o vídeo disse "Alt tag". Essa não seria a terminologia correta – seria o Atributo Alt da tag.
Victoria
Adorei este tutorial, no entanto, estou cético em baixar o widget de imagem porque diz que ele não foi testado com minha versão do WordPress. Haverá atualizações em breve ou como ele é testado com minha versão do WordPress?
WPBeginner Support
Olá Victoria,
Por favor, dê uma olhada em nosso artigo sobre você deve instalar plugins não testados com sua versão do WordPress.
Admin
melessa
Olá, espero não ter deixado passar em algum lugar nos comentários, mas como faço para colocar uma imagem circular ou oval em vez de quadrada para o "sobre mim" na barra lateral? Estou usando Divi da Elegant Themes.
WPBeginner Support
Veja nosso guia sobre como adicionar imagens gravatar redondas no WordPress. O artigo fala sobre gravatar, mas você pode usar o CSS com qualquer imagem.
Admin
Rod
Olá,
Alguma ideia de por que os marcadores não aparecem nos widgets da barra lateral, apesar de ter removido "list-style-type: none" do arquivo css e substituído pelo seguinte código, e ainda assim não funciona:
.widget ul li { list-style: circle }
Sam
Como posso fazer a imagem ser um link clicável?
Obrigado
David
Uau! Exatamente. O texto visual dá muito trabalho para uma imagem simples. Eu estava procurando um plugin que fizesse exatamente isso. Muito obrigado!
Molly
Obrigado, é exatamente o que eu precisava, e você tornou tudo tão fácil!
WPBeginner Support
Olá Molly,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Admin
Sandra Wiese
Muito obrigado – funciona perfeitamente!
WPBeginner Support
Olá Sandra,
We are glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Admin
Jana
Olá,
Tenho algumas perguntas. Primeiro, estou tendo problemas para instalar o plugin Widget Image por algum motivo. Já instalei plugins antes, mas não consigo fazer este. Admito que sou iniciante e os instalei há quase um ano, então talvez eu tenha esquecido algo. Você pode me dar alguma dica?
Além disso, acredite ou não, consegui colocar uma imagem no meu widget usando a codificação HTML! (Surpreso que eu pudesse codificar, mas você tornou tudo muito fácil e compreensível) O único problema que tenho é que ela está em tamanho real e eu esperava ter miniaturas. Existe um código para isso? Se sim, não preciso instalar o plugin.
Obrigado!
WPBeginner Support
Você pode criar uma imagem menor no seu computador usando qualquer ferramenta de edição de imagem e depois fazer o upload dessa imagem.
Admin
James McAllister
Eu li isto para tentar atualizar a imagem que tenho em um widget no meu blog.
Vocês estão no mesmo planeta que o resto de nós? Dêem uma olhada no que vocês escreveram – seria preciso ser um advogado de causa própria cruzado com Steve Jobs para entender as instruções.
De qualquer forma – de volta a tentar mudar a imagem, tenho certeza que o truque está em algum lugar aí.
Marvis
Muito obrigado por esta informação. Mas eu realmente preciso saber como exibir anúncios do Google em minhas postagens e na barra lateral também. Já tenho uma conta AdSense aprovada e gerei o código do anúncio. Mas o próximo passo a seguir é o que eu não entendo. Preciso de ajuda, por favor.
WPBeginner Support
Por favor, dê uma olhada em nosso guia sobre como gerenciar anúncios no WordPress com o Adsanity.
Admin
Abbie
Ou eu negligenciei muitas coisas que você falou ou o site mudou. Eu vejo uma opção para um widget de imagem que você afirma que não existe. Eu não vejo nenhuma mídia ou galeria para a qual eu possa fazer upload de um arquivo de imagem.
Então, onde eu faço o upload do arquivo para que eu possa obter um URL para colocar no local necessário no formulário para configurar o widget de imagem?
Paul
Faça o upload para sua biblioteca de mídia
Nikki
Obrigado, isso foi muito útil. o vídeo poderia ter sido um pouco mais lento
Luke
Obrigado pela ajuda! Definitivamente é mais fácil apenas obter o plugin de widget de imagem.
manmohan
É muito útil para mim… obrigado por esta postagem.
Mas tenho uma pergunta
Erica
Olá. Eu sei como colocar as imagens na barra lateral, mas elas ocupam muito espaço, então estou tentando fazer uma galeria clicável aqui. Eu recebo a pequena caixa clicável, mas nenhuma imagem aparece. Eu também consegui fazer um slideshow automático, mas é muito distrativo, então eu não quero isso. Eu só quero a galeria de fotos onde você clica para a próxima imagem, mas não consigo encontrar nada sobre como consertar isso aqui.
WPBeginner Support
Por favor, dê uma olhada em nosso guia como criar facilmente galerias de imagens responsivas do WordPress com Envira.
Admin
Giulia
Olá,
Estou tendo um problema para adicionar widgets de imagem. Quando tento adicionar um novo (depois de ter excluído um também), as alterações não são salvas, a página para de carregar e, quando tento acessar o site (administrador e normal), ele diz que não é possível conectar ao servidor – então, basicamente, meu site está fora do ar. Reiniciei meu computador e instalei atualizações, e isso resolveu na primeira vez, mas quando tentei adicionar o widget novamente, aconteceu a mesma coisa, exceto que reiniciar não parece mais ajudar!
Por favor, ajude! Eu realmente agradeceria!
Agradeço desde já!
Gregor Egan
Olá, obrigado por isso, funciona muito bem. Tenho uma pergunta; Eu não quero que a mesma imagem apareça em todas as páginas, então como faço para restringi-la a uma página específica para que eu possa usar uma imagem diferente em páginas subsequentes.
Atenciosamente,
Gregor
Equipe WPBeginner
Obrigado Lee, estamos trabalhando nisso.
Lee
Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful.
Sheryl Anderson
Eu tenho a imagem no widget – o que eu quero saber é como apontar esse widget para um formulário de opt-in – como você adiciona esse código
Sultan Ayyaz
A ideia de widget de imagem é realmente nova e muito útil para adicionar imagem no site do WordPress. Artigo muito útil.
Fiona
Eu estava querendo aprender como fazer isso. Momento perfeito. Obrigado!
chzumbrunnen
Outra boa maneira é usar o widget de texto, mas com o Editor TinyMCE (como é usado para posts). Existe um plugin para isso (na verdade, existem mais de um): https://wordpress.org/plugins/black-studio-tinymce-widget/