Page-Builder Pro v2

Visueller Vollbild-Drag-and-Drop-Editor mit 55+ Widgets

Page-Builder Pro v2 ist die nächste Generation des Page-Builders für RadioCMS Community Edition. Es ist eine komplette Neuentwicklung mit Vollbild-Editor, echter Live-Vorschau, über 55 Widgets, globalen Styles (Colors/Typography/Spacing), Scroll-Animationen, Inline-Text-Bearbeitung, Undo/Redo, Block-Bibliothek, Templates, Container-Modi und Sichtbarkeits-Regeln. Der Builder fühlt sich an wie Elementor oder Webflow, ist aber komplett selbst-gehostet und integriert mit dem RadioCMS.

Hinweis: PBv2 ist ein separates Plugin neben dem v1.x Page-Builder Pro. Beide können parallel installiert sein. v1.x-Kunden bekommen ein Upgrade-Angebot zu 79 EUR.

Was du konkret damit machen kannst

Komplette Webradio-Webseite ohne HTML-Wissen

Drag-and-Drop von vorgefertigten Sections (Hero, Player, About, Programm, DJs, Sponsoren, Newsletter, Footer). 2 Stunden Setup und die Webseite sieht professionell aus. Globale Styles definieren Farben + Schriften + Abstände einmal, alle Pages übernehmen automatisch.

Live-Vorschau in 3 Geräten parallel

Editor zeigt deine Page als Desktop + Tablet + Smartphone gleichzeitig. Du siehst sofort wenn was auf Mobile bricht, ohne Refresh, ohne Tab-Wechsel.

Radio-Power-Widgets out of the box

Spezielle Widgets für Webradios: Now-Playing-Display, Live-DJ-Card, Stundenplan-Widget, Schedule-Calendar, Listener-Counter, Wunschbox-Form, Spenden-Button, Schwebender Mini-Player (bleibt sichtbar beim Scrollen), Top-Songs-Liste. Du musst nichts coden, einfach reinziehen und konfigurieren.

Marketing-Widgets für Conversion

Hero-Sections mit Animationen, Pricing-Tabellen, Testimonial-Karten, Feature-Lists, FAQ-Akkordeons, CTA-Buttons mit Hover-Effekten, Countdown-Timer für Events, Newsletter-Anmelde-Formulare, Animierte Headlines mit Wort-Wechseln.

Templates und Block-Bibliothek

Vorgefertigte Pages („Homepage", „Sender-About", „Programm-Übersicht") als Templates. Plus pro Seite vorgefertigte Blocks („Hero-Section dunkel", „3-Spalten-Feature", „Pricing-3-Tier"). Beides ist editierbar nach dem Import.

Animations und Scroll-Effekte

Fade-In beim Scrollen, Parallax-Bilder, Background-Video-Loops, Counter die hochzählen wenn sie sichtbar werden, Sliding-Text, 3D-Tilt-Hover-Effekte. Alles ohne Code, nur Klick.

Installation und Aktivierung

1. Admin -> Plugins -> Tab Marketplace
2. Page-Builder Pro v2 finden, lila „PRO"-Badge
3. Plugin laden + Lizenz klicken
4. Lizenzschlüssel im Format RCMS-XXXX-XXXX-XXXX-XXXX einfügen
5. Speichern und prüfen -> Plugin wird automatisch installiert
6. In der Plugin-Liste auf Aktivieren klicken
7. Sidebar-Gruppe „Page-Builder v2" erscheint im Admin

So nutzt du es, Schritt für Schritt

Schritt 1: Globale Styles definieren (5 Min Setup einmalig)

1. Admin -> Page-Builder v2 -> Globale Styles
2. Farben definieren: Primary, Secondary, Accent, Background, Text, Muted (6 Slots)
3. Schriften definieren: Headline-Font, Body-Font (Google-Fonts-Picker eingebaut)
4. Abstände definieren: Section-Padding, Container-Width, Spacing-Skala (4/8/16/24/32/48/64 px)
5. Speichern -> alle Widgets übernehmen diese Defaults automatisch

Schritt 2: Erste Page anlegen

1. Admin -> Pages -> Neue Page (oder eine bestehende öffnen)
2. Mit Page-Builder bearbeiten Button klicken -> Vollbild-Editor öffnet sich
3. Top-Leiste: Geräte-Switch (Desktop/Tablet/Phone), Undo/Redo, Save, Preview, Exit
4. Links: Widget-Panel (alle 55+ Widgets als Drag-and-Drop-Items)
5. Rechts: Settings-Panel (zeigt Optionen für das gerade selected Widget)
6. Mitte: deine Page

Schritt 3: Widget reinziehen + konfigurieren

1. Aus dem Widget-Panel z.B. Hero-Section in die Page ziehen
2. Klick auf die Section -> rechts erscheinen die Settings
3. Tabs: Content (Text, Bilder), Style (Farben, Spacing, Typography), Advanced (Animation, Sichtbarkeit, CSS-Klasse)
4. Inline-Edit: Text direkt in der Vorschau anklicken und tippen, kein Modal nötig
5. Änderungen sind sofort live in der Vorschau sichtbar

Schritt 4: Sections kopieren, verschieben, löschen

• Drag-Handle links an jeder Section -> Drag-and-Drop verschieben
• 3-Punkt-Menu rechts: Duplizieren, Löschen, Als Block speichern, Sichtbarkeit togglen
• Multi-Select: Shift+Klick für mehrere Sections gleichzeitig

Schritt 5: Speichern + Veröffentlichen

1. Save speichert als Draft (sichtbar nur für dich)
2. Publish macht die Page öffentlich
3. Preview-Tab öffnet die Page in einem neuen Browser-Tab ohne Editor-UI
4. Versions-History: jede Speicherung wird gespeichert, du kannst zurück zu jeder fruheren Version

Schritt 6: Templates verwenden

1. Im Widget-Panel oben -> Templates-Tab
2. Liste der 15+ vorgefertigten Pages
3. Klick + Import -> Template wird in die aktuelle Page geladen (überschreibt aktuellen Inhalt nach Bestätigung)
4. Alle Texte/Bilder austauschen, fertig

Tipps für den Alltag

• Globale Styles zuerst, dann Pages: 5 Minuten in Style-Definition investieren spart Stunden in jeder Page. Sonst hast du an 30 Stellen die gleiche Farbe händisch eingetragen.
• Templates als Startpunkt: jede Page mit einem Template starten, nicht von Null. Das passt auch wenn du nachher 80% austauschst.
• Mobile-First denken: oben im Editor Geräte-Switch auf Phone, von da aus designen. Was auf Phone passt, klappt auf Desktop sicher auch.
• Animations sparsam: nicht jedes Widget eine Fade-In-Animation. 2-3 Animationen pro Page ist genug. Sonst fühlt sich die Page langsam und überladen an.
• Blocks speichern für wiederkehrende Sections: dein Sender-Header, der Footer, die DJ-Liste etc. einmal bauen, als Block speichern, dann auf allen Pages aus der Library reinziehen.
• Performance im Auge behalten: Background-Video + 3D-Tilt + Parallax sind eindrucksvoll, kosten aber Performance. Auf Mobile wenig nutzen.
• Versions-History rettet dir den Arsch: 1x pro Session als Snapshot exportieren. Wenn du in eine Designsackgasse rennst, ist der Weg zurück nur 1 Klick weit.

Was das Plugin NICHT macht

• Kein Code-Editor. Du kannst Custom-HTML/CSS einfügen (per Widget), aber der Builder ist kein VS-Code-Ersatz. Komplexe Logik bleibt im Theme.
• Keine eCommerce-Funktionen. Pricing-Tables sind nur Anzeige, kein Checkout. Für echten Verkauf siehe membership-pro oder externes Tool.
• Keine Multi-Site-Sync. Pages sind pro CMS-Installation. Wenn du 5 Sender hostest und auf allen die gleiche Page willst, musst du exportieren/importieren.
• Kein AI-Page-Generator. Templates sind handgemacht, kein „Beschreib mir was du willst" -> Page wird gebaut. Das macht theme-builder-pro mit AI-Modus separat.
• Kein Live-Multi-User-Editing. Wenn 2 Admins gleichzeitig die selbe Page editieren, gewinnt der letzte Speicherung. Konflikt-Warning wird angezeigt aber kein Merge.

Beispiele zum Inspirieren

Beispiel 1: Komplette Sender-Webseite in 2 Stunden

Sender mit Logo + Streams + DJs + Programm + Sponsoren startet bei Null. Importiert Template „Webradio Full Site", tauscht 20 Bilder + 30 Texte aus, fertig. Sieht professionell aus, kostet 2 Stunden statt 2 Wochen Eigenentwicklung.

Beispiel 2: Landingpage für ein Event

Sender macht in 2 Wochen ein Sommerfest. Eine eigene Page mit Hero + Countdown + Programm + Sponsor-Logos + Anmeldeformular. 30 Min Setup mit dem Builder, danach kann der Praktikant die Bilder austauschen wenn neue Sponsoren dazukommen.

Beispiel 3: Conversion-optimierter Member-Pitch

Member-Pro-Plugin braucht eine Premium-Erklärseite. Hero mit animierter Headline, 3-Spalten-Pricing-Table mit Tier-Vergleich, FAQ-Akkordeon, Testimonials-Slider, CTA-Bar unten. Sieht aus wie Stripe-Pricing-Page, nur für dein Webradio.

Lizenz und Aktivierung

• 199 EUR einmalig als Lifetime-Lizenz. Kein Abo.
• Lizenz für 3 Domains.
• Upgrade von v1.x: 79 EUR statt 199 wenn du eine aktive Page-Builder-Pro-v1-Lizenz hast (gilt zeitlich begrenzt)
• Updates für alle v2.x-Versionen inkludiert (v2.1, v2.2, v2.3 etc kommen über den Plugin-Updater).
• Page-Builder Pro v2 Extras ist ein optionales Zusatz-Plugin (49 EUR) mit 33 Premium-Erweiterungen (zusätzliche Widgets, Animationen, Templates).
• Bei Fragen oder Setup-Hilfe: support@dgnshop.com