Beispiele für den Einsatz von Bildern und Galerien
Statische Bildergalerie (Variante A)
Text & Medien Element mit 5 Bildern, Galerieeinstellung: 5 Spalten
Statische Bildergalerie (Variante B)
Container mit 5 Spalten, pro Spalte ein Text & Medien Element mit je einem Bild
Text auf Bild
Container mit 2 Spalten, pro Spalte ein Text & Medien Element mit je einem Bild (inkl. Bildumrandung), ausgewählter Rahmen: Text auf Bild
Text auf Bild
Link auf Bild
Icon Highlight Color
SVG-Dateien (Logos oder Grafiken), die mit schwarzer Grundfarbe eingestellt werden (so wie die nachfolgenden Icons), können über die Rahmen-Option “Icon Highlight Color” mit einer Farbe (Color 1) eingefärbt werden.
Runde Bildform
Container mit 3 Spalten, pro Spalte ein Text & Medien Element mit je einem Bild, ausgewählter Rahmen: Runde Bildform
FlipBox
Container mit 2 Spalten, pro Spalte ein Text & Medien Element mit je einem Bild, ausgewählter Rahmen: Flipbox
FlipBox
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
- Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
- Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
- Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
FlipBox
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Media/Brandwall
transparente Colorbox (volle Breite) mit zwei 6-Spaltern (Inhalte vertikal zentriert) und einem 3-Spalter (Inhalte vertikal zentriert); darin pro Spalte ein Text & Medien Element mit je einem Bild; wechselseitige Animation pro Spaltenelement
Colorbox mit Hintergrundbild und überlagerndem Contentbild
Colorbox mit Hintergrundbild und überlagerndem Contentbild
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Colorbox mit Hintergrundbild und überlagerndem Contentbild
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
2-Spalten-Element Option "Bilder auf eine Höhe ziehen"
- Um zwei unterschiedliche Bildformate im Content auf eine Höhe zu ziehen, werden diese in einem 2-Spalten-Element platziert und die Option "Bilder auf eine Höhe ziehen" ausgewählt.
- Beide Bildformate sollten zur responsiven Darstellung mindestens 800px breit sein. Das breitere Bildformat wird dabei in der breiten Spalte platziert und umgekehrt (abgesehen von der Aufteilung 50/50).
- Im folgenden Beispiel beginnend mit den Ausgangsformaten ohne ausgewählte Option, dann mit 50/50, 60/40, 66/33 und 25/75 Aufteilung.
50/50 ohne Option "Bilder auf eine Höhe ziehen"
50/50 mit Option "Bilder auf eine Höhe ziehen" (halbe Höhe)
60/40 mit Option "Bilder auf eine Höhe ziehen"
66/33 mit Option "Bilder auf eine Höhe ziehen" (1,5 fache Höhe)
25/75 mit Option "Bilder auf eine Höhe ziehen"
33/33/33 mit Option "Bilder auf eine Höhe ziehen"
15/70/15 mit Option "Bilder auf eine Höhe ziehen"
25/50/25 mit Option "Bilder auf eine Höhe ziehen"
25/25/50 mit Option "Bilder auf eine Höhe ziehen"
50/25/25 mit Option "Bilder auf eine Höhe ziehen"
4 Spalten mit Option "Bilder auf eine Höhe ziehen"
5 Spalten mit Option "Bilder auf eine Höhe ziehen"
Bild über volle Bildschirmbreite
Bild in transparenter Colorbox (100 % Breite, Bild ohne Rand)
Videos über volle Bildschirmbreite
YouTube Video (transparente Colorbox, 100 % Breite, Bild ohne Rand)
Lokales Video (in einer transparenten Colorbox, Rahmenauswahl "Responsives Video", Positionierung "Oben links")
Videos auf Contentbreite
YouTube Video
Lokales Video
YouTube Videos in Spaltenelementen (3-spaltig)
Lokale Videos in Spaltenelementen (2-spaltig)
Teaservarianten
Teaser mit Hintergrundbildern und verschachtelten halbtransparenten Textboxen
2-Spalter mit je einer eingefügten Colorbox mit Hintergrundbild; darin nochmals eine Colorbox mit Transparenz; darin dann ein Text-/Medien-Element mit dem Text; der Spaltenabstand ist zusätzlich reduziert
Nunc nec
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cum sociales
Dolor sit amet consectetuer elit. Aenean commodo ligula eget dolor. Aenean massa. Magnis dis parturient montes nascetur ridiculus.