A
A's Adventure Editor renders · Flatsome-style concept
Phase 1 Dashboard Abrir editor
Render concept · canonical editor

Así se vería el editor visual tipo Flatsome para As Adventure.

La idea es un shell de edición con canvas vivo al centro, biblioteca de bloques a la izquierda e inspector contextual a la derecha. La edición se siente rápida, visual y enfocada en la página real.

Live preview Block registry Responsive Inline edit

What this render shows

  • Topbar con estado, breadcrumbs y acciones rápidas.
  • Tree de secciones para navegar como Flatsome.
  • Canvas central con preview vivo de la landing.
  • Inspector con campos editables y tokens visuales.
Render 01 · Desktop shell Overview / edit mode
DRAFT
Dashboard › Melcocho Hero
DesktopTabletMobile
Preview Save
/melcocho-extremo Click a block to edit
Premium adventure

Melcocho Extremo

Una landing editorial para vender la experiencia con jerarquía clara, CTA fuerte y media inmersiva.

Reservar ahoraVer detalles
Reto 01

Tarjeta editable con número, copy e imagen de fondo.

Video 01

Embed + título + subtítulo. Sub-editor dedicado.

CTA final

Bloque de cierre con frase y botón principal.

Render 02 · Focus stateSelected hero block
Selected element highlightedHero / title
Hero

Live title edit

Click inline text or use the inspector; the canvas updates immediately.

Inline text

Direct edit on hover/click.

Versioning

Save as draft, then publish snapshot.

Render 03 · Mobile viewStacked panels
Melcocho ExtremoMobile
Premium

Mobile editor

En móvil el canvas se mantiene claro y el inspector se vuelve un panel simple y directo.

Hero

Field editing + quick actions.

CTA

Button label and link.

Inspector bottom sheetCompact controls
Look & feel

Oscuro premium, acento verde/ámbar, tarjetas densas y jerarquía muy clara.

UX shape

El patrón es exactamente el de Flatsome: navegar, seleccionar, editar y ver el cambio en vivo.

Next step

Tomar este shell como base y convertirlo en editor real con registry de bloques + preview vivo.