Mobiele website bewerkingen in Squarespace 7.1

Kort antwoord

In Squarespace 7.1 met Fluid Engine bewerk je de mobiele versie apart: klik in de editor rechtsboven op het mobiele icoon. Verplaats blokken met de pijltoetsen, zet de volgorde goed met omhoog en omlaag, werk met meerdere secties en stel de hoogte in via het aantal rijen. Layoutwijzigingen op mobiel veranderen je desktopontwerp niet; tekst en stijl zijn wel gedeeld.

Mobiele bewerkingen in Squarespace 7.1 op een rij

Bewerking	Zo doe je het	Waarom
Mobiele weergave openen	Klik rechtsboven in de editor op het mobiele icoon	Aparte layout voor telefoons
Blok precies verplaatsen	Selecteer het blok en gebruik de pijltoetsen	Slepen met de muis hapert soms
Volgorde aanpassen	Gebruik de pijlen omhoog en omlaag	Mobiel volgt de volgorde waarin je blokken toevoegde
Lange pagina's	Gebruik meerdere secties in plaats van één lange	Makkelijker te schikken op mobiel
Sectiehoogte	Stel het aantal rijen in bij de sectie-instellingen	Nauwkeuriger dan slepen

De lancering van de Squarespace 7.1 Fluid Engine Editor in 2022 was een echte gamechanger voor iedereen die met Squarespace werkt. De verbeterde creatieve controle, flexibiliteit, en de extra layout scherm voor mobiele websites hebben ook bij mij het ontwerpen nog leuker en vrijer gemaakt vooral omdat steeds meer mensen websites via hun mobiele apparaten bekijken. De mogelijkheden zijn eindeloos, en ik kan niet wachten tot jij dit ook ervaart. Lees vooral verder voor enkele handige hacks om je mobiele website in Squarespace te verbeteren!

Wat is de Squarespace 7.1 Fluid Engine?

Een van de meest opvallende veranderingen die Squarespace met de Fluid Engine doorgevoerd heeft, is dat de Fluid Engine Squarespace website editor jou de mogelijkheid geeft om een aparte mobiele versie van je website te maken, los van het grote scherm ontwerp. Met rond 50% van al het websiteverkeer in Nederland (bron Statcounter) afkomstig van mobiele apparaten, is deze functie nu belangrijker dan ooit!

Het nadeel hiervan is echter dat je computer- en mobiele website afzonderlijk moet aanpassen. Hoewel dit noodzakelijk is voor een goed mobiel webdesign, kost het toch wat extra tijd.

En daar komt dit artikel van pas! Als webdesigner die voortdurend websites ontwerpt met Squarespace, heb ik handige trucs bedacht om het bewerken van de mobiele versie in Squarespace 7.1 Fluid Engine sneller te maken. Dus blijf lezen!

Hoe bewerk je de mobiele website in Squarespace 7.1?

Klik op het mobiele pictogram rechtsboven en je scherm past zich aan aan het ontwerp voor mobiele apparaten. Alle bewerkingsfuncties voor de grote scherm versie zijn ook van toepassing op mobiel. De mobiele editor gebruikt dezelfde bewerkingsfunctie als voor de desktop website. Het is gewoon in een mobiel formaat. Dus je hoeft niets nieuws te leren als je eenmaal weet hoe je op desktop bewerkt. Natuurlijk zijn dingen veel kleiner en onder elkaar op mobiel en is het schermformaat compleet anders, maar daarom is het belangrijk om aan te passen en ervoor te zorgen dat alles er ook goed uitziet op mobiel. Dat is altijd al zo geweest, maar nu kun je het daadwerkelijk onafhankelijk doen.

Hoe verplaats je blokken precies op mobiel?

Als je hebt geëxperimenteerd met Squarespace 7.1 Fluid Engine Editor, weet je dat het slepen van een blok van de ene positie naar de volgende soms wat hapert. In plaats van je muis te gebruiken om blokken te klikken en slepen, gebruik je in plaats daarvan je pijltjestoetsen van je toetsenbord.

Omdat de editor van Squarespace blokken vastzet in het raster, gebruik dan de pijltoetsen voor een gestroomlijnde en nauwkeurige ervaring. Bovendien hoef je je geen zorgen te maken over het vastpakken van het juiste blok wanneer blokken elkaar beginnen te overlappen.

Hoe verander je de volgorde van blokken op mobiel?

Squarespace vult de layout van de mobiele versie in volgens de volgorde waarin je het blok aan je desktopontwerp hebt toegevoegd. Dus niet volgens de positie in je desktopontwerp! Dit betekent dat je blokken soms moeten worden herschikt.

Versnel het proces door de pijlen "omhoog" en "omlaag" om de blokken snel de volgorde van je mobiele website te wijzigen. Door op de "omhoog" pijlen te drukken, verplaats je een blok zodat het boven het blok erboven komt te staan, en door op de "omlaag" pijl te drukken, verplaats je het blok onder het blok eronder.

Opmerking: Squarespace werkt aan een nieuw systeem om dit aan te passen, zodat de blokken zich aanpassen aan de plaats waar je ze op je desktoppagina hebt toegevoegd, in plaats van de volgorde waarin je ze hebt toegevoegd. Dus binnenkort ga je merken dat de blokken er op mobiel behoorlijk goed uitzien wanneer je aan het bouwen bent! Maar het zal nooit perfect zijn en je zult altijd moeten aanpassen.

Waarom gebruik je beter meerdere secties?

Gebruik in plaats van al je inhoud in een zeer lange sectie te plaatsen, meerdere secties om je pagina te maken. Als je het uiterlijk van een sectie wilt behouden in plaats van meerdere secties, stel dan de sectiethema's in op dezelfde kleur en verlaag de sectieopvulling tot 0. Dit geeft hetzelfde effect. Als je dingen wilt verplaatsen, gebruik dan eenvoudigweg de omhoog en omlaag knoppen om secties te verschuiven. Dit maakt het vooral op mobiel gemakkelijker en sneller. Als je een lange sectie hebt, kan het verplaatsen van items op mobiel traag en haperend zijn. Denk aan het werken met "kleine brokken" wanneer je meer secties hebt.

Hoe pas je de hoogte van een sectie aan?

Een cool aspect van Squarespace Fluid Engine is dat je de grootte van je sectie kunt bepalen zonder dat je space blokken hoeft toe te voegen. Echter je gaat merken dat bij het werken met Fluid Engine er vaak extra rijen onderaan je sectie worden toegevoegd die je moet verwijderen. Dit gebeurt helaas vaak bij de mobiele weergave.

Als je jezelf met extra rijen op je mobiele site vindt die je moet verwijderen, raad ik je aan om de gewoonte aan te nemen om het aantal rijen in het gedeelte Instellingen te gebruiken in plaats van te proberen het blauwe pijltje omhoog en omlaag te slepen. De sleepfunctie bij het bewerken op mobiel vertoont vaak haperingen, maar het aantal rijen in de instellingen niet.

Open de instellingen van je sectie, klik binnen het aantal rijen en gebruik vervolgens je pijltjestoetsen om rijen toe te voegen of te verwijderen. Naar onze ervaring is dit de meest soepele manier om dit te doen, zonder haperingen!

Veelgestelde vragen over de mobiele website in Squarespace

Verandert mijn desktopwebsite als ik de mobiele versie aanpas?

De layout op mobiel staat los van desktop. Tekst, afbeeldingen en stijlen zijn wel gedeeld, dus die pas je op beide tegelijk aan.

Waarom staat de volgorde op mobiel anders dan op desktop?

Squarespace zet de blokken op mobiel in de volgorde waarin je ze op desktop hebt toegevoegd, niet in de volgorde waarin ze op de pagina staan. Met de pijlen omhoog en omlaag zet je dat recht.

Hoe bekijk ik mijn website op mobiel zonder telefoon?

Klik in de Squarespace editor rechtsboven op het mobiele icoon. Je ziet dan direct hoe je pagina op een telefoon wordt weergegeven.

Werkt dit ook in Squarespace 7.0?

Nee. Fluid Engine en de aparte mobiele layout bestaan alleen in Squarespace 7.1.

Squarespace heeft hard gewerkt aan het verbeteren van de mobiele website editor

Hoewel we het er allemaal over eens kunnen zijn dat er nog veel werk aan de winkel is, heb ik de afgelopen maanden veel kleine veranderingen gezien die een grote impact hebben gehad. Ik hoop dat deze tips je helpen om sneller te ontwerpen.

Ik hoop dat je deze blog waardevol vond! Ik kijk uit naar de functionele en creatieve wijzigingen die je aan je mobiele Squarespace website gaat toevoegen.

Mis deze niet