VeloCore Page Builder

Der mächtige, integrierte Section Builder für VeloCore. Mit automatischer WebP+AVIF-Optimierung, REST-gesteuerten Dynamik-Sections und einer der besten Admin-UX im Markt.

Was ist das Besondere?

Automatische Modern Images

Jedes Bild wird beim Speichern in WebP + AVIF konvertiert. Das Frontend rendert perfekte Picture-Tags mit srcset.

REST-Architektur

Dynamische Inhalte werden über eigene REST-Endpunkte geladen – immer aktuelle Daten, kein Shortcode-Chaos.

Perfekte Duplizierung

Sections inklusive aller TinyMCE-Editoren, dynamischen Listen und Media-Feldern mit einem Klick duplizieren.

JSON-First Architektur

Statische Inhalte werden als JSON gespeichert. Datengetriebene Architektur für blitzschnelle Frontends.

Schlanker Code

Alle Sektionen laden ihre Styles und Vanilla JS nur dann, wenn sie wirklich verwendet werden

Design passt immer perfekt

Alle Elemente sind auf das Website-Design eingestellt. Es ist kein Styling nötig, kann aber bei Bedarf angepasst werden.

Flexible Optik

Auch nach späterer Änderung der Farben oder Layouts der Website, passen sich die Elemente automatisch an. Sofort, ohne Rebuild.

Schemas bereits integriert

Je nach Sektion, werden Schemas bereits fertig integriert. Z.B. geben die Toggles im Code ein optimiertes FAQ-Schema aus, usw.

Hero

Durch das automatisch generierte Bildformat in WebP und AVIF sowie aller erforderlichen Bildgrößen wird ein perfekter Picture-Srcset erstellt. Der Browser wählt immer die optimale Version für das jeweilige Gerät. Das Overlay lässt sich exakt einstellen und sorgt für ideales Kontrastverhältnis - egal welche Bildstimmung. Alle Felder sind optional, damit du exakt die gewünschte Wirkung erzielst. CTA Buttons sind optisch ideal gelegen. Responsive Darstellung ist automatisiert.

  • Vollbild-Hintergrund mit optimiertem Featured Image
  • Automatische WebP + AVIF + Srcset Generierung
  • Einstellbare Overlay-Stärke von 0–90 %
  • Optionaler Badge oben links
  • Headline + Subline + bis zu zwei CTAs
  • Fetchpriority=high & LCP-optimiert
  • Komplett responsiv

Slider (News, Blog, uvm.)

Der Slider rendert 1:1 wie die normale Startseite - inklusive aller Animationen und der Queue-Liste. Du kannst exakt dieselben News anzeigen, die auch auf der Homepage laufen, nur in einem eigenen Bereich. Perfekt für Landingpages, die Top-News prominent zeigen sollen. Zusätzlich kann nach Kategorien, Schlagworten, Sortierung, uvm. gefiltert werden. Ideal für Themenseiten. Mobil ein reel-like Slider mit voller Responsiveness.

  • Filter nach Kategorien und Tags (Slugs)
  • Sortierung nach Datum, Titel oder Zuletzt bearbeitet
  • ASC / DESC möglich
  • Modern Images in jedem Slide
  • Deutsches Datum-Format
  • Live Queue-Ansicht rechts
  • Automatische REST-Abfrage

USP Grid

Sauberes, modernes Karten-Layout mit dezenten Schatten und Hover-Effekt. Ideal für Leistungsversprechen, Vorteile oder Kernbotschaften – extrem flexibel skalierbar.

  • Überschrift (optional)
  • 1 bis 4 Spalten wählbar
  • Beliebig viele USP-Items (Titel + Text)
  • Dynamisches hinzufügen von unendlich USPs

Galerie

Du kannst pro Bild eine Caption und einen Link hinterlegen - perfekt für Referenzen, Projekte oder Bildstrecken. Die automatisch generierten Bildformate in WebP und AVIF sowie aller erforderlichen Bildgrößen erzeugt ein perfektes Picture-Srcset. Ob als Logo-Showcase, Galerie oder optische Highlight-Kacheln.

  • Überschrift (optional)
  • 1–4 Spalten
  • Jedes Bild mit URL, Caption und Link
  • Automatische Modern Images (WebP + AVIF)
  • Responsives Grid
  • Immer perfekte Performance dank srcset

Bild + Text

Flexibles Grid-Layout, das sich perfekt anpasst. Das Bild wird immer modern optimiert dargestellt im gewohnten srcset. Ideal für „Über uns“, Leistungen oder Erklärtexte mit Bild, sowie Landingpages. Responsive: Mobil wird das Bild immer über dem Text gezeigt, unabhängig davon, ob es rechts oder links angeordnet ist.

  • Überschrift
  • Rich-Text (voller TinyMCE)
  • Bild-URL + Media-Button
  • Links- oder Rechts-Align
  • Bildbreite: 1/4, 1/3, 1/2 oder 3/4
  • Optionaler Button

News

Zeigt aktuelle Beiträge genau wie gewünscht an - ebenfalls mit moderner Bildoptimierung und deutschem Datumsformat und verschiedenen Layouts und großen Filtermöglichkeiten nach Kategorien, Schlagworten, Sortierungen, Themen.

  • Überschrift + Subline
  • 3 Display-Modi: Grid, List, Short
  • Count, Offset, Kategorien, Tags, Sortierung
  • Optionales Datum und Kategorie anzeigen
  • Optionaler „Mehr ansehen“-Button

Testimonials

Schöne Zitat-Karten mit Sternen-Bewertung - perfekt für Vertrauensaufbau.

  • Überschrift
  • 1–4 Spalten
  • Beliebig viele Einträge (Name, Text, Sterne 1–5)
  • Stern-Darstellung mit Farbverlauf

Toggles / FAQ

Schönes Accordion-Design mit vollem TinyMCE-Text. Das FAQ-Schema wird automatisch im perfekten Format in den Quellcode integriert - perfekt für SEO.

  • Überschrift
  • Beliebig viele Toggle-Items (Titel + Rich-Text)
  • Erstes Element standardmäßig geöffnet
  • Automatische Schema.org FAQPage JSON-LD

Tile Grid

Schöne Kachel-Übersicht mit Overlay und Hover-Effekt - perfekt für Themen- oder Rubrik-Übersichten. Wie immer in perfekten Picture-Tags mit Srcset und automatischer Bildoptimierung und -Formate.

  • Überschrift (optional)
  • 1–4 Spalten
  • Jedes Tile: Titel + Bild + Link
  • Hover-Zoom-Effekt
  • Modern Images

Infobox

Schöne hervorgehobene Boxen für wichtige Hinweise, Warnungen oder Sonderangebote.

  • Überschrift + Rich-Text
  • Optionaler Button
  • Freie Border-Farbe
  • Border-Stärke einstellbar

Button Grid

Schnell eine übersichtliche Button-Navigation oder Call-to-Action-Übersicht erstellen.

  • Überschrift (optional)
  • 1–4 Spalten
  • Beliebig viele Buttons (Titel + Link)
  • Einheitliches Button-Design

Contact CTA

Starke Handlungsaufforderung am Ende einer Seite - immer im Look & Feel des bestehenden Designs.

  • Headline + Subline
  • Button-Text + Link
  • Farblich hervorgehobener Full-Width-Bereich

Freier Text

Klassischer redaktioneller Textbereich – ideal für längere Inhalte, die du nicht in einzelne Sections aufteilen möchtest oder an verschiedenen Stellen einfach nur den Editor brauchst.

  • Überschrift (optional)
  • Vollständiger TinyMCE-Editor
  • Kein Vorschaubild nötig, da du bereits in genau diesem Block liest =)

Der Page-Builder wird ständig erweitert und verbessert.