Vorlage und Look wählen
Sieh dir Vorlagen an und lege Farben, Schriften, Layout und Logo deiner Website fest.
Für Team-Owner und Admins · 11 Schritte
Was du vorher brauchst
- Dein Team hat ein Website-Abo. Im Adminbereich eines kostenlosen Teams steht Website holen statt Vorlage.
- Du bist Inhaber oder Admin des Teams.
Schritte
Schritt 1: Vorlage öffnen
Tippe im Menü links auf Vorlage.
Du siehst: eine Seite mit dem Titel Vorlage und einer Karte pro Vorlage. Die Vorlage deiner Website ist mit Aktiv markiert. Hat deine Website noch keine Vorlage, zeigt jede Karte stattdessen Auswählen. Damit wählst du diese Vorlage mit ihrer ersten Palette, und Aussehen öffnet sich.
Schritt 2: Vorlage in der Vorschau ansehen
Tippe auf der Karte einer Vorlage auf Vorschau.
Du siehst: deine eigene Website in dieser Vorlage, unter einer Leiste mit Vorschau. Nur die Admins deines Teams können sie öffnen. Tippe auf Zurück zum Adminbereich, wenn du fertig bist.
Schritt 3: Aussehen öffnen
Tippe wieder auf der Seite Vorlage oben rechts auf Aussehen.
Du siehst: eine Seite mit dem Titel Aussehen. Auf einer Seite ist das Formular, daneben eine Live-Ansicht deiner Website (auf schmalen Bildschirmen darunter).
Schritt 4: Palette wählen
Wähle unter Palette eine der Voreinstellungen der Vorlage.
Du siehst: die Voreinstellung hervorgehoben und die Ansicht deiner Website in ihren Farben. Eine Voreinstellung setzt die fünf Farben und beide Schriften auf einmal.
Schritt 5: Farbe ändern
Gib unter Farben einen Farbcode wie
#7dd3fcin Hauptadresse, Akzent, Highlight, Hintergrund oder Text ein. Oder tippe auf das Quadrat daneben, um eine Farbe auszuwählen.Du siehst: Die Ansicht deiner Website ändert sich, und unter Palette ist Benutzerdefiniert hervorgehoben. Jede Farbe zeigt ihren Standard aus der Vorlage; Zurücksetzen stellt diese Farbe wieder her.
Schritt 6: Text und Flächen eigene Farben geben
Tippe unter Text und Flächen neben Überschriften, Bildunterschriften, Karten, Linien, Links und Labels, Button oder Buttontext auf Farbe wählen. Gib dann einen Farbcode ein oder tippe auf das Quadrat daneben. Jede Farbe startet auf Auto und folgt deinen fünf Farben so, wie es deine Vorlage tut; Auto verwenden stellt das wieder her.
Du siehst: Die Ansicht deiner Website ändert sich, und unter jeder Farbe für Text steht ein Wert wie 7,2:1 · gut lesbar. Er zeigt, wie deutlich sich die Farbe von deinem Hintergrund und deinen Karten abhebt. Unter 4,5:1 (3:1 bei Überschriften) steht dort schwer lesbar. Dann siehst du die Farbe, die Besucher stattdessen sehen, und Lesbar machen, das diese Farbe ins Feld setzt.
Schritt 7: Schriften wählen
Öffne unter Typografie Überschriftenschrift oder Fließtextschrift und wähle eine Schrift. Jede Schrift wird in sich selbst angezeigt und gehört zu einer Gruppe: Heavy Display, Condensed, Tech, Clean Sans, Serif, Handschrift, Monospace. Du kannst auch einen Namen eingeben, um sie zu finden.
Du siehst: die Ansicht deiner Website in dieser Schrift. Wenn du eine Schrift änderst, wird die Palette ebenfalls Benutzerdefiniert.
Schritt 8: Logo hinzufügen
Tippe unter Logo neben Schriftzug, Quadratisches Logo oder Favicon auf Bild auswählen (sobald eins gesetzt ist, steht dort Ersetzen). Wähle im Fenster Bild einfügen ein Bild oder lade eins hoch (JPEG, PNG, WebP oder AVIF, bis 5 MB) und tippe auf Einfügen. Ein Logo braucht keinen Alt-Text.
- Quadratisches Logo erscheint in der Navigation deiner Website, oben auf der Startseite und in deinem Kader.
- Schriftzug ist optional: der Name deines Teams als Bild, in beliebiger Form. Wenn du einen setzt, ersetzt er in der Navigation und oben auf der Startseite das quadratische Logo und den Namen.
- Favicon ist das kleine Symbol im Browser-Tab.
Deine Logos werden nie zugeschnitten oder verändert. Jedes Bild wird vollständig angezeigt, und ein transparenter Hintergrund bleibt transparent. Deshalb müssen das quadratische Logo und das Favicon quadratisch sein, mindestens 256 × 256 Pixel. Ein Bild mit anderer Form wird beim Speichern abgelehnt, mit einer Meldung, die seine Größe nennt. Ein Logo, das du vor dieser Regel gewählt hast, wird weiter angezeigt, bis du es änderst.
Du siehst: den Namen des Bilds neben dem Feld. Eine Voreinstellung ändert die Logos nie.
Schritt 9: Optionen der Vorlage festlegen
Wähle weiter unten unter Broadcast-Optionen Hero layout (Image behind the text oder Image beside the text) und Card edges (Cut corners oder Square corners). Andere Vorlagen zeigen hier ihre eigenen Optionen: Bei Neon Grid ist Motion entweder Full motion oder Calm (alles steht still), und Hero glow ist Bright (der obere Teil deiner Startseite geht von deiner Hintergrundfarbe in deinen Akzent über) oder Dunkel (in ein dunkles Grau aus deiner Hauptfarbe und deinem Akzent, für einen dunkleren Look); bei Crosshair ist Hero layout entweder Split (dein Text links, dein Bild rechts mit deinem nächsten Match darüber) oder Full-width image; bei Faceoff ist Hero alignment entweder Centered oder Left, und Home roster ist Scattered (die Karten deiner Spieler rund um ein großes „Meet the squad“) oder Grid; bei Clutch ist Hero layout entweder Bento (dein Hero neben einem Panel mit Latest news) oder Full width, und Corners ist Rounded oder Square; bei Varsity ist Hintergrund entweder Pinstripe (ein feiner diagonaler Streifen hinter jeder Seite) oder Schlicht, und Hero size ist Full (ein hohes Foto mit dem Menü darüber) oder Banner (ein niedrigeres); bei Redline ist Photo tint entweder Duotone (deine Fotos in deiner Hauptfarbe eingefärbt) oder Natural (ihre eigenen Farben), und Panels ist Offset (dunkle Blöcke hinter deinen Fotos und Abschnitten) oder Flat.
Du siehst: Die Ansicht deiner Website ändert ihr Layout.
Schritt 10: Speichern
Tippe unten im Formular auf Speichern.
Du siehst: „Aussehen gespeichert“. Besucher sehen es noch nicht. Gespeicherte Änderungen bleiben in deinem Entwurf, bis du veröffentlichst.
Schritt 11: Website veröffentlichen
Tippe im Menü links auf Veröffentlichen und veröffentliche, siehe Website veröffentlichen.
Du siehst: vor dem Veröffentlichen Aussehen in der Liste der Änderungen, danach deine Website im neuen Look.
So erkennst du, dass es geklappt hat
- Die Seite Vorlage markiert deine Vorlage als Aktiv.
- Nach dem Veröffentlichen zeigt deine Website deine Farben, Schriften und dein Logo, vollständig und nie zugeschnitten.
- Jede Farbe für Text zeigt gut lesbar, oder du hast den lesbaren Farbton akzeptiert, den Besucher stattdessen sehen.
Sieht etwas nicht richtig aus?
Ich habe meine Farben geändert, aber meine Website sieht gleich aus
Beim Speichern bleiben sie in deinem Entwurf. Tippe im Menü auf Veröffentlichen und veröffentliche (Schritt 11).
Eine Farbe zeigt „schwer lesbar“
Text in dieser Farbe hebt sich nicht genug von deinem Hintergrund oder deinen Karten ab, damit alle ihn lesen können. Normaler Text braucht 4,5:1, Überschriften 3:1. Deine Besucher sehen die schwer lesbare Farbe nie: Deine Website zeigt stattdessen den nächsten lesbaren Farbton, und das Formular nennt ihn. Tippe auf Lesbar machen, um diesen Farbton zu nutzen, oder wähle selbst eine Farbe, bis gut lesbar dasteht. Eine Farbe auf Auto wird ohne Nachfrage genauso angepasst. Beim Veröffentlichen erscheint auch eine Warnung, sie hält dich aber nie vom Veröffentlichen ab.
Meine Website ist überall in einer Farbe schwer lesbar
Gib jeder Textart unter Text und Flächen (Schritt 6) ihre eigene Farbe: zum Beispiel rote Überschriften, hellgrauen Text für Absätze und eine etwas hellere Farbe für Karten, damit sich Panels von der Seite abheben. Wie du ganze Teile einer Seite anders einfärbst, etwa einen hellen Shop auf einer dunklen Website oder ein Band in deiner Akzentfarbe, steht in Teilen deiner Website eigene Farben geben.
Löscht ein Vorlagenwechsel meine Inhalte?
Nein. Deine Inhalte gehören zu deiner Website, nicht zur Vorlage: Deine Farben und Schriften werden übernommen, wo die neue Vorlage sie nutzt, ihre eigenen Optionen gehen auf ihre Standards zurück, und ein Abschnitt, den sie nicht anzeigen kann, wird ausgeblendet, nicht gelöscht. Das Fenster, das sich vor einem Wechsel öffnet, nennt alle drei Punkte, und du kannst abbrechen. Hat deine Website noch die Standardfarben und -schriften der Plattform (du hast nie eine Palette gewählt oder eine Farbe geändert), wird stattdessen die erste Palette der neuen Vorlage verwendet, damit deine Website wie das Bild der Vorlage aussieht. Das Fenster zeigt das unter Farben und Schriften. Es gibt sieben Vorlagen: Broadcast, ein Matchday-Look; Neon Grid, ein schwarzer Neon-Look mit animiertem Gitter und leuchtendem Verlauf hinter dem Hero, deinem schwebenden Logo darüber, Kennzahlen und einer Videowand; Crosshair, ein schwarzer, technischer Look mit gerahmten Panels, Klammer-Labels, großem Schriftzug im Footer und Fotos im Mittelpunkt; Faceoff, ein blauschwarzer und eisblauer Look, bei dem dein Logo auf jeder Matchkarte dem deines Gegners gegenübersteht, mit großem Hero und deinem Squad rund um eine riesige Überschrift; Clutch, ein heller Look mit weißen, abgerundeten Karten, breiten Überschriften in Großbuchstaben und einer kräftigen Farbe, mit deinem nächsten Match im Hero und auf breiten Bildschirmen oben auf jeder Seite; Varsity, ein Campus-Look mit dunkelblauen Bändern, einem Gold, deinen besten Turnierplatzierungen über deinem Kader und deinen Matches als Spielplantabelle; und Redline, ein Rot auf fast Schwarz, mit Fotos in deiner Hauptfarbe getönt (standardmäßig Rot), eckigen Buttons und deinen Matches als Fotozeilen mit beiden Logos um ein VS. Die Überschriften von Clutch sind in Archivo Expanded. Diese Schrift kannst du in jeder Vorlage unter Heavy Display wählen. Auf Computer oder Tablet erscheint der Button Join our Discord von Faceoff oben auf jeder Seite nur, wenn du deinen Discord-Link unter Social Media hinzugefügt hast (Social Media hinzufügen). Jede Vorlage zeigt deinen Livestream gleich: am Tag einen Countdown, während du live bist den Twitch-Player oben auf deiner Startseite und auf jeder anderen Seite eine Live-Leiste (Stream planen).
Ich sehe „Diese Website wurde geändert, seit du sie geöffnet hast“
Ein anderer Admin hat zuerst gespeichert, und von deinen Änderungen wurde nichts gespeichert. Tippe auf Neu laden und nimm deine Änderung noch einmal vor.
Ich sehe „Dieses Logo ist … Lade ein quadratisches Bild hoch“
Das quadratische Logo und das Favicon müssen quadratisch sein (gleich breit wie hoch) und mindestens 256 × 256 Pixel groß, weil wir sie nie zuschneiden. Die Meldung nennt die Größe deines Bilds. Erstelle eine quadratische Version (füge um ein breites Logo leeren, transparenten Rand hinzu), lade sie hoch und speichere noch einmal. Ein Logo, das nicht quadratisch ist, gehört in Schriftzug.
Ich sehe „Für dieses Logo ist keine Größe gespeichert“
Wir kennen die Größe dieses Bilds nicht und können daher nicht prüfen, ob es quadratisch ist. Lade es noch einmal hoch, wähle die neue Kopie und speichere.
Die Felder und Speichern sind ausgegraut
Das Abo deines Teams ist abgelaufen. Deshalb sind die Seiten seiner Website schreibgeschützt, bis es wieder aktiv ist. Verlängere es, siehe Abrechnung verwalten.
Ähnliche Artikel
Kommst du nicht weiter? Kontaktiere den Support oder schreib an support@spawnfront.com – nenn uns die Seite, auf der du bist, und die Schrittnummer.