Elementor Akkordeon: Erstes Tab schließen (CSS Trick)

Elementor Akkordeon geschlossen beim Start

In diesem Beitrag zeige ich dir, wie du das Elementor Akkordeon anfangs komplett schließen kannst (standardmäßig ist nämlich immer der erste Reiter geöffnet). Das funktioniert mit einem einfachen CSS-Code, den du hier per Copy & Paste übernehmen kannst

Hier im Video zeige ich dir das Ergebnis:

So funktionierts

Leider bietet Elementor keine Funktion, das erste Akkordeon-Tab standardmäßig zu schließen.

Die Lösung:

Mit dem folgenden CSS-Code kannst du das erste Tab einfach komplett ausblenden. Somit startet dein Akkordeon mit dem zweiten Tab, welches standardmäßig geschlossen ist.

Bevor du den Code einfügst, solltest du beim Akkordeon Widget also einen Reiter ganz ob hinzufügen, der keinen Inhalt enthält:

Elementor Akkordeon Widget
Ich habe das erste Akkordeon einfach „ausgeblendet“ genannt. Dieser erste Reiter wird nach einfügen des Folgenden Codes nicht mehr angezeigt.

Du kannst den CSS-Code einfach direkt beim Akkordeon-Widget einfügen (Erweitert – Eigenes CSS):

CSS Code beim Akkordeon Widget einfügen
Im Feld Eigenes CSS (bei Erweitert) kannst du den Code direkt beim Akkordeon Widget einfügen. Allerdings steht diese Option nur in Elementor Pro zur Verfügung.
Hier kannst du dir die Preise der Pro-Version ansehen*.

CSS Code (Akkordeon schließen)

Folgenden CSS Code kannst du einfach kopieren und wie beschrieben einfügen.

Wenn du die kostenlose Version von Elementor nutzt, kannst du den Code über den WordPress Customizer einfügen (wie das funktioniert, zeige ich dir gleich).

Außerdem enthält der Code auch eine weitere Styling-Option für dein Akkordeon, die du entweder anpassen oder einfach löschen kannst (zeige ich dir auch gleich).

Inhalt freischalten (kostenlos)

In meinem kostenlosen Newsletter erhältst du exklusive Inhalte, Elementor Tricks und CSS Codes.

Einfach kostenlos abonnieren und ich schicke dir das Passwort zum Freischalten des folgenden Inhalts.

Double-Opt-In und DSGVO (du erhältst im Anschluss noch eine E-Mail, um die Anmeldung zu bestätigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der Datenschutzerklärung.

CSS Code jetzt freischalten
Nutze das Passwort, dass ich dir zugeschickt habe

CSS Code weiter anpassen (Rahmen)

Der Code besteht aus zwei Teilen (ich hab es für dich im Code beschriften).

Der erste Teil des Codes entfernt das erste Akkordeon-Tab. Der zweite Teil ist eine zusätzliche Styling-Option mit der du einen Rahmen unter den einzelnen Akkordeon-Reiter einfügen kannst (diese Option steht im Elementor Akkordeon Widget nämlich auch nicht zur Verfügung).

Wenn du das nicht benötigst, kannst du diesen Teil des Codes einfach löschen. Oder du kannst den Code natürlich auch anpassen (dicke des Rahmens in Pixel und Farbe des Rahmens ändern mittels HEX-Code):

Akkordeon CSS anpassen

CSS Code über WordPress Customizer einfügen

Die praktische Funktion Eigenes CSS steht nur in der Pro-Version* von Elementor zur Verfügung. Wenn du die kostenlose Version nutzt, kannst du den Code einfach über den WordPress Customizer einfügen (bei Zusätzliches CSS).

WordPress Customizer öffnen

Du musst aber eine kleine Änderung beim Code machen:

Statt Selector musst du ein anderes Wort einfügen – z.B. .akkordeon (vergesse den Punkt davor nicht).

Dann fügst du beim beim Elementor Akkordeon-Widget dieses Wort (diese neue definierte CSS-Klasse) hinzu (hier OHNE Punkt):

CSS Klasse einfügen
Füge die Klasse akkordeon (oder das Wort, dass du gewählt hast) hier hinzu:
Akkordeon-Widget – Erweitert – CSS-Klassen

Noch mehr zu Elementor (Tricks & Tutorials)

Nutzt du schon die Pro-Version von Elementor? Hier kannst du dir die Preise ansehen*

🌟 Newsletter abonnieren & profitieren
Hier bekommst du Zugang zu exklusiven Inhalten und profitierst von weiteren Vorteilen (z.B. spezielle Rabattaktionen rund um WordPress und SEO Tools, etc.)

Double-Opt-In und DSGVO (du erhältst im Anschluss noch eine E-Mail, um die Anmeldung zu bestätigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der Datenschutzerklärung.

Robert Leitinger
Über den Autor
Robert Leitinger

In den letzten 10 Jahren habe ich mehrere erfolgreiche Online-Projekte umgesetzt. Im Jahr 2018 folgte die Gründung meiner eigenen Webdesign und Online Marketing Agentur. Ergänzend zu diesem Blog betreibe ich auch einen YouTube Kanal.

Mehr über mich erfahren ➔

Weitere Beiträge lesen:

*Kennzeichnung & Information: Affiliate Links / Partnerlinks
Bei einem Link, der mit einem Stern gekennzeichnet ist (*), handelt es sich um einen Affiliate Link. Wenn du über diesen Link etwas kaufst, erhalte ich eine kleine Provision. Für dich entstehen dadurch keine Mehrkosten. So kann diese Webseite finanziert werden und sie bleibt frei von externen Werbebanner. Vielen Dank! Weitere Informationen disbezüglich findest du in der Datenschutzerklärung.

Nutzt du schon Elementor Pro?

In meinem Elementor Testbericht erfährst du mehr über die Pro-Version zu Elementor

Über robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Mehr Infos: Datenschutzerklärung.
Über robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden dieses Formulars erteilst Du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Weitere Infos findest du in der Datenschutzerklärung.