Como exibir imagens no WordPress com Elementor: as formas criativas

Não é nenhum segredo que as imagens são um componente importante de qualquer site. Melhora o apelo visual do site, bem como o engajamento. No WordPress, inserir imagens em seus posts e páginas é bastante fácil. 

Uma forma de mostrar imagens é simplesmente adicionar mídia no Editor Clássico. Outra forma é usar os blocos de imagens no editor Gutenberg. Em ambos os casos, os estilos são predefinidos no tema.

No entanto, Elementor oferece flexibilidade na exibição de imagens no WordPress. Ele oferece uma variedade de maneiras criativas de exibir imagens em seu site. Mais importante ainda, cada elemento da imagem é personalizável individualmente.

Usando elementos como Caixas de imagens, Galerias de imagens, Mascaramento de imagem
você pode criar seções de imagens de aparência impressionante.

Com um pouco de criatividade e atenção aos detalhes, você pode fazer seu site se destacar da multidão usando esses elementos.

Este artigo irá guiá-lo sobre como exibir imagens no WordPress com Elementor para projetar uma interface intuitiva e fácil de usar para exibir imagens em seu site.

Por que as imagens são importantes para o seu conteúdo da web

Quando vemos uma imagem, o cérebro humano começa automaticamente a analisar e categorizar a informação visual que recebe, sem esforço consciente. Este processo torna o conteúdo mais fácil de lembrar e lembrar.

Além disso, as imagens podem tornar o seu conteúdo mais envolvente e cativante para os visitantes, melhorando o apelo visual de um site. 

Aqui estão alguns motivos pelos quais as imagens são importantes para o conteúdo da web:

• Capta a atenção facilmente: As imagens podem ser usadas para chamar a atenção do visitante e atraí-lo para o seu conteúdo. Isto é especialmente importante para sites que visam vender produtos ou serviços.
• Transmita informações rapidamente: Às vezes, uma imagem pode comunicar informações de forma mais rápida e eficaz do que um texto. Por exemplo, um infográfico pode transmitir informações complexas de forma simples.
• Quebra a monotonia: Grandes blocos de texto podem ser tediosos e monótonos de ler. As imagens podem ajudar a quebrar o texto longo e trazer de volta a atenção para o seu conteúdo.
• Deixa uma marca duradoura na memória: O cérebro humano pode processar informações visuais muito mais rápido do que informações textuais ou verbais e pode retê-las por um longo prazo.
• Torna seu conteúdo mais compartilhável: Plataformas de mídia social como Facebook e Instagram são altamente visuais e as fotos costumam ser mais compartilháveis do que apenas texto. Ao incluir imagens de alta qualidade em seu site, você aumenta a probabilidade de os visitantes compartilharem seu conteúdo nas redes sociais.
• Conhecimento da marca: As imagens podem ajudar a aprimorar sua marca, apresentando seu logotipo ou outros elementos visuais associados à sua marca.

Como adicionar imagens no WordPress (método básico)

A maneira básica de mostrar imagens no WordPress é adicionar uma imagem à biblioteca de mídia e exibi-la com estilos padrão.

Para adicionar uma imagem à biblioteca de mídia do WordPress:

Faça login no seu WordPress, vá para Mídia > Adicionar novoe selecione a imagem do seu computador para carregá-la na biblioteca de mídia.

Agora, a exibição de imagens no WordPress depende de qual editor padrão você está usando.

Editor Gutenberg:

No padrão do WordPress Gutenberg, também conhecido como editor de blocos, você pode mostrar imagens usando blocos de imagens. Para isso, abra o editor e adicione o bloco de imagem na posição desejada para exibição da imagem. Em seguida, carregue ou selecione uma imagem da biblioteca de mídia.

Editor Clássico:

Se você estiver usando um editor clássico antigo, abra uma página ou postagem no editor e coloque o cursor do mouse na postagem/página onde deseja exibir a imagem. Depois disso, clique no botão Adicionar mídia e selecione uma imagem da biblioteca de mídia.

Como exibir imagens no WordPress usando Elementor (métodos avançados)

Agora, se quiser formas mais avançadas de exibir recursos visuais, você pode mudar para o construtor de páginas Elementor. Com Elementor você pode usar widgets de imagem para exibir imagens de sites de forma criativa. 

Levando as coisas para o próximo nível, o complemento ElementsKit Elementor vem com vários widgets que permitem exibir imagens com estilo e com os recursos mais personalizáveis. ElementsKit vem com widgets como Elementor Image Box, Image Gallery, Image Swap e assim por diante. Esses widgets oferecem diversas opções para exibir fotos com estilo. 

A seguir está uma demonstração de como você pode utilizar esses widgets para exibir imagens no WordPress e tornar seu site mais animado.

Instale o ElementsKit

Para usar os recursos avançados de imagem, você precisa instalar os plug-ins ElementsKit Lite e ElementsKit Pro em seu site WordPress.

Aqui está a documentação para instalar os plugins ElementsKit

Depois de instalar os plugins, você pode avançar com os widgets para exibir imagens no WordPress.

Método 1: mostre fotos em uma caixa de imagens elegante

Usando o widget ElementsKit Image Box, você pode destacar uma seção com uma combinação de imagem e texto. Permite mostrar uma imagem com texto como um título e uma descrição. Esses estilos são frequentemente usados para destacar um produto, serviço ou recurso principal.

Para usar o recurso: habilite o widget Image Box em ElementsKit > Widget

Aqui está como usar o widget ElementsKit Image Box para Elementor:

Imagem

Na seção de imagens, você pode personalizar a imagem e sua aparência.

1. Escolha a imagem: Selecione uma imagem da biblioteca de mídia ou carregue uma.
2. Tamanho da imagem: Defina o tamanho da imagem.
3. Área de conteudo: Você pode escolher o estilo da área de conteúdo entre as opções fornecidas.
4. Altura igual: Ative ou desative a altura igual para a imagem e a área de conteúdo.
5. Ativar link: Você pode usar a imagem como uma seção âncora ativando o link. Quando ativado, adicione o link para a imagem.

Corpo

Na seção body, você pode adicionar todo o texto à caixa de imagem Elementor. Isso inclui um título, uma descrição, uma tag HTML de título e alinhamento de texto.

1. Título: Adicione o texto do título neste campo.
2. Tag HTML do título: Selecione qual tag HTML você deseja para o título (H1, H2, H3, div, span, parágrafo, etc.)
3. Descrição: Neste campo adicione uma breve descrição do conteúdo.
4. Alinhamento: Defina o alinhamento do texto da imagem, título, descrição e botão.

Botão

Você tem a opção de adicionar um botão CTA na caixa de imagem Elementor. Por isso,

1. Botão Habilitar: Para adicionar um botão na caixa de imagem, habilite esta opção.
2. Rótulo: Adicione um rótulo de botão (texto) que indique a finalidade do CTA.
3. URL: Insira o link da página que você deseja redirecionar o visitante assim que ele clicar.
4. Adicionar ícone: Se você quiser mostrar um ícone com o rótulo do botão, habilite este recurso.
5. Ícone: Escolha um ícone da biblioteca de ícones Elementor.
6. Posição do ícone: Selecione se o ícone ficará antes ou depois do texto do botão.

Em seguida, na guia estilo, você pode personalizar a aparência da caixa de imagem Elementor, incluindo cores, plano de fundo, tipografia e assim por diante.

No Curvas Clássicas seção, você pode ajustar a largura e a margem da área de conteúdo. Em seguida, estilize a imagem alterando o preenchimento e a opacidade. 

Além disso, você pode personalizar a aparência do título e do texto de descrição alterando a cor, a tipografia, a cor de fundo e assim por diante. Além disso, personalize os estilos de botão e seu ícone com seus atributos.

Assista ao vídeo para obter conhecimento mais detalhado sobre o widget ElementsKit Image Box.

Método 2: exibir duas imagens com animações de troca

A troca de imagens é uma maneira elegante de mostrar duas imagens alternativas em um só lugar, que são trocadas quando os visitantes passam o mouse ou clicam na imagem. O widget ElementsKit Image Swap vem com algumas dezenas de efeitos impressionantes que tornam seu site ainda mais atraente visualmente.

Você pode usar esse recurso, como usar a primeira imagem como imagem de capa que chama a atenção e a segunda imagem para fornecer as informações necessárias.

Para usar o recurso: habilite o widget Troca de imagem em ElementsKit > Widget

Aqui está como usar o widget ElementsKit Image Swap para Elementor:

1. Imagem frontal: Esta é a imagem que aparece por padrão quando a página é carregada no navegador.
2. Imagem traseira: Esta é a imagem que aparece quando a ação é realizada, ou seja, um visitante passa o mouse ou clica na imagem.
3. Tamanho da imagem: Defina o tamanho da imagem para ambas as imagens.
4. Estilo de troca: Você tem 21 efeitos de troca diferentes disponíveis com o widget ElementsKit Image Swap, que pode ajudá-lo a tornar seu web design mais atraente para os visitantes.

5. Tigre: Aqui você pode escolher entre a ação Hover ou Click para acionar as imagens de troca.
6. Indicadores: Funciona como um navegador, que indica qual imagem está no show e qual é o fundo.
7. Link: Você pode vincular as imagens a uma página, se desejar.

Na guia de estilo, você pode ajustar a altura da imagem e a duração da animação de troca. E se você ativar o indicador, poderá alterar sua posição e personalizar seu tamanho e cores.

Método 3: Dê formas exclusivas às imagens do site com mascaramento de imagem

Esta é uma maneira única de tornar seu site animado com imagens de formatos exclusivos. Os recursos de mascaramento de imagem transformam as imagens de formato tradicional em imagens mais envolventes. No WordPress, mascarar é bastante fácil com Elementor.

O ElementsKit para Elementor vem com um módulo de mascaramento para imagens. O módulo está disponível para quaisquer elementos do Elementor que envolvam uma imagem. No editor Elementor, habilitar o mascaramento do ElementsKit e selecione uma forma dentre as pré-carregadas. Você também pode adicionar uma forma personalizada às imagens.

Método 4: apresente imagens em uma galeria

Elementor vem com uma ótima maneira de exibir várias imagens em uma galeria elegante. O widget Galeria Básica do Elemntor funciona com uma abordagem tradicional onde você pode adicionar imagens, definir o tamanho da imagem e personalizar itens básicos como espaçamento e bordas da imagem.

No entanto, o widget ElementsKit Image Gallery vem com opções mais flexíveis. Com o widget, você pode personalizar o layout com descrições, adicionar filtros na galeria e individualmente cada aspecto da miniatura, imagem e filtros.

Saiba mais sobre o widget Galeria de Imagens e como ele pode aprimorar o design do seu site em nosso blog.

Embrulhar

No geral, Elementor vem com várias maneiras de exibir imagens no WordPress. Para aproveitar ao máximo os recursos do Elementor, o ElementsKit pode ser um ótimo complemento.

ElementsKit possui diversas formas e estilos: Caixa de imagem para mostrar uma imagem com título e descrição; Troca de imagem para exibir duas imagens alternativamente; Além disso, existem widgets Galeria de imagens e Mascaramento de imagens para oferecer mais opções.

Cada um desses elementos oferece recursos exclusivos e opções de personalização, permitindo criar conteúdo envolvente e visualmente atraente para o seu site.

Se você achar isso útil, há mais para você no ElementsKit. Esse Complementos Elementor vem com dezenas de outros elementos que podem ajudá-lo a criar e projetar um site com o maior número de recursos e opcionalidades.