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

Feld
Beschreibung
Feld:

Titel

Beschreibung:

Definiert die Überschrift die ausgegeben werden soll.

Feld:

Typ

Beschreibung:

Definiert den Html-Tag, der für die Überschrift verwendet werden soll. Hierbei stehen die Tags H1 bis H5 zur Verfügung.

Konfigurationsfelder: Text

Feld
Beschreibung
Feld:

Inhalt

Beschreibung:

HTML-Inhalt des Elements

Konfigurationsfelder: Bild-Einstellungen

Feld
Beschreibung
Feld:

Bild-Position

Beschreibung:

Diese Einstellung definiert, an welcher Stelle das bzw. die Bilder dargestellt werden sollen.

Feld:

Bilder

Beschreibung:

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

Feld:

Bildbreite in Prozent

Beschreibung:

Ü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.

Feld:

Bilder-Rahmen

Beschreibung:

Wenn diese Option aktiv ist, so werden die Bilder mit einem Rahmen versehen.

Konfigurationsfelder: Darstellungsart

Feld
Beschreibung
Feld:

Darstellungsart

Beschreibung:

Bestimmt wie das bzw. die Bilder dargestellt werden sollen.

Feld:

Thumbnails pro Zeile
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Hauptbild und Thumbnails gewählt wurde

Beschreibung:

Definiert wie viele Thumbnails unterhalb des Hauptbildes in einer Zeile dargestellt werden sollen.

Feld:

Höhe des Bild-Sliders in Pixel
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Bild-Slider gewählt wurde

Beschreibung:

Definiert die Höhe die der Bild-Slider einnehmen soll.

Feld:

Automatisch durchblättern
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Bild-Slider gewählt wurde

Beschreibung:

Wenn diese Option aktiv ist, wird in einem definierten Zeitinterval jeweils zum nächsten Bild weitergeblättert.

Feld:

Nächsten Slide anzeigen nach
Diese Option steht nur zur Verfügung, wenn als Darstellungsart Bild-Slider gewählt wurde

Beschreibung:

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.