Passen Sie Ihr Website-Branding an

:bookmark: Dies ist ein nicht-technisches Tutorial, das Sie durch die Anpassung des Brandings und des Erscheinungsbilds Ihrer Discourse-Seite führt.
:
:person_raising_hand: Erforderliches Benutzerniveau: Administrator

Möchten Sie das Branding Ihrer Seite anpassen, wissen aber nicht, wo Sie anfangen sollen? Lesen Sie weiter, um es herauszufinden!

Der Setup-Assistent

Discourse ist sehr anpassbar! Ein guter Ausgangspunkt für Site-Anpassungen ist die Anmeldung mit Ihrem Admin-Konto auf der Seite und die Ausführung des Setup-Assistenten der Seite. :mage:

Der Setup-Assistent ermöglicht es Ihnen, den Titel Ihrer Seite, das Standard-Locale und die Zugriffseinstellungen (öffentlich vs. privat, Registrierung vs. nur auf Einladung und ob Benutzer genehmigt werden müssen) zu konfigurieren. Dies sind die wesentlichen ersten Schritte, um Ihre Seite zum Laufen zu bringen.

Sobald der Assistent abgeschlossen ist, können Sie das Erscheinungsbild Ihrer Seite weiter anpassen – Logos, Farben, Schriftarten und mehr – über das Admin-Panel.

Sie können die verfügbaren Optionen direkt auf dieser Seite in der Vorschau anzeigen. Klicken Sie auf die Schaltfläche „Weiter“, wenn Sie die Einstellungen gefunden haben, die für Sie passen. Keine Sorge, Sie können diese Einstellungen jederzeit ändern, wenn Sie feststellen, dass sie nicht das sind, wonach Sie suchen.

Seitenthemen

Sobald Sie eine grundlegende Konfiguration vorgenommen haben, ist es Zeit, Ihre Seite noch weiter anzupassen! :sparkles:

Themen sind umfassende Anpassungen, die mehrere Elemente des Stils Ihres Forendesigns ändern und oft auch zusätzliche Front-End-Funktionen beinhalten. Themen haben die Fähigkeit, das Aussehen und das Layout Ihres Forums erheblich zu verändern.

Die Kategorie #theme auf Meta beherbergt eine Vielzahl von vorerstellten Themen, die Sie auf Ihrer Seite verwenden können, um das Erscheinungsbild Ihrer Seite anzupassen. Dies ist der beste Ort, um nach einem Thema für Ihre Seite zu suchen. Suchen Sie sich ein Thema aus dieser Kategorie aus, das Sie für Ihre Seite verwenden möchten.

Sobald Sie sich für ein Thema für Ihre Seite entschieden haben, können Sie das Thema zu Ihrer Seite über die Seite Admin -> Anpassen -> Themen hinzufügen (unter /admin/config/customize/themes). Von dieser Seite aus können Sie auch Änderungen am Thema Ihrer Seite vornehmen oder sogar ein komplett neues Thema erstellen.

Das Anfängerhandbuch zur Verwendung von Discourse-Themen ist ein Crashkurs in die Grundlagen der Discourse-Themen und bietet einen Überblick darüber, wie Themen auf Ihrer Discourse-Seite installiert werden. Lesen Sie diesen Leitfaden für Anweisungen zur Installation des von Ihnen gewählten Themas.

:tipping_hand_woman: Weitere Informationen zur Verwendung, Erstellung und Weitergabe Ihrer eigenen Themen finden Sie auch in:

Farbpaletten

Sie können Ihre Seite weiter anpassen, indem Sie deren Farbpalette auf der Seite Admin -> Konfiguration -> Farben anpassen (unter /admin/config/colors). :art:

Von hier aus können Sie eine neue Farbpalette erstellen, eine vorhandene Palette zur Anpassung auswählen und Paletten als Standardschema für helle oder dunkle Modi für Ihr Thema zuweisen.

Wählen Sie ein vorhandenes Farbschema aus, auf dem Ihr neues Farbschema basieren soll, und passen Sie dann die Farben Ihres neuen Schemas an, indem Sie auf die Farbe neben jedem Farbabschnitt klicken:

Vergessen Sie nicht, Ihrem neuen Farbschema einen Namen zu geben und Ihre Änderungen zu speichern, wenn Sie fertig sind!

:tipping_hand_woman: Brauchen Sie Hilfe bei der Auswahl von Farben? Ein Farbauswahl-Tool wie Paletton - The Color Scheme Designer kann dabei sehr hilfreich sein!

Weitere Informationen zur Verwendung von Farbpaletten in Discourse finden Sie unter:

Themenkomponenten

Ähnlich wie bei Themen gibt es bei Discourse auch „Themenkomponenten“, mit denen Sie oberflächliche Elemente Ihres Forendesigns ändern oder zusätzliche Front-End-Funktionen hinzufügen können. Sie sind kleiner und gezielter als vollständige Themen und können im Allgemeinen (wenn auch nicht immer) mit anderen Themenkomponenten kombiniert werden, um ein maßgeschneidertes Forendesign für Ihre Community zu erstellen. :gear:

Die Kategorie #theme-component auf Meta enthält alle offiziellen und nicht-offiziellen Themenkomponenten von Discourse. Sehen Sie sich die dort aufgelisteten Themenkomponenten an, und wenn Sie eine davon auf Ihrer Seite installieren möchten, folgen Sie einfach den Anweisungen hier: Die Discourse-Themenoberfläche und wie man Themenkomponenten installiert

Einige der beliebtesten Discourse-Themenkomponenten umfassen:

:tipping_hand_woman: Discourse verfügt auch über einen integrierten Umschalter für den Dunkel-/Hellmodus, der durch die Site-Einstellung interface_color_selector gesteuert wird. Dieser kann so eingestellt werden, dass der Umschalter in der Fußzeile der Seitenleiste oder in der Kopfzeile angezeigt wird.

:tipping_hand_woman: Das Tag theme-guides auf Meta enthält auch viele How-to-Anleitungen mit Ideen zur weiteren Anpassung Ihrer Seite mit Themenkomponenten.

Seitenspezifisches Branding

Discourse verfügt über eine spezielle Seite zur Logo-Konfiguration unter Admin -> Konfiguration -> Logo (unter /admin/config/logo), auf der Sie alle Logos und Symbole Ihrer Seite verwalten können.

  • Primäres Logo - Wird in der oberen Navigation der Seite sowie oben in den E-Mail-Benachrichtigungen der Seite angezeigt. Empfohlene Größe ist 600 × 80 Pixel.
  • Primäres Logo Dunkel - Alternative für das primäre Logo im Dunkelmodus. Empfohlene Größe ist 600 × 80 Pixel.
  • Quadratisches Symbol - Eine quadratische Version des Logo-Bildes, die oben auf der Seite angezeigt wird und auch das Logo der mobilen App ist. Empfohlene Größe ist 512 × 512 Pixel.
  • Favicon - Das Logo wird als Symbol im Browser-Tab und in den Browser-Favoriten/Lesezeichen angezeigt.
  • Kleines Logo - Das kleine Logo-Bild oben links auf Ihrer Seite, das beim Scrollen nach unten sichtbar ist. Wenn leer gelassen, wird ein Haussymbol angezeigt. Empfohlene Größe ist 120 × 120 Pixel.
  • Kleines Logo Dunkel - Alternative für das kleine Logo im Dunkelmodus. Empfohlene Größe ist 120 × 120 Pixel.

Unter der Überschrift Mobil:

  • Mobiles Logo - Das Logo, das auf der mobilen Version Ihrer Seite verwendet wird. Wenn leer gelassen, wird das Bild aus der Einstellung logo verwendet. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis von größer als 3:1.
  • Mobiles Logo Dunkel - Alternative für das mobile Logo im Dunkelmodus. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis von größer als 3:1.
  • Manifest-Symbol - Das Bild, das als Logo/Startbildschirm auf Android verwendet wird. Wenn leer gelassen, wird large_icon verwendet. Empfohlene Größe ist 512 × 512 Pixel.
  • Manifest-Screenshots - Screenshots, die die Funktionen und die Funktionsweise Ihrer Instanz auf ihrer Installationsaufforderungsseite zeigen (wird bei Verwendung von „Zum Startbildschirm hinzufügen“ auf Android angezeigt). Alle Bilder sollten lokale Uploads und mit denselben Abmessungen sein.
  • Apple Touch Icon - Das Symbol, das für Apple-Touch-Geräte verwendet wird. Wenn leer gelassen, wird large_icon verwendet. Empfohlene Größe ist 180 × 180 Pixel. Ein transparenter Hintergrund wird nicht empfohlen.

Unter der Überschrift E-Mail:

  • Digest-Logo - Das alternative Logo-Bild, das oben in der E-Mail-Zusammenfassung Ihrer Seite verwendet wird. Wenn leer gelassen, wird das Bild aus der Einstellung logo verwendet. Verwenden Sie ein breites rechteckiges Bild. Verwenden Sie kein SVG-Bild.

Unter der Überschrift Soziale Medien:

  • OpenGraph-Bild - Standard-opengraph-Bild, das von vielen Apps und Plattformen für Weblink-Vorschauen verwendet wird, wenn eine Seite kein anderes geeignetes Bild hat. Wenn leer gelassen, wird large_icon verwendet.
  • X-Zusammenfassung Großes Bild - X-Karte „Zusammenfassung großes Bild“. Wenn leer gelassen, wird die reguläre Kartenmetadaten unter Verwendung des OpenGraph_image generiert, solange dieses kein .svg ist. Empfohlene Größe ist mindestens 280 × 150 Pixel. Verwenden Sie kein SVG-Bild.

:tipping_hand_woman: Für beste Ergebnisse empfehlen wir, die oben aufgeführten Größenrichtlinien für jeden Logo- und Symboltyp zu befolgen.

Zusätzliche Anpassungen

Nachdem Sie ein benutzerdefiniertes Thema, eine Farbpalette, einige Markenlogos und vielleicht ein paar Themenkomponenten zu Ihrer Seite hinzugefügt haben, sind Sie mit allen grundlegenden Site-Anpassungen fertig! :tada:

Wenn Sie immer noch nach weiteren Möglichkeiten suchen, Ihre Discourse-Seite anzupassen, empfehlen wir Ihnen, die folgenden Themen durchzulesen, die Sie interessieren könnten:

8 „Gefällt mir“

Was bewirkt Manifest-Screenshots eigentlich? Wo werden diese Screenshots verwendet? Ist es, wenn jemand Ihre Community als lokale App über seinen Browser installiert? Sind es die Bilder, die angezeigt werden, wenn Sie Ihre Community mit Discourse Discover auffindbar machen?

Ich sehe diese Screenshots, wenn ich die Option „Zum Startbildschirm hinzufügen“ in Chrome auf meinem Android-Gerät verwende

2 „Gefällt mir“

Interessant! Ich dachte, das tun sie, aber ich habe sie nicht gesehen, als ich sie auf meinem Desktop (Chrome, Windows) installiert habe. Aber vielleicht habe ich ihnen nicht genug Zeit gegeben, um irgendwo zu laden/sich zu verbreiten.

Ich bin froh zu wissen, dass ich mit dem, was sie tun, richtig lag!

1 „Gefällt mir“

Es sieht so aus, als wäre dieser Abschnitt versehentlich weggelassen worden.

1 „Gefällt mir“

Nachdem ich es zweimal gelesen hatte, glaube ich, dass ich es verstanden habe. Die Größenrichtlinien sind oben enthalten. Zum Beispiel:

Ich denke, dass dieser Leitfaden im Allgemeinen ziemlich veraltet ist. Sie können kein Logo mehr hinzufügen oder das Aussehen und Gefühl im Assistenten konfigurieren. Die Admin-Seite für Themen sieht jetzt völlig anders aus, und Farbschemata wurden in Farbpaletten umbenannt.
Die Theme-Komponente für den Umschalter für den Dunkel-/Hellmodus wurde in den Kern verschoben. Und Branding hat eine neue Konfigurationsseite unter /admin/config/logo.
Ich frage mich nur, warum die auf der Konfigurationsseite angegebene Größe von der Beschreibung abweicht, wenn ich die Website-Einstellung betrachte.


600×80 unterscheidet sich von min. 360×120.

2 „Gefällt mir“

Dieses Thema ist nun etwas veraltet, da diese Dinge kürzlich überarbeitet wurden.

Hier sind meine Gedanken zu einigen kleineren (aber wertvollen) Verbesserungsvorschlägen:

3 „Gefällt mir“