FAQ-Block im Jimdo-Creator

Jimdo hat Dolphin um ein FAQ-Block erweitert. Nun, für alle, welche den Creator einsetzen, müssen nicht traurig sein.
Im Creator kann eigener Code im HTML / Widget eingefügt werden. So kann vieles, was nicht im Standard vorhanden ist, hier verwendet werden.
Für alle, die ungern im HTML arbeiten möchten, kommt jetzt die Lösung um einfach einen FAQ-Block in Jimdo-Creator zu verwenden.

Einfaches FAQ im Creator

Um diesen Ausklapp-Effekt zu verwenden gibt es das Summary-Element.

Dies besteht aus 2 Teile HTML.

Einmal in den HTML-Modus vom Text-Element eingefügt und schon kann man schnell ein Text-FAQ in seine Site einfügen ohne in HTML arbeiten zu müssen.

Idealerweise erstellt man sich einmal ein Text-Element mit diesem HTML im Hintergrund. So hat man immer die Möglichkeit dieses zu kopieren, mit entsprechenden Inhalt zu füllen und auf gewünschte Seite einzusetzen.


<section>
  <details>
    <summary>Frage</summary>
    <div>Antwort.</div>
  </details>
</section>

Und so sieht das Summary-Element im Standard aus:

Summary im html5 Standard

im Text-Element einfach zu verwenden.

Was ist der Unterschied zu Dolphin FAQ?

Die Lösung in Dolphin ist zusätzlich mit einem Script erweitert und für Google besser lesbar optimiert
die Ansicht wurde mit CSS aus dem Standard geholt
es kann einfach mit Inhalten gefüllt werden

Die erweiterte FAQ Lösung für den Jimdo Creator

Um im Jimdo Creator die erweiterte FAQ Lösung zu verwenden, folgen Sie den nachfolgenden Anweisungen.
Sie können dies auch alles auf einer versteckten Seite ausprobieren.
Sie können auch Anpassungen im CSS vornehmen und so auf ihr Farbschema anpassen. Achten Sie immer darauf, dass Kommata und Klammern erhalten bleiben.

Was wird benötigt?

Ein HTML-Block - für die Anzeige
Ein wenig CSS - für das Aussehen
Einen Script, welcher die Daten für Google optimiert aufarbeitet
Passende Fragen und Antworten

Der HTML-Block

Nachfolgender HTML-Block wird in einem Text-Element eingefügt.

Dazu ein Text-Element erstellen.
Im Editor auf das letzte Icon (HTML bearbeiten) in der Liste klicken.
Den HTML-Code einfügen.
Mit Ok bestätigen und speichern.


<section class="faq-container">
  <details class="faq-item">
    <summary class="faq-question">Frage</summary>
    <div class="faq-answer">Antwort.</div>
  </details>
</section>

CSS für die Anzeige außerhalb vom Standard


<style type="text/css">
/* Grundstyling für den "Button" */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  background: #f9f9f9;  /* Hintergrundfarbe hinter der Frage */
  font-weight: bold;
  list-style: none; /* Standard-Pfeil verstecken */
}

/* Den Standard-Pfeil in Chrome/Safari verstecken */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Das Plus-Zeichen erstellen */
.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: normal;
  transition: transform 0.3s ease;
}

/* Das Zeichen ändern, wenn das Element offen ist */
.faq-item[open] .faq-question::after {
  content: '−'; /* Das ist ein echtes Minus-Zeichen (Alt + 0150) */
  transform: rotate(180deg); /* Optionaler kleiner Animationseffekt */
}

/* Optional: Ein sanfter Übergang für die Antwort */
.faq-answer {
  padding: 15px;
  border-top: 1px solid #eee;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

Script für Google-Optierung

Nachfolgenden Script-Block in ein HTML/Widget in die Seite mit dem FAQ-Block einfügen.

Vorteil: Der Script wird nur ausgeführt, wo auch die Fragen / Antworten in dem Format verwendet werden.

Falls in mehreren Seiten eingesetzt, in der Website verteilt, kann der Code auch unter Einstellungen Head bearbeiten eingefügt werden.


<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
  // Prüfen, ob wir im Live-Modus sind UND ob FAQs existieren
  const isLiveMode = document.body.classList.contains('cc-pagemode-default');
  const faqItems = document.querySelectorAll('.faq-item');
  if (!isLiveMode || faqItems.length === 0) return;    
  const faqData = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": []
  };

  // 2. Daten aus den gefundenen Elementen extrahieren
  faqItems.forEach(item => {
    const qEl = item.querySelector('.faq-question');
    const aEl = item.querySelector('.faq-answer');

    if (qEl && aEl) {
      faqData.mainEntity.push({
        "@type": "Question",
        "name": qEl.innerText.trim(),
        "acceptedAnswer": {
          "@type": "Answer",
          "text": aEl.innerText.trim()
        }
      });
    }
  });

  // 3. Das JSON-LD in den Head einfügen
  if (faqData.mainEntity.length > 0) {
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify(faqData);
    document.head.appendChild(script);
  }
}); 
</script>

Da hier die FAQ Lösung für den Creator erklärt und der notwendige Code bereit gestellt wird, kommt vieles auch gleich im FAQ Format

Kann auch ein Laie diesen Code im Creator verwenden?

Ja, denn das ist das Ziel dieses Artikels.
Setzen Sie das HTML, CSS, JavaScript so ein wie oben beschrieben. Das HTML ist dann in einem Text-Element. Dies können Sie als Vorlage immer wieder kopieren und wie gewohnt einsetzen.

Was muss ich im Creator einfügen um den für Google optimierten FAQ-Block zu verwenden?

Das notwendige HTML ist in einem Text-Element enthalten
Das gewünschte CSS ist vorhanden, in der Seite oder übergreifend im head
Der Script ist vorhanden, in der Seite oder übergreifend im head

Wie kann ich eine Vorlage mit dem HTML ertellen?

Erstellen Sie ein Text-Element
wechseln Sie in den HTML-Modus letztes Icon im Text-Editor
fügen Sie jetzt das HTML von oben in das sich neu öffnende Fenster ein
bestätigen Sie das Fenster mit Ok
und speichern das Text-Element

Muss ich bei der Pflege der Inhalte im HTML arbeiten?

Nein. Es ist zwar jetzt nicht ganz so komfortabel wie die Lösung in Dolphin, aber mit den nachfolgenden Anleitungen auch gut zu bearbeiten.

Muss ich immer ein Text-Element verwenden?

Nein, Sie sollten es aber tun, wenn Sie nicht im HTML arbeiten möchten.
Es ist als Laie ohne HTML-Wissen bequemer im Text-Element zu arbeiten. So stehen Ihnen alle Optionen vom Text-Editor zur Verfügung.
Da hier ein besonderes HTML im Hintergrund eingesetzt wurde, kann der Editor nicht ganz wie gewohnt verwendet werden.
Das wie, erfahren Sie nachfolgend erklärt.

Wie bearbeite ich die Vorlage bzw. füge meine Frage und Antwort ein?

Es gibt 2 Bereiche: Die Frage und darunter die Antwort. Die Frage hat die Funktion den nachfolgenden Text auf und zu zuklappen. Daher ist eine besondere Vorgehensweise zu beachten.

Kopieren Sie das Text-Element / Vorlage
Klicken Sie auf die Überschrift - Der Text darunter wird sichtbar
Klicken Sie in den Text
verwenden Sie jetzt die Pfeiltasten nach oben um in die Frage zu springen - an letzte Position ist empfehlenswert (Pfeiltaste nach rechts).
So können Sie ihre neue Frage schreiben und den Platzhaltertext davor mit den Tasten löschen ohne Gefahr zu gehen, dass das dahinter liegende HTML gelöscht wird
setzen Sie den Cursor in den Text schreiben Sie den Text, oder fügen diesen aus einem einfachen Editor ein - unbedingt ohne Formatierung
Im Antwortbereich können Sie den nicht benötigten Text markieren und löschen.
Zum Abschluss klicken Sie auf die Frage, so dass die Antwort versteckt ist.
Danach speichern.

Sie möchten den Antworttext in einer Liste anzeigen lassen?

Schreiben Sie erst den Text als Fließtext
markieren Sie die Zeilen welche als Liste formatiert werden sollen, Sie erhalten einen Listenpunkt
danach setzen Sie den Cursor an die jeweilige Textstelle, welcher ein neuer Listeneintrag werden soll
mit der Enter-Taste wird ein neuer Listenpunkt erzeugt

Hintergrund: Wenn Sie wie gewohnt die Enter-Taste für einen neuen Absatz, bzw. Listenpunkt verwenden, wird im Hintergrund das HTML mit kopiert. Dies gilt es zwingend zu vermeiden.

Was sollte ich noch unbedingt wissen?

Um vom Google optimierten FAQ-Block zu profitieren, ist es wichtig gute Fragen zu schreiben und eine nicht zu kurz gewählte Antwort auf die Frage.
Je interessanter die Frage und ausführlicher die Antwort darauf, um so höher ist die Bewertung des erstellten Inhaltes.

Sie möchten den Text mit ein oder mehreren Umbrüchen anzeigen lassen?

Schreiben Sie erst den Inhalt als Fließtext.
Sie können hier wie gewohnt Satzzeichen setzen.
Statt der Enter-Taste welcher einen neuen Absatz erzeugt, erzeugen Sie einen weichen Umbruch. Mit einem weichen Umbruch, wird ein neue Zeile erzeugt, aber kein neuer Absatz.
Für die Erzeugung eines weichen Umbruches: halten Sie die Shift-Taste gedrückt und drücken dann die Enter-Taste.

Sie möchten den Text und eine Liste anzeigen lassen?

Schreiben Sie erst den Inhalt als Fließtext
markieren Sie die Zeilen welche als Liste formatiert werden sollen
Klicken Sie im Editor auf das Icon für Liste
danach klicken Sie an die jeweilige Textstelle und erzeugen mit Enter-Taste eine neue Zeile und somit einen neuen Listeneintrag

Wenn Sie nach der Liste eine neuen Absatz benötigen, bitte so vorgehen:

Schreiben Sie ihren Fließtext
Markieren Sie den Text für die Liste und den Text danach
erzeugen Sie ihre Liste wie oben beschrieben
für den Text nach der Liste: markieren Sie die Zeile/n und klicken im Editor auf das hell hinterlegte Listensymbol.

Nur in dieser Vorgehensweise können Sie in dem hier verwendeten HTML für den FAQ-Block einen weiteren Absatz außerhalb der Liste erzeugen ohne das HTML dahinter zu zerstören.