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

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

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

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

Ö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.