Upgrade je Squarespace website van 7.0 naar 7.1
Heb je in 2025 nog een 7.0 Squarespace website? Dan wordt het ondertussen tijd om serieus na te denken om over te stappen naar 7.1. In alle 7.0 websites zit er tegenwoordig een mogelijkheid om te upgraden, dus eigenlijk is er geen excuus meer.
Waarom het slim is om te upgraden en hoe je dit het beste voorbereidt, vertel ik je in deze blogpost.
Inhoudsopgave:
Waarom zou je upgraden naar 7.1?
Squarespace 7.1 is niet nieuw meer. Sterker nog: versie 7.1 is al in januari 2020 gelanceerd.Een aantal goede redenen om de upgrade serieus te overwegen:
7.1 is toekomstbestendig – Alle nieuwe functionaliteiten worden alleen nog in deze versie uitgerold.
7.1 is sneller – En dat is gunstig voor je SEO.
7.1 heeft Fluid Engine – Dit is de nieuwste editor, waardoor je veel meer controle hebt over het design.
In 7.1 kun je de mobiele versie aanpassen – Wat in 7.0 vaak frustrerend was, is nu eindelijk wél mogelijk.
Kortom, wil je meegaan met de tijd, makkelijker je site kunnen aanpassen en je het belangrijk vindt om online gevonden te worden, dan is overstappen naar 7.1 een must.
Voorbereiden van de upgrade
De upgrade naar 7.1 werkt via een preview modus. Zodra je die activeert, ben je in een soort tussenfase. Je kan niet makkelijk heen en weer switchen naar je 7.0 versie en instellingen bekijken.
Zorg daarom dat je deze dingen doet voordat je op de preview button klikt:
Maak screencaptures van alle pagina’s (de Chrome-extensie GoFullPage is handig). Zo weet je straks nog precies hoe elke pagina eruit zag.
Maak een duplicaat van je 7.0 site. Zo heb je altijd een backup achter de hand (dit kan alleen bij websites met minder dan 100 pagina’s). Dit kan via je dashboard.
Maak screenshots van je font-instellingen: H1, H2, H3, body text.
Noteer alle kleurcodes (hex) van de kleuren die je gebruikt.
Maak screenshots van de button-instellingen (small/medium/large).
Maak een backup van je CSS. (via Design > Website Tools > Custom CSS. Je kunt de code copy pasten in Notion of een Google Doc.
Dit helpt je straks met het sneller instellen van 7.1, want het kan goed zijn dat er eea wijzigt bij de upgrade.
Wat gebeurt er in de preview modus?
Je vindt de preview mogelijkheid onder Design > Update to version 7.1 in het linker menu.
Klik op de knop Get Started en daarna op de knop Preview Site in 7.1.
Het laden van de preview kan een paar minuten duren. Daarna verschijnt er bovenaan een blauwe balk: je zit nu in de 7.1 preview.
Je websitebezoekers zien nu nog gewoon je oude site, tenzij je links bovenaan op de Publish knop klikt. Dan gaat je site echt over naar 7.1. Dat doen we dus nog niet. De blauwe balk onderaan kan je wegklikken.
Je gaat nu eerst in de Preview modus aan de slag met de instellingen en vormgeving. De broncode van Squarespace 7.1 verschilt van 7.0, waardoor pagina's er anders uit kunnen komen te zien. Lettertypes, kleuren en marges kunnen zijn veranderd. Ook komen indexpagina’s te vervallen in 7.1. Dit worden nu pagina’s opgebouwd uit secties.
Lang verhaal kort, je moet elke pagina van je website één voor één nalopen en finetunen. Maar eerst begin je met de volgende algemene instellingen:
Aanpassen algemene instellingen in preview modus
Kleuren
Stel een kleurenpalet samen met vijf kleuren. Hieruit worden automatisch tien kleurenthema’s gegenereerd. Die kun je achteraf aanpassen.
Het kleurenpalet vind je hier: Site Styles (het kwast icoontje rechts bovenin) > Colors > Customize > Edit Palette)
Links stel je de lichtste kleur in, rechts de donkerste. De middelste kleur is de accentkleur, vaak gebruikt voor buttons.
Lettertypes
Stel de juiste lettertypes in voor oa je Heading en Paragraph teksten, en de buttons. Je lettertypes kunnen namelijk bij de upgrade veranderd zijn.
In 7.0 heb je vier heading teksten (H1 t/m H4) en drie paragraph teksten (P1 t/m P3). Je 7.0 body text is vergelijkbaar met P2 in 7.1.
De instellingen voor de lettertypes vind je hier: Site Styles (het kwast icoontje rechts bovenin) > Fonts > Customize > Headings/Paragraphs).
Loop na het publiceren van je 7.1 site ook nog Miscellaneous en Assign Styles langs in het Font overzicht.
Buttons
Loop de instellingen van de buttons langs. In 7.1 heb je nog steeds de keuze uit 3 buttons. In plaats van small, medium en large heten ze nu Primary (voorheen medium), Secondary (voorheen small) en Tertiary (voorheen large).
De instellingen voor de buttons vind je hier: Site Styles (het kwast icoontje rechts bovenin) > Buttons > Customize
Spacing
Deze upgrade is een goed moment om de marge aan de linker en rechterkant van je website opnieuw in te stellen. Idealiter maak je gebruik van deze instellingen:
max width 1440px
spacing 6vw
Je kunt dit hier instellen: Site Styles (het kwast icoontje rechts bovenin) > Miscellaneous > Spacing. Dit kan er wel voor zorgen dat de verdeling van de blokken op je pagina iets wijzigen.
Aanpassen vormgeving pagina’s in preview modus
Na de algemene instellingen is het tijd om elke pagina qua vormgeving langs te lopen.
Kiezen tussen de Classic Editor of Fluid Engine
Afhankelijk hoe je 7.0 website was opgebouwd, bestaan de nieuwe 7.1 pagina’s uit één of meerdere secties.
Elke sectie wordt bij de upgrade standaard in de Classic Editor gehouden (die ook gebruikt wordt in 7.0). Je kunt per sectie kiezen of je wilt upgraden naar Fluid Engine. Eenmaal geüpgrade is er geen weg terug.
In Fluid Engine kunnen er wel wat blokken verspringen. En de mobiele weergave is vaak… een zooitje. Check die dus altijd goed! Dat kan door rechtsboven op het icoontje van een mobiele telefoon te klikken. Je kunt blokken in de mobiele versie eenvoudig omwisselen, en groter en kleiner maken.
Publiceer je 7.1 site
Ben je tevreden over hoe alles er (grofweg) uitziet? Klik dan linksboven op Publish in de blauwe balk.
Check daarna nog één keer goed je hele website, want pas na het publiceren heb je volledige toegang tot alle instellingen.
Vergeet vooral je mobiele versie en je Custom CSS niet! Je CSS is gedeactiveerd in de preview modus en moet je zelf weer activeren. Verwijder code die niet meer relevant is.
Wil je toch terug naar 7.0?
Klik dan in de blauwe balk op Cancel in plaats van Publish. Daarna opent een pop-up waarna je op Cancel Update klikt.
Tip: oefen vooraf met 7.1
Wil je eerst even oefenen met 7.1 en Fluid Engine? Maak dan een nieuwe website aan in het dashboard van je Squarespace account. Tijdens de twee weken trial kan je een template kiezen en experimenteren met Fluid Engine. Bekijk ook vast de Site Styles. Zo krijg je een idee hoe 7.1 werkt voordat je met je eigen website aan de slag gaat.
Veelgestelde vragen
-
Nee. Zodra je op ‘Publish’ klikt, is er geen weg terug. Wel kan je vanuit de Preview mode weer terug naar 7.0.
-
Ja, 7.1 is sneller. Niet spectaculair, maar genoeg om impact te hebben op je SEO.
-
De meeste mensen gebruiken 7.0 of 7.1. Versie 7.1 is de huidige standaard en wordt actief ondersteund. Er bestaan ook nog Squarespace 5 websites, maar die zijn heel oud.
-
Nee. Fluid Engine is exclusief voor 7.1 sites.
-
Ja, iedereen die toegang heeft tot de site ziet de Preview modus.
-
Nee, zolang de preview actief is, werk je in een tijdelijke 7.1 versie. Je kunt alleen aanpassingen doorvoeren aan bestaande pagina’s.
-
Nee, pas na ‘Publish’ worden je aanpassingen definitief.
-
Upgraden is op dit moment (nog) niet verplicht - Squarespace zal 7.0 blijven ondersteunen - maar je loopt wél nieuwe functies en snelheid mis.
-
Je CSS blijft behouden, maar wordt wel uitgeschakeld. Dus dit moet je zelf in het CSS panel weer activeren. En sowieso goed om je code handmatig door te lopen, want sommige selectors heten anders. Tot je CSS panel heb je geen toegang in de Preview modus. Dit heb je pas weer zodra je je 7.1 website hebt gepubliceerd.
Hulp nodig?
Heb je geen tijd of zie je het niet zitten om de upgrade naar 7.1 zelf te doen? Ik help je graag. Dit kan ik voor je doen tijdens een Webdesigner voor een Dag.
