Kompatibilität:

WebSite X5 Evo und Pro

Bei der Erstellung einer Website hängt das visuelle und funktionale Erscheinungsbild der Seiten weitgehend von der Struktur des Templates ab. Um eine konsistente, professionelle und leicht navigierbare Website zu erstellen, ist es daher wichtig, die Rolle der wichtigsten Bestandteile zu verstehen.

  • Header: Dies ist der obere Bereich der Website, der beim Öffnen der Seite sofort sichtbar ist. Er enthält in der Regel das Logo, das Hauptmenü, Navigationswerkzeuge, ein Suchfeld sowie strategische Schaltflächen wie Login oder Kontakt. 
  • Footer: Dies ist der abschließende Bereich der Seite. Er kann sich auf grundlegende Inhalte wie Umsatzsteuer-ID, Copyright und Richtlinien beschränken oder zusätzliche Menüs, Schnellzugriffe, soziale Netzwerke, Newsletter-Formulare und Kontaktinformationen enthalten.
  • Seitenleiste: nicht immer vorhanden, ist sie eine seitlich neben dem Hauptinhalt positionierte Spalte, rechts oder links. Sie wird häufig für Bereichsmenüs, unterstützende Inhalte, Banner oder Werbeflächen verwendet.

Wenn Sie diese Bereiche korrekt konfigurieren, können Sie das Template gezielter anpassen und so Struktur, Benutzerfreundlichkeit und Nutzererlebnis auf der gesamten Website verbessern.



Warum Header, Footer und Seitenleiste wichtig sind

Eine korrekte Verwaltung dieser Bereiche ermöglicht es Ihnen:

  • die visuelle Identität und das Branding zu stärken;
  • die Navigation und Barrierefreiheit zu verbessern;
  • eine einheitliche Struktur auf allen Seiten zu gewährleisten;
  • den Zugriff auf die wichtigsten Inhalte zu erleichtern;
  • die Benutzerfreundlichkeit und das Nutzererlebnis zu verbessern.


So bearbeiten Sie Header, Footer und Seitenleiste

Wenn Sie ein vordefiniertes Template verwenden, sind alle Elemente bereits eingerichtet, müssen jedoch angepasst werden, um sie mit Ihren eigenen Inhalten zu personalisieren: Beispielsweise müssen Sie das Platzhalterbild durch Ihr eigenes Logo ersetzen. Wenn Sie hingegen ein Template von Grund auf neu erstellen, müssen Sie die Struktur selbst definieren. 


In beiden Fällen ermöglicht Ihnen das richtige Bearbeiten dieser Bereiche, eine konsistentere, professionellere und effektivere Website zu erstellen. Der Einfachheit halber gehen wir davon aus, dass Sie mit einem vordefinierten Template arbeiten:

1. Zugriff auf den Template-Inhalt

  • Gehen Sie zu Schritt 2 - Template-Einstellungen.
  • Klicken Sie auf Template-Inhalt. Dieses Fenster ist in die Bereiche Header, Footer und Seitenleiste unterteilt: Die verfügbaren Befehle und Optionen sind in allen drei Bereichen identisch.
  • Wählen Sie den Bereich aus, den Sie bearbeiten möchten, z. B. Header. 

2. Vorhandene Objekte anzeigen und verwalten

  • Der Arbeitsbereich zeigt das Hintergrundbild im Maßstab 1:1 sowie alle darauf eingefügten Objekte. Wenn der Platz nicht ausreicht, verwenden Sie die Scrollleisten, um die gewünschten Elemente sichtbar zu machen.
  • Hier können Sie bestehende Elemente bearbeiten, neue Objekte hinzufügen, überflüssige Inhalte entfernen und Elemente neu positionieren.

3. Inhalte bearbeiten oder hinzufügen

  • Wenn Sie beispielsweise das Logo ändern möchten, klicken Sie auf das entsprechende Bildobjekt, um es auszuwählen, und anschließend auf die Schaltfläche  , um das Einstellungsfenster zu öffnen.
  • Wenn Sie hingegen einen Titel hinzufügen möchten, klicken Sie auf das Symbol des Titel-Objekts und ziehen Sie es in den Arbeitsbereich. Verwenden Sie die Auswahlpunkte, um das Objekt zu positionieren und zu skalieren, und doppelklicken Sie darauf, um die Einstellungen zu öffnen.  

Für die Gestaltung des Headers steht Ihnen die vollständige Liste der Objekte zur Verfügung: Wählen Sie einfach die gewünschten aus und platzieren Sie sie im Arbeitsbereich. 

4. Layout und visuelle Hierarchie optimieren

  • Um eingefügte Objekte präziser zu positionieren, klicken Sie auf die Schaltfläche Anordnen und nutzen Sie die Befehle für Position, Größe, Ausrichtung und Verteilung.
  • Wenn sich Objekte überlappen, verwenden Sie die Schaltflächen In den Vordergrund und In den Hintergrund, um die Reihenfolge der Anzeige festzulegen.  


Die gleichen Vorgehensweisen gelten identisch auch für Footer und Seitenleiste.


#tip - Mehrfachauswahl. Um die Arbeit zu beschleunigen, können Sie mehrere Objekte gleichzeitig auswählen, indem Sie die STRG- oder SHIFT-Taste gedrückt halten. Alternativ können Sie im Arbeitsbereich klicken und bei gedrückter linker Maustaste ein Auswahlrechteck ziehen, das alle gewünschten Objekte umfasst.


So passen Sie Header und Footer in responsiven Websites an

Wenn Sie eine responsive Website erstellen (Sie haben die Option Responsive Website unter Schritt 2 - Template-Einstellungen > Auflösungen und Responsive Design aktiviert), steht Ihnen in den Bereichen zur Definition von Header, Footer und Seitenleiste die Responsive Bar  zur Verfügung. Diese zeigt alle festgelegten Breakpoints an und unterteilt sie in entsprechende Bereiche.


Um die Anzeige von Header, Footer und Seitenleiste für jeden Breakpoint zu verwalten, gehen Sie wie folgt vor:

1. Desktop-Version konfigurieren

  • Wählen Sie in der Responsive Bar den Bereich für die Desktop-Ansicht aus.
  • Erstellen Sie den Header, indem Sie die im vorherigen Abschnitt beschriebenen Schritte befolgen.

2. Jeden Breakpoint über die Responsive Bar prüfen

  • Klicken Sie auf die Responsive Bar, um nacheinander jeden weiteren Bereich auszuwählen.
  • Überprüfen Sie die Anordnung der Objekte, kontrollieren Sie die Abstände und passen Sie die Größen an.

3. Ausgeblendete Objekte verwalten

  • Der verfügbare Platz wird geringer: Prüfen Sie, ob alle Objekte beibehalten werden können. Um ein Objekt auszublenden, wählen Sie es aus und klicken Sie auf die Schaltfläche Verwaltung ausgeblendeter Objekte: Sie können festlegen, ob das Objekt nur in der aktuellen Ansicht oder auch in allen kleineren Ansichten ausgeblendet wird.
  • Um ein zuvor ausgeblendetes Objekt wieder sichtbar zu machen, wählen Sie in der Responsive Bar den gewünschten Bereich aus, klicken Sie auf die Schaltfläche und wählen Sie den Befehl Verwaltung ausgeblendeter Objekte für diese Ansicht: Wählen Sie aus der Liste der ausgeblendeten Objekte das gewünschte aus und klicken Sie, um es wieder sichtbar zu machen.  


#tip. In kleineren Breakpoints empfiehlt es sich, Header, Footer und Seitenleiste zu vereinfachen und nur die wirklich wesentlichen Elemente beizubehalten, um eine visuelle Überladung zu vermeiden. Weitere Informationen finden Sie unter Responsive Template. Wie passt man das Layout der Website an verschiedene Geräte an?


Praktische Tipps

Um bessere Ergebnisse zu erzielen:

  • halten Sie eine einheitliche Struktur auf allen Seiten ein;
  • setzen Sie auf Klarheit und Einfachheit;
  • vermeiden Sie eine Überladung von Header und Footer;
  • prüfen Sie stets Lesbarkeit und Navigation;
  • nutzen Sie die Mehrfachauswahl, um schneller zu arbeiten;
  • überprüfen Sie jeden Breakpoint;
  • testen Sie die Website in der lokalen Vorschau.


Zusammenfassung

Header, Footer und Seitenleiste sind grundlegende Komponenten für den Aufbau einer gut strukturierten, professionellen und leicht navigierbaren Website.


Mit WebSite X5 können Sie diese visuell bearbeiten und Struktur, Inhalte sowie das responsive Verhalten anpassen, ohne in den Code eingreifen zu müssen.


Eine sorgfältige Gestaltung des Templates ermöglicht es Ihnen, effektivere, konsistentere und leistungsfähigere Websites auf jedem Gerät zu erstellen.