Studio Editor: Eine geführte Tour
7 min
In diesem Artikel
- Die Arbeitsfläche
- Die obere Leiste
- Die Panels auf der linken Seite
- Das Inspektor-Panel
- Breadcrumbs-Leiste
- Zusätzliche Panels
Willkommen beim Studio Editor, unserer fortschrittlichen und intuitiven Plattform für Agenturen und Unternehmen für die Erstellung außergewöhnlicher Websites.
In diesem Artikel lernen wir jeden Teil des Studio Editors kennen - was er ist, was er steuert und wie er dir hilft, effizienter zu arbeiten.
Öffne unsere Wix Studio Academy, um zusätzliche Webinare, Anleitungen und Kurse von Wix Studio anzusehen.
Die Arbeitsfläche
Die Arbeitsfläche bezieht sich auf die Seite, die du entwirfst, direkt in der Mitte des Editors.
Du kannst die Standardgröße der Arbeitsfläche festlegen, mit der du arbeiten möchtest, und die seitlichen Ziehgriffe ziehen, um zu sehen, wie die Seite aussieht, wenn die Größe geändert wird.
Wenn du auf ein Element klickst, wird es ausgewählt und eine Symbolleiste mit Optionen geöffnet. Diese Optionen variieren je nach Element und helfen dir, das Element an deine Bedürfnisse anzupassen.
Du kannst mit der Maus über das Label eines Elements fahren, um stattdessen eines der übergeordneten Elemente auszuwählen.
Elemente auf der Arbeitsfläche rotieren: 
Fahre mit dem Cursor über eine Ecke des Elements, bis sich dieser in das Rotieren-Symbol verwandelt. Klicke und ziehe per Drag-and-Drop, um das Element in den gewünschten Winkel zu rotieren.
Die obere Leiste
Die obere Leiste enthält viele nützliche Werkzeuge, um die Website und deine Ansicht der Arbeitsfläche zu steuern.
Wenn du mit der Maus über das Logo von Wix Studio fährst, wird ein Menü mit Website-Aktionen, Anzeigeoptionen und Verknüpfungen zu anderen Teilen deines Kontos geöffnet.
Verwende das Dropdown-Menü, um schnell zwischen den Website-Seiten zu navigieren. Die Liste ist nach Seitentyp geordnet (z. B Shop-Seiten, Mitgliederseiten), sodass du die Seiten, die du suchst, noch schneller finden kannst.
In der Mitte der oberen Leiste findest du alles, was mit Breakpoints, Zoom und der Größe der Arbeitsfläche zu tun hat. Klicke auf die Breakpoint-Symbole, um eine Seite in verschiedenen Bildschirmgrößen anzuzeigen und anzupassen.
Die angezeigte Bildschirmgröße ist die aktuelle Größe der Arbeitsfläche. Dies ist auch die Standardbearbeitungsgröße für den Breakpoint, auf dem du dich gerade befindest. Jeder Breakpoint hat seine eigene Standardgröße, die du ganz nach deinen Wünschen festlegen kannst.
Auf der rechten Seite siehst du, wer sonst noch an dieser Website arbeitet. Du kannst auch Website-Benachrichtigungen überprüfen, Aktionen rückgängig machen oder wiederherstellen, eine Vorschau anzeigen und die Website veröffentlichen.
Probleme mit dem Zoom?
Wir empfehlen, die Vorschau zu verwenden 
, da du damit viele verschiedene Bildschirmgrößen mühelos simulieren kannst.
, da du damit viele verschiedene Bildschirmgrößen mühelos simulieren kannst. Die Panels auf der linken Seite
Auf der linken Seite des Studio Editors findest du die Hauptpanels, mit denen du arbeiten wirst:
- Füge Elemente hinzu
: Entdecke Hunderte von Elementen, die du deiner Website hinzufügen kannst. Das können Design-Elemente sein oder auch Business-Apps wie etwa Online-Shops. Verwende die Tabs, um zwischen den verschiedenen Kategorien zu navigieren. - Ebenen
: Sieh dir die Ebenen und Elemente der Seite in einer Hierarchie von oben nach unten an. Wenn du im Panel ein Parent-Element auswählst (z. B. Abschnitt, Container), kannst du alle darin enthaltenen Elemente sehen, ihre Reihenfolge ändern, sie ausblenden und noch vieles mehr. - Seiten
: Füge neue Seiten hinzu, bearbeite die Einstellungen jeder Seite und lösche die Seiten, die du nicht mehr benötigst. - Globale Abschnitte
: Dieses Panel zeigt alle globalen Abschnitte an. Das sind die Abschnitte, die du so eingestellt hast, dass sie auf mehreren Seiten angezeigt werden. Du kannst globale Abschnitte umbenennen, sie duplizieren, löschen oder sie zu Seiten hinzufügen, auf denen sie noch nicht angezeigt werden. - Website-Stile
: Zeige die Bildsprache der Website an und passe sie an. Die Typografie-Stile, Farben und Seitenübergänge, die du hier festlegst, gelten für die gesamte Website. - App-Markt
: Stöbere im App-Markt von Wix durch Hunderte von Apps und finde die, die deinen Bedürfnissen entsprechen. - CMS (Content Management System)
: Die Inhalte, Sammlungen und dynamischen Seiten der Website verwalten. - Code
: Aktiviere den Dev-Modus, um eigenen Code zur Website deines Kunden hinzuzufügen.
Das Inspektor-Panel
Das Inspektor-Panel ist die „Steuerzentrale“ für jedes Element.
Sobald du ein Element auf der Arbeitsfläche ausgewählt hast, kannst du seine Größe, Position und sein Design in diesem Panel festlegen. Du kannst auch Animationen auf das Element anwenden oder einen Anker hinzufügen, sodass du direkt darauf verlinken kannst.
Breadcrumbs-Leiste
Wenn du ein Element auf der Arbeitsfläche auswählst, zeigt eine Breadcrumbs-Leiste in der unteren linken Ecke seinen Platz in der Hierarchie an. Auf diese Weise kannst du die übergeordneten Elemente des Elements sehen (und auswählen). Das macht es dir leichter, durch die Ebenen der Seite zu navigieren.
Zusätzliche Panels
Nicht zuletzt gibt es unten links im Editor mehrere Panels, die du kennen solltest.
- Kommentare
: Kommuniziere mit Teammitgliedern, die auch an dieser Website arbeiten, direkt im Studio Editor. Jede Seite verfügt über ein separates Kommentarfeld, in dem du anderen ein spezielles Feedback geben und Fragen stellen kannst. - Hilfe
: Stöbere durch unsere Ressourcen, gib Feedback zum Studio Editor ab oder kontaktiere unser Support-Team.
Arbeite schneller mit unseren Tastenkürzeln:
Sieh dir unsere [vollständige Liste der Keyboard Shortcuts] an, mit denen du Aktionen schneller und effizienter ausführen kannst.