Zuletzt geändert am von kai.s.
Einfacher geht es mittlerweile nicht mehr ein Accordion in seinen Gambio Shop oder jede andere Webseite einzubauen. Ihr benötigt nur ein klein wenig Code, mehr nicht. Das ist eigentlich schon alles.
<details>
<summary>Die Überschrift, oder das was vor dem Aufklappen zu sehen ist</summary>
<p>Hier der Text der nach dem Aufklappen zu sehen sein soll.</p>
</details>Das ganze sieht dann so aus wenn es ausgegeben wird.
Die Überschrift, oder das was vor dem Aufklappen zu sehen ist
Hier der Text der nach dem Aufklappen zu sehen sein soll.
Damit das ganze dann auch noch etwas schöner aussieht, kann man auch noch etwas CSS hinzufügen. Das zeige ich zum Schluss. Ob man das in Form von Styles im HTML Code macht, oder es als zusätzliches CSS in seine Webseite einfügt, muss man sehen. Möchten Sie das Ihre Accordion immer gleich aussehen, macht es Sinn, die Styles im Gambio in den StyleEditor zu packen. Was man immer machen sollte, dem Besucher zeigen, das da was anklickbar ist.
<details>
<summary style="cursor:pointer">Die Überschrift, oder das was vor dem Aufklappen zu sehen ist</summary>
<p>Hier der Text der nach dem Aufklappen zu sehen sein soll.</p>
</details>Das ganze sieht dann so aus:
Die Überschrift, oder das was vor dem Aufklappen zu sehen ist
Hier der Text der nach dem Aufklappen zu sehen sein soll.
Fahrt jetzt mal mit der Maus über die Überschrift, jetzt sollte man sehen, das es ein anklickbarer Link ist. Um das für alle zu übernehmen, könnt Ihr den Code so verwenden, oder ihr kopiert den Code hier darunter in den Gambio StyleEditor und benutzt den von oben, bei sehr vielen Accordions spart Ihr Euch eine Menge Code.
summery {
cursor:pointer;
}Damit das ganze dann auch ein richtiges Accordion wird, gehören da ja noch paar mehr Sachen rein.
Die Überschrift Eins
Hier der erste Text.
Die Überschrift Zwei
Hier der zweite Text.
Die Überschrift Drei
Hier der dritte Text.
Der Code Dazu sieht dann so aus:
<details>
<summary style="cursor:pointer">Die Überschrift Eins</summary>
<p>Hier der erste Text.</p>
</details>
<details>
<summary style="cursor:pointer">Die Überschrift Zwei</summary>
<p>Hier der zweite Text.</p>
</details>
<details>
<summary style="cursor:pointer">Die Überschrift Drei</summary>
<p>Hier der dritte Text.</p>
</details>Das Design anpassen, da sind der Phantasie keine Grenzen gesetzt
Die Überschrift Eins
Hier der erste Text.
Die Überschrift Zwei
Hier der zweite Text.
Die Überschrift Drei
Hier der dritte Text.
Was das Design angeht kann man sich austoben bis zum geht nicht mehr. z.B. könnte man den Hintergrund noch Farbig machen, Die Schriftfarbe ändern oder was auch immer. Was im Gambio nicht angezeigt wird, sind die kleinen Dreiecke vor der Überschrift, dafür gebe ich Euch aber noch was, was Ihr ganz einfach in den StyleEditor kopieren könnt. Hier erst mal der Code für jede x beliebige Webseite.
<details style="border:1px solid #abb8c3;border-radius:6px;margin-bottom:10px;">
<summary style="cursor:pointer; margin-left:5px;">Die Überschrift Eins</summary>
<p style="margin-left:15px;">Hier der erste Text.</p>
</details>
<details style="border:1px solid #abb8c3;border-radius:6px; margin-bottom:10px;">
<summary style="cursor:pointer; margin-left:5px;">Die Überschrift Zwei</summary>
<p style="margin-left:15px;">Hier der zweite Text.</p>
</details>
<details style="border:1px solid #abb8c3;border-radius:6px; margin-bottom:10px;">
<summary style="cursor:pointer; margin-left:5px;">Die Überschrift Drei</summary>
<p style="margin-left:15px;">Hier der dritte Text.</p>
</details>Ab hier ist das Accordion für Gambio kleinere Anpassungen dann weiter unten
Den Teil in den Content kopieren. Achtet immer darauf, vorher auf den HTML Modus zu wechseln.
<details class="details">
<summary class="summary">Die Überschrift Eins</summary>
<p class="summaryp">Hier der erste Text.</p>
</details>
<details class="details">
<summary class="summary">Die Überschrift Zwei</summary>
<p class="summaryp">Hier der zweite Text.</p>
</details>
<details class="details">
<summary class="summary">Die Überschrift Drei</summary>
<p class="summaryp">Hier der dritte Text.</p>
</details>Den Teil in den StyleEditor unter eigenes CSS kopieren. Es ist bereits jedem Bereich ein Klasse zugeordnet, Ihr könnt also jeden Bereich separat noch für Eure Zwecke umschreiben.
.details{
border:1px solid #abb8c3;
border-radius:6px;
margin-bottom:10px;
}
.summary::before {
content: "▶";
margin-right:5px;
}
details[open] summary::before {
content: '▼ ';
}
.summary{
cursor:pointer;
margin-left:5px;
margin-top: 5px;
margin-bottom: 5px;
}
.summaryp {
margin-left:27px;
}
Ab hier kleinere Anpassungen für alle
Wer statt dem Dreieck z.B. ein Plus und ein Minus Zeichen haben möchte, könnten in seinem CSS Code das so anpassen.
.summary::before {
content: "+";
margin-right:5px;
}
details[open] summary::before {
content: '- ';
}Wer möchte, der kann auch einen Bereich bereits offen darstellen also so:
Die Überschrift Eins
Hier der erste Text.
Die Überschrift Zwei
Hier der zweite Text.
Die Überschrift Drei
Hier der dritte Text.
Dazu muss man nur das im HTML Code einfügen.
<details open="">Wie bereits erwähnt gibt es viele viele Möglichkeiten das auch anders aussehen zu lassen.
Strukturierte Daten einbinden wenn Ihr das als FAQ nutzen möchtet
Update: Google hat eine Änderung veröffentlicht, es werden nur noch FAQ Behörden und Gesundheitsorganisationen in den Suchergebnissen angezeigt. Siehe hier: https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=de
Wenn Ihr das Accordion als FAQ nutzen möchtet, macht es Sinn, Strukturierte Daten mit einzubinden. Das ganze könnte Ihr mit folgendem Script machen und am besten so weit oben wie möglich über den HTML Modus einfügen.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Frage1?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Antwort 1"
}
},
{
"@type": "Question",
"name": "Frage 2?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Antwort 2"
}
}
]
}
</script>
In diesem Beispiel wird die Art des Dokuments als „FAQPage“ definiert und jede Frage und Antwort werden als „Question“ und „Answer“ Eigenschaft definiert. So kann Suchmaschine verstehen, dass es sich um eine FAQ Seite handelt und die Fragen und Antworten extrahieren. Das kann natürlich beliebig erweitert werden
Ich hoffe ich konnte Euch ein wenig zeigen was heutzutage alles ohne viel Aufwand möglich ist. Gern erstellen wir für Euch auch individuelle Designs für Euren Onlineshop, meldet Euch einfach.
Wer das nicht selbst in den Code Fummeln möchte, kann auch einen der Zahlreichen Generatoren benutzen. Hier einige Beispiele:
Den generierten Code, sollte Ihr dann so weit wie möglich oben auf einer Seite im Quelltext positionieren.