Vizuális szerkesztő — tippek és buktatók (drag-drop)

Hogyan használd a GrapeJS-alapú vizuális szerkesztőt: blokkok, in-place szerkesztés, kép-feltöltés, mentés és élesítés.

A /app/cloud/<slug>/vizualis-szerkeszto egy GrapeJS-alapú drag-drop weboldal-építő, magyar piacra szabott blokkokkal. Ezzel kód-tudás nélkül is élesedhet egy magyar landing-page 15 perc alatt. Ez a cikk a mindennapi használatot mutatja be.

Megnyitás

A /app/cloud/<slug> projekt-oldalon kattints a 🎨 Vizuális szerkesztő (drag-drop) gombra. Ez full-screen módba dob, ahol:

Bal oldalt: oldal-lista (multi-page támogatás)
Középen: a canvas — ide drag-drop-olod a blokkokat, és az élet-hűen jelenik meg
Jobb oldalt: blokk-katalógus (Basic, Forms, Magyar blokkok) és stílus-manager
Felül: device-nézetek (desktop / tablet / mobile), kód-nézet, undo/redo, mentés-gomb

Magyar blokkok — előre csomagolt sablon-elemek

A “Magyar blokkok” katalógusban 8 darab magyar piacra kalibrált komponens van:

🚀 Hero szekció — gradient háttér, fő-cím + sub + CTA-gomb
📣 CTA blokk — sötét bg, nagy gomb, konverzió-fókuszú
🟦 Funkciók (3 oszlop) — ikon + cím + leírás
🖼 Kép + szöveg (split) — fotó balra, szöveg jobbra
💰 Árazás (3 csomag) — Bronz/Ezüst/Arany pricing-cards
💬 Vélemény — testimonial idézőjelekkel
✉️ Kapcsolat — cím, telefon, e-mail blokk
🦶 Lábléc — © + ÁSZF + Adatkezelési-link

Húzd a katalógusból a canvasra; ott tudod a szövegeket módosítani kettős kattintással.

Drag-drop alapok

Húzd be a blokkot a katalógusból a canvasra
Kettős kattintás a szövegen → in-place szerkesztés
Egyszeri kattintás bármi elemre → jobb oldali stílus-manager aktiválódik (méret, szín, margin, padding, animáció)
Komponens kijelölés: a kék keret mutatja, mely elemen vagy
Komponens törlése: kijelölés után Delete-billentyű

Kép-feltöltés (saját R2-be)

Az Asset Manager ikonjára kattintva (kép-szimbólum, jobb oldali toolbar):

Drag-drop kép(eket) az ablakba (max 5 MB / fájl)
Auto-upload a saját R2-be a projekt-prefix alatt
Megjelenik a könyvtárban — kattints rá, hogy a kijelölt kép-blokkba beillesszem

A feltöltött képek <slug>.promnet.hu/assets/<hash>.<ext> URL-en élnek azonnal, CF CDN-en cache-elve.

In-place szerkesztés vs. kódnézet

A kód-nézet gomb (</>) megmutatja a generált HTML-t és CSS-t. Ez két felhasználási esetben hasznos:

HTML / CSS finomhangolás, amit a UI nem támogat (pl. border-image, clip-path, custom @media query)
Saját HTML beillesztés: ha külső sablonból (CodePen, Tailwind UI) másolnál be valamit, a kód-nézetben paste-eld be az importer ablakot

A </> után kapsz egy Importálás mezőt — másold be a teljes HTML-t, és a vizuális editor parsolva visszateszi.

Stílus-manager — finomhangolás

A jobb oldali Style Manager a kijelölt komponensre vonatkozik. Szekciói:

General: display, position, z-index
Layout / Flexbox: flex-direction, gap, justify-content
Dimension: width, height, min/max
Typography: font-family, size, weight, color, line-height
Decorations: background, border, border-radius, shadow
Extra: opacity, transitions, transforms, animations

Magyar nyelvű címek vannak. Plus a Selectors fülen láthatod a jelenlegi kijelölt elem CSS-szelektorát (pl. #hero-section .cta-btn).

Mentés — két mód

A. Manuális — ⌘+S vagy Mentés-gomb

A jobb felső sarokban: 💾 Mentés és élesítés. Ez:

Lekérdezi a teljes HTML-t és CSS-t a GrapeJS-ből
POST-olja a /api/cloud/<slug>/visual-save-re
Felülírja az R2-ben az aktuális oldalt (projects/<id>/<page>.html)
5 percen belül látható az <slug>.promnet.hu-n (CF cache-purge)

B. Auto-mentés — 30 másodpercenként

Ha dirty állapot van (változtatás történt), 30 mp után automatikus mentés indul. A státusz-sávban látod (“Auto-mentés…”).

A két nem ütközik — manuális mentés azonnali, auto-mentés csak akkor fut, ha tényleg van változás és nincs in-flight save.

Multi-page — több oldal egy projektben

A bal oldali Oldalak listán a + Új oldal gombbal:

Beírod a fájlnevet (pl. kontakt.html)
A rendszer létrehoz egy üres váz-szerkezetet (<div class="container">…)
Onnantól ugyanúgy szerkesztheted, mint az index.html-t

Részletesen: Több oldalas projekt.

Élő preview

A Élő site gomb (szem-ikon, jobb felső) új tabban megnyitja a <slug>.promnet.hu-t a legutóbbi mentés alapján. Hasznos a “hogy néz ki tényleg?”-pillanatra.

⚠ Cache: a Cloudflare CDN 5 percig cache-eli a HTML-t. Ha az élő oldalon még a régi van, várj 5 percet vagy hard-refresh (Ctrl+Shift+R).

Buktatók

“Editor betöltése…”-nél megáll — F5-tel frissíts; ha továbbra is, a böngésződ ad-blocker-e blokkolhatja a CDN-tartalmat (unpkg.com). Próbáld inkognitóban.

A kép nem látszik — a kép-asset URL-jét másold be ellenőrzésre egy másik tabba. Ha 404, az R2-feltöltés hibázott (méret-túllépés, nem-támogatott formátum). Csak JPG / PNG / WebP / GIF megy, max 5 MB.

A canvas fehér-bg, miközben az élő oldal sötét — a starter-template inline CSS-e a <head>-ben él. A vizuális editor ezt automatikusan beolvassa és a canvasra alkalmazza. Ha mégis fehér, F5-tel próbáld újra.

A változás nem látszik az élő oldalon — Cloudflare cache (5 perc). Vagy egy purge-et kell vele csinálni: /app/cloud/<slug> → Frissít gomb (cache-purge a domainre).

Mit NEM tud

Server-side logikát (PHP, Node-route) — a Cloud-projekt csak statikus fájlokat tárol. Form-küldéshez nézd a form-handler.
Adatbázis — nincs. Ha kell, használj külső headless-CMS-t (Sanity, Contentful) vagy Astro-t.
Login / member-area — nincs. Komplex flow-hoz Astro + saját backend.
Webshop — Stripe Buy Button-t beilleszthetsz <script>-tag-ként, de a teljes webshop-flow ne legyen itt.

Gyors súgó-link gyűjtemény

← Felhő tárhely Frissítve: 2026. 05. 02.