TL Handbuch > Handbuch für Redakteure > Inhaltselemente > Inhaltselement: Hyperlink

TYPOlight wurde ab der Version 2.9 zu Contao umbenannt. Die komplett neu verfasste und umfangreichere Online-Version des neuen Contao-Handbuchs finden Sie unter www.contao-handbuch.de. Das alte TYPOlight-Handbuch bleibt für Nutzer älterer Versionen hier erhalten.

Hyper-Link

Mit diesem Element können Sie einfach einen einzelnen Link hinterlegen. Alternativ können Sie dies natürlich auch über das Text-Element tun.

Wie bei den meisten Elementen, haben Sie auch hier vor dem eigentlichen Inhalt des Elements die Möglichkeit diesem Abschnitt eine Überschrift zuzuweisen:

Eingabefeld „Überschrift“ samt Ausklappfeld (h1 – h6)

Geben Sie in das Eingabefeld die gewünschte Überschrift ein und wählen Sie aus dem Ausklappfeld die Hierarchiestufe der Überschrift aus. Hierarchiestufe bedeutet, dass Sie festlegen können, welche „Wichtigkeit“ diese Überschrift in einem Beitrag hat. Ist es die Hauptüberschrift (h1) oder bereits eine hierarchisch tiefer liegende Überschrift (h2 – h6, wobei h6 die niedrigste Stufe darstellt) der Seite?

Zieladresse (Pflichtfeld)

Geben Sie hier die Internetadresse ein, die Sie verlinken wollen. Achten Sie darauf, dass diese mit http:// beginnen muss! Das könnte dann z.B. so aussehen: http://www.spiegel.de

Sie können alternativ auch eine E-Mailadresse eingeben. Dazu müssen Sie vor die Adresse aber mailto: schreiben, so dass der Eintrag insgesamt dann z.B. so aussehen könnte: mailto:redaktion@gmx.de

Wenn Javascript in Ihrem Browser aktiv ist, können Sie neben dem Eingabefeld für die Zieladresse auf die Weltkugel-Grafik klicken. Dadurch öffnet sich ein kleines Browserfenster in dem Ihnen alle Seiten der aktuellen Website angezeigt werden. Wählen Sie aus der Liste die Seite aus, auf die Sie innerhalb der eigenen Website verlinken wollen.

Als Zieladresse können Sie auch „Insert Tags“ (z.B. link_url) eingeben. Falls dazu die Notwendigkeit besteht, wird Ihnen der Administrator die Nutzung von Insert Tags sicher erläutern.

Titel des Links

Geben Sie hier einen Titel für den Link ein. Dieser wird dem Besucher dann statt der eingegebenen Zieladresse angezeigt. Z.B. Spiegel Online

Den Link einbetten

Wenn Sie die Zieladresse befüllt und dem Link einen Titel zugewiesen haben, können Sie in dieses Feld einen Satz mit dem „Platzhalter“ %s schreiben. Der Platzhalter wird auf der Website dann gegen den Link mit dem angegebenen Titel ausgewechselt.

Wenn Sie z.B. folgendes in das Eingabefeld schreiben: Besuchen Sie die Website von: %s. Und zuvor bei der Zieladresse http://www.spiegel.de sowie beim Titel des Links Spiegel Online eingegeben haben, würde auf der Website folgendes erscheinen: Besuchen Sie die Website von Spiegel Online.

Neues Browserfenster

Klicken Sie in dieses Feld, wenn Sie wollen, dass sich der Link in einem neuen Browserfenster öffnet, wenn ein Besucher darauf klickt.

Bildlink

Klicken Sie hier, wenn Sie wollen, dass statt des Linktitels ein (verlinktes) Bild angezeigt wird. Sobald Sie geklickt haben, lädt TYPOlight die notwendigen Felder zur Bildauswahl. Warten Sie ab, bis diese Auswahl fertig geladen hat und Sie die neuen zusätzlichen Felder sehen:

Quelldatei (Pflichtfeld)

Hier können Sie das Bild aus der bestehenden Dateistruktur auswählen. Wenn sich das Bild darin noch nicht befindet, können Sie alternativ auf die „Festplatten“-Funktionsgrafik neben dem Begriff „Quelldatei“ klicken und damit den Dateimanager in einem neuen Browserfenster öffnen. Mit Hilfe des Dateimanagers können Sie ein neues Bild von Ihrem Computer in die Dateistruktur von TYPOlight hochladen. Alles weitere dazu finden Sie in der Beschreibung des Dateimanagers.

Wenn sich das Bild in der Dateistruktur befindet, können Sie es wie folgt auswählen:

Icon Typolight

Klicken Sie auf die „Plus“-Funktionsgrafik vor dem Ordnernamen, damit dieser sich öffnet und die darin liegenden Ordner bzw. Dateien anzeigt.

Wählen Sie das gewünschte Bild aus, indem Sie mit der Maus in das kleine runde Feld rechts neben dem Bild klicken.

Dateiverwaltung Typolight

Alternativer Text (Pflichtfeld)

Geben Sie hier eine kurze Beschreibung des Bildes ein. Dies hilft z.B. blinden Besuchern, da diese zwar das Bild nicht sehen, die Beschreibung aber lesen können.

Bildbreite und Bildhöhe

In diese Felder können Sie Werte eintragen um die Größe des Bildes (Pixel) durch TYPOlight automatisch anpassen zu lassen. Wenn Sie keinen Wert eintragen, wird das Bild in der Originalgröße angezeigt.

Icon Typolight

Wenn Sie nur in das erste Feld (Bildbreite) oder nur in das zweite Feld (Bildhöhe) einen Wert eingeben, berechnet TYPOlight den zweiten Wert automatisch anhand der Form des Bildes. So können Sie vermeiden, dass Bilder gestaucht wirken.

Bildunterschrift

Hier können Sie einen Text angeben, der als Bildunterschrift auf der Website angezeigt wird.

Nur Gästen anzeigen

Setzen Sie hier einen Haken wenn Sie wollen, dass dieses Element nur für Besucher sichtbar ist, die nicht als Benutzer Ihrer Website angemeldet sind.

Element schützen

Setzen Sie hier einen Haken wenn Sie wollen, dass dieses Element nur für bestimmte angemeldete Benutzergruppen sichtbar ist. Nachdem Sie den Haken gesetzt haben, werden Ihnen alle momentan existierenden Benutzergruppen angezeigt. Wählen Sie diese aus, indem Sie vor den Namen der Benutzergruppe(n) einen Haken setzen.

Ausrichtung des Inhaltselements

Hiermit können Sie die Ausrichtung (linksbündig, rechtsbündig, zentriert, Blocksatz) des Elements festlegen. Wenn Ihr Webdesigner Wert auf eine saubere Trennung von Inhalt und Layout legt, wird er Ihnen diese Funktion üblicherweise nicht zur Verfügung stellen. Stattdessen kann er Ihnen z.B. eine Stylesheet ID- oder Klassenbezeichnung geben und die Ausrichtung mittels CSS festlegen.

Abstand davor und dahinter

Hiermit können Sie festlegen wie viele Pixel Abstand vor / nach dem Element (in Relation zu anderen Elementen) existieren. Wenn Ihr Webdesigner Wert auf eine saubere Trennung von Inhalt und Layout legt, wird er Ihnen diese Funktion üblicherweise nicht zur Verfügung stellen. Stattdessen kann er Ihnen z.B. eine Stylesheet ID- oder Klassenbezeichnung geben und die Abstände mittels CSS festlegen.

Stylesheet ID und Klasse

Geben Sie in das erste Feld eine ID-Bezeichnung und / oder in das zweite Feld eine oder mehrere Klassenbezeichnungen ein, wenn Ihr Webdesigner Ihnen solche Anweisungen zur Verfügung stellt und diese für das aktuelle Element erwünscht werden.

Speichern Sie das Element, nachdem Sie alle gewünschten Felder ausgefüllt haben.