8.1 KiB
Abgleich mit dem Flatsome UX Builder
Bedienkorrektur für leere Layouts (14.09.2026, KantSites 1.6.2)
Erneuter Quelltextabgleich mit dem von Umut genannten Ordner C:\Users\UmutKantarci\Downloads\flatsome, Theme-Version 3.20.9 laut style.css. Keine laufende WordPress-Installation dieses Pakets gestartet; die folgenden Aussagen stammen aus seinen tatsächlichen Builder-Dateien.
| Beobachtung im Flatsome-Code | Umsetzung in KantSites |
|---|---|
assets/css/builder/core/content.css: leeres content mit mindestens 90 px Höhe, getöntem Hintergrund und gepunktetem Rahmen |
Vorschau-only-Flächen für leere Sektionen, Zeilen und Spalten mit realer Mindesthöhe, Rahmen und Typbezeichnung |
tools-addable.is-empty und assets/js/builder/core/content.js: Plus in der Mitte, eigener Einfüge-/Drop-Zustand für leere Container |
„Inhalt hinzufügen“ im Zielbereich; Spalten werden nummeriert; der Einfügepunkt wird konkret markiert und benannt |
inc/builder/shortcodes/row.php: fertige Zeilen mit einer, zwei, drei und vier Spalten |
Diese vier gleichmäßigen Layouts direkt in der leeren Sektion anbieten, einschließlich passender mobiler Stapelung |
Zusätzlich: neue Container werden nach dem Rendern in den sichtbaren Ausschnitt gebracht, ein Auswahlwechsel löst alte Einfügepunkte, und beim Ziehen scrollt die Vorschau an den Rändern mit. Die Ablageanzeige nennt den Zielcontainer; beim Verschieben von Spalten entscheidet die horizontale Position. Editorhilfen entstehen ausschließlich im Vorschau-DOM, nicht im gespeicherten Dokument oder in der öffentlichen Ausgabe.
Der ältere Gesamtabgleich unten bleibt eine historische Bestandsaufnahme. Diese Änderung übernimmt konkrete Bedienprinzipien für den Aufbau, keine vollständige Flatsome-Oberfläche und keine WordPress-/Shortcode-Abhängigkeit.
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
- 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.
- Arbeitspaket I — Elementkatalog Stufe 1.
banner,textbox,stack,imagebox,logo,messagebox. Die Blöcke, ohne die eine Startseite Umwege braucht. - Arbeitspaket J — Optionsbedienung. Geräteschalter je Option, Ziehfelder, Abstandsrahmen, Spaltenbreite ziehen, Vorlagen je Element.
- Arbeitspaket K — Elementkatalog Stufe 2. Raster, Preistabelle, Team, Unterseiten, Video-Leuchtkasten, Suche, Sozialsymbole, Ankersprung.
- 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.