Visueller Builder

Der visuelle Builder hat eine moderne Oberfläche mit vier Bereichen: • Topbar – Speichern, Veröffentlichen, Responsive-Vorschau (Mobil/Tablet/Desktop), Thema wechseln • Seitenleiste (links) – Tabs für Seiten, Ebenen, Medien und Blöcke • Canvas (Mitte) – Ihre Seite, wie Besucher sie sehen • Inspector (rechts) – Einstellungen für den ausgewählten Block Klicken Sie auf einen Block im Canvas, um ihn auszuwählen. Die Einstellungen erscheinen rechts.

Das Seiten-Panel (linke Seitenleiste) zeigt alle Seiten Ihrer Website. Klicken Sie auf eine Seite, um sie im Editor zu öffnen. Die aktuelle Seite ist markiert. Sie können nach Seitennamen suchen.

Das Ebenen-Panel zeigt die Baumstruktur aller Abschnitte auf der aktuellen Seite. Klicken Sie auf eine Ebene, um den zugehörigen Abschnitt im Canvas auszuwählen (und umgekehrt). Praktisch für komplexe Seiten mit vielen Abschnitten.

• Medien-Panel – Durchsuchen Sie Ihre Medienbibliothek und ziehen Sie Bilder auf das Canvas • Blöcke-Panel – Alle verfügbaren Komponenten nach Kategorie. Ziehen Sie einen Block auf das Canvas, um ihn hinzuzufügen Komponenten sind in Kategorien wie Basis, Layout, Formulare und Medien gruppiert.

Klicken Sie auf die Mobil-, Tablet- oder Desktop-Icons in der Topbar, um zu sehen, wie Ihre Seite auf verschiedenen Bildschirmgrößen aussieht. Verwenden Sie Strg+1 (Mobil), Strg+2 (Tablet) oder Strg+3 (Desktop) als Tastenkürzel.

Der Editor unterstützt Tastenkürzel für häufige Aktionen. Tastenkürzel funktionieren nicht, wenn ein Textfeld fokussiert ist (außer Escape). • Strg+S – Speichern • Strg+Umschalt+P – Veröffentlichen • Strg+Z – Rückgängig • Strg+Umschalt+Z – Wiederherstellen • Strg+K – Befehlspalette öffnen • Strg+D – Ausgewählten Abschnitt duplizieren • Entf / Rücktaste – Ausgewählten Abschnitt entfernen • Strg+1 – Mobile Ansicht (375px) • Strg+2 – Tablet Ansicht (768px) • Strg+3 – Desktop Ansicht (100%) • Strg+\ – Seitenleiste ein-/ausblenden • Strg+Umschalt+\ – Inspector ein-/ausblenden • Escape – Auswahl aufheben oder Overlay schließen

Drücken Sie Strg+K (oder Cmd+K auf dem Mac), um die Befehlspalette zu öffnen. Geben Sie eine Aktion ein, um schnell zu navigieren oder Aktionen auszuführen: • Speichern / Veröffentlichen • Thema wechseln (Dunkel/Hell) • Zu Seiten gehen • Versionshistorie öffnen • Seitenleiste oder Inspector ein-/ausklappen • AI-Chat ein-/ausschalten • Mobile / Tablet / Desktop Ansicht Navigieren Sie mit den Pfeiltasten und drücken Sie Enter, um eine Aktion auszuführen. Escape schließt die Palette.

Die Seitenleiste und der Inspector sind in der Breite anpassbar. Ziehen Sie den Rand zwischen einem Panel und dem Canvas, um die Breite anzupassen. • Seitenleiste: mindestens 200px, maximal 400px • Inspector: mindestens 240px, maximal 480px Die Breite wird in Echtzeit angepasst, während Sie ziehen (keine Verzögerung).

Wählen Sie einen Abschnitt im Editor und suchen Sie das Feld "Animation" im Inspector. Wählen Sie ein Preset: • Fade – Allmählich sichtbar werden • Slide up/down/left/right – Von einer Richtung hineingleiten • Scale / Zoom – Heranzoomen • Bounce – Hüpfen Wählen Sie bei "Trigger", ob die Animation beim Scrollen oder beim Laden abgespielt wird. Die Animation ist nur auf der Live-Website sichtbar.

Der Editor enthält einen Heading-Analyzer, der warnt, wenn Ihre Überschriften-Hierarchie nicht stimmt (z.B. ein H1 gefolgt von einem H3 ohne H2). Dies ist wichtig für Barrierefreiheit und SEO.

Viele Blöcke haben jetzt granulare Einstellungen, mit denen du Dutzende Variationen erstellen kannst, ohne einen anderen Block zu wählen. Öffne einen Block im Inspector und du siehst zusätzliche Felder: • HeroSection – Layout (centered/left/right/split), mediaType (image/video/none), Badge, 2 CTA-Buttons, Overlay, Inline-Statistiken • FeatureCardsSection – Spalten (2-6), iconPosition (top/left/inline/none), cardStyle (elevated/bordered/flat/glass), hoverEffect (none/lift/glow/border-color), contentAlign • TestimonialSection – Layout (grid/carousel/masonry/single), avatarShape (circle/square/rounded), quoteStyle, Rating-Anzeige • PricingSection – highlightStyle (border/background/badge/glow), Abrechnungs-Toggle, priceSize, checkStyle • CTABannerSection – Layout (centered/left-right/stacked/minimal), backgroundType, Urgency-Badge, Icon-Position • FooterSection – Layout (simple/columns/centered/minimal), socialPosition, Newsletter-Feld, Trennlinien-Stil Alle Einstellungen sind optional — bestehende Blöcke funktionieren weiterhin mit ihren Standardwerten.

Mit dem VideoHeroSection-Block kannst du ein Video als Hintergrund einstellen. Unterstützte Quellen: • YouTube – Füge eine YouTube-URL ein (z.B. https://youtube.com/watch?v=...) • Vimeo – Füge eine Vimeo-URL ein • MP4 – Lade eine .mp4-Datei hoch oder füge eine direkte URL ein Das Video wird automatisch abgespielt (stumm, in einer Schleife). Auf Mobilgeräten wird ein Poster-Bild für schnelleres Laden angezeigt. Einstellungen im Inspector: • videoUrl – Die URL deines Videos • posterImage – Fallback-Bild (wird beim Laden und auf Mobilgeräten angezeigt) • overlayOpacity – Wie dunkel das Overlay über dem Video ist (0-100%) • overlayColor – Farbe des Overlays • contentAlign – Text links, zentriert oder rechts • showVideoOnMobile – Video auch auf Mobilgeräten anzeigen (standardmäßig aus)

Jeder Block hat jetzt ein "Erweitert"-Panel im Inspector mit einem _customCSS-Textfeld. Hier kannst du freies CSS schreiben, das nur auf diesen spezifischen Block angewendet wird. Beispiele: • Glasmorphismus: background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); • Eigener Schatten: box-shadow: 0 20px 60px rgba(0,0,0,0.3); • Rand-Animation: border: 2px solid transparent; transition: border-color 0.3s; Das CSS wird automatisch ge-scoped, sodass es nur diesen Block beeinflusst, nicht den Rest der Seite.

Jeder Block unterstützt jetzt zwei Animations-Felder: • _animation – Der Animationstyp (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, bounce) • _animationTrigger – Wann die Animation abgespielt wird (scroll oder load) Diese Felder findest du im Inspector unter dem ausgewählten Block. Die Animation ist nur auf der Live-Website sichtbar, nicht im Editor. Bei einem URL-Import werden Animationen automatisch erkannt und den richtigen Blöcken zugewiesen.

Jeder Block hat jetzt mehr Styling-Optionen über StyleOverrides. Du findest sie im Inspector unter "Stil": • textColor – Textfarbe überschreiben • accentColor – Akzentfarbe für Hervorhebungen • buttonBackground / buttonTextColor / buttonBorderRadius – Button-Styling • paddingTop / paddingBottom – Vertikaler Abstand über/unter dem Block • marginTop – Abstand über dem Block • borderColor – Randfarbe • backdropFilter – Hintergrundeffekte (blur, saturate, brightness, etc.) • backgroundImage – Hintergrundbild (nur Verläufe, keine externen URLs) Für Karten-Komponenten (FeatureCards, ServiceCards, Pricing, Team, BentoGrid) gibt es auch Hover-States: • cardHoverBoxShadow – Schatten bei Hover • cardHoverTransform – Transformation bei Hover (z.B. scale(1.02)) • cardHoverBorderColor – Randfarbe bei Hover

Du kannst pro Website einen Dark Mode aktivieren. Wenn die Website Dark Mode unterstützt, erscheint ein Sonne/Mond-Icon auf der Website, mit dem Besucher wechseln können. So richtest du es ein: 1. Gehe zu den Website-Einstellungen → Design Tokens 2. Fülle die darkColors aus (Hintergrundfarbe, Textfarbe, Primärfarbe für Dark Mode) 3. Speichere — der Toggle erscheint automatisch auf der Website Die Präferenz des Besuchers wird im localStorage gespeichert und bleibt beim nächsten Besuch erhalten. Wenn keine darkColors konfiguriert sind, wird der Toggle nicht angezeigt.