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

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:

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

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).

/* Elementor Akkordeon Widget schließen & stylen. Füge diesen Code einfach in das "Custom CSS" Feld direkt beim Akkordeon-Widget ein. Mehr Elementor Tricks auf https://robert-leitinger.com/ */


selector


/* Mit dieser Zeile CSS, wird der erste Akkordeon-Reiter einfach ausgeblendet*/


.elementor-accordion .elementor-accordion-item:first-child {display: none;}



/* Rahmen unterhalb der einzelnen Akkordeon-Reiter; tausche einfach den Farbcode mit deiner gewünschten Farbe aus*/


.elementor-accordion .elementor-accordion-item

{border-bottom: 1px solid #D3D3D3}

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):

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).

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):

Noch mehr zu Elementor (Tricks & Tutorials)

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