Navigation im Cloudbeds Websites Editor

Einführung

Der Cloudbeds-Websites-Editor vereint Navigations-, Inhalts-, Design-, Veröffentlichungs- und Kollaborationstools in einem Arbeitsbereich. Wenn Sie wissen, wo sich jede Steuerung befindet, bewegen Sie sich sicherer durch den Editor und wählen das richtige Werkzeug für die gewünschte Änderung aus.

Dieser Leitfaden konzentriert sich auf die Orientierung in der Benutzeroberfläche. Detaillierte Arbeitsabläufe zur Anpassung der Website, Verwaltung von Medien, Arbeit mit Widgets und Nutzung von Site-Kommentaren finden Sie in den jeweiligen eigenen Anleitungen.

Inhaltsverzeichnis

• Übersicht Editor 2.0
• Obere Navigationsleiste
• Arbeiten in Desktop-, Tablet- und Mobilansichten
• Seitenpanel
• Design-Panel
• Steuerungen für Widgets und Elemente

Übersicht Editor 2.0

Der Arbeitsbereich des Editors 2.0 ist um die obere Navigationsleiste, das Seitenpanel, das Design-Panel und die Steuerungen organisiert, die erscheinen, wenn Sie ein Element oder Widget auf der Seite auswählen. Zusammen ermöglichen diese Bereiche die Navigation auf der Website, die Verwaltung von websiteweiten Tools und die Bearbeitung einzelner Seitenelemente.

Nutzen Sie die vollständige Editoransicht, um sich mit der Position dieser Bereiche vertraut zu machen, bevor Sie mit den unten beschriebenen einzelnen Steuerungen arbeiten.

Die vollständige Editoransicht zeigt die Website-Leinwand zusammen mit den Navigations- und Bearbeitungssteuerungen, die während der Arbeit verfügbar bleiben.

Obere Navigationsleiste

Verwenden Sie die obere Navigationsleiste, um zwischen Seiten und Geräteansichten zu wechseln, die Website zu überprüfen oder zu veröffentlichen, auf Kollaborationstools zuzugreifen und websiteweite Ressourcen zu öffnen.

• Hamburger-Menü: Öffnet Optionen wie das Projekt-Dashboard, die Editorsprache und Hilfe.
• Projekt-Dashboard: Öffnet websiteweite Informationen wie Website-Übersicht, Aktivitäten, Metriken und Formularantworten.
• Sprache: Ändert die Sprache der Editor-Benutzeroberfläche. Die Sprache deiner Website-Inhalte wird dadurch nicht geändert.
• Hilfe: Öffnet verfügbare Hilfe- und Supportressourcen.
• Seitenauswahl: Wechselt zwischen den Seiten deiner Website.
• Geräteansichten: Wechselt zwischen Desktop-, Tablet- und Mobilansichten, damit du überprüfen und anpassen kannst, wie die Seite auf jedem Gerätetyp angezeigt wird. Siehe Arbeiten mit Desktop-, Tablet- und Mobilansichten, um zu verstehen, wie Änderungen zwischen den Geräte-Layouts übernommen werden.
• Rückgängig und Wiederholen: Macht kürzliche Änderungen rückgängig oder stellt sie wieder her.
• Speicherstatus: Zeigt an, ob deine letzten Änderungen gespeichert wurden.
• Website-Kommentare: Öffnet das Kommentarfeld, damit du direkt auf der Website Feedback hinzufügen oder überprüfen kannst.
• Teilen: Öffnet die verfügbaren Optionen zum Teilen der Website.
• Vorschau: Öffnet eine Vorschau, damit du die Website überprüfen und ihre Funktionalität vor der Veröffentlichung testen kannst.
• Veröffentlichen oder erneut veröffentlichen: Veröffentlicht die Website oder wendet deine letzten Änderungen auf eine bereits veröffentlichte Website an.
• Startseite: Führt dich zurück zum Hauptbereich der Website oder zum Dashboard.

Die obere Navigationsleiste hält Seiten-Navigation, Gerätevorschauen, Überprüfungswerkzeuge und Veröffentlichungssteuerungen während deiner Arbeit verfügbar.

Arbeiten Sie mit Desktop-, Tablet- und Mobilansichten

Cloudbeds Websites verwendet ein responsives Design, damit sich Ihre Website an verschiedene Bildschirmgrößen anpasst. Nutzen Sie die Desktop-, Tablet- und Mobil-Ansichten in der oberen Navigationsleiste, um zu prüfen, wie Ihre Inhalte und das Layout auf jedem Gerätetyp dargestellt werden.

Wenn Sie Änderungen an Spalten in der Desktop-Ansicht vornehmen, gelten diese Änderungen auch für die entsprechenden Tablet- und Mobil-Layouts.

Überprüfen Sie alle drei Geräteansichten, bevor Sie Ihre Änderungen abschließen, damit Sie bestätigen können, dass Layout, Bilder und Inhalte auf allen Bildschirmgrößen angemessen dargestellt werden.

Seitenpanel

Das Seitenpanel ist das Hauptsteuerzentrum zum Erstellen, Organisieren und Verwalten Ihrer Website. Jedes Symbol öffnet eine andere Gruppe von Werkzeugen, von der Hinzufügung von Seitenelementen bis zur Verwaltung von einrichtungsweiten Einstellungen.

• Hinzufügen: Fügen Sie Elemente und Widgets zur Seite hinzu.
• Seiten: Erstellen und organisieren Sie die Seitenstruktur und verwalten Sie seitenbezogene Einstellungen.
• Ebene: Überprüfen Sie die visuelle Hierarchie der Seite, einschließlich der Organisation und Verschachtelung der Elemente.
• Design: Verwalten Sie designbezogene Einstellungen für die gesamte Website, wie globale Farben, Typografie, Schaltflächen, Bilder und Hintergründe. Änderungen an einzelnen Elementen oder Seiten können die Design-Einstellungen der Website überschreiben. Für detaillierte Design-Workflows siehe Anpassen deiner Cloudbeds-Website mit dem Design.
• CMS / Inhaltsverwaltung: Greifen Sie auf Tools zur Inhaltsverwaltung zu, einschließlich Medienverwaltung und Geschäftsdaten.
• Medienverwaltung: Laden Sie wiederverwendbare Medien hoch und organisieren Sie diese. Für Anleitungen zu Bildern und Medien siehe Bilder und Medien in Cloudbeds-Websites verwalten.
• Geschäftsdaten: Verwalten Sie strukturierte Geschäftsinformationen, die mit Seitenelementen verbunden werden können.
• SEO / AEO: Überprüfen Sie Such- und KI-Sichtbarkeit, Traffic, Optimierungsstatus und Empfehlungen zur Verbesserung von SEO und AEO.
• Blog: Erstellen, veröffentlichen und verwalten Sie Blogbeiträge.
• Mehr / Einstellungen: Greifen Sie auf zusätzliche Website-Einstellungen und Tools zu, einschließlich Favicon- und Social-Media-Bilder, Google-Tools, URL-Weiterleitungen, Website-Backups, Datenschutzeinstellungen, Formularantworten, 404-Seiteneinstellungen, Website-Export und Progressive-Web-App-Einstellungen.
• KI-Assistent: Nutzen Sie KI-gestützte Tools zur Erstellung, Verfeinerung und Optimierung von Website-Inhalten. Siehe Cloudbeds Websites Editor KI-Assistent für spezielle Anleitungen.

Verwenden Sie das Seitenpanel, wenn Sie ein Website-weites Tool öffnen möchten, anstatt das Styling eines einzelnen ausgewählten Elements zu ändern.

Das Seitenpanel bleibt auf der linken Seite des Editors fixiert, sodass Sie Website-weite Tools öffnen können, ohne die Seitenfläche zu verlassen.

Design-Panel

Wählen Sie ein Element, Widget, eine Spalte oder einen anderen bearbeitbaren Bereich auf der Seite aus, um die verfügbaren Designoptionen für dieses Element im Design-Panel zu öffnen. Verwenden Sie dieses Panel, um das Aussehen und Styling des ausgewählten Elements anzupassen.

Das Design-Panel gilt für das ausgewählte Element, während Design im Seitenpanel breitere Website-weite Design-Einstellungen verwaltet. Nutzen Sie diesen Unterschied, um zu entscheiden, ob eine Designänderung ein einzelnes Element oder die gesamte Website betreffen soll.

Das Design-Panel erscheint neben der Editor-Leinwand, wenn Sie einen bearbeitbaren Bereich auswählen und dessen Design-Steuerungen öffnen.

In diesem Beispiel öffnet die Auswahl einer Spalte und die Wahl von Design die für diese Spalte verfügbaren Einstellungen im rechten Panel.

Widget- und Elementsteuerungen

Wenn Sie ein Element oder Widget auf der Seite auswählen, bietet eine schwebende Symbolleiste Schnellaktionen für diesen Artikel. Die verfügbaren Aktionen variieren je nach Auswahl.

• Inhalt bearbeiten: Ändern Sie den angezeigten Inhalt des ausgewählten Elements.
• Design bearbeiten: Öffnen Sie die Designoptionen für das ausgewählte Element.
• Position ändern: Verschieben Sie das ausgewählte Element innerhalb der Seitenstruktur.
• Hinzufügen: Fügen Sie ein weiteres Element oder Widget in der Nähe hinzu.
• Duplizieren: Erstellen Sie eine Kopie des ausgewählten Elements.
• Ausrichten: Passen Sie die Ausrichtung des Elements an, wenn das ausgewählte Element dies unterstützt.
• Löschen: Entfernen Sie das ausgewählte Element.
• Mehr: Öffnen Sie weitere Aktionen, die für das ausgewählte Element verfügbar sind.

Für vollständige Widget-Workflows, einschließlich Hinzufügen und Verwalten von Widgets, siehe Widgets für Cloudbeds-Websites.

Die schwebende Symbolleiste bietet schnellen Zugriff auf häufige Aktionen, ohne das ausgewählte Element zu verlassen.

Die Auswahl eines vorhandenen Seitenelements zeigt dessen schwebende Symbolleiste an, während das rechte Panel die verfügbaren Designeinstellungen für dieses ausgewählte Element anzeigt.

Verwandte Artikel

Da Sie nun die Hauptbereiche der Editor-2.0-Benutzeroberfläche identifizieren können, nutzen Sie diese Ressourcen für eine umfassendere Orientierung zu Cloudbeds-Websites und aktuellen Design-Workflows:

• Cloudbeds Websites Editor Übersicht und Erste Schritte
• Passe deine Cloudbeds Website mit dem Site-Theme an
• Verwalte Bilder und Medien in Cloudbeds Websites