Wie man im Accordion-Widget von Elementor die Position des Icons nach oben setzt

Einführung

Im Elementor PageBuilder gibt es manchmal den Fall, dass man im Accordion das Icon nach oben setzen möchte. Dies kann besonders dann notwendig sein, wenn der Titel mehrzeilig wird und das Icon weiterhin gut sichtbar sein soll. Elementor hat in einem der letzten Updates die Möglichkeit eingeführt, das Icon im List-Widget zu positionieren, was ein lange bestehendes Problem löste. Leider gibt es diese Möglichkeit noch nicht im Accordion-Widget. Um dieses Problem zu lösen, benötigen wir etwas CSS-Code.

Hier kannst du dir auch gerne das Ganze als Video ansehen:

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Der CSS-Code

Um das Icon im Accordion-Widget nach oben zu setzen, benötigen wir zwei einfache CSS-Regeln:

.elementor-widget-n-accordion .e-n-accordion-item-title-icon {
    align-self:flex-start;
    top: 5px;
}

Erklärung des Codes

• .elementor-widget-n-accordion .e-n-accordion-item-title-icon:
  Mit dieser Klassenbezeichnung sprichst du alle Icons im Accordion widget an.
• align-self: flex-start: Diese Regel sorgt dafür, dass die Ausrichtung der Elemente innerhalb des Titels des Accordion-Widgets nach oben (flex-start) erfolgt. Das heißt, alle Inhalte innerhalb des Titels werden an der oberen Kante ausgerichtet.
• top: 5px: Diese Regel verschiebt das Icon innerhalb des Titels um 5 Pixel nach unten, damit es nicht direkt an der oberen Kante klebt und ein wenig Abstand hat.

Position anpassen

Je nachdem welche Schriftgröße oder Abstände du benutzt, kannst du die Pixel-Angabe im letzteren Bereich (aktuell 5px) noch anpassen um das Icon weiter nach unten oder nach oben zu verschieben

Einfügen des CSS-Codes

Globale Anwendung

Wenn du möchtest, dass dieser CSS-Code auf alle Accordion-Widgets auf deiner Website angewendet wird, kannst du den Code im globalen CSS-Bereich von Elementor einfügen. Gehe dazu wie folgt vor:

1. Öffne deinen Elementor-Editor.
2. Klicke auf das Hamburger-Menü oben links und wähle „Site Settings“ (Website-Einstellungen).
3. Gehe zum Abschnitt „Custom CSS“ (Benutzerdefiniertes CSS).
4. Füge den oben genannten CSS-Code ein und speichere die Änderungen.

Anwendung auf ein einzelnes Widget

Falls du den CSS-Code nur auf ein bestimmtes Accordion-Widget anwenden möchtest, kannst du den Code direkt im benutzerdefinierten CSS-Feld des Widgets eintragen. Gehe dazu wie folgt vor:

1. Öffne den Elementor-Editor und bearbeite die Seite, auf der sich dein Accordion-Widget befindet.
2. Klicke auf das Accordion-Widget, um dessen Einstellungen zu öffnen.
3. Gehe zum Abschnitt „Erweitert“ und finde das Feld „Benutzerdefiniertes CSS“.
4. Füge den folgenden CSS-Code ein:

selector .e-n-accordion-item-title-icon {
    align-self:flex-start;
    top: 5px;
}

Dabei ersetzt selector automatisch den spezifischen Selector für dieses Widget, sodass die Änderungen nur auf dieses eine Widget angewendet werden.

Mit diesen Schritten und dem CSS-Code kannst du das Icon im Accordion-Widget von Elementor nach oben setzen und sicherstellen, dass dein Design auch bei mehrzeiligen Titeln gut aussieht.

---

Hat dir dieser Artikel gefallen? Dann schreib mir gerne unten einen Kommentar!