Klik en sleep blokken naar nieuwe posities om de inhoud op je website te herschikken.

Verplaats blokken over je pagina's om lay-outs aan te passen of kolommen en rijen te maken. Deze gids is een volgende stap na Inhoud toevoegen met blokken, die we je aanraden eerst te lezen als je nieuw bent bij Squarespace.

Opmerking: Je kunt een blok verplaatsen binnen het contentgebied van de pagina waar het is toegevoegd. Het is niet mogelijk om blokken te verplaatsen tussen pagina's of afzonderlijke contentgebieden, zoals van een footer naar een blogpost.

Bekijk een video

Verplaats een blok

Overal waar je blokken toevoegt in Squarespace, kun je blokken verplaatsen om de lay-out aan te passen. Om een blok te verplaatsen:

Tip: Om de inhoud van je site toegankelijk te maken voor een zo breed mogelijk publiek, kun je de toegankelijkheidsbronnen van Squarespace raadplegen.

Fluid Engine lay-outs

De huidige blokbewerkingservaring op Squarespace heet Fluid Engine. Het wordt ondersteund op versie 7.1-sites in elk gebied waar je blokgedeelten toevoegt, inclusief lay-outpagina's, portfolio-subpagina's en je footer. Collectie-items en blokgedeelten die vóór de release van Fluid Engine zijn toegevoegd, gebruiken de klassieke editor.

Vanwege het rastersysteem in Fluid Engine kan het verplaatsen van een blok ertoe leiden dat sommige blokken eromheen ook enigszins verplaatsen. Dit gebeurt om het algehele evenwicht van de lay-out van het gedeelte te behouden. 

Houd er rekening mee dat je in Fluid Engine de computer- en mobiele weergaven apart instelt.

Blokken centreren

Om een blok horizontaal te centreren, klik en sleep je het blok naar het midden van het gedeelte en laat je het los wanneer er een gele lijn verticaal door het midden van het raster verschijnt. Het blok kan zichzelf enigszins aanpassen om ervoor te zorgen dat het in het midden van het gedeelte staat.

Maak blokken schermbreed

Wanneer je een blok buiten het Fluid Engine-raster verplaatst, past het zich aan aan de breedte van de content van het gedeelte. Hiermee creëer je een volledig schermbreed effect. Bepaalde blokken, zoals afbeeldingsblokken die zijn ingesteld op vullen, moeten mogelijk op een andere manier worden bijgesneden om het effect te realiseren. 

Stel de uitlijning en overlap van de inhoud in.

Nadat je een blok naar een nieuwe plek in Fluid Engine hebt verplaatst, verschijnt de werkbalk van het blok.

• Om de inhoud van het blok horizontaal, verticaal of beide in de randen van het blok uit te lijnen, klik je op de uitlijningspictogrammen in de werkbalk van het blok. Houd er rekening mee dat sommige blokken, zoals afbeeldingblokken en knoppenblokken die zijn ingesteld op 'vullen', geen uitlijnopties hebben.
• Als blokken overlappen, toont de werkbalk de pictogrammen Beweeg vooruit en Beweeg achteruit , zodat je kunt instellen welk blok bovenaan ligt. Als veel blokken overlappen, moet je misschien meerdere keren klikken om het blok helemaal naar voren of achteren te brengen, of lagen gebruiken om blokken snel naar voren of achteren in je lay-out te verplaatsen.
• Om blokcontent beter zichtbaar te maken op overlappende blokken, voeg je achtergrondkleuren toe aan bepaalde blokken.

Lagen gebruiken om je blokken naar voren of naar achteren te verplaatsen

Klik op het Layers pictogram om een lijst te openen van blokken in het Fluid Engine gedeelte. Wanneer je met de muis over een blok in de lijst zweeft, wordt het gemarkeerd in de inhoud van je site.

Om de positie van een blok in de lay-out te wijzigen, klik en sleep je het omhoog of omlaag in de lijst. Je kunt de lijst ook gebruiken om blokken bij bepaalde browsergroottes te verbergen.

Meerdere blokken tegelijk ordenen

Markeer meerdere blokken door in de achtergrond van het gedeelte te klikken en te slepen. Verplaats of rangschik vervolgens alle gemarkeerde blokken tegelijkertijd:

• Om meerdere gemarkeerde blokken tegelijkertijd te verplaatsen, klik en sleep een van de blokken. Hierdoor worden alle gemarkeerde blokken tegelijk verplaatst, waardoor hun huidige lay-out behouden blijft.
• Om alle gemarkeerde blokken tegelijk uit te lijnen, klik je op de knop groep uitlijnen die in de werkbalk verschijnt. Kies vervolgens een van de uitlijningsopties.
• Om alle gemarkeerde blokken naar achteren of naar voren te verplaatsen, klik je op de knoppen Verplaats naar achteren of Verplaats naar voren die in de werkbalk verschijnen.
• Om de grootte van alle gemarkeerde blokken aan te passen, zweef je over een van de hoeken in de omlijning van een blok totdat het een pijl wordt. Versleep ze vervolgens om de blokken groter of kleiner te maken.

Om alle blokken in een Fluid Engine-gedeelte tegelijk te markeren en te verplaatsen, druk je op Command + A of Control + A, en versleep je ze.

Lay-outs klassieke editor

Alle blokgebieden op sites met versie 7.0 gebruiken de klassieke editor. Het is ook in sommige delen van sites van versie 7.1:

• Blogposts, evenementen en aanvullende productinformatie
• Blokgedeelten toegevoegd vóór Fluid Engine

Blokken die bewegen

In de meeste gebieden met de klassieke editor ondersteunt een onzichtbaar raster tot 12 kolommen en een onbeperkt aantal rijen. Sommige gebieden, zoals footers, kunnen andere beperkingen hebben.

• Als je een blok aanklikt en versleept om de positie in het raster te veranderen, wordt het blok halfdoorzichtig.
• Bij het verplaatsen van een blok verschijnen richtlijnen die je laten zien waar je het blok plaatst. Deze zijn vooral handig als je kolommen en rijen maakt.
• Als je een blok in een tekstgebied plaatst, zoals wanneer je een blikvangercitaat maakt, verschijnt er een grijs vak op de plaats waar het blok wordt geplaatst om te laten zien hoe de tekst eromheen zal lopen.

Blokken plaatsen

Als je een blok versleept, verschijnen er richtlijnen die laten zien wat er gebeurt als je het loslaat:

• Verticale lijn: de hoogte van het contentgebied – Het blok zal de volledige hoogte van de pagina beslaan, waardoor een nieuwe kolom ontstaat
• Horizontale lijn over de breedte van het contentgebied - Het blok beslaat de volledige breedte van de pagina en creëert een nieuwe rij
• Lijn die overeenkomt met de hoogte of breedte van een ander blok – Het blok wordt toegevoegd aan een bestaande kolom of rij, op dezelfde hoogte of breedte als dat blok

Schei je de blokken in kolommen en rijen.

Lijnblokken en afstandsblokken zijn nuttige hulpmiddelen om inhoud op te splitsen in kolommen en rijen.

• Omdat tekstblokken vaak samensmelten wanneer ze gestapeld zijn, gebruik een lijn- of afstandsblok om tekst te verdelen en samenvoeging te voorkomen. Bekijk het onderstaande gedeelte over tekstblokken voor hulp hiermee.
• Je kunt ook lijn- en afstandsblokken gebruiken om inhoud tijdelijk te scheiden bij het opmaken van een pagina of contentgebied. Gebruik een lijn- of afstandsblok om rijen te verdelen en voeg vervolgens blokken toe om nieuwe parallelle kolommen te maken. Nadat de inhoud is gerangschikt, verwijder je de regel- of afstandsblokken, waarbij je rekening houdt met het samenvoegen van tekstblokken na het verwijderen van de regel of het afstandsblok.

Mobiele lay-outs

Hoe blokken worden gerangschikt op mobiele browsers hangt af van in welke editor de blokken staan:

• Fluid Engine - De mobiele en computerlay-outs zijn gescheiden. Klik op het Mobile View-icoon rechtsboven om de mobiele lay-out van de pagina te bekijken en te bewerken. Het verplaatsen van blokken in de computerlay-out heeft geen invloed op de mobiele lay-out. 
• klassieke editor – Het is niet mogelijk om de lay-outs voor computer en mobiel afzonderlijk te bewerken. De mobiele lay-out komt overeen met de lay-out van de computer, en blokken worden automatisch herschikt zodat ze op kleinere apparaten passen.

Maak kolommen en rijen

Je site bevat een aantal opties om automatisch kolommen en rijen te maken met veelvoorkomende soorten inhoud. Je kunt er na verloop van tijd meer content aan toevoegen zonder veel handmatig te herschikken. We raden aan deze opties te gebruiken voor schone, consistente kolommen en rijen:

• Automatische lay-outs (versie 7.1) – Afbeeldingen, tekst en knoppen
• Galeriegedeelten (versie 7.1) - Afbeeldingen en tekst
• Galerieblokken - Afbeeldingen en tekst
• Samenvattingsblokken – Afbeeldingen en tekst afkomstig van collectiepagina's, zoals blogs

Als je echter kolommen en rijen moet maken met andere soorten inhoud, of in lay-outs die niet door de bovenstaande opties worden ondersteund, kun je kolommen en rijen maken met sets van blokken:

• Fluid Engine - Zet blokken op hun plaats en pas de grootte aan met behulp van de rasterrichtlijnen voor consistente kolommen en rijen. Rangschik de mobiele lay-out indien nodig in verschillende kolommen en rijen.
• Klassieke editor – Het maken van kolommen en rijen is complexer. In de rest van deze gids beschrijven we hoe je handmatig kolommen en rijen kunt maken in de klassieke editor.

Deze video toont versie 7.0, maar geldt ook voor de klassieke editor in versie 7.1.

Columns aanmaken in de klassieke editor

Kolommen kunnen de volledige hoogte van het contentgebied beslaan of uitgelijnd worden met een blok in een bestaande rij om een kolom met dezelfde hoogte te creëren. Om een kolom te maken:

1. Zweef boven een blok dat je wilt verplaatsen. Je cursor verandert in een handpictogram. Als het handje niet verschijnt, klik dan eerst op het blok.
2. Versleep het blok om het over de pagina te verplaatsen.
3. Als je het blok verplaatst, verschijnen er richtlijnen die laten zien in welke nieuwe kolom je blok komt te staan.
4. Volg de onderstaande stappen om de kolom toe te voegen aan een volledige pagina of een kolom met overeenkomende hoogte.

Maak een paginalange kolom aan

Om een nieuwe kolom te maken die de volledige hoogte van de pagina beslaat, versleep je een blok totdat de richtlijn verticaal over de hele pagina loopt. Hiermee maak je een nieuwe kolom die de hele pagina in tweeën splitst.

Maak een kolom die past bij jouw hoogte

Om een nieuwe kolom aan te passen aan de hoogte van een ander blok, versleep je het blok totdat de richtlijn overeenkomt met de hoogte van het andere blok. Dit is handig om blokken boven of onder bredere blokken naast elkaar te plaatsen.

De breedte van de kolom wijzigen

Om kolommen te maken die allemaal dezelfde breedte hebben, moet je een van de volgende aantallen kolommen kiezen:

• 1
• 2
• 3
• 4
• 6
• 12

Als je een ander aantal kolommen hebt, zullen ze verschillende breedtes hebben. Deze regel geldt voor alle contentgebieden van je site, behalve zijbalken en sommige footers.

Wijzig als volgt de breedte van een kolom:

1. Zweef tussen twee blokken totdat je twee pijlen ziet die naar links en rechts wijzen.
2. Klik en sleep om de kolom uit te vouwen of te verkleinen.
3. Dit verandert zowel de kolombreedte als de totale grootte van beide blokken.
4. Herhaal dit met de spaties tussen de andere blokken in de rij als je dat nodig vindt.

Maak rijen aan in de klassieke editor.

Rijen kunnen de volledige breedte van het contentgebied beslaan of uitlijnen met een blok in een bestaande kolom om een stapel te vormen. Om een rij te maken:

1. Zweef over het blok dat je wilt verplaatsen. Je cursor verandert in een handpictogram. Als het handje niet verschijnt, klik dan eerst op het blok.
2. Versleep het blok om het over de pagina te verplaatsen.
3. Terwijl je het blok verplaatst, verschijnen richtlijnen die de kolom of rij weergeven waarin het blok zal staan.
4. Volg de stappen hieronder om je blok in een volledige pagina-rij of een uitgelijnde rij te plaatsen.

Tip: Afbeeldingblokken, afstandsblokken, kaartblokken en carrouselgalerieblokken bevatten een uitsnijgreep waarmee je de hoogte van het blok kunt aanpassen. Gebruik deze blokken om de rijhoogtes op je pagina aan te passen.

Een rij over de volledige pagina aanmaken

Om een nieuwe rij aan te maken die over de hele pagina of post loopt, versleep je een blok zodat de richtlijn horizontaal over de hele pagina loopt.

Maak een rij met gelijke breedte

Om de breedte van een ander blok aan te passen, verplaats je een blok boven of onder een ander blok totdat de richtlijn krimpt om overeen te komen met de breedte van het bestaande blok. In plaats van een hele rij over de pagina te maken, stapelt deze actie individuele blokken boven op elkaar.

Maak alleen-tekst kolommen en rijen aan in de klassieke editor

Tekst verplaatsen naar kolommen of rijen kan lastig zijn. Tekstblokken worden vaak samengevoegd wanneer ze worden gestapeld. Je kunt dit vermijden door afstandsblokken te gebruiken om content te scheiden tijdens het bouwen van de pagina.

Tekstkolommen

Tekst in kolommen verplaatsen is een uitstekende manier om inhoud visueel te verdelen of om tekst te koppelen aan andere blokken, zoals afbeeldingblokken. Om tekstkolommen te maken:

1. Voeg je eerste tekstblok ergens op de pagina toe.
2. Klik op een invoegpunt ergens op de pagina om een afstandsblok toe te voegen. Klik en sleep het blok naast het eerste tekstblok.

3. Klik op een invoegpunt ergens op de pagina om je volgende tekstblok toe te voegen. Omdat tekstblokken soms moeilijk te verplaatsen zijn nadat ze zijn geplaatst, klik en versleep je het pictogram Tekst rechtstreeks vanuit het blokmenu. Richtlijnen verschijnen, net zoals wanneer je een blok verplaatst dat al geplaatst is.
4. Sleep het teksticoon naar het afstandsblok totdat de richtlijn tot dezelfde hoogte is verkleind, laat het los en voeg je tekst toe.

5. Herhaal het proces van het toevoegen van afstandsblokken en tekstblokken voor zoveel tekstkolommen als je nodig hebt.
6. Als je al je tekstkolommen hebt geplaatst, verwijder dan de afstandsblokken zodat alleen de tekstkolommen overblijven.

Rijen tekst

Gestapelde tekstblokken worden vaak samengevoegd tot één blok. Om deze blokken gescheiden te houden, raden we aan om je tekst op te delen met een regel of afstandsblok. Voor gedefinieerdere ruimtes gebruik je een lijnblok. Voor een open ruimte gebruik je een afstandsblok.

Combineer kolommen en rijen in de klassieke editor.

Misschien wil je kolommen en rijen combineren om je pagina aan te passen. Een veelvoorkomend voorbeeld is een bedrijfsbiopagina, waar je tekstblokken met bijbehorende afbeeldingblokken in even rijen wilt plaatsen. In dit voorbeeld combineren we drie afbeeldingblokken en drie tekstblokken.

Om kolommen en rijen te combineren:

1. Voeg drie afbeeldingblokken toe, elk in hun eigen kolom, met behulp van de stappen voor het aanmaken van kolommen met dezelfde hoogte hierboven.
2. Voeg onder elk afbeeldingblok een tekstblok toe. Zorg ervoor dat de richtlijn overeenkomt met het afbeeldingsblok erboven, waardoor er een nieuwe rij wordt aangemaakt binnen de bestaande kolom onder elke afbeelding.

Als je titels nodig hebt, voeg ze dan bovenaan elke kolom toe met extra tekstblokken die zijn uitgelijnd met de afbeeldingblokken.

Hoe los je problemen op met kolommen en rijen in de klassieke editor?

Mijn afbeeldingen hebben verschillende afmetingen.

Voor de beste resultaten helpt het om ervoor te zorgen dat elke afbeelding die je gebruikt dezelfde beeldverhouding heeft voordat je deze uploadt. Meestal raden we aan om afbeeldingen te gebruiken met een breedte van minimaal 1500 pixels. Zie Afbeeldingen opmaken voor weergave op het web voor hulp bij het aanpassen van je afbeeldingen.

Mijn lay-out van kolommen en rijen verschijnt niet op een mobiel apparaat

Om je site leesbaar te houden en te voorkomen dat bezoekers hoeven te knijpen, inzoomen en scrollen om je content te bekijken, stapelt Squarespace's responsive design automatisch blokken verticaal op mobiele apparaten. De volgorde van je blokken hangt af van de structuur van je kolommen en rijen.

Zie Hoe blokken stapelen op mobiel in de klassieke editor voor meer informatie.