Galerie-Widget

Die Bildergalerie Widget können Sie auf einfache Weise komplexe und schöne Bildergalerien auf Ihrer Seite hinzufügen und gestalten.

Inhalt

Einstellungen

  1. Typ: Wählen Sie die Art der Galerie aus, indem Sie wählen zwischen Einzeln oder Mehrere. Multiple ermöglicht Ihnen eine filterbare Bildergalerie im Stil eines Portfolios
    1. Wenn Sie "Mehrere" wählen, geben Sie einen Titel in das Feld ein oder verwenden Sie dynamische Tags *.
  2. Bilder hinzufügen: Wählen Sie mehrere Bilder aus der Mediathek, um sie in Ihre Galerie einzufügen, und geben Sie einen Titel für die Galerie
    1. Sie können auch die Option Dynamische Tags verwenden, um Bilder aus den Bildanhängen des Beitrags, der erweiterten benutzerdefinierten Feldgalerie oder der WooCommerce-Produktgalerie zu laden. Dies ist hilfreich, wenn Sie eine Vorlage für einen einzelnen Beitrag oder ein Produkt im Theme-Builder erstellen.
  3. Bestellen nach: Wählen Sie Standard- oder Zufallsreihenfolge
  4. Lazy-Load: Setzen Sie diese Option auf Ja, um Lazy Load zu verwenden, um die Ladegeschwindigkeit zu verbessern.
  5. Layout: Wählen Sie aus RasterGerechtfertigt, oder GemäuerDie Raster basiert auf einem von Ihnen gewählten Seitenverhältnis. Gerechtfertigt ermöglicht es Ihnen, die Höhe für jede Zeile festzulegen, und passt sich an unterschiedliche Breiten pro Bild an. Gemäuer behält die gleiche Bildbreite bei und passt sich an unterschiedliche Höhen an.
  6. Rubriken: Legen Sie fest, wie viele Spalten pro Zeile angezeigt werden sollen, von 1 bis 24. Nicht verfügbar, wenn Gerechtfertigt Das Layout ist gewählt.
  7. Zeilenhöhe: Legt die Höhe jeder Zeile in Pixeln fest. Nur verfügbar, wenn Gerechtfertigt Das Layout ist gewählt.
  8. Abstände: Legen Sie den Abstand zwischen den einzelnen Bildern einer Reihe fest.
  9. Link: Setzen Sie den Link für die Bilder auf Keine, Mediendatei oder Benutzerdefinierte URL
  10. Bildseitenverhältnis: Wählen Sie das Seitenverhältnis aus: 1:1, 3:2, 4:3, 9:16, 16:9 und 21:9. Nur für das Rasterlayout verfügbar. 
  11. Bildauflösung: Legen Sie die Größe des Bildes fest, von Thumbnail bis Vollbild, oder geben Sie eine eigene Größe ein.

Wenn Typ: Mehrere gewählt wird, werden die folgenden zusätzlichen Optionen der Filterleiste verfügbar:

Filterleiste (nur verfügbar, wenn Mehrfachtyp gewählt wurde)
  1. Filter "Alle": Wählen Sie Ja, um den Filter "Alle" einzuschließen, oder Nein, um ihn auszuschließen.
  2. "Alle" Filterbezeichnung: Wenn diese Option auf Ja gesetzt ist, geben Sie die gewünschte Bezeichnung ein oder verwenden Sie dynamische Tags. Standard ist "Alle".
  3. Zeiger: Wählen Sie den Zeiger, der verwendet wird, wenn Sie den Mauszeiger über die einzelnen Filterbeschriftungen bewegen. Wählen Sie zwischen Keine, Unterstreichen, Überstreichen, Doppellinie, Gerahmt, Hintergrund oder Text.
  4. Animation: Legen Sie den Animationsstil des Zeigers fest. Wählen Sie zwischen Verblassen, Gleiten, Wachsen, Hineinfallen, Herausfallen oder Keine.

Überlagerung

  1. Hintergrund: Wählen Sie Ja, damit ein Overlay erscheint, wenn Sie den Mauszeiger über die einzelnen Bilder bewegen, oder Nein, damit kein Overlay erscheint.
  2. Titel: Wählen Sie, welches Meta-Attribut als Titel des Overlays angezeigt werden soll. Wählen Sie aus Titel, Beschriftung, Alt, Beschreibung oder Keine.
  3. Beschreibung: Wählen Sie, welches Meta-Attribut als Beschreibung des Overlays angezeigt werden soll. Wählen Sie aus Titel, Beschriftung, Alt, Beschreibung oder Keine.

Stil

Bild

  1. Farbe der Umrandung: Wählen Sie die Farbe des Bildrandes für die Zustände Normal und Hover
  2. Breite des Randes: Wählen Sie die Dicke des Rahmens nur für den Normalzustand.
  3. Radius der Grenze: Steuert die Abrundung der Ecken des Bildrandes für die Zustände Normal und Hover.
  4. CSS-Filter: Legen Sie CSS-Filter fest und wählen Sie aus Unschärfe, Helligkeit, Kontrast und Sättigung für die Zustände Normal und Hover.
  5. Schwebe-Animation: Wählen Sie die Animation des Bildes beim Schweben, indem Sie zwischen Keine, Vergrößern, Verkleinern, Nach links, Nach rechts, Nach oben oder Nach unten für die Zustände Normal und Schweben wählen.
  6. Dauer der Animation (ms): Legen Sie die Dauer der Animation in Millisekunden fest.

Überlagerung

  1. Überlagerung: Wählen Sie die Art der Überlagerung (Klassisch oder Farbverlauf) für den Normal- und Schwebezustand der Bilder.
  2. Farbe: Legen Sie die Überlagerungsfarbe oder den Farbverlauf für den Normal- und den Hover-Zustand der Bilder fest.
  3. Überblendmodus: Wählen Sie aus mehreren Ebeneneffekten wie Normal, Multiplizieren, Raster, Überlagern usw. Demo zum Mischmodus ansehen
  4. Schwebe-Animation: Wählen Sie die Eingangs- oder Ausgangsanimation des Overlays beim Schweben. Wählen Sie aus Rechts einblenden, Links einblenden, Nach oben einblenden, Nach unten einblenden, Vergrößern, Verkleinern und Einblenden. Wenn Sie die Eingangsanimation wählen, werden die Bilder im Normalzustand mit voller Deckkraft angezeigt, wobei das Overlay das Bild beim Hovern verdeckt. Wenn Sie die Option Beenden-Animation gewählt haben, wird das Bild im Normalzustand überlagert und beim Bewegen des Mauszeigers entfernt.
  5. Dauer der Animation (ms): Legen Sie die Dauer der Animation in Millisekunden fest.

Inhalt

  1. Ausrichtung: Den Inhalt links, rechts oder mittig ausrichten
  2. Vertikale Position: Den Inhalt oben, in der Mitte oder unten ausrichten
  3. Polsterung: Anpassen der Polsterung des Inhalts
Titel
  1. Farbe: Wählen Sie die Farbe des Titels
  2. Typografie: Einstellen der Typografieoptionen für den Titel
  3. Abstände: Legen Sie den Abstand zwischen dem Titel und der Beschreibung fest.
Beschreibung
  1. Farbe: Wählen Sie die Farbe der Beschreibung
  2. Typografie: Legen Sie die Typografieoptionen für die Beschreibung fest
  1. Schwebe-Animation: Wählen Sie die Eingangs-, Reaktions- oder Ausgangsanimation des Inhalts beim Hovern. Wählen Sie für die Eingangsanimation aus Rechts einschieben, Links einschieben, Nach oben einschieben, Nach unten einschieben, Vergrößern, Verkleinern und Einblenden. Für die Reaktionsanimation wählen Sie aus Wachsen, Schrumpfen, Nach links, Nach rechts, Nach oben oder Nach unten. Wählen Sie für die Beenden-Animation aus Nach rechts ausblenden, Nach links ausblenden, Nach oben ausblenden, Nach unten ausblenden, Vergrößern, Verkleinern und Ausblenden.
  2. Animation Dauer: Legen Sie die Dauer der Animation in Millisekunden fest.
  3. Sequenzierte Animation: Setzen Sie diese Option auf Ja, wenn Titel und Beschreibung nacheinander animiert werden sollen. Stellen Sie Nein ein, wenn Titel und Beschreibung gleichzeitig animiert werden sollen.

Filterleiste 

Diese zusätzlichen Optionen der Filterleiste sind nur verfügbar, wenn Art: Mehrere gewählt wurde.

  1. Textfarbe: Wählen Sie die Farbe des Textes der Filterleiste für die Zustände Normal, Hover und Aktiv.
  2. Typografie: Legen Sie die Typografieoptionen für den Text der Filterleiste fest.
  3. Zeigerfarbe: Wählen Sie die Farbe des Zeigers der Filterleiste. Nur im Hover- oder Aktiv-Status verfügbar.
  4. Zeigerbreite: Wählen Sie die Dicke des Zeigers.
  5. Raum zwischen: Legen Sie den Abstand zwischen den Filtertextelementen fest.
  6. Lücke: Bestimmen Sie den Abstand zwischen dem Filtertext und den Galeriebildern.

Fortgeschrittene

Stellen Sie die erweiterten Optionen ein, die für dieses Widget gelten


Beschriftungen und Titel in einer Galerie

Das Galerie-Widget ermöglicht es Ihnen, die Bildunterschrift oder den Titel eines Bildes als Teil des Overlays anzuzeigen. Diese Beschriftungen/Titel sind jedoch möglicherweise nicht für das Galerie-Widget geeignet. Daher haben Benutzer die Möglichkeit, die Beschriftungen/Titel der im Widget angezeigten Bilder zu bearbeiten.

Bearbeitung der Beschriftungen/Titel

So bearbeiten Sie die Beschriftung und den Titel:

  1. Klicken Sie auf den Bildauswahlbereich im Fenster Inhalt Tab..
  1. So ändern Sie die Beschriftung - Klicken Sie auf den Beschriftungsbereich und geben Sie eine neue Beschriftung in den Textbereich ein.
  1. So ändern Sie den Titel - Klicken Sie auf das Bild und geben Sie einen neuen Titel in das Textfeld ein.
  1. Klicken Sie auf Galerie einfügen.

0 Kommentare

Einen Kommentar abschicken

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