Ü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.

Video

.wistia_no_animate * { transition: none !important; -mozilla-transition: none !important; -ms-transition: none !important; -o-transition: none !important; -webkit-transition: none !important; }

Menüleiste

Beginnen wir ganz links in der oberen Menüleiste. Hier findest du das Burger-Menü - dazu gibt es im nächsten Abschnitt mehr Informationen. Deswegen schauen schauen wir uns direkt die nächsten Icons an. Der Pfeil zurück macht deine letzen Anpassungen  Rückgängig (Strg + Z), während du mit dem Pfeil nach vorne Anpassungen Wiederholen (Strg + Y) kannst. 

Über das Augen-Icon kannst du deine Website im Vorschau-Modus anschauen - deswegen wird es auch als  Vorschau-Icon bezeichnet. Durch einen Klick auf das Icon wird der Vorschau-Modus (Strg + P) direkt im Website Editor gestartet. Du kannst jetzt die Funktionen auf der Seite testen ohne deine Änderungen vorher speichern zu müssen. Wenn du über das Vorschau-Icon hoverst, findest du ein Dropdown mit weiteren Optionen: 

• Vorschau: Der Vorschau-Modus innerhalb des Website Editors.
• Vorschau-Website öffnen: Hier wird deine Website in einem neuen Tab geöffnet. Wenn du dir Änderungen an der Website anschauen oder neue Funktionen testen möchtest, solltest du die Website vorher speichern, da dir hier immer aktuelle gespeicherte Stand der Website angezeigt wird.
• Präsentationsmodus: Hier wird deine Website auf einem Blick im Desktop-, Tablet- und Mobile-View angezeigt, sodass du dir einen schnellen Überblick über die Funktionsweise deiner Website auf unterschiedlichen Endgeräten anschauen kannst. 
• Präsentationslink teilen: Hier findest du den Link zum Präsentationsmodus.
• Link zum Feedback Tool: Hier findest du den Link zum Feedback Tool, wo deine Kunde ganz einfach Kommentare direkt an bestimmte Website-Elemente heften können, was den Feedbackprozess viel effizienter gestaltet. 

Als nächstes haben wir das Neuladen-Icon, um die Seite neu zu laden. Stelle sicher, dass du deine Änderungen vor dem Neuladen speicherst, da sie sonst verloren gehen.

Daneben findest du das Speichern-Icon (Strg + S). Das Icon wird orange, wenn du Anpassungen an der Website vornimmst. Wenn deine Website bereits online ist, werden die gespeicherten Änderungen direkt auf die Live-Seite gepusht.

Neben dem Speichern kannst du zwischen den Viewports Desktop, Tablet und Mobile wählen, um deine Websites für alle Endgeräte optimal zu gestalten. 

Beim Hovern über die einzelnen Viewports findest du unterschiedliche Geräte aus denen du auswählen kannst, um schnell einen Eindruck zu gewinnen, ob deine Website bei jeder Auflösung optimal angezeigt wird. Außerdem kannst du über die Viewport die responsiven Einstellungen verwalten Neben den Viewports kannst du festlegen, in welcher Zoomstufe deine Website angezeigt werden soll und durch das Schloss-Icon daneben, kannst du entscheiden, ob sich die Zoomstufe bei Größenänderung automatisch an das gewählte Gerät anpassen soll (offenes Schloss-Icon) oder ob es immer nur eine Zoomstufe anzeigen soll (geschlossenes Schloss-Icon).

Unter Design findest du alle globalen Einstellungsmöglichkeiten wie bspw. Farben, "Fonts" bzw. Schriftarten und Button-Design. Dadurch, dass diese Einstellungen für die komplette Website gelten, sind sie perfekt, um einen konsistenten Style zu gewährleisten und eine schnelle Anpassungen der Website auf deine Bedürfnisse zu ermöglichen. Die Design-Einstellungen können aber auch individuell für Elemente überschrieben werden. . 

Unter Seiten öffnet sich ein Panel mit allen Unterseiten deiner Website. Hier kannst du die neue Unterseiten hinzufügen, URLs und Seitennamen bearbeiten, seitenspezifische Meta-Informationen hinterlegen, die Unterseite über ein Passwort schützen und bestimmen, ob die Unterseite von Suchmaschinen gefunden werden soll. Jede geöffnete Seite wird als Tab oben in der Symbolleiste aufgelistet.

Unter To-do kannst du entweder globale To-dos oder Erinnerungen hinterlegen, die auch in der Detailansicht des Kunden unter dem Bereich "To-dos" angezeigt werden oder zu hinterlegst spezifische Kommentare, die du direkt an ein Website-Element heften kannst. Diese Funktion erleichert nicht nur den Feedbackprozess mit deinen Kunden, die eine ähnliche Version - das Feedback Tool - in ihrem Kundenportal aufrufen können, sondern auch Audit- und Feedbackprozess mit deinem Team. Wie genau das To-do Feature im Website Editor und das Feedback Tool im Kundenportal funktioniert, haben wir hier erklärt.

Wenn deine Website noch nicht live ist, findest du in der oberen Menüleiste als nächstes den Button Veröffentlichen. Dieser führt dich direkt zum Domain Manager deiner Website, wo du Domains hinterlegen und die Website veröffentlichen kannst. 

Zu guter Letzt haben wir das Mehr-Menü, dass wir in einem der nächsten Abschnitte weiter erläutern. 

Burger-Menü

Unter dem Burger-Menü findest du weitere wichtige Funktionen für deine Website: 

• Weiterleitungen: Hier kannst du drei unterschiedliche Weiterleitungsarten hinterlegen: 301, 302 und 410. 
• Backups: Hier findest du die automatisch erstellten Backups, die bei einer aktiven Session im Website Editor alle 5-10min erstellt werden. Du kannst auch manuelle Backups erstellen. 
• Website Export: Hier kannst du mit dem entsprechenden Paket deine Website als ZIP-Datei runterladen
• Einstellungen: Hier kannst du deine Präferenzen zur Ansicht und zur Handhabe im Website Editor einstellen, bspw. die Sprache des CMS, ob die Panels beim Speichern geschlossen werden sollen oder offen bleiben oder ob beim Erstellen einer neuen Sprache nur die Startseite oder alle Unterseite übernommen werden sollen. 
• Hilfe: Hier findest du einen direkten Zugang zu unseren Hilferessourcen.
• Shortcuts: Du kannst noch effizienter im CMS arbeiten, wenn du dir die Shortcuts zunutze machst. Neben den Standard-Shortcuts wie Strg + C und Strg + V zum Kopieren und Einfügen haben bieten wir auch einfache Shortcuts zum Hinzufügen von Elementen wie bspw. Strg + 2 zum Hinzufügen von Text-Elementen. Die Shortcuts kannst du übrigens mit dem Shortcut Strg + K öffnen. (Für Mac User gelten die äquivalenten Tastenkombinationen)

Content Sidebar

Die linke Content Sidebar ist in unterschiedliche Kategorien eingeteilt, die es dir erleichtern soll neue Inhalte zur Website hinzuzufügen. In der Content Sidebar unterscheiden wir primär zwischen Elementen, also individuelle Bausteine wie Überschriften, Text oder Bilder und Presets, also vorgefertige Website-Sections, die aus mehreren Elementen bestehen. Beispiele für Presets sind Akkordeons, Bilder-Galerien oder Preistabellen. Während Elemente (hier beispielhaft in rot) vor allem durch die Boxen mit den Icons gekennzeichnet sind, siehst du bei Presets (hier beispielhaft in orange) sogenannte Thumbnails, also kleine Vorschau-Bilder, welche die entsprechende Website-Section illustrieren sollen:

In einigen Kategorien wie bspw. bei Formular findest du sowohl Presets als auch Formular-Elemente. Auch hier ist eine Unterscheidung über die Boxen mit den Thumbnails und den Boxen mit den Icons am einfachsten, um Presets und Elemente auseinander zu halten. Im Fall der Formulare raten wir dazu, mit einem Formular-Preset anzufangen und dieses durch Hinzufügen oder entfernen von Formular-Elementen deinen Bedürfnissen anzupassen. Weitere Informationen zu Formularen findest du hier.

Um Presets und Elemente zu deiner Website hinzuzufügen, kannst du ganz einfach Drag und Drop nutzen, um sie an der gewünschten Stelle einzufügen. 

Mehr-Menü

Unter Mehr findest du weitere hilfreiche Funktionen: 

• Website-Einstellungen: Hier kannst du das Logo global für die Website ändern, sowie ein Favicon und Preview-Bild hinterlegen.
• Daten: Hier kannst du die Kontaktdaten deines Kunden zentral verwalten und durch die Nutzung von Data Binding von einem Ort aus Anpassungen auf der gesamten Website vornehmen. 
• SEO: Hier kannst du die Meta-Angaben für die Website hinterlegen und Code-Snippets, die beim <head> hinterlegt werden sollen, einfügen.
• Sprachen: Hier kannst du unterschiedliche Sprachen auswählen, um deine Website mehrsprachig darzustellen. 
• Collections-Manager: Erstelle und verwalte dynamischen Content wie bspw. Blogs.
• Dateien: Nutze die Dateiverwaltung, um Textdateien, Bilder, Videos oder andere relevante Dateien und Content, den du für die Website deines Kunden benötigst, hochzuladen.
• Content Import: Importiere ganz einfach Texte, Dateien und Bilder von einer anderen Website. 
• Fonts: Hier kannst du die Schriftarten auswählen, die du auf der Website nutzen möchtest und deine eigenen Fonts hochladen. 
• Wünsche: Hier siehst du alle Informationen, Anforderungen Anmerkungen, die deine Kunden in ihrem Kundenportal unter Wünsche für ihre Website hinterlegt haben. 

Footer mit Breadcrumb, Timer und Code Editor

Im Footer des Website Editor findest du die Breadcrumb, die die Hierarchie der Container und Elemente anzeigt und damit auch einen Überblick über die Verschachtelung von Containern, Presets und Elementen. Mit anderen Worten: Jedes Element und seine übergeordneten Container werden zusammen mit allen verwendeten CSS-Klassen innerhalb der Breadcrumbs aufgelistet. Voreingestellte Container zeigen das Farbpaletten-Icon, Container mit Hintergrund zeigen ein Bild-Icon und Animationen werden durch ein Stern-Icon angezeigt. Doppelklicke einfach auf diese Symbole oder den Containernamen und die entsprechenden Einstellungen werden geöffnet. 

Wie wir hier in dem Bild sehen können, wurde ein Text-Element angeklickt, welches wiederum in einem Container liegt, dass im Preis-Tabellen-Preset vorhanden ist usw. 

Du kannst übrigens die Pfeil-Tasten nutzen, um durch die einzelnen Ebenen zu springen und dadurch möglicherweise Elemente erreichen, die zu verschachtelt sind, um sie einfach anzuklicken. 

Auf der rechten Seite des Footers findest du außerdem den Timer, der anzeigt, wie lange du bereits während deiner aktuellen Session im CMS bist. Mit dem Statusmanagement und Timetracking hast du immer einen Überblick über die Zeit, die bereits in das Projekt geflossen ist. Daneben findest du den Code-Button der dir Zugriff auf den Code der Website einschließlich CSS, JavaScript und HTML gibt, um den Code anzusehen oder zu bearbeiten bzw. eigenen Code hinzuzufügen.  

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. 

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.

Website-Sprache festlegen

Das Internet ist allgegenwärtig. Überall auf der Welt werden Websites aufgerufen und angesehen. Damit den Suchenden nur die relevantesten Websites angezeigt werden, achten Suchmaschinen auf viele verschiedene Faktoren - unter anderem die Sprache. Diese wird in der Regel zusätzlich noch mal per HTML Code angegeben. Damit Suchmaschinen umgehend die richtige Sprache erkennen, ist es deshalb sinnvoll, dass du diese bewusst festlegst. 

Bei einsprachigen Websites machst du das, indem du die Sprache in den Kundendaten vorgibst. Diese Sprache legt gleichzeitig auch die zu verwendende Sprache im Kundenportal fest, sofern sie verfügbar ist. Um die Sprache festzulegen, gehe wie folgt vor:

1. Klicke auf eine Website auf  "Aktionen" oder das Ellipsen-Icon - je nachdem in welcher Ansicht du bist. 
2. Klicke auf "Kundendaten bearbeiten"
3. Lege die gewünschte Sprache im Feld "Sprache" fest 

Wenn du bereits in der Detail-Ansicht eines Kunden bist, kannst du das auch direkt auf der linken Seite in der Kundendaten-Box machen. 

Bei mehrsprachigen Websites wird automatisch der richtige Sprach-Code angegeben. Trotzdem ist es sinnvoll, die Sprache wie oben beschrieben festzulegen. Diese Sprache wird dann nämlich als "Fallback" verwendet wird, wenn die vom Website-Besucher im Browser hinterlegte Sprache nicht von dir zur Verfügung gestellt wird. In solchen Fällen ist es oftmals sinnvoll, die englischsprachige Version anzeigen zu lassen. 

Zurück zum Anfang