Wie Sie verhindern, dass Elementor-Links unterstrichen werden (3 Möglichkeiten)

Standardmäßig wendet Elementor (wie die meisten Website-Builder) einen Unterstreichungsstil auf Links an, damit sie für die Benutzer sofort erkennbar sind. Während dies für die grundlegende Benutzerfreundlichkeit gut funktioniert, entspricht es nicht immer den Zielen des modernen Webdesigns. 

In vielen Fällen kann es sinnvoll sein, die Unterstreichung von Links zu unterbinden, um ein sauberes, professionelles Erscheinungsbild zu erhalten. 

“Um zu verhindern, dass Elementor-Links unterstrichen werden, gehen Sie zu Ihrem WordPress Dashboard >> Navigieren Sie zu Erscheinungsbild >> Anpassen>>Zusätzliche CSS. Fügen Sie den CSS-Code ein a { text-decoration: none}. Klicken Sie dann auf Veröffentlicht.

In diesem Blog werde ich 3 Methoden untersuchen, um die Unterstreichung von Elementor-Links zu stoppen oder zu entfernen.

Also, fangen wir an!

Unterstreichen von Elementor-Links verhindern (über globale Einstellung)

Wenn Sie unterstrichene Links auf Ihrer gesamten Website deaktivieren möchten, ist diese Methode ideal für Sie. Bei dieser Methode müssen Sie nicht jede Seite einzeln bearbeiten. Sie können dies mit einem kleinen CSS-Code über den WordPress Customizer tun. Aber keine Sorge, es ist wirklich ganz einfach. 

Und so geht's:

1. Gehen Sie zu Ihrem WordPress Dashboard.

2. Navigieren Sie zu Erscheinungsbild >> Anpassen.

3. Scrollen Sie nach unten und klicken Sie auf Zusätzliche CSS.

4. Fügen Sie Folgendes ein Unterstreichen Stopptext CSS Code:

a {
    text-decoration: keine;
}

5. Klicken Sie nun auf Veröffentlicht.

Dadurch wird die Unterstreichung von allen Links auf der gesamten Website aufgehoben, ohne dass jede Seite einzeln bearbeitet werden muss. Dies ist ein schneller und effektiver Weg, um ein einheitliches Styling zu erhalten.

Entfernen von Unterstreichungen aus Textlinks in Elementor

Was ist, wenn Sie die Unterstreichung von Links im Inhalt eines bestimmten Abschnitts oder Widgets entfernen möchten, nicht aber auf der gesamten Website? 

Jetzt zeige ich Ihnen, wie Sie die Unterstreichung von Textlinks in einem bestimmten Abschnitt oder Widget von Elementor entfernen können.

Sie können dann die beiden folgenden Methoden anwenden:

Methode 1: Hinzufügen von benutzerdefiniertem CSS in Elementor (Erfordert Elementor PRO)

Sie können alle Textlinks eines bestimmten Abschnitts oder Widgets mit benutzerdefiniertem CSS ändern. Dies ist eine sehr einfache Methode. Sie ist jedoch nur für Elementor Pro-Benutzer geeignet. 

Bei dieser Methode müssen Sie nur etwas Code hinzufügen. Bei dieser Methode müssen Sie nur etwas Code hinzufügen. Keine Sorge, es ist ganz einfach. Befolgen Sie einfach diese Schritte:

• Öffnen Sie Ihre Seite in Elementor.

• Wählen Sie Ihren Bereich aus und gehen Sie auf die Seite Fortgeschrittene tab.

• Scrollen Sie nach unten und klicken Sie auf Benutzerdefiniertes CSS.

• Fügen Sie den folgenden Code ein:

a {
    text-decoration: keine;
}

• Dadurch wird die Unterstreichung von allen Links innerhalb dieses Widgets oder Abschnitts entfernt.

Dieser Code verhindert, dass alle Links unterstrichen werden. Sie können auch weitere Stile hinzufügen, wenn Sie möchten. Zum Beispiel können Sie die Farbe oder die Schriftart ändern. Dazu müssen Sie nur ein wenig mehr CSS-Code hinzufügen.

Wenn Sie diese CSS-Codierungsmethode nicht mögen, können Sie auch die folgende Methode ausprobieren.

Methode 2: Verwendung der Stil-Einstellungen von Elementor

Wenn Sie Elementor Free verwenden und nicht gerne kodieren, dann ist diese Methode für Sie geeignet. Mit Elementor können Sie die Linkstile ganz einfach anpassen. Um Unterstreichungen von Links zu entfernen, folgen Sie diesen einfachen Schritten:

• Öffnen Sie Ihre Seite in Elementor.

• Klicken Sie dann auf den Textblock mit dem Link.

• Wechseln Sie nun zur Registerkarte Stil.

• Klicken Sie auf das Bleistiftsymbol Typografie.

• Scrollen Sie dann nach unten und suchen Sie die Dekoration Option. Und setzen Sie sie auf Keine.

• Ihr Link wird nun ohne Unterstreichung angezeigt. 

Sie können dies manuell für jeden Link wiederholen. 

Anmerkung: Wenn es nur wenige Links gibt, können Sie diese Methode verwenden, um die Unterstreichung der Links zu verhindern. Wenn Sie jedoch mit mehreren Links arbeiten und diese von mehreren Seiten aus ändern möchten, sollten Sie diese Methode anwenden.

Wann Sie die Unterstreichung von Elementor-Links stoppen müssen und wann nicht

In Elementor können Link-Unterstreichungen entweder die Übersichtlichkeit erhöhen oder Ihr Design überladen, je nachdem, wo sie erscheinen. Bevor Sie also verhindern, dass Links unterstrichen werden, sollten Sie wissen, wann Links nicht mehr unterstrichen werden dürfen, um ein Gleichgewicht zwischen einem sauberen Erscheinungsbild und einer hohen Benutzerfreundlichkeit zu gewährleisten.

Normalerweise entfernen Sie Unterstreichungen, wenn:

1. Sie entwerfen Schaltflächen oder CTAs

Schaltflächen sollten wie Schaltflächen aussehen, nicht wie Textlinks. Unterstreichungen schaffen hier Unordnung. Zum Beispiel: “Jetzt kaufen” Schaltfläche mit Hintergrundfarbe, Hover-Effekt und ohne Unterstreichung gestylt.

2. Navigationsmenüs oder Kopfzeilenlinks

Die Menüpunkte sind in der Regel sauber und minimalistisch gestaltet (mit Hover-Effekten oder Hervorhebungen im Hintergrund anstelle von Unterstreichungen).

3. Wenn Links unterschiedlich gestaltet sind (Farbe, Fettdruck, Hover-Effekte)

Wenn Ihr Link bereits einen deutlichen Farbkontrast (z. B. blauer Text vor schwarzem) und ein Hover-Styling (z. B. Unterstreichung bei Hover) aufweist, können Sie die Standardunterstreichung getrost entfernen.

4. Für moderne, minimale Layouts

Einige Designs (wie Unternehmens- oder Portfolio-Websites) zielen auf ein schlichtes, minimales Aussehen ab, bei dem Unterstreichungen als altmodisch oder ablenkend empfunden werden könnten.

Wann Sie nicht aufhören sollten Unterstreichungen:

Hier sind die Fälle, in denen Sie Unterstreichungen beibehalten können:

1. In Langform-Inhalten oder Blog-Beiträgen

Die Nutzer erwarten, dass Links im Inhalt unterstrichen sind. Wird er entfernt, besteht die Gefahr, dass er übersehen wird. Ein Beispiel: Artikel, Fallstudien oder Partner-Blogs. Auch hier sollten Links (wie “Datenschutzrichtlinie” oder “Nutzungsbedingungen”) schnell und einfach zu erkennen sein.

2. Für Barrierefreiheit und Lesbarkeit

Benutzer mit Farbenblindheit oder Sehschwäche nehmen Links ohne Unterstreichung möglicherweise nicht wahr. Die WCAG-Richtlinien empfehlen Unterstreichungen, es sei denn, die Farbe des Links hat mindestens 3:1-Kontrast gegen normalen Text.

3. Wenn Link-Styling zu subtil ist

Wenn Ihre Website ähnliche Farben für Text und Links verwendet, beeinträchtigt das Entfernen des Unterstrichs die Benutzerfreundlichkeit.

Lesen Sie auch: Wie man in WordPress unterstreicht

FAQ

Schlussfolgerung

Das Unterstreichen oder Entfernen von Links in Elementor ist nicht nur eine Frage des Stils. Es geht darum, Ihre Website sauber, modern und benutzerfreundlich aussehen zu lassen. In diesem Leitfaden haben wir drei einfache Möglichkeiten untersucht, um die Unterstreichung von Links zu verhindern:

• Wenn Sie Unterstreichungen auf Ihrer gesamten Website entfernen möchten, können Sie einen kleinen CSS-Code im WordPress Customizer verwenden.
• Wenn Sie Elementor Pro verwenden, können Sie benutzerdefinierte CSS direkt zu einem Abschnitt oder Widget hinzufügen.
• Und wenn Sie die kostenlose Version von Elementor verwenden, können Sie die Stil-Einstellungen verwenden, um manuell Unterstreichungen aus jedem Link zu entfernen.

Jede Methode hat ihren eigenen Anwendungsfall. Globales CSS ist zum Beispiel ideal, um Zeit zu sparen und die Konsistenz zu wahren. Wenn Sie aber nur ein paar Links ändern wollen, funktioniert die manuelle Methode ganz gut.

Dennoch ist es wichtig, an Ihre Besucher zu denken. Unterstrichene Links zeigen den Besuchern, dass sie anklickbar sind. Besonders in Blogbeiträgen oder langen Artikeln. 

Lesen Sie auch:

• Free Elementor Pricing Table Widget for WordPress
• 7 Best Essential Addons for Elementor Alternatives: Complete 2026 Guide
• Element Pack Pro Version 9 veröffentlicht: Was gibt es Spannendes?
• Wie man einen Testimonial-Slider in WordPress mit Elementor hinzufügt
• Wie lässt man das Akkordeon in Elementor standardmäßig geschlossen?