Anleitung
Ortsvereins-Website
Elementor
Überblick Elemente

Das Galerie-Element

Bevor Sie das Galerie-Element in Elementor bearbeiten können, müssen Sie dieses zuerst in die Seite oder den Beitrag eingefügt haben. Wie dies geht, zeigt unsere Anleitung „Elemente einfügen“ .

  • Bilder sollten optimalerweise schon vor dem Upload zugeschnitten / komprimiert werden. Hierdurch sparen Sie unnötigen Speicherplatz in Ihrem Webspace und vermeiden unnötige Ladezeiten auf Ihrer Ortsvereins-Website.
  • Möglichkeiten, Bilder zuzuschneiden / zu komprimieren, zeigt unsere Anleitung "Optimale Bildformate" [Link].
Inhalt bearbeiten

Einstellungen

1

Typ

  • Bei "Single" belassen
2

Bilder wählen...

  • Klicken Sie links im Editor-Bereich auf die Fläche unter "Keine Bilder ausgewählt" (dunkelgrau mit + inder Mitte, bei Mausover "Bilder hinzufügen"), es öffnet sich die Mediathek:
3

... aus Mediathek (kurz zuvor hochgeladene Bilder)

  • Galerie erstellen:
    • Reiter "Mediathek": Wählen Sie aus den bereits hochgeladenen Bildern die gewünschten Galeriebilder aus (die zuletzt hochgeladenen Bilder befinden sich immer ganz oben links)
    • Mehrfachauswahl!
    • mit blauem "Neue Galerie erstellen" - Button bestätigen
  • Galerie bearbeiten:
    • Wenn gewünscht, Reihenfolge der Bilder per Drag & Drop ändern
    • Mit dem Kreuz-Symbol oben rechts an jedem Bild können Bilder auch wieder rausgelöscht werden
    • wenn alles gut so, mit blauem "Galerie einfügen"-Button bestätigen
4

... oder über "Datei hochladen" (noch nicht hochgeladene Bilder)

  • Galerie erstellen:
    • Reiter "Datei hochladen": Ziehen Sie per Drag & Drop von Ihrem PC die gewünschten Bilder alle auf einmal auf die Mediathek-Schaltfläche (färbt sich blau) und lassen diese dort los - Bilder laden hoch und sind danach automatisch ausgewählt
    • mit blauem "Neue Galerie erstellen"-Button bestätigen
  • Galerie bearbeiten:
    • Wenn gewünscht, Reihenfolge der Bilder per Drag & Drop ändern
    • Mit dem Kreuz-Symbol oben rechts an jedem Bild können Bilder auch wieder rausgelöscht werden
    • wenn alles gut so, mit blauem "Galerie einfügen"-Button bestätigen
5

... oder über URL (schon länger hochgeladene Bilder)

  • Von URL einfügen
    • ist bei mehreren Bildern sehr umständlich und daher nicht zu empfehlen
    • Wenn trotzdem gewünscht, bitte vorgehen wie beschrieben in unserer Einzelbild-Anleitung "Das Bild-Element"
6

Lazy Load

  • diese Option sollte auf "AN" (Schalter pink) stehen
  • die Funktion reduziert die Ladezeiten Ihrer Seite, indem immer nur die Bilder geladen werden, die überhaupt sichtbar sind
7

Layout "Gitter"

  • Wählen Sie als Layout Ihrer Galerie "Gitter", bekommen alle Bilder (egal ob Hoch- oder Querformat) die gleiche Breite und gleiche Höhe, Vorschau-Bilder werden einheitlich zugeschnitten, Anordnung im Gitter (einheitliche Zeilen und Spalten).
    • Spalten - wie viele Bilder sollen in einer Reihe gezeigt werden? Bitte responsive Einstellungen gleich mit überlegen und konfigurieren! Alle Infos zur Responsivität finden Sie in unserer Anleitung "Responsivität"
    • Abstände - wie viel Pixel Abstand soll jeweils zwischen den Bildern sein? "0" möglich für "keinen Abstand"
    • Link - Option "Medien-Datei" bedeutet, beim Klick auf ein Galerie-Bild öffnet sich die Lightbox mit den großen Originalbildern vor schwarzem Hintergrund zum Durchklicken. Bei Option "Eigene URL" kann ein Link für die gesamte Galerie hinterlegt werden
    • Seitenverhältnis - mögliche Vorschaubild-Formate wählen:
      • 1:1 - quadratisch
      • 3:2, 4:3, 16:9, 21:9 - quer
      • oder 9:16 - hochkant
8

Layout "Blocksatz"

  • Wählen Sie als Layout Ihrer Galerie "Blocksatz", bekommen alle Bilder (egal ob Hoch- oder Querformat) die gleiche Höhe, kein Zuschnitt der Vorschaubilder, Anordnung in einheitlichen Zeilen
    • Zeilenhöhe - einheitliche Zeilenhöhe eingeben. Bitte responsive Einstellungen gleich mit überlegen und konfigurieren! Alle Infos zur Responsivität finden Sie in unserer Anleitung "Responsivität"
    • Abstände - wie viel Pixel Abstand soll jeweils zwischen den Bildern sein? "0" möglich für "keinen Abstand"
    • Link - Option "Medien-Datei" bedeutet, beim Klick auf ein Galerie-Bild öffnet sich die Lightbox mit den großen Originalbildern vor schwarzem Hintergrund zum Durchklicken. Bei Option "Eigene URL" kann ein Link für die gesamte Galerie hinterlegt werden
9

Layout "Masonry"

  • Wählen Sie als Layout Ihrer Galerie "Masonry", bekommen alle Bilder (egal ob Hoch- oder Querformat) die gleiche Breite, Anordnung in einheitlichen Spalten
    • Spalten - wie viele Bilder sollen in einer Reihe gezeigt werden? Bitte responsive Einstellungen gleich mit überlegen und konfigurieren! Alle Infos zur Responsivität finden Sie in unserer Anleitung "Responsivität"
    • Abstände - wie viel Pixel Abstand soll jeweils zwischen den Bildern sein? "0" möglich für "keinen Abstand"
    • Link - Option "Medien-Datei" bedeutet, beim Klick auf ein Galerie-Bild öffnet sich die Lightbox mit den großen Originalbildern vor schwarzem Hintergrund zum Durchklicken. Bei Option "Eigene URL" kann ein Link für die gesamte Galerie hinterlegt werden
10

Link

  • Im Standard ist das Bild-Widget nicht verlinkt
  • Wenn Sie das Bild mit seiner Originaldatei verlinken möchten (Bild öffnet sich dann bei Klick in einer Lightbox mit schwarzem Hintergrund in groß), können Sie im Dropdown "Medien-Datei" auswählen
  • Wenn Sie das Bild mit einem anderen Link verknüpfen möchten, wählen Sie "Individuelle URL" und fügen die entsprechende URL ins Link-Feld ein
    • Link Optionen - Auf Zahnrad-Symbol rechts neben Link-Feld klicken: Es öffnen sich die Link-Optionen:
      • Bei externen Links, die von der Ortsverein-Website wegführen, bitte Häkchen setzen bei "Link in neuem Fenster öffnen"
      • Bei seiten-internen Links sind keine Link-Optionen notwendig.
11

Bildgröße

  • Wählen Sie bei Bildgröße die Bildqualität, die Ihnen zur Einbindung in die Galerie ausreicht:
    • Thumbnail - wenn Sie 6 oder mehr Bilder Pro Reihe einbinden möchten
    • Medium - wenn Sie 2-5 Bilder pro Reihe einbinden möchten
    • Originalgröße - sollte beim Galerie-Widget eher nicht ausgewählt werden, um die Ladezeiten der Seite nicht unnötig in die Höhe zu treiben
    • die anderen Optionen sind in der Regel unrelevant
12

Andere Optionen

  • Alle anderen Optionen werden in der Regel nicht benötigt.
13

Speichern

  • Zum Speichern der Einstellungen im Editor oben rechts auf den pinken "Veröffentlichen" - Button klicken (färbt sich wieder dunkelgrau, dann ist alles gespeichert)

Überlagerung

1

Hintergrund

  • Wählen Sie diese Option, wenn bei Mausover die Bilder dunkel / mit einer Farbe überlagert werden sollen.
2

Titel & Beschreibung

  • Hier können Sie wählen, ob bei Mausover Bild-Informationen aus der Mediathek sichtbar werden sollen:
    • Titel - entspricht in der Mediathek "Titel"
    • Überschrift - entspricht in der Mediathek "Beschriftung"
    • Alt - entspricht in der Mediathek "Alternativer Text"
    • Beschreibung - entspricht in der Mediathek "Beschreibung"
3

Speichern

  • Zum Speichern der Einstellungen im Editor oben rechts auf den pinken "Veröffentlichen" - Button klicken (färbt sich wieder dunkelgrau, dann ist alles gespeichert)
Stil bearbeiten

Bild

1

Rahmen-Optionen

  • Rahmenfarbe, Rahmenbreite, Border-Radius werden bei Galerien in der Regel nicht benötigt
2

Hover-Animation

  • Standardgemäß sind Animationen deakiviert
  • Wenn gewünscht, können hier Animations-Effekte beim Mausover über die Galerie-Bilder eingestellt werden. 
  • Die Animationsdauer kann in Millisekunden angegeben werden
3

Speichern

  • Zum Speichern der Einstellungen im Editor oben rechts auf den pinken "Veröffentlichen" - Button klicken (färbt sich wieder dunkelgrau, dann ist alles gespeichert)

Überlagerung

1

Farbe der Überlagerung

  • Wenn in den Inhalt-Einstellungen "Überlagerung" / Hintergrund aktiviert wurde, kann hier jeweils für den Normal-Modus alsauch für den Hover-Modus (Mausover) die Hintergrund-Farbe und -Deckkraft der Farb-Überlagerung eingestellt werden
  • Dafür gibt es zwei Möglichkeiten:
    • Per Vorgabe (Weltkugel-Icon) kann man auf die in den Website-Einstellungen angelegten "Globalen Farben" zurückgreifen, um sicherzustellen, dass man immer den selben Farbton verwendet
    • Alternativ steht auch die Farbpalette zur Verfügung (Icon mit rot durchgestrichenem farblosem Quadrat, solange noch keine Farbe hinterlegt ist / farbiges Quadrat, wenn bereits eine Farbe hinterlegt ist)
2

Hover-Animation

  • Standardgemäß sind Animationen deakiviert
  • Wenn gewünscht, können hier Animations-Effekte beim Mausover über die Galerie-Bilder eingestellt werden. 
  • Die Animationsdauer kann in Millisekunden angegeben werden
3

Speichern

  • Zum Speichern der Einstellungen im Editor oben rechts auf den pinken "Veröffentlichen" - Button klicken (färbt sich wieder dunkelgrau, dann ist alles gespeichert)

Inhalt (Text bei Überlagerung, wenn aktiviert)

1

Ausrichtung

  • Wenn Sie in den Galerie-Einstellungen beim "Überlagerung" Titel und/oder Beschreibung gewählt haben, können Sie hier die Ausrichtung des Textes bei Überlagerung wählen: Links, zentriert, rechts
2

Vertikale Position

  • Wo soll der Überlagerungs-Text auf dem Bild erscheinen? Oben, Mitte oder Unten?
3

Titel und Beschreibung

  • Textfarbe für Beschriftung bei Überlagerung wählen:
    • Per Vorgabe (Weltkugel-Icon) kann man auf die in den Website-Einstellungen angelegten "Globalen Farben" zurückgreifen, um sicherzustellen, dass man immer den selben Farbton verwendet
    • Alternativ steht auch die Farbpalette zur Verfügung (Icon mit rot durchgestrichenem farblosem Quadrat, solange noch keine Farbe hinterlegt ist / farbiges Quadrat, wenn bereits eine Farbe hinterlegt ist)
  • Typographie
    • Um Änderungen am Schriftbild der Überlagerungs-Schrift vorzunehmen, klicken Sie bei Typographie auf den Icon mit Stift - es öffnen sich die Typographie-Einstellungen
    • Alle Optionen hierfür finden Sie in unserer Anleitung "Typographie-Einstellungen"
  • Abstände der Überlagerungs-Text-Elemente zueinander können jeweils in Pixel angegeben werden
4

Andere Optionen

  • Alle anderen Optionen, wi z.B. Hover Animation werden in der Regel nicht benötigt.
5

Speichern

  • Zum Speichern der Einstellungen im Editor oben rechts auf den pinken "Veröffentlichen" - Button klicken (färbt sich wieder dunkelgrau, dann ist alles gespeichert)
Erweitert bearbeiten
Anleitung "Erweiterte Einstellungen"