Lernziel
Lernziel
Nach diesem Kapitel können Sie:
- den Aufbau einer modernen Website verstehen
- den Unterschied zwischen Abschnitten, Containern und Elementen erkennen
- Inhalte sicher verschieben
- neue Bereiche hinzufügen
- Abstände richtig verwenden
- Layoutfehler vermeiden
- Änderungen durchführen, ohne das Design zu beschädigen
Warum wichtig
Warum ist dieses Kapitel wichtig?
Viele Kunden machen nicht beim Bearbeiten von Texten Fehler.
Sie verschieben versehentlich komplette Bereiche.
Dadurch entstehen plötzlich:
- verschobene Bilder
- ungleiche Abstände
- abgeschnittene Elemente
- fehlerhafte Smartphone-Ansichten
Wenn Sie verstehen, wie Wix Studio eine Website aufbaut, werden Ihnen solche Fehler kaum noch passieren.
Wie ist eine Website aufgebaut?
Eine Website besteht aus mehreren Ebenen.
Stellen Sie sich diese wie ein Haus vor.
Haus
↓
Stockwerke
↓
Zimmer
↓
Möbel
Bei Wix Studio bedeutet das:
Website
↓
Seite
↓
Abschnitt (Section)
↓
Container
↓
Elemente
Dieses Prinzip zieht sich durch nahezu jede moderne Website.
Was ist ein Abschnitt?
Ein Abschnitt ist ein größerer Bereich einer Seite.
Beispiele:
- Hero-Bereich
- Leistungen
- Über uns
- Referenzen
- Kontakt
- Footer
Jeder Abschnitt behandelt ein eigenes Thema.
Dadurch bleibt die Seite übersichtlich.
Was ist ein Container?
Ein Container ist ein Bereich innerhalb eines Abschnitts.
Er dient dazu, Inhalte sauber zu gruppieren.
Zum Beispiel:
Ein Abschnitt enthält:
- Überschrift
- Text
- Bild
- Button
Diese vier Elemente befinden sich gemeinsam in einem Container.
Dadurch bleiben sie auch beim Verschieben zusammen.
Was sind Elemente?
Elemente sind einzelne Bestandteile Ihrer Website.
Zum Beispiel:
- Überschrift
- Absatz
- Bild
- Button
- Video
- Formular
- Symbol
- Galerie
Elemente befinden sich immer innerhalb eines Containers.
Der richtige Aufbau
Eine professionell strukturierte Seite könnte folgendermaßen aussehen:
Startseite
│
├── Hero
│ ├── Container
│ │ ├── Überschrift
│ │ ├── Text
│ │ ├── Button
│ │ └── Bild
│
├── Leistungen
│ ├── Container
│ │ ├── Leistung 1
│ │ ├── Leistung 2
│ │ └── Leistung 3
│
├── Referenzen
│
├── Kontakt
│
└── Footer
Dadurch bleibt jede Seite logisch aufgebaut.
Schritt für Schritt
Abschnitt bearbeiten – Schritt für Schritt
Öffnen Sie Ihre Website im Editor.
Wix Studio · Startseite im Editor
Startseite im Editor
Einen neuen Abschnitt hinzufügen
Falls Ihre Website erweitert werden soll:
1. Gewünschte Position auswählen 2. "Abschnitt hinzufügen" wählen 3. Passendes Layout auswählen 4. Inhalte ergänzen 5. Vorschau kontrollieren
Elemente verschieben
Verschieben Sie Elemente möglichst innerhalb ihres Containers.
Dadurch bleibt das Layout stabil.
Vermeiden Sie es, Elemente frei auf der Seite zu platzieren, wenn dadurch die Struktur verloren geht.
Abstände verstehen
Abstände sorgen dafür, dass Inhalte angenehm lesbar bleiben.
Zu wenig Abstand wirkt unruhig.
Zu viel Abstand lässt Seiten unnötig lang erscheinen.
Achten Sie auf ein gleichmäßiges Erscheinungsbild.
Weißraum ist kein leerer Platz
Viele Unternehmer möchten jeden freien Bereich mit Inhalten füllen.
Das Gegenteil ist häufig besser.
Freier Platz hilft Besuchern dabei,
- Inhalte schneller zu erfassen,
- sich besser zu orientieren
- und wichtige Informationen wahrzunehmen.
Ein aufgeräumtes Layout wirkt hochwertiger.
Einheitliche Struktur
Nutzen Sie auf Ihrer Website möglichst dieselbe Reihenfolge.
Beispiel:
Überschrift
↓
Einleitung
↓
Bild
↓
Beschreibung
↓
Button
Wiederholen Sie dieses Muster auf allen Seiten.
Dadurch entsteht ein professioneller Gesamteindruck.
Best Practice
Web by David Best Practice
Wir arbeiten grundsätzlich mit klar getrennten Abschnitten.
Jeder Abschnitt verfolgt nur ein Ziel.
Zum Beispiel:
Hero
↓
Aufmerksamkeit erzeugen
Leistungen
↓
Kompetenz zeigen
Referenzen
↓
Vertrauen schaffen
Kontakt
↓
Anfrage erhalten
So wird der Besucher Schritt für Schritt durch die Website geführt.
Aus der Praxis
Verkaufspsychologie
Eine gut strukturierte Website reduziert die mentale Belastung des Besuchers.
Wenn Informationen logisch angeordnet sind, findet der Nutzer schneller, wonach er sucht.
Je einfacher die Orientierung, desto höher ist die Wahrscheinlichkeit, dass Besucher Kontakt aufnehmen oder einen Kauf abschließen.
Aus der Praxis
Expertenwissen
Professionelle Websites folgen häufig einem wiederkehrenden Muster:
1. Aufmerksamkeit gewinnen 2. Problem ansprechen 3. Lösung präsentieren 4. Vertrauen schaffen 5. Zur Handlung auffordern Diese Reihenfolge hilft Besuchern, Informationen leichter zu verarbeiten und Entscheidungen zu treffen.
Häufige Fehler
Häufige Fehler
Zu viele Elemente in einem Abschnitt
Überladene Bereiche wirken unübersichtlich.
Unregelmäßige Abstände
Ein uneinheitliches Layout wirkt schnell unprofessionell.
Inhalte ohne Struktur
Besucher wissen nicht, wo sie zuerst hinschauen sollen.
Frei platzierte Elemente
Dadurch entstehen häufig Probleme in der mobilen Ansicht.
Unterschiedliche Layouts auf jeder Seite
Eine einheitliche Gestaltung vermittelt Professionalität.
Profi-Tipp
Profi-Tipp
Bevor Sie einen neuen Abschnitt erstellen, fragen Sie sich:
Welches Ziel verfolgt dieser Bereich?
Wenn Sie diese Frage nicht klar beantworten können, wird der Abschnitt wahrscheinlich auch für Ihre Besucher unklar sein.
Aus der Praxis
Praxis aus unserem Agenturalltag
Bei vielen neuen Kunden sehen wir denselben Fehler:
Sie möchten möglichst viele Informationen auf der Startseite unterbringen.
Unsere Erfahrung zeigt jedoch:
Weniger, dafür klar strukturierte Inhalte führen oft zu einer besseren Nutzererfahrung.
Nicht die Menge der Informationen entscheidet, sondern ihre Reihenfolge und Verständlichkeit.
Checkliste
Checkliste
Praxisaufgabe
Praxisaufgabe
Analysieren Sie Ihre Startseite.
Notieren Sie für jeden Abschnitt:
- Welches Ziel verfolgt dieser Bereich?
- Ist das Ziel innerhalb weniger Sekunden erkennbar?
- Gibt es Inhalte, die entfernt oder verschoben werden sollten?
Erstellen Sie anschließend eine Liste mit möglichen Verbesserungen.
Mini-Projekt
Mini-Projekt
Skizzieren Sie den Aufbau Ihrer idealen Startseite.
Nutzen Sie dabei folgende Struktur:
Hero
↓
Leistungen
↓
Vorteile
↓
Referenzen
↓
Über uns
↓
Häufige Fragen
↓
Kontakt
↓
Footer
Überlegen Sie, ob Ihre aktuelle Website diesem Aufbau bereits folgt oder an welchen Stellen Optimierungspotenzial besteht.
Wissenscheck
Quiz
Woraus besteht eine moderne Website?
Warum sind Container sinnvoll?
Warum ist Weißraum wichtig?
Welche Aussage trifft zu?
Zusammenfassung
Kapitelzusammenfassung
Sie haben gelernt:
- wie eine Website strukturiert ist,
- welche Aufgaben Abschnitte, Container und Elemente erfüllen,
- wie Sie Inhalte sicher organisieren,
- warum Weißraum und Abstände wichtig sind,
- und wie eine klare Struktur das Nutzungserlebnis verbessert.
Vorschau auf Teil 2 – Design
Kapitel 9
Farben & Corporate Design – Ein professioneller Markenauftritt
In diesem Kapitel lernen Sie nicht nur, wie Sie Farben in Wix Studio ändern, sondern auch, wie
Farben Vertrauen schaffen, Marken wiedererkennbar machen und Besucher unbewusst
beeinflussen. Wir behandeln Themen wie Farbpaletten, Kontraste, Barrierefreiheit, Corporate
Design und die psychologische Wirkung von Farben – damit Ihre Kunden ihre Website nicht nur schöner, sondern auch wirkungsvoller gestalten. Dieses Kapitel wird eines der wertvollsten im gesamten Handbuch.