Studio Editor: Eine geführte Tour

5 Min. Lesezeit
Willkommen beim Studio Editor, unserer fortschrittlichen und intuitiven Plattform für Agenturen und Freiberufler 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.
Erfahre mehr über folgende Themen:

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.
Ein Vollbild-Screenshot des Studio Editors, der die Stelle der Arbeitsfläche markiert
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.
Screenshot mit der Symbolleiste, die sich öffnet, wenn ein Element auf der Arbeitsfläche angeklickt wird
Du kannst mit der Maus über das Label eines Elements fahren, um stattdessen eines der übergeordneten Elemente auszuwählen.
GIF, das die Breadcrumbs zeigt, die sich öffnen, wenn man mit der Maus über ein Element-Label fährt, und die übergeordneten Elemente zeigt

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.
Screenshot, der das Menü zeigt, das sich öffnet, wenn du mit der Maus über das Logo von Wix Studio fährst
Verwende das Aufklappmenü, 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.
Screenshot des Aufklappmenüs oben im Studio Editor
In der Mitte der oberen Leiste findest du alles, was mit Breakpoints 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.
Screenshot, der das Panel zeigt, das sich öffnet, wenn du mit der Maus über die Bildschirmgröße fährst, und du kannst eine Standardgröße festlegen
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.
Screenshot der rechten Seite der oberen Leiste

Die Panels auf der linken Seite

Auf der linken Seite des Studio Editors findest du die Hauptpanels, mit denen du arbeiten wirst:
  • Elemente hinzufügen: Finde Hunderte von Elementen, die du deiner Website hinzufügen möchtest, egal ob es sich um Designelemente oder Unternehmens-Apps wie einen Online-Shop handelt. 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. Bei der Auswahl eines Parent-Elements (z. B. Abschnitt, Container) im Panel kannst du alle darin enthaltenen Elemente sehen, ihre Reihenfolge ändern, sie ausblenden und mehr.
  • Seiten: Füge neue Seiten hinzu, bearbeite die Einstellungen jeder Seite und lösche die, die du nicht mehr benötigst.
  • Globale Abschnitte: Dieses Panel zeigt alle globalen Abschnitte an, also alle Abschnitte, die du so eingestellt hast, dass sie auf mehreren Seiten angezeigt werden. Du kannst Abschnitte zu Seiten umbenennen, duplizieren, löschen oder hinzufügen, auf denen sie 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-Verwaltung): Verwalte die Inhalte, Sammlungen und dynamischen Seiten deiner Website.
GIF, das die verschiedenen linken Seiten auf einen Blick zeigt

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.
GIF, das die verschiedenen Abschnitte und Tabs des Inspektor-Panels zeigt

Zusätzliche Panels

Nicht zuletzt gibt es unten links im Studio Editor mehrere Panels, die du kennen solltest.
  • Website-Prüfer : Verwende dieses Tool, um nach Problemen zu suchen, die du beheben solltest, um die Erfahrung deiner Besucher zu verbessern.
  • Velo-Dev-Modus : Aktiviere den Dev-Modus, um eigenen Code zu dieser Website hinzuzufügen.
  • 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.

War das hilfreich?

|