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):
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).
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 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):
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*
-
Premium Addons für Elementor im Test + Rabattcode
-
Text mit Farbverlauf in Elementor 👉🏻 CSS Trick (ohne Plugin)
-
Elementor Akkordeon: Erstes Tab schließen (CSS Trick)
-
Elementor Farbverläufe mit 3 Farben – CSS Trick
-
Elementor Header Effekte beim Scrollen mit CSS (copy & paste)
-
Elementor Animationen verbessern (kostenlos + ohne Plugin)
-
Kostenlose Elementor Templates – die besten Ressourcen 2022
-
WordPress Theme erstellen ohne Programmierkenntnisse – Schritt für Schritt
-
Elementor Test & Tutorial 👉🏻 bester WordPress Page Builder 2022?