Die Basis für eine integrierte Webseite bildet das entsprechende Modul, das über die App-Verwaltung installiert wird. Bereits vor der aktiven Nutzung generiert das System für Dokumente wie Angebote oder Verkaufsaufträge eine Webansicht, die über Header und Footer verfügt. Nach der Installation unterstützt ein Assistent bei der Auswahl von Templates und grundlegenden Designs.
Im Editor-Modus stehen zentrale Steuerungselemente zur Verfügung:
Veröffentlichung: Ein Status-Indikator zeigt an, ob die Seite für externe Besucher sichtbar ist.
Mobil-Vorschau: Per Klick lässt sich die Ansicht auf mobile Endgeräte umschalten, um das responsive Design und Elemente wie das Burgermenü zu prüfen.
Struktur: Neue Unterseiten, Blogs oder Foren können direkt über das Menü hinzugefügt werden, sofern die entsprechenden Apps installiert sind.
Globales Design und technische Struktur
Das Erscheinungsbild der Webseite wird maßgeblich über das Design-Tab gesteuert. Hier werden zentrale Definitionen festgelegt, die technisch einer CSS-Datei entsprechen. Der Vorteil dieser Trennung von Inhalt und Design liegt darin, dass optische Anpassungen – wie Schriftarten, Farbschemata oder Rahmenformen – global vorgenommen werden können, ohne jede Unterseite einzeln bearbeiten zu müssen.
Besonders wichtig ist die Definition der Überschriften (H1 bis H4). Diese dienen nicht nur der optischen Strukturierung, sondern sind essenziell für die Suchmaschinenoptimierung (SEO), da Crawler die Relevanz von Inhalten anhand dieser Hierarchie bewerten. Bei der Wahl der Schriftarten bietet das System Zugriff auf eine umfangreiche Bibliothek. Um datenschutzkonform zu agieren, können diese Schriften lokal auf dem eigenen System gespeichert werden, statt sie bei jedem Seitenaufruf von externen Servern zu laden.
Gestaltung mit Bausteinen und Rastern
Der Website-Builder arbeitet mit einem intuitiven Drag-and-Drop-System. Nutzer können aus verschiedenen Bausteinen wählen, die entweder in einem klassischen Spalten-Layout oder in einem modernen Gitter-Modus (Grid) angeordnet werden.
Gitter-Modus: Dieser ermöglicht das freie Verschieben und Überlappen von Elementen. Hierbei ist jedoch die Reihenfolge für die mobile Ansicht manuell zu prüfen, damit Inhalte auf kleinen Displays logisch untereinander erscheinen.
Sichtbarkeitssteuerung: Elemente oder ganze Blöcke können gezielt für bestimmte Endgeräte ein- oder ausgeblendet werden. So lässt sich beispielsweise ein komplexes Banner am Desktop anzeigen, während mobil eine reduzierte, schnell ladende Version erscheint.
Dynamische Bedingungen: Die Anzeige von Inhalten kann an Bedingungen geknüpft werden, wie etwa das Herkunftsland des Besuchers oder die Quelle (z. B. Facebook-Anzeigen).
Medieneinsatz und Feinjustierung
Bilder sollten idealerweise bereits vor dem Hochladen im korrekten Seitenverhältnis und in ausreichender Auflösung vorliegen. Das System unterstützt moderne Formate wie WebP zur Kompression, übernimmt jedoch Transformationen wie Zuschnitte per Code. Für maximale Kontrolle über die Darstellung in verschiedenen Browsern ist eine Vorab-Optimierung der Mediendateien ratsam.
Zusätzlich lassen sich Header (Kopfzeile) und Footer (Fußzeile) global definieren. Änderungen an diesen Bereichen wirken sich sofort auf alle Unterseiten aus. Für fortgeschrittene Anwendungen bietet das System Felder für benutzerdefinierten Code im Head- oder Body-Bereich an, was insbesondere für die Einbindung von Tracking-Tools relevant ist.
Abschließend ermöglicht der Menü-Editor eine einfache Strukturierung der Navigation. Per Drag-and-Drop lassen sich Menüpunkte sortieren, umbenennen oder in verschachtelten Mega-Menüs organisieren. Durch diese tiefe Integration sind alle Webinhalte stets konsistent mit den hinterlegten Unternehmensdaten verbunden.
Im Video Schritt für Schritt erklärt
Damit du dir das Ganze auch live ansehen kannst, haben wir den Prozess in einem Video festgehalten. Darin zeigen wir dir Schritt für Schritt, wie du den Website-Builder bedienst, globale Designs festlegst und deine erste Unterseite veröffentlichst.