Anfrage aus Deutschland und kein Bock auf Telefonkosten?

Wir rufen zurück
dubbie - Das key visual der dubb AG

 0/5

Elementor Schließen-Icon beim Popup ändern

Es gibt zwei Wege, wie du das Icon zum Schließen eines Popups in Elementor anpassen kannst. Wir zeigen an dieser Stelle beide auf.

Elementor Schließen-Icon beim Popup ändern

Elementor bringt von Haus aus leider keine Option mit sich, um das Icon zum Schließen eines Popups zu ändern. Über zwei kleinere Workarounds ist es aber mit wenig Aufwand möglich, ein eigenes Icon einzubinden. Wir stellen beide Optionen vor.

01. Das Popup-Schließen-Icon via CSS ändern

Dafür geben wir dem Popup erst mal eine Klasse, damit das CSS auch nur auf dieses Popup und nicht auf alle anderen angewendet wird. So kannst du, wenn du möchtest, jedem Popup ein eigenes Schließen Icon geben.

Dazu öffnest du das Popup mit Elementor, wählst das Zahnrad unten links (01), gehst zum Tab „Erweitert“ (02) und trägst eine Klasse ein (03). In unserem Beispiel geben wir dem Popup die Klasse „tw_popup“.

Hast du das erledigt, kommt der Part mit dem CSS. Dieses kannst du entweder in der gleichen Ansicht unter „Eigenes CSS“ eintragen oder zum Beispiel in die style.css des Child-Themes schreiben. Wir empfehlen generell den Weg über das Child-Theme, weil das selbstgeschriebene CSS dann gesammelt an einem Ort liegt und nicht mühselig aus den jeweiligen Widgets gesucht werden muss, wenn du mal etwas ändern möchtest.

Das CSS selbst ist super kurz:

.tw_popup .eicon-close:before {
    content: url(https://dubb.ch/wp-content/uploads/2022/02/cross-rot.svg); /* Hier könnt ihr eine URL zu dem Bild aus eurer Mediathek eintragen */
}

Wenn du zum Beispiel lieber einen Text anstatt eines Bildes anzeigen möchtest, dann geht das wie folgt:

.tw_popup .eicon-close:before {
    content: 'Schließen';
}

02. Das Popup-Schließen-Icon durch ein Icon oder Bild via Elementor ersetzen

Die zweite Möglichkeit läuft über Elementor selbst. Dafür sind keinerlei Kenntnisse in CSS notwendig. Gehe dazu wieder in die Einstellungen des Popups (01) und deaktiviere die Anzeige des Schließen-Icons (02).

Elementor Popups eine Klasse geben – Elementor Schließen Icon

Nun setzt du ein Widget – zum Beispiel das Icon-Widget – an eine beliebige Stelle im Popup und wählst bei „Link“ das dynamische Attribut „Popup“. Klicke dann auf den kleinen Schraubenschlüssel in der Anzeige und wäre „Close Popup“. Anschließend wählst du noch das entsprechende Popup aus – das war’s auch schon.

Wir freuen uns, wenn wir dir ein wenig weiterhelfen konnten. Wenn du noch weitere Fragen zum Thema Elementor hast, dann kontaktiere uns gerne. Oder schau einfach mal, ob wir vielleicht schon einen passenden Tipp in unserer Rubrik Elementor für dich bereithalten.

Geschrieben von

Mit * markierte Links sind Affiliate-Links. Wir erhalten eine kleine Provision, wenn jemand über solche Links ein Produkt erwirbt. Teurer wird das Produkt dadurch nicht.

Hey du …

du arbeitest mit Elementor? Nice! Bock auf eine kostenfreie Analyse deiner Website? Du weisst danach, was du noch optimieren kannst. Völlig unverbindlich.

Wie dürfen wir dich kontaktieren?

dubbie - Das key visual der dubb AG
Finde Dubbie

Dubbie, die kleine Amsel und unser Keyvisual hat sich in Form von Coins 5 Mal auf unserer Website versteckt. Findest du alle 5, gewinnst du einen kleinen Preis. Also, los geht’s, mach dich auf die Suche und wir drücken die Daumen!