Kompatibilität:

WebSite X5 Evo und Pro

Der Name erinnert an technisches Zeichnen und Tabellen mit Würfeln, Quadern und Pyramiden, die in isometrischer Axonometrie angeordnet sind. Aber keine Sorgen: Mit dem Zusatzobjekt Isometric Grid Gallery werden Sie nicht zurück zur Schule gehen müssen. Im Gegenteil wird die Estellung einer Galerie ganz einfach sein, in der die Bilder in einem übersichtlichen isometrischen Raster angeordnet sind.


Auf der Vorschauseite finden Sie einige Beispiele dafür, was Sie mit diesem Objekt einrichten können.       



Isometrische Projektion

Viele Jahre lang war das Web eine zweidimensionale Umgebung, wo die Elemente nur auf der x (horizontal) - und y (vertikal)-Achse positioniert werden konnten. In der 90er Jahre hat man begonnen, nach einer Weise für die Anzeige der Objekte in drei Dimensionen zu suchen, und da die Rechenleistung damals noch begrenzt war, hat man eine Lösung gefunden, die auf die isometrische Projektion basiert, bei der eine dritte Achse vorhanden ist, nämlich die z-Achse für die Darstellung der Tiefe. 


In der isometrischen Projektion bilden die drei gleiche Winkel, sodass der Projektionsrahmen ist in Bezug auf die drei Hauptebenen gleichmäßig geneigt.


Die isometrische Perspektive ist noch heute eine gute Lösung für die Darstellung der Dreidimensionalität der Elemente einer Webseite.


Nachdem Sie den grundlegenden Mechanismus kennengelernt haben, wird es Ihnen leicht fallen zu verstehen, wie Sie bei der Realisierung Ihrer Galerie in isometrischer Perspektive vorgehen müssen.


So erstellen Sie die Bildgalerie

  • Doppelklicken Sie auf das eingefügte Isometric-Grid-Gallery-Objekt, um das Fenster mit allen verfügbaren Optionen zu öffnen.
  • Bleiben Sie im Abschnitt Inhalt und klicken Sie auf die Schaltfläche Hinzufügen, um die Bilddatei zu importieren, die Sie einfügen möchten. Über den Pfeil der Schaltfläche Hinzufügen können Sie wählen, ob Sie eine  Lokale Datei suchen oder die  Online-Bibliothek verwenden (weitere Informationen finden Sie unter Wie importiere ich eine Datei?).   
  • Wiederholen Sie den Vorgang, um alle benötigten Bilder hinzuzufügen. Denken Sie daran, dass Sie mit den Tastenkombinationen STRG+Klick und SHIFT+Klick mehrere Bilder gleichzeitig auswählen können.
  • Alle eingefügten Bilder werden in der Liste unterhalb der Symbolleiste angezeigt: Verwenden Sie die Schaltflächen und , um zwischen kleinen oder großen Vorschaubildern zu wechseln.
  • Verwenden Sie bei Bedarf die Schaltfläche , um die ausgewählte Datei aus der Liste zu entfernen, sowie die Pfeilschaltflächen, um die Reihenfolge der Bilder zu ändern.
  • Für jedes Bild können Sie:
    • die Schaltfläche verwenden, um einen Titel und einen Alternativtext einzufügen, der sowohl für die Barrierefreiheit als auch für die SEO-Optimierung der Seite nützlich ist (siehe Barrierefreiheit von Bildern: die Bedeutung des Alternativtexts);
    • auf die Schaltfläche  klicken und im daraufhin geöffneten Fenster einen kurzen Text (z. B. einen Titel oder eine Bildunterschrift) eingeben;
    • auf die Schaltfläche klicken und den Link festlegen, indem Sie die passende Aktion auswählen.


So definieren Sie den Rasterstil

Nachdem Sie nun den eigentlichen Inhalt der Galerie festgelegt haben, können Sie sich um deren grafischen Stil kümmern:

  • Wechseln Sie in den Abschnitt Stil: Hier finden Sie alle Optionen, die Sie benötigen, um das Aussehen der Galerie anzupassen, die Sie erstellen. 
  • Was das Rasterbetrifft, in dem die Bilder angeordnet sind, können Sie:
    • die Anzahl der Spalten des Rasters festlegen, nach dem die Galerie organisiert wird.
    • die Rasterproportion definieren, also das Verhältnis zwischen der Breite und der Höhe des Objekts.
    • eine Hintergrundfarbe festlegen und diese optional nach oben und unten in eine zweite Farbe überblenden oder mit dem Seitenhintergrund verschmelzen lassen: Wählen Sie in diesem zweiten Fall „Transparent“ für Oberen und unteren Verlauf.
    • das Raster innerhalb des verfügbaren Platzes auf der Seite ausrichten.
    • entscheiden, ob alle Bilder im Raster ausgerichtet bleiben sollen oder ob die geraden bzw. ungeraden Spalten versetzt werden.
    • die Ausrichtung der Galerie ändern, indem Sie die Rotation entlang der drei Achsen X, Y und Z anpassen.      
  • Natürlich können Sie auch das Aussehen der einzelnen Zellendes in der Galerie verwendeten Layout-Rasters anpassen:
    • Legen Sie zunächst die Zellgröße fest: Dies entspricht dem verfügbaren Platz für das Objekt innerhalb Ihrer Seite.
    • Legen Sie abschließend den Fasenfaktor, die Farbe von Rahmen und Schatten fest und definieren Sie den Außenabstand.


So verfeinern Sie das Erscheinungsbild der Galerie

Um das Erscheinungsbild der Galerie weiter anzupassen und sie noch interessanter zu gestalten, können Sie sie vervollständigen, indem Sie den Stil der Beschreibungen festlegen und Effekte aktivieren:

  • Wechseln Sie in den Abschnitt Optionen und verwenden Sie die verfügbaren Formatierungsoptionen (Schriftart, Text- und Hintergrundfarbe, Ausrichtung, Ränder), um festzulegen, wie die gegebenenfalls den Bildern zugeordnete Beschreibung angezeigt werden soll. 
  • Sie können über die Option Effekt festlegen, ob die Beschreibungen immer sichtbar sein sollen oder bei Mauszeigerkontakt ein- bzw. ausgeblendet werden.
  • Sie können auch für die gesamte Galerie einen Einblendeffekt festlegen. Konkret können Sie wählen, ob das Objekt mit einem Bewegungs-Effekt oder mit einem Parallax-Effekt in die Seite eingeblendet werden soll. 
  • Abschließend können Sie einen Hover-Effekt wählen: Mit dem Effekt Zoom In erhalten Sie beispielsweise eine leichte Vergrößerung des Bildes, wenn Sie mit der Maus darüberfahren.



Sind Sie schon neugierig, wie diese Objekt auf Ihrer Website aussieht? Installieren Sie sofort Isometric Grid Gallery 


Fehlen Ihnen noch Credits für den Kauf dieses Objekts? Alle Kreditpakete ansehen