Kompatibilität:

WebSite X5 Evo und Pro

Sie haben die Seiten Ihrer Website erstellt, Texte und Bilder eingefügt und das Navigationsmenü organisiert. Bevor Sie das Projekt online veröffentlichen, sollten Sie jedoch immer überprüfen, ob alles korrekt funktioniert.


Mit der Projektvorschau von WebSite X5 können Sie Ihre Website direkt auf Ihrem Computer durchsuchen und das Endergebnis vor der Veröffentlichung überprüfen. So können Sie das Erscheinungsbild der Seiten, die Funktionalität der Links und das Verhalten der Inhalte kontrollieren und eventuelle Probleme beheben, bevor die Website für Besucher sichtbar wird.


In dieser Anleitung erfahren Sie:


#tip - Wenn Sie Ihre Website während der Arbeit regelmäßig in der Vorschau überprüfen, können Sie Fehler frühzeitig erkennen und ein sorgfältigeres sowie professionelleres Endergebnis erzielen.


Wie Sie die Projektvorschau öffnen

Die Anzeige Ihrer Website in der Vorschau ist sehr einfach. 

Klicken Sie einfach auf die Schaltfläche Vorschau, die in der oberen Leiste von WebSite X5 jederzeit verfügbar ist.



Nach wenigen Augenblicken wird der integrierte Browser geöffnet, und Sie können die Website genau so durchsuchen, wie es ein Besucher tun würde.


#tip - Für die lokale Vorschau verwendet WebSite X5 einen integrierten Browser auf Basis von Chromium (http://www.chromium.org/), derselben Technologie, auf der auch Google Chrome™ basiert.


Was Sie in der Vorschau überprüfen können

Die lokale Vorschau dient nicht nur dazu, die Website anzuzeigen: Sie ist ein nützliches Werkzeug, um die geleistete Arbeit vor der Veröffentlichung des Projekts konkret zu überprüfen.


Sie können sie verwenden, um Folgendes zu kontrollieren:

  • das Erscheinungsbild der Seiten;
  • die korrekte Darstellung von Texten und Bildern;
  • die Funktionsfähigkeit der Menüs;
  • interne und externe Verlinkungen;
  • Formulare und interaktive Inhalte;
  • das responsive Verhalten der Website.


Während der Navigation können Sie außerdem schnell von der Vorschau zurück in die Arbeitsumgebung von WebSite X5 wechseln, um Seiten und Inhalte zu korrigieren und so den Überarbeitungsprozess deutlich zu beschleunigen.


Aus diesem Grund empfiehlt es sich, die Vorschau regelmäßig während der gesamten Entwicklung des Projekts zu verwenden und nicht erst unmittelbar vor der endgültigen Veröffentlichung.


Wie die lokale Vorschau dargestellt wird

Sobald die Vorschau geöffnet ist, stellt der integrierte Browser von WebSite X5 verschiedene Werkzeuge zur Verfügung, um die Website zu durchsuchen und schnell Änderungen am Projekt vorzunehmen.


Sie können Folgendes verwenden:

  • Zurück / Weiter / Startseite, um zwischen bereits besuchten Seiten zu wechseln und schnell zur Startseite zurückzukehren.
  • Die Adressleiste, um den Pfad der aktuell geöffneten Seite anzuzeigen.
  • Diese Seite bearbeiten, um direkt zur aktuell angezeigten Seite zurückzukehren und deren Inhalte zu bearbeiten. Wenn Sie sich auf einer Blog-Seite, einer Seite des geschützten Bereichs oder im E-Commerce-Warenkorb befinden, gelangen Sie zum entsprechenden Abschnitt von Schritt 1 zurück.
  • Dieses Objekt bearbeiten, um den Bearbeitungsmodus zu aktivieren/deaktivieren und direkt auf ein bestimmtes Element (Objekt oder Vorlagenbereich) der Seite einzuwirken.
  • Mobile Vorschau (nur Pro), um die Website über einen QR-Code auf Ihrem Smartphone anzuzeigen. Verbinden Sie Ihr Mobilgerät einfach mit demselben Netzwerk wie Ihren PC, scannen Sie den QR-Code oder öffnen Sie die angegebene URL: Sie sehen eine Vorschau Ihrer Website und können deren Verhalten überprüfen.
  • Website in einem anderen Browser anzeigen (nur Pro), um das Verhalten des Projekts mit verschiedenen auf Ihrem Computer installierten Browsern zu überprüfen.


Einer der interessantesten Vorteile der Vorschau besteht darin, dass Sie schnell zwischen dem Durchsuchen und dem Bearbeiten der Website wechseln können, ohne die betreffende Seite oder das zu aktualisierende Objekt manuell suchen zu müssen.


#tip - Sie können den Bearbeitungsmodus für Objekte auch schnell aktivieren, indem Sie gleichzeitig die Tasten STRG + UMSCHALT gedrückt halten.


Wie Sie eine responsive Website überprüfen

Wenn Sie eine responsive Website erstellen (siehe Wie erstellt man eine responsive Website?), bietet die Vorschau spezielle Werkzeuge, um das Verhalten der Seiten bei unterschiedlichen Bildschirmauflösungen zu überprüfen.


Insbesondere können Sie die Auflösungsleiste verwenden, die die im Projekt konfigurierten Breakpoints anzeigt.


Über die Bedienelemente  können Sie:

  • verschiedene Bildschirmbreiten simulieren;
  • die Anpassung der Inhalte überprüfen;
  • die Anordnung der Objekte an den verschiedenen Breakpoints kontrollieren;
  • mögliche Layoutprobleme vor der Veröffentlichung erkennen.


Außerdem steht der Befehl Reihenfolge der Linearisierung anzeigen zur Verfügung. Dieser hebt die auf der Seite vorhandenen Objekte hervor und nummeriert sie, sodass Sie die Reihenfolge ihrer Darstellung bei niedrigeren Auflösungen leicht überprüfen können.


Diese Werkzeuge sind besonders nützlich, um sicherzustellen, dass die Website auch auf Smartphones und Tablets ein gutes Nutzungserlebnis bietet.


#tip - Weitere Informationen finden Sie auch in der Anleitung Wie überprüft man die Funktionsweise einer responsiven Website in der lokalen Vorschau?


Wie Sie die Einstellungen für die Vorschau festlegen

WebSite X5 ermöglicht es Ihnen, das Verhalten der Vorschau über verschiedene Optionen im Fenster Einstellungen anzupassen.


So greifen Sie darauf zu:

  • Öffnen Sie das Willkommensfenster;
  • klicken Sie auf die Schaltfläche  Einstellungen.


Zu den verfügbaren Optionen gehören:

  • Seiten während der Projektbearbeitung erstellen

Wenn diese Option aktiviert ist, aktualisiert das Programm automatisch alle Elemente, die von den vorgenommenen Änderungen betroffen sind.

  • Vorschau während der Projektbearbeitung aktualisieren

Diese Option ist verfügbar, wenn die vorherige Option aktiviert wurde, und aktualisiert den Vorschau-Browser automatisch während der Arbeit am Projekt.

Dadurch können Sie die vorgenommenen Änderungen sofort sehen, ohne die Vorschau erneut öffnen oder manuell aktualisieren zu müssen.


Praktische Tipps

Um die Projektvorschau optimal zu nutzen:

  • überprüfen Sie die Website regelmäßig während der Entwicklung;
  • kontrollieren Sie Menüs und Verlinkungen immer vor der Veröffentlichung;
  • prüfen Sie die korrekte Darstellung der Bilder;
  • testen Sie das responsive Verhalten bei verschiedenen Bildschirmauflösungen;
  • nutzen Sie die Funktionen zur schnellen Bearbeitung, um mögliche Fehler effizienter zu korrigieren.


Einige Minuten für die abschließenden Kontrollen können dazu beitragen, eine professionellere und sorgfältiger ausgearbeitete Website zu veröffentlichen.


Zusammenfassung

Die Projektvorschau ist das Werkzeug, mit dem Sie Ihre Website vor der Online-Veröffentlichung überprüfen können.


Dank des integrierten Browsers von WebSite X5 können Sie Design, Inhalte, Verlinkungen und das responsive Verhalten Ihrer Website kontrollieren und gleichzeitig schnell zum Editor zurückkehren, um gegebenenfalls Änderungen vorzunehmen.


Wird die Vorschau regelmäßig während der Entwicklung genutzt, hilft sie Ihnen dabei, mögliche Probleme frühzeitig zu erkennen und zu beheben, bevor die Website veröffentlicht und für Besucher verfügbar gemacht wird.