Erstellen eines Banners, das oben auf Ihrer Webseite angezeigt wird

[Discourse]

Dieser Leitfaden erklärt verschiedene Methoden zum Erstellen und Anpassen von Bannern auf Ihrer Discourse-Website, von einfachen ausblendbaren Bannern bis hin zu fortgeschritteneren Optionen.

Erforderliches Benutzerniveau: Moderator (ausblendbares Banner), Administrator

Banner sind eine effektive Möglichkeit, wichtige Informationen an Ihre Website-Besucher zu kommunizieren. Dieser Leitfaden führt Sie durch verschiedene Methoden zum Erstellen und Anpassen von Bannern auf Ihrer Discourse-Website.

Willkommensbanner

Ein Willkommensbanner begrüßt neue und wiederkehrende Mitglieder mit einer freundlichen Nachricht und einer prominenten Suchleiste, sodass Besucher leicht Inhalte finden können, nach denen sie suchen.

So aktivieren Sie das Willkommensbanner:

1. Klicken Sie im Admin-Bereich in der Seitenleiste auf den Link Darstellung > Themes & Komponenten.
2. Suchen Sie Ihr aktives Theme und klicken Sie auf Bearbeiten.
3. Suchen Sie die Einstellung Enable welcome banner (Willkommensbanner aktivieren) und stellen Sie sicher, dass sie aktiviert ist.

Dies aktiviert das Willkommensbanner für dieses Theme. Wenn Sie mehrere vom Benutzer auswählbare Themes anbieten, müssen Sie diesen Vorgang für jedes Theme wiederholen.

Anpassen des Willkommensbanners

Sie können das Willkommensbanner anpassen, um sein Erscheinungsbild in Ihrer Community zu ändern. Im Admin-Bereich können Sie unter Alle Website-Einstellungen nach “welcome banner” suchen, um die folgenden Anpassungsoptionen zu finden:

• Welcome banner location (Position des Willkommensbanners): Hier wird festgelegt, wo das Willkommensbanner auf der Seite angezeigt wird. Standardmäßig wird es unter “Above topic content” (Über dem Thema-Inhalt) angezeigt, aber Sie können auch “Below site header” (Unter dem Website-Header) auswählen. Der Unterschied ist geringfügig und in den folgenden Screenshots dargestellt:

  

  
  

  

• Welcome banner page visibility (Sichtbarkeit der Willkommensbanner-Seite): Hier wird festgelegt, auf welchen Seiten das Willkommensbanner angezeigt wird. Standardmäßig wird es auf “Top menu pages” (Seiten des oberen Menüs) angezeigt (d. h. die Seiten, die in der Einstellung Top menu ausgewählt sind), aber Sie können dies ändern zu:

  • “Homepage”: Das Willkommensbanner wird nur auf der Homepage der Website angezeigt (d. h. auf der ersten Seite, die in der Einstellung Top menu aufgeführt ist).
  • “Discovery”: Das Willkommensbanner wird auf allen Seiten des oberen Menüs angezeigt, auch wenn sie nicht im eigentlichen oberen Menü Ihrer Website aufgeführt sind (d. h. nicht in der Einstellung ausgewählt sind).
  • “All pages” (Alle Seiten): Das Willkommensbanner wird auf allen Seiten Ihrer Website angezeigt. Dies wird im Allgemeinen nicht empfohlen, da es auf Thema-Seiten zu visueller Unordnung führen kann, die Mitglieder vom Lesen und Teilnehmen ablenkt.

• Welcome banner image (Bild des Willkommensbanners): Laden Sie ein Bild hoch, das als Hintergrund für Ihr Willkommensbanner dient.

Sie können auch den Text des Willkommensbanners anpassen, um die Begrüßung zu ändern und weitere erklärende Texte zum Willkommensbanner hinzuzufügen. So passen Sie den Bannertext an:

1. Klicken Sie im Admin-Bereich in der Seitenleiste auf den Link Darstellung > Website-Texte.

2. Suchen Sie nach der Textzeichenfolge, die Sie anpassen möchten:

   • js.welcome_banner.header.logged_in_members — Die Hauptbegrüßung für angemeldete Mitglieder im Willkommensbanner.
   • js.welcome_banner.header.anonymous_members — Die Hauptbegrüßung für anonyme (d. h. nicht angemeldete) Mitglieder im Willkommensbanner.
   • js.welcome_banner.subheader.logged_in_members — Eine optionale zweite Textzeile für angemeldete Mitglieder im Willkommensbanner, unterhalb der Kopfzeile.
   • js.welcome_banner.subheader.anonymous_members — Eine optionale zweite Textzeile für anonyme (d. h. nicht angemeldete) Mitglieder im Willkommensbanner, unterhalb der Kopfzeile.
   • js.welcome_banner.search_placeholder — Der Platzhaltertext im Suchfeld des Willkommensbanners.

3. Klicken Sie auf die Schaltfläche Bearbeiten.

4. Aktualisieren Sie den Text nach Wunsch.

5. Klicken Sie auf Änderungen speichern.

Ausblendbares Banner

Ein ausblendbares Banner ist eine temporäre Benachrichtigung, die Benutzer schließen können. Hier erfahren Sie, wie Sie eines erstellen:

1. Erstellen Sie ein Thema oder navigieren Sie zu einem Thema in einer beliebigen Kategorie (öffentlich oder privat). Der ursprüngliche Beitrag (OP) am Anfang des Themas ist die Quelle Ihres Banners.
2. Öffnen Sie die Admin-Optionen, indem Sie auf das Schraubenschlüssel-Symbol rechts oder unten im Thema klicken.
3. Wählen Sie “Thema anheften…”
4. Wählen Sie im neuen Fenster Thema als Banner festlegen

Das Banner wird nun am oberen Rand Ihrer Website angezeigt. Benutzer sehen ein ausblendbares Banner. Mitarbeiter sehen auch einen Link zum Bearbeiten des Quellthemas.

Tipps für effektive ausblendbare Banner:

• Halten Sie den Text klar und prägnant.
• Die maximale Höhe beträgt 250px (über CSS editierbar).
• Bei längerem Text können Benutzer innerhalb des Banners scrollen.
• Erwägen Sie das Hinzufügen eines Links zu einem relevanten, öffentlichen Thema für weitere Informationen.

Permanentes Banner

Um ein Banner zu erstellen, das immer sichtbar ist und von Benutzern nicht ausgeblendet werden kann:

1. Suchen Sie in Ihren Website-Einstellungen nach global_notice.
2. Geben Sie Ihren Bannertext oder HTML in dieses Feld ein.

Tipps für permanente Banner:

• Diese Art von Banner wird typischerweise für dringende Website-Mitteilungen verwendet, kann aber für jede permanente Nachricht verwendet werden.
• Dieses Banner ist für alle sichtbar, einschließlich anonymer Benutzer auf Websites mit login_required.
• Das Banner kann durch Zurücksetzen der Website-Einstellung global notice entfernt werden.

Fortgeschrittene Banner

Sie können fortgeschrittenere Banner erstellen, indem Sie eine Theme-Komponente verwenden. Beachten Sie, dass diese Theme-Komponenten mit der Kernfunktion des Willkommensbanners in Konflikt geraten können.

Welcome Link Banner

Diese Komponente ermöglicht es Ihnen, benutzerdefinierten Text und 1-4 Links zu Ihrem Banner hinzuzufügen. Sie bietet verschiedene Anpassungsoptionen, darunter:

• Auswahl, wo das Banner angezeigt werden soll (Homepage, Themenlisten oder alle Seiten).
• Hinzufügen von Links mit Font Awesome-Icons.
• Begrenzung der Sichtbarkeit basierend auf Benutzer-Vertrauensstufen.
• Anpassen von Hintergrundbildern oder -farben.
• Anpassen von Text- und Icon-Farben.

Versatile Banner

Eine der beliebtesten und am besten gepflegten Komponenten, der Versatile Banner, bietet über die Benutzeroberfläche umfangreiche Anpassungsoptionen, darunter:

• Banneranzeige beschränkt auf
  • angemeldete oder anonyme Benutzer
  • Mobil- oder Desktop-Gerät
  • Homepage, Themenliste oder alle Seiten
• Ausblendbare, erweiterbare oder dauerhafte Optionen
• Einstellung für volle Browserbreite
• Farbverwaltung
• Anpassung von Überschriften und Spalten mit HTML

Banner mit CSS anpassen

Sie können alle Bannertypen mit CSS anpassen. Weitere Informationen zur Verwendung von CSS zur Anpassung Ihrer Discourse-Website finden Sie im Leitfaden für Anfänger zur Verwendung von Discourse-Themes.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Darstellung > Themen & Komponenten Link in der Seitenleiste.

Ich konnte diese Option nicht finden… Ist das eine neue Funktion in der Beta-Version?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

Ich konnte diese Option nicht finden… Ist das eine neue Funktion in der Beta-Version?

Update: Nach dem Update von 3.4.6 auf 3.5.0 war sie sichtbar:

[RBoy]

@Discourse

js.welcome_banner.search — Der Platzhaltertext, der im Suchfeld des Willkommensbanners angezeigt wird.

Es gibt einen Fehler im Build 3.6.0.beta1-dev (e44347414a)

Das Ändern dieses Website-Texts hat keine Auswirkung auf den Text in der Suchleiste, dort steht immer noch Search. Getestet unter Windows 10 x64 mit Chrome

[awesomerobot (Kris)]

Arbeite hier an einer Lösung: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

Großartig, danke – das hat es behoben!

[tknospdr (David Muszynski)]

Ich habe ein Problem mit meinem Hintergrundbild für das Willkommensbanner.
Ich verwende Cloudflare R2 S3-Buckets für die Objektspeicherung auf der betreffenden Website.
Wenn ich im Admin-Bereich ein Hintergrundbild hochlade, wird es korrekt angezeigt. Wenn ich darauf klicke, um es in voller Größe anzuzeigen, funktioniert es. Und wenn ich mit der rechten Maustaste darauf klicke und das Bild in einem neuen Tab anzeigen lasse, funktioniert es und verwendet die öffentliche Bucket-URL:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Was es jedoch in das CSS einfügt, ist diese URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Ich habe eine andere Website, die lokalen Speicher verwendet und das Banner-Hintergrundbild funktioniert korrekt.

Ist das ein Fehler im Code oder mache ich etwas falsch?

Nachdem ich mich weiter umgesehen habe, scheint dieses CSS das Hintergrundbild zu steuern:

Wenn ich die URL im Inspektor manuell ersetze, funktioniert es.
Ich habe versucht, dies zu überschreiben mit:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

Aber das funktioniert nicht. Es fühlt sich trotzdem wie ein Fehler an.

[yuriy (Yuriy Kurant)]

@tknospdr, ich verstehe nicht ganz, welches Problem du hast?

Ich habe deine Website https://eu.technospider.com überprüft und sehe, dass das Hintergrundbild wie erwartet gerendert wird:

[tknospdr (David Muszynski)]

Ich glaube, ich habe den CSS-Override endlich zum Laufen gebracht. Das Problem ist, dass er keinen Override benötigen sollte.

Es scheint, dass der Banner-Code das falsche Asset verwendet, wenn Sie mit Cloudflare S3 hosten.

[yuriy (Yuriy Kurant)]

Was genau ist Ihr Override?

Auf unserer Seite könnten wir sicherstellen, dass wir nur einen URL-Pfadnamen /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS anwenden:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Ich glaube, diese Regel würde für Sie funktionieren, ohne dass Sie Overrides benötigen?

[tknospdr (David Muszynski)]

@yuriy

Welche genau ist Ihre Überschreibung?

Meine gesamte Überschreibung ist:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

Auf unserer Seite könnten wir sicherstellen, dass wir nur einen URL-Pfadnamen /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS anwenden:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Ich glaube, diese Regel würde für Sie funktionieren, ohne dass Sie eine Überschreibung benötigen?

In der Benutzeroberfläche kann ich nur ein Bild hochladen, daher glaube ich, dass eine Codeänderung erforderlich ist, um meine CSS-Überschreibung zu entfernen.
Ich würde gerne alle Korrekturen ausprobieren, die Sie implementieren möchten.