Als Besitzer einer WordPress-Website gibt es viele Ideen, die Sie mit Elementor umsetzen können, um Ihre Website viel interessanter und professioneller aussehen zu lassen. Und um diese Ideen umzusetzen, helfen Ihnen zahlreiche Elementor-Plugins bei verschiedenen Aufgaben.
Eine Möglichkeit hierfür ist das Hinzufügen von Akkordeons und Schaltern zu Ihrer WordPress-Website. Wenn Sie nicht wissen, was Akkordeons und Toggles sind, bleiben Sie bei uns, während wir uns mit der Erstellung von Toggles und Akkordeons in WordPress befassen.
Was sind Umschalter und Akkordeons in WordPress?
Akkordeons und Umschalter sind Designkomponenten, mit denen verschiedene Segmente zu einer Einheit zusammengefasst werden. In der Regel bedeutet dies, dass mehrere Teile erstellt werden, die durch erweiterbare Registerkarten unterteilt sind. Dies macht sie besonders nützlich, da sie es Ihnen ermöglichen, viele Informationen in diese Abschnitte zu packen und gleichzeitig Platz auf der Seite zu sparen.
Sie möchten beispielsweise eine Informationsseite erstellen und möchten eine Menge Inhalte anzeigen. Anschließend können Sie die Fragen in einem erweiterbaren Format erstellen, in dem der Benutzer auf die Schaltfläche „Erweitern“ klicken kann, um die Antworten zu erfahren. Darüber hinaus erhöht dies das Engagement der Nutzer und trägt dazu bei, ihr Interesse aufrechtzuerhalten.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangenWie unterscheiden sich Akkordeons von Akkordeons?
Wenn Sie auf einen Akkordeonabschnitt klicken, wird dieser erweitert und zeigt seinen verborgenen Inhalt an. Wenn ein neuer Abschnitt ausgewählt wird, wird der vorherige geschlossen und der neue erweitert. Bei einem Akkordeon darf also jeweils nur ein Segment geöffnet sein.
Andererseits hilft ein Umschalter dabei, den vorherigen Teil offen zu halten und einen anderen zu erweitern. Sie können natürlich jeden Abschnitt manuell schließen, wenn Sie möchten.
Dies ist der Hauptunterschied zwischen Akkordeons und Umschaltern. Egal, ob Sie Akkordeons oder Schalter hinzufügen möchten, Qi Addons For Elementor ist genau das Richtige für Sie.
So erstellen Sie Schalter und Akkordeons mit Elementor- und Qi-Add-ons
Qi Addons für Elementor ist ein fantastisches Add-on, mit dem Sie Ihre WordPress-Site mit 60 verschiedenen Widgets vollständig anpassen können. In wenigen Minuten können Sie beeindruckende Abschnitte erstellen, die perfekt zum Stil Ihrer Website passen, ohne dass eine Programmierung erforderlich ist.
Das Widget „Akkordeons und Umschalter“ ist eines der vielen nützlichen Widgets, die in diesem Plugin enthalten sind. Sie können einzigartige Symbole für Akkordeons und Schalter erstellen, Schriftarten anpassen, mehrere Farben für Text, Hintergrund, Symbole verwenden und kombinieren und vieles mehr.
Gehen Sie zunächst zum Backend Ihrer Website oder Ihres Beitrags und durchsuchen Sie die Elementor-Seitenleiste nach Akkordeons und Schaltern. Das Widget „Akkordeons und Umschalter“ wird sofort angezeigt.
Ziehen Sie es anschließend einfach nach rechts. Als Nächstes nehmen wir die meisten Anpassungen auf der Registerkarte „Inhalt“ vor.
Das erste, was Ihnen auffallen wird, ist, dass das Widget zwei Elemente enthält, jedes mit etwas Lorem Ipsum-Inhalt. Und auch das Akkordeonverhalten, bei dem man einen Abschnitt erweitert und der andere schließt.
Mit der Option „Verhalten“ im Abschnitt „Allgemein“ können Sie dieses Verhalten ganz einfach auf „Umschalten“ anpassen.
Wenn Sie danach auf eines der Objekte klicken, bleiben diese geöffnet. Das ist das Toggle-Verhalten . Alle anderen Einstellungen für Akkordeons und Umschalter bleiben gleich.
Auf der Registerkarte „Stil“ ist die Option „Standard“ eingestellt. Gleichzeitig gibt es drei weitere Optionen, aus denen Sie wählen können, z. B. „Boxed“, bei der die Überschrift jedes Abschnitts unterstrichen ist, „Border Top“ , bei der der Rand darüber platziert wird, und „ Border Between“ , bei der der Rand zwischen den Titeln platziert wird.
Als nächstes folgen die Optionen „Symbol öffnen“ und „Symbol schließen“ . Sie können Ihre Öffnungs- und Schließsymbole aus der Symbolsammlung auswählen oder hier eine SVG-Datei hochladen.
Nachdem Sie die Symbole zum Öffnen und Schließen ausgewählt haben, klicken Sie auf die Option „Medien einfügen“ .
Ihre Öffnungs- und Schließsymbole wechseln nun automatisch. Bei den Artikeleinstellungen stehen Ihnen standardmäßig nur zwei Optionen zur Verfügung. Sie können jedoch schnell weitere hinzufügen, indem Sie auf die Schaltfläche „Element hinzufügen“ klicken.
Klicken Sie einfach auf das Element, das Sie bearbeiten möchten, und geben Sie Ihren Titel in den Titelbereich ein, um die Informationen zu ersetzen. Mithilfe des Abschnitts „Inhalt“ können Sie das Gesamterscheinungsbild verbessern und gleichzeitig auf den Text und die visuelle Option setzen.
Das sind alle Einstellungen, die Sie benötigen, um mit Elementor in WordPress ein Akkordeon oder einen Toggle zu erstellen.
Die nächste Aufgabe besteht darin, Ihr Akkordeon zu stylen. Auf der Registerkarte „Stil“ finden Sie unzählige Möglichkeiten, Ihre Akkordeons nach Ihren Wünschen zu gestalten.
Sie können Ihren Titel-Tag mit der ersten Option in der Liste festlegen. Standardmäßig ist es auf H3 eingestellt, aber Sie können es auf einen beliebigen Wert zwischen H1 und H6 ändern.
Wenn Sie den Abschnitt „Typografie“ auswählen, wird eine neue Liste mit Optionen angezeigt, mit denen Sie die Typografie Ihrer Akkordeons verfeinern können.
Sie können die Schriftfamilie Ihres Textes mit der Option „Familie“ ändern, die es Ihnen ermöglicht, den Namen der Schriftart manuell einzugeben oder in der Dropdown-Liste danach zu suchen.
Mit der Option „Größe“ können Sie die Größe Ihrer Schriftart anpassen.
Mit der Option „Gewicht“ können Sie Ihren Text fett formatieren. Sie können die Fettstärke auch mithilfe eines der numerischen Werte anpassen.
Mithilfe der Texttransformationsoption können Sie den Titel in Großbuchstaben, Kleinbuchstaben, Großbuchstaben oder Normal umwandeln. Darüber hinaus können Sie mit der Option „Stil“ Ihren Text kursiv oder schräg formatieren.
Sie können die Dekorationsoption auch verwenden, um eine Unterstreichung, eine Überstreichung oder eine Durchstreichung hinzuzufügen oder sie unverändert zu lassen.
Mit der Einstellung „Zeilenhöhe“ können Sie zusätzlichen Platz um die Überschrift herum schaffen. Mit der Option „Buchstabenabstand“ können Sie den Abstand zwischen den Buchstaben vergrößern.
Dies sind alle Typografieoptionen, mit denen Sie spielen können, damit der Text so aussieht, wie Sie es möchten.
Anschließend werden Ihnen Optionen angezeigt, mit denen Sie zwischen dem Normal- und dem Aktivmodus wählen können. Der normale Modus bezieht sich auf das geschlossene Akkordeon, während der aktive Modus auf das ausgedehnte Akkordeon hinweist.
Mit der Option „Titelfarbe“ in den Normaleinstellungen können Sie die Farbe der Elementtitel anpassen.
Mit der Option „Hintergrundfarbe“ können Sie den Hintergrund des Titelfelds Ihres Akkordeons anpassen.
Die Option „Titelauffüllung“ befindet sich direkt darunter. Sie werden sehen, dass sich der Raum um die Titel gleichmäßig vergrößert, wenn Sie die Werte erhöhen.
Dann werden Sie auf der Seite „Aktive Einstellungen“ feststellen, dass die Optionen mit denen auf der Registerkarte „Normal“ identisch sind.
Sie können diese Variablen auch verwenden, um einen einzigartigen Effekt zu erzeugen, und Sie können sie so einstellen, dass sich die Farbe ändert, wenn ein Element geöffnet wird.
Wir haben immer noch ein Akkordeon mit den gleichen aktiven und regelmäßigen Hintergrundfarben wie zuvor. Ändern Sie einfach die Hintergrundfarbe einer Registerkarte, um sie zu unterscheiden.
Mit der Option „Inhaltsfarbe“ können Sie auch die Farbe des Inhalts innerhalb der Titel ändern.
Dann gibt es noch die Option „Inhaltsauffüllung“ , mit der Sie den umgebenden Raum des Textes anpassen können.
Mit der Option „Rahmenfarbe“ können Sie die Farbe der Linien zwischen den Elementen ändern.
Mit der Option „Symbolgröße“ direkt darunter können Sie die Größe der Akkordeonsymbole ändern.
Schließlich gibt es noch zwei weitere Optionen mit einem Schalter: „Normal“ und „Hover“. Dies sind die Optionen zum Ändern der Farbe des „normalen“ Symbols sowie der Farbe des Symbols, wenn Sie mit der Maus darüber fahren.
Stellen Sie sicher, dass Sie auf der Registerkarte „Hover“ eine andere Farbe auswählen, wenn Sie möchten, dass sich die Farbe ändert, wenn Sie mit der Maus über ein Symbol fahren.
Damit sind die meisten Einstellungen im Widget „Akkordeons und Umschalter“ abgeschlossen. Die erweiterten Optionen ähneln den anderen Elementor-Widgets.
Wenn Sie mit dem Aussehen Ihres Akkordeons zufrieden sind, klicken Sie auf die Schaltfläche „Aktualisieren“ , um es zu speichern.
So erstellen, stilisieren und fügen Sie Elementor- Akkordeons und Schalter mit Elementor zu Ihrer WordPress-Website hinzu. Besuchen Sie uns unbedingt auf Facebook und Twitter , um weitere Updates zu unseren Beiträgen zu erhalten.
