06. Design & Frontend

Themes auswählen, Hero-Bereich gestalten, Sidebar-Widgets anordnen, Favicon setzen - so machst du dein RadioCMS optisch zu deinem Sender.

Themes

RadioCMS liefert ab Werk mehrere Themes mit (dunkel, hell, neon, klassisch). Du wählst sie unter Design → Themes:

• Dark Studio (Standard) - dunkles Layout, türkis-Akzente
• Light Wave - helles Layout, blau-Akzente
• Neon City - dunkles Layout, pink/lila-Akzente, futuristischer Look
• Classic FM - klassisches Radio-Layout mit warmen Farben

Wechsel zwischen Themes ist mit einem Klick erledigt und ändert nicht deine Inhalte. Du kannst also jederzeit testen welches Theme zu deinem Sender passt.

Eigene Farben

Im Theme-Editor (Design → Themes → Anpassen) kannst du:

• Primär-Farbe wechseln (Akzente, Buttons, Links)
• Hintergrund-Farbe der Karten und Sidebar wählen
• Schrift wählen (System-Schriften plus Google-Fonts-Auswahl)
• Eckenrundung der Karten einstellen (eckig, leicht abgerundet, stark abgerundet)

Die Vorschau zeigt dir live wie die Änderung wirkt - speichern erst wenn dir alles gefällt.

Theme-Builder Pro (Premium)

Mit dem Theme-Builder Pro aus dem Marketplace bekommst du einen vollwertigen visuellen Editor mit AI-generierten Theme-Vorschlägen, Erweiterung um zusätzliche Farb-Variablen und ein Bibliothek vorgefertigter Designs. Für klassische Sender reicht aber das eingebaute Theme-System.

Hero-Bereich

Der Hero-Bereich ist die große Box ganz oben auf der Startseite. Default-Inhalt:

• Sender-Logo
• Aktuelle Sendung (On-Air-Anzeige)
• Play-Knopf für Live-Stream

Anpassbar unter Design → Hero-Bereich:

• Hintergrund: Farbe, Verlauf, eigenes Bild oder Video-Loop
• Inhalt: Logo zentriert, Logo links plus Text rechts, oder kompletter Custom-Inhalt
• Höhe: kompakt (kleine Box), Standard, Vollbild
• On-Air-Anzeige ein-/ausblenden
• Restzeit-Counter zeigen oder nicht

Sidebar-Widgets

Rechts neben dem Hauptinhalt liegt die Sidebar mit Widgets. Standard-Widgets:

• Live-Player (oft fest oben fixiert)
• Aktueller DJ mit Foto und Sendungs-Beschreibung
• Nächste Sendung mit Countdown
• Hörer-Karte (sofern Plugin aktiv)
• Top-Songs aus der Now-Playing-Historie
• Neueste News (3-5 Teaser)
• Newsletter-Anmeldung
• Social-Media-Links

Unter Design → Sidebar-Anordnung ziehst du Widgets per Drag-and-Drop in die gewünschte Reihenfolge. Wegnehmen geht per Mülleimer-Symbol, neue Widgets über die "Widget hinzufügen"-Schaltfläche.

Zwei Sidebars sind möglich (linke und rechte) - in der Theme-Anpassung schaltbar. Default ist nur die rechte aktiv.

Page-Builder Pro v2

Der Page-Builder ist das Tool für eigene Frontend-Seiten ohne Code-Kenntnisse:

1. Unter News & Inhalte → Seiten → Neue Seite "Mit Page-Builder gestalten" wählen
2. Du landest in einem visuellen Editor mit drei Bereichen: Widget-Katalog links, Vorschau in der Mitte, Eigenschaften rechts
3. Per Drag-and-Drop Widgets in die Vorschau ziehen
4. Pro Widget Inhalt und Optik anpassen
5. Speichern und veröffentlichen

Im Widget-Katalog stehen Standardelemente (Text, Bild, Galerie, Button, Trenner) plus alle Page-Builder-fähigen Widgets aus deinen aktiven Plugins. Das macht den Page-Builder mit jedem Plugin mächtiger.

Popup-System

PBv2 hat ein eingebautes Popup-System. Du kannst:

• Eigene Pop-ups gestalten (Layout wie eine Mini-Seite)
• Trigger setzen (beim Laden, nach X Sekunden, beim Verlassen, bei Scroll)
• Ziel-Seiten festlegen (überall, nur Startseite, nur bestimmte Seiten)
• Anzeige-Häufigkeit pro Besucher steuern

Praktisch für Newsletter-Anmelde-Popups, Sondersendungs-Hinweise oder Cookie-Banner. Achtung: zu viele Pop-ups nerven Besucher, weniger ist mehr.

Favicon und Touch-Icons

Unter Design → Favicon hochladbar:

• Favicon (32 x 32 oder 64 x 64 px, PNG mit transparentem Hintergrund)
• Apple-Touch-Icon (180 x 180 px, für iOS-Lesezeichen)
• Android-Chrome-Icon (192 x 192 px)
• Maskable Icon (512 x 512 px, für PWA-Installation)

Wenn du nur das Favicon hochlädst und die anderen weg lässt, generiert RadioCMS die größeren Varianten automatisch aus dem Original.

Footer-Bereich

Der Footer enthält per Default:

• Links zu Impressum, Datenschutz, Kontakt
• Social-Media-Icons
• Sender-Logo (klein)
• Copyright-Hinweis ("Powered by RadioCMS")

Unter Design → Footer kannst du:

• Eigene Spalten anlegen (z.B. "Über uns" / "Mitmachen" / "Folge uns")
• Links und Texte pro Spalte pflegen
• Footer-Hintergrund-Farbe ändern

Der "Powered by RadioCMS"-Hinweis ist in der Community Edition fest verlinkt - das ist ein Mini-Beitrag für die Sichtbarkeit des Projekts. Wer ihn entfernen möchte, kann später ein Premium-Plugin dafür kaufen (aktuell noch nicht im Marketplace, geplant für 3.0).

Weiter mit Kapitel 07. Hörer-Konten.