Newleaf ist ein Medium Rare UI Kit. Entdecken Sie hier über 30 Webflow-Vorlagen.

Getting Started

A guide to getting familiar with Newleaf.

Leere Seitenvorlage

Im Verzeichnis "Vorlage" finden Sie eine Seite mit dem Titel "Leere Startervorlage". Diese Vorlage enthält eine Navigationsleiste und eine Fußzeile - der ideale Ausgangspunkt für Ihre Seiten.

1. Duplizieren Sie die Vorlage für die leere Starterseite

Hinweis: Achten Sie darauf, den übergeordneten Ordner in den gewünschten Speicherort zu ändern.

2. Kopieren Sie Blöcke und fügen Sie sie in die neu erstellte Seite ein:

Kopieren Sie Abschnitte von einer beliebigen Seite und fügen Sie sie dann in den Textkörper Ihrer neu erstellten Seite ein. Sie können auch Abschnitte von jeder Seite kopieren, die auf der Hauptzielseite aufgeführt ist.

Gestaltungsrichtlinie

Die Style Guide-Seite demonstriert die Anzeige aller in Newleaf gefundenen Basiselemente und ist ein guter Ausgangspunkt, um sich mit der Vorlage vertraut zu machen.

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

Bearbeiten von Typografie-Stilen

Überschriftenstile festlegen

Anstatt Klassen zu verwenden, müssen Sie auf die Überschrift klicken und dann in der Dropdown-Liste "Selektor" den Klassennamen eingeben, "Alle H1-Überschriften" auswählen und dann Ihre Änderung vornehmen. Gleiches gilt für alle Basisüberschriftenelemente. Klicken Sie auf das Element, wählen Sie "Alle Überschrift 5", dann werden alle Änderungen, die Sie daran vornehmen, auf der gesamten Site widergespiegelt.

Festlegen von Textkörpern und Absatzformaten

Befolgen Sie das gleiche Verfahren für Textkörper und Absätze, die im Body-Element angegeben sind. Wählen Sie das body-Element aus, wählen Sie im Dropdown-Menü „Selektor“ die Option „Body (Alle Seiten)“ und ändern Sie die Typografieeinstellungen für dieses Element. Diese Stile fließen dann in die Absätze und andere generische Textelemente in der Site ein.

Behälter

Newleaf verwendet 3 Behältergrößen, um den Inhalt in den meisten Abschnitten unterzubringen. Der Einfachheit halber können Sie diese Klassen verwenden, um ganz einfach Inhalte in Ihren Abschnitten einzuschließen:

  1. Container: Die Containerklasse in Standardgröße, die den Inhalt auf 469 px begrenzt
  2. Container Large: Ein größerer Container, der den Inhalt auf 792 px begrenzt
  3. Container Small: Ein verkleinerter Container, der den Inhalt auf 364 px begrenzt

Verwenden Sie außerdem die Klasse Align Center, um den Container in der Mitte seines übergeordneten Elements auszurichten.

Deaktivieren der Ladeanimation

Wenn Sie die Ladeanimation nicht verwenden möchten:

  1. Entfernen Sie das "Loader"-Symbol von den Elementen auf der Seite.
  2. Entfernen Sie die Interaktion "Seitenladeanimation" aus dem Interaktionsfeld in der rechten Seitenleiste.

Dropdown-Listen in der Navigationsleiste

Stellen Sie bei Dropdown-Elementen in der Navigationsleiste sicher, dass das Dropdown-Bildschirmelement als untergeordnetes Element des "Nav Dropdown"-Elements enthalten ist. Dies ist erforderlich, um den abgedunkelten Hintergrund beim Öffnen des Dropdown-Menüs korrekt anzuzeigen.

Die richtige Struktur für ein Nav Dropdown

Suchfenster

Wenn Sie eine der Navigationsleisten mit Suchfunktion verwenden, müssen Sie sicherstellen, dass das Suchmodalsymbol als letztes Element im Seitenkörper platziert wird.

Das Suchfenster-Symbol (en: "search modal").

Zurück zum Anfangs-Button

Stellen Sie sicher, dass das Symbol für die Schaltfläche „Zurück zum Anfang“ das erste Element innerhalb des Körpers ist.

Das Symbol für die Zurück-nach-Oben-Schaltfläche.

Stellen Sie dann sicher, dass die Seite über eine Seiten-Scrolling-Interaktion verfügt, wobei die Interaktion „Back to Top-Schaltfläche ausblenden“ aktiviert wird, wenn die Seite nach oben scrollt, und die Interaktion „Back To Top-Button anzeigen“, wenn die Seite nach unten scrollt.

Die gescrollte Interaktion mit der Seite

Symbolfarben

Leider lässt Webflow keine dynamische Einfärbung von SVG-Symbolen zu. So ändern Sie die Symbolfarbe von der Standardfarbe Orange:

  1. Laden Sie die SVG-Symboldatei herunter
  2. Öffnen Sie die SVG-Datei in einem Texteditor
  3. Ändern Sie den Hex-Wert in Ihre gewünschte Farbe
  4. Speichern Sie das Symbol und laden Sie es erneut hoch.

Benutzerdefinierter Code

In den Projekteinstellungen auf der Registerkarte Benutzerdefinierter Code werden Sie feststellen, dass dem Kopf jeder Seite ein Stilcode hinzugefügt wurde:

Benutzerdefinierter Code für reibungsloses Schriftart-Rendering

Dieser Code soll sicherstellen, dass die Textwiedergabe in allen Browsern reibungslos und konsistent ist. Es erfordert keine Aktion Ihrerseits.

Mehr Informationen

Weitere Informationen finden Sie in der Webflow-Dokumentation oder kontaktieren Sie uns über die Vorlagen-Support-Seite.