Visual Builder i Optimizely 13 – vad förändras och vad kan vi förvänta oss?

Vad är Visual Builder – i korthet

Visual Builder är Optimizelys nya visuella redigeringsgränssnitt som ska göra det enklare att skapa och modifiera innehåll direkt på sidan, med drag-och-släpp, sid-vid-sid-redigering och förhandsgranskning i realtid. Det är designat att fungera i en SaaS-version av CMS samt integreras med befintliga API:er och innehållsarkitektur.

I Visual Builder introduceras begreppen Experiences, Sections och Elements, där:

• En Experience motsvarar huvudsidan eller ingången till en sida och fungerar som behållare för layout och sektioner.
• En Section är en sektion i sidan, en vertikal del med indelning i rader/kolumner.
• Elements är minsta byggstenarna – komponenter eller innehållsmoduler som placeras inom sektioner.

Layoutsystemet i Visual Builder använder två typer av strukturer: outline (en enkel ordnad lista av sektioner) och grid (hierarkisk layout med rader, kolumner och element) för mer komplex uppbyggnad.

Utvecklare definierar display templates (utseende / layoutegenskaper) och tillåter redaktörer att välja inställningar (t.ex. färgtema, markeringar) i Visual Builder.

Dessutom planeras att man ska kunna spara layoutkombinationer eller sektioner som blueprints (mallar) för återanvändning av strukturer.

Viktiga nyheter och förändringar att hålla koll på

Här är några av de förändringar som Visual Builder och CMS 13 för med sig, utifrån offentlig information:

1. Redigering med omedelbar respons och visuellt kontextläge

Visual Builder erbjuder “side-by-side editing” där redigering i paneler och ändringar i förhandsgranskningsvyn synkroniseras direkt. Det innebär att man inte behöver hoppa fram och tillbaka mellan editlägen och förhandsgranskning — det man gör syns nästan direkt i layouten.

2. Block/komponenter får visuell närvaro

Tidigare versioner av Optimizely har varit starka med blockmodellen – återanvändbara innehållsdelar – men många redaktörer kände att blocken var ganska “osynliga” tills sidan renderades. Med Visual Builder dras block (nu “elements”) in i layouten visuellt, och kan flyttas, ordnas och varieras direkt på sidan.

3. Begränsningar i komplex block-nestning

På Opticon 2024 visades att en del block-överlappning eller flera nivåer av nästlade block (block inuti block) kommer att begränsas eller tas bort för att undvika komplexitet och förvirring i redigeringsläget. I blogginlägget från Opticon nämns att “nesting blocks in blocks won't be possible” i den nya redaktörsupplevelsen som en medveten designbegränsning. Det verkar vara ett medvetet val, för att göra gränssnittet renare och enklare att förstå.

4. Inbyggd formbyggare i Visual Builder

Redan i 2025-utgåvan av SaaS-CMS har man lagt till stöd för att skapa “one-step forms” direkt i Visual Builder. Det betyder att redaktörer kan bygga t.ex. enkla kontaktformulär, surveyformulär eller registreringsformulär direkt i samma visuella vy som sidan utan att behöva hoppa till en annan editor.

5. DAM-integration och asset-hantering

CMS 2025-uppdateringen inkluderar också integrering av ett digitalt tillgångssystem (DAM) i CMS:et, vilket gör media- och bildhantering mer sömlös inom samma gränssnitt.

Man kan även extrahera sökbar text vid filuppladdning för att förbättra sökbarheten i media.

6. Variationer och flervariantsstöd

I Visual Builder finns stöd att skapa variationer av innehållsitems (t.ex. flera versioner av en komponent) och att inkludera dessa variationer i GraphQL-frågor, vilket gör det enklare att arbeta med flera layout- eller stilalternativ.

7. Sökmotor och Graph-arkitektur i botten

Bakom kulisserna byggs CMS 13 med en “graph-first architecture” – med Optimizely Graph som grund för innehållsmodellering och API-accessible struktur. Det innebär att layout, komponentdata och stilmallar all ligger i strukturer som kan indexeras, frågas och kombineras på nya sätt.

8. Mer realtidskoppling till Graph / synkronisering

I senaste release notes nämns att synkronisering med Optimizely Graph kan ske direkt, utan att gå via kö, vilket minskar fördröjning vid innehållsändringar.

Vad betyder förändringarna för redaktörer – möjligheter och utmaningar

Med de nya verktygen kommer många potentiella vinster, men också vissa nya aspekter man behöver förbereda sig för.

Möjligheter och förbättringar

1. Mer direkt kontroll och snabbare iteration
   Istället för att vänta på förhandsgranskning kan redaktör göra ändringar och se direkt hur de påverkar sidan.
2. Visuella komponenter och variationer
   Att block/element blir synliga i sidlayouten gör det enklare att förstå hur sidan är byggd, samt byta ut och omorganisera.
3. Ökat självförtroende och kreativ frihet
   Mindre beroende av utvecklare för layoutändringar och mer frihet att experimentera med sidstruktur och designkombinationer.
4. Effektivare hantering av media & formulär
   Integrerad DAM och möjligheten att bygga formulär direkt i buildern gör arbetsflödet smidigare.
5. Flexibilitet och framtidssäkring
   Tack vare Graph-arkitektur kan innehåll återanvändas och exponeras på fler sätt, kombineras med andra datakällor och användas i headless-scenarion.

Utmaningar att beakta

• Inlärningskurva
  Även om gränssnittet ska vara intuitivt, krävs det tid och vana för redaktörer att lära sig hur Experiences, Sections och Elements fungerar.
• Begränsningar i komplexa strukturer
  Vissa funktioner som nästlade block kan försvinna eller få begränsad användning, vilket kan kräva ny designdisciplin.
• Behov av tydliga display templates och modelleringsregler
  Utvecklare behöver definiera strukturer, layouts och valbara inställningar med omsorg för att ge redaktörerna nyttiga, men trygga val.
• Migrering och kompatibilitet
  Befintliga projekt måste migreras till nya strukturer, och det finns risk för brytningar i hur innehåll hanteras och visas.
• Prestanda och synkronisering
  Realtidssynkningar mot Graph och komplex layoutlogik kan innebära utmaningar kring prestanda, särskilt vid stora webbplatser med många komponenter.

Visionen – komponent-byggande direkt i sidan

Det jag personligen tycker är mest spännande är möjligheten att verkligen bygga sida med komponenter visuellt.

I Visual Builder kan vi förvänta oss att:

• Dra in ett element, t.ex. en hero-sektion, direkt i layouten.
• Välja mellan variationer (t.ex. layout, färgschema) inom samma element.
• Flytta element mellan rader och kolumner med enkel dragning.
• Kombinera element utan att behöva oroa sig för att layoutkedjor skall brytas.
• Spara layoutmallar/blueprints för återanvändning på andra sidor.

På så vis blir blockmodellen inte längre något “bakom kulisserna” utan något vi som redaktörer ser, förstår och arbetar aktivt med. Det förändrar hur vi skapar, bygger och underhåller innehåll – från formulär och editvyer till visuella upplevelser.

Visual Builder kan bli det stora lyftet

Visual Builder, som en central del av Optimizely 13 och SaaS-CMS, innebär stora förändringar för hur man redigerar, strukturerar och bygger innehåll. De stora nyheterna är att block/komponenter blir visuellt närvarande, att man kan jobba direkt i sidan med layout och variationer, och att redaktörens roll förskjuts mot att agera designer i en trygg miljö.

Samtidigt finns viktiga aspekter att hantera: att definiera tydliga display templates, att migrera befintligt innehåll och att lära upp redaktörsteam till nya arbetssätt.

Men med rätt inställning och implementation kan Visual Builder bli det stora lyftet för Optimizely – en möjlighet att flytta redaktörskapet närmare design och struktur, och göra innehållsarbete både smidigare och mer kreativt.