zum Hauptmenü zum Seiteninhalt zur Subnavigation zum Footermenü zur Suchfunktion zu den Hinweisen der Barrierefreiheit


Inhaltselement Text & Medien

Inhalt mit Textlinks

Hinweis

Die in der Typo3-Schulung vorgestellte "einfache Methode" für externe Links und E-Mail-Links funktioniert in der neuen Typo3-Version leider nicht mehr. Bitte lesen Sie sich daher hier die Doku aufmerksam durch.

Internen Link erzeugen

Bildschirmansicht eines Content-Management-Systems (CMS). Links sind verschiedene Menüoptionen aufgelistet. In der Mitte ist ein Texteditor sichtbar, der eine Überschrift und einen erläuternden Text über ein Thema enthält. Der Text behandelt Erfahrungen und Empfindungen mit Schmerz.

Um ein bestehendes Inhaltselement zu bearbeiten, um z.B. Textlinks einzufügen, klicken Sie auf den Button mit dem Bleistift.

Das Bild zeigt eine Benutzeroberfläche von TYPO3, einem Content-Management-System. Es sind verschiedene Menüpunkte sichtbar, darunter Seiten, Dateien und Nachrichten, sowie ein Textfeld mit einer Überschrift und einem absatzweise gestalteten Text.

Nun können Sie im Editor die gewünschten Änderungen vornehmen. Beispielsweise das Einfügen des Textes für die Textlinks.

Das Bild zeigt eine Benutzeroberfläche eines Content-Management-Systems mit Menüelementen auf der linken Seite. In der Mitte sieht man ein Eingabefeld für Text mit einer Überschrift und einem bearbeitbaren Textbereich, der Beispiele und Links enthält.

Um einen Textlink zu erzeugen, markieren Sie den zu verlinkenden Text und Klicken Sie dann auf den Link-Erzeugen-Button (Ketten-Symbol).

Ein Screenshot eines Link-Browsers in einem Content-Management-System. Es zeigt eine Auswahl von Seiten und Menüpunkten auf der linken Seite sowie Felder zur Eingabe eines Zielmasters, Titels und einer CSS-Klasse für den Link.

Es öffnet sich ein Popup. Für einen internen Link klicken Sie zunächst in das Feld neben der CSS-Klasse.

Ein Screenshot eines Link-Browsers in einem Content-Management-System zeigt Felder für die Eingabe von Zielseite, Titel und CSS-Klasse. Links im Seitenbaum sind strukturiert und listen verschiedene Elemente und Seiten auf, die bearbeitet werden können.

Wählen Sie im Feld CSS-Klasse das leere Feld aus.

Ein Fenster des Link-Browsers in der TYPO3-Software zeigt Optionen zum Hinzufügen eines Links an. Es gibt Felder für die Zieldestination und den Titel des Links sowie eine Liste von Seiten im Seitenbaum auf der linken Seite.

Klicken Sie danach wieder auf CSS-Klasse und wählen Sie inernalLink aus. Dieser Schritt muss gemacht werden, damit der Titel für den Link korrekt ist.

Ein Screenshot des Link-Browsers in TYPO3 zeigt eine Benutzeroberfläche mit Feldern für Zielmaster, Titel und CSS-Klasse. Auf der linken Seite ist eine Baumstruktur mit verschiedenen Seiten und deren Unterseiten, die für die Navigation innerhalb des Systems verwendet werden.

Klappen Sie im nächsten Schritt den Seitenbaum links soweit auf, bis Sie die Seite sehen, auf die Sie verlinken möchten.

Das Bild zeigt ein Fenster des Link-Browsers in einer Website-Management-Software. Es enthält eine Hierarchie von Seiten mit Auswahlfeldern für Zielmaster, Titel und CSS-Klassen. Eine bestimmte Seite ist hervorgehoben und verweist auf Schulungsinhalte.

Kopieren Sie sich den Titel der Seite, wo Sie hinverweisen möchten. Achtung: NICHT auf die Seite drauf klicken!!!

Ein Screenshot eines Link-Browsers in der Typo3-Software. Das Fenster zeigt verschiedene Optionen, um einen Link zu erstellen, einschließlich Zielseite, Titel und CSS-Klasse. Auf der linken Seite befindet sich ein Inhaltsbaum mit unterschiedlichen Elementen.

Fügen Sie den kopierten Text an die Stelle der xxx in dem Titel-Feld ein. Sind die Xe ersetzt, klicken Sie anschließend auf die Seite, auf die verwiesen werden soll.

Screenshot einer Benutzeroberfläche von Typo3, die verschiedene Menüpunkte und ein Textfeld zur Eingabe enthält. Der Textbereich beschreibt Herausforderungen und Schmerzen im Leben, während Links zu weiteren Inhalten bereitgestellt werden.

Das Popup-Fenster schließt sich. Sie können im Editor sehen, dass ein Link erzeugt wurde.

Externen Link erzeugen

Eine Benutzeroberfläche eines Content-Management-Systems (Typo3) ist zu sehen. Links sind Menüoptionen aufgelistet, während im Hauptbereich ein Texteditor mit einem Beispieltext sichtbar ist. Der Benutzer kann Links einfügen und den Text formatieren.

Die ersten Schritte für einen externen Link sind identisch. Sie markieren den zu verlinkenden Text und klicken dann auf den Link-Erzeugen-Button.

Ein Dialogfenster zum Erstellen von Links. Es zeigt Felder für den Zieltext, den Titel, eine CSS-Klasse und die URL. Titel und CSS-Klasse sind hervorgehoben, und es gibt eine Schaltfläche zum Setzen des Links.

Es öffnet sich ein Popup. Wählen Sie das Tab Externe URL aus. Klicken Sie auch hier wieder zuerst in das Feld der CSS-Klasse.

Ein Bildschirmfoto eines Link-Browsers in einem Content-Management-System. Es enthält Eingabefelder für Zielseite, Titel, CSS-Klasse und URL sowie Schaltflächen zur Verwaltung von Links. Die Benutzeroberfläche zeigt Optionen zum Hinzufügen von Links zu einer Webseite.

Wählen Sie im Feld der CSS-Klasse die leere Option aus.

Ein Fenster des Link-Browsers zeigt Optionen zur Eingabe von Zielmaster, Titel, CSS-Klasse und externen URLs für einen Link. Es enthält Felder zur Bearbeitung dieser Informationen und eine Schaltfläche zum Setzen des Links.

Wechseln Sie nun in der CSS-Klasse wieder zurück auf externalLinkInNewWindow, damit der Titel korrekt angezeigt wird.

Ein Dialogfenster für den Link-Browser in einer Website-Management-Oberfläche. Es enthält Felder für das Ziel (Seite), den Titel, CSS-Klassen und die externe URL. Ein Beispiel-Link ist eingegeben, um die Funktionalität zu verdeutlichen.

Tragen Sie nun im Feld der URL die externe Adresse ein. Am besten rufen Sie die Website in einem separatem Tab auf und kopieren sich die URL aus dem Adressfeld Ihres Browser-Fensters.

Ein Bildschirmfoto eines Link-Browsers zeigt ein Formular zur Eingabe von URL-Informationen. Es sind Felder für den Zielnamen, Titel, CSS-Klasse und die URL sichtbar. Der Benutzer kann einen externen Link hinzufügen und den Button „Link setzen“ auswählen.

BEVOR Sie auf Link setzen klicken müssen Sie die xxx im Titel-Feld ersetzen. Tragen Sie hier ein, auf welche Website verwiesen wird. Sind die Xe ersetzt, dürfen Sie nun auf den Button "Link setzen" klicken.

Bildschirmansicht eines Content-Management-Systems (CMS) zeigt die Bearbeitungsoberfläche mit verschiedenen Menüpunkten. Ein Textfeld ist sichtbar, das eine Überschrift und einen ausführlichen Text enthält. Es wird ein Link erwähnt. Die Benutzeroberfläche ist auf Deutsch.

Nachdem Sie den Link gesetzt haben, wird der Text im Editor wieder unterstrichen und farbig angezeigt.

E-Mail-Link erzeugen

Ein Screenshot einer Webseite zeigt das Backend eines Content-Management-Systems. Links sind Menüoptionen wie „Seiten“ und „Dateien“ zu sehen. In der Mitte wird ein Text bearbeitet, der sich mit Schmerzen beschäftigt, und enthält Links zu weiteren Informationen.

Die ersten Schritte für einen E-Mail-Link sind identisch. Sie markieren den zu verlinkenden Text und klicken dann auf den Link-Erzeugen-Button.

Ein Fenster des Link Browsers in einem Content-Management-System zeigt Eingabefelder für Titel, CSS-Klasse und E-Mail-Adresse. Der Titelbereich enthält den Text „Verweis zur Seite xxxxx in einem neuen Fenster“. Das Design ist einfach und funktional, mit einer dunklen Hintergrundfarbe.

Es öffnet sich ein Popup. Wählen Sie das Tab E-Mail aus. Klicken Sie auch hier wieder zuerst in das Feld der CSS-Klasse.

Ein Dialogfenster für den Link-Browser zeigt Eingabefelder für den Titel, CSS-Klasse und E-Mail-Adresse. Die Benutzer können eine URL eingeben und Links zu Seiten erstellen. Oben ist der Titel der Anwendung und ein Menü sichtbar.

Wählen Sie im Feld der CSS-Klasse die leere Option aus.

Ein Fenster für den Link-Browser zeigt verschiedene Optionen an, darunter die Eingabefelder für den Titel und die E-Mail-Adresse. Es bietet die Möglichkeit, eine externe URL oder E-Mail-Adresse hinzuzufügen, sowie eine Auswahl für CSS-Klassen.

Wechseln Sie nun in der CSS-Klasse wieder zurück auf mail, damit der Titel korrekt angezeigt wird.

Ein Fenster mit dem Titel "Link Browser" in einem Web-Content-Management-System. Es enthält Felder für den Titel, die externe URL, eine E-Mail-Adresse und eine Schaltfläche zum Setzen des Links. Die E-Mail-Adresse ist "a.andrandi@interactive.de".

Tragen Sie in das Feld E-Mail-Adresse die entsprechende E-Mail-Adresse ein. Klicken Sie danach auf Link setzen

Screenshot einer TYPO3-Backend-Oberfläche mit einem offenen Texteditor. Der Benutzer erstellt oder bearbeitet Inhalte, einschließlich einer Überschrift und Text. Links erscheinen Menüpunkte für die Webseitenverwaltung. Das Layout zeigt Bereiche für Webseiteninhalte und Anpassungen.

Nachdem Sie den Link gesetzt haben, wird der Text im Editor wieder unterstrichen und farbig angezeigt.

Datei-Link erzeugen

Die Abbildung zeigt eine Benutzeroberfläche eines Content-Management-Systems mit verschiedenen Menüoptionen auf der linken Seite. Im Hauptbereich wird ein Text mit einer Überschrift und einem Beispieltext angezeigt, der über Schmerz und dessen Wahrnehmung spricht.

Die ersten Schritte für einen Datei-Link sind identisch. Sie markieren den zu verlinkenden Text und klicken dann auf den Link-Erzeugen-Button.

Ein Screenshot eines Link-Browsers in einer Webanwendung. Auf der linken Seite sind verschiedene Dateiordner aufgelistet. Rechts befindet sich ein Eingabefeld für die URL und ein Titel für den Link, sowie eine Auswahl für die CSS-Klasse.

Es öffnet sich ein Popup. Wählen Sie das Tab Datei aus. Klicken Sie auch hier wieder zuerst in das Feld der CSS-Klasse.

Ein Bildschirmfenster zur Bearbeitung von Links in einem Web-Editor. Es zeigt Felder für Zieladresse, Titel und CSS-Klasse, sowie eine Strukturansicht mit verschiedenen Ordnern und Dateien im Verzeichnisbaum.

Wählen Sie im Feld der CSS-Klasse die leere Option aus.

Ein Fenster zur Link-Bearbeitung in einem Content-Management-System zeigt verschiedene Felder an. Benutzer können einen Titel eingeben, einen Link auswählen und eine CSS-Klasse festlegen. Auf der linken Seite ist ein Verzeichnisbaum mit mehreren Ordnern und Dateien dargestellt.

Wechseln Sie nun in der CSS-Klasse wieder zurück auf download, damit der Titel korrekt angezeigt wird.

Ein Bildschirmfoto eines Link-Browsers zeigt eine Liste von Dateien und Ordnern. Es gibt die Möglichkeit, eine Datei auszuwählen und eine E-Mail zu versenden. Die Dateien sind in verschiedenen Formaten wie PDF und JPEG aufgeführt, mit entsprechenden Dateinamen.

Im nächsten Schritt sollten Sie nun im Verzeichnisbaum den Ordner anklicken, in dem sich die zu verlinkende Datei befindet.

Ein Fenster des Link-Browsers in einer Webanwendung, das eine Liste von Dateien zeigt. Benutzer können eine Datei auswählen, um sie herunterzuladen. Die Liste enthält verschiedene Dateitypen mit den Bezeichnungen wie "beispiel-daten", "flyer" und "export-daten".

BEVOR Sie die Datei anklicken, ersetzen Sie die xxx im Titel und wähln bei Zielfenster neues Fenster aus.

Ein Screenshot des Link-Browsers in Typo3 zeigt eine Übersicht von Dateien, die zum Download bereitstehen. Die Struktur umfasst verschiedene Ordner und eine Liste von Dateinamen, darunter PDFs und Bilder, die für Schulungen verwendet werden.

Prüfen Sie, ob durch die Wahl des Zielfensters in dem Eingabefeld _blank steht. Isr das der Fall, klicken Sie anschließend die Datei an, auf die Sie verlinken wollen.

Ein Screenshot eines Content-Management-Systems zeigt die Benutzeroberfläche mit Menüoptionen auf der linken Seite. Im Hauptbereich sind ein Texteditor und Formatierungsoptionen sichtbar, in dem ein Text über die Erfahrung von Schmerz verfasst wird.

Nachdem Sie den Link gesetzt haben, wird der Text im Editor wieder unterstrichen und farbig angezeigt.

Eine Benutzeroberfläche von TYPO3 zeigt eine Textbearbeitungsansicht. Die Optionen "Speichern und anzeigen", "Speichern und neue erstellen" sowie "Speichern und schließen" sind sichtbar. Im Textbereich steht ein erläuternder Text über das Bearbeiten von Inhalten und enthält Links.

Um sich eine Vorschau anzusehen und die Links zu überprüfen wählen Sie "Seite speichern und anzeigen" aus.

Im Landkreis Ludwigsburg, die Seite enthält Überschriften und Links zu weiteren Informationen. Der Text beleuchtet das Thema der zwischenmenschlichen Beziehungen und den Austausch von Freude und Schmerz, sowie Beispiele zur individuellen Wahrnehmung und Empathie.

Sie können im Frontend sehen, ob alles korrekt gemacht wurde. Je nach Linkart, befindet sich ein anderes Icon am Linktext. Bitte klicken Sie die Links zur Pürfung vor Freischaltung immer nochmal an.