Elementor Popup: Fokus-Rahmen bei Icons entfernen (Social Media, Links, Buttons)
Beim Einsatz von Popups in Elementor tritt häufig ein unschöner Effekt auf:
Sobald ein Link oder ein Icon (z. B. Social Media Icons) den Fokus erhält, wird dieser visuell hervorgehoben – meist durch einen schwarzen Rahmen oder Hintergrund.
Das kommt nicht von Elementor selbst, sondern vom Browser-Standardverhalten (:focus / :focus-visible) zur Barrierefreiheit.
Gerade bei minimalistischen Designs oder Icon-Leisten wirkt das oft störend und „kaputt“.
Lösung: Fokus-Styling im Popup gezielt deaktivieren
Mit folgendem CSS entfernst du den Fokus-Effekt nur innerhalb von Elementor Popups, ohne andere Bereiche deiner Website zu beeinflussen:
.elementor-popup-modal a:focus,
.elementor-popup-modal a:focus-visible {
outline: none !important;
box-shadow: none !important;
background: transparent !important;
}Anwendung in Elementor
Füge den Code direkt dort ein, wo dein Popup verwendet wird:
Variante 1 (empfohlen):
- Popup bearbeiten
- Unten links auf Zahnrad (Einstellungen)
- Tab Erweitert → Benutzerdefiniertes CSS
- Code einfügen
Variante 2:
- Alternativ global über Elementor → Website-Einstellungen → Custom CSS
- oder über WPCodeBox, wenn du zentral arbeitest
Was genau passiert hier?
- :focus und :focus-visible werden überschrieben
- Standard-Outline (Rahmen) wird entfernt
- Box-Shadow (z. B. Glow-Effekte) wird deaktiviert
- Hintergrund bleibt neutral
Wichtig:
Der Selektor .elementor-popup-modal sorgt dafür, dass nur Popups betroffen sind – deine normalen Links bleiben unangetastet.
⚠️ Hinweis zur Barrierefreiheit
Typische Einsatzfälle
- Social Media Icons im Popup
- Off-Canvas Menüs
- CTA Buttons im Modal
- Login-/Form-Popups
Fazit
Ein kleines CSS-Snippet mit großer Wirkung:
Du bekommst saubere, kontrollierte Popups ohne störende Fokus-Markierungen – exakt da, wo sie optisch nicht gewünscht sind.
Wenn du den Effekt global brauchst oder eine barrierefreie Alternative willst, kann man das sauber erweitern.