Stacks are rows or panels that contain block layouts. You add a stack to your page first and then add different blocks (e.g., text block, image block) to a stack, in which way you build up your website.
This help guide is for when you want to have your content in a stack reach the far end of a screen. It's also for when you want to adjust the spacing internal or external a stack or the spacing in between different columns.
How to get to Stack-specific width & spacing controls in your dashboard
- Assuming you’ve already created a stack and a block within your stack, activate the stack by clicking anywhere inside the stack. See here if you need help adding a stack and a block.
- Now click on the colour wheel in the toolbar on the right.
- Stack Specific Design Controls will open in a window to the left of your screen with a number of drop-down menus where you can find Width & Spacing.
Note: This help guide is for editing your stacks using Width and Spacing design controls. For info on editing Stack Backgrounds, Headings and Paragraphs, Buttons, Forms and Social Media icons, head to the Stack Specific Styling help guide.
What's in Width & Spacing controls
- Content width adjustment (Full-width stacks)
Adjust the width of your stack to reach closer to or to the exact edge of your screen.
- Internal column spacing (width between columns)
Reduce the space between columns in a stack.
- Vertical content alignment (within a stack)
Vertically align content to the top (default setting), middle, or bottom of the stack.
- Other external or internal stack spacing options
1. Content width adjustments
Slide the Content Width slider right to widen the design of your entire stack content. There are three width options, being narrow, midway and full-width.
For content at the narrow setting - pull the slider all the way to the left.
For content that stretches midway (this is the default) - pull the Content Width slider to the centre.
To go full-width with your design, pull the Content Width slider all the way to the right, and reduce the "Internal Column Spacing" to 0.
2. Internal Column Spacing
Slide right to increase the gap between your blocks. Slide left to reduce the gap.
Tip: Reduce Internal Column Spacing to 0 after sliding Content Width to the far right, if you want your content to go all the way to the edge of the screen.
3. Vertical Content Alignment
To adjust the vertical position of content within a block, use the drop-down menu under Vertical Content Alignment and choose top, middle, or bottom.
4. More Specific Spacing Options: controls for top & bottom spacing
Turn on the More Specific Spacing Options to adjust the vertical top and bottom spacing between stacks. (Options will open when you tick the box)
The Stack Spacing slider bar enables you to make the following adjustments:
1) Adjust the external space at the top and bottom outside the stack you are currently editing. Pull the slider right and space above and below your stack will increase, and vice versa if the bar is moved to the left.
2) Adjust the internal space, the top and bottom areas inside the stack you are currently editing. Pull the slider right and space above and below your content blocks will increase, and vice versa if the bar is moved to the left.
PICTURE BLOCK: Because pictures scale in steps but full-width columns scale fluidly, picture blocks won't go right to the edge of the column on a 100% full-width stack. There are, however, a few work-arounds including using stack-backgrounds and 1x1 Grid Galleries.
Blog and Shop: Width & Spacing controls can be applied to only normal web pages. Blog and shop pages can not go full-width at the moment. Please contact us to vote for the idea of being able to edit the content width in your blog and shop if it's important to you.