| HILFECENTER

Wie kann ich ein Bild mit einem Link verknüpfen? (Teaser-Technik)

In einigen Situationen ist es hilfreich, wenn ein Bild gleichzeitig auch als Link fungieren kann. Der (fiktive) Pianist Martin Timmer macht es vor: Er hat seinen Flügel im Klavierhaus Köpenick gekauft und möchte nun die Besucher seiner Webseite auf das exzellente Angebot an Flügeln und Klavieren aufmerksam machen.

Mit der hier gezeigten "Teaser"-Methode kannst Du auch hervorragend eine Reihe von Partnern, Veranstaltungstipps, Kollegen - oder einfach nur eine Übersichtsseite zu Inhalten auf Deiner Homepage erstellen.

Lege einen einfachen Abschnitt an und wähle eine Darstellungsoption mit Bild aus dem Dropdown-Menü

Unterhalb der Textbox erscheint nun die Möglichkeit, ein Bild hochzuladen.

Lege einen einfachen Abschnitt an und wähle eine Darstellungsoption mit Bild aus dem Dropdown-Menü

Klicke auf "Bild hochladen" und wähle ein Bild von Deiner Festplatte.

Klicke auf "Bild hochladen" und wähle ein Bild von Deiner Festplatte.

Beschrifte Dein Bild und klicke anschließend auf den Bleistift, um weitere Bearbeitungsmöglichkeiten zu erhalten.

Die Beschriftung Deines Bildes ist aus verschiedenen Dingen wichtig: Sie erscheint, wenn das Bild einmal nicht geladen werden kann (z. B. bei langsamer Internetverbindung), wird sehbehinderten Menschen vorgelesen, die einen Screenreader benutzen - und wird von Google ausgewertet, um das Bild besser zuzuordnen.

Ausserdem erscheint in den meisten Browsern dieser Text, wenn man mit der Maus über das Bild fährt. In unserem Fall ist das besonders wichtig, da dem Besucher damit erklärt wird, wohin ein Klick auf das Bild führt.

Beschrifte Dein Bild und klicke anschließend auf den Bleistift, um weitere Bearbeitungsmöglichkeiten zu erhalten.

Wähle (bzw. korrigiere) den Bildausschnitt und füge einen Link ein.

Den Bildausschnitt kannst Du mit der Maus korrigieren, indem Du auf einen der 9  Punkte auf der gestrichelten Linie anklickst und anschließend (bei gedrückter Maustaste) ziehst. Tipp: Wenn Du zusätzlich dabei die Shift-Taste ( ) gedrückt hälst, wird das Seitenverhältnis quadratisch.

Beim Link achte unbedingt darauf, mit "http://" oder "https://" zu beginnen. Am besten öffnest Du die Seite, auf die Du verlinken möchtest, vorher in einem neuen Browserfenster und kopierst die URL von dort in die Zwischenablage. So kannst Du sicher gehen, dass Du keine Tippfehler produzierst.

Wähle (bzw. korrigiere) den Bildausschnitt und füge einen Link ein.

Fertig ist Martins kleiner Hinweis auf das Klavierhaus Köpenick

Wenn der Besucher mit der Maus über das Bild fährt, erscheint die Beschriftung, die Du eingegeben hast. Der Cursor suggeriert, dass das Bild anklickbar ist.

Fertig ist Martins kleiner Hinweis auf das Klavierhaus Köpenick

Anwendungsbeispiel: Teaser auf der Startseite

Der Musikwissenschaftler und Musikpädagoge Mathias Schillmöller nutzt die Funktion, um wichtige Inhalte seiner Webseite auf der Startseite hervorzuheben.

Anwendungsbeispiel: Teaser auf der Startseite

Bonus-Tipp: Bereichere Deine Teaser mit Buttons

Wenn Du Deine Links noch mehr hervorheben möchtest, verwandle Deine Links doch einfach in Buttons. Hier haben wir zusammengestellt, was Du tun musst, um einen Link als Button darstellen zu können.

Haben Sie Fragen? Anfrage einreichen

Kommentare

Powered by Zendesk