Erweitertes Bild
Ein Bild auf Ihrer Website sollte mehr tun, als nur dort zu sitzen Das Element „Advanced Image“kompressoriert das Grundbild mit intelligenten, interaktiven Funktionen. Erstellen Sie auffällige „Vorher-Nachher”-Schwebeffekte, fügen Sie stilvolle „NEUE”- oder „VERKAUF”-Bänder hinzu, wenden Sie dynamische Kippeffekte auf Mausbewegungen an und fügen Sie sogar farbenfrohe Schatten hinzu. Mit vollständiger Kontrolle über Leuchtkästen, Links und jeden Aspekt des Stylings können Sie jedes Bild in einen ansprechenden Inhalt verwandeln, der die Besucher anleitet und die Interaktion fördert. Perfekt für Produktpräsentationen, Portfolios oder vorgestellte Banner.
Bewegen Sie das Bild und die intelligenten Effekte
Erstellen Sie sofortige “Vorher-Nachher” - Vergleiche oder einfache Hover-Enthüllungen Laden Sie Ihr Hauptbild hoch, dann aktivieren Sie Hover Image, um ein zweites Bild hochzuladen Wenn Besucher mit dem Mauszeiger schweben, wechselt das Bild nahtlos Hinzufügen einer Ebene der Raffinesse mit dem Tilt-Effekt, die das Bild leicht kippen lässt, während sich die Maus darüber bewegt, und fügt ein subtiles 3 D-Feeling hinzu Für zusätzliche Tiefe aktivieren Sie Colorized Shadow, um einen weichen, farbigen Schatten hinter dem Bild zu platzieren, sodass es von der Seite abspringt.
- Interaktive Vergleiche: Perfekt für die Anzeige eines Produkts davor und danach oder für die Tages-/Nachtansicht einer Immobilie.
- Engaging Tilt Effect: Fügt eine moderne, interaktive Ebene hinzu, die auf die Cursorbewegung reagiert.
- Visuelle Tiefe: Verwenden Sie den kolorierten Schatten, um Trennung und Fokus ohne zusätzliche Designelemente zu erzeugen.
Anpassbare Bänder und Etiketten
Machen Sie Ihre Bilder mit professionellen Bändern hervorzuheben Aktivieren Sie die Ribbon-Funktion, um ein Etikett wie “NEUES DESIGN,” “BESTSELLER,” oder “AUSVERKAUFT” Wählen Sie aus verschiedenen Ribbon Styles (wie Ecke oder Kreuz oder Einfach) und stellen Sie die Position (oben/unten, links/rechts) Ganz individuell an Farben, Typografie und Dicke des Bandes an, um sicherzustellen, dass es Ihr Image und Ihre Marke perfekt ergänzt.
- Markieren Sie wichtige Informationen: Kommunizieren Sie Status, Werbung oder Kategorie sofort direkt auf dem Bild.
- Flexible Positionierung: Platzieren Sie das Band in einer beliebigen Ecke, um wichtige Teile des Bildes nicht abzudecken.
- Komplette Stilkontrolle: Passen Sie den Hintergrund, die Textfarbe und die Schriftart des Menübands an die Designsprache Ihrer Website an.
Link- und Lightbox-Integration hinzufügen
Jedes Bild kann ein Gateway sein Verknüpfen Sie Ihr Bild direkt mit einer URL, wie eine Produktseite oder Ihren Preisplan Alternativ aktivieren Sie eine Lightbox, damit sich die Betrachter in einem schönen Vollbild-Popup auf das Bild konzentrieren können Wählen Sie aus verschiedenen Lightbox-Symbolen (wie einem Plus-Button) und steuern Sie dessen Ausrichtung. Für die Leistung verwenden Sie die Option Bild vorladen, um ein schnelles Laden zu gewährleisten, insbesondere für Hover-Effekte.
- Direct Calls-to-Action: Verknüpfen Sie Bilder mit wichtigen Seiten und verwandeln Sie visuelles Interesse in direkten Traffic.
- Erweitertes Galerieerlebnis: Lassen Sie Benutzer Bilder mit einer eleganten Lightbox im Detail betrachten.
- Optimierte Leistung: Laden Sie Hover-Bilder vor, um eine Verzögerung oder einen “Blitz” bei der ersten Interaktion zu verhindern.
Detaillierte Styling- und Größensteuerung
Erhalten Sie die vollständige Designkontrolle über die Präsentation Ihres Bildes Stellen Sie die genaue Max-Breite und Max-Höhe ein Wenden Sie Border Radius individuell auf jede Ecke für einzigartige Formen an Stylen Sie die Normal - und Hover-Zustände getrennt mit Rändern, Hintergründen und Box-Schatten So stellen Sie sicher, dass Ihr Bild in jedem Kontext und bei jeder Interaktion perfekt aussieht.
- Responsive Sizing: Steuern Sie die Abmessungen des Bildes präzise, ohne auf unvorhersehbare automatische Größenbestimmung angewiesen zu sein.
- Benutzerdefinierte Formen: Kreiliche Bilder, abgerundete Rechtecke oder einzigartige asymmetrische Ränder erstellen.
- State-Specific Styling: Fügen Sie einen Rand oder Schatten nur auf Hover, um visuell anzuzeigen, dass das Bild interaktiv ist.
Häufig gestellte Fragen für erweitertes Bild
Ist der Hover Image-Effekt mit mobilen Touchscreens kompatibel?
Ja, aber es geht etwas anders Auf Touch-Geräten löst der erste Tipp oft den Hover-Effekt aus (Bildtausch), wenn man die Lightbox nicht aktiviert hat Aber wenn man die Lightbox aktiviert hat dann bekommt die Lightbox mehr Priorität und beim Tippen öffnet sich das erste Bild in der Lightbox.
Wird die Verwendung des Tilt-Effekts und des kolorierten Schattens meine Seite verlangsamen?
Diese Effekte nutzen CSS, das im Allgemeinen leicht ist, Die Verwendung auf einer sehr großen Anzahl von Bildern auf einer einzigen Seite (wie in einem dichten Raster und 100+ Bildern) könnte jedoch zu einer stärkeren Belastung des Geräts des Benutzers beitragen. Verwenden Sie sie selektiv auf Schlüsselbildern für die beste Leistung und Wirkung.
Wie unterscheidet sich das vom grundlegenden Image-Widget von Elementor?
Mit dem Basis-Widget von Elementor können Sie ein Bild, einen Link, eine Bildunterschrift und ein einfaches Design hinzufügen. Das Advanced Image-Element fügt eine Reihe professioneller Funktionen hinzu: Hover Image Swap, Bänder/Etiketten, Tilt Effect, Colorized Shadow, separates Normal-/Hover-State-Styling und granularere Lightbox-Steuerelemente. Es ist für die Erstellung ansprechenderer, interaktiver Bildpräsentationen konzipiert.
Kann ich die Ribbon-Funktion ohne Hover-Bild oder andere Effekte verwenden?
Absolut! jedes Feature ist unabhängig Du kannst nur ein Bild mit einem Ribbon haben, oder auch nur ein Bild mit Neigeffekt Du kannst Features mischen und anpassen wie du magst Aktiviere nur die, die du für dein spezifisches Designziel brauchst.
Was nützt die Einstellung 'Bild vorladen' am besten?
Aktivieren Sie Preload Image (eingestellt auf 'Ein'), wenn Sie die Funktion Hover Image verwenden Dies zwingt den Browser, das zweite Bild beim Laden der Seite zu laden, obwohl es versteckt ist Dies verhindert eine spürbare Verzögerung oder einen leeren Blitz beim ersten Mal, wenn ein Benutzer über das Bild schwebt, und sorgt so für ein reibungsloses Benutzererlebnis.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
