So stellen Sie Schriftart und Farben für Ihre Webseite ein

Auf dieser Seite:

Bearbeiten und Anwenden von globalen Textstilen
Benutzerdefinierte Textstile
Globale Farben bearbeiten und anwenden


Die Grundlage einer jeden Website ist ein bestimmter Stil. Zwei wichtige Elemente, die diesen Stil und die Identität ausmachen, sind Text und Farben. In diesem Artikel erfahren Sie, wie Sie den Text und die Farben auf Ihrer gesamten Website mit wenigen Klicks ändern können.

Globale Textstile bearbeiten und anwenden

Der Designer enthält eine Reihe konfigurierbarer Textstile, die Sie jedem Textabschnitt auf Ihrer Website hinzufügen können, um ein einheitliches Design zu gewährleisten.

Standardmäßig erben alle Textstile die Schriftfamilie des Textstils "Allgemein". Um eine neue Schriftfamilie auf alle Textstile anzuwenden, ändern Sie die Schriftfamilie des Textstils Allgemeiner Text, den Sie im Menü Globales Design > Globale Texte finden.




Wenn Sie das Erscheinungsbild eines anderen Textstils anpassen möchten, können Sie dies tun, indem Sie den Textstil aus dem Menü auswählen. Sie können Attribute wie Schriftstärke, Größe, Farbe, Ausrichtung, Verknüpfungsstil und mehr ändern.






Sobald Sie die Textstile für Titel und Absätze festgelegt haben, können Sie sie problemlos auf alle Inhalte anwenden, die Sie in Textbausteinen hinzufügen. Markieren Sie einfach den Inhalt, dem Sie einen Textstil hinzufügen möchten, und wählen Sie den entsprechenden Stil aus dem Menü Design. Wenn Sie schnelle Anpassungen an den globalen Textstilen vornehmen möchten, können Sie das Bearbeitungssymbol neben dem Textstil im Design-Menü auswählen.

Text für verschiedene Ansichtsfenster formatieren

Alle Titel- und Absatztextstile können für die drei wichtigsten Ansichtsfenster optimiert werden: Desktop, Tablet und Mobile. Wenn Sie z. B. den Stil "Light Spot Text" so gestalten möchten, dass er auf dem Desktop 70px, auf dem Tablet 50px und auf dem Handy 30px groß ist, würden Sie damit beginnen, die Schriftgröße des Light Spot Textes im Desktop-Viewport auf 70px einzustellen. Alle Änderungen, die im Desktop-Ansichtsfenster vorgenommen werden, wirken sich auch auf das Tablet und das Mobilgerät aus.

Text für verschiedene Ansichtsfenster stylen

Alle Titel- und Absatztextstile können für die drei wichtigsten Ansichtsfenster optimiert werden: Desktop, Tablet und Mobile. Wenn Sie z. B. den Stil "Light Spot Text" so gestalten möchten, dass er auf dem Desktop 70px, auf dem Tablet 50px und auf dem Handy 30px groß ist, würden Sie damit beginnen, die Schriftgröße des Light Spot Textes im Desktop-Viewport auf 70px einzustellen. Alle Änderungen, die im Desktop-Viewport vorgenommen werden, wirken sich auch auf das Tablet und das Mobiltelefon aus.

Als Nächstes würden Sie die Schriftgröße des Light Spot Textes für das Tablet-Ansichtsfenster auf 50px einstellen (denken Sie daran, vor der Bearbeitung des Moduls in der oberen Leiste des Designers auf die Tablet-Ansicht zu klicken). Alle Änderungen, die in der Tablet-Ansicht vorgenommen werden, wirken sich auf die mobile Ansicht aus, nicht aber auf den Desktop. Schließlich würden Sie die Schriftgröße des Light Spot Textes für das mobile Ansichtsfenster auf 30px einstellen (denken Sie daran, vor der Bearbeitung des Moduls in der oberen Leiste des Editors auf die mobile Ansicht zu klicken). Alle Änderungen im mobilen Ansichtsfenster würden sich nicht auf andere Ansichtsfenster auswirken.



Die Hierarchie der Ansichtsfenster wird für Zeilen, Spalten oder Module unterbrochen, sobald Sie eines der Elemente in einem der Ansichtsfenster einzeln ändern. Wenn Sie z. B. die Schriftgröße auf dem Tablet oder Mobilgerät ändern und anschließend die Schriftgröße auf dem Desktop ändern, haben die Änderungen auf dem Desktop keine Auswirkungen auf die anderen Ansichtsfenster. Auf diese Weise können Sie vermeiden, dass viewport-spezifische Änderungen und Designs jedes Mal überschrieben werden, wenn Sie etwas auf dem Desktop oder Tablet ändern.


Graue Indikatorpunkte neben Stiloptionen: Wenn Sie einen grauen Indikatorpunkt neben einer Stiloption sehen, bedeutet dies, dass eine Stiländerung lokal an diesem Element vorgenommen wurde. Kein grauer Punkt bedeutet, dass der Stil vom globalen Stil geerbt wird. Klicken Sie auf den grauen Indikatorpunkt, um die Formatierung zurückzusetzen und zur Übernahme der globalen Formatierung zurückzukehren.

Benutzerdefinierte Textstile

Neben den Standardtextstilen im Designer stehen Ihnen auch 10 benutzerdefinierte Stile zur Verfügung, falls Sie zusätzliche Stile definieren möchten.



Dies kann zum Beispiel nützlich sein, wenn Sie ein Ankündigungsbanner auf Ihrer Website haben und möchten, dass jeder Text darauf in einem eigenen Stil erscheint. Klicken Sie auf einen der benutzerdefinierten Stile, gestalten Sie ihn nach Belieben und geben Sie ihm einen passenden Namen, damit Sie ihn später leichter wiedererkennen.

Globale Farben bearbeiten und anwenden

Die Auswahl von Farben für Elemente auf Ihrer Website ist eine der häufigsten Aufgaben. Mit Globale Farben ist es einfach, eine Farbpalette für Ihr Design auszuwählen und sie auf jedes Element anzuwenden, ohne dass Sie die Farbe jedes Mal neu einstellen müssen, wenn Sie ein neues Element auf Ihrer Website hinzufügen.

Die Palette der Globalen Farben ist in 3 verschiedene Kategorien unterteilt:

Spotfarben
Basisfarben
Benutzerdefinierte Farben

Diese Kategorien ermöglichen es Ihnen, eine Hierarchie zu definieren, um den Prozess der Anwendung und Bearbeitung des Farbschemas Ihrer Website einfach und effektiv zu halten.

Globale Farben definieren

Sie können die Farbpalette für Ihre Website im Menü Globales Design definieren, indem Sie die Option Globale Farben auswählen. Durch Auswahl des Farbfelds neben dem Farbbezeichner können Sie die spezifische Farbpalette auswählen, die Sie für die Elemente Ihrer Website wiederverwenden möchten. Betrachten Sie die Spotfarben als Ihre Hauptmarkenfarben. Für die Spotfarben sollten Sie eine helle, eine normale und eine dunkle Version der gleichen Farbe hinzufügen. Basisfarben werden hauptsächlich als Hintergrundfarben für Elemente wie Zeilen, Spalten oder Text verwendet. Benutzerdefinierte Farben sind für zusätzliche Farboptionen vorgesehen, falls erforderlich.

Anwenden von globalen Farben

Bei der Gestaltung eines Elements, z. B. einer Schaltfläche, haben Sie schnellen Zugriff auf Ihre vordefinierten Globalen Farben, wenn Sie den verschiedenen Elementen Farben zuweisen. Es ist wichtig, dabei die globalen Farbfelder zu verwenden, falls sich die Farbe(n) der Website zu einem anderen Zeitpunkt ändern. Wenn Sie die Farbfelder im Menü "Globale Farben" ändern, wirkt sich dies auf alle Elemente aus, die auf der Website mit globalen Farben gestaltet sind.

Aktualisiert am: 02/10/2023