Zorg ervoor dat blokken in de juiste volgorde worden weergegeven op mobiele apparaten wanneer je de klassieke editor gebruikt.

In de klassieke editor stapelt het responsive design van Squarespace automatisch blokken verticaal op mobiele apparaten. Dit zorgt ervoor dat je site leesbaar blijft en voorkomt dat bezoekers moeten inzoomen, uitzoomen en scrollen om door de inhoud te navigeren.

Als blokken niet stapelen zoals jij dat wilt, kun je blokken verplaatsen met behulp van de scenario's in deze gids en video. Experimenteren en een voorbeeld van je site bekijken is de beste manier om je lay-out te verfijnen tot je een ontwerp hebt waar je gek op bent en dat er op alle apparaten uitstekend uitziet.

Deze handleiding gaat over het mobiele gedrag van blokken die zijn toegevoegd in de klassieke editor, die wordt gebruikt op alle sites van versie 7.0 en bepaalde delen van sites van versie 7.1. Als je Fluid Engine gebruikt, kun je de lay-outs van je computer en mobiele telefoon onafhankelijk van elkaar rangschikken. Als je niet zeker weet welke editor een deel van je site gebruikt, bezoek dan je site bewerken met Fluid Engine.

Bekijk een video

Kolomlay-outs in de mobiele weergave

Wanneer blokken verticaal op elkaar gestapeld worden en de volledige breedte van een pagina innemen (zonder blokken aan weerszijden), worden ze ook verticaal op elkaar gestapeld op mobiele apparaten, waarbij de lay-out van de pagina op desktops behouden blijft. 

Als je blokken toevoegt aan de linker- of rechterzijde van andere blokken, maak je hiermee kolommen aan. Wanneer een pagina kolommen bevat, verplaatst Squarespace de tweede, derde en overige kolommen onder de eerste op mobiele apparaten. Met andere woorden: kolommen veranderen op mobiele apparaten van horizontaal in verticaal.

Bijvoorbeeld:

• Als je drie afbeeldingblokken in een horizontale rij hebt, stapelen ze zich op mobiel van links naar rechts op elkaar.
• Als je drie afbeeldingblokken naast elkaar hebt met daaronder tekstblokken die elke afbeelding beschrijven, wordt in de mobiele weergave elk afbeeldingblok voorzien van het bijbehorende tekstblok, gevolgd door de volgende afbeelding. Bekijk de video hierboven om te zien hoe dit werkt.

Houd deze uitzonderingen in gedachten:

• Afstandsblokken worden automatisch verborgen op mobiel op alle versie 7.1-sites en de meeste versie 7.0-sites.
• Blokken die in een tekstblok zweven (bijvoorbeeld afbeeldingen die met tekst zijn omwikkeld) worden in mobiele weergave boven het tekstblok weergegeven. Als blokken in de mobiele weergave onterecht boven de tekst verschijnen, verplaats het blok zodat het niet in de tekst zweeft.

Meer ingewikkelde lay-outs in mobiele weergave

In lay-outs waar sommige gebieden een andere kolomgrootte hebben dan andere, heb je nog steeds controle over hoe de blokken op je mobiel worden gerangschikt.

Bij het toevoegen van blokken zie je richtlijnen die aangeven hoe de blokken geordend worden. Als een richtlijn de lengte van een blok ernaast aangeeft, geeft dit Squarespace aan dat de twee blokken op alle schermen gegroepeerd moeten worden.

Om een blok gestapeld te houden met een ander blok, sleep je het blok en laat je het vallen wanneer de richtlijn (de horizontale lijn) over de lengte van het andere blok loopt.

Bekijk de video hierboven om te zien hoe dit werkt.

Meer hulp

• Gebruik apparaatweergave om te zien hoe je site eruitziet op mobiel. Omdat sites er op verschillende apparaten iets anders uit kunnen zien, raden we aan om ook te testen hoe de site er op je eigen mobiel apparaat uitziet.
• Bewerk je site vanuit de Squarespace-app voor een beter beeld van hoe je site eruitziet op mobiel.