Anpassa grupplayouten

Gruppblock hjälper dig att organisera innehåll i en behållare, som du kan formatera och placera som en enhet. Den här guiden visar hur du använder layoutinställningarna för att skapa responsiva, väljusterade sidsektioner med ett gruppblock.

Som standard organiserar ett gruppblock blocken inuti så att de visas ovanpå varandra. Genom att ändra hur block arrangeras inom en grupp kan du styra om innehållet visas sida vid sida (horisontellt) eller staplat (vertikalt), vilket ger dig mer layoutflexibilitet för din design. Du kan anpassa justeringen av innehållet i gruppen genom att följa dessa steg:

1. Välj Listvy högst upp på redigeringsskärmen.
2. Välj gruppblocket.
3. I sidopanelen med blockinställningar till höger väljer du ett av dessa alternativ:
   • Grupp: Standardarrangemanget för gruppblock.
   • Stapel: Arrangerar block vertikalt, ett ovanför det andra. Perfekt för att skapa tydligt, sekventiellt innehåll som steg eller utvalda objekt.
     • Under Justeringändrar du den vertikala justeringen, med alternativ som högst upp, i mitten eller längst ner.
   • Rad: Placerar block sida vid sida horisontellt. Perfekt för att skapa funktionsjämförelser eller bildgallerier.
     • Under Justeringjusterar du den horisontella justeringen, med alternativ som till vänster, i mitten, till höger eller med avstånd mellan.
   • Rutnät: Organiserar block i en anpassningsbar rutnätslayout. Användbart för produktvisningar eller teammedlemmar.
4. Klicka på ”Spara” eller ”Publicera” för att spara dina ändringar.

Att styra den totala bredden på ditt gruppblock hjälper dig att skapa visuell hierarki på din sida och att justera hur ditt innehåll svarar på olika skärmstorlekar. Du kan ändra hur mycket utrymme gruppblocket använder, från innehållsbredd till bred bredd till full bredd, genom att följa dessa steg:

1. Välj Listvy högst upp på redigeringsskärmen.
2. Välj gruppblocket.
3. I verktygsfältet som visas klickar du på ikonen”Justera”och väljer mellan:
   • Innehåll (eller ”Inget”): Anger bredden på block till standardbredden för innehållsområdet. Bäst för vanliga innehållssektioner.
   • Bred bredd: Anger bredden på block till en bredare (men inte full) bredd. Bra för att dra uppmärksamhet till viktigt innehåll utan att ta upp hela skärmen.
   • Full bredd: Anger att blocket ska fylla hela bredden på det tillgängliga området. Perfekt för att skapa uppslukande innehållssektioner som banners eller stora bildgallerier.
4. Klicka på ”Spara” eller ”Publicera” för att spara dina ändringar.

Läs mer om att ändra bredden på ditt innehåll.

Du kan styra hur mycket utrymme ditt innehåll tar upp inom en grupp, vilket är användbart när du skapar responsiva designer som fungerar bra på både mobila och stationära skärmar. Följ dessa steg för att ändra breddinställningarna för innehåll i ditt gruppblock:

1. Välj Listvy högst upp på redigeringsskärmen.
2. Välj gruppblocket.
3. I sidopanelen med blockinställningarlokaliserar du sektionen”Inre block”. Slå på/av inställningen ”Inre block använder innehållsbredd” :
   • På: Innehåll följer webbplatsens inställningar för innehållsbredd , eller justera specifika breddvärden med hjälp av kontrollerna för bredd.
   • Av: Innehåll kommer att expanderas för att fylla hela gruppblockets bredd.
4. Klicka på ”Spara” eller ”Publicera” för att spara dina ändringar.

Inställningen ”Inre block använder innehållsbredd” styr hur brett innehållet i ditt gruppblock kommer att visas:

När inställningen är På: Innehåll inuti ditt gruppblock följer din webbplats globala breddinställning för innehåll (vanligtvis runt 700-800 px i bredd). Detta skapar en innesluten, centrerad kolumn med innehåll även om ditt gruppblock sträcker sig över sidans hela bredd. Detta förbättrar läsbarheten på större skärmar samtidigt som en attraktiv layout bibehålls.

När inställningen är Av: Innehåll inuti ditt gruppblock kommer att expanderas för att fylla hela bredden på gruppblocket . Om ditt gruppblock är full bredd kommer ditt innehåll också att sträcka sig över hela bredden. Detta är användbart för att skapa kant-till-kant-designer, såsom bildgallerier i full bredd, eller när du vill att innehållet ska matcha bredden på ditt gruppblocks bakgrund.

Ett praktiskt exempel: Om du har ett gruppblock med en färgad bakgrund som spänner över bredden på hela sidan skulle aktivering av ”Inre block använder innehållsbredd” skapa en centrerad kolumn med innehåll, med den färgade bakgrunden utsträckt kant-till-kant – perfekt för att framhäva viktig information samtidigt som det visuella intresset bibehålls.

Genom att justera dimensioner kan du styra höjd, bredd och avstånd för ditt gruppblock så att dessa värden passar ditt innehåll och dina layoutbehov bättre. Detta hjälper dig att skapa visuellt balanserade sektioner och ger ditt innehåll utrymme att andas. Ange exakt avstånd runt ditt gruppblocksinnehåll genom att följa dessa steg:

1. Välj Listvy högst upp på redigeringsskärmen.
2. Välj gruppblocket.
3. I sidopanelen med blockinställningarlokaliserar du sektionen ”Dimensioner” .
4. Ange värden för:
   • Utfyllnad: Avstånd mellan innehåll och gruppblockets ram. Mer utfyllnad skapar andrum runt ditt innehåll.
   • Marginal: Avstånd runt utsidan av gruppblocket. Hjälper till att separera denna sektion från annat innehåll.
5. Använd länkikonen för att växla mellan enhetliga eller enskilda sidojusteringar.

Läs mer om att anpassa blockdimensioner.

Genom att justera detta avstånd kan du styra hur nära eller långt isär innehåll visas i ditt gruppblock, vilket skapar rätt visuell relation mellan element. Detta hjälper besökare att skilja mellan relaterat innehåll samtidigt som en sammanhängande sektion bibehålls. Hantera avståndet mellan block inuti din grupp:

1. Välj Listvy högst upp på redigeringsskärmen.
2. Välj gruppblocket.
3. I sidopanelen med blockinställningarlokaliserar du sektionen ”Blockavstånd” .
4. Använd kontrollerna för att ange:
   • Blockavstånd: Avstånd mellan enskilda block. Mer avstånd skapar tydlig separation, medan mindre avstånd gör att innehållet känns mer sammanhängande.
   • Minsta höjd: Hur högt gruppblocket minst bör vara. Användbart för att skapa konsekventa sektioner eller för att lägga till tomt utrymme för visuell balans.

Läs mer om att justera utrymmet mellan block.