Stacks are the building blocks of the website, providing a base on which content can be added and customised to create a visually appealing content.
When hovering over a selected stack a menu will appear on the far right of the specific stack. For any stack other than the bottom stack, this menu has six buttons which each have different design options associated with them (from top to bottom - Stack Selection, Stack Movement, Stack Specific Design Options, Copying stack, Stack Deletion, Lock the Design). For any stack sitting at the bottom of the page, you would see an extra mobile-like button which means "Add a stack as a footer to all of your pages".
The stack selection feature will allow you to change the current stack you have implemented. When the button is clicked a sidebar appears on your left-hand side displaying possible alternative stack layouts that would fit the content you currently have. For example, if you currently have two columns of website content the alternative options displayed will be two or greater columns wide.
- To change your current stack layout firstly click the stack layout button.
- A sidebar will appear on the left side of the screen displaying the currently selected stack and the alternatives you can choose from.
- Select the new stack layout you would like and it will automatically rearrange your content to the new layout.
The stack moving feature allows you to easily move a stack of content up or down your page without having to redo any work.
- To move a stack click and hold the stack movement arrow.
- Now you can drag the stack up or down the page as you like.
- As you move the stack up and down a blue line will appear horizontally across the page, this is indicating the position that the stack will be placed if you stop clicking.
Stack Specific Design Options
The stack customisation tool allows you to customise text, buttons, background colouring and spacing for that one specific stack.
Without any customisation, your stacks content is formatted by the settings chosen in the Edit Design menu. For more information on site-wide customisation, you can see our guide here.
When you click the Stack Specific Design Options button a menu is displayed on the left-hand side of the screen. Here there are four different sections in which you can customise the stack.
The stack background menu will show a colour palette and background upload button. By selecting a colour and/or image, the background of the entire stack will be changed.
When a colour or image is selected for the first time a message will appear along the top of the screen explaining that some padding has been added to the stack. If you do not want this you can click Undo or change the padding in the spacing options.
Once you upload a background image, you have the option to change its vertical alignment. This will set the focus of the image as the stack grows in height or the browser windows changes in width. You can also change the opacity of the image to reveal the background colour selected.
Headings and Paragraphs
In this menu, you can change the font style, font size and colour of your headings, as well as the text in your paragraphs. You can also fill in your colour number in this section as well if you have it. Alternatively, you can play with the colour wheel and make your colour selection from there.
As you update the design settings the changes will be made instantly to the content of the stack on your website.
The buttons menu will allow you to customise the design, colour, font and size of the buttons in the stack.
There are 8 different button styles selectable. Once you have selected a style you can choose the colour of the border and how large you would like it to be.
The next drop-down allows you to select the font for your buttons within this stack. There are a large number of fonts to choose from and each can have their size and colour customised to your liking.
The spacing menu will display a sliding bar. By moving the bar to the right the spacing at the top and bottom of the stack you are currently editing will increase, and vice versa if the bar is moved to the left.
There is also a tick box titled Get more specific spacing options, by clicking this it will open a more detailed spacing menu. This allows you to customise the external and internal spacing at the top or bottom.
Internal spacing is the stack itself, increasing the stack size and the colour related to it. External spacing is the gap between stacks creating a break in the web page, this will be coloured the same as the background colour of the website template.
If you have made any changes to the stack through the stack content customisation you must click the Save Changes button at the top, alternatively if you would like to discard the changes you have made click Cancel.
Edit Design Menu
If you have made changes to a stack, that stack will be unaffected by the site-wide design changes. The stacks unaffected by design changes made in the Edit Design menu will have a message displayed on them like the image below. If you would like a stack to revert to the site-wide design changes read the section below titled Revert to the Original.
If you want a similar stack on the same page or a similar stack on another page, you can click the Copying Stack option and choose to "Copy to this page" or "Copy to another page". When you copy a stack to the same page, you can choose to link/unlink design. When choosing to copy to another page, you can choose to link/unlink content/design. You can also turn any bottom stack into a footer across all your pages by clicking the mobile-like icon on the right-hand sidebar. For more detailed instructions regarding copying stack, see the Copying Stack help guide.
If you want to delete a stack on your website you can click the stack delete button. When the delete button is clicked a warning message will appear asking if you would like to delete this content. If you are sure that you want to delete this material click Delete Stack.
Note: Once a stack is deleted the content is gone, there is no way to retrieve the content deleted other than recreating it yourself.
Reverting to original
If you do not like the changes you have made to your stack you can always revert back to your site-wide defaults.
- To do this click on the stack content customisation button, a menu will appear on the left.
- At the top will be a box labelled Reset to site-wide defaults, by clicking this, it will reset any changes you have made to the stack reverting back to the website wide customised settings.
- If you don’t wish to do this there is an Undo Reset button that appears to re-implement the customisation.