SeedProd Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

Erweiterter Galerie-Block

Der Erweiterte Galerie-Block ermöglicht es Ihnen, einzelne oder mehrere Bildergalerien einfach auf Ihren SeedProd-Seiten einzubinden. Dieser Block gibt Ihnen die vollständige Kontrolle darüber, wie Ihre Bilder präsentiert werden, mit Optionen für Spalten, Abstände, Overlays und interaktive Effekte.

Ob Sie ein Portfolio präsentieren, Produktfotos anzeigen, eine Fotogalerie erstellen oder Teammitglieder hervorheben möchten, der Erweiterte Galerie-Block bietet die Flexibilität und die Styling-Optionen, die Sie benötigen, um visuell beeindruckende Bildsammlungen zu erstellen, die Ihre Besucher ansprechen.

Anforderungen: Der Erweiterte Galerie-Block ist in allen unseren Lizenzplänen verfügbar.

Beispiel für einen erweiterten Galerieblock, der mehrere Bilder in einem Rasterlayout anzeigt

Befolgen Sie diese Schritte, um einen Erweiterten Galerie-Block zu Ihrer SeedProd-Seite hinzuzufügen:

Schritt 1: Block hinzufügen

Ziehen Sie unter Design > Blöcke den Erweiterte Galerie-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.

Ziehen des erweiterten Galerieblocks auf die Seite

Der Erweiterte Galerie-Block befindet sich unter Design > Erweitert und kann in jeden Bereich Ihrer Seite gezogen werden.

Schritt 2: Inhaltseinstellungen konfigurieren

Nach dem Hinzufügen klicken Sie auf den Erweiterten Galerie-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie Bilder hinzufügen und konfigurieren, wie Ihre Galerie angezeigt wird.

Galeriebilder:

  • Typ: Wählen Sie zwischen dem Anzeigemodus Einzelbild (ein Bild) oder Mehrere (Bildergalerie).
  • Bild / Neues Bild auswählen: Für den Typ Einzelbild klicken Sie, um ein Bild aus Ihrer Mediathek auszuwählen.
  • Galeriebilder hinzufügen: Für den Typ Mehrere klicken Sie, um mehrere Bilder gleichzeitig auszuwählen und Ihre Galerie zu erstellen. Sie können so viele Bilder auswählen, wie Sie benötigen.
Option für einzelne Bilder im erweiterten Galerieblock

Wählen Sie Einzelbild, um ein Bild anzuzeigen, oder Mehrere, um eine Galerie mit mehreren Bildern zu erstellen.

Schaltfläche „Galeriebilder hinzufügen“ für mehrere Bilder

Klicken Sie auf Galeriebilder hinzufügen, um mehrere Bilder aus Ihrer Mediathek auszuwählen.

Einstellungen:

  • Spalte: Legen Sie die Anzahl der Spalten in Ihrem Galerie-Raster fest. Mehr Spalten erzeugen ein dichteres Layout, während weniger Spalten jedem Bild mehr Präsenz verleihen.
  • Abstand: Steuern Sie den Abstand zwischen den Bildern in Ihrer Galerie. Passen Sie diesen Wert an, um dichtere oder geräumigere Layouts zu erstellen.
  • Link: Wählen Sie, wohin die Bilder beim Klicken verlinken. Optionen sind Keine (kein Link), Mediendatei (öffnet Vollbildbild) oder Benutzerdefinierte URL (verlinkt zu einer bestimmten Seite).
  • Seitenverhältnis: Wählen Sie die Proportionen für Ihre Bilder. Optionen sind 1:1 (quadratisch), 3:2, 4:3, 9:16 (Hochformat), 16:9 (Querformat) und 21:9 (ultrabreit). Dies stellt sicher, dass alle Bilder konsistent angezeigt werden.
  • Bildgröße: Wählen Sie, welche Größenversion Ihrer Bilder angezeigt werden soll: Miniaturansicht, Mittel oder Groß. Größere Größen zeigen mehr Details, laden aber langsamer.

Überlagerung:

  • Hintergrund-Overlay: Schalten Sie um, um ein Farb-Overlay zu aktivieren oder zu deaktivieren, das über Ihren Bildern erscheint. Dies hilft Text und Informationen hervorzuheben.
  • Titel: Wählen Sie aus, was als Titel-Overlay auf den Bildern angezeigt werden soll. Optionen sind Keine, Titel, Bildunterschrift, Alternativtext oder Beschreibung aus Ihren Bildmetadaten.
  • Beschreibung: Wählen Sie aus, was als Beschriftungsüberlagerung angezeigt werden soll. Optionen sind Keine, Titel, Bildunterschrift, Alternativtext oder Beschreibung
  • Textfarbe: Legen Sie die Farbe für den Überlagerungstext fest, um einen guten Kontrast und gute Lesbarkeit zu gewährleisten
  • Hintergrundfarbe: Wählen Sie die Farbe des Überlagerungshintergrunds, der hinter dem Text erscheint
  • Kopfzeilen-Typografie: Passen Sie die Schrifteigenschaften für Überlagerungstitel an, einschließlich Schriftfamilie, Größe, Stärke und Stil
Inhaltseinstellungen für die erweiterte Galerie

Der Abschnitt Einstellungen ermöglicht es Ihnen, Spalten, Abstände, Links, Seitenverhältnis, Bildgröße und Überlagerungsoptionen anzupassen.

Schritt 3: Design anpassen

Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Erweiterten Galerie-Blocks anpassen:

Stile:

  • Bildschatten: Fügen Sie Ihren Bildern Schatteneffekte für Tiefe hinzu. Wählen Sie aus Keine, Haarlinisch, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Schatten unten
  • Bildrand: Aktivieren Sie Ränder um Ihre Galeriebilder
  • Radius des Rahmens: Steuern Sie die Rundung der Bildecken. Höhere Werte erzeugen rundere Ecken, während Null scharfe Ecken erzeugt
  • Rahmenstil: Wählen Sie das Aussehen des Rahmens: Durchgezogen (kontinuierliche Linie), Gepunktet (kleine Punkte) oder Gestrichelt (kurze Striche)
  • Rahmenfarbe: Wählen Sie die Farbe für Ihre Bildränder
  • Rahmenbreite: Legen Sie die individuelle Dicke des Rahmens für jede Seite (Oben, Rechts, Unten, Links) fest. Dies ermöglicht Ihnen, einzigartige Rahmeneffekte zu erzielen

Abstand:

  • Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Galerie-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen der Galerie und den umgebenden Elementen erscheint
  • Abstand (Innen): Passen Sie den inneren Abstand innerhalb Ihres Galerie-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Galerieinhalt und seinen Rändern

Attribute:

  • CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Galerie-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder zur gezielten JavaScript-Steuerung erstellt
  • Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
  • Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element der Galerie beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-gallery|portfolio)

Gerätesichtbarkeit:

  • Auf Desktop ausblenden: Blenden Sie den Galerie-Block auf Desktop-Bildschirmen aus
  • Auf Tablet ausblenden: Blenden Sie den Galerie-Block auf Tablet-Geräten aus
  • Auf Mobilgeräten ausblenden: Blenden Sie den Galerie-Block auf Mobilgeräten aus

Animationseffekte:

  • Eingangs-Animation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn die Galerie ins Sichtfeld scrollt. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies fügt visuelles Interesse hinzu und lenkt die Aufmerksamkeit auf Ihre Galerie
Erweiterte Einstellungen für die erweiterte Galerie

Der Tab Erweitert bietet Optionen für Bildschatten, Ränder, Abstände, Attribute, Geräte-Sichtbarkeit und Animationseffekte.

Schritt 4: Speichern Sie Ihre Änderungen

Wenn Sie die Konfiguration des Erweiterten Galerie-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.


Sie haben erfolgreich einen erweiterten Galerieblock zu Ihrer Seite hinzugefügt! Dieser leistungsstarke Block ermöglicht es Ihnen, einzelne oder mehrere Bildergalerien mit vollständiger Kontrolle über Layout, Styling und interaktive Effekte zu präsentieren. Experimentieren Sie mit verschiedenen Spaltenlayouts, Seitenverhältnissen und Überlagerungsstilen, um eine Galerie zu erstellen, die perfekt zu Ihrer Marke passt und Ihr Publikum anspricht.

Verwandte Artikel