Die Startseite gestalten – Tipps für einen übersichtlichen und ansprechenden Einstieg

Wenige Hauptthemen auswählen

• Konzentrieren Sie sich auf die wichtigsten Inhalte Ihrer Website.
• Aktuelle Inhalte sichtbar platzieren
• Neuigkeiten und Termine sollten möglichst weit oben erscheinen.
• Wiederkehrende Gestaltung verwenden
• Nutzen Sie einheitliche Farben, Abstände und Icon-Stile.
• Besucher gezielt weiterführen

• Verwenden Sie Seiten-Teaser, Buttons und Verlinkungen, um Besucher zu den gewünschten Informationen zu leiten.

   

Überprüfen, bzw. fragen Sie sich gelegentlich:

Würde sich ein neuer Besucher innerhalb weniger Sekunden zurechtfinden und nach höchstens drei Klicks das Gesuchte finden? 

Hinweis

Probieren Sie verschiedene Gestaltungsmöglichkeiten einfach aus. Auch ein Wechsel zwischen unterschiedlichen Themes ist jederzeit möglich. Dabei gehen keine Inhalte verloren. So können Sie in Ruhe testen, welche Darstellung am besten zu Ihrer Website passt.

Das Inhaltselement "Seiten-Teaser" eignet sich hervorragend, um Besucher auf wichtige Unterseiten hinzuweisen.

Dabei werden automatisch die Überschrift und der Teasertext einer bereits vorhandenen Seite angezeigt. So können Sie beispielsweise auf Angebote, Veranstaltungen, Gruppen oder besondere Aktionen aufmerksam machen.

So funktioniert's:

1. Fügen Sie das Inhaltselement "Seiten-Teaser" ein.
2. Beginnen Sie im Bearbeitungsformular mit der Eingabe des Seitentitels. 
3. Die passende Seite wird automatisch aus der Datenbank vorgeschlagen. 
4. Wählen Sie die gewünschte Seite aus.

Hinweis: Es können ausschließlich bereits vorhandene Seiten ausgewählt werden.

Tipp

Nutzen Sie Seiten-Teaser, um wichtige Menüpunkte der Website zusätzlich auf der Startseite sichtbar zu machen. In unserem Beispiel wurde ein Teil der Hauptnavigation nochmals als Teaserbereich dargestellt.

Der frühere „Icon-Color-Block“ heißt jetzt "Icon-Block" und wurde optisch überarbeitet.

Mit diesem Inhaltselement lassen sich Informationen besonders ansprechend und übersichtlich präsentieren.

Vorteile

• Drei verschiedene Grundlayouts stehen zur Auswahl.
• Jedes Layout kann mit oder ohne Rahmen dargestellt werden.
• Farben können frei gewählt werden.
• Icons lassen sich individuell festlegen.

Icons auswählen

Alle verfügbaren Icons finden Sie unter:

https://fontawesome.com/search?utm_source=chatgpt.com

Wichtig:PRO-Icons werden nicht unterstützt. Verwenden Sie ausschließlich die frei verfügbaren Icons.

Geeignete Einsatzbereiche

• Ansprechpartner
• Öffnungszeiten
• Kontaktmöglichkeiten
• Angebote
•  und DienstleistungenSchnellzugriffe auf wichtige Bereiche

Tipp

Verwenden Sie möglichst wenige unterschiedliche Farben und Icons. Eine einheitliche Gestaltung sorgt für ein ruhigeres Gesamtbild.

Mit dem Inhaltselement „Spalten mit Text“ lassen sich einzelne Inhalte oder mehrere Themenbereiche nebeneinander übersichtlich präsentieren.

Dies eignet sich besonders für:

• Kurzinfos
• Hinweise
• Angebote
• Projekte
• Kontaktinformationen

Verfügbare Designs

Terra

Beim Design "Terra" erhält der gesamte Textbereich eine farbige Hintergrundfläche.

Besonders geeignet für:

• wichtige Hinweise
• aktuelle Informationen
• hervorgehobene Inhalte

Die Hintergrundfarbe kann individuell gewählt werden.

Orbis

Beim Design "Orbis" wird der Textbereich mit einem Rahmen versehen.

Besonders geeignet für:

• strukturierte Informationsblöcke
• dezente Hervorhebungen
• klar voneinander getrennte Inhalte

Auch die Rahmenfarbe kann individuell angepasst werden.

Tipp

Verwenden Sie Terra für besonders wichtige Inhalte und Orbis für ergänzende Informationen. Dadurch entsteht eine klare visuelle Hierarchie.
 

Im Theme "Clear" können zusätzlich seitliche Icons eingeblendet werden.

Diese lassen sich flexibel verknüpfen, beispielsweise mit:

• dem Kontaktformular,
• dem E-Mail-Kontakt,
• YouTube,
• Instagram,
• Facebook 
• oder beliebigen anderen Seiten der Website.

Vorteile

• wichtige Funktionen sind jederzeit erreichbar
• Besucher finden Kontaktmöglichkeiten schneller
• Social-Media-Kanäle werden besser sichtbar

Tipp

Beschränken Sie sich auf die wichtigsten Verlinkungen. Zu viele Icons können schnell unübersichtlich wirken.

Das Inhaltselement „Blockauswahl (breit/schmal)“ eignet sich besonders gut für Startseiten.

Damit können zwei unterschiedliche Inhalte nebeneinander dargestellt werden, wobei ein Bereich mehr Platz erhält als der andere.

Beispiel

• Breiter Bereich: Nachrichten oder aktuelle Meldungen
• Schmaler Bereich: Evangelische Termine oder Veranstaltungshinweise

So erkennen Besucher sofort, welche Inhalte im Vordergrund stehen.

Tipp

Nutzen Sie den breiten Bereich für regelmäßig aktualisierte Inhalte. Dadurch wirkt die Website lebendig und aktuell.

Auch ein einfaches Gestaltungsmittel kann viel bewirken:

Der im Texteditor verfügbare "Strich" eignet sich hervorragend, um Themenbereiche optisch voneinander zu trennen.

Vorteile

• bessere Lesbarkeit
• klarere Struktur
• weniger Informationsüberladung

Tipp

Setzen Sie Trennlinien gezielt ein. Zu viele Trennungen können wiederum unruhig wirken.