Bilder: Optionen und Kombinationen

Bilder sollten in der Regel über Inhaltselemente vom Typ 'Bild' oder, wenn sie mit Text kombiniert werden, 'Text mit Bild' eingebunden werden.

Es gibt dabei nahezu endlos viele Möglichkeiten, von denen Sie nachfolgend einige sehen. Die Optionen sind unter anderen:

  • Position des Bildbereiches (z.B. oben links, unten mittig oder rechts neben Text)
  • Anzahl der Bilder nebeneinander
  • Größe des Bildbereiches
  • weitere Optionen (z.B. Klickvergrößern, Schatten, Bildunterschrift, Tipptext)

Es ist wichtig zu wissen, dass bei diesen Layouts die Größen und Positionen der Bilder vom TYPO3-Standard abweichend angegeben werden. Unser Ansatz ermöglicht eine erheblich schönere Darstellung auf kleinen Bildschirmen, wie z.B. Smartphones, und eine bessere Nutzung der Anzeigefläche der großen Bildschirme. Auf dem Tab [Erscheinungsbild] können Sie die [Breite des Bildbereiches (%)] angeben, z.B. '60' für 60%. Wenn Sie nichts angeben, gelten die Standardwerte: 100% bei Bildern oben oder unten und 50% bei Bildern neben dem Text. Diese 50% ergeben bei [Anzahl an Spalten] '2' zum Beispiel 25% pro Bild (einschließlich Abstände).

Als Sonderform zeigen wir ein ganzseitiges Bild, dass die ganze Breite und Höhe des jeweiligen Bildschirmes einnimmt.

1 Bild in Inhaltsbreite

2 Bilder nebeneinander

Jedes Bild lässt sich mit einer Bildunterschrift versehen.
Bildunterschrift 2

3 Bilder nebeneinander - mit Klickvergrößern

Klickvergrößern gilt für alle Bilder des Bildbereiches.
Sie öffnen gemeinsam in 1 Lightbox.
Hinzukommen ggf. weitere Bilder der gleichen Seite.

6 Bilder nebeneinander - ohne Bildunterschrift

2 Zeilen mit je 3 Bildern nebeneinander

3 Bilder über Text

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

1 Bild neben Text

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

3 Bilder neben Text

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

3 Bilder neben Text - Überschrift darüber

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

3 Bilder neben Text - Überschrift mittig darüber

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

2 x 3 Bilder neben dem Text

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

3 Bilder unter Text

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

1 Bild neben Text - Bild kleiner

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

3 Bilder mit ungleicher Höhe auf gleiche Breite gebracht

3 Bilder ungleicher Höhe - neben dem Text

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

1 Bild rechts bis außen reichend

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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

1 Bild links bis außen reichend

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. No sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, accusam et justo duo dolores et ea rebum. Stet clita kasd.

1 Bild links und rechts bis außen reichend

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, labore et dolore magna aliquyam erat, sed diam voluptua.

 

a7digital GmbH

Ostpreußenring 76
23569 Lübeck

Telefon: +49 451 48 97 83 38

Hotline: +49 177 835 77 77

a7.layouts steht für moderne, technisch hochwertige Gestaltung von Websites mit dem CMS TYPO3.

Sie finden auf diesen Seiten unter anderem Beispiele von Internet-Seiten, die auf einem unserer Modell-Layouts aufbauen, Schulungs-Videos, die Ihnen den Einstieg in die Bearbeitung Ihrer neuen Website erleichtern, und eine schriftliche Anleitung mit vielfältigen Beispielen.