# Abgleich mit dem Flatsome UX Builder

Stand: 14.09.2026, KantSites 1.5.0 (Dokumentschema v19).
Quelle des Vergleichs: Flatsome-Theme im Download-Ordner, `inc/builder/shortcodes/` (69 Definitionen)
und `inc/shortcodes/`. Ziel laut Auftrag: alle Funktionen übernehmen und verbessern, die
Bedienbarkeit übernehmen und verbessern, die Oberfläche mobil nutzbar machen — der Builder
bleibt dabei Desktop-first.

## 1. Wo KantSites heute schon besser ist

Diese Punkte sind bereits gelöst und dürfen beim Nachbau nicht verschlechtert werden.

| Thema | Flatsome | KantSites heute |
| --- | --- | --- |
| Datenhaltung | Shortcode-Text im `post_content`, per Regex geparst | Validierter Blockbaum mit stabilen IDs, versioniert (v19), Migrationsweg |
| Gestaltung | Feste Optionslisten je Element, wenige Werte je Gerät | 93 freie Eigenschaften, je Block, je Gerät **und** für Hover |
| Öffentliche Ausgabe | jQuery, mehrere Bundles, Slider/Tabs brauchen JS | Tabs/Slider/Fortschritt ohne JavaScript, Editorcode nicht im Frontend |
| Entwurf/Live | Revisionen von WordPress | Entwurf und Veröffentlichung getrennt, Fassungsverlauf, geplante Veröffentlichung, Papierkorb |
| Recht | Plugins nötig | Einwilligung mit echtem Zurückhalten, Statistik ohne Wiedererkennung, Pflichtseiten |
| Eigener Code | `ux_html`-Element | CSS je Element für alle, Skript nur für Administratoren, als eigene Datei |

**Folgerung:** Der Gestaltungsteil muss nicht nachgebaut werden. Zu tun sind der
Elementkatalog und die Bedienung.

## 2. Elementkatalog — Lücke

Flatsome hat 69 Builder-Elemente, davon 12 reine Shop-Elemente (WooCommerce).
KantSites hat 31 Blocktypen.

### Bereits abgedeckt (21)

`section` `row` `col` `title` `text` `ux_image` `button` `ux_gallery` `blog_posts`
`featured_box` `testimonial` `accordion` `accordion_item` `tabgroup` `tab` `contact`
`divider` `gap` `block` `ux_menu` `ux_slider`

### Offen, ohne Shop (20)

| Flatsome | Was es kann | Bewertung |
| --- | --- | --- |
| `ux_banner` | Bild/Video-Hintergrund, Overlay, Höhe, Parallax, Textposition | **hoch** — das meistgenutzte Element überhaupt |
| `text_box` | frei positionierter Textkasten über einem Banner | **hoch** — gehört zu `ux_banner` |
| `ux_stack` | Elemente nebeneinander, mit Abstand und Ausrichtung | **hoch** — löst viele Zeile/Spalte-Verrenkungen |
| `ux_image_box` | Bild über Text als Karte | hoch |
| `col_grid` / `ux_banner_grid` | Rasterlayout mit ungleichen Kacheln | mittel |
| `message_box` | Hinweiskasten mit Symbol und Farbe | mittel |
| `price_table` | Preistabelle | mittel |
| `team_member` | Person mit Bild, Rolle, Sozialsymbolen | mittel |
| `ux_pages` | Unterseiten dieser Seite auflisten | mittel |
| `ux_video` | eingebettetes Video | teilweise über `embed` |
| `video_button` | Video im Leuchtkasten öffnen | mittel |
| `map` | Karte | teilweise über `embed` |
| `follow` | Sozialsymbole zum Folgen | mittel |
| `share` | Teilen-Symbole | niedrig |
| `search` | Suchfeld | mittel |
| `logo` | Logo der Website als Block | hoch (Kopfbereich) |
| `scroll_to` | Ankerziel und Sprunglink | mittel |
| `ux_countdown` | Countdown | niedrig |
| `ux_hotspot` | Punkte auf einem Bild | niedrig |
| `ux_lottie` / `ux_instagram_feed` / `ux_portfolio` | Animation, Instagram, Portfolio | niedrig |
| `ux_the_title` | dynamischer Seitentitel | mittel (Vorlagen) |

### Bewusst ausgelassen (12)

Alle WooCommerce-Elemente (`products`, `ux_products`, `ux_products_list`,
`ux_product_categories`, `ux_product_flip`, `ux_bestseller_products`, `ux_payment_icons`,
`ux_product_gallery`, `woocommerce_cart`, `woocommerce_checkout`, `ux_badge`,
`custom-product`). KantSites hat keinen Shop; ohne Warenkorb, Bestellung und Zahlung
wären diese Blöcke leere Hüllen.

## 3. Bedienung — die eigentliche Lücke

Der Auftrag nennt die Bedienbarkeit ausdrücklich. Hier ist Flatsome heute voraus.

| Flatsome | KantSites heute | Verbesserung |
| --- | --- | --- |
| Element aus der Liste **in die Vorschau ziehen**, mit Einfügemarke | Einfügen „hinter das gewählte Element“ | Ziehen mit sichtbarer Marke, **zusätzlich** die heutige Tastaturbedienung behalten |
| **Werkzeugleiste am Element** in der Vorschau (bearbeiten, duplizieren, löschen, Elternelement) | nur über den Strukturbaum links | Leiste am Element, Auswahl bleibt mit dem Baum verbunden |
| **Pluszeichen zwischen Elementen** | — | Einfügepunkt genau dort, wo geklickt wird |
| Elementwahl als **Bilderraster** mit Suche | Textliste mit Symbolzeichen | Raster mit echten Vorschaubildern, Suche, Kategorien |
| **Vorlagen je Element** mit Vorschaubild (Sektion: 20+) | 4 Textvorlagen gesamt | Vorlagen je Element, mit Bild, erweiterbar |
| **Je Option ein Geräteschalter** | ein globaler Geräteschalter | Schalter direkt an der Option, zeigt wo ein abweichender Wert gesetzt ist |
| **Zahl durch Ziehen ändern** (`scrubfield`) | Eingabefeld | Ziehen plus Eingabe plus Pfeiltasten |
| **Innen-/Außenabstand als Rahmenbild** | vier Felder | Rahmenbild mit verbundenen Seiten |
| **Spaltenbreite in der Vorschau ziehen** | Zahl eingeben | Ziehgriff zwischen Spalten |
| Vorschau **sofort** (clientseitige Vorlagen) | Server-Neuladen, entprellt | Sofortige optimistische Anzeige, Server bleibt die Wahrheit |
| Kopieren/Einfügen zwischen Seiten | — | Zwischenablage für Blöcke, seitenübergreifend |
| Mobil | Builder nicht bedienbar | Verwaltung vollständig mobil; Builder mobil im Lesemodus mit Inhaltsbearbeitung |

## 4. Vorgeschlagene Reihenfolge

1. **Arbeitspaket H — Bedienung des Builders.** Ziehen und Ablegen, Werkzeugleiste am
   Element, Einfügepunkte, Bilderraster, optimistische Vorschau. Größter Nutzen je Aufwand,
   betrifft jedes vorhandene Element sofort.
2. **Arbeitspaket I — Elementkatalog Stufe 1.** `banner`, `textbox`, `stack`, `imagebox`,
   `logo`, `messagebox`. Die Blöcke, ohne die eine Startseite Umwege braucht.
3. **Arbeitspaket J — Optionsbedienung.** Geräteschalter je Option, Ziehfelder,
   Abstandsrahmen, Spaltenbreite ziehen, Vorlagen je Element.
4. **Arbeitspaket K — Elementkatalog Stufe 2.** Raster, Preistabelle, Team, Unterseiten,
   Video-Leuchtkasten, Suche, Sozialsymbole, Ankersprung.
5. **Arbeitspaket L — Mobile Oberfläche.** Verwaltung und Builder auf dem Telefon.

Jede Stufe endet mit einem prüfbaren Ergebnis und darf die Qualitätsziele aus AGENTS.md
nicht verschlechtern.