Erweitertes Hilfecenter-Branding

Logo, Hero-Bild, Header-Links, Markenfarbe und Support-E-Mail erklärt Das Branding deines Portals anpassen. Hier geht es um den Rest. Jede Änderung speichert sich von selbst.

Favicon

Das Favicon ist das kleine Icon im Browser-Tab. Klick unter Branding neben Favicon auf Hochladen und wähl ein quadratisches PNG oder WebP mit 32 bis 1024 Pixeln Breite und bis zu 256 KB. Es erscheint auf jeder öffentlichen Seite deines Hilfecenters, mit Favicon entfernen nimmst du es wieder weg. Ohne eigenes Favicon zeigt der Tab den ersten Buchstaben deines Portalnamens auf deiner Markenfarbe. Dein Hilfecenter zeigt nie das Deskwoot-Icon. Nimm ein schlichtes Icon, das auch bei 16 Pixeln lesbar bleibt.

Seitenschrift, Überschriften und Leseschrift

Unter Aussehen wählst du bei Schriftart die Schrift des ganzen Hilfecenters: Systemstandard (die Schrift des Geräts), Instrument Sans, Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Nunito, Source Sans oder Plus Jakarta Sans. Deskwoot lädt sie für dich, du musst nichts hosten oder hochladen.

• Schrift für Überschriften gilt für Seitentitel und Abschnittsüberschriften. Standard ist Wie die Seitenschrift, jede Seitenschrift steht zur Wahl.
• Leseschrift unter Branding gilt nur für den Text deiner Artikel. Literata ist eine ruhige Serifenschrift für langes Lesen, und jede Seitenschrift steht ebenfalls zur Wahl.

Eine Serifenschrift für den Artikeltext mit einer klaren serifenlosen Schrift für Header und Menüs liest sich wie ein gut gemachtes Buch.

Hell, dunkel oder automatisch

Das Farbschema hat 3 Optionen:

• Hell (Standard): helle Flächen, dunkle Schrift.
• Dunkel: dunkle Flächen, helle Schrift, für Marken, die selbst dunkel sind.
• Automatisch: dunkel für alle, die ihr Gerät im dunklen Modus nutzen, hell für alle anderen.

Das Farbschema gilt für jede öffentliche Seite: Startseite, Sammlungen, Artikel, Suche und die Seite für eine Adresse, die es nicht gibt.

Eigene Farben

Unter Farben des Schemas justierst du die Palette fein, statt CSS zu schreiben: Seite, Karten, Rahmen, Text, Gedämpft (Nebentext) und Überschriften, jeweils als Hex-Wert. Es gibt eine Palette für den Hellen Modus und eine für den Dunklen Modus. Hell zeigt die helle Palette, Dunkel die dunkle und Automatisch beide, also stellst du dort die Farben von beiden ein. Eine Farbe, die du nicht änderst, behält die eingebaute, und Zurücksetzen holt eine ganze Palette zurück. Deine Markenfarbe färbt weiterhin Links, Buttons und Akzente.

Das Hero-Bild

Drei Einstellungen unter Aussehen bestimmen, wie Text auf deinem Hero-Bild steht. Sie gelten für die Startseite und für den Bildstreifen jeder anderen Seite.

• Text auf dem Bild: Hell oder Dunkel. Dunkler Text passt zu hellen Bildern, Buttons und Chips auf dem Bild passen sich an.
• Schatten über dem Bild: Keiner, Leicht (Standard) oder Stark. Ein stärkerer Schatten hält den Text auf unruhigen Bildern lesbar.
• Bildausschnitt: Automatisch, Oben, Mitte oder Unten, also der Teil des Bildes, der sichtbar bleibt, wenn ein Streifen nur einen Ausschnitt zeigt.

Ecken, Kopfzeile und Symbole der Sammlungen

• Ecken: Eckig, Weich (Standard) oder Rund, für Karten, Buttons und kleine Labels.
• Kopfzeile: Hell (Standard) oder Markenfarbe, die Leiste oben auf jeder Seite.
• Symbole der Sammlungen: was hinter dem Symbol jeder Sammlung in der Bibliothek liegt. Bild zeigt einen Ausschnitt deines Hero-Bildes, Markenfarbe einen Ton deiner Farbe und Nur Symbol das Symbol allein. Ohne Hero-Bild zeigt Bild die Markenfarbe.

Artikelseiten

Unter Artikelseiten schaltest du jeden Teil rund um den Text für das ganze Hilfecenter ein oder aus:

• Seitenleiste mit Sammlungen auf Artikelseiten, siehe Artikelnavigation im Hilfecenter.
• Auf dieser Seite: die Überschriften einer längeren Anleitung als Links neben dem Text, auf Handys darüber.
• War diese Anleitung hilfreich?: die Frage am Ende jeder Anleitung, siehe Feedback zu Hilfeartikeln.
• Zurück, Weiter und Weiterlesen: die Links zur Anleitung davor und danach und weitere Anleitungen aus der Sammlung.

Eigene Abschnittsüberschriften

Im Tab Design benennst du unter Überschriften der Abschnitte die Abschnitte der Startseite selbst: die Überschrift der Bibliothek, von Meistgelesen, von Noch Hilfe nötig? und den Text darunter. Über die Sprach-Tabs (EN, DE, PT, HI) gibst du jeder Überschrift eine eigene Übersetzung. Ein leeres Feld behält die eingebaute Überschrift, die der Sprache der Besucher folgt, und eine Überschrift ohne Übersetzung zeigt deinen englischen Text.

Footer in anderen Sprachen

Mit Eigenen Footer verwenden unter Eigener Footer legst du bis zu 4 Spalten mit Links und eine Zeile für Copyright oder Rechtliches an. Über die Sprach-Tabs bei Sprachen der Fußzeile bekommt jeder Spaltentitel und jeder Linktext eine deutsche, portugiesische oder Hindi-Fassung. Ohne Übersetzung erscheint er auf Englisch.

Custom CSS

Für alles, was die Einstellungen nicht erreichen, fügst du im Tab Design Custom CSS (für Fortgeschrittene) hinzu. Es gilt nur für dein öffentliches Hilfecenter, nie für das Dashboard, und es setzt sich ohne !important gegen die Stile von Deskwoot durch.

• Beim Speichern werden @import-Regeln, javascript:-Adressen und ähnlich riskante Teile entfernt.
• Bis zu 20.000 Zeichen, genug für Anpassungen an deine Marke.
• Die Elemente tragen feste data-hc-Attribute (zum Beispiel [data-hc="article"] oder [data-hc="category-grid"]), die sich besser als Selektoren eignen als Klassennamen.

Eigenes Header- und Footer-HTML (Enterprise)

Im Enterprise-Plan kannst du, sobald dein Hilfecenter unter deiner eigenen aktiven Domain läuft, den Header deiner Website als HTML des eigenen Headers einfügen. Er ersetzt dann den Header des Hilfecenters, und auf inneren Seiten wandern Suche und Sprachauswahl in den Bildstreifen darunter. Dein eigenes Footer-HTML ersetzt genauso den Footer unten auf jeder Seite.

Beides wird beim Speichern bereinigt: Skripte, Event-Handler, <style>-Blöcke, iframes, Formulare und javascript:-Adressen werden entfernt. Klassen und Inline-Styles bleiben, damit du den Look mit Custom CSS fertig machen kannst.

Verlauf

Jedes Mal, wenn du Markenfarbe, Seitentitel, Untertitel, Header-Links, Custom CSS, die Abschnitte der Startseite und ihre Überschriften, Text, Schatten oder Ausschnitt des Hero-Bildes, die Ecken, die Kopfzeile, die Symbole der Sammlungen oder die Teile der Artikelseiten änderst, hält Deskwoot den Stand davor fest. Der Bereich Verlauf im Tab Design zeigt, wer was geändert hat, und ein Klick holt einen früheren Look zurück. Logo, Hero-Bild, Favicon, Schriften, Farbschema, Farben des Schemas und eigenes Header- oder Footer-HTML gehören nicht zu diesem Verlauf.

Häufige Fragen

Welche Optionen brauchen den Enterprise-Plan?

White Label und eigenes Header- und Footer-HTML, das zusätzlich eine aktive eigene Domain braucht. Alles andere in dieser Anleitung gehört ab Startup zum Hilfecenter.

Kann ich eine Schrift für Überschriften und eine andere für Artikel nutzen?

Ja. Schriftart gilt fürs ganze Hilfecenter, Schrift für Überschriften für Titel und Abschnittsüberschriften und Leseschrift nur für den Artikeltext, zum Beispiel Instrument Sans mit Literata.

Kann ich die Farben des hellen Schemas ändern?

Ja. Farben des Schemas hat neben der Palette für den Dunklen Modus auch eine für den Hellen Modus. Bei Automatisch stellst du beide ein.

Mein Hero-Bild ist hell und der Titel schwer lesbar. Was hilft?

Stell Text auf dem Bild auf Dunkel, oder behalte hellen Text und wähl Stark bei Schatten über dem Bild. Mit Bildausschnitt schiebst du den ruhigen Teil des Bildes hinter den Text.

Kann ich „War diese Anleitung hilfreich?“ oder „Auf dieser Seite“ ausblenden?

Ja. Schalte sie unter Einstellungen > Artikelseiten aus. Das gilt für jeden Artikel des Hilfecenters.

Zeigt mein Hilfecenter jemals das Favicon von Deskwoot?

Nein. Ohne eigenes Favicon zeigt der Browser-Tab den ersten Buchstaben deines Portalnamens auf deiner Markenfarbe.

Soll ich die Einstellungen oder Custom CSS nutzen?

Zuerst die Einstellungen: Sie brauchen keinen Code und funktionieren weiter, wenn sich das Hilfecenter ändert. Custom CSS nur für das, was die Einstellungen nicht bieten.

Kann ich die Navigation meiner Website ins Hilfecenter übernehmen?

Ja, im Enterprise-Plan mit aktiver eigener Domain, als HTML des eigenen Headers. Ohne das setzen die Header-Links im Tab Einstellungen Links zu deiner Website in den normalen Header.

Kann ich eine Änderung am Design rückgängig machen?

Änderungen an Markenfarbe, Seitentitel, Untertitel, Header-Links, Custom CSS, den Abschnitten der Startseite und ihren Überschriften, an Text, Schatten und Ausschnitt des Hero-Bildes, an Ecken, Kopfzeile, Symbolen der Sammlungen und Teilen der Artikelseiten holst du über den Verlauf im Tab Design zurück. Schriften, Farbschema, Farben des Schemas, Favicon, Bilder und eigenes Header- oder Footer-HTML nicht.