Website-Farben und -Stile festlegen

Um die Farben und Stile für die Website festzulegen, gehen Sie zu den „Website-Einstellungen“ und klicken Sie auf die Registerkarte „Farben und Stile“.

Um eine Farbe für alle Überschriften, Texte, Links oder den Seitenhintergrund der gesamten Website festzulegen, klicken Sie auf das gewünschte Feld und wählen Sie manuell eine Farbe in einem der drei Formate aus oder geben Sie einen Farbcode direkt ein.

Um den Stil aller Links auf der Website zu ändern, klicken Sie auf den Link „Zusätzliche Einstellungen“. Legen Sie in den Einstellungen die Breite und Farbe der Unterstreichung sowie den Stil der Links beim Darüberfahren mit der Maus fest.

Um eine eigene Stilbibliothek für das Projekt zu erstellen, klicken Sie auf die Schaltfläche „Stile verwalten”.

Im Stil-Verwaltungsfenster können Sie Farbe, Schriftart und eine Schaltfläche hinzufügen. Sie können die erstellten Stile auch herunterladen und in ein anderes Ihrer Projekte importieren.

Um dem Projekt einen neuen Stil hinzuzufügen, klicken Sie auf „Stile verwalten” und wählen Sie eine der Optionen aus: Farbstil erstellen, Typografie-Stil erstellen oder Schaltflächenstil erstellen.

Wenn Sie bereits über Stile verfügen und einen weiteren hinzufügen möchten, klicken Sie auf das Plus-Symbol neben den Optionen „Farbe“, „Typografie“ oder „Schaltfläche“, um einen neuen Stil hinzuzufügen. Der neue Stil wird neben dem vorherigen angezeigt.

Um einen Stil zu bearbeiten, klicken Sie darauf.

Farbe. Geben Sie beim Erstellen eines Farbstils einen Namen und eine Beschreibung an, die dann in den Projektstilen angezeigt werden.

Typografie. Beim Erstellen eines Typografie-Stils stehen Farbeinstellungen für Text, Schriftgröße für verschiedene Bildschirmauflösungen, Schriftart, Schriftstärke und andere Schriftarteneinstellungen zur Verfügung.

Oben im Typografie-Stil-Editor kann eine Schriftart in der Vorschau angezeigt werden. Um zu sehen, wie die Schriftart auf einem Mobilgerät angezeigt wird, wählen Sie den gewünschten Bereich im Einstellungsfeld für Haltepunkte aus.

Um Haltepunkte zu bearbeiten, klicken Sie auf das Zahnrad-Symbol. Daraufhin öffnet sich ein Menü mit den Standardgeräten.

Button. Beim Erstellen eines Button-Stils können Sie zusätzlich die Anzeige eines Symbols oder die Textumfließung auswählen. Sie können auch Typografieeinstellungen, den Stil beim Hovern und andere Grundeinstellungen festlegen.

Der Button-Stil kann auch auf verschiedenen Geräten in der Vorschau angezeigt werden, und Breakpoints können bearbeitet werden.

Farbe. Um den erstellten Farbstil zu verwenden, klicken Sie auf ein beliebiges Element, für das Sie eine Farbe festlegen möchten, und wählen Sie im Editor „Projektstile“ aus.

Wählen Sie den gewünschten Stil aus, und er wird automatisch auf den Block angewendet. Das Feld mit der angegebenen Farbe zeigt den Namen Ihres Stils sowie ein Symbol an, das darauf hinweist, dass der Farbstil des Projekts auf das Feld angewendet wurde.

Typografie. Um den erstellten Typografie-Stil zu verwenden, wählen Sie in den Blockeinstellungen die Registerkarte „Typografie“ und klicken Sie auf „Stile“.

Klicken Sie im Kontextmenü auf den gewünschten Stil, der dann automatisch auf den Block angewendet wird. Um zu den Stileinstellungen zu gelangen, klicken Sie auf „Zur Stilbibliothek gehen“.

Nach dem Anwenden von Stilen für die Typografie werden in den Einstellungen nur die Optionen angezeigt, die für diesen Stil nicht festgelegt wurden. Nach dem Bearbeiten dieser Optionen werden die Änderungen nur auf den aktuellen Block angewendet und haben keinen Einfluss auf den im Projekt festgelegten Typografie-Stil.

Button. Um den erstellten Button-Stil zu verwenden, wählen Sie in den Blockeinstellungen die Registerkarte „Button“ und klicken Sie neben den Voreinstellungen auf „Stile“.

Klicken Sie im Kontextmenü auf den gewünschten Stil, der dann automatisch angewendet wird.

Wie zuvor werden in den Einstellungen für die Schaltfläche nur die Einstellungen angezeigt, die nicht im Stil selbst festgelegt wurden. Sie können diese bearbeiten oder unverändert lassen.

Um dem Button ein Symbol hinzuzufügen, gehen Sie zum „Inhalt” des Blocks.

Neben der Schaltfläche erscheint ein Feld für das Symbol. Klicken Sie darauf, um ein Symbol hinzuzufügen. Es öffnet sich ein Menü mit verschiedenen Symboloptionen: Pfeile, Emojis, Tilda , The Noun Project und die Option, eigene Symboldateien hochzuladen.

Um die Symbolanzeige beim Bewegen des Mauszeigers über die Schaltfläche zu ändern, klicken Sie auf die Option „Symbol beim Bewegen des Mauszeigers hinzufügen”.

Wählen Sie ein Symbol aus und speichern Sie die Änderungen.

Um ein Symbol zu löschen, klicken Sie auf das Bild neben dem Schaltflächentext. Wählen Sie die Registerkarte „Symbol“ und klicken Sie auf den Papierkorb. Speichern Sie die Änderungen, und das Symbol verschwindet.

Um den Projektstil herunterzuladen, klicken Sie auf die Schaltfläche „Stile verwalten” und wählen Sie die gewünschte Option aus. Eine Datei mit dem Namen des Projekts und der Erweiterung .tildastyles wird auf Ihr Gerät heruntergeladen.

Um einen Stil hochzuladen, wählen Sie ebenfalls die entsprechende Option im Kontextmenü. Neue Stile werden zu den zuvor im Projekt erstellten Stilen hinzugefügt. Die zuvor im Projekt erstellten Stile werden nicht gelöscht oder aktualisiert.

Wenn Sie einen Stil aus dem Projekt löschen und anschließend die Einstellungen speichern, wird der Stil noch zwei Wochen lang auf die Blockeinstellungen angewendet. In Blöcken, in denen der Stil zuvor angewendet wurde, wird eine Benachrichtigung angezeigt.

Nach zwei Wochen wird der Stil vollständig aus dem Projekt gelöscht und die Blockeinstellungen werden zurückgesetzt.

Wenn Sie einer Seite in einem Projekt Stile hinzugefügt haben und diese Seite dann in ein anderes Projekt im aktuellen oder einem anderen Konto übertragen müssen, wird die Seite zusammen mit den Stilen übertragen.

Bei der Übertragung werden die Stile in das neue Projekt kopiert, damit die Blöcke korrekt angezeigt werden.

Wenn Sie versuchen, eine oder mehrere Seiten mit Stilen in ein Projekt innerhalb desselben Kontos zu übertragen, bei dem das Stillimit erreicht wurde oder erreicht wird, wird eine Fehlermeldung angezeigt. Um die Übertragung der Seite abzuschließen, müssen Sie überflüssige Stile in einem anderen Projekt löschen.

Wenn Sie eine oder mehrere Seiten mit Stilen in ein Projekt in einem anderen Konto übertragen, in dem das Limit erreicht wurde, werden die Seiten nicht übertragen. Wenn Sie auf „Akzeptieren“ klicken, erscheint eine Benachrichtigung, dass das Limit überschritten wurde und Sie zusätzliche Stile löschen müssen.