Luftbild Ruhr-Universität Bochum
Gebäude IB der Ruhr-Universtät Bochum

Bild mit Text-Overlay

Das Mask Element Bild mit Text-Overlay ist design technisch ein sehr schönes Inhaltselement, sollte aber im Zusammenspiel mit einer Verschachtelung in den Rasterelementen Spalten sehr sparsam eingesetzt werden.
Außerdem sollte man auf sehr viel Text wie hier ;-) in diesem Inhaltselement verzichten. Zum einen ist ein zusätzlicher Scrollbalken nicht gerade userfreundlich und zum anderen ist der durchscheinende Hintergrund zwar sehr hübsch, der Text aber anstrengender zu lesen.

Luftbild Ruhr-Universität Bochum

Bild mit Text-Overlay

Button: +Inhalt (Neues Inhaltselement erstellen) -> Mask Elemente -> Bild mit Text-Overlay.

Folgende Einstellungen sind vorzunehmen:

Allgemein:
Inhaltselement
Typ: Bild mit Text-Overlay haben wir ausgewählt.
Spalte: Unterseiten Bereich neben Navigation, erstellt das Inhaltselement rechts von der Seitennavigation.
Überschriften
Überschrift: Gebe hier eine Überschrift ein. Diese Überschrift wird in Großbuchstaben angezeigt.
Typ: Voreingestellt ist Default (H2).
Achtung: Der Typ der Überschriften darf nicht beliebig gewählt werden! Jede Seite sollte am Anfang genau eine H1 Überschrift haben.
Danach folgen dann standardmässig H2 Überschriften. Weitere Unter-Unterschriften sind dann H3 Überschriften und so weiter.
Hier mal schematisch dargestellt:

<H1>Die große Überschrift (darf/muss genau einmal vorkommen!)</H1>
          <H2>Die UnterÜberschrift</H2>
          <H2>Noch eine UnterÜberschrift</H2>
                   
<H3>Die Unter-UnterÜberschrift</H3>
                            <H4>Die Unter-Unter-UnterÜberschrift</H4>

          <H2>Noch eine UnterÜberschrift</H2>

Headline font-size: Passe hier die Größe der Überschrift dem Gesamtkonzept an. Ist Dir z.B. die H2 Überschrift zu groß, wähle hier z.B.: Wie H4 [h4] aus.
Datum: Falls gewünscht, gib ein Datum ein. Es erscheint unterhalb der Überschrift vor dem eigentlichen Text. Alle anderen Einstellungen kannst Du frei lassen.

Bilder:
Um Bilder zu veröffentlichen, kannst Du diese via Bild hinzufügen , Dateien auswählen und hochladen (Ziehen und ablegen zum Hochladen von Dateien) auswählen.
Damit Du den Überblick über hochgeladene Dateien aller Art nicht verlierst, solltest Du von Anfang an Ordnung in der Dateiliste halten. Erstelle Dir ggf. dort Ordner mit eindeutigen Namen wie z.B. Bilder, Personenfotos, etc. und lege die Dateien dementsprechend ab.

Am einfachsten Ordnung halten kannst Du, wenn Du immer folgenden Workflow wählst:
Button "Mediendatei hinzufügen"
-> markiere den Ordner in dem Du das Bild hochladen willst
-> falls Du hier einen Unterordner z.B.:"Personen" erstellen willst, kannst Du ganz unten auf der Seite unter "Neuer Ordner erstellen" "Personen" eintragen.
-> markiere nun den gewünschten Order
-> "Dateien hochladen": -> via Button "Durchsuchen" das gewünschte Bild auswählen und anschließend den Button "Dateien hochladen" betätigen.
-> Nur noch einen Doppelklick auf das Bild, fertig!

Wenn Du auf die hochgeladene Mediendatei klickst, solltest Du unter Alternativer Text (wird angezeigt, wenn das Bild nicht geladen werden kann) und Titel (wird angezeigt, wenn Du mit der Maus über das Bild fährst) jeweils z.B. "Audimax der RUB" schreiben. Diese Angaben dienen der Barrierefreiheit (so wird der Titel sehbehinderten Besuchern via Screen-, Web-reader oder Braillezeile "vorgelesen") und verbessern das Google-Ranking, da Google diese immer stärker gewichtet.
Unter Beschreibung das Copyright eintragen (z.B.: © RUB, Marquard). Bei fehlendem Copyright Hinweis drohen Abmahnungen der Rechteinhaber.
Auch wenn man einige dieser Angaben, wie hier im Inhaltselement Bild mit Text-Overlay gar nicht angezeigt bekommt, solltest Du diese eintragen.

Das hat den großen Vorteil, daß man sich nur zentral direkt beim Hochladen einmal damit beschäftigen muss. Jetzt weiß man ja auch noch woher das Bild urspünglich stammt. Wird das Bild/Foto mehrmals genutzt erscheinen Alternativer Text, Titel und Copyright-Hinweis immer automatisch. Im Inhaltselement kannst Du  aber ggf.  diese Angaben jederzeit überschreiben.

Achtung: Bei englischen Seiten solltest Du den deutschen "Alternativer Text" und "Titel" natürlich in Englisch überschreiben!

Über den Button Editor öffnen kannst Du das Bild anpassen.

Overlay
Hier kannst Du Deinen Text veröffentlichen. Der Editor bietet Dir einige Formatierungsmöglichkeiten an. So kannst Du z.B. unter Format verschiedene Überschriften wählen. Fett, kursiv, hoch- und tiefgestellt ist möglich. Auch sind (nummerierte) Listen, Seiteneinzüge, Tabellen, Sonderzeichen und horizontale Linien möglich.
Einen neuen Absatz erzeugst Du durch die Enter-Taste, einen Zeilenumbruch mit der Shift-Taste + Enter-Taste.
Der Button "Quellcode" gibt Dir die Möglichkeit html direkt zu editieren.
Aber Achtung: Nicht jeden html Befehl lässt das Bild mit Text-Overlay-Element zu.

Für weitere Einstellmöglichkeiten beachte die Konfiguration für alle Inhaltselemente

Weiter mit "Raster-Elemente"

Button: +Inhalt (Neues Inhaltselement erstellen) -> Mask Elemente -> Bild mit Text-Overlay.

Folgende Einstellungen sind vorzunehmen:

Allgemein:
Inhaltselement
Typ: Bild mit Text-Overlay haben wir ausgewählt.
Spalte: Unterseiten Bereich neben Navigation, erstellt das Inhaltselement rechts von der Seitennavigation.
Überschriften
Überschrift: Gebe hier eine Überschrift ein. Diese Überschrift wird in Großbuchstaben angezeigt.
Typ: Voreingestellt ist Default (H2).
Achtung: Der Typ der Überschriften darf nicht beliebig gewählt werden! Jede Seite sollte am Anfang genau eine H1 Überschrift haben.
Danach folgen dann standardmässig H2 Überschriften. Weitere Unter-Unterschriften sind dann H3 Überschriften und so weiter.
Hier mal schematisch dargestellt:

<H1>Die große Überschrift (darf/muss genau einmal vorkommen!)</H1>
          <H2>Die UnterÜberschrift</H2>
          <H2>Noch eine UnterÜberschrift</H2>
                   
<H3>Die Unter-UnterÜberschrift</H3>
                            <H4>Die Unter-Unter-UnterÜberschrift</H4>

          <H2>Noch eine UnterÜberschrift</H2>

Headline font-size: Passe hier die Größe der Überschrift dem Gesamtkonzept an. Ist Dir z.B. die H2 Überschrift zu groß, wähle hier z.B.: Wie H4 [h4] aus.
Datum: Falls gewünscht, gib ein Datum ein. Es erscheint unterhalb der Überschrift vor dem eigentlichen Text. Alle anderen Einstellungen kannst Du frei lassen.

Bilder:
Um Bilder zu veröffentlichen, kannst Du diese via Bild hinzufügen , Dateien auswählen und hochladen (Ziehen und ablegen zum Hochladen von Dateien) auswählen.
Damit Du den Überblick über hochgeladene Dateien aller Art nicht verlierst, solltest Du von Anfang an Ordnung in der Dateiliste halten. Erstelle Dir ggf. dort Ordner mit eindeutigen Namen wie z.B. Bilder, Personenfotos, etc. und lege die Dateien dementsprechend ab.

Am einfachsten Ordnung halten kannst Du, wenn Du immer folgenden Workflow wählst:
Button "Mediendatei hinzufügen"
-> markiere den Ordner in dem Du das Bild hochladen willst
-> falls Du hier einen Unterordner z.B.:"Personen" erstellen willst, kannst Du ganz unten auf der Seite unter "Neuer Ordner erstellen" "Personen" eintragen.
-> markiere nun den gewünschten Order
-> "Dateien hochladen": -> via Button "Durchsuchen" das gewünschte Bild auswählen und anschließend den Button "Dateien hochladen" betätigen.
-> Nur noch einen Doppelklick auf das Bild, fertig!

Wenn Du auf die hochgeladene Mediendatei klickst, solltest Du unter Alternativer Text (wird angezeigt, wenn das Bild nicht geladen werden kann) und Titel (wird angezeigt, wenn Du mit der Maus über das Bild fährst) jeweils z.B. "Audimax der RUB" schreiben. Diese Angaben dienen der Barrierefreiheit (so wird der Titel sehbehinderten Besuchern via Screen-, Web-reader oder Braillezeile "vorgelesen") und verbessern das Google-Ranking, da Google diese immer stärker gewichtet.
Unter Beschreibung das Copyright eintragen (z.B.: © RUB, Marquard). Bei fehlendem Copyright Hinweis drohen Abmahnungen der Rechteinhaber.
Auch wenn man einige dieser Angaben, wie hier im Inhaltselement Bild mit Text-Overlay gar nicht angezeigt bekommt, solltest Du diese eintragen.

Das hat den großen Vorteil, daß man sich nur zentral direkt beim Hochladen einmal damit beschäftigen muss. Jetzt weiß man ja auch noch woher das Bild urspünglich stammt. Wird das Bild/Foto mehrmals genutzt erscheinen Alternativer Text, Titel und Copyright-Hinweis immer automatisch. Im Inhaltselement kannst Du  aber ggf.  diese Angaben jederzeit überschreiben.

Achtung: Bei englischen Seiten solltest Du den deutschen "Alternativer Text" und "Titel" natürlich in Englisch überschreiben!

Über den Button Editor öffnen kannst Du das Bild anpassen.

Overlay
Hier kannst Du Deinen Text veröffentlichen. Der Editor bietet Dir einige Formatierungsmöglichkeiten an. So kannst Du z.B. unter Format verschiedene Überschriften wählen. Fett, kursiv, hoch- und tiefgestellt ist möglich. Auch sind (nummerierte) Listen, Seiteneinzüge, Tabellen, Sonderzeichen und horizontale Linien möglich.
Einen neuen Absatz erzeugst Du durch die Enter-Taste, einen Zeilenumbruch mit der Shift-Taste + Enter-Taste.
Der Button "Quellcode" gibt Dir die Möglichkeit html direkt zu editieren.
Aber Achtung: Nicht jeden html Befehl lässt das Bild mit Text-Overlay-Element zu.

Für weitere Einstellmöglichkeiten beachte die Konfiguration für alle Inhaltselemente

Weiter mit "Raster-Elemente"

To Top