Kontakt

Volker Burggräf
Internetkoordinator

Buttons in der Seitenspalte

Der einfache Button in hellgrau funktioniert auch vor dem Hintergrund in der linken Spalte und wird dort zentriert dargestellt. 

Klicken Sie mit der Maus einen verlinkten Text an und wählen dann aus dem Stil-Menü den Eintrag "Button (hellgrau)".

Universität Oldenburg

Buttons

Innerhalb der Webseiten kann es gewünscht sein, Hyperlinks markant als Buttons zu formatieren. Dafür gibt es verschiedene Anwendungsfälle und Möglichkeiten.

Video der Schulung zur Formatierung von Hyperlinks / Buttons

In einer Online-Schulung zum Thema Formatierung von Hyperlinks / Buttons wurde gezeigt, welche Arten und Methoden es gibt, Hyperlinks zu formatieren bzw. als Buttons darzustellen, und zu welchen Anlässen jeweils welche Button-Variante zu verwenden ist. Hier können Sie das Video anschauen.

Hinweis: Das Video ist nur für Angehörige der Universität aufrufbar.

Linkliste oder Menü als Buttons formatieren

Diese Liste soll als Buttons formatiert werden.

Dazu wählen Sie im Reiter [Erscheinungsbild] des Inhaltselements, das die Liste enthält, im Feld "Layout" den Punkt "Linkliste als Buttons" aus.

Im Ergebnis erscheint die Liste wie ein Menü.

Wichtig: Diese Formatierung wendet die  Button-Optik mit grünfarbiger linker Rahmenlinie auf die Verweise an, die optisch der Subnavigation in der linken Spalte ähnelt. Damit kommuniziert diese Button-Optik, dass es sich um interne Links handelt. Bitte verwenden Sie diese Formatierung daher nicht für Links, die auf Ziele außerhalb der UOL verweisen!

Links in Textelementen als Buttons formatieren

Inline-Buttons

Im fließenden Text können einzelne Hyperlinks, nachdem sie definiert wurden, optisch als Buttons formatiert werden. Dazu klickt man beim Bearbeiten des Textes mit der Maus irgendwo in den zuvor verlinkten Text und wählt dann im Stil-Menü des Editors den Stil "Inline-Button" aus. Dieser Button-Stil eignet sich auch für dezente weiterführende Links, indem man sie am Ende eines Textes als neuen Absatz positioniert, das sieht dann so aus:

Textinhalte bearbeiten

Mehr-Buttons

Wenn ein kräftiger Button als Link im Sinne von "weiter lesen" oder "mehr dazu" verwendet werden soll, gibt es dafür den "Mehr-Button" aus dem Stil-Menü. Er ist rechtsbündig ausgerichtet und weist somit in Leserichtung. Der Mehr-Button erscheint grundsätzlich unterhalb des vorhergehenden Textes und ist somit kein Inline-Button. mehr

Aktions-Buttons

Aktions-Buttons (Action-Button) fallen duch ihre Farbigkeit und durch ihre Breite auf - sie erstrecken sich automatisch auf die gesamte verfügbare Breite und können somit auch als anklickbarer Balken verstanden werden. Sie sollen zum Anklicken (= zu einer Aktion) einladen, z.B. um ein bestimmtes Eingabeformular aufzurufen.

Weisen Sie einem verlinkten Text den Stil "Aktions-Button" zu.

Zur Infoveranstaltung anmelden

Normaler Button für Uni-Linkziele

Ebenfalls in voller Breite, jedoch weniger auffallend, erscheint der hellgraue Button. Er gleicht optisch der Linkformatierung "Linksliste als Buttons" (s. o.).

Wichtig: Indem dieser Button den Menüeinträgen ähnelt, deutet er optisch auf eine uniinterne Navigationsmöglichkeit hin! Links nach extern sollten daher nicht mit dieser Methode als Button formatiert werden!

Klicken Sie dazu mit der Maus einen verlinkten Text an und wählen dann aus dem Stil-Menü den Eintrag "Button (hellgrau)".

Universität Oldenburg

Pop-Over-Meldung

Dies ist ein eigener Inhaltselement-Typ, der einen roten Button erzeugt und somit Signalwirkung besitzt. Nach dem Anklicken öffnet sich eine sogenannte Pop-Over-Meldung, die sich nach nochmaligem Anklicken wieder schließt. Dieser Button ist kein Hyperlink wie die anderen, denn er führt ja gerade nicht zu einer anderen Seite, sondern öffnet einen Hinweistext innerhalb der aktuellen Seite. Bitte nur verwenden, wenn eine entsprechende ACHTUNG-Wirkung bezweckt wird.

Absatzstile für bestimmte Links

Von den Kontaktdaten kennen wir bestimmte Absatzformatierungen, die über das Stilmenü im TYPO3-Editor zugewiesen werden können. Für bestimmte Links empfiehlt es sich, anstatt einer Button-Optik lieber diese Absatzstile zu verwenden. Dies bietet sich insbesondere dann an, wenn gemischte Links zu externen und internen Seiten sowie zu Downloads aufgelistet werden sollen.

Interner Link (als Gegenstück zum externen Link, falls beides verwendet wird)

Download, allgemein

Download, speziell PDF

Facebook

LinkedIn

Instagram

Linkliste als Kacheln

Um eine Liste mit Links (siehe obiges Beispiel Linkliste als Buttons) als Kacheln zu formatieren - also gewissermaßen als große Buttons -, wählen Sie im Reiter [Erscheinungsbild] des Inhaltselements im Feld "Layout" den Punkt "Linkliste als Kacheln" aus.

Zu guter Letzt

Wie man sieht, kann der Gesamteindruck bei Verwendung verschiedener Button-Varianten recht durcheinander wirken. Deshalb an dieser Stelle eine wörtlich gemeinte Bitte:

"Treiben Sie es nicht zu bunt!"

Internetkoordinator (Stand: 10.01.2022)