Das Elementor Akkordeon Widget – wie blendet man es so ein, dass es standardmäßig geschlossen ist?
Dieser Frage wollen wir heute auf den Grund gehen.
Mit dem Elementor Plugin für WordPress lässt sich einfach das Akkordeon Widget in den bestehenden Content einfügen.
Was ist das Elementor Pro Akkordeon Widget?
Das Elementor Pro Akkordeon-Widget ist ein leistungsstarkes Tool, das Webentwicklern hilft, interaktive und visuell ansprechende Webseiten zu erstellen. Mit dem Elementor Pro Akkordeon-Widget können Sie dynamische Inhalte erstellen, die von den Besuchern Ihrer Website einfach navigiert und aufgerufen werden können. Mit diesem Widget können Sie ausklappbare Menüs, FAQs und sogar Produktbeschreibungen erstellen.
Die Akkordeon-Funktion in Elementor Pro gibt Ihnen die Möglichkeit, Ihrer Website schnell Inhalte hinzuzufügen, ohne Code schreiben zu müssen. Sie können jede Art von Inhalt einfach per Drag-and-Drop in das Widget ziehen und es mit verschiedenen Styling-Optionen anpassen. Dies macht es für diejenigen, die nur über begrenzte Programmierkenntnisse verfügen, viel einfacher, dynamische Websites zu gestalten, ohne HTML oder CSS lernen zu müssen.
Das Elementor Pro Accordion Widget ist in hohem Maße anpassbar und bietet mehrere Farbschemata für jedes Element des Menüsystems sowie Textformatierungsoptionen für Überschriften, Beschreibungen und andere Elemente innerhalb jedes Elements im Menüsystem. Sie haben auch Zugriff auf erweiterte Stileinstellungen, mit denen Sie jeden Aspekt des Designs anpassen können, von den Abständen zwischen den Elementen bis hin zu den im gesamten Menüsystem verwendeten Schriftfamilien.
Insgesamt ist das Elementor Pro Accordion Widget ein unglaublich nützliches Tool für Webentwickler, die moderne Websites mit dynamischen Inhalten erstellen möchten, die ihre Besucher fesseln und ihnen gleichzeitig einfache Navigationsmöglichkeiten bieten. Ganz gleich, ob Sie nach einer Möglichkeit suchen, schnell Informationsblöcke hinzuzufügen oder etwas Komplexeres wie eine vollwertige FAQ-Seite mit mehreren Kategorien benötigen, dieses Widget hat alles, was Sie brauchen!
Das Akkordeon Widget findet man in Elementor unter Elemente -> Akkordeon.
So sieht das Akkordeon Widget standardmäßig aus:
Wie man sehen kann, ist das Akkordeon Element im Elementor beim Laden standardmäßig offen. Das wollen wir nun ändern.
Elementor Akkordeon Widget standardmäßig geschlossen einstellen
Wir zeigen dir, wie man mithilfe von einem kleinen Script das Elementor Akkordeon Elelement standardmäßig schließen kann.
Wir fügen nun einfach ein HTML-Widget per Elementor in den Beitrag ein, und schreibt folgenden Code:
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>
Jetzt noch die Seite speichern und refreshen und das akkordeon-widget sollte standardmäßig geschlossen sein. Vorraussetzung für diese Methode ist, dass jQuery auf deiner Seite eingebunden ist. Beim Laden der Seite wird das accordion-widget nun geschlossen angezeigt.
Alternativ könnte man auch per CSS Code das Accordion zu Beginn geschlossen halten. Diesen Code werden wir noch einfügen.
Warum ein Akkordeon Widget in WordPress einbinden?
Ein Akkordeon Widget auf WordPress Seiten schaut nicht nur gut aus, sondern bietet deinen Lesern auch eine klar definierte und strukturierte Möglichkeit deine Beiträge zu lesen. So können zum Beispiel Vor-und Nachteile, sowie FAQs einfach mit Akkordeon Widgets erstellt werden. Dabei kann es oft Sinn machen, das erste Element geschlossen darzustellen.
Die unterschiedlichen Reiter können dann jeweils vom Leser geöffnet werden. Dieser kann diese wieder zu belieben schließen und den Content selber formatieren. Besonders für lange Beiträge oder Seiten kann es sich lohnen, Accordion-Elemente einzubauen.
Was ist Elementor Pro?
Elementor Pro ist die premium Version des Elementor Page Builders. Um das Akkordeon geschlossen darzustellen, wird diese benötigt. Mit Elementor Pro kann man Webdesign und Webentwicklung fast ganz ohne Programmierkenntnisse betreiben. Wir haben zahlreiche Beiträge zum Thema Elementor auf sitebuff veröffentlicht. Nutze einfach die Suchfunktion um weitere Beiträge zum Thema Elementor zu finden.
