Como adicionar caixa de imagens no WordPress: 3 etapas simples 

Quer fazer com que suas páginas WordPress se destaquem visualmente? Então, as caixas de imagens são o elemento secreto.

Você pode exibir produtos, destacar membros da equipe ou chamar a atenção do cliente para recursos importantes com a caixa de imagem no WordPress. 

E você adivinhou certo!

Neste artigo, descreveremos o Guia de 3 etapas sobre como adicionar uma caixa de imagem no WordPress.

Vamos começar!

O que é uma caixa de imagens no WordPress? 

Uma caixa de imagem é um elemento gráfico ou contêiner projetado para exibir imagens em uma página da web ou postagem. Você pode combinar texto e links with photos to present information in an engaging and visually appealing way.

Why Display Image Box in WordPress?

Image box is helpful to enhance a WordPress website’s overall design and user experience. It also has significant impact on positively driving websites traffic with visual representations. Besides, it allows you to convey brand messages more efficiently to your customers.

Further, image box lets you add the following sections in your web pages to establish brand identity more strongly:

• Destacando os principais recursos ou serviços
• Apresentando postagens de blog ou portfólios
• Exibindo imagens e galerias de produtos
• Apresentando membros da equipe 
• Displaying testimonials and so on

Principais componentes da caixa de imagens do WordPress

• Imagem: O principal elemento visual, muitas vezes apresentando um produto, serviço, membro da equipe ou conceito relacionado.
• Título: Um título curto e descritivo que captura a essência da imagem e do texto que a acompanha.
• Texto: Uma breve descrição ou trecho de informações para fornecer contexto e detalhes.
• Botão de link: Um botão ou link clicável para direcionar os usuários a uma página, produto ou outros recursos relevantes.

Como adicionar caixa de imagem no WordPress: guia de 3 etapas 

As caixas de imagens podem transformar suas páginas do WordPress em obras-primas visualmente deslumbrantes. Também cativa o seu público e deixa uma impressão duradoura.

Vamos ver como criar uma caixa de imagem no WordPress em apenas 3 etapas simples:

Etapa 1: instale e ative os plug-ins necessários

Para adicionar uma caixa de imagem ao seu site WordPress, você pode usar código líquido ou plug-ins Elementor. Nesse caso, usar plug-ins é uma maneira conveniente de criar e adicionar caixas de imagens, mesmo sem conhecimento de codificação. 

Assim, você pode ir para um Complemento Elementor tudo-em-um – ElementsKit. This amazing WordPress image box plugin offers extensive features and ready templates to add images to your WordPress website. Plus, the image box design and all the elements of the ElementsKit image box are fully customizable.

Para instalar o plugin da caixa de imagem ElementsKit, vá para o painel do WordPress.

• Navegar para Plug-ins ➡ Adicionar novo 
• Procurar “Kit de Elementos” 
• Clique em "Instale agora"
• Ou baixe e carregue o arquivo zip
• Ative o plugin assim que estiver instalado

Etapa 2: adicione uma caixa de imagem ao seu site WordPress

Depois de instalar e ativar o plugin de caixa de imagem do WordPress, ou seja, ElementsKit, você pode utilizar seu modelos pré-concebidos. Esses modelos são fáceis de usar com apenas um clique. Além disso, você pode adicionar/remover elementos com base em seus requisitos. 

Vamos ver como adicionar imagens no wordpress usando o Caixa de imagem do ElementsKit: 

• Crie uma nova página/postagem ou abra uma existente 
• Abra com Elementor 
• Clique no Ícone “ElementsKit” 

• Next, you need to select the Elementor image box widget from the Categoria de widgets ElementsKit 
• Clique em “Caixa de imagem”

• Aqui você pode acessar 11 designs gratuitos e 8 premium variações; um total de 19 modelos diferentes para adicionar uma caixa de imagem ao site WordPress
• Você pode ver o visualizações de todos os modelos para entender o design e os elementos que correspondem ao seu site
• Clique no sinal de mais (+) para ver a prévia ao vivo 

• Após finalizar o design, clique em "Inserir" to add WordPress image
• Ele será adicionado à sua página/postagem 
• Agora você pode adicionar/remover ou modificar o conteúdo, estilos e outras propriedades da caixa de imagem
• Após toda a customização, clique em "Publicar". And the image box will be live on your WordPress website

Etapa 3: personalize os estilos e configurações 

ElementsKit, um excelente complemento para Elementor é um plugin totalmente personalizável, pois os usuários podem utilizar seu Mais de 85 widgets e módulos. Assim como outros elementos, o widget da caixa de imagem também é personalizado de acordo com suas necessidades. 

Você pode editar as manchetes e o conteúdo do corpo. Novamente, você pode alterar os estilos das imagens e dos botões de call to action. Além disso, você pode estilizar as caixas de imagens com vários efeitos e formatos.

Vamos ver como personalizar uma caixa de imagem no WordPress: 

Personalização de layout

Depois de inserir os modelos de caixa de imagem pré-fabricados do ElementsKit no WordPress, você pode ajustar seu layout. 

• Aumentar ou diminuir a largura da caixa de imagem
• Definir a lacuna das colunas como estreita, estendida, larga, personalizada ou sem lacuna
• Adjust the image box height and alignment to correctly insert WordPress image
• Mantenha o overflow padrão ou oculto 
• Utilize tags HTML, por exemplo, cabeçalho, rodapé, principal, artigo, etc.

Personalização de conteúdo

A caixa Imagem no WordPress contém conteúdo diferente para elementos diferentes, como títulos, imagens, botões, etc. Você pode alterar o texto e modificar suas propriedades.

Vamos ver como personalizar o conteúdo da caixa de imagem do ElementsKit no WordPress. 

✨ Título 

• Alterar títulos de títulos e subtítulos 
• Insira links com o título
• Ocultar/mostrar borda com posição inicial/final 
• Adicionar/mostrar ou ocultar a descrição do título 
• Adicione separadores com vários estilos e posições 

✨ Imagem 

• Altere a imagem ou adicione imagens geradas por IA
• Ajuste o tamanho da imagem, por exemplo, completo, médio, grande, personalizado, etc.
• Defina a área de conteúdo como simples, clássica, linha de sombra, etc.
• Ativar/desativar altura igual 
• Insira URL para vincular outro recurso 

✨ Corpo 

• Adicione/remova ou edite o texto do título
• Modifique a tag HTML do título
• Ajuste o alinhamento do título para a esquerda, direita ou centro 

✨ Botão

• Habilite ou desabilite o botão criativo
• Adicionar texto de rótulo de botão personalizado 
• Adicionar URL personalizado
• Adicione/remova o ícone e configure o pistão 

Personalização de estilo 

Com layout e conteúdo, você também pode alterar seus estilos. Como resultado, você pode criar diferentes tipos de caixas de imagem que se adequam à interface de usuário do seu site WordPress e outras propriedades. 

✨ Linha Sombra 

• Escolha a linha de sombra para esquerda ou direita
• Defina a largura personalizada conforme a necessidade
• Personalize o tipo e a cor do fundo da sombra 
• Definir imagem de fundo personalizada 

✨ Imagem 

• Adicione raio de borda e preenchimento personalizados 
• Ajuste a opacidade da imagem para normal ou efeito de foco 

✨ Corpo 

• Escolha o tipo de borda com border-radius
• Definir imagem, tipo e cor de plano de fundo personalizados 
• Ajustar o preenchimento da caixa e a cor da sombra da caixa 
• Ajuste a tipografia, a cor e o espaçamento do título

✨ Botão 

• Personalize o valor do preenchimento e o tamanho da fonte do ícone 
• Altere o texto do botão e a cor de fundo 
• Definir propriedades normais ou instantâneas 
• Definir tipo de borda, raio da borda e sombra da caixa 

Personalização Avançada 

A caixa de imagem ElementsKit é flexível para usar recursos avançados de personalização. Ajuda a tornar sua caixa de imagem mais elegante e envolvente. Você também pode integrar vários efeitos de movimento, bem como códigos personalizados para combinar a caixa de imagem com a página específica do seu site.

Você encontrará as opções de personalização nas configurações avançadas:

• Modifique o preenchimento, margem, largura, posição e índice z do layout da caixa de imagem
• Adicione efeitos de movimento para elementos (por exemplo, fade in, fade out, bounce in, zoom in up, slide in left, etc.)
• Personalize a capacidade de resposta da caixa de imagem de acordo com dispositivos como PC, guia e celular 
• Defina atributos e propriedades para ocultar/mostrar em vários dispositivos 
• Incluir CSS personalizado para modificação adicional de recursos 

Vantagens de adicionar caixa de imagens no WordPress

• Melhore o apelo visual: Uma caixa de imagem atraente divide o conteúdo com muito texto. Além disso, torna as páginas mais atraentes visualmente e mais fáceis de digitalizar.
• Destacar informações principais: Você pode destacar mensagens, recursos ou frases de chamariz importantes.
• Melhore o envolvimento do usuário: Usando elementos de caixa de imagem no WordPress, você também pode criar experiências visualmente atraentes. Isso pode manter os usuários interessados e explorando seu conteúdo.
• Aumente as taxas de cliques: Caixas de imagens com frases de chamariz (CTA) claras podem incentivar os usuários a clicar e saber mais.
• Informações da estrutura: Você pode organizar o conteúdo em seções lógicas e melhorar a legibilidade com a navegação.

5 dicas para adicionar caixa de imagens no WordPress 

Adicionar uma caixa de imagem ao seu site WordPress torna seu conteúdo mais envolvente e informativo. 

Vamos explorar 5 dicas para torná-lo mais eficiente e atraente elemento em seu site:

1. Otimize os tamanhos das imagens

Utilize ferramentas como Minúsculo PNG ou plug-ins de otimização de imagem para reduzir o tamanho dos arquivos de imagem sem comprometer a qualidade. Isso melhora significativamente a velocidade de carregamento da página.

2. Mantenha a consistência

Use imagens com estilo, paleta de cores e proporções consistentes para criar uma experiência visual coesa. Além disso, certifique-se de que as caixas de imagem estejam alinhadas com outros elementos na página para uma aparência refinada.

3. Use texto alternativo descritivo

Forneça um texto alternativo descritivo para cada imagem. Isso ajuda os leitores de tela a descrever imagens para usuários com deficiência visual e aumenta a visibilidade do mecanismo de pesquisa.

4. Considere a capacidade de resposta móvel

Verifique se as caixas de imagens são exibidas corretamente em vários tamanhos de tela, especialmente em dispositivos móveis. Use técnicas de design responsivo ou plug-ins para garantir uma adaptação perfeita.

5. Vincule estrategicamente (se aplicável)

Vincule caixas de imagens a conteúdo relevante ou páginas de destino para orientar os usuários e incentivar as ações desejadas.

Bom saber 👉 Como aplicar o mascaramento de imagem Elementor em 4 etapas fáceis com ElementsKit

Perguntas frequentes

Embrulhe isso

Para decorar seus sites WordPress com imagens, nada pode ser mais cativante e informativo do que a caixa de imagens ElementsKit.

Aqui fornecemos um guia passo a passo sobre como adicione uma caixa de imagem ao seu site WordPress sem esforço. Além disso, mostramos como usar o Plug-in ElementsKit Elementor para obter mais impacto e experimente diferentes estilos e layouts de caixas de imagem. 

Portanto, o poder dos recursos visuais está ao seu alcance agora – use-o com eficiência e faça seu conteúdo realmente brilhar! 🥳