Website-Galerie

Pixpa gibt Ihnen viel Kontrolle darüber, wie Sie Bilder in Ihren Galerien anzeigen.

Mit den Stiloptionen der Galerie können Sie die Anzeige Ihrer Bilder in der Galerie in Verbindung mit dem Galerie-Layout vollständig steuern.

TIPP: Stiloptionen für die gesamte Galerie-Website werden automatisch auf alle neuen Galerien angewendet, die Sie erstellen.
Siehe auch: Wie überschreibe ich den seitenweiten Galeriestil in einer bestimmten Galerie?


In diesem Artikel:

    1. Galerie Layout
    2. Rasterstil
    3. Rasterfarben
    4. Hover-Stil
    5. Bild Titel
    6. Bildrand
    7. Leuchtkastenanzeige
    8. Mobile Anzeige

Im Abschnitt Design (1) können Sie die Optionen für die seitenweite Galerie anpassen.

Sobald Sie sich im Bereich „Design“ befinden, klicken Sie auf die Registerkarte „Galerien (2)“.

Alternativ können Sie auch die Suchfunktion des Studios nutzen.

  • Enter Galerien (1) in der Suchleiste.
  • Klicken Sie in den zugehörigen Ergebnissen auf die Design – Galerien Option 2).


  1. Layout : Wählen Sie ein Layout, das auf die Galerie angewendet werden soll.
    Erfahren Sie, wie Sie das Galerie-Layout ändern.
  2. Länge : Wählen Sie die Galeriebreite.
    • 'Gesamtbreite' zeigt die Galerie an, während sie die gesamte Breite abdeckt, ohne einen Rand zu hinterlassen.
    • 'Boxed' zeigt die Galerie an, während links und rechts des Bildschirms etwas Abstand verbleibt.
    • 'Seitenbreite' kann im Designbereich angegeben werden. Hier können Sie eine feste Breite angeben.
      Die Galerie wird angezeigt, indem die angegebene feste Breite eingehalten wird.


 

  1. Rasterabstand: Geben Sie den Bundstegabstand zwischen den Bildern in Rasterlayouts an. (0 – 250 Pixel) 
  2. Bildeckenradius: Wenden Sie einen Randradius an, um die Bildecken in den Galeriegittern abzurunden.

Beispielsweise hat die Startseitengalerie des Lantern- Themes einen Rasterabstand von 142px.

Nach Anwendung des Bildeckenradius würden Sie abgerundete Kanten an den Bildern sehen, wie in der Vorlage „Beyond“.


Grunddeckkraft: Wenn Sie als Hover-Typ die Bildakzentfarbe ausgewählt haben, legen Sie die Grunddeckkraft des Rasters hier fest.

 

  1. Basis: Die Grundfarbe dient der Rasterbildung und ist nur kurz vor dem Laden der Bilder sichtbar. Sie haben zwei Optionen für die Grundfarbe des Rasters.
    • Farbe wählen : Wählen Sie diese Option, um eine bestimmte Farbe für die Gitterbasis festzulegen. Geben Sie eine beliebige Farbe und Deckkraft für die Rasterbasis an.
    • Akzentfarbe : Verwenden Sie Bildakzentfarben für die Rasterbasis. Dies ergibt ein mehrfarbiges Raster mit den Akzentfarben jedes Bildes.
  2. Grundopazität: Wenn Sie den Basistyp als Akzentfarbe ausgewählt haben, legen Sie hier die Deckkraft der Rasterbasis fest. 
  3. Schweben :  Dies wirkt sich auf das Raster aus, wenn der Cursor über dem Bild bewegt wird.
    • Farbe wählen : Legen Sie die Standard-Hover-Farbe und deren Deckkraft fest, wenn Sie „Farbe auswählen“ für Ihre Rasterbilder ausgewählt haben. 
    • Akzentfarbe : Verwenden Sie Bildakzentfarben für die Rasterbasis. Dies ergibt ein mehrfarbiges Raster mit den Akzentfarben jedes Bildes.
  4. Hover-Deckkraft: Wenn Sie den Hover-Typ als Akzentfarbe ausgewählt haben, legen Sie hier die Deckkraft der Rasterbasis fest. 

 

Die Bildakzentfarbe ist die dominierende Farbe eines Bildes, die ausgewählt wird, wenn Sie ein Bild hochladen.


Der Hover-Effekt wird nur im Grid-Layout verwendet. Sie können die folgenden Optionen beim Hover im Rastermodus anzeigen.

  1. Kein Effekt – Keine Auswirkung auf Bilder im Rastermodus.
  2. Farbe, – Für nur Hover-Farbe auf Ihren Bildern im Rastermodus.
  3. Farbe und Bildtitel – Für das Bild Hover-Farbe mit dem Bildtitel. Sie können die Hover-Farbe und die Textfarbe/Schriftart/Größe/Gewicht des Bildtitels in einstellen nächste Option.
  4. Farbe und Symbol – Für das Bild Hover-Farbe mit einem Symbol.
  5. Farbe, Bildtitel und Symbol – Für Bild-Hover-Farbe, Bildtitel und Symbol. Sie können Ihren Bildern auch Symbole wie Plus, Pfeil, Kreuz und Auge hinzufügen. 


Hover-Symbol

  • Hover-Symbole werden nur in Rasterlayouts von Galerien verwendet. Sie können wählen, ob Ihren Bildern im Rastermodus ein Symbol angezeigt werden soll.
  • Optionen sind – Plus, Pfeil, Kreuz und Auge. Dies gilt nur, wenn das Symbol im ausgewählt ist hover-Effekt Dropdown-Liste. 


  1. Dies wird angewendet, wenn Sie Bildtitel beim Hover anzeigen möchten.


Pixpa bietet eine vielseitige Funktion für Bildrahmen, mit der Sie die Optik Ihrer Website durch das Hinzufügen von Rahmen um Bilder verbessern können. Klicken Sie hier, um mehr über Bildrahmen zu erfahren.


1. Öffnen Sie Lightbox

  • Wenn Bilder in einem Raster angezeigt werden, öffnet ein Klick auf ein Bild dieses im Lightbox-Modus (Vollbildanzeige).
  • Sie können dies von hier aus aktivieren oder deaktivieren. 

Lightbox-Modus in Aktion :


2. Aktivieren Sie Zoom

  • Aktivieren/Deaktivieren des Zoomens über Bilder im Lightbox-Modus.
  • Die Zoom-Funktion funktioniert sowohl auf Desktop- als auch auf mobilen Websites.


3. Anzeigeoptionen

  • Wählen Sie, wie Sie Ihre Bilder in der Vollbildanzeige anzeigen möchten.
  • Sie können wählen aus nur Bilder anzeigen, Bild mit Vorschaubildern, Bild mit Beschriftungen unten und Bild mit Bildunterschrift rechts

Zum Beispiel eine Galerie, die nur Bilder anzeigt.

Zum Beispiel eine Galerie mit der Option, Bilder mit Miniaturansichten anzuzeigen.

Zum Beispiel eine Galerie mit einem Bild und einer Bildunterschrift am unteren Rand.

Zum Beispiel eine Galerie mit einem Bild und einer Bildunterschrift auf der rechten Seite.


4. Overlay-Farboptionen

Die Overlay-Farbe ist die Hintergrundfarbe, die beim Betrachten von Bildern im Lightbox-Modus angezeigt wird. Durch Anpassen der Overlay-Farbe können Sie das Erscheinungsbild an das Design Ihrer Website anpassen und so eine einheitliche und professionelle Darstellung Ihrer Bilder in der Lightbox-Ansicht gewährleisten.

  • Wähle die Custom Color Option zum Festlegen einer bestimmten Hintergrundfarbe für alle Bilder, die im Lightbox-Modus angezeigt werden. Sie können Ihre bevorzugte Farbe im Überlagerungsfarbe Einstellung. Mehr erfahren.
  • Wählen Akzentfarbe um aus den Akzenttönen jedes Bildes eine einzigartige Farbe anzuwenden. Sie können dies für jedes Bild individuell nach Wunsch anpassen. Mehr erfahren.
  • Wenn Sie die Option Akzentfarbe wählen, können Sie die Deckkraft (Transparenz) der Hintergrundfarbe.


5. Bildansicht

Legen Sie den Anzeigemodus für den Leuchtkasten fest –

  • Skalieren und anpassen – Bilder werden so skaliert, dass sie in den verfügbaren Browserbereich passen, sodass das vollständige Bild sichtbar ist. 
  • Vollblut – Bilder werden so bemessen, dass sie den gesamten verfügbaren Browserbereich ausfüllen – einige Teile des Bildes werden möglicherweise abgeschnitten, um diese Vollbildanzeige zu erreichen. 

Zum Beispiel eine Galerie mit Skalierungs- und Anpassungsmodus, bei der die Bilder in die verfügbare Browserhöhe passen.

Zum Beispiel eine Galerie mit einem Vollbildmodus , bei dem die Bilder so gestreckt werden, dass sie die verfügbare Browserbreite ausfüllen.


6. Kontrollen

Wählen Sie in der Lightbox-Ansicht aus, wie Navigationssteuerelemente wie Bildinfosymbol, Galerieinfosymbol, Kreuzsymbol, Browseranpassungssymbol usw. angezeigt werden sollen. Optionen sind:

  1. Immer sichtbar (Navigationssteuerelemente immer über den Bildern anzeigen)
  2. Beim Schweben anzeigen (Navigationssteuerelemente werden nur angezeigt, wenn Sie Ihren Cursor auf dem Bildschirm bewegen)
  3. versteckt (Navigationssteuerelemente werden nie angezeigt). 

Zum Beispiel eine Galerie mit stets sichtbaren Navigationssteuerelementen.

Zum Beispiel eine Galerie mit Navigationssteuerung, die beim Überfahren mit der Maus angezeigt wird .

Zum Beispiel eine Galerie mit versteckten Navigationssteuerelementen.


7. Nächster/Vorheriger Stil

Wählen Sie in der Vollbildanzeige aus, wie Ihre Navigationspfeile angezeigt werden sollen.

  1. Concurrent Lizenzen : Die Navigationspfeile schweben. Bewegen Sie den Cursor über das Bild und klicken Sie auf den Bildschirm, sobald der Pfeil erscheint, um durch die Bilder zu navigieren. 
  2. Winkel
  3. Arrows
  4. Pfeil im Kreis anzeigen
  5. versteckt : Navigationspfeile vollständig deaktivieren. 


8. Bilddateiname

  • Wählen Sie, ob der Dateiname angezeigt werden soll, wenn das Bild im Lightbox-Modus angezeigt wird.

In Aktion sehen: 


9. Maximale Bildgröße

Diese Einstellung steuert die maximale Auflösung, in der Ihre Galeriebilder im Lightbox-Modus angezeigt werden. Sie können aus folgenden Optionen wählen:

  • Auto - Passt die Bildgröße automatisch an die Bildschirm- und Geräteauflösung des Betrachters an. Das System wählt intelligent die am besten geeignete Bildversion aus, um optimale Klarheit und Leistung zu gewährleisten.
  • Feste Größen – 2048 Pixel, 1500 Pixel, 1000 Pixel, 800 Pixel oder 500 Pixel. Wenn Sie eine feste Größe wählen, werden alle Lightbox-Bilder je nach Gerät oder Bildschirmgröße des Benutzers bis zu dieser maximalen Auflösung bereitgestellt.
Hinweis

Wenn die Auflösung des hochgeladenen Originalbildes kleiner als die ausgewählte Größe ist, wird es in seiner Originalauflösung angezeigt . Es wird weder vergrößert noch hochskaliert.


Diashow-Einstellungen

  1. Diashow: Klicken Sie auf Autoplay um die Diashow automatisch im Vollbildbetrachter zu starten. Sie können die Diashow auch deaktivieren.
  2. Geschwindigkeit : Wählen Sie die Übergangsgeschwindigkeit. Sie können zwischen 1 und 10 Sekunden wählen.
  3. Übergang : Wählen Sie den Übergangsstil der Diashow.

 

Sehen Sie die Diashow in Aktion: 


Tönungsoptionen

Diese Funktion ermöglicht es, die Akzentfarbe von Bildern als Hintergrund zu verwenden, wenn Bilder im Lightbox-Modus angezeigt werden . Dies verbessert das visuelle Erlebnis, indem der Hintergrund an die Akzentfarbe des Bildes angepasst wird.

  1. Akzentfarbe als Farbton verwenden:
    • Standardmäßig ist die Lightbox-Hintergrundfarbe wird beim Anzeigen von Bildern im Lightbox-Modus angewendet.
    • Wenn Sie diese Option aktivieren, Akzentfarbe Die mit den Bildern verknüpfte Farbe wird als Hintergrundfarbe der Lightbox verwendet und sorgt so für ein dynamischeres und optisch einheitlicheres Erscheinungsbild.
  2. Farbton Deckkraft:
    • Sie können die Deckkraft der Akzentfarbton mithilfe des Farbtonreglers.
    • Durch Anpassen der Deckkraft werden die Akzentfarbe mit der Lightbox-Hintergrundfarbe, sodass Sie eine nahtlose und professionelle Ästhetik erreichen.


  1. Anzeigen als: Wählen Sie aus, die Galerie als anzuzeigen Image Slider oder im Rastermodus in der mobilen Ansicht. 
  2. Rasterspalten: Wählen Sie aus 1-Spalten- oder 2-Spalten-Ansicht für die Rasteranzeige in der mobilen Ansicht.
  3. Rasterabstand: Setze die Rinne zwischen Bildern in mobile Ansicht.


 

Können Sie nicht finden, wonach Sie suchen?

Wenden Sie sich an einen Pixpa-Experten.

Pixpa Studio wurde komplett überarbeitet. Wir aktualisieren derzeit alle Screenshots der Hilfeartikel.