Fluid Engine, de nieuwe Squarespace drag & drop editor
Fluid Engine is de nieuwste drag & drop editor van Squarespace en vanaf juli 2022 uitgerold in alle 7.1 websites.
Deze nieuwe editor maakt qua vormgeving en lay-out meer dingen mogelijk, maar er zijn ook een aantal zaken om rekening mee te houden. Hieronder zet ik de belangrijke wijzigingen en aandachtspunten voor je op een rij.
Fluid Engine (FE) versus de Classic Editor (CE).
In Squarespace 7.1 heb je voorheen altijd gebruik gemaakt van de zogenaamde Classic Editor. Per sectie kan je de hoogte en breedte aanpassen. Tevens werkt de classic editor met een 12 kolommen systeem/grid.
Classic Editor kan je oa herkennen door de Upgrade button. Hiermee kan je overschakelen naar Fluid Engine.
Met Fluid Engine bestaat je sectie als het ware uit een blanco canvas waar je willekeurig blokken in kan draggen en droppen. Net zoals bij Canva.
Er wordt nog steeds gewerkt met een grid, maar dit grid kan je zelf aanpassen.
En je kunt de hoogte van je sectie aanpassen door deze groter of kleiner te slepen.
Fluid Engine. Via de button links bovenin kan je een nieuw block toevoegen. Via het blauwe icoontje rechts onderin kan je de sectie hoger of lager kan maken.
De voordelen van Fluid Engine
Een sectie met Fluid Engine is qua vormgeving heel flexibel waardoor je meer vrijheid hebt in je ontwerpen.
Je kan afbeeldingen helemaal tegen de zijkant van je scherm plaatsen.
Je kan afbeeldingen (deels) over elkaar heen zetten
Je kan meerdere blokken selecteren en tegelijk verplaatsen
Je kan een block makkelijk resizen door deze groter of kleiner te slepen
Je kan een text block een achtergrondkleur geven
Je kan een afbeelding het hele block laten vullen (fit en fill optie)
Je kan de mobiele versie apart vormgeven, dwz de volgorde van de content (wat tegelijkertijd ook een nadeel kan zijn omdat het meer tijd aandacht en tijd vergt)
Spacer blocks om ruimte tussen blokken te creëren zijn verleden tijd :-)
De nadelen van Fluid Engine
De mobiele versie moet je apart vormgeven wat meer aandacht en tijd vergt.
Elke sectie moet je helemaal opnieuw vormgeven.
Je hebt zoveel vrijheid dat je pagina’s er al snel rommelig uit kunnen komen te zien.
De verschillende styling opties van het Image Block zijn verdwenen (ofwel Poster, Card, Collage, Overlap en Stack). Deze moet je dus handmatig namaken.
Tablet view is niet beschikbaar. Dit is overigens ook zo bij de classic editor, maar gezien de ingebouwde responsiveness minder noodzakelijk.
Hoe schakel je over naar de Fluid Engine.
Heb je nu een 7.0 website?
Dan verandert er helemaal niks en blijf je met de Classic Editor werken..
Heb je al een tijdje een 7.1 website?
Alle nieuwe secties die je vanaf nu aanmaakt worden Fluid Editor (behalve Blog posts, Events en Product items. Deze blijven gebruik maken van CE).
Bestaande secties blijven Classic editor tenzij je ze handmatig upgrade naar Fluid Engine. Een eenmaal geupgrade sectie kan je niet meer terugzetten naar Classic Editor.
Start je met een 7.1 website?
Dit wordt vanaf juli 2022 volledig Fluid Engine. (behalve Blog posts, Events en Product items. Deze blijven gebruik maken van CE).
Met Classic Editor blijven werken?
Wil je liever met de Classic Editor blijven werken, dan kan je vooralsnog CE secties dupliceren. Je kan echter alleen dupliceren binnen een pagina. Een andere optie is om een duplicaat te maken van de hele pagina en daarna in het duplicaat de secties te verwijderen die je niet nodig hebt.
Werk je met CSS?
Mocht je werken met CSS dan breekt tijdens het upgraden veel van de code in die sectie wat ervoor zorgt dat je ontwerp er anders uit komt te zien. Die moet je dus opnieuw vormgeven. Maak anders eerst een duplicaat van de pagina waarvan je een sectie wilt upgraden. Upgrade de sectie en kijk wat er gebeurt.
De mobiele versie van je website
De mobiele versie moet je met Fluid Engine apart vormgeven, wat meer aandacht en tijd vergt.
De blokken verschijnen op mobiel namelijk op volgorde van aanmaken. Heb je dus tijdens het ontwerpen van de desktop versie als eerste een afbeelding aan je sectie toegevoegd, maar heb je daar later tekst boven gezet, dan verschijnt op de mobiele versie eerst de afbeelding bovenaan en daaronder de tekst. Dit zou je dan voor de mobiele versie handmatig moeten aanpassen. Check dus goed hoe je website er op mobiel uitziet.
Fluid Engine in ontwikkeling
Fluid Engine is in ontwikkeling en de mogelijkheden zullen in de loop van de tijd verder uitgebreid worden. Deze blogpost zal dan ook geupdate worden.
Tip
Duizelt je het nu allemaal en weet je niet goed wat te doen met je 7.1 website? Ga eerst eens spelen met Fluid Engine op een nieuwe (test)pagina die je in het Not Linked gedeelte zet.
Of dupliceer een bestaande pagina en zet die in het Not Linked gedeelte en upgrade de secties naar Fluid Engine en kijk wat er gebeurt. Helemaal als je met CSS werkt.
Kom je er niet uit, dan kan je altijd een online consult boeken en help ik je verder.
