Übersicht: Website Builder (CMS)

In diesem Artikel werden wir das Layout des CMS vorstellen. Möchtest du mehr Informationen über spezifische Funktionen bekommen, empfehlen wir die Suchfunktion oder die unten verlinkten Artikel einmal durchzugehen.

ABSCHNITT

Video

Menüleiste

WYSIWYG editor


Video

Wistia video thumbnail

Beginnen wir mit der Menüleiste oben am Bildschirmrand. Ganz links befindet sich ein Timer, der anzeigt, wie lange du bereits während dieser Sitzung im CMS bist. Mit dem Statusmanagement und Timetracking hast du immer einen Überblick über die Zeit, die bereits in das Projekt geflossen ist. Daneben sind Schaltflächen zum Rückgängigmachen, Wiederherstellen, Speichern und Neuladen des Projekts ebenfalls vorhanden. 

Unter " Allgemein" findest du Speicheroptionen, du kannst deine "Website exportieren" und Editor-"Einstellungen" vornehmen. Per Klick auf "CMS verlassen" schließt du den Website Builder. 

Das Menü " Website" enthält die "Medien”-Bibliothek, "Collections", "Website-Einstellungen", den "Snapshots”-Manager und die “To-dos” des Projekts. Du kannst auch "Weiterleitungen" mit 301 und 302 Statuscodes einrichten. In den "Website-Einstellungen" kannst du beispielsweise ein neues Kundenlogo, dessen Kontaktinformationen und SEO-bezogene Meta-Tags hinzufügen, die sogar für jede Seite im Panel "Seiten" angepasst werden können. 

Das Menü " Design" bietet Links zu weiteren Einstellungsmöglichkeiten bezüglich des " Themes" und zu verwendeten "Fonts" bzw. Schriftarten: Diese ermöglichen eine äußerst hilfreiche Steuerung der Elemente und deren Design, wodurch der Zeitaufwand für die Fertigstellung eines Website-Projekts drastisch reduziert werden kann. Abstände und Media-Breakpoints können im Tab “Layout” ebenfalls sehr einfach angepasst werden. 

Der Eintrag " Seiten" führt zu einem Panel, das alle Seiten auflistet. Du kannst die URLs und Seiten mit nur einem Klick bearbeiten oder, wie bereits erwähnt, seitenspezifische Meta-Tags vergeben. Jede geöffnete Seite wird als Tab oben in der Symbolleiste aufgelistet. Wenn deine Website bereits veröffentlicht ist, werden durch "Speichern" oder der Tastenkombination [Strg] + [S] alle Änderungen für die Live-Website übernommen. 

Das Menü " Inhalt hinzufügen" enthält vier wichtige Inhaltsarten: " Preset", "Element", "Formeinträge", einen Link zu den "Erweiterungen" und die Möglichkeit über "Von Website importieren" Inhalte einer anderen Website in das Projekt zu laden. Presets sind vollständig eigenständige Website-Bereiche wie Header, Preistabellen und Akkordeons. Elemente sind beispielsweise Text und Bilder, die einzeln oder in Kombination mit anderen Elementen verwendet werden können. Der leistungsstarke Kontaktformular-Builder bietet Elemente zur Erstellung von Formularen und stellt Felder für Datei-Uploads in diesen Formularen zur Verfügung. Im E-Commerce-Panel findest du Shop-Elemente die du nach Verbindung des Projekts mit einem Ecwid-Konto per Drag and Drop benutzen kannst. Fürs Verbinden ist lediglich deine E-Mail-Adresse oder die deines Kunden notwendig.

In der Mitte der Menüleiste kannst du die responsive Darstellungsweise der Website auf Desktop-, Tablet- und mobilen Geräten testen, was das Testen und Auditing von Websites einfacher denn je macht. Du kannst sogar die Displayeigenschaften bestimmter Endgeräte vorgeben.

Oben rechts befindet sich der Zugriff auf den Code der Website einschließlich CSS, JavaScript und HTML. Hier kannst du den Projektcode inklusive Code für Presets ansehen oder bearbeiten oder deinen eigenen Code schreiben. 

Wenn du eine schnelle Vorschau der Website sehen möchtest, klicke einmal auf " Vorschau", um in den Vorschaumodus zu gelangen, und klicke erneut, um den Vorschaumodus wieder zu verlassen. Da Javascript im CMS standardmäßig deaktiviert ist, verwende "Vorschau-Website öffnen", um eine "live" Demo-Darstellung zu sehen. Hier ist auch JavaScript aktiviert, sodass du sehen kannst, wie deine Website nach der Veröffentlichung aussehen wird. Darunter findest du den Präsentationsmodus, der sich hervorragend eignet, um das responsive Verhalten deiner Seite auf Desktop-, Tablet- und mobilen Geräten deinem Kunden zu zeigen. Im gleichen Menü findest du auch Links zum Feedback-Tool von Sitejet mit dem dir dein Kunde direkt auf der Seite Feedback geben kann. 

Solltest du fragen haben, findest du oben rechts im Bildschirm unter Hilfe  einen Link zu unseren Hilfeartikeln und Optionen zum E-Mailen oder Chatten mit dem Supportteam von Sitejet. Es gibt auch einen Link zur "Tastatur-Übersicht" wo alle Tastaturkürzel von Sitejet aufgelistet werden.


WYSIWYG Editor

Der mittlere Bereich ist der WYSIWYG-Editor von Sitejet oder der "What-you-see-is-what-you-get" Editor (="Was du siehst, ist was du bekommst"). Doppelklicke auf ein beliebiges Element und seine Einstellungen werden in einem Fenster auf der linken Seite des Bildschirms angezeigt. Die Voreinstellungen enthalten ein Puzzleteil-Symbol am linken Rand der Seite. Wenn du darauf klickst, wird das Fenster mit den voreingestellten Einstellungen geöffnet. 

Klicke mit der rechten Maustaste auf ein Element, um das Kontextmenü zu öffnen. Es gibt Optionen zum "Bearbeiten des Elements", Ausschneiden, Kopieren, Einfügen, Hinzufügen und Löschen von Elementen und mehr. Das Kontextmenü bietet Links zum Bearbeiten und die Option "Bearbeitbar für Kunden". Mit dieser Funktion kannst du bestimmte Teile der Seite so einstellen, dass sie von deinen Kunden aus deren Kundenportal heraus editiert werden können. Hierbei hast du die Möglichkeit nur dieses Element, alle Elemente dieser Art auf dieser Seite und alle Elemente auf dieser Seite freizugeben.

Zu guter Letzt findest du am unteren Rand des CMS die " Breadcrumbs", die die Hierarchie der Container anzeigt. Mit anderen Worten: Jedes Element und seine übergeordneten Container werden zusammen mit allen verwendeten CSS-Klassen innerhalb der Breadcrumbs aufgelistet. Voreingestellte Container zeigen das Puzzleteil-Symbol, Container mit Hintergrund zeigen ein Bildsymbol und Animationen werden durch ein Sternsymbol angezeigt. Doppelklicke einfach auf diese Symbole oder den Containernamen und die entsprechenden Einstellungen werden geöffnet. 

Zurück zum Anfang

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen