Boîte d'images d'élément : 16 designs avec démos et téléchargement en direct

Une boîte d'image Elementor est un widget qui associe une image à un titre et une brève description dans un bloc lié. C'est ainsi que la plupart des sites WordPress construisent des grilles de services, des lignes de fonctionnalités et des sections d'équipe Elementor en expédie une gratuitement ; les seize designs ci-dessous la remplacent par des mises en page et déplacent le widget par défaut ne peut pas produire.

Parce que tout le monde a le même widget, la section services sur un site de plombier à Leeds est disposée à l'identique de celle d'un studio de design à LisbonneMêmes trois colonnes, même image centrée, même écart de 16 px.

Nous avons donc construit seize remplacements Chacun est un widget Elementor fonctionnel, chacun a une démo en direct que vous pouvez ouvrir dès maintenant et un lien de téléchargement sur cette page Vous n'avez pas besoin de remettre une adresse e-mail ou de créer un compte pour en obtenir une.

Sur cette page

Les 16 designs en un coup d'œil

Ce dont vous avez besoin pour exécuter ces

Sans élément est suffisant pour la page elle-même Les conceptions sont une autre affaire.

• Tous les seize ont besoin de Master Addons. Chacun d'eux est construit sur des commandes (répéteur, typographie, dimensions, bordure, sélecteur d'icônes, onglets) qui sont complètes Constructeur de widgets fournit. Le plugin gratuit dispose d'un Widget Builder, mais ces commandes s'affichent comme verrouillées.
• Les téléchargements sur cette page sont gratuits et non-gated. Prenez le JSON et gardez-le Vous pouvez modifier des options limitées dans la version gratuite Mais la version pro débloque tout.
• Les démos live ne coûtent rien du tout. Ouvrez-en un, redimensionnez le navigateur, faites glisser une carte, tabulez avec le clavier C'est la façon honnête de juger si un style de mouvement correspond à votre contenu, et c'est gratuit.

Si vous souhaitez des conceptions qui fonctionnent sur le plugin gratuit, les huit widgets gratuits de notre Modèles de curseurs d'éléments la collection n'utilise aucun contrôle Pro et plusieurs d'entre eux sont des dispositions de cartes plutôt que des curseurs.

01. Boîtes d'images Lumen

Démo en direct   Télécharger Widget JSON

Quatre cartes sur un fond presque noir Déplacez le pointeur sur elles et une lumière douce bouge avec, égayant la partie de l'image sous votre curseur et laissant le reste sombre La carte que vous regardez est la carte qui est allumée.

Ce qui le fait fonctionner, c'est la retenue Les cartes ne bougent pas et ne s'échelonnent pas en vol stationnaire La seule chose qui change, c'est là où la lumière tombe, ce qui est proche de la façon dont on regarderait réellement les objets sur un établi sous une lampe.

Utilisez-le pour: services techniques, sites sur le thème sombre, tout ce qui est photographié sur un sol sombre.

Ne l'utilisez pas pour : fonds blancs Les projecteurs n'ont rien contre quoi travailler et le tout se lit comme un état de vol stationnaire légèrement sale.

02. Boîtes d'images de verge

Démo en direct   Télécharger Widget JSON

Deux colonnes, volontairement décalées, de sorte que la colonne de droite se trouve plus bas que la gauche Chaque plaque s'ouvre en croisant en vue Les titres portent une petite flèche circulaire, et en dessous d'eux se trouve une étiquette sourcilière en calottes espacées de lettres : SNOWCRAFT, SUMMITS, TRAVERSES.

Ce décalage fait un vrai travail Une grille droite indique à l'œil de parcourir en lignes et elle arrête de lire Décaler les colonnes et elle doit plutôt parcourir la page, ce qui est la direction que vous souhaitez réellement.

Utilisez-le pour: pages éditoriales, guides, tout ce qui comporte quatre à six éléments substantiels.

Ne l'utilisez pas pour : plus d'environ huit articles Le décalage s'accumule et la page devient très haute, très rapide.

03. Boîtes d'images d'ouverture

Démo en direct   Télécharger Widget JSON

Six boîtes sur deux rangées de trois, sur du papier gris chaud Chaque image est masquée et le masque s'ouvre vers l'extérieur lorsque la rangée arrive, comme le fait une ouverture d'objectif Chaque carte porte un petit lien VOIR DÉTAILS sous sa description.

C'est celui qu'il faut atteindre quand on a six choses et qu'elles sont véritablement égales La plupart des mises en page de boîtes d'images classent tranquillement leurs objets par taille ou position Celui-ci ne le fait pas.

Utilisez-le pour: services de chambre noire et d'impression, grilles de fonctionnalités de six éléments, tout ce qui est photographique.

Ne l'utilisez pas pour : trois éléments Le rythme à deux rangées est tout le design et une seule rangée de trois le perd.

04. Boîtes d'images de bascules

Démo en direct   Télécharger Widget JSON

Nommée d'après le pont, pas la balance Chaque carte tourne sur une charnière horizontale et il y a une vraie face arrière qui attend derrière elle, pas un filtre CSS sur la même image mais une vraie deuxième face dans laquelle vous écrivez une copie.

Une note de sa construction : le flip s'éteint sous un point d'arrêt, et c'est exprès Une animation de charnière sur un téléphone signifie qu'un tap fait quelque chose d'inattendu, et le correctif est de ne pas le faire plutôt que de le faire plus lentement.

Utilisez-le pour: avant et après, fiches techniques, tout ce qui intéresse le deuxième élément d'information comme le premier.

Ne l'utilisez pas pour : votre navigation principale dans une page Le contenu derrière un flip est un contenu que la plupart des visiteurs ne voient jamais.

05. Boîtes d'images en cascade

Démo en direct   Télécharger Widget JSON

Quatre cartes qui arrivent l'une après l'autre plutôt qu'ensemble, chacune se fixant un battement derrière la dernière La différence est faible, mais vous le sentez La section vous est distribuée au lieu de simplement apparaître.

Chaque carte porte un lien DATES DE COURS, qui est le cadeau pour ce à quoi sert réellement cette mise en page : des choses qui reviennent, dans un ordre, où l'ordre compte.

Utilisez-le pour: services de studio et d'atelier, listes de cours, étapes du processus.

Ne l'utilisez pas pour : au-dessus du pli. Décaler l'entrée de la première chose qu'un visiteur voit et votre site se sent lent même quand il ne l'est pas.

06. Boîtes d'images en filigrane

Démo en direct   Télécharger Widget JSON

Le calme. Des vignettes de la taille d'un timbre-poste, des règles capillaires, deux colonnes, quatre articles dans l'espace que la plupart de ces modèles utilisent pour un. Type de jeu à main, plaques en polymère, découpe, peinture de bord : une liste de commerce, disposée comme une liste de commerce.

C'est ici parce que toutes les sections de services ne méritent pas un traitement de héros Parfois, il y a onze choses que vous faites et le visiteur veut les scanner, pas les admirer.

Utilisez-le pour: menus de service longs, listes de prix, métiers spécialisés avec beaucoup d'articles de ligne.

Ne l'utilisez pas pour : trois services de titres À ce compte, il semble que vous ayez oublié de terminer la section.

07. Bande de Frise

Démo en direct   Télécharger Widget JSON

La seule ici qui va de côté Les cartes s'écoulent du bord droit de l'écran et vous les faites glisser, les faites défiler ou utilisez les deux boutons fléchés ronds en haut à droite Une règle mince en dessous se remplit au fur et à mesure, donc vous savez toujours combien il reste.

Filage, gauchissement et rayonnage peignés, tissage en ratière, teinture en pièces, finition Cinq étapes d'un moulin dans l'ordre où elles se produisent Une grille aurait brisé cette séquence en rangées Une bande la maintient sur une ligne, ce qui est en fait ce qu'est une séquence de production.

Utilisez-le pour: des séquences de production, de longues listes qui détruiraient une grille, tout ce qui a un ordre inhérent.

Ne l'utilisez pas pour : quatre éléments Si tout rentre déjà à l'écran, vous demandez aux gens de faire défiler latéralement pour rien.

08. Boîtes d'images gyre

Démo en direct   Télécharger Widget JSON

Les cartes s'inclinent vers l'endroit où se trouve le pointeur, et un éclat traverse la surface lorsqu'elles bougent C'est l'effet que tout le monde a essayé en 2021 et que la plupart des gens ont fait trop d'inclinaison ici est de quelques degrés, pas quinze.

Les utilisateurs de clavier sont manipulés correctement, ce qui ne fait presque rien. Tablez sur une carte et vous obtenez l'ascenseur et le éclat mais pas de rotation, car un clavier n'a pas de position de pointeur vers laquelle tourner et simuler une est un non-sens.

Utilisez-le pour: produits physiques, cadres, produits fabriqués, tout ce qui a une surface qui mérite d'être pris en lumière.

Ne l'utilisez pas pour : cartes à forte teneur en texte. Incliner un paragraphe pendant que quelqu'un le lit est hostile.

09. Boîtes d'images impulsionnelles

Démo en direct   Télécharger Widget JSON

Les cartes se penchent vers votre curseur à l'approche, puis lâchent prise en partant. La traction est normalisée contre la moitié de la carte et serrée, donc une fois que vous avez dépassé le bord, elle cesse d'augmenter plutôt que de lancer la carte sur l'écran.

Chaque carte se termine par un bouton orange chaud Cours débutants, coaching, location de plateau Le magnétisme est un truc de page de réservation, car il donne l'impression au bouton qu'il veut être enfoncé, et il est gaspillé partout où la carte n'est pas un appel à l'action.

Utilisez-le pour: cours, location, réservations, tout ce qui se termine par une carte dans un bouton.

Ne l'utilisez pas pour : cartes d'information sans cible de clic Vous promettez une interaction que vous ne livrez pas.

10. Boîtes d'images Kintsugi

Démo en direct   Télécharger Widget JSON

Les images arrivent en morceaux et se réassemblent. Deux motifs de rupture s'expédient avec lui : trois pièces hautes, comme une vitre fissurée sur toute sa hauteur, et six cales rayonnant à partir d'un point décentré, qui se lit comme un impact plutôt que comme une rupture nette.

Vaisseaux soufflés, fonderie et four formés, restauration, banc d'enseignement La démo est un travail de verre partout Le design a été construit pour une boutique chaude et il montre, mais il atterrit partout où le sujet est quelque chose de fait, cassé, ou remis ensemble.

Utilisez-le pour: verre, céramique, restauration, réparation, conservation.

Ne l'utilisez pas pour : hôpitaux, assurances, tout ce qui “shattering” porte une signification que vous ne voulez pas.

11. Boîtes d'images palissades

Démo en direct   Télécharger Widget JSON

Trois panneaux hauts, chacun assemblé à partir de lames verticales qui arrivent en séquence, une clôture étant construite une planche à la fois Le nombre de lattes s'adapte à la largeur du panneau, de sorte qu'une colonne plus étroite obtient moins de planches plus larges au lieu du même nombre plus mince pressé.

Escaliers, fenêtres à guillotine, pièces aménagées Ce sont tous des sujets que vous photographieriez debout plutôt que couchés, et qui conviennent mieux à cette disposition qu'une carte de paysage ne le fera jamais.

Utilisez-le pour: menuiserie, architecture, intérieurs, plans de produits hauts.

Ne l'utilisez pas pour : photographie de paysage. Des panneaux de portrait recadrent l'image dans une fente et vous perdez la photo.

12. Réfracter les boîtes d'images

Démo en direct   Télécharger Widget JSON

Un lavis couleur se trouve sur chaque image en mode mélange, donc quatre photographies prises quatre jours différents sous quatre lumières différentes apparaissent comme un seul ensemble. C'est le travail réel ici, et c'est moins glamour qu'il n'y paraît.

Enregistrement de localisation, foley et accessoires, restauration, licence de bibliothèque C'est un travail sonore, où la photographie de stock est inévitable et les images ne correspondent jamais, donc le lavage cache les coutures.

Utilisez-le pour: imagerie mixte, photos d'archives, tout ce que vous ne pouvez pas refaire.

Ne l'utilisez pas pour : précision de la couleur du produit. Un lavage sur un échantillon de peinture est un problème de retour.

13. Boîtes d'images de colonne montante

Démo en direct   Télécharger Widget JSON

Les cartes montent par le bas avec un bout de légende affiché en bas. La lèvre est mesurée par rapport au texte qu'elle contient plutôt que réglée à une hauteur fixe, donc une légende de deux mots et une de deux lignes sont toutes deux correctement placées au lieu d'une coupure.

Commissions sur mesure, reformulation, production en petits lots Trois articles, trois images sombres, chrome minimal C'est le design le plus conventionnel du set Parfois, vous voulez que la mise en page s'écarte du chemin de l'œuvre.

Utilisez-le pour: agences, sociétés de production, pages à trois services.

Ne l'utilisez pas pour : longues descriptions La lèvre est une légende, pas un paragraphe.

14. Boîte d'images du solstice

Démo en direct   Télécharger Widget JSON

Les plus grandes cases de l'ensemble Deux colonnes, volontairement décalées, images suffisamment grandes pour être réellement regardées Un traitement au duotone relie les images et peut être déposé par carte si une photo la combat.

Rôtissage en gros, sourcing vert, calibrage expresso Trois services étant donné l'espace de six Utilisez-le lorsque vous avez peu de choses à dire et qu'ils valent un écran entier chacun.

Utilisez-le pour: deux à quatre services premium, pages de contes, marques de café et de produits alimentaires.

Ne l'utilisez pas pour : six éléments ou plus. Ce design à six éléments est une très longue page dont personne n'atteint le bas.

15. Boîte d'images de seuil

Démo en direct   Télécharger Widget JSON

Deux portes sont fermées sur chaque image et se séparent au milieu lorsque la carte entre en vue Les portes sont construites à partir de la source propre de l'image, de sorte qu'elles ne correspondent jamais à l'image derrière elles.

Fond vert profond, quatre cartes : collections de serre, banque de graines, jardin d'hiver, cours d'études Utiliser des portes pour une section sur l'entrée dans un jardin est évident, et dans ce cas évident est bien.

Utilisez-le pour: jardins, lieux, ouvertures, tout ce dans quoi un visiteur entre physiquement.

Ne l'utilisez pas pour : douze cartes Douze ensembles de portes s'ouvrant, c'est beaucoup de portes.

16. Boîte d'images en vélin

Démo en direct   Télécharger Widget JSON

Chaque carte s'ouvre à partir d'un clip tandis qu'un flou doux efface l'image, comme le papier tiré. Chaque carte de la section est armée d'un seul commit, ce qui signifie une passe de mise en page pour toute la rangée plutôt qu'une par carte.

Reliure de cas, conservation, boîtes et enclos, travail d'édition La démo est une reliure C'est le mouvement le plus doux du plateau et celui le plus susceptible de survivre à un client qui dit détester l'animation.

Utilisez-le pour: archives, reliure, conservation, marques calmes et chères.

Ne l'utilisez pas pour : tout ce qui a besoin d'urgence Cette conception n'en a pas et ne fait pas semblant.

Que peut faire le widget par défaut de la boîte d'image Elementor ?

La boîte d'image gratuite Elementor vous donne une image, un titre, une description et un lien optionnel Dans l'onglet Style vous pouvez définir la largeur de l'image, le rayon de la bordure, l'espacement entre l'image et le texte, l'alignement, et la position de l'image (en haut, à gauche ou à droite).Les effets de survol sont limités aux filtres et transformations CSS globaux d'Elementor.

Cela couvre beaucoup de sites, et s'il couvre le vôtre, utilisez-le Vous n'avez pas besoin d'addon pour mettre une image au-dessus d'un titre.

Là où il s'épuise, c'est le mouvement et la structure Il n'y a pas de face arrière, pas de séquençage par carte, pas de disposition horizontale, pas moyen de faire en sorte qu'une carte se comporte différemment de ses voisines Ce sont les lacunes que les seize dessins ci-dessus comblent.

Boîte image vs boîte icône : que devez-vous utiliser ?

Utilisez une boîte d'image lorsque l'image est le contenu, comme une photographie de l'œuvre, de la pièce ou du produit Utilisez une boîte à icônes lorsque l'image est une décoration et que les mots portent le sens Les widgets sont par ailleurs presque identiques : tous deux associent un graphique à un titre et une description dans un bloc lié.

Le test pratique est de savoir si vous remarqueriez si le graphique a disparu Si une grille de services se lit toujours bien avec les icônes disparues, elles étaient décoratives et une boîte d'icônes était le bon appel Si la suppression des images vous laisse avec une liste de noms, vous aviez besoin d'une boîte d'image.

Une troisième option que les gens oublient : a flipbox(en), qui est une boîte d'image avec un dos Bascule ci-dessus est cette idée reconstruite avec une charnière.

Comment ajouter un effet de survol à une boîte d'image Elementor ?

Sélectionnez le widget, ouvrez l'onglet Style, développez la section Image et passez à l'onglet Survoler Vous obtenez de l'opacité, des filtres CSS (flou, luminosité, saturation, contraste, teinte) et une durée de transition Pour les transformations comme l'échelle ou la rotation, utilisez les commandes de survol de l'onglet Avancé.

C'est toute la surface intégrée Tout ce qui se trouve au-delà, comme une lumière qui suit le curseur, une traction magnétique ou un éclat qui se croise lors de l'inclinaison, a besoin d'un CSS personnalisé ou d'un widget qui expédie le comportement.

Si c'est spécifiquement des effets de texte sur image que vous recherchez, nous avons catalogué 25+ Texte de l'élémenteur sur les effets de survol de l'image séparément, et ceux-ci fonctionnent avec le widget stock.

Comment importer ces modèles de boîtes d'images Elementor

Téléchargez le JSON depuis n'importe quelle conception ci-dessus, puis dans WordPress, accédez à Modules complémentaires principaux → Widget Builder → Importer un widget et téléchargez le fichier Le widget apparaît dans le panneau Elementor sous Favoris, avec ses propres contrôles dans les onglets Contenu et Style.

1. Cliquez Télécharger Widget JSON sur le design que vous souhaitez Le zip contient le JSON et une image d'aperçu.
2. Décompressez-le. Le propre importateur de modèles d'Elementor ne lira pas ce fichier, car il va au Widget Builder plutôt qu'aux modèles.
3. Aller à Modules complémentaires principaux → Créateur de widgets et choisissez Importer Widget.
4. Téléchargez le JSON. Modifiez n'importe quelle page avec Elementor et recherchez dans le panneau le nom du widget.
5. Remplacez les images et le texte de l'espace réservé Les cartes sont un répéteur, alors ajoutez ou supprimez des éléments là-bas plutôt que de dupliquer le widget.

L'erreur courante est l'étape 2. ce sont des widgets Widget Builder, pas Modèles de section d'élémentateur(en), donc les importer via Modèles → Import échouera et le message d'erreur n'explique pas pourquoi.

Ces boîtes d'images fonctionnent-elles sur mobile, et sont-elles accessibles ?

Oui aux deux, avec une mise en garde au niveau de la conception Chaque widget ici respecte prefers-reduced-motion: si un visiteur a activé le mouvement réduit au niveau OS, les animations d'entrée ne s'exécutent pas et les cartes s'affichent dans leur état final C'est géré dans le widget, pas laissé à vous.

Les conceptions pilotées par pointeur se dégradent plutôt que se cassent L'inclinaison de Gyre et l'aimant d'Impulse ont besoin d'une position de pointeur qu'un écran tactile ne fournit pas, donc sur mobile les cartes rendent statiques et tout reste lisible et appuyable Bascule déclenche délibérément son retournement en dessous d'un point d'arrêt.

Gyre gère également le focus du clavier séparément du vol stationnaire Tab to a card et vous obtenez le lift et le sheen sans la rotation La plupart des effets d'inclinaison sautent cela et laissent les utilisateurs de clavier avec rien.

Quelle boîte d'image Elementor devriez-vous réellement choisir ?

Partez de votre nombre d'articles, pas de l'effet.

• Deux à quatre éléments, chacun important : Solstice ou Verge.
• Exactement trois services : Riser, Gyre ou Bascule.
• Quatre éléments: Lumen, Cascade, Kintsugi, Seuil ou Vellum.
• Six éléments égaux : Ouverture.
• Huit ou plus : Frieze Strip s'il s'agit d'une séquence, Filigree s'il s'agit d'une liste.
• Grande, imagerie de portrait : Palissade.
• Des photos qui ne correspondent pas entre elles : Réfracter.
• Chaque carte se termine par un bouton : Impulsion.

Vérifiez ensuite l'effet contre votre sujet Kintsugi sur un cabinet d'avocats est une mauvaise blague Le seuil sur un jardin est presque trop soigné Si la motion ne dit pas quelque chose sur l'œuvre, laissez tomber et utilisez Riser.

Questions fréquemment posées

Où aller ensuite

Si vous voulez des designs plus importables, le 20 modèles de curseurs d'éléments collection est le frère le plus proche de cette page et huit d'entre eux fonctionnent sur le plugin gratuit. Pour les carrousels en particulier, voir Widgets de carrousel d'éléments; ou ce qui est réellement gratuit si la question du permis est celle qui vous tient à cœur.

Pour les modèles de cartes associés : points chauds de l'image pour annoter une seule grande image, sections membres de l'équipe pour les personnes plutôt que les services, et Animations de la boîte à feuilles 3D si Bascule a attiré votre attention Les détails de la licence sont sur le page de tarification20, et la liste complète des widgets est disponible Plus de 100 meilleurs modules complémentaires d'élément.