Design und Presets

Inhaltsbereich

In der linken Leiste findest alles, was du brauchst, um das Erscheinungsbild deiner gesamten Website festzulegen.

Hier definierst du die Grundlagen, auf die alle deine Seiten und Elemente zurückgreifen: deine Farben, Schriften, Abstände, Icons und Presets.

Änderst du hier etwas, passt sich deine Website überall automatisch an. So bleibt dein Design einheitlich, und du musst Anpassungen nur an einer Stelle vornehmen.

Farben

Hier legst du die Farbpalette deiner Website fest. Jede Farbe hat eine Rolle, zum Beispiel Hintergrund, Oberfläche, Text, Marke, Akzent, Rahmen oder Schatten. Für Texte auf dunklem Hintergrund gibt es eigene invertierte Varianten.

Farben ohne Icon: Pencil sind Standardfarben für wichtige Rollen wie Text, Markenfarbe oder Hintergrund. Sie können nicht gelöscht werden.

Viele Vorlagen verwenden genau diese Standardfarben. Fügst du eine Vorlage mit Eigenes Design ein, werden diese Farben durch deine eigenen ersetzt.

Farben mit Icon: Pencil sind eigens angelegte Farben. Diese können nach Belieben benannt und wieder gelöscht werden.

Über Icon: Add Farbe hinzufügen ergänzt du weitere Farben. Diese Farben stehen dir dann in jedem Farbfeld im Styling zur Auswahl.

Kontrast
Achte auf ausreichend Kontrast zwischen Text- und Hintergrundfarben. Der Editor weist dich mit Schwacher Kontrast darauf hin, wenn eine Farbkombination schlecht lesbar ist.

Schriften

Hier bestimmst du die Schriften deiner Website, zum Beispiel eine Schrift für Überschriften und eine für den Fließtext. Über Icon: Th-list Eigene Schriften verwalten kannst du auch eigene Schriftdateien hochladen.

Schriften ohne Icon: Pencil sind Standardschriften für Fließtext und Überschriften. Sie können nicht gelöscht werden. 

Schriften mit Icon: Pencil sind eigens angelegte Schriften. Diese können nach Belieben benannt und wieder gelöscht werden. Lege eine neue Schrift an mit Icon: Add Variable hinzufügen.

Nutze das Dropdown, um Schriften aus dem Schriftenkatalog auszuwählen. Möchtest du eine Schrift verwenden, die nicht in der Liste ist, zum Beispiel die Hausschrift deiner Marke, kannst du sie selbst hochladen.

Viele Vorlagen übernehmen beim Nutzen von Eigenes Design deine Standardschriften.

Drücke auf Icon: Th-list Eigene Schriften verwalten. Hier siehst du bereits hinzugefügte Schriftarten und kannst eine neue anlegen.

Wenn du eine eigene Schriftart hinzufügst, gib zunächst den Namen der Schriftfamilie an und wähle die passende Schriftkategorie. Drei Schriftkategorieren stehen dir zur Auswahl:

Sans-Serif: Diese Schriften sind serifenlos, also ohne Verzierungen, und wirken modern, klar und gut lesbar (z. B. Arial).
Serif: Diese Schriften haben kleine Verzierungen oder „Füßchen“ an den Buchstabenenden und wirken klassisch sowie elegant (z. B. Times New Roman).
Mono: Diese Schriften haben für alle Zeichen die gleiche Breite und werden oft für Code oder technische Inhalte verwendet (z. B. Courier New).

Bei den Schriftschnitten lädst du deine Schriften nun hoch. Verwendest du mehrere Varianten einer Schrift (z. B. fett und kursiv), musst du für jede Variante bzw. jeden Style eine eigene Datei bereitstellen. 

Die Stärke bestimmt, wie dick oder dünn die Schrift dargestellt wird. Sie wird über Zahlenwerte festgelegt, wobei du in den Klammern eine Orientierungshilfe zur jeweiligen Stärke findest.

Die Art gibt an, ob die Schrift normal oder kursiv ist.

Variablen

Variablen sind wiederverwendbare Werte für Eckenradius und Abstände, die du dann bei deinen Elementen für Innen- und Außenabstände oder Rahmen auswählen kannst, um diese konform zu halten.

Variablen ohne Icon: Pencil sind Standardvariablen für verschiedene Größen deiner Abstände und Abrundungen. Sie können nicht gelöscht werden. 

Viele Vorlagen verwenden genau diese Standardvariablen. Fügst du eine Vorlage mit Eigenes Design ein, werden Abstände und Eckenrundungen durch deine eigenen ersetzt.

Variablen mit Icon: Pencil sind eigens angelegte Variablen. Diese können nach Belieben benannt und wieder gelöscht werden. Lege eine neue Variable an mit Icon: Add Variable hinzufügen.

Icons

Hier legst du fest, welche Icons deine Website für wiederkehrende Funktionen verwendet, zum Beispiel für Warenkorb, Merkliste, Konto, Suche, Menü, Schließen-Buttons, Pfeile in Akkordeons und Slidern oder das Ladesymbol. Wählst du hier ein anderes Icon, wird es überall auf deiner Website ausgetauscht.

 

Um ein Icon zu ändern, klicke auf das Icon, welches du austauschen möchstest.

Die stehen anschließend eine Selektion an empfohlenen Icons zur Verfügung, die für diesen Einsatzbereich geeignet sind. Ist dein gewünschtes Icon nicht in der Selektion vorhanden, kannst du über Alle Icons anzeigen ein beliebiges aus dem Icon-Paket auswählen.

Um das Icon komplett zu entfernen, nutze den Icon: Close-Button ganz vorne bei den Empfehlungen.

Um die Linien-Stärke des Icons zu verändern, wähle oben ein anderes Icon-Paket im Dropdown aus.

Presets

Presets sind das Herzstück eines einheitlichen Designs. Ein Preset ist ein gespeichertes Styling mit einem eigenen Namen. Statt jedes Element einzeln zu gestalten, weist du ihm einfach ein Preset zu. Änderst du das Preset später, werden alle Elemente, die es verwenden, automatisch aktualisiert.

Variablen und Presets arbeiten dabei zusammen: Variablen definieren einzelne Werte wie Farben oder Schriftarten. Ein Preset kombiniert mehrere dieser Werte zu einem fertigen Look. Änderst du eine Variable, wird die Änderung automatisch in allen Presets übernommen, die sie verwenden.

Presets werden nach ihrem Element oder Anwendungsfall sortiert, etwa Text, Button oder Box. Wenn du ein Element in deine Seite einfügst und ein Preset auswählen willst, wird dir automatisch die passende Preset-Kategorie vorgeschlagen. Du kannst aber auch Presets aus anderen Kategorien verwenden.

Nutze Icon: Add Preset hinzufügen und wähle die Kategorie und einen Titel aus. Einfacher kannst du Presets auch über das Styling von Elementen hinzufügen: Style einfach dein Element individuell und klicke dort anschließend auf Als neues Preset speichern.

Auch das Bearbeiten eines Presets kannst du direkt am Element vornehmen. Alternativ kannst du hier im Preset-Menü dein Preset finden und direkt abändern.

Preset auswählen

Um ein Preset einem Element hinzuzufügen, wähle das Element aus und klicke in der Bearbeitungsleiste oder oben im Styling auf die Preset-Auswahl. Fährst du mit der Maus über ein Preset, zeigt die Vorschau dein Element sofort damit an. Erst mit einem Klick wird das Preset übernommen.

Manche Elemente bestehen aus mehreren Teilen. Für solche Elemente gibt es Preset-Gruppen. Eine Preset-Gruppe speichert das Aussehen des ganzen Elements mit all seinen Bestandteilen auf einmal.

Wrapper
Das ist der äußere Rahmen des Elements. Für ihn wählst du ein Preset oder gestaltest ihn mit einem eigenen Stil.

Bestandteile
Darunter siehst du alle Teile des Elements. Für jeden Bestandteil wählst du ebenfalls ein Preset oder einen eigenen Stil. So kann zum Beispiel der Titel jedes Akkordeon-Eintrags dein Preset „Kleine Überschrift“ verwenden.

Mehrfach verwendete Bestandteile
Manche Bestandteile kommen an mehreren Stellen eines Elements vor. Sie stehen gesammelt unter Mehrfach verwendete Bestandteile und werden dort nur einmal gestaltet. Die Änderung gilt dann überall, wo der Bestandteil vorkommt. In der Liste der Bestandteile sind diese Stellen mit Icon: Repeat markiert. Ein Klick darauf bringt dich direkt zum passenden Eintrag.

Verschachtelte Elemente
Enthält ein Element selbst wieder ein mehrteiliges Element, zum Beispiel ein Textfeld in einem Formular, kannst du für diesen Bestandteil eine eigene Preset-Gruppe wählen.

Funktionen

Hier wählst du die festen Bestandteile deines Shops oder deiner Website aus, um sie zu gestalten, zum Beispiel Produktseite, Kasse, Login oder Cookie-Hinweis. Ihre Gestaltung gilt für alle Seiten dieser Funktion.

 

Um eine Funktion zu gestalten, wähle die gewünschte Funktion im Menü aus. Je nachdem, ob du einen Shop oder eine Website gestaltest, siehst du unterschiedliche Optionen.

Über das Icon: External-link-Icon erkennst du, wenn eine Funktion eine neue Seite aufmacht, damit du dein Styling auch direkt sehen kannst. Arbeitest du gerade an einer anderen Seite, solltest du vor dem Wechseln zur Funktion deine Änderungen speichern, damit sie nicht verloren gehen.

Funktionen ohne das Icon öffnen sich direkt auf der aktuellen Seite.

In einer Funktion siehst du folgendes:

  1. Vorschau
    Bei Produkt, Kategorie, Hersteller und Tag wählst du aus, mit welchem Eintrag die Vorschau angezeigt wird. So siehst du, wie die Gestaltung mit echten Inhalten aussieht.

  2. Eintrag bearbeiten
    Über den Icon: Pencil-Button gelangst du zur Inhaltsbearbeitung des Vorschau-Eintrags.

  3. Bestandteile
    Über die einzelnen Bestandteile stylst du deine Funktion. Bestandteile können sowohl individuell als auch mit Preset gestaltet werden.

  4. Mehrfach verwendete Bestandteile
    Bestandteile, die mit einem Icon: Repeat-Icon markiert sind, können mehrfach in dieser Funktion vorkommen. Sie werden unten gebündelt und werden einmal für alle ihre Stellen gestaltet.

  5. Layout-Einstellungen
    Bestandteile haben kein individuelles Layout. Es können jedoch bestimmte Layout-Einstellungen über den Icon: Columns-Button vorgenommen werden: Außenabstände, Zwischenräume und Textausrichtung.

Standards

Hier legst du Voreinstellungen fest, die für neue Inhaltsraster gelten.
Diese Standardwerte gelten nur für neue Inhaltsraster. Bestehende Inhaltsraster bleiben unverändert. Zusätzlich kannst du die Einstellungen bei jedem Inhaltsraster individuell anpassen.

Du kannst folgende Einstellungen für das Standardraster wählen:

Fließend
Der Inhalt erstreckt sich über die gesamte Bildschirmbreite und reicht bis an die Seitenränder. Es gibt dabei keine zusätzlichen Abstände zum linken und rechten Rand.

Fließend bis Maximalbreite
Der Inhalt passt sich flexibel an die verfügbare Bildschirmbreite an, wird dabei aber nicht breiter als die Maximalbreite. Die Standard-Maximalbreite wirkt sich nur aus, wenn diese Einstellung aktiv ist.

Breakpoints / Breakpoints (breit)
Das Inhaltsraster wird an festgelegten Punkten an die Bildschirmbreite angepasst und erhält automatischen den entsprechenden Seitenabstand.