Uma caixa de imagem Elementor é um widget que emparelha uma imagem com um título e uma breve descrição em um bloco vinculado. É como a maioria dos sites WordPress constrói grades de serviços, linhas de recursos e seções de equipe Elementor envia um gratuitamente; os dezesseis projetos abaixo o substituem por layouts e movimento que o widget padrão não pode produzir.
Como todos têm o mesmo widget, a seção de serviços no local de um encanador em Leeds é disposta de forma idêntica à de um estúdio de design em Lisboa Mesmas três colunas, mesma imagem centrada, mesma lacuna de 16 px.
Então construímos dezesseis substituições Cada um é um widget Elementor funcional, cada um tem uma demonstração ao vivo que você pode abrir agora e um link de download nesta página Você não precisa entregar um endereço de e-mail ou fazer uma conta para obter um.
Nesta página
Índice
Os 16 designs em resumo
| # | Design | O que faz | Melhor para |
|---|---|---|---|
| 01 | Caixas de imagem de lúmen | Uma fonte de luz segue o cursor através do cartão | Sites escuros, serviços técnicos |
| 02 | Verge Caixas de Imagem | Placas offset que abrem à medida que você passa | Editorial, guias, marcas ao ar livre |
| 03 | Caixas de imagem de abertura | Cada imagem abre a partir de uma abertura cortada | Fotografia, impressão, grades de seis itens |
| 04 | Caixas de imagem basculantes | As cartas giram em uma dobradiça, mostrando uma face traseira | Antes e depois, revela especificações |
| 05 | Caixas de Imagem em Cascata | Quatro cartas se estabelecem em sequência, não todas de uma vez | Etapas do processo, serviços de estúdio |
| 06 | Caixas de imagem em filigrana | Miniaturas pequenas, regras finas, lista densa de duas colunas | Menus de serviço longos, listas de preços |
| 07 | Faixa de friso | Uma faixa horizontal que você arrasta ou percorre | Sequências longas, linhas de produção |
| 08 | Caixas de imagens de giros | As cartas inclinam-se em direção ao ponteiro com um brilho | Produtos, produtos artesanais |
| 09 | Caixas de imagem de impulso | As cartas puxam em direção ao cursor como um ímã | Reservas, cursos, aluguel |
| 10 | Caixas de imagem Kintsugi | As imagens chegam como fragmentos e se remontam | Artesanato, vidro, cerâmica, restauração |
| 11 | Caixas de imagem em paliçada | Painéis altos construídos a partir de ripas verticais | Oficinas, marcenaria, colunas estreitas |
| 12 | Refratar Caixas de Imagem | Uma lavagem de cores em modo de mistura fica sobre cada imagem | Estúdios, música, licenciamento |
| 13 | Caixas de imagem Riser | As cartas se colocam com um lábio que se encaixa em seu texto | Agências, produção |
| 14 | Caixa de imagens do solstício | Grande par escalonado com tratamento duotônico | Café, sourcing, contação de histórias |
| 15 | Caixa de imagem de limite | As portas se separam no meio para revelar a imagem | Produtores, viveiros, revela |
| 16 | Caixa de imagens Vellum | Um desfoque suave desaparece à medida que os clipes do cartão se abrem | Encadernação, arquivos, marcas tranquilas |
O que você precisa para executar estes
Elementor livre é suficiente para a própria página Os desenhos são uma questão diferente.
- Todos os dezesseis precisam de Master Addons. Cada um deles é construído sobre controles (repetidor, tipografia, dimensões, borda, selecionador de ícones, guias) completos Construtor de widgets fornece. O plugin gratuito possui um Widget Builder, mas esses controles são exibidos como bloqueados.
- Os downloads nesta página são gratuitos e não fechados. Pegue o JSON e mantenha-o Você pode modificar opções limitadas na versão gratuita Mas a versão pro desmarque tudo.
- As demos ao vivo não custaram nada. Abra um, redimensione o navegador, arraste um cartão, aba através com o teclado Essa é a maneira honesta de julgar se um estilo de movimento se encaixa no seu conteúdo, e é gratuito.
Se você deseja designs que sejam executados no plugin gratuito, os oito widgets gratuitos do nosso Modelos de controle deslizante de elementor a coleção não usa controles Pro e vários deles são layouts de cartas em vez de controles deslizantes.
01. caixas de imagem de lúmen
Demonstração ao vivo Baixar Widget JSON
Quatro cartas em um fundo quase preto Mova o ponteiro sobre elas e uma luz suave se move com ela, iluminando a parte da imagem sob o cursor e deixando o resto escuro O cartão que você está olhando é o cartão que está aceso.
O que faz funcionar é a restrição Os cartões não se movem ou escalam ao pairar A única coisa que muda é onde a luz cai, o que é próximo de como você realmente olharia para objetos em uma bancada de trabalho sob uma lâmpada.
Use-o para: serviços técnicos, sites com temática escura, qualquer coisa fotografada contra um solo escuro.
Não o use para: fundos brancos Os holofotes não têm nada contra o que trabalhar e a coisa toda parece um estado de pairar ligeiramente sujo.
02. Verge Caixas de imagem
Demonstração ao vivo Baixar Widget JSON
Duas colunas, deliberadamente fora de passo, de modo que a coluna direita fica mais abaixo do que a esquerda Cada placa se abre à medida que cruza em vista Os títulos carregam uma pequena seta circular, e abaixo deles fica uma etiqueta de sobrancelha em tampas espaçadas por letras: SNOWCRAFT, SUMMITS, TRAVERSES.
Esse deslocamento está fazendo um trabalho real Uma grade reta diz ao olho para digitalizar em linhas e ele pára de ler escalonar as colunas e ele tem que viajar para baixo da página em vez disso, que é a direção que você realmente quer.
Use-o para: páginas editoriais, guias, qualquer coisa com quatro a seis itens substanciais.
Não o use para: mais de cerca de oito itens O escalonamento se acumula e a página fica muito alta, muito rápida.
03. Caixas de imagem de abertura
Demonstração ao vivo Baixar Widget JSON
Seis caixas em duas fileiras de três, em papel-cinza quente Cada imagem é mascarada e a máscara se abre para fora quando a linha chega, da mesma forma que uma abertura de lente carrega um pequeno link VER DETALHES sob sua descrição.
Este é o que você deve alcançar quando tiver seis coisas e elas forem genuinamente iguais A maioria dos layouts de caixas de imagens classifica silenciosamente seus itens por tamanho ou posição Este não.
Use-o para: serviços de câmara escura e impressão, grades de seis itens, qualquer coisa fotográfica.
Não o use para: três itens O ritmo de duas linhas é todo o design e uma única linha de três o perde.
04. Caixas de imagem basculantes
Demonstração ao vivo Baixar Widget JSON
Nomeado após a ponte, não o equilíbrio Cada cartão gira em uma dobradiça horizontal e há uma face traseira real esperando atrás dele, não um filtro CSS sobre a mesma imagem, mas um segundo lado real em que você escreve cópia.
Uma nota de construí-lo: o flip desliga abaixo de um ponto de interrupção, e isso é de propósito Uma animação de dobradiça em um telefone significa que um toque faz algo inesperado, e a correção é não fazê-lo em vez de fazê-lo mais devagar.
Use-o para: antes e depois, folhas de especificações, qualquer coisa em que a segunda informação seja tão interessante quanto a primeira.
Não o use para: sua navegação primária em uma página O conteúdo por trás de uma virada é conteúdo que a maioria dos visitantes nunca vê.
05. Caixas de imagem em cascata
Demonstração ao vivo Baixar Widget JSON
Quatro cartas que chegam uma após a outra, em vez de juntas, cada uma estabelecendo uma batida atrás da última A diferença é pequena, mas você sente que A seção é distribuída para você em vez de apenas aparecer.
Cada cartão carrega um link COURSE DATES, que é a oferta para o que realmente serve esse layout: coisas recorrentes, em uma ordem onde a ordem é importante.
Use-o para: serviços de estúdio e oficina, listagens de cursos, etapas do processo.
Não o use para: acima da dobra escalonar a entrada da primeira coisa que um visitante vê e seu site se sente lento, mesmo quando não é.
06. Caixas de imagem em filigrana
Demonstração ao vivo Baixar Widget JSON
O silencioso. Miniaturas do tamanho de um selo postal, regras de linha de cabelo, duas colunas, quatro itens no espaço a maioria desses desenhos usam para um Tipo de conjunto de mão, placas de polímero, corte de matriz, pintura de borda: uma lista de comércio, dispostos como uma lista de comércio.
Está aqui porque nem toda seção de serviços merece um tratamento de herói Às vezes há onze coisas que você faz e o visitante quer digitalizá-las, não admirá-las.
Use-o para: menus de serviço longos, listas de preços, negociações especializadas com muitos itens de linha.
Não o use para: três serviços de manchete Nessa contagem parece que você esqueceu de terminar a seção.
07. Faixa de Friso
Demonstração ao vivo Baixar Widget JSON
O único aqui que vai de lado As cartas saem da borda direita da tela e você as arrasta, rola ou usa os dois botões redondos de seta no canto superior direito Uma regra fina embaixo é preenchida à medida que você avança, para que você sempre saiba quanto resta.
Fiação penteada, empenamento e radiante, tecelagem dobby, tingimento de peças, acabamento Cinco estágios de um moinho na ordem em que acontecem Uma grade teria quebrado essa sequência em fileiras Uma tira a mantém em uma linha, que é o que uma sequência de produção realmente é.
Use-o para: sequências de produção, longas listas que destruiriam uma grade, qualquer coisa com uma ordem inerente.
Não o use para: quatro itens Se tudo já cabe na tela, você está pedindo às pessoas para rolar de lado para nada.
08. Caixas de imagem de giro
Demonstração ao vivo Baixar Widget JSON
As cartas inclinam-se para onde quer que o ponteiro esteja, e um brilho atravessa a superfície à medida que se movem É o efeito que todos tentaram em 2021 e a maioria das pessoas exagerou A inclinação aqui é de um par de graus, não quinze.
Os usuários do teclado são manuseados corretamente, o que quase nada faz. Tab a um cartão e você obtém a sustentação e o brilho, mas nenhuma rotação, porque um teclado não tem posição de ponteiro para girar e fingir que um é um absurdo.
Use-o para: produtos físicos, molduras, produtos artesanais, qualquer coisa com superfície que valha a pena captar luz.
Não o use para: cartões com muito texto. Inclinar um parágrafo enquanto alguém lê é hostil.
09. Caixas de imagem de impulso
Demonstração ao vivo Baixar Widget JSON
As cartas inclinam-se em direção ao cursor à medida que ele se aproxima e depois soltam à medida que ele sai. A tração é normalizada contra metade da carta e fixada, portanto, quando você passa da borda, ela para de aumentar em vez de jogar a carta na tela.
Cada cartão termina em um botão laranja quente Cursos para iniciantes, coaching, aluguel de diretoria O magnetismo é um truque da página de reservas, porque faz o botão parecer que quer ser pressionado e é desperdiçado em qualquer lugar onde o cartão não seja um apelo à ação.
Use-o para: aulas, aluguel, reservas, qualquer coisa onde cada cartão termine em um botão.
Não o use para: cartões informativos sem alvo de cliques Você está prometendo uma interação que não entrega.
10. Caixas de imagem Kintsugi
Demonstração ao vivo Baixar Widget JSON
As imagens chegam em pedaços e remontam Dois padrões de quebra são fornecidos com ele: três pedaços altos, como um painel rachado em sua altura, e seis cunhas irradiando de um ponto descentralizado, que parece impacto em vez de uma ruptura limpa.
Vasos soprados, fundido e forno formado, restauração, banco de ensino A demonstração é trabalho de vidro por toda parte O projeto foi construído para uma loja quente e mostra, mas ele pousa em qualquer lugar o assunto é algo feito, quebrado, ou colocado de volta juntos.
Use-o para: vidro, cerâmica, restauração, reparação, conservação.
Não o use para: hospitais, seguros, qualquer coisa onde “shattering” carrega um significado que você não quer.
11. Caixas de imagem em paliçada
Demonstração ao vivo Baixar Widget JSON
Três painéis altos, cada um montado a partir de ripas verticais que chegam em sequência, uma cerca sendo construída uma placa de cada vez A contagem de ripas se adapta à largura do painel, de modo que uma coluna mais estreita obtém menos placas mais largas em vez do mesmo número espremido mais fino.
Escadas, janelas de guilhotina, quartos equipados Todos eles são assuntos que você fotografaria em pé em vez de deitado, e que se adequa a esse layout melhor do que um cartão de paisagem jamais fará.
Use-o para: marcenaria, arquitetura, interiores, fotos altas de produtos.
Não o use para: fotografia de paisagem Painéis de retrato cortar a imagem para um slot e você perde o tiro.
12. refratar caixas de imagem
Demonstração ao vivo Baixar Widget JSON
Uma lavagem de cores fica sobre cada imagem no modo de mistura, então quatro fotografias tiradas em quatro dias diferentes em quatro luzes diferentes saem parecendo um conjunto Esse é o trabalho real aqui, e é menos glamouroso do que parece.
Gravação de localização, foley e adereços, restauração, licenciamento de biblioteca É um trabalho de som, onde a fotografia de estoque é inevitável e as imagens nunca combinam, então a lavagem esconde as costuras.
Use-o para: imagens de fontes mistas, fotos de stock, qualquer coisa onde não possa refazer.
Não o use para: precisão da cor do produto. Uma lavagem sobre uma amostra de tinta é um problema de retorno.
13. Caixas de imagem riser
Demonstração ao vivo Baixar Widget JSON
As cartas sobem de baixo com um lábio de legenda mostrando na parte inferior O lábio é medido contra o texto dentro dele, em vez de definido para uma altura fixa, então uma legenda de duas palavras e uma de duas linhas, ambas sentadas corretamente em vez de uma delas recortando.
Comissões sob medida, reformulação, produção em pequenos lotes Três itens, três imagens escuras, cromo mínimo É o design mais convencional do conjunto Às vezes você quer que o layout saia do caminho do trabalho.
Use-o para: agências, produtoras, páginas de três serviços.
Não o use para: descrições longas O lábio é uma legenda, não um parágrafo.
14. Caixa de imagens do solstício
Demonstração ao vivo Baixar Widget JSON
As caixas maiores no conjunto Duas colunas, mal fora de sintonia propositalmente, imagens grandes o suficiente para realmente olhar para. Um tratamento duotone links através das imagens e pode ser deixado cair por cartão se uma foto luta-lo.
Torrefação por atacado, fonte verde, calibração de café expresso Três serviços dado o espaço de seis Use-o quando você tem poucas coisas para dizer e eles valem uma tela inteira cada.
Use-o para: dois a quatro serviços premium, páginas de contação de histórias, marcas de café e alimentos.
Não o use para: seis ou mais itens. Este design em seis itens é uma página muito longa da qual ninguém chega ao fundo.
Caixa de imagem de limite 15
Demonstração ao vivo Baixar Widget JSON
Duas portas ficam fechadas sobre cada imagem e se separam no meio quando o cartão entra em exibição As portas são construídas a partir da própria fonte da imagem, para que nunca incompatibilizem a imagem atrás delas.
Fundo verde profundo, quatro cartões: coleções de estufa, banco de sementes, jardim de inverno, cursos de estudo Usando portas para uma seção sobre entrar em um jardim é óbvio, e neste caso óbvio é bom.
Use-o para: jardins, locais, aberturas, qualquer coisa que um visitante entra fisicamente.
Não o use para: doze cartas Doze conjuntos de portas abrindo é um monte de portas.
16. Caixa de imagem Vellum
Demonstração ao vivo Baixar Widget JSON
Cada cartão abre a partir de um clipe enquanto um desfoque suave limpa a imagem, como papel sendo retirado Cada cartão na seção é armado em um único commit, o que significa uma passagem de layout para toda a linha em vez de uma por cartão.
Encadernação de casos, conservação, caixas e recintos, trabalho de edição A demo é uma encadernação Este é o movimento mais suave do set e o mais provável de sobreviver a um cliente que diz odiar animação.
Use-o para: arquivos, encadernação, conservação, marcas tranquilas e caras.
Não o use para: qualquer coisa que precise de urgência Este design não tem nenhum e não está fingindo.
O que o widget de caixa de imagem Elementor padrão pode fazer?
A caixa de imagem gratuita Elementor dá-lhe uma imagem, um título, uma descrição e um link opcional Na guia Estilo você pode definir a largura da imagem, raio da borda, espaçamento entre imagem e texto, alinhamento e a posição da imagem (superior, esquerda ou direita).Os efeitos do Hover são limitados aos filtros e transformações CSS globais do Elementor.
Isso cobre muitos sites e, se cobrir o seu, use-o Você não precisa de um complemento para colocar uma imagem acima de um título.
Onde se esgota é o movimento e a estrutura Não há face traseira, nem sequenciamento por cartão, nem layout horizontal, nem maneira de fazer uma carta se comportar de maneira diferente de seus vizinhos Essas são as lacunas que os dezesseis designs acima preenchem.
Caixa de imagem vs caixa de ícones: qual você deve usar?
Use uma caixa de imagem quando a imagem for o conteúdo, como uma fotografia da obra, da sala ou do produto. Use uma caixa de ícones quando a imagem for decoração e as palavras carregarem o significado. Os widgets são quase idênticos: ambos combinam um gráfico com um título e uma descrição em um bloco vinculado.
O teste prático é se você notaria se o gráfico desaparecesse Se uma grade de serviços ainda lê bem com os ícones desaparecidos, eles eram decorativos e uma caixa de ícones era a chamada certa Se a remoção das imagens deixar você com uma lista de nomes, você precisava de uma caixa de imagem.
Uma terceira opção que as pessoas esquecem: a flipbox, que é uma caixa de imagem com uma parte traseira Bascule acima é aquela ideia reconstruída com uma dobradiça.
Como você adiciona um efeito hover a uma caixa de imagem do Elementor?
Selecione o widget, abra a guia Estilo, expanda a seção Imagem e mude para a guia Hover Você obtém opacidade, filtros CSS (borrão, brilho, saturação, contraste, matiz) e uma duração de transição Para transformações como escala ou rotação, use os controles de hover da guia Avançado.
Essa é toda a superfície embutida Qualquer coisa além dela, como uma luz que rastreia o cursor, uma atração magnética ou um brilho que cruza na inclinação, precisa de CSS personalizado ou um widget que envie o comportamento.
Se são especificamente efeitos de texto sobre imagem que você procura, nós catalogamos 25+ Texto do elementor sobre efeitos de hover de imagem separadamente, e eles funcionam com o widget de estoque.
Como importar esses designs de caixa de imagem Elementor
Baixe o JSON de qualquer design acima e, em seguida, no WordPress, vá para Complementos mestres → Construtor de widgets → Widget de importação e carregar o ficheiro O widget aparece no painel Elementor em Favoritos, com os seus próprios controlos nas guias Conteúdo e Estilo.
- Clique Baixar Widget JSON no design que você deseja O zip contém o JSON e uma imagem de visualização.
- Descompacte-o O importador de modelos do próprio Elementor não lerá este arquivo, porque ele vai para o Widget Builder e não para Templates.
- Ir para Complementos mestres → Construtor de widgets e escolha Importar Widget.
- Carregue o JSON. Edite qualquer página com o Elementor e procure no painel o nome do widget.
- Substitua as imagens e o texto do espaço reservado Os cartões são um repetidor, portanto, adicione ou remova itens lá em vez de duplicar o widget.
O erro comum é a etapa 2. estes são widgets Widget Builder, não Modelos de seção do elementor, portanto, importá-los através de Templates → Import falhará e a mensagem de erro não explica o porquê.
Essas caixas de imagens funcionam em dispositivos móveis e são acessíveis?
Sim a ambos, com uma ressalva no nível do design. Cada widget aqui respeita prefers-reduced-motion: se um visitante tiver o movimento reduzido ativado no nível do SO, as animações de entrada não são executadas e os cartões renderizados em seu estado final Isso é tratado no widget, não deixado para você.
Os designs acionados por ponteiro degradam em vez de quebrar A inclinação do giro e o ímã do Impulse precisam de uma posição de ponteiro que uma tela sensível ao toque não forneça, então, no celular, as placas tornam estáticas e tudo permanece legível e tocável O Bascule desliga seu flip abaixo de um ponto de interrupção deliberadamente.
Gyre também lida com o foco do teclado separadamente do hover Tab para um cartão e você obtém o elevador e o brilho sem a rotação A maioria dos efeitos de inclinação pular isso e deixar os usuários do teclado com nada.
Qual caixa de imagem do Elementor você deve realmente escolher?
Comece com a contagem de itens, não com o efeito.
- Dois a quatro itens, cada um importante: Solstício ou Verge.
- Exatamente três serviços: Riser, Giro ou Basculante.
- Quatro itens: Lúmen, Cascata, Kintsugi, Limiar ou Vellum.
- Seis itens iguais: Abertura.
- Oito ou mais: Frieze Strip se forem uma sequência, Filigree se forem uma lista.
- Imagens altas de retratos: Paliçada.
- Fotos que não combinam entre si: Refratar.
- Cada carta termina em um botão: Impulso.
Em seguida, verifique o efeito contra o seu assunto Kintsugi em um escritório de advocacia é uma piada de mau gosto Limiar em um jardim é quase muito legal Se a moção não diz algo sobre o trabalho, solte-o e use Riser.
Perguntas frequentes
O widget da caixa de imagem Elementor é gratuito?
Sim. A caixa de imagem vem no plugin Elementor gratuito, com imagem, título, descrição, link, posição da imagem e filtros básicos de hover. Os dezesseis designs nesta página são diferentes: são widgets Master Addons Widget Builder e precisam do Master Addons Pro para editar, embora os downloads em si sejam gratuitos.
Posso adicionar um botão a uma caixa de imagem do Elementor?
Não no widget de estoque, que liga toda a caixa em vez de dar-lhe um botão separado Para obter um botão real ou colocar um widget Botão debaixo dentro do mesmo recipiente, ou usar um design que inclui um Impulso, Abertura, Cascata e Giro todos enviar com um botão no cartão.
Como faço caixas de imagem Elementor com a mesma altura?
Coloque as caixas em um contêiner flexível e defina os Itens de Alinhamento do contêiner para Esticar, depois defina cada coluna da caixa de imagem para a altura total Comprimentos de texto desiguais são a causa usual Todo design nesta página lida com alturas iguais em seu próprio CSS, para que o problema não surja.
Qual é a diferença entre uma caixa de imagem e um widget de imagem?
Um widget de imagem coloca uma única imagem com uma legenda e link opcionais Uma caixa de imagem é uma composição: imagem, título, descrição e link em um bloco, estilizado e espaçado como uma unidade Use o widget de imagem para uma foto independente, a caixa de imagem para um cartão em uma grade.
Preciso do Elementor Pro para esses designs?
Não. Elementor livre é suficiente, porque os projetos são construídos com Master Addons em vez de widgets Elementor Pro. O que você precisa é Master Addons Pro, uma vez que cada design usa controles Widget Builder (repetidor, tipografia, dimensões, borda, ícones, guias) que estão bloqueados no plugin livre.
Onde ir a seguir
Se você quiser designs mais importáveis, o 20 modelos de controle deslizante Elementor a coleção é o irmão mais próximo desta página e oito deles são executados no plugin gratuito Para carrosséis especificamente, consulte Widgets carrossel elementador, ou o que é realmente grátis se a questão da licença for aquela que você gosta.
Para padrões de cartão relacionados: hotspots imagem para anotar uma única imagem grande, seções membros da equipe para pessoas e não para serviços, e Animações flipbox 3D se o Bascule chamou a sua atenção Os detalhes da licença estão no página preços, e a lista completa de widgets está dentro Mais de 100 melhores complementos Elementor.
