Elementor-Bildbox: 16 Designs mit Live-Demos und Download

Eine Elementor-Bildbox ist ein Widget, das ein Bild mit einer Überschrift und einer kurzen Beschreibung in einem verknüpften Block koppelt. So erstellen die meisten WordPress-Sites Servicegitter, Funktionszeilen und Teamabschnitte. Elementor liefert einen kostenlos aus; Die sechzehn folgenden Designs ersetzen es durch Layouts und Bewegungen, die das Standard-Widget nicht erzeugen kann.

Da jeder das gleiche Widget hat, ist der Dienstleistungsbereich auf der Website eines Klempners in Leeds identisch mit dem eines Designstudios in Lissabon angelegt. Gleiche drei Spalten, gleiches zentriertes Bild, gleiche 16-fach-Lücke.

Also haben wir sechzehn Ersatz gebaut, jedes ist ein funktionierendes Elementor-Widget, jedes hat eine Live-Demo, die Sie gerade öffnen können und einen Download-Link auf dieser Seite Sie brauchen keine E-Mail-Adresse abzugeben oder ein Konto zu erstellen, um eine zu bekommen.

Auf dieser Seite

Die 16 Designs im Überblick

#DesignWas es tutAm besten für
01Lumen-BildboxenEine Lichtquelle folgt Ihrem Cursor über die KarteDunkle Seiten, technische Dienstleistungen
02Bildboxen mit RandVersetzte Platten, die sich öffnen, wenn Sie vorbeiscrollenRedaktion, Guides, Outdoor-Marken
03AperturbildkästenJedes Bild öffnet sich aus einer abgeschnittenen BlendeFotografie, Druck, Sechs-Punkte-Raster
04Bascule-BildboxenKarten drehen sich auf einem Scharnier und zeigen eine RückseiteVorher und nachher, spec verrät
05KaskadenbildboxenVier Karten werden nacheinander abgerechnet, nicht alle auf einmalProzessschritte, Studio-Services
06Filigrane BildboxenKleine Thumbnails, feine Regeln, dichte ZweispaltenlisteLangdienstmenüs, Preislisten
07FriesstreifenEin horizontaler Streifen, durch den Sie ziehen oder scrollenLange Sequenzen, Produktionslinien
08Gyre-BildboxenKarten neigen sich mit einem Glanz zum ZeigerProdukte, handgefertigte Waren
09Impulse Image BoxenKarten ziehen wie ein Magnet zum CursorBuchungen, Kurse, Miete
10Kintsugi-BildboxenBilder kommen als Scherben an und werden wieder zusammengesetztHandwerk, Glas, Keramik, Restaurierung
11Palisade-BildboxenHohe Platten aus vertikalen LamellenWerkstätten, Tischlerei, schmale Säulen
12Bildboxen brechenÜber jedem Bild befindet sich eine Farbwäsche im MischmodusStudios, Musik, Lizenzierung
13Bilderboxen von RiserKarten werden mit einer Lippe an ihren Platz gebracht, die zu ihrem Text passtAgenturen, Produktion
14Bildbox zur SonnenwendeGroßes gestaffeltes Paar mit DuotonbehandlungKaffee, Beschaffung, Geschichtenerzählen
15Schwellenwert-BildfeldIn der Mitte trennen sich die Türen, um das Bild freizulegenZüchter, Baumschulen, Verrät
16Vellum-BildboxEine weiche Unschärfe klärt sich, wenn sich die Kartenklammern öffnenBindung, Archive, ruhige Marken

Was Sie brauchen, um diese auszuführen

Elementorfrei reicht für die Seite selbst Die Designs sind eine andere Sache.

  • Alle sechzehn brauchen Master-Addons. Jeder von ihnen basiert auf Bedienelementen (Repeater, Typografie, Abmessungen, Rand, Symbolauswahl, Registerkarten), die vollständig sind Widget-builder Stellt. Das kostenlose Plugin hat einen Widget Builder, aber diese Steuerelemente werden als gesperrt angezeigt.
  • Die Downloads auf dieser Seite sind kostenlos und ungekoppelt. Schnapp dir den JSON und behalte ihn. Du kannst begrenzte Optionen in der kostenlosen Version ändern. Aber pro Version takte alles ab.
  • Die Live-Demos kosten überhaupt nichts. Öffnen Sie einen, ändern Sie die Größe des Browsers, ziehen Sie eine Karte, tabulieren Sie mit der Tastatur durch. Das ist die ehrliche Art zu beurteilen, ob ein Motion Style zu Ihren Inhalten passt, und das ist kostenlos.

Wenn Sie Designs wünschen, die auf dem kostenlosen Plugin ausgeführt werden, finden Sie die acht kostenlosen Widgets in unserem Elementorschiebervorlagen Die Sammlung verwendet keine Pro-Steuerelemente und einige davon sind Kartenlayouts und keine Schieberegler.

01. Lumen-Bildboxen

Lumen Elementor-Bildfelddesign, das vier dunkle Karten mit einem Cursor-Lichtdurchlauf über jedes Bild zeigt

Live-Demo   Widget JSON herunterladen

Vier Karten auf nahezu schwarzem Hintergrund Bewegen Sie den Zeiger darüber und ein weiches Licht bewegt sich mit ihm, hellt den Teil des Bildes unter Ihrem Cursor auf und lässt den Rest schwach zurück Die Karte, die Sie betrachten, ist die Karte, die beleuchtet ist.

Was es zum Laufen bringt, ist die Zurückhaltung Die Karten bewegen sich nicht und skalieren nicht im Schwebeflug, das einzige was sich ändert ist, wo das Licht fällt, was nahe daran ist, wie man eigentlich Objekte auf einer Werkbank unter einer Lampe betrachten würde.

Verwenden Sie es für: Technische Dienstleistungen, Websites mit dunklem Thema, alles, was vor dunklem Boden fotografiert wurde.

Nicht verwenden für: Weiße Hintergründe Der Scheinwerfer hat nichts gegen das er arbeiten kann und das Ganze liest sich als leicht schmuddeliger Schwebezustand.

02. Bildboxen mit Rand

Bildboxdesign Verge Elementor mit versetzten Zweispaltenplatten, Augenbrauenbeschriftungen und kreisförmigen Pfeilverbindungen

Live-Demo   Widget JSON herunterladen

Zwei Säulen, bewusst aus der Stufe, so sitzt die rechte Säule tiefer als die linke Jede Platte öffnet sich beim Einsehen Titel tragen einen kleinen kreisförmigen Pfeil, und darunter sitzt ein Augenbrauen-Etikett in buchstabengetrennten Kappen: SNOWCRAFT, SUMMITS, TRAVERSES.

Dieser Offset macht echte Arbeit Ein gerades Gitter sagt dem Auge, es solle in Reihen hinüberscannen, und es hört auf zu lesen. Staffelung der Spalten und es muss stattdessen die Seite hinunterfahren, was die Richtung ist, die Sie tatsächlich wollen.

Verwenden Sie es für: Redaktionsseiten, Leitfäden, alles mit vier bis sechs wesentlichen Artikeln.

Nicht verwenden für: Mehr als etwa acht Artikel Der Staffelung sammelt sich an und die Seite wird sehr hoch, sehr schnell.

03. Bilderboxen mit Blende

Aperture Elementor Bildbox-Design mit sechs Karten in zwei Reihen, wobei sich jedes Bild aus einer abgeschnittenen Blende öffnet

Live-Demo   Widget JSON herunterladen

Sechs Kästchen in zwei Dreierreihen, auf warmem Papiergrau Jedes Bild wird maskiert und die Maske öffnet sich nach außen, wenn die Reihe ankommt, so wie es eine Linsenblende tut Jede Karte trägt unter ihrer Beschreibung einen kleinen SEE DETAILS Link.

Das ist diejenige, nach der man greifen kann, wenn man sechs Dinge hat und sie wirklich gleich sind Die meisten Bildbox-Layouts ordnen ihre Gegenstände ruhig nach Größe oder Position ein Dieses nicht.

Verwenden Sie es für: Dunkelkammer- und Druckdienste, sechs Elemente umfassende Funktionsraster, alles Fotografische.

Nicht verwenden für: Drei Items. Der zweireihige Rhythmus ist das ganze Design und eine einzelne Dreierreihe verliert es.

04. Bascule-Bildboxen

Bascule Elementor Bildbox-Design mit drei Karten auf schwarzem Hintergrund, die ein Scharnier einschalten, um eine Rückseite zu zeigen

Live-Demo   Widget JSON herunterladen

Benannt nach der Brücke, nicht nach dem Guthaben Jede Karte schaltet ein horizontales Scharnier ein und dahinter wartet eine echte Rückseite, kein CSS-Filter über demselben Bild sondern eine tatsächliche zweite Seite, in die man kopiert.

Ein Hinweis vom Aufbau: der Flip schaltet sich unterhalb eines Haltepunktes aus, und das mit Absicht Eine Scharnieranimation auf einem Telefon bedeutet, dass ein Tippen etwas Unerwartetes bewirkt, und die Lösung besteht darin, es nicht zu tun, anstatt es langsamer zu machen.

Verwenden Sie es für: Vorher und Nachher, Spec Sheets, alles, wo die zweite Information so interessant ist wie die erste.

Nicht verwenden für: Ihre primäre Navigation in eine Seite Inhalt hinter einem Flip ist Inhalt, den die meisten Besucher nie sehen.

05. Kaskadenbildkästen

Cascade Elementor-Bildbox-Design mit vier weißen Karten, die sich nacheinander an ihren Platz setzen

Live-Demo   Widget JSON herunterladen

Vier Karten, die eher nacheinander als zusammen ankommen, wobei jede einen Schlag hinter der letzten abrechnet Der Unterschied ist gering, aber man spürt ihn Der Abschnitt wird einem ausgeteilt, anstatt nur zu erscheinen.

Jede Karte trägt einen Link zu KURSTERMINEN, der das Giveaway dafür ist, wozu dieses Layout wirklich dient: Dinge, die in einer Reihenfolge wiederkehren, bei der es auf die Reihenfolge ankommt.

Verwenden Sie es für: Atelier - und Werkstattleistungen, Kurseinträge, Prozessschritte.

Nicht verwenden für: Über der Falte Stapfen Sie den Eingang des ersten, was ein Besucher sieht, und Ihre Website fühlt sich langsam an, auch wenn dies nicht der Fall ist.

06. Filigrane Bildboxen

Filigranes Elementor-Bildbox-Design mit kleinen Miniaturansichten und feinen Regeln in einer dichten zweispaltigen Liste

Live-Demo   Widget JSON herunterladen

Die ruhige Thumbnails in der Größe einer Briefmarke, Haarlinienregeln, zwei Spalten, vier Gegenstände im Raum die meisten dieser Designs verwenden für eine Handsatzart, Polymerplatten, Stanzschnitt, Kantenanstrich: eine Handelsliste, wie eine Handelsliste angelegt.

Es ist hier, weil nicht jeder Dienstleistungsbereich eine Heldenbehandlung verdient Manchmal gibt es elf Dinge, die man tut, und der Besucher möchte sie scannen, nicht bewundern.

Verwenden Sie es für: Long Service Menüs, Preislisten, Fachhandwerke mit vielen Linienartikeln.

Nicht verwenden für: Drei Überschriftendienste Bei dieser Zählung sieht es so aus, als hättest du vergessen, den Abschnitt fertigzustellen.

07. Friesstreifen

Bildboxdesign von Frieze Strip Elementor, das eine horizontale, dragierbare Kartenreihe mit Fortschrittsregel und Pfeilsteuerungen zeigt

Live-Demo   Widget JSON herunterladen

Die einzige hier, die seitwärts geht Karten laufen am rechten Bildschirmrand ab und man zieht sie, scrollt sie, oder benutzt die beiden runden Pfeiltasten oben rechts Eine dünne Regel darunter füllt sich im Laufe der Zeit, so dass man immer weiß, wie viel übrig bleibt.

Kammgarnspinnen, Verziehen und Beamen, Dobby-Weben, Stückfärben, Veredeln Fünf Stufen einer Mühle in der Reihenfolge, in der sie passieren Ein Gitter hätte diese Folge in Reihen zerbrochen Ein Streifen hält sie auf einer Linie, was eine Produktionsfolge eigentlich ist.

Verwenden Sie es für: Produktionssequenzen, lange Listen, die ein Raster zerstören würden, alles mit einer inhärenten Ordnung.

Nicht verwenden für: Vier Artikel Wenn auf dem Bildschirm schon alles passt, verlangst du von den Leuten, dass sie umsonst seitwärts scrollen.

08. Gyre-Bildboxen

Gyre Elementor-Bildbox-Design mit drei Karten, die zum Zeiger hin geneigt sind und einen Glanz bekommen

Live-Demo   Widget JSON herunterladen

Karten neigen sich dorthin, wo sich der Zeiger befindet, und ein Glanz kreuzt die Oberfläche, während sie sich bewegen. Es ist der Effekt, den alle im Jahr 2021 ausprobiert haben und die meisten Leute übertrieben haben. Die Neigung beträgt hier ein paar Grad, nicht fünfzehn.

Tastaturbenutzer werden richtig behandelt, was fast nichts tut Tab auf eine Karte und man bekommt den Lift und den Glanz aber keine Drehung, denn eine Tastatur hat keine Zeigerposition, auf die man sich zu drehen hat und eine vortäuschen ist Unsinn.

Verwenden Sie es für: Physische Produkte, Rahmen, handgefertigte Waren, alles mit einer Oberfläche, die es wert ist, Licht zu fangen.

Nicht verwenden für: Textlastige Karten Einen Absatz kippen, während ihn jemand liest, ist feindselig.

09. Impulsbildboxen

Impulse Elementor Bildbox-Design mit drei Karten, die zum Cursor ziehen, und orangefarbenen Call-to-Action-Tasten

Live-Demo   Widget JSON herunterladen

Karten neigen sich zu Ihrem Cursor, wenn er sich nähert, und lassen dann los, wenn er geht. Der Zug wird gegen die Hälfte der Karte normalisiert und festgeklemmt. Sobald Sie also am Rand vorbei sind, nimmt er nicht mehr zu, anstatt die Karte über den Bildschirm zu werfen.

Jede Karte endet in einem heißen orangefarbenen Knopf Anfängerkurse, Coaching, Boardhire Magnetismus ist ein Buchungsseiten-Trick, denn er gibt dem Knopf das Gefühl, er möchte gedrückt werden, und er wird überall dort verschwendet, wo die Karte kein Aufruf zum Handeln ist.

Verwenden Sie es für: Unterricht, Miete, Buchungen, alles, wo jede Karte in einem Knopf endet.

Nicht verwenden für: Informationskarten ohne Klickziel Du versprichst eine Interaktion, die Du nicht lieferst.

10. Kintsugi-Bildboxen

Kintsugi Elementor-Bildbox-Design, bei dem jedes Bild als Scherben ankommt und sich wieder zu einem Gesamtbild zusammensetzt

Live-Demo   Widget JSON herunterladen

Bilder kommen in Teilen an und setzen sich wieder zusammen. Zwei Bruchmuster werden mit ihm geliefert: drei hohe Teile, wie eine über die Höhe gerissene Scheibe, und sechs Keile, die von einem außermittig angeordneten Punkt ausgehen, der sich eher als Aufprall als als sauberer Bruch ansieht.

Geblasene Gefäße, gegossen und Ofen geformt, Restaurierung, Lehrbank Die Demo ist durchgehend Glasarbeit Der Entwurf wurde für eine heiße Werkstatt gebaut und es zeigt, aber es landet überall dort, wo das Motiv etwas gemacht, gebrochen oder wieder zusammengesetzt ist.

Verwenden Sie es für: Glas, Keramik, Restaurierung, Reparatur, Konservierung.

Nicht verwenden für: Krankenhäuser, Versicherungen, alles, wo “Zertrümmern” einen Sinn in sich trägt, den man nicht haben will.

11. Palisaden-Bildboxen

Palisade Elementor Bildbox-Design mit drei hohen vertikalen Paneelen, die aus Lamellen zusammengesetzt sind

Live-Demo   Widget JSON herunterladen

Drei hohe Platten, die jeweils aus vertikalen Lamellen zusammengesetzt sind, die nacheinander ankommen, wobei jeweils ein Zaun von einer Tafel nach der anderen gebaut wird. Die Lamellenanzahl passt sich der Plattenbreite an, sodass eine schmalere Säule weniger, breitere Bretter erhält, anstatt dass die gleiche Anzahl dünner gepresst wird.

Treppen, Schiebefenster, Einbauräume All das sind Motive, die man im Stehen fotografieren würde, anstatt sich hinzulegen, und das passt besser zu diesem Layout, als es eine Landschaftskarte jemals tun wird.

Verwenden Sie es für: Tischlerei, Architektur, Innenräume, hohe Produktaufnahmen.

Nicht verwenden für: Landschaftsfotografie Porträtplatten schneiden das Bild in einen Schlitz und man verliert die Aufnahme.

12. Bildboxen brechen

Refract Elementor-Bildbox-Design mit vier Karten unter einer Blend-Mode-Farbwäsche

Live-Demo   Widget JSON herunterladen

Über jedem Bild im Blend-Modus sitzt ein Color Wash, so kommen vier an vier verschiedenen Tagen in vier verschiedenen Lichtern gedrehte Fotografien heraus, die wie ein Set aussehenDas ist hier die eigentliche Aufgabe, und es ist weniger glamourös, als es klingt.

Standortaufnahme, Foley und Requisiten, Restaurierung, Bibliothekslizenzierung Es ist Tonarbeit, bei der Stockfotografie unvermeidbar ist und die Bilder nie übereinstimmen, so dass die Wäsche die Nähte verbirgt.

Verwenden Sie es für: Mixed-Source-Bilder, Stockfotos, alles, wo man nicht neu drehen kann.

Nicht verwenden für: Genauigkeit der Produktfarbe Ein Waschen über einer Farbprobe ist ein Rückgabeproblem.

13. Bilderboxen für Aufsteiger

Riser Elementor-Bildbox-Design mit drei dunklen Karten, die an ihren Platz ragen, wobei jede Lippe der Bildunterschrift entspricht

Live-Demo   Widget JSON herunterladen

Karten steigen von unten auf, unten ist eine Untertitellippe zu sehen. Die Lippe wird an dem darin enthaltenen Text gemessen und nicht auf eine feste Höhe eingestellt, sodass eine Untertitelung mit zwei Wörtern und eine mit zwei Zeilen beide korrekt sitzen und nicht einer davon.

Maßgeschneiderte Aufträge, Neuformulierung, Kleinserienfertigung Drei Artikel, drei dunkle Bilder, minimal Chrom Es ist das konventionellste Design im Set Manchmal möchte man, dass das Layout der Arbeit aus dem Weg geht.

Verwenden Sie es für: Agenturen, Produktionsfirmen, Drei-Service-Seiten.

Nicht verwenden für: Lange Beschreibungen Die Lippe ist eine Bildunterschrift, kein Absatz.

14. Sonnenwende-Bildfeld

Solstice Elementor Bildbox-Design mit großen versetzten Karten und einer Duoton-Bildbehandlung

Live-Demo   Widget JSON herunterladen

Die größten Kisten im Set Zwei Spalten, mit Absicht völlig außer Kontrolle geraten, Bilder, die groß genug sind, um sie tatsächlich anzusehen. Eine Duotone-Behandlung verlinkt über die Bilder und kann pro Karte fallen gelassen werden, wenn ein Foto dagegen kämpft.

Großhandel Rösten, Green Sourcing, Espressokalibrierung Drei Leistungen bei der Platzangabe von sechs. Nutzen Sie es, wenn Sie wenig zu sagen haben und sie jeweils einen ganzen Bildschirm wert sind.

Verwenden Sie es für: Zwei bis vier Premium-Services, Storytelling-Seiten, Kaffee - und Food-Marken.

Nicht verwenden für: Sechs oder mehr Artikel Dieses Design bei sechs Artikeln ist eine sehr lange Seite, auf der niemand den Grund erreicht.

15. Schwellenwert-Bildfeld

Bildboxdesign des Schwellenelementors auf Dunkelgrün, wobei sich die Türen in der Mitte teilen, um jedes Bild sichtbar zu machen

Live-Demo   Widget JSON herunterladen

Über jedem Bild sitzen zwei Türen geschlossen und trennen sich in der Mitte, wenn die Karte in Sicht kommt. Die Türen sind aus der eigenen Bildquelle gebaut, sodass sie nie nicht mit dem Bild dahinter übereinstimmen.

Tiefgrün, vier Karten: Gewächshaussammlungen, Samenbank, Wintergarten, Studiengänge Türen für einen Abschnitt über das Betreten eines Gartens zu benutzen ist naheliegend, und in diesem Fall ist offensichtlich in Ordnung.

Verwenden Sie es für: Gärten, Veranstaltungsorte, Öffnungen, alles, was ein Besucher physisch betritt.

Nicht verwenden für: Zwölf Karten Zwölf Türsätze öffnen sich sind viele Türen.

16. Vellum-Bildbox

Vellum Elementor Bildbox-Design mit vier Karten, deren weiche Unschärfe beim Öffnen der Kartenclips deutlich wird

Live-Demo   Widget JSON herunterladen

Jede Karte öffnet sich aus einem Clip, während eine weiche Unschärfe das Bild ablöst, wie Papier weggezogen wird Jede Karte im Abschnitt ist in einem einzigen Commit bewaffnet, was bedeutet, dass ein Layoutpass für die gesamte Reihe statt einer pro Karte vorhanden ist.

Case-Binding, Konservierung, Boxen und Gehege, Edition Arbeit Die Demo ist eine Buchbinderei Dies ist die sanfteste Bewegung im Set und diejenige, die am ehesten einen Kunden überlebt, der sagt, dass er Animationen hasst.

Verwenden Sie es für: Archive, Bindung, Konservierung, ruhige und teure Marken.

Nicht verwenden für: Alles, was Dringlichkeit braucht Dieses Design hat keine und gibt nicht vor.

Was kann das Standard-Elementor-Image-Box-Widget tun?

Die kostenlose Bildbox Elementor gibt Ihnen ein Bild, einen Titel, eine Beschreibung und einen optionalen Link, im Reiter Stil können Sie Bildbreite, Randradius, Abstand zwischen Bild und Text, Ausrichtung, und die Bildposition (oben, links oder rechts) einstellen, Hover-Effekte sind auf die globalen CSS-Filter und Transformationen von Elementor beschränkt.

Das deckt viele Seiten ab, und wenn es deine abdeckt, dann nutze es Du brauchst kein Addon, um ein Bild über eine Überschrift zu setzen.

Wo es ausgeht, ist Bewegung und Struktur. Es gibt keine Rückseite, keine Reihenfolge pro Karte, kein horizontales Layout, keine Möglichkeit, eine Karte dazu zu bringen, sich anders zu verhalten als ihre Nachbarn. Das sind die Lücken, die die sechzehn Designs oben füllen.

Bildbox vs. Symbolbox: Was sollten Sie verwenden?

Verwenden Sie eine Bildbox, wenn das Bild der Inhalt ist, wie zum Beispiel eine Fotografie des Werkes, des Raumes oder des Produktes Verwenden Sie eine Symbolbox, wenn das Bild Dekoration ist und die Wörter die Bedeutung tragen Die Widgets sind ansonsten nahezu identisch: Beide paaren eine Grafik mit einer Überschrift und einer Beschreibung in einem verknüpften Block.

Der Praxistest ist, ob man es merken würde, wenn die Grafik verschwinden würde, wenn ein Dienstraster mit weggefallenen Icons noch gut liest, waren sie dekorativ und eine Iconbox war der richtige Aufruf, wenn man beim Entfernen der Bilder eine Liste mit Namen hinterlässt, brauchte man eine Imagebox.

Eine dritte Möglichkeit, die die Leute vergessen: a Flipbox, das ist eine Bildbox mit Rückseite Bascule oben ist die Idee, die mit einem Scharnier neu aufgebaut wurde.

Wie fügt man einem Elementor-Bildfeld einen Hover-Effekt hinzu?

Wählen Sie das Widget, öffnen Sie die Registerkarte Stil, erweitern Sie den Bildausschnitt und wechseln Sie zur Registerkarte Hover Sie erhalten Opazität, CSS-Filter (Blur, Helligkeit, Sättigung, Kontrast, Farbton) und eine Übergangsdauer Für Transformationen wie Skalieren oder Drehen verwenden Sie die Hover-Steuerelemente der Registerkarte Erweitert.

Das ist die ganze eingebaute Oberfläche Alles darüber hinaus, wie zum Beispiel ein Licht, das den Cursor verfolgt, ein magnetischer Zug oder ein Glanz, der sich bei Neigung kreuzt, benötigt benutzerdefiniertes CSS oder ein Widget, das das Verhalten sendet.

Wenn es speziell Text-über-Bild-Effekte sind, die Sie suchen, haben wir katalogisiert 25+ Elementortext über Bild-Hover-Effekte Separat, und diese funktionieren mit dem Stock-Widget.

So importieren Sie diese Elementor-Bildbox-Designs

Laden Sie das JSON von jedem Design oben herunter und gehen Sie dann in WordPress zu Master-Addons → Widget Builder → Widget importieren und die Datei hochladen Das Widget erscheint im Elementor-Panel unter Favoriten, mit eigenen Steuerelementen in den Registerkarten Inhalt und Stil.

  1. Klicken Sie auf Widget JSON herunterladen Auf dem gewünschten Design Der Zip enthält das JSON und ein Vorschaubild.
  2. Entpacken Sie es. Der eigene Template-Importeur von Elementor liest diese Datei nicht, da sie eher zum Widget Builder als zu Templates gelangt.
  3. Gehe zu Master-Addons → Widget Builder Und wählen Widget importieren.
  4. Laden Sie den JSON hoch. Bearbeiten Sie eine beliebige Seite mit Elementor und durchsuchen Sie das Panel nach dem Widget-Namen.
  5. Ersetzen Sie die Platzhalterbilder und Text Die Karten sind ein Repeater, also fügen Sie dort Elemente hinzu oder entfernen Sie sie, anstatt das Widget zu duplizieren.

Der häufige Fehler ist Schritt 2. Das sind Widget Builder Widgets, nicht Elementor-Abschnittvorlagen„Der Import durch Vorlagen → Importieren schlägt also fehl und die Fehlermeldung erklärt nicht, warum.

Funktionieren diese Bildboxen mobil und sind sie zugänglich?

Ja zu beiden, mit einem Vorbehalt auf Designebene Jedes Widget hier respektiert prefers-reduced-motion: wenn ein Besucher die Bewegung auf Betriebssystemebene reduziert hat, werden die Eingangsanimationen nicht ausgeführt und die Karten werden im Endzustand gerendert. Das wird im Widget behandelt und nicht Ihnen überlassen.

Zeigergetriebene Designs verschlechtern sich eher, als dass sie kaputt gehen Gyres Neigung und der Magnet von Impulse brauchen eine Zeigerposition, die ein Touchscreen nicht bietet, so dass auf dem Handy die Karten statisch werden und alles lesbar und klopfbar bleibt Bascule schaltet seinen Flip bewusst unterhalb eines Haltepunktes ab.

Gyre übernimmt auch den Tastaturfokus getrennt vom Hover. Tab auf eine Karte und Sie erhalten den Lift und den Glanz ohne Drehung. Die meisten Neigeffekte überspringen das und lassen Tastaturbenutzer vor dem Nichts zurück.

Welche Elementor-Bildbox sollte man eigentlich auswählen?

Beginnen Sie mit der Anzahl Ihrer Artikel, nicht mit der Wirkung.

  • Zwei bis vier Punkte, jeweils wichtig: Sonnenwende oder Verge.
  • Genau drei Leistungen: Steigeisen, Gyre oder Bascule.
  • Vier Artikel: Lumen, Kaskade, Kintsugi, Schwelle oder Vellum.
  • Sechs gleiche Gegenstände: Blende.
  • Acht oder mehr: Frieze Strip, wenn es sich um eine Sequenz handelt, Filigrane, wenn es sich um eine Liste handelt.
  • Groß, Porträtbilder: Palisade.
  • Fotos, die nicht zueinander passen: Refrakt.
  • Jede Karte endet in einem Button: Impuls.

Dann prüfe die Wirkung gegen dein Subjekt Kintsugi in einer Kanzlei ist ein schlechter Witz Schwelle auf einem Garten ist fast zu ordentlich, wenn der Antrag nichts über die Arbeit aussagt, lass ihn fallen und benutze Riser.

Häufig gestellte Fragen

Ist das Elementor-Bildbox-Widget kostenlos?

Ja. Die Bildbox wird im kostenlosen Elementor-Plugin ausgeliefert, mit Bild-, Titel-, Beschreibungs-, Link-, Bildposition- und einfachen Hover-Filtern. Die sechzehn Designs auf dieser Seite sind unterschiedlich: Es handelt sich um Master Addons Widget Builder-Widgets und zum Bearbeiten sind Master Addons Pro erforderlich, obwohl die Downloads selbst kostenlos sind.

Kann ich einer Elementor-Bildbox eine Schaltfläche hinzufügen?

Nicht im Stock-Widget, das die ganze Box verknüpft, anstatt Ihnen einen separaten Button zu geben Um einen echten Button zu erhalten, platzieren Sie entweder ein Button-Widget darunter im selben Container, oder verwenden ein Design, das einen Impuls, eine Blende, eine Kaskade und einen Gyre alle mit einem Button in der Karte versendet.

Wie mache ich Elementor-Bildboxen gleich hoch?

Die Kästchen in einen Flexcontainer geben und die Align Items des Containers auf Stretch stellen, dann jede Bildboxspalte auf volle Höhe einstellen Ungerade Textlängen sind die übliche Ursache Jedes Design auf dieser Seite bewältigt gleiche Höhen in seinem eigenen CSS, sodass das Problem nicht auftritt.

Was ist der Unterschied zwischen einer Bildbox und einem Bild-Widget?

Ein Bild-Widget platziert ein einzelnes Bild mit optionaler Beschriftung und Link Eine Bildbox ist ein Composite: Bild, Überschrift, Beschreibung und Link in einem Block, als Einheit gestylt und beabstandet Verwenden Sie das Bild-Widget für ein eigenständiges Foto, die Bildbox für eine Karte in einem Raster.

Brauche ich Elementor Pro für diese Designs?

Nein. Elementorfrei reicht aus, denn die Designs werden mit Master Addons statt mit Elementor Pro Widgets erstellt, was Sie brauchen ist Master Addons Pro, da jedes Design Widget Builder-Steuerelemente (Repeater, Typografie, Abmessungen, Rand, Symbole, Tabs) verwendet, die im kostenlosen Plugin gesperrt sind.

Wohin als nächstes

Wenn Sie mehr importierbare Designs wünschen, ist die 20 Elementor-Slider-Vorlagen Sammlung ist das nächste Geschwister dieser Seite und acht davon laufen auf dem kostenlosen Plugin, speziell zu Karussells siehe Elementorkarussell-Widgets, oder Was eigentlich kostenlos ist Wenn Ihnen die Lizenzfrage am Herzen liegt.

Für verwandte Kartenmuster: Bild Hotspots Zur Kommentierung eines einzelnen großen Bildes, zum Teammitglieder-Abschnitte Für Menschen statt für Dienstleistungen, und 3 D-Flipbox-Animationen Falls Ihnen Bascule ins Auge gefallen ist Lizenzdaten sind auf der Preisseite, und die vollständige Widget-Liste ist in 100+ beste Elementor-Add-ons.

Bild von Roy Jemee
Roy Jemee
Ich bin Roy Jemee, Content Wrangler und Marketer bei Pixar Labs, arbeite an Master Addons für Elementor, ich schreibe die Tutorials, nehme die Videos auf, halte die Dokumentation aktuell, so dass man immer weiß, wie man jede Funktion nutzt Ich handhabe auch den Support, also wenn man einen Haken schlägt, bin ich die Person, die einem hilft, das zu beheben Echte Antworten, von jemandem, der diese Tools täglich benutzt.

Hinterlasse eine Antwort

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

September Verkauf

40% Aus allem

Jeder Master Addons Pro Plan, jährlich und lebenslang Ein Code, acht Tage.

00Tagen
00hrs
00Min
00Sek

Endet Montag, 14. September, 23:59 Uhr ET

  • Persönliche1 Website 129 $77 $
  • Geschäft5 Standorte 199 $119 $
  • EntwicklerUnbegrenzte SeitenAm besten für Agenturen 599 $359 $

Einmal zahlen Keine Verlängerung, nie.

Gutscheincode MALIFE40
Jetzt 40% Rabatt sichern
  • 30.000+ aktive Installationen
  • 4,5/5 aus 212 Bewertungen
  • 14-tägiges Geld zurück