Design anpassen

Im letzten Schritt des News-Setups wählst du das Layout und die Darstellung für dein News-Modul. Diese Einstellungen bestimmen das grundlegende Aussehen der Artikel-Übersicht und Artikel-Detailansicht.

Übersicht

Das News-Design besteht aus mehreren Bereichen:

Artikel-Layout

Liste, Karten oder Magazin-Stil.

Bild-Darstellung

Wie Artikel-Bilder angezeigt werden.

Kategorie-Anzeige

Wie Kategorien dargestellt werden.

Vorschau-Optionen

Wie viel vom Artikel angezeigt wird.

---

Layout-Optionen

Das News-Modul bietet 3 Layout-Optionen für die Artikel-Übersicht:

1. Liste

Eigenschaft	Wert
Stil	Vertikale Liste
Platzbedarf	Kompakt
Übersicht	Viele Artikel auf einen Blick

Artikel werden in einer vertikalen Liste angezeigt.

Design-Merkmale:

• Kompakte Darstellung
• Artikel-Titel prominent
• Kleines Vorschaubild (Thumbnail)
• Datum und Kategorie in einer Zeile
• Schnelles Scrollen

Vorteile:

• Mehr Artikel sichtbar
• Schnelle Übersicht
• Klassisches News-Feeling
• Platzsparend

Empfohlen für:

• News-reiche Apps
• Mobile-optimierte Ansichten
• Nutzer, die viele Artikel scannen
• Schnelle Information

---

2. Karten

Eigenschaft	Wert
Stil	Moderne Cards
Platzbedarf	Mehr Platz
Übersicht	Weniger, aber detaillierter

Artikel werden als moderne Karten angezeigt.

Design-Merkmale:

• Großes Artikelbild
• Titel und Vorschautext sichtbar
• Kategorie-Badge
• Schatten und Abstände
• Modernes Look & Feel

Vorteile:

• Visuell ansprechend
• Bilder kommen zur Geltung
• Mehr Kontext pro Artikel
• Moderne Ästhetik

Empfohlen für:

• Bild-lastige News
• Magazin-ähnliche Apps
• Desktop-optimierte Ansichten
• Design-fokussierte Projekte

---

3. Magazin

Eigenschaft	Wert
Stil	Editorial Layout
Platzbedarf	Am meisten
Übersicht	Wenige, hervorgehobene Artikel

Artikel werden im Magazin-Stil angezeigt.

Design-Merkmale:

• Großer Hero-Artikel oben
• Kleinere Artikel darunter
• Featured-Artikel hervorgehoben
• Abwechslungsreiches Grid
• Premium-Feeling

Vorteile:

• Professionelles Aussehen
• Featured-Artikel prominent
• Storytelling-Fokus
• Hochwertiger Eindruck

Empfohlen für:

• Lifestyle-Apps
• Unternehmens-Magazine
• Premium-Inhalte
• Wenige, aber hochwertige Artikel

---

Bild-Darstellung

Wähle, wie Artikel-Bilder angezeigt werden:

Optionen

Option	Beschreibung	Beispiel
Thumbnail	Kleines quadratisches Bild	80x80 px
Banner	Breites Bild oben	Vollbreite
Hintergrund	Bild als Card-Hintergrund	Mit Overlay
Versteckt	Kein Bild in Übersicht	Nur im Detail

Thumbnail:

• Platzsparend
• Schnelles Laden
• Gut für Listen-Layout

Banner:

• Bilder kommen zur Geltung
• Gut für Karten-Layout
• Mehr Aufmerksamkeit

Hintergrund:

• Moderner Look
• Bild und Text übereinander
• Text-Overlay erforderlich

Versteckt:

• Maximale Kompaktheit
• Schnellstes Laden
• Bilder nur im Artikel-Detail

---

Kategorie-Anzeige

Wenn Kategorien aktiviert sind, kannst du wählen, wie sie angezeigt werden:

Optionen

Option	Beschreibung
Badge	Kleiner farbiger Badge
Text	Einfacher Text-Link
Icon	Icon mit Kategorie-Name
Versteckt	Kategorie nicht sichtbar

Badge (empfohlen):

• Visuell auffällig
• Farbcodierung möglich
• Schnelle Erkennung

Text:

• Minimalistisch
• Platzsparend
• Unauffällig

---

Vorschau-Optionen

Bestimme, wie viel vom Artikel in der Übersicht angezeigt wird:

Vorschautext

Option	Beschreibung
Keine	Nur Titel
Kurz	1-2 Zeilen (~100 Zeichen)
Mittel	3-4 Zeilen (~200 Zeichen)
Lang	5+ Zeilen (~300 Zeichen)

Empfehlung nach Layout:

Layout	Vorschautext
Liste	Keine oder Kurz
Karten	Kurz oder Mittel
Magazin	Mittel oder Lang

---

So wählst du Design-Optionen

1. Design-Schritt erreichen

   Im Setup-Wizard erreichst du nach den Features den Design-Schritt. Du siehst eine Vorschau der verfügbaren Layouts.

2. Layout auswählen

   Tippe auf das gewünschte Layout:

   • Liste: Kompakte vertikale Liste
   • Karten: Moderne Card-Darstellung
   • Magazin: Editorial-Stil

   Die ausgewählte Option wird mit blauer Umrandung und Häkchen markiert.

3. Bild-Darstellung wählen

   Wähle, wie Bilder angezeigt werden sollen:

   • Thumbnail, Banner, Hintergrund oder Versteckt

4. Weitere Optionen

   Je nach Layout siehst du weitere Optionen wie:

   • Kategorie-Anzeige
   • Vorschautext-Länge
   • Datum-Anzeige

5. Fertig!

   Nach der Auswahl werden die Design-Einstellungen gespeichert.

   Du kannst alles später im News-Editor weiter anpassen.

---

Empfehlungen nach App-Typ

Unternehmens-News

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Liste oder Karten
Bilder	Thumbnail oder Banner
Kategorie	Badge
Vorschau	Kurz

Für Unternehmens-News: Karten-Layout mit Banner-Bildern für professionellen Look. Kategorien als Badge für schnelle Erkennung.

Blog/Magazin

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Magazin oder Karten
Bilder	Banner oder Hintergrund
Kategorie	Badge
Vorschau	Mittel

Für Blog/Magazin: Magazin-Layout für Editorial-Feeling. Große Bilder und längere Vorschautexte.

Schnelle News

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Liste
Bilder	Thumbnail oder Versteckt
Kategorie	Text oder Badge
Vorschau	Keine oder Kurz

Für schnelle News: Listen-Layout für maximale Kompaktheit. Wenig Bilder, schnelles Scrollen.

Community-News

Empfohlene Einstellungen:

Einstellung	Wert
Layout	Karten
Bilder	Banner
Kategorie	Badge
Vorschau	Kurz

Für Community-News: Karten-Layout für modernes Feeling. Bilder prominent, aber nicht überwältigend.

---

Vergleich der Layout-Optionen

Merkmal	Liste	Karten	Magazin
Artikel pro Screen	Viele	Mittel	Wenige
Bild-Prominenz	Niedrig	Hoch	Sehr hoch
Vorschau-Text	Optional	Ja	Ja
Moderner Look	Klassisch	Modern	Premium
Mobile-Optimierung	Sehr gut	Gut	Mittel
Ladezeit	Schnell	Mittel	Langsamer

---

Design später anpassen

Nach der Einrichtung kannst du das Design jederzeit im News-Editor individuell anpassen:

Layout-Tab

Artikel-Layout, Abstände, Grid-Einstellungen

Artikel-Detail

Header-Stil, Bild-Position, Autor-Anzeige

Kategorien

Kategorie-Farben, Icons, Sortierung

Farben

Hintergrund, Text, Akzente, Badges

Der News-Editor bietet:

• Live-Vorschau aller Änderungen
• Komplette Freiheit bei der Gestaltung
• Responsive Design für alle Bildschirmgrößen
• Farbkonfiguration für jeden Bereich

👉 Zum News-Editor

---

Erweiterte Optionen im News-Editor

Nach dem Setup hast du im News-Editor Zugriff auf viele weitere Optionen:

Artikel-Übersicht

Option	Beschreibung
Grid-Spalten	1-4 Spalten für Karten/Magazin
Abstände	Padding und Margins
Schatten	Card-Elevation
Eckenradius	Abgerundete Ecken
Sortierung	Neueste, Beliebt, Featured zuerst

Artikel-Detail

Option	Beschreibung
Header-Stil	Hero, Banner, Kompakt
Autor-Anzeige	Mit/ohne Avatar, Name, Datum
Verwandte Artikel	Am Ende anzeigen
Navigation	Vor/Zurück-Buttons
Teilen-Position	Oben, unten, floating

---

Tipps

Mobile zuerst

Teste dein gewähltes Layout auf dem Smartphone. Die meisten Nutzer werden deine News auf mobilen Geräten lesen.

Bilder optimieren

Große Bilder verlangsamen das Laden. Nutze optimierte Bilder und das richtige Format (WebP wenn möglich).

Konsistenz

Halte das Design konsistent mit dem Rest deiner App. Nutze die gleichen Farben und Schriften.

Weniger ist mehr

Ein übersichtliches Design ist oft besser als ein überladenes. Gib deinen Inhalten Raum zum Atmen.

Featured nutzen

Im Magazin-Layout kommen Featured-Artikel besonders gut zur Geltung. Nutze sie, um wichtige Inhalte hervorzuheben.

---

Nächste Schritte

News-Editor Erstelle und verwalte Nachrichtenartikel

Kategorien erstellen Richte News-Kategorien ein

Zurück zur Übersicht News-Modul Setup Übersicht