Inhaltselement "Text/Media fancy"
Anleitung mit Übung
Über das Inhaltselement
Das Inhaltselement "Text/Medien fancy" bietet eine ausgefallenere Darstellung von Text mit Medien kombiniert.
- Das Erste Medium wird dabei über 100% Breite des Content Elements dargestellt und die Medienelemente 2-4 werden dreispaltig darunter angeordnet.
- Der Text wird in den Layoutoptionen "neben Text rechts/links" und "im Text rechts/links" nach unten bündig mit dem Bild bzw. den Bildern angezeigt. Ist eine Bildunterschrift vorhanden orientiert sich das bündige Ausrichten an dieser.
Verwendung:
- ansprechende Darstellung von insb. marketingrelevanten Materials
- Optisch ansprechend ist es besonders, wenn der Text Anteil nicht ganz so groß ist.
- Bildunterschriften können hier leicht störend werden. Nutzen Sie in diesem Fall eher das Titel-Feld, um ein paar Informationen, was auf dem Bild zu sehen ist, mitzuteilen.
- Für die Darstellung von Personen oder Events bietet sich eher das CE Gallerie an.
- Beste Darstellung mit Layout "neben Text rechts/links" und "im Text rechts/links" auf 100% Seitenbreite.
- In Gridelementen von 66% oder kleiner sollte kein Text neben den Bildern stehen.
- Nicht geeignet für Spalten in Gridelementen von 33% oder 25%
So sieht es aus
Live Ansicht des Inhaltselements
Lorem ipsum dolor sit
consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa.
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. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac
Schritt für Schritt
Bebilderte Anleitung
Schritt 1: Anlegen eines Text&Medien Elements Fancy
Klicken Sie zum Anlegen des Elements auf das "+ Inhalt-Icon" im Bearbeitungsbereich der Zielseite. Anschließend wählen Sie unter dem Reiter "Typischer Seiteninhalt" das "Text&Medien Fancy"-Element aus. Im Anschluss öffnet sich das Bearbeitungsmenü des Elements automatisch.
Schritt 2: Anlegen des Inhalts
Vergeben Sie zunächst unter dem Reiter "Allgemein" eine Überschrift. Anschließend legen Sie den Typ/das Layout der Überschrift fest. Nun legen Sie unten im Texteditor den gewünschten Inhalt des Text&Medien Elements an.
Hinweise zum Überschriftenlayout: Das Layout bestimmt die Größe der Überschrift, wobei Layout 1 die größte und Layout 6 die kleinste Größe darstellt. Im Typo3 ist standardmäßig das Layout "Standard" voreingestellt, dieses entspricht Layout 2. Wenn Sie das Layout "Verborgen" auswählen, ist die Überschrift nur im Backend sichtbar und bleibt den Seitenbesuchern somit verborgen. Verwenden Sie das Layout 1 nur einmal pro Seite, dies verbessert das Suchmaschinenranking Ihrer Seite!
Schritt 3: Hinzufügen eines Bildes (optional)
Einbinden einer Mediendatei
Um eine Mediendatei einzubinden gehen Sie zunächst auf den Reiter "Medien" und klicken anschließend auf den Button "Mediendatei hinzufügen". Anschließend werden Sie zur Dateiliste weitergeleitet und wählen dort das gewünschte Bild aus. Alternativ können Sie auch durch einen Klick auf "Datei auswählen und hochladen" eine lokale Datei direkt einbinden.
Bei dem Einbinden von mehreren Bildern in das Text&Medien Element Fancy wird das erste Bild stets größer dargestellt als die folgenden Bilder.
Es empfiehlt sich eine Pixelbreite von 1200px bei 100 % Seitenbreite in der Desktopansicht. Und mindestens 750px bei 50 % Seitenbreite in der Desktopansicht. So sind die Bilder groß genug für alle möglichen Ansichten.
Bitte beachten Sie, dass die Mediendatei bei der Option "Datei auswählen und hochladen" in der Dateiliste im Ordner "user_upload" gespeichert wird. Dies erschwert Ihnen und anderen Redakteur*innen unter Umständen das Aufinden dieser Datei in der Dateiliste.
Hinterlegen von Metadaten
Nach dem Einbinden eines Bildes fügen Sie bitte unter dem Bereich "Bild-Metadaten" den "Alternativen Text" und die "Bildbeschreibung" ein. Dies dient in erster Line der Barrierefreiheit. Sollten Sie diese bereits in der Dateiliste hinterlegt haben, werden diese automatisch vorausgefüllt.
Bildbearbeitung
Unter dem Bereich Bildbearbeitung können Sie das Seitenverhältnis des Bildes in Abhängigkeit von der zur Verfügung stehenden Bildschirmgröße festlegen. Dies dient dazu die Bilddarstellung für die Ausgabe auf verschiedenen Endgeräten zu optimieren. Um das Seitenverhältnis in Abhängigkeit von der zur Verfügung stehenden Bildschirmgröße festzulegen klicken Sie auf "Editor öffnen" und legen Seitenverhältnisse für die entsprechenden Bildschirmgrößen fest. Die Größe "Extra Large" entspricht hierbei einem großen PC-Monitor und "Sehr Klein" einem Smartphonedisplay.
Tipp: Um das Ergebniss zu überprüfen können Sie das "Anzeigen-Modul" verwenden. Alternativ können Sie sich die Seite anzeigen lassen, Ihr Browserfenster minimieren und dessen Größe entsprechend variieren.
Hinweis: Der Editor dient lediglich zum Festlegen von Seitenverhältnissen. Sonstige Bildbearbeitungsoptionen bietet er nicht.
Galerieeinstellungen
Unter "Position und Ausrichtung" legen Sie fest an welcher Stelle das Bild im Bezug zum Text positioniert wird.
Schritt 4: Auswahl der Hintergrundfarbe (optional)
Um eine Hintergrundfarbe für das Text&Medien Fancy Element festzulegen, gehen Sie zunächst auf den Reiter "Erscheinungsbild". Dort wählen Sie im Bereich "Hintergrundfarbe" die gewünschte Rahmenfarbe aus.
Wichtig: Bitte nutzen Sie diese Option nur zum Hervorheben besonders wichtiger Elemente. Bunte Farben lenken gezielt die Blicke der User*innen. Zuviele Hervorhebeungen können den gegeteiligen Effekt haben.
Schritt 5: Auswahl des Hintergrundbildes (optional)
Um ein Hintergrundbild für das Text&Medien Fancy Element festzulegen, gehen Sie zunächst auf den Reiter "Erscheinungsbild". Dort klicken Sie im Bereich "Hintergrundbild" auf "Bild hinzufügen". Anschließend werden Sie zur Dateiliste weitergeleitet und wählen dort das gewünschte Bild aus. Alternativ können Sie auch durch einen Klick auf "Datei auswählen und hochladen" eine lokale Datei direkt einbinden.
Anschließend können Sie in dem Bereich "Optionen für Hintergrundbilder" noch verschiedene Effekte und Filter für das Hintergrundbild einstellen. Beispielsweise können Sie mit dem "Verblassen-Effekt" sicherstellen, dass der Text des Elements nach wie vor gut lesbar ist. Des Weiteren lassen sich mittels "Verblassen-Effekt" auch Hintergrundfarbe und Hintergrundvild kombinieren.
Es empfiehlt sich eine Pixelbreite von 1200px bei 100 % Seitenbreite in der Desktopansicht. Und mindestens 750px bei 50 % Seitenbreite in der Desktopansicht. So sind die Bilder groß genug für alle möglichen Ansichten.
Bitte beachten Sie, dass die Mediendatei bei der Option "Datei auswählen und hochladen" in der Dateiliste im Ordner "user_upload" gespeichert wird. Dies erschwert Ihnen und anderen Redakteur*innen unter Umständen das Aufinden dieser Datei in der Dateiliste.
Wichtig: Bitte nutzen Sie diese Option nur zum Hervorheben besonders wichtiger Elemente. Hintergrundbilder lenken gezielt die Blicke der User*innen. Zuviele Hervorhebeungen können den gegeteiligen Effekt haben.
TYPO3 Selbststudium
Übung
- Legen Sie ein CE "Text/Medien fancy" an.
- Füllen Sie es mit einem Text von ca 90 Worten.
- Nehmen Sie für das erste Medienelement ein Video von vcm.uni-kl.de und binden Sie es ein.
- Nehmen Sie für das zweite bis vierte Medienelement je ein Bild.
- Denken Sie bitte an alternativen Text.
- Probieren Sie unterschiedliche Einstellungen für das Höhen/Seitenverhältnis der Bilder aus. Damit können Sie etwas die Höhe des Entstehenden Medien-Pakets kontrollieren. Die zweiten bis vierten Medienelemente sollten das gleiche Höhen/Seitenverhältnis bekommen.