---
url: "/de/weblify/build/site-builder.md"
description: "Erstelle Weblify-Seiten aus Vorlagen, Abschnitten, Elementen und responsiven Layout-Grundbausteinen."
---

# Eine Website in Figma erstellen

> Erstelle Weblify-Seiten aus Vorlagen, Abschnitten, Elementen und responsiven Layout-Grundbausteinen.

Mit den Tabs **Add**, **Navigator** und **Style** von Weblify erstellst und bearbeitest du Website-Seiten als bearbeitbare Figma-Ebenen. Die erzeugten Ebenen behalten Weblify-Metadaten, damit das Plugin sie in der Vorschau zeigen, prüfen und als statische Website exportieren kann.

## Eine Seite beginnen {#start-a-page}

1. Öffne den Tab **Navigator**, gib unter **New page name** einen Namen ein und wähle **Add page**. Oder öffne den Tab **Add**, wähle **Templates** und dann eine Vorlage, um sie als neue Seite mit dem Namen der Vorlage hinzuzufügen.
2. Wähle die erzeugte Seite auf dem Figma-Canvas oder in **Navigator** aus, bevor du Inhalte hinzufügst.

Ist nichts ausgewählt, verwendet Weblify die erste Weblify-Seite, die es findet, oder erstellt eine Seite namens **Home**. Die Zeile unter den Filtern im Tab **Add** zeigt, wo neue Inhalte eingefügt werden.

## Abschnitte und Elemente hinzufügen {#add-sections-and-elements}

Der Tab **Add** ist eine durchsuchbare Bibliothek. Nutze die Filter **Templates**, **Sections**, **Elements** und **Layouts** oder suche nach Namen. **Sections** verwendest du für vollständige Seitenbereiche wie Navigation, Hero, Inhalt, Preise, Formulare und Footer. **Elements** verwendest du für einzelne Komponenten. Wähle einen Eintrag aus, um ihn einzufügen.

Wähle eine Weblify-Seite, einen Abschnitt oder eine Spalte aus, bevor du einen Eintrag einfügst. So hat Weblify ein klar definiertes übergeordnetes Element, und die exportierte Struktur bleibt intakt.

Markiere einen Eintrag mit einem Stern, um ihn zu **Favourites** hinzuzufügen. Um einen deiner eigenen Abschnitte wiederzuverwenden, öffne sein Menü **⋯** in **Navigator** und wähle **Save to My sections**; danach erscheint er im Tab **Add** unter **My sections**.

## Die Struktur bearbeiten {#edit-the-structure}

Der Tab **Navigator** listet deine Seiten und die Abschnitte der aktuellen Seite auf. Du kannst:

- Seiten hinzufügen, Seiten und Abschnitte per Drag-and-drop neu anordnen und sie über das Menü **⋯** umbenennen, duplizieren, ausblenden oder löschen oder als Startseite festlegen.
- Den Button **⚙** neben einer Seite wählen, um ihre URL und die Metadaten für Suchmaschinen zu bearbeiten, und dann **Save page** wählen.
- Über das Menü **⋯** eines Abschnitts festlegen, dass er auf jeder Seite als Header oder Footer erscheint.

Zu den Seitenmetadaten gehören Titel, Beschreibung, kanonische URL, Felder für das Teilen in sozialen Netzwerken, Favicon, Twitter-Card-Typ und die Einstellung für Suchmaschinen.

Um festzulegen, wie sich ein ausgewählter Abschnitt, eine Zeile, ein Raster oder eine Spalte auf Tablets und Smartphones anpasst, öffne den Tab **Style** und klapp **Responsive** auf.

## Styles und Bilder anwenden {#apply-styles-and-images}

Öffne den Tab **Style** und klapp **Brand styles** auf, um die Themes, Farben, Typografie und Eckenradien der erzeugten Inhalte zu prüfen. Klapp **Images** auf, um die Platzhalterbilder aufzulisten und sie vor dem Export durch echte Bild-URLs zu ersetzen.

Öffne den Tab **Preview**, um die aktuelle Website zu prüfen, ohne das Plugin zu verlassen.