Skip to main content

​

​
Allgemeine Beschreibung

Mit dem FAQ Portlet kannst du Häufig gestellte Fragen als praktisches Accordion anlegen und auf Inhalte verlinken. Damit Google die hinterlegten Fragen auch als solche auslesen bzw. indexieren kann, musst du die FAQ-Portlets in unserem “Strukturierte Daten-Container” platzieren. Du kannst mehrere FAQ-Portlets in einem Container platzieren. Achte jedoch darauf, dass pro Seite nur ein “Strukturierte Daten-Container” verwendet wird

​
Einsatzmöglichkeiten (Inspiration)

  • Häufig gestellte Fragen
  • Zusatzinformationen
  • Weiterführende Inhalte

​
Featureübersicht:

  • Accordion mit kleinen Designoptionen
  • Antwort im Accordion Body
  • Optional mit Button

​
Settings:

​
Allgemein

In diesem Reiter pflegst du den eigentlichen Inhalt der Frage und Antwort ein.
Image
  • Name der FAQ Page (Wichtig für ein sauberes Markup): Gib hier einen übergeordneten Namen für die FAQ-Sektion ein. Dies wird für das schema.org Markup verwendet, um Suchmaschinen den Inhalt besser verständlich zu machen.
  • ID der FAQ Page (Wichtig für die korrekte Zuordnung): Definiere eine eindeutige ID. Wenn du mehrere FAQ-Elemente auf einer Seite hast, die zusammengehören (z. B. für das Markup), sollten sie dieselbe ID nutzen.
  • Frage: Trage hier die Frage ein, die im zugeklappten Zustand sichtbar ist (die Überschrift des Elements).
  • Antwort: Nutze den Editor, um die Antwort zu verfassen. Du kannst hier Texte formatieren, Listen erstellen oder Bilder einfügen.

​
Darstellung

Hier definierst du das visuelle Erscheinungsbild der Frage und des Containers.
Image
  • Überschrift Element: Wähle den semantischen HTML-Tag für die Frage (wichtig für SEO). Die Optionen sind:
    • H1 bisH6
    • Standard Text
  • Überschrift Size: Bestimme die optische Größe der Frage unabhängig vom HTML-Tag. Die Optionen sind:
    • Element Standard
    • H1 bis H6
    • Standard Text
    • Display 1 (nur NIU Plus) bis Display 6 (nur NIU Plus)
  • Schrift-Dicke: Lege die Strichstärke der Schrift fest (z. B. 800 für fett).
  • Additional Classes: Hier kannst du eigene CSS-Klassen für spezielles Styling hinzufügen (z. B. m-0).
  • Hintergrundfarbe Frage: Wähle eine Farbe für den Balken, in dem die Frage steht.
  • Custom Color: Definiere eine individuelle Farbe, falls die Standardfarben nicht passen.
  • Icon Style: Wähle das Symbol, das anzeigt, ob die Frage auf- oder zugeklappt ist (z. B. +).
  • Box mit Schatten unterlegen: Aktiviere diese Checkbox, um dem FAQ-Element einen Schatten zu geben (Card-Look).
  • Initial ausgeklappt: Aktiviere diese Option, wenn diese Frage beim Laden der Seite bereits geöffnet sein soll.

​
Button

In diesem Reiter kannst du einen Button konfigurieren, der unterhalb der Antwort angezeigt wird.
Image
  • Button verwenden?: Wähle “Ja”, um die Button-Einstellungen einzublenden.
  • Button als Link oder Funktionsbutton verwenden?: Bestimme die Art des Buttons. Die Optionen sind:
    • Linkbutton
    • Funktionsbutton
    • Data-Attribute
  • Buttonlink: URL auf die der Button bei Klick leiten soll. Für Verlinkung auf andere Seiten muss die vollständige URL angelegt werden. Für Verlinkungen auf der eigenen Domain reicht der relative Pfad. Damit der Link innerhalb der aktuellen Seite zu einem Bereich scrollt, muss der Bereich eine ID haben, dann kannst du mit #mein-id automatisch dort hin scrollen lassen per Klick. Siehe Allgemeine Dokumentation für das Anlegen von IDs in OPC Portlets
Verlinkung auf Drittseite:
https://dreizack-medien.de/meine-kategorie/mein-produkt 

Verlinkung innerhalb der eigenen Domain:
/meine-kategorie/mein-produkt

Verlinkung zu Container:
#meine-id
/meine-kategorie/mein-produkt#meine-id
  • Button Text: Gib die Beschriftung des Buttons ein (z. B. “Mehr erfahren”).
    • Full
    • Outlined
    • Plain Text
    • Link
  • Button Farbe: Wähle eine Theme-Farbe (z. B. Primary).
  • Button Breite: Wähle zwischen Content Width (Textlänge) oder Full Width (Volle Breite).
  • Button Ausrichtung nach Breakpoints (XS bis XL): Bestimme für jede Displaygröße, wo der Button stehen soll (z. B. zentriert).
  • Link in neuen Tab öffnen?: Setze den Haken, wenn der Link in einem neuen Fenster geöffnet werden soll.
  • Icon vor oder nach dem Text: Platziere ein Icon relativ zum Button-Text (z. B. “Nach dem Text”).
  • Icon verwenden?: Entscheide mit “Ja” oder “Nein”, ob ein Icon angezeigt wird.