Elemente-Bereich
Im Elemente-Bereich fügst du deiner Seite Inhalte hinzu. Klicke oben in der linken Seitenleiste auf Elemente, um ihn zu öffnen. Er hat drei Tabs: Elemente, Layouts und Komponenten.
Ziehe etwas aus dem Bereich auf die Arbeitsfläche, um es hinzuzufügen. Es wird dort eingefügt, wo du es loslässt.
Elemente
Der Tab Elemente enthält einzelne Bausteine, gruppiert in auf- und zuklappbare Abschnitte.
| Abschnitt | Elemente |
|---|---|
| Grundlagen | Button, Eingabefeld, Überschrift, Absatz, Container, Karte |
| Layout & Navigation | Menü, Seitenleiste, Raster, Spalten, Zeilen, Tabs, Brotkrumennavigation, Trennlinie |
| Formulare & Eingaben | Formular, Textbereich, Auswahlliste, Kontrollkästchen, Schalter, Optionsfeld, Datumsauswahl, Suchleiste, Datei-Upload, Schieberegler |
| Datenanzeige | Tabelle, Liste, Badge, Zeitleiste, Preiskarte |
| Feedback & Status | Hinweis, Modales Fenster, Akkordeon |
| Medien | Bild, Video, YouTube, Vimeo, Audio, Symbol |
| Erweitert | Rich Text, Karussell |
| Integrationen | Stripe, Google Maps, Calendly, Typeform |
Layouts
Der Tab Layouts enthält fertige Abschnitte. Jede Karte zeigt eine einfache Skizze des Aufbaus, damit du anhand der Struktur auswählen kannst. Ziehe einen Abschnitt auf deine Seite, meist zwischen zwei bestehende Abschnitte.
| Gruppe | Layouts |
|---|---|
| Hero | Zentriert, Geteiltes Layout, Einfach, Linksbündig, Umgekehrt geteilt, Mit Funktionen |
| Funktionen | Kartenraster, Symbolraster, Checkliste, Geteilt mit Bild, Einfaches Raster, Abwechselnde Schritte |
| Statistiken | Einfach mit 4 Spalten, Blauer Hintergrund, Karten mit Rahmen, Groß mit Beschreibungen, Geteilt mit Bild, Minimal mit 3 Spalten |
| Handlungsaufforderung | Kasten mit Rahmen, Banner mit Statistiken, Text über Bild |
| Preise | Tarifstufen in 3 Spalten, Monatlich oder jährlich, Einzelner Tarif |
| Kundenstimmen | Raster mit 3 Spalten, Hervorgehobenes Zitat, Karten in 2 Spalten |
| Kontakt | Formular mit Infos, Einfach zentriert |
| Fußzeile | Mehrspaltig, Einfach zentriert |
So passt sich Eingefügtes an deine Seite an
Elemente und Layouts werden nicht in einem Standardstil eingefügt. WebTwizz passt sie zuerst an deine Website an:
- Dein Design. Es verwendet die Farben, Schriften, Buttons, Karten und Abstände, die deine Seite bereits hat.
- Die gewählte Stelle. Die Größe passt sich der Stelle an, an der du das Element ablegst, etwa einer Rasterzelle oder einer Spalte innerhalb einer Zeile.
- Deine Seiten und Inhalte. Ein Menü oder eine Seitenleiste wird aus deiner Website erstellt: mit deinem Markennamen, deinen Seiten und den Links, die bereits in deiner Kopfzeile stehen. Ein Layout behält die gewählte Anordnung bei. Seine Elemente können aus Inhalten stammen, die deine Website bereits hat. Tabs, Akkordeons und Karussells werden nach Möglichkeit mit deinen Inhalten gefüllt. Google Maps zeigt deine Adresse an, wenn auf deiner Website eine genannt wird.
- Die Karte daneben. Legst du eine Karte oder einen Button neben einem bestehenden Element desselben Typs ab, wird das neue Element genauso aufgebaut, aber mit eigenen Inhalten.
- Texte und Bilder für deine Website. Platzhaltertexte, Fotos und Symbole werden direkt nach dem Ablegen für deine Website geschrieben oder ausgewählt.
Ein Menü passt sich der Stelle an, an der du es ablegst: als vollständige Kopfzeile oben auf der Seite, als Linkzeile innerhalb einer Kopfzeile oder als Linkspalte in einer Fußzeile. Eine direkt auf der Seite abgelegte Seitenleiste steht neben deinen Inhalten und verlinkt auf deine Seiten oder auf die Abschnitte einer einseitigen Website. Auf Smartphones wird sie zu einem Menübutton. Wenn deine Website bereits eine Kopfzeile hat und du eine neue ablegst, erscheint ein Hinweis. So kannst du die Kopfzeile löschen, die du nicht behalten möchtest.
Mit Rückgängig (⌘Z / Ctrl+Z) entfernst du das eingefügte Element und die ergänzten Inhalte in einem Schritt.
Komponenten
Komponenten sind wiederverwendbare Teile deiner Website, etwa eine Navigationsleiste, eine Preiskarte oder eine Fußzeile. Der Tab Komponenten listet alle Komponentendateien im Komponentenordner deines Projekts auf, außer den kleinen Bausteinen im Ordner ui.
Jede Zeile zeigt den Namen der Komponente und ihre Datei, zum Beispiel Button.tsx. Mit Komponenten suchen filterst du die Liste. Ziehe eine Komponente auf die Arbeitsfläche, um sie zu verwenden. Jede Kopie auf deiner Website verweist auf dieselbe Komponente. Eine Änderung an der Komponente erscheint also überall, wo sie verwendet wird.
Wenn dein Projekt noch keine Komponenten hat, steht im Tab Keine Komponenten.
Komponente erstellen
Klicke mit der rechten Maustaste auf ein Element auf der Arbeitsfläche oder im Ebenen-Bereich und wähle In Komponente umwandeln, oder drücke ⌘⇧K / Ctrl+Shift+K.
Gib im Dialog Komponente erstellen einen Namen ein und klicke auf Erstellen. Namen dürfen nur Buchstaben und Zahlen enthalten. Der erste Buchstabe wird automatisch großgeschrieben. Das Element wird in eine eigene Komponentendatei verschoben, und die Seite verwendet an seiner Stelle die neue Komponente.
In Komponente umwandeln wird nicht angezeigt, wenn ein Element bereits eine Komponente ist.
Komponenten umbenennen und löschen
Klicke im Tab Komponenten mit der rechten Maustaste auf eine Komponente und wähle Umbenennen oder Löschen.
Löschen ist nicht verfügbar, solange die Komponente irgendwo auf deiner Website verwendet wird.
Während die KI arbeitet
Während die KI deine Website ändert, wird der Bereich durch den Hinweis Die KI bearbeitet gerade abgedeckt. So kommen sich deine Änderungen und die der KI nicht in die Quere. Sobald die KI fertig ist, wird der Bereich wieder freigegeben.