Inhaltselement: Text mit Bild
Das Inhaltselement "Text mit Bild" gehört zur Gruppe der Standard-Inhaltselemente.
Diese Beschreibung setzt voraus, dass Sie bereits den Artikel Erste Schritte / Schnelleinstieg gelesen haben.
Über das Inhaltselement Text mit Bild wird ein HTML Element zur Verfügung gestellt, über das Text für die Seite erfasst werden kann. Des Weiteren kann eine Überschrift definiert werden.
Neben den Text-Elementen können optional ein oder mehrere Bilder hinterlegt werden, die über eine eigene Option frei positioniert werden können. Die Bilder können hierbei als Lightbox oder Slider dargestellt werden.
Feld-Konfiguration
Für dieses Inhaltselement stehen die folgenden Felder zur Verfügung:
Konfigurationsfelder: Überschrift
Titel
Definiert die Überschrift die ausgegeben werden soll.
Typ
Definiert den Html-Tag, der für die Überschrift verwendet werden soll. Hierbei stehen die Tags H1 bis H5 zur Verfügung.
Konfigurationsfelder: Text
Inhalt
HTML-Inhalt des Elements
Konfigurationsfelder: Bild-Einstellungen
Bild-Position
Diese Einstellung definiert, an welcher Stelle das bzw. die Bilder dargestellt werden sollen.
Bilder
CMS Medien-Verwaltung zur Hinterlegung des bzw. der Bilder.
Folgende Meta- / Bild-Einstellungen werden berücksichtigt:
- Bild-Titel
- Alt-Tag
Weitere Informationen zur Medien-Verwaltung
Bildbreite in Prozent
Über diese Konfiguration kann definiert werden, wie viel Platz in Prozenz das bzw. die Bilder einnehmen sollen. Wenn der Slider bspw. auf 40 gesetzt wird, so würden das bzw. die Bilder 40% und der Text 60% einnehmen.
Diese Einstellung kann für jede der fünf Device-Größen definiert werden.
Bilder-Rahmen
Wenn diese Option aktiv ist, so werden die Bilder mit einem Rahmen versehen.
Konfigurationsfelder: Darstellungsart
Darstellungsart
Bestimmt wie das bzw. die Bilder dargestellt werden sollen.
Thumbnails pro Zeile
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Hauptbild und Thumbnails gewählt wurde
Definiert wie viele Thumbnails unterhalb des Hauptbildes in einer Zeile dargestellt werden sollen.
Höhe des Bild-Sliders in Pixel
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Bild-Slider gewählt wurde
Definiert die Höhe die der Bild-Slider einnehmen soll.
Automatisch durchblättern
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Bild-Slider gewählt wurde
Wenn diese Option aktiv ist, wird in einem definierten Zeitinterval jeweils zum nächsten Bild weitergeblättert.
Nächsten Slide anzeigen nach
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Bild-Slider gewählt wurde
Definiert das Zeitinterval für die Option Automatisch durchblättern. Die Zeitangabe muss hierbei in Millisekunden erfolgen.
Beispiel-Elemente
Hinweis: Die Devicegrößen können durch verkleinern / vergrößern des Browser-Fensters nachgestellt werden.
1. Beispiel: Bilder neben dem Text rechts / Hauptbild mit Thumbnails (mit Lightbox)
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. 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. Beispiel: Bilder im Text links / Bild-Slider
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. 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. Beispiel: Bilder über dem Text / Hauptbild mit Thumbnails (mit Lightbox) / Ohne Rahmen
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. 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.