Link-Styles im Elementor anpassen

In den globalen Einstellungen des Elementor Theme Builders kann ein Link-Stil hinterlegt werden. Doch dieser erlaubt kaum Anpassungen.

Stil der Link-Underline in Elementor anpassen

Zwar kann man in Elementor mithilfe der Einstellung zur Text Decoration eine Underline hinterlegen, allerdings kann weder Linienstärke noch Abstand der Underline zum Text hinterlegt werden. Abhilfe schafft folgendes CSS im Customizer von WordPress:

.elementor-widget-text-editor a {
text-decoration: underline solid #000 1px;
}

Damit legen Sie fest, dass die Underline die Farbe #000 mit einer Strichstärke von 1px haben soll. Den Abstand zum Text legen Sie hiermit fest:

.elementor-widget-text-editor a {
text-underline-offset: 5px;
}

Die Klasse selektiert das Elementor Text-Element. Selbstverständlich kann der Stil auch auf andere Elemente übertragen werden, beispielsweise die Icon-Liste über .elementor-icon-list-text.

Es kann auf mobilen Geräten passieren, dass die kombinierte CSS-Eigenschaft nicht funktioniert. In dem Fall kann das CSS aufgeteilt werden:

.elementor-widget-text-editor a {
text-decoration-line: underline;
text-decoration-color: #000;
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-underline-offset: 5px;

}