Designs erstellen

Du kannst das Design der Plattform an Dein Unternehmensbranding und -richtlinien anpassen, um einen einzigartigen und einladenden Raum für Deine Nutzer zu schaffen. Du kannst auch mehrere Designs erstellen, um unterschiedliche Designs für verschiedene Zielgruppen zu konfigurieren oder saisonale Designs wie Ostern oder Halloween einzuführen.

Jede Plattform wird mit einem Standard-Design geliefert, das Nutzern angezeigt wird, die sich noch nicht registriert haben, z.B. auf der Anmeldeseite. Das Standarddesign wird auch für Deine E-Mail-Benachrichtigungen verwendet. Dieses Design kann bearbeitet, aber nicht gelöscht werden.

Ein Design erstellen

Du benötigst die Berechtigung "Verwaltung der Designs", um Designs zu verwalten.

  1. Gehe zu Administration > Designs
  2. Um ein neues Design zu erstellen, wähle Design hinzufügen
  3. Gib einen Namen für Dein Design ein. Zum Beispiel "Haiilo Basic" für ein Standarddesign oder "Ostern" für ein saisonales Design.
  4. Aktiviere das Design.
  5. Wähle die Nutzer und Gruppen aus, denen das Design zugewiesen ist. Wir empfehlen, das Design zuerst Dir selbst zuzuweisen, damit Du das Design vor der Veröffentlichung für Nutzer vorab anzeigen kannst.
  6. Definiere Farben, Logos und füge optional benutzerdefiniertes CSS hinzu.
  7. Wähle Speichern, um das Design zu erstellen

Wenn einem Nutzer mehrere Designs zugewiesen sind, wird die Liste der Designs von oben gelesen, und das erste Design in der Liste, dem der Nutzer zugewiesen ist, wird für ihn angezeigt. Du kannst Designs durch Ziehen und Ablegen neu anordnen.

Farben anpassen

Du kannst die Farbelemente auf Deiner Plattform in hexadezimalen Werten (HEX) definieren (z.B. #FF0000).

  1. Hauptfarbe: Die Hauptfarbe definiert die Schriftfarbe in der Unternavigation für Startseiten. Sie definiert auch die Hintergrundfarbe für die Anmeldeseite.
  2. Unterer Rand der Navigation: Die Farbe eines Trennstrichs unter der Überschrift Administration in der Administration. Ebenso die Farbe eines Trennstrichs unter dem E-Mail-Header.
  3. Hintergrund der Navigation: Die Hauptfarbe der Navigationsleiste. Wenn Du hier eine hellere Farbe verwendest, solltest Du eine dunklere Schriftfarbe wählen. Ebenso die Farbe des E-Mail-Headers.
  4. Button Text: Die Textfarbe für feste Buttons in der Plattform und in E-Mails.
  5. Hintergrundfarbe: Die Hintergrundfarbe der Plattform und E-Mails.
  6. Linkfarbe: Die Farbe für Hyperlinks in der Plattform und in E-Mails.
  7. Verlaufsfarbe: Die Verlaufsfarbe definiert, in welche andere Farbe die Hintergrundfarbe auf der Anmeldeseite übergehen soll.
  8. Textfarbe der Navigation: Die Farbe von Text und Symbolen in der Navigationsleiste. Wir empfehlen, eine Farbe zu wählen, die im Kontrast zum Hintergrund der Navigationsleiste steht (z. B. ein weißer Hintergrund mit schwarzem Text oder ein dunkelblauer Hintergrund mit weißem Text).
  9. Navigation Aktiv: Die Farbe eines aktiven Menüpunkts in der Administration, d. h. wo sich der Nutzer gerade befindet. In der Navigationsleiste und anderen Elementen wird ein aktiver Punkt in einer leicht abgedunkelten Farbe des Hintergrunds des Elements angezeigt.
  10. Button Hintergrundfarbe: Die Hintergrundfarbe für feste Buttons in der Plattform und in E-Mails, z. B. Seiten erstellen, Speichern.
  11. Textfarbe: Die Farbe aller Texte in der Plattform und in E-Mails, mit Ausnahme von Elementen, bei denen die Textfarbe separat bearbeitet werden kann, z. B. im Rich-Text-Editor-Widget.

Farben Beispiele.png

Logos hochladen

Du kannst Deine Logo(s) hochladen, um sie auf der Plattform und im Browser anzuzeigen. Folgende Optionen stehen zur Verfügung:

  1. Frontlogo: Das Frontlogo wird auf dem Anmeldebildschirm angezeigt und sollte mindestens 80px hoch sein.
  2. Logo der Navigationsleiste: Das Logo der Navigationsleiste befindet sich immer oben links in der Navigation und sollte mindestens 100px hoch sein. Um die beste Bildqualität sicherzustellen, empfehlen wir das .svg-Dateiformat zu nutzen.
  3. Favicon: Das Favicon wird typischerweise in der Adressleiste des Browsers, im Browser-Tab, in Lesezeichen und links von der URL angezeigt. Das Bild sollte 16x16px groß sein und im .ico-Dateiformat vorliegen.
  4. iOS-Homescreen-Icon: Das iOS-Homescreen-Icon wird als Symbol angezeigt, wenn Du die URL Deiner Plattform zum Startbildschirm Deines iPhones hinzufügst/als Lesezeichen speicherst, und sollte mindestens 180x180px groß sein.

Logos Beispiele.png

Mit CSS anpassen

Du kannst benutzerdefinierte Anpassungen an Bereichen und Elementen auf der Plattform mit CSS vornehmen. Über CSS kannst Du beispielsweise die Schriftart ändern, zusätzliche Hintergrundfarben (oder -bilder) festlegen und vieles mehr. Für alle Designanpassungen empfehlen wir, einen Entwickler oder jemanden mit fundierten Kenntnissen in CSS um Hilfe zu bitten.

Bei benutzerdefinierten Anpassungen ist Vorsicht geboten, da sie die Funktionalitäten der Plattform beeinträchtigen können. Daher können wir die Verwendung von benutzerdefiniertem CSS in bestimmten Bereichen der Plattform möglicherweise nicht zulassen, um eine optimale Plattformfunktionalität sicherzustellen.

Wenn Du CSS-Änderungen vornimmst, die Probleme in Deiner Plattform verursachen, kann der Haiilo Service Desk diese nicht korrigieren.

War dieser Beitrag hilfreich?