Joomla: Klickbare Telefonnummer im Menü einbauen

Joomla: Klickbare Telefonnummer im Menü einbauen

Eine klickbare Telefonnummer direkt im Joomla-Hauptmenü gehört zu den unauffälligsten und gleichzeitig wirksamsten Conversion-Hebeln auf einer KMU-Webseite. Wer mit dem Smartphone surft und im Menü die Telefonnummer sieht, tippt sie einmal an und ist im Anruf - ohne die Kontakt-Unterseite suchen zu müssen, ohne Copy-and-Paste, ohne Frust. Diese Anleitung zeigt dir, wie du das in Joomla 4 und Joomla 5 in unter fünf Minuten umsetzt und welche Details dabei wirklich zählen.

Der Artikel hier ist seit 2017 online und wurde 2026 grundsaniert. Damals ging es um Joomla 3, die Bedienlogik der neueren Versionen ist ähnlich, aber die UI hat sich an einigen Stellen verändert. Hinzu kommen heute Themen, die 2017 noch keine Rolle spielten: das tel-Schema gemäß RFC 3966, sauberes Conversion-Tracking, eine WhatsApp-Click-to-Chat-Variante und ein paar Worte zur Barrierefreiheit.

Warum eine klickbare Nummer im Menü?

Untersuchungen rund um lokale Webseiten zeigen seit Jahren das gleiche Muster: Besucher, die per Smartphone kommen, wollen schnell eine Aktion ausführen - meistens Anrufen oder eine Wegbeschreibung öffnen. Wenn deine Kontaktdaten erst über den Footer, eine Untermenü-Ebene oder ein Kontaktformular zu erreichen sind, verlierst du genau die Conversions, die du am dringendsten brauchst. Eine Telefonnummer im Hauptmenü ist auf jedem Endgerät sofort sichtbar und auf dem Handy nur einen Tap entfernt.

Dazu kommt: die Nummer im Menü signalisiert auch dem Schnell-Scanner, dass du erreichbar bist. Selbst wer nicht sofort anruft, behält die Information im Kopf. Bei Handwerker-Webseiten, Arztpraxen, Restaurants und kleinen Beratungs-Anbietern macht das oft den Unterschied zwischen "wirkt seriös" und "wirkt halb verlassen".

Schritt für Schritt: Menüpunkt in Joomla anlegen

Voraussetzung ist ein bestehendes Hauptmenü und Admin-Zugriff. Die folgenden Schritte gelten für Joomla 4 und Joomla 5 - in Joomla 3 funktioniert es analog, die Beschriftungen heißen nur teilweise anders.

  1. Im Administrationsbereich auf Menüs › Hauptmenü wechseln und über den Button Neu einen neuen Menüpunkt anlegen.
  2. Als Titel trägst du den sichtbaren Text ein. Sinnvolle Varianten: die Nummer im üblichen Lesemuster wie 0345 12345 67, oder ein klarerer Call-to-Action wie Jetzt anrufen oder 0345 12345 67 anrufen. Beide Varianten haben ihre Berechtigung - die Nummer schafft Vertrauen, der CTA erhöht die Klickrate.
  3. Beim Menüpunkt-Typ wählst du Systemlink › Externe URL. Joomla nimmt damit den Wert aus dem Link-Feld ungefiltert in die Ausgabe.
  4. Im Feld Link trägst du die Telefonnummer im tel-Schema ein, ohne Leerzeichen und ohne Sonderzeichen: tel:+491234567890. Detail-Erklärung dazu im nächsten Abschnitt.
  5. Optional: unter Linkattribute kannst du eine eigene CSS-Klasse setzen, zum Beispiel menu-tel. Diese Klasse lässt sich im Template gezielt formatieren oder mit einem Icon versehen.
  6. Menüpunkt speichern, Cache leeren über System › Cache leeren, fertig.

Beim nächsten Aufruf der Webseite taucht der Eintrag im Menü auf. Auf einem iPhone, Android-Smartphone oder einem Mac mit FaceTime startet ein Tap auf den Eintrag direkt den Wählvorgang. Auf Desktop-Rechnern öffnet sich je nach Setup Skype, Microsoft Teams oder ein Software-Telefon. Wer nichts davon installiert hat, sieht eine Browser-Nachfrage zur App-Auswahl - das ist Browser-Verhalten und kein Joomla-Bug.

Das tel-Schema korrekt aufbauen

Die Notation hinter dem tel-Doppelpunkt folgt RFC 3966 und orientiert sich an der internationalen Telefon-Norm E.164. Drei Regeln genügen für die Praxis:

Im fertigen Quellcode sieht das dann so aus:

<a href="tel:+493451234567" class="menu-tel">
  0345 12345 67
</a>

Das Trennzeichen im sichtbaren Text dient der Lesbarkeit, der href bleibt sauber für den Browser. Genau diese Trennung ist der Punkt, an dem viele Anfänger stolpern.

Telefon-Icon ergänzen

Ein kleines Hörer-Symbol vor dem Text macht den Eintrag visuell zur Aktion. Zwei Wege, die beide ohne Bilddatei auskommen:

Variante 1 - FontAwesome: wenn dein Template ohnehin FontAwesome lädt (in vielen Joomla-Templates Standard), reicht ein Span mit Klasse fa-solid fa-phone im Template-Override oder direkt im Menü-Titel. Beachte: Joomla 4 und 5 nutzen FontAwesome 5/6, die Klassen heißen fa-solid statt früher fas.

Variante 2 - Inline-SVG per CSS: wenn du kein FontAwesome haben willst, blendet dieses CSS ein kleines Telefon-Icon vor dem Menüpunkt mit der Klasse menu-tel ein. Der SVG-Code steckt direkt im CSS, keine Extra-Datei nötig:

.menu-tel::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.4em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.25l-2.2 2.2a15.045 15.045 0 0 1-6.59-6.59l2.2-2.21c.28-.27.36-.66.25-1.01A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.25l-2.2 2.2a15.045 15.045 0 0 1-6.59-6.59l2.2-2.21c.28-.27.36-.66.25-1.01A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") no-repeat center;
}

Das CSS gehört in dein Template-Custom-CSS (in Joomla unter System › Templates › user.css oder template-spezifisch). Die Farbe übernimmt das Icon automatisch von der Schriftfarbe des Menüs.

Conversion-Tracking für Anrufe

Wenn du Google Analytics 4 oder Matomo nutzt, lässt sich der Telefon-Klick als Conversion-Event tracken. Damit weißt du, wie viele Anrufe deine Webseite tatsächlich auslöst:

<a href="tel:+493451234567"
   class="menu-tel"
   onclick="gtag('event','call_click',{event_category:'contact'});">
  0345 12345 67
</a>

Bei Matomo entsprechend mit _paq.push(['trackEvent','contact','call_click']); im onclick-Attribut. Die Event-Konfiguration im jeweiligen Tool sollte den Event dann als Conversion zählen.

WhatsApp als Alternative

Bei jüngeren Zielgruppen oder international ausgerichteten Webseiten ist WhatsApp oft die bessere Schwelle zur Kommunikation. Das funktioniert nach demselben Schema wie der tel-Link, nur mit der WhatsApp-Click-to-Chat-URL:

<a href="https://wa.me/493451234567" target="_blank" rel="noopener">
  WhatsApp-Nachricht senden
</a>

Wichtig: die Nummer ohne Plus und ohne Leerzeichen. Du kannst optional einen vorgefüllten Text mit ?text=Hallo anhängen, dann öffnet sich der Chat mit einem Standard-Text. Praktisch für Themen-Beratungen, Reservierungen oder Service-Anfragen.

Barrierefreiheit und Lesbarkeit

Drei Kleinigkeiten machen den Eintrag wirklich barrierearm:

FAQ

Funktioniert der tel-Link auch unter Joomla 3 noch?

Ja. Joomla 3 hat denselben Mechanismus über Menüpunkt-Typ Externe URL. Die Bedien-Beschriftungen heißen teilweise anders, aber Funktionalität und Resultat sind identisch.

Was tun, wenn der Link nicht klickbar wird?

Drei häufige Ursachen: Joomla hat den Cache nicht geleert (zuerst System-Cache leeren), das Template hat einen URL-Sanitizer der tel-Links als unsicher behandelt (selten, aber kommt vor) oder du hast Sonderzeichen im Link drin, die der Browser nicht akzeptiert. Quelltext in den Entwicklertools des Browsers prüfen.

Brauche ich für mehrere Telefonnummern mehrere Menüpunkte?

Ja. Pro tel-Link einen Menüpunkt. Bei Filialstrukturen lohnen eher Untermenüs nach Standort oder eine eigene Kontakt-Unterseite mit der Liste aller Nummern.

Funktioniert das auch im Footer oder in der Seitenleiste?

Ja. Der tel-Link funktioniert überall im HTML. In Joomla kannst du ihn als Menü-Eintrag in jedem beliebigen Menü unterbringen oder direkt in einem Custom-HTML-Modul setzen.

Ist tel: oder callto: besser?

Eindeutig tel:. Das callto:-Schema war eine Skype-spezifische Notation und wird heute nur noch von wenigen Anwendungen verstanden. Tel: ist der offizielle Standard nach RFC 3966 und funktioniert mit allen modernen Smartphones und Desktop-Telefonie-Apps.

Wie tracke ich Anrufe pro Quelle?

Pro Marketing-Kanal eine eigene Rufnummer einrichten (Call-Tracking-Anbieter wie matelso, AnyTrack oder die deutsche Lösung von 1plus bieten dynamisches Number-Insertion). Die Nummer wird beim Aufruf der Seite kanalabhängig getauscht, der Anruf landet trotzdem bei dir. Aufwändig, lohnt sich aber ab gewissen Werbe-Budgets schnell.

Quellen

Verwandte Artikel

Kommentararchiv 1

Ein Leser hat sich 2017 bedankt und nach der korrekten Schreibweise bei Rufnummern mit Durchwahl gefragt. Die Antwort ist heute dieselbe: alles in einer Zeile, ohne Leerzeichen, ohne Sonderzeichen, Durchwahl direkt anhängen.