Cookies helfen uns bei der Bereitstellung des IMT HilfeWikis. Bei der Nutzung vom IMT HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.Weitere Informationen

TYPO3 Inhaltselemente fuer Inhaltsspalten: Unterschied zwischen den Versionen

IMT HilfeWiki - das Wiki
TYPO3 Inhaltselemente fuer Inhaltsspalten
Wechseln zu:Navigation, Suche
(Schritt für Schritt Anleitung)
 
(22 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Infobox article
+
{{article
| os = Alle
+
|type=Anleitung
| service = Typo3
+
|os=Alle
| targetgroup = Angestellte, Bereiche, Besucher, Gäste, Studierende<!-- targetgroup(s), the acticle is written for. if left empty, default is Angestellte, Gäste, Studierende -->
+
|service=Meta:Typo3
| type = Anleitung
+
|targetgroup=Angestellte, Bereiche, Studierende
| disambiguation =  
+
|displaytitle=TYPO3 Inhaltselemente für Inhaltsspalten
 +
|hasdisambig=Nein
 
}}
 
}}
 +
Die folgende Anleitung zeigt Ihnen, wie Sie verschiedene Inhaltselemente zu Ihrer Typo3-Seite hinzufügen können.
 +
<br clear=all>
  
<!-- Entweder draft mit fertigem Inhalt -->
+
== Schritt für Schritt Anleitung ==
{{draft}}
+
Klicken Sie nach dem Erzeugen einer Seite bzw. zum nachträglichen Einfügen von Inhaltselementen in der Ansicht '''"Seite"''' auf den Seitentitel - hier "Probe1" - und füllen Sie anschließend die Spalten - hier '''"Inhalt"''' und '''"Rechte Spalte"''' - sowie eventuell - je nach Vorlage - vorhandene rechteckige Felder mit Inhaltselementen.
 +
[[Datei:TYPO3 Inhaltsspalte1.png|links|mini|827x827px]]
 +
<br clear=all>
  
<!--oder stub und einer Erklärung, was hier passieren soll-->
 
{{stub}}
 
  
<!-- Folgend der empfohlene Seitenaufbau -->
+
Außer bei den schmalen linken Spalten können Sie in den Spalten mehrere Inhaltselemente untereinander einfügen. Beachten Sie dabei aber, dass die breiteren Spalten nur mit den Inhaltselementen '''"Text mit Bild"''' und '''"Accordion"''' gefüllt werden dürfen, die schmalen Spalten und die Querrechtecke dagegen nur mit '''Hinweisboxen''', also "Hinweisbox - Themenfeld mit Links", "Hinweisbox mit Bild", "Hinweisbox mit Icon", "Hinweisbox - Chat", "Hinweisbox - Video" und "Hinweisbox - Kurzer Text".
Kurzer Einleitungstext
+
[[Datei:TYPO3 Inhaltsspalte2.png|links|mini|812x812px]]
 +
<br clear=all>
  
== Was ist zu tun? ==
 
* Stichpunktartige Auflistung
 
* aller Arbeitsschritte
 
  
== Schritt für Schritt Anleitung ==
+
Zusätzlich zu den genannten Inhaltselementen gibt es u. a. noch spezielle Inhaltselemente zur Darstellung von Personen, nämlich '''"Kontaktbox"''', '''"Bereichskontaktliste"''', '''"Personenbox"''', '''"Bereichskontaktbox"''' und '''"Kontaktliste"'''.  
Klicken Sie nach dem Erzeugen einer Seite bzw. zum nachträglichen Einfügen von Inhaltselementen in der Ansicht "Seite" auf den Seitentitel - hier "Probe" - und füllen Sie anschließend die Spalten - hier "Inhalt" und "Rechte Spalte" - sowie eventuell - je nach Vorlage - vorhandene rechteckige Felder mit Inhaltselementen.
+
[[Datei:TYPO3 Inhaltsspalte3.png|links|mini|819x819px]]
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 1.jpg|Abbildung 1|left]]
 
 
<br clear=all>
 
<br clear=all>
  
Außer bei den schmalen linken Spalten können Sie in den Spalten mehrere Inhaltselemente untereinander einfügen. Beachten Sie dabei aber, dass die breiteren Spalten nur mit den Inhaltselementen "Text mit Bild" und "Accordion" gefüllt werden dürfen, die schmalen Spalten und die Querrechtecke dagegen nur mit Hinweisboxen, also "Hinweisbox - Themenfeld mit Links", "Hinweisbox mit Bild", "Hinweisbox mit Icon", "Hinweisbox - Chat", "Hinweisbox - Video" und "Hinweisbox - Kurzer Text".
+
 
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 2.jpg|Abbildung 2|left]]
+
=== Inhaltselement "Text mit Bild ===
 +
 
 +
* Benutzen Sie das Inhaltselement '''"Text mit Bild"''', um längere Texte und Bilder einzufügen.
 +
* Sie können und sollten eine Überschrift vergeben, deren Typ  Sie bei Bedarf ändern können (vorgegeben ist "Standard").
 +
* Den Fließtext können Sie im Editor formatieren.
 +
* Auch (einfache) Tabellen können Sie dort kreieren. Beachten Sie beim Gestalten der Tabellen, dass die Seite auch auf dem Smartphone gut aussehen soll.
 +
:: Über "Anzeigen" in der linken Spalte von Typo3 können Sie kontrollieren, wie die Seite - und damit die Tabelle - auf dem Smartphone aussehen wird.
 +
* Vergessen Sie nicht, die Seite vorher zu '''speichern'''.
 +
[[Datei:TYPO3 Inhaltsspalte4.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
Zusätzlich zu den genannten Inhaltselementen gibt es u. a. noch spezielle Inhaltselemente zur Darstellung von Personen, nämlich "Kontaktbox", "Bereichskontaktliste" und "Personenbox".
+
 
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 3.jpg|Abbildung 3|left]]
+
* Beim Inhaltselement "Text mit Bild" können Sie '''ein Bild oder mehrere Bilder einfügen''', die zuvor - über "Dateiliste" in der linken Spalte von Typo3 - hochgeladen wurden, müssen es aber nicht.
 +
:: Laden Sie das Bild über die Schaltfläche '''Bild hinzufügen''' hoch. Es öffnet sich ein neues Fenster, in dem Sie das entsprechende Bild auswählen.
 +
* Die Position und Ausrichtung des Bildes können Sie selbst bestimmen. Optimal ist ein links oder rechts positioniertes Bild 295 Pixel breit und 225 Pixel hoch (vgl. Styleguide: [http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf]).
 +
* Größere Bilder und Bilder mit anderen Proportionen werden von Typo3 entsprechend geändert, wobei die Breite maßgeblich ist. Ein mittig über dem Text positioniertes Bild ist maximal 600 Pixel breit und 200 Pixel hoch.
 +
[[Datei:TYPO3 Inhaltsspalte5.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
'''Inhaltselement "Text mit Bild"'''
 
  
Benutzen Sie das Inhaltselement "Text mit Bild", um - längere - Texte und Bilder einzufügen. Sie können und sollten eine Überschrift vergeben, deren Typ - vorgegeben ist "Standard" - Sie bei Bedarf ändern können. Den Fließtext können Sie - in Maßen - im Editor formatieren. Auch - einfache - Tabellen können Sie dort kreieren. Beachten Sie beim Gestalten der Tabellen, dass die Seite auch auf dem Smartphone gut aussehen soll. Über "Anzeigen" in der linken Spalte von Typo3 können Sie kontrollieren, wie die Seite - und damit die Tabelle - auf dem Smartphone aussehen wird. Vergessen Sie nicht, die Seite vorher zu speichern.
+
* Bei jedem Bild, das Sie einfügen, können Sie '''Titel''', einen '''alternativen Text''' (z.B. für Blinde), '''eine Bildunterschrift''' und gegebenenfalls einen '''Link''' angeben. Der Link kann z. B. zu einem größeren Bild oder einer anderen Seite führen.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 4.jpg|Abbildung 4|left]]
+
* Falls dem Bild in Typo3 zuvor bereits entsprechende '''Metadaten''' hinzugefügt wurden, werden diese angezeigt und können von Ihnen entweder übernommen oder - für diese Stelle auf dieser Seite - überschrieben werden.
 +
* Sie können über '''"Bild hinzufügen"''' mehrere Bilder hintereinander einfügen.
 +
* '''Speichern''' Sie anschließend Ihre Eingabe.
 +
[[Datei:TYPO3 Inhaltsspalte6.png|links|mini|607x607px]]
 
<br clear=all>
 
<br clear=all>
  
Beim Inhaltselement "Text mit Bild" können Sie ein Bild oder mehrere Bilder einfügen, die zuvor - über "Dateiliste" in der linken Spalte von Typo3 - hochgeladen wurden, müssen es aber nicht. Die Position und Ausrichtung des Bildes können Sie selbst bestimmen. Optimal ist ein links oder rechts positioniertes Bild 295 Pixel breit und 225 Pixel hoch (vgl. Styleguide: [http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf]). Größere Bilder und Bilder mit anderen Proportionen werden von Typo3 entsprechend geändert, wobei die Breite maßgeblich ist. Ein mittig über dem Text positioniertes Bild ist maximal 600 Pixel breit und 200 Pixel hoch.
+
 
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 5.jpg|Abbildung 5|left]]
+
Mit einem Klick auf markierte Symbol wird Ihnen das Dokument außerdem als Webseite angezeigt.
 +
[[Datei:TYPO3 INhaltsspalte7.png|links|mini|608x608px]]
 
<br clear=all>
 
<br clear=all>
  
Bei jedem Bild, das Sie einfügen, können Sie "Titel", einen alternativen Text - z. B. für Blinde -, eine Bildunterschrift und gegebenenfalls einen Link angeben. Der Link kann z. B. zu einem größeren Bild oder einer anderen Seite führen. Falls dem Bild in Typo3 zuvor bereits entsprechende Metadaten hinzugefügt wurden, werden diese angezeigt und können von Ihnen entweder übernommen oder - für diese Stelle auf dieser Seite - überschrieben werden. Sie können über "Bild hinzufügen" mehrere Bilder hintereinander einfügen.
 
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 6.jpg|Abbildung 6|left]]
 
<br clear=all>
 
  
Vergessen Sie nicht, das Dokument zu speichern, wenn Sie mit der Bearbeitung fertig sind. Bei einem Klick auf das Disketten-Symbol mit Auge wird Ihnen das Dokument außerdem als Webseite angezeigt.
+
=== Inhaltselement Accordion ===
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 7.jpg|Abbildung 7|left]]
+
 
 +
Eine Abwandlung des Inhaltselementes "Text mit Bild" ist das Inhaltselement "Accordion". Es unterscheidet sich von "Text mit Bild" dadurch, dass mehrere Überschriften und mehrere Fließtexte untereinander eingefügt werden können und - in der Regel - zunächst nur die Überschriften zu sehen sind. Erst beim Anklicken der Überschrift wird der Fließtext angezeigt. Sie können jedoch auch bestimmen, dass beim Start bereits alle Elemente geöffnet sind oder zumindest das erste Element und festlegen, ob mehrere Elemente gleichzeitig geöffnet werden können.
 +
[[Datei:TYPO3 Inhaltsspalte8.png|links|mini|767x767px]]
 
<br clear=all>
 
<br clear=all>
  
'''Inhaltselement "Accordion"'''
 
  
Eine Abwandlung des Inhaltselementes "Text mit Bild" ist das Inhaltselement "Accordion". Es unterscheidet sich von "Text mit Bild" dadurch, dass mehrere Überschriften und mehrere Fließtexte untereinander eingefügt werden können und - in der Regel - zunächst nur die Überschriften zu sehen sind. Erst beim Anklicken der Überschrift wird der Fließtext angezeigt. Sie können jedoch z. B. auch bestimmen, dass beim Start bereits alle Elemente geöffnet sind oder jedenfalls das erste Element und festlegen, ob mehrere Elemente gleichzeitig geöffnet werden können.
+
Das Erstellen der Elemente - Überschrift und Fließtext und eventuell Bild(er) - erfolgt mittels '''"Seiteninhalt neu erstellen"'''. Es unterscheidet sich nicht vom Verfahren bei "Text mit Bild". '''Speichern''' Sie anschließend Ihre Eingabe.
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 8.jpg|Abbildung 8|left]]
+
[[Datei:TYPO3 Inhaltsspalte9.png|links|mini|607x607px]]
 
<br clear=all>
 
<br clear=all>
  
Das Erstellen der Elemente - Überschrift und Fließtext und eventuell Bild(er) - erfolgt mittels "Seiteninhalt neu erstellen". Es unterscheidet sich nicht vom Verfahren bei "Text mit Bild".
+
 
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 9.jpg|Abbildung 9|left]]
+
So werden in Typo3 die bereits erstellten Elemente des Accordions angezeigt. Sie können die jeweiligen Seiteninhalte auch wieder löschen, verschieben usw.:
 +
[[Datei:TYPO3 Inhaltsspalte10.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
So werden in Typo3 die bereits erstellten Elemente des Accordions angezeigt:
 
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 10.jpg|Abbildung 10|left]]
 
<br clear=all>
 
  
 
Das Einfügen von Bildern ist wie bei "Text mit Bild" möglich:
 
Das Einfügen von Bildern ist wie bei "Text mit Bild" möglich:
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 11.jpg|Abbildung 11|left]]
+
[[Datei:TYPO3 Inhaltsspalte11.png|links|mini|587x587px]]
 
<br clear=all>
 
<br clear=all>
 +
  
 
Und so sieht das Ergebnis mit geöffnetem drittem Accordion-Element und dort oben mittig eingefügtem Bild aus:
 
Und so sieht das Ergebnis mit geöffnetem drittem Accordion-Element und dort oben mittig eingefügtem Bild aus:
[[Datei:Screenshot Webanwendungen Typo3 inhaltselemente fuer inhaltsspalten bereitstellen 12.jpg|Abbildung 12|left]]
+
[[Datei:TYPO3 Inhaltsspalte12.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
 
== Siehe auch ==
 
Weiter interessante Artikel verlinken
 

Aktuelle Version vom 14. Juli 2021, 14:53 Uhr

Anleitung
Allgemeine Informationen
Informationen
Betriebssystem Alle
Service TYPO3
Interessant für Angestellte, Bereiche und Studierende
HilfeWiki des IMT der Uni Paderborn
set displaytitle to TYPO3 Inhaltselemente für Inhaltsspalten

Die folgende Anleitung zeigt Ihnen, wie Sie verschiedene Inhaltselemente zu Ihrer Typo3-Seite hinzufügen können.


Schritt für Schritt Anleitung

Klicken Sie nach dem Erzeugen einer Seite bzw. zum nachträglichen Einfügen von Inhaltselementen in der Ansicht "Seite" auf den Seitentitel - hier "Probe1" - und füllen Sie anschließend die Spalten - hier "Inhalt" und "Rechte Spalte" - sowie eventuell - je nach Vorlage - vorhandene rechteckige Felder mit Inhaltselementen.

TYPO3 Inhaltsspalte1.png



Außer bei den schmalen linken Spalten können Sie in den Spalten mehrere Inhaltselemente untereinander einfügen. Beachten Sie dabei aber, dass die breiteren Spalten nur mit den Inhaltselementen "Text mit Bild" und "Accordion" gefüllt werden dürfen, die schmalen Spalten und die Querrechtecke dagegen nur mit Hinweisboxen, also "Hinweisbox - Themenfeld mit Links", "Hinweisbox mit Bild", "Hinweisbox mit Icon", "Hinweisbox - ChatTextbasierte Kommunikation zwischen zwei oder mehreren Nutzern in Echtzeit.", "Hinweisbox - Video" und "Hinweisbox - Kurzer Text".

TYPO3 Inhaltsspalte2.png



Zusätzlich zu den genannten Inhaltselementen gibt es u. a. noch spezielle Inhaltselemente zur Darstellung von Personen, nämlich "Kontaktbox", "Bereichskontaktliste", "Personenbox", "Bereichskontaktbox" und "Kontaktliste".

TYPO3 Inhaltsspalte3.png

Inhaltselement "Text mit Bild

  • Benutzen Sie das Inhaltselement "Text mit Bild", um längere Texte und Bilder einzufügen.
  • Sie können und sollten eine Überschrift vergeben, deren Typ Sie bei Bedarf ändern können (vorgegeben ist "Standard").
  • Den Fließtext können Sie im Editor formatieren.
  • Auch (einfache) Tabellen können Sie dort kreieren. Beachten Sie beim Gestalten der Tabellen, dass die Seite auch auf dem Smartphone gut aussehen soll.
Über "Anzeigen" in der linken Spalte von Typo3 können Sie kontrollieren, wie die Seite - und damit die Tabelle - auf dem Smartphone aussehen wird.
  • Vergessen Sie nicht, die Seite vorher zu speichern.
TYPO3 Inhaltsspalte4.png



  • Beim Inhaltselement "Text mit Bild" können Sie ein Bild oder mehrere Bilder einfügen, die zuvor - über "Dateiliste" in der linken Spalte von Typo3 - hochgeladen wurden, müssen es aber nicht.
Laden Sie das Bild über die Schaltfläche Bild hinzufügen hoch. Es öffnet sich ein neues Fenster, in dem Sie das entsprechende Bild auswählen.
  • Die Position und Ausrichtung des Bildes können Sie selbst bestimmen. Optimal ist ein links oder rechts positioniertes Bild 295 Pixel breit und 225 Pixel hoch (vgl. Styleguide: http://www.uni-paderborn.de/fileadmin/webrelaunch/upbweb_styleguide_03062014.pdf).
  • Größere Bilder und Bilder mit anderen Proportionen werden von Typo3 entsprechend geändert, wobei die Breite maßgeblich ist. Ein mittig über dem Text positioniertes Bild ist maximal 600 Pixel breit und 200 Pixel hoch.
TYPO3 Inhaltsspalte5.png



  • Bei jedem Bild, das Sie einfügen, können Sie Titel, einen alternativen Text (z.B. für Blinde), eine Bildunterschrift und gegebenenfalls einen Link angeben. Der Link kann z. B. zu einem größeren Bild oder einer anderen Seite führen.
  • Falls dem Bild in Typo3 zuvor bereits entsprechende Metadaten hinzugefügt wurden, werden diese angezeigt und können von Ihnen entweder übernommen oder - für diese Stelle auf dieser Seite - überschrieben werden.
  • Sie können über "Bild hinzufügen" mehrere Bilder hintereinander einfügen.
  • Speichern Sie anschließend Ihre Eingabe.
TYPO3 Inhaltsspalte6.png



Mit einem Klick auf markierte Symbol wird Ihnen das Dokument außerdem als Webseite angezeigt.

TYPO3 INhaltsspalte7.png

Inhaltselement Accordion

Eine Abwandlung des Inhaltselementes "Text mit Bild" ist das Inhaltselement "Accordion". Es unterscheidet sich von "Text mit Bild" dadurch, dass mehrere Überschriften und mehrere Fließtexte untereinander eingefügt werden können und - in der Regel - zunächst nur die Überschriften zu sehen sind. Erst beim Anklicken der Überschrift wird der Fließtext angezeigt. Sie können jedoch auch bestimmen, dass beim Start bereits alle Elemente geöffnet sind oder zumindest das erste Element und festlegen, ob mehrere Elemente gleichzeitig geöffnet werden können.

TYPO3 Inhaltsspalte8.png



Das Erstellen der Elemente - Überschrift und Fließtext und eventuell Bild(er) - erfolgt mittels "Seiteninhalt neu erstellen". Es unterscheidet sich nicht vom Verfahren bei "Text mit Bild". Speichern Sie anschließend Ihre Eingabe.

TYPO3 Inhaltsspalte9.png



So werden in Typo3 die bereits erstellten Elemente des Accordions angezeigt. Sie können die jeweiligen Seiteninhalte auch wieder löschen, verschieben usw.:

TYPO3 Inhaltsspalte10.png



Das Einfügen von Bildern ist wie bei "Text mit Bild" möglich:

TYPO3 Inhaltsspalte11.png



Und so sieht das Ergebnis mit geöffnetem drittem Accordion-Element und dort oben mittig eingefügtem Bild aus:

TYPO3 Inhaltsspalte12.png



Bei Fragen oder Problemen wenden Sie sich bitte telefonisch oder per E-Mail an uns:

Tel. IT: +49 (5251) 60-5544 Tel. Medien: +49 (5251) 60-2821 E-Mail: imt@uni-paderborn.de

Der Servicepoint ist aktuell im Notebook-Café zu finden

Das IMT:Notebook-Café (Raum I0.401) bietet derzeit eingeschränkten Support und hat Montags bis Donnerstags von 08:30 - 16:00 Uhr und Freitags 08:30 - 15:00 Uhr geöffnet. Bitte beachten Sie die derzeit geltenden Hygienebestimmungen.

Das IMT:Servicecenter Medien auf H1 hat aktuell Montags bis Donnerstags von 8:00 - 16:00 Uhr und Freitags von 8:00 - 14:00 Uhr geöffnet.