Getting Started

Eine Kurzanleitung zur Arbeit mit Spark's wichtigsten Funktionen.
Vielen Dank für den Kauf von Spark! Diese Anleitung behandelt die grundlegende Verwendung der Vorlage sowie einen Überblick über die Struktur der Vorlage. Wenn Sie Hilfe benötigen, kontaktieren Sie uns bitte über das Template Support Page.

Blank Starter Template

Innerhalb des Verzeichnisses "Vorlage" finden Sie eine Seite mit dem Titel "Blank Starter Template". Diese Vorlage enthält eine Navigationsleiste und eine Fußzeile - der ideale Startpunkt für Ihre Seiten.

1. Duplizieren Sie die Blank Starter Page Template

Hinweis: Achten Sie darauf, dass Sie den Elternordner auf den gewünschten Ort ändern.

2. Kopieren und pasten Sie Blöcke auf die neu erstellte Seite:

Kopieren Sie Sections von einer beliebigen Seite und fügen Sie sie dann in den Rumpf Ihrer neu erstellten Seite ein. Außerdem können Sie Abschnitte von jeder Seite kopieren, die auf der Hauptlandingpage aufgelistet ist.

Style Guide

Die Seite Style Guide demonstriert die Darstellung aller in Spark vorkommenden Grundelemente und ist ein guter Ort, um sich zunächst mit der Vorlage vertraut zu machen.

Außerdem finden Sie einen Abschnitt, der die korrekte Verwendung der zugehörigen Utility-Klassen demonstriert.

Editing Typography Styles

Kopfstile einstellen

Anstatt Klassen zu verwenden, müssen Sie die Überschrift anklicken und dann im Dropdown-Selektor, wo Sie im Klassennamen typisieren würden, "Alle H1 Überschriften" auswählen und dann Ihre Änderung vornehmen. Dasselbe gilt für alle Basisüberschriften-Elemente. Klicken Sie auf das Element, wählen Sie "Alle Überschriften 5", dann werden alle Änderungen, die Sie daran vornehmen, überall auf der Seite widergespiegelt.

Setting Body Text and paragraph styles

Gehen Sie genauso für Body-Text und Absätze vor - diese werden auf dem Element Body angegeben. Markieren Sie das Body-Element, wählen Sie im Dropdown-Menü Selector "Body (All Pages)" und ändern Sie die Typografie-Einstellungen für dieses Element. Diese Stile fließen dann in die Absätze und andere allgemeine Textelemente auf der Website.

Container

Spark verwendet 3 Containergrößen, um den Inhalt in den meisten Abschnitten unterzubringen. Zu Ihrer Bequemlichkeit können Sie diese Klassen verwenden, um den Inhalt in Ihren Abschnitten leicht zu enthalten:

  1. Container: Die Standard-Containerklasse, die den Inhalt auf 506px beschränkt.
  2. Container Small: Ein verkleinerter Container, der den Inhalt auf 400px begrenzt.
  3. Container Large: Ein vergrößerter Container, der den Inhalt auf 612px begrenzt.

Verwenden Sie außerdem die Klasse Align Center , um den Container im Zentrum seines Elternelements auszurichten.

Search Modal

Wenn Sie eine der Navigationsleisten verwenden, die eine Suchfunktion hat, müssen Sie darauf achten, dass das Symbol Suchmodus als letztes Element innerhalb des Seitenrumpfs platziert wird.

The search modal symbol.

Back To Top Button

Achten Sie darauf, dass das Back To Top Button-Symbol das erste Element innerhalb des Körpers ist.

The Back To Top Button Symbol.

Stellen Sie dann sicher, dass die Seite eine Page Scrolled-Interaktion hat, indem die Hide Back To Top Button-Interaktion aktiviert wird, wenn die Seite nach oben scrollt, und die Show Back To Top Button-Interaktion aktiviert wird, wenn die Seite nach unten scrollt.

The Page scrolled interaction

Akkordeon

Um die Höhe der offenen Akkordeonplatten anzupassen, müssen Sie zuerst das Akkordeon-Item Open interaction bearbeiten und dann den Wert Height innerhalb des Akkordeon-Item Content Wrapper-Elements anpassen.

Passen Sie den Wert Height an.

Icon Colors

Leider erlaubt Webflow keine dynamische Einfärbung von SVG-Icons. Um die Farbe des Icons vom voreingestellten Orange zu ändern:

  1. Download der SVG-Icon-Datei
  2. Öffnen Sie die SVG-Datei in einem Texteditor
  3. Ändern Sie den Hex-Wert auf Ihre Wunschfarbe
  4. Speichern Sie und laden Sie das Symbol erneut hoch.

Custom Code

Innerhalb der Projekteinstellungen werden Sie auf der Registerkarte Custom Code feststellen, dass am Kopf jeder Seite ein Stilcode hinzugefügt wurde:

Font Rendering Custom Code

Dieser Code soll sicherstellen, dass die Textrendering über alle Browser hinweg glatt und konsistent ist. Er erfordert keine Aktion Ihrerseits.

More Information

Für weitere Informationen konsultieren Sie bitte die Webflow Dokumentation oder melden Sie sich bei uns über die Template Support Page.

Suche