Stacks are the building blocks of the website, providing a base on which content can be added and customised to create 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 colour wheel 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 colour wheel on the right, the Stack Specific Design Options menu is displayed on the left-hand side of the screen. Here there are seven 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 window changes in width. You can also change the opacity of the image to reveal the background colour selected.
If you're not seeing the Column Settings drop down tab > See how to get access.
The Column Settings menu will show a grid of columns, a picture background upload button and a column background colour picker. By selecting a colour or image, the background of the column you've highlighted (shown by the blue outline) will be changed.
In Column Settings, you're able to:
- Add an image to the background of your column.
- Add a colour background to your column background. This applies to both text and image blocks.
Add a colour to a column background.
- Select the column you'd like to add a colour background to.
- .click the colour picker and choose a colour, then Save changes.
Add a picture to a column background.
- Select the column you'd like to add a picture background to.
- Upload your picture, and remember to Save changes.
Adjust internal column space in a block using Width and Spacing controls.
In Width & Spacing, you're able to reduce or increase the internal column spacing in a block.
- Pull the Internal Column Spacing slider (left and right), to the right to increase the padding/spacing between the image/s within a column (in this case, a picture block).
- Pull the Internal Column Spacing slider (left and right), to the left to reduce the padding/spacing between the text or image/s within a column (in this case, we've used a text block and a picture block).
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.
Width & Spacing
With Width & Spacing, you're now able to adjust the width of your stack to reach further, all the way to the edge of your screen—an easy way to add that wow-factor to your website design.
Slide the Content Width slider right to widen the design of your 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 - pull the slider to the centre, and finally, to go full-width with your design, pull the slider all the way to the right.
The Internal Column Spacing slider enables you to adjust the gap in between columns within a stack. It is important that you reduce the Internal Column Spacing to 0 when you want to have your stack extend to the edge of the screen.
In the Vertical Content Alignment dropdown, you can align text to the top, middle, or bottom of the stack. This is used often when you have a two-column layout and when you want to align text (in one column) to the image (in another column).
The Stack Spacing slider bar enables you to adjust spacing at the top and bottom of the stack you are currently editing. Pull the slider right and space at the top and bottom 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.
You can easily change the colour and opacity of the field background and field border, border width and radius, input text colour and button alignment in your dashboard design setting.
If you want to make changes on all the forms on your website, go to Edit Design in the top right corner of your dashboard and go to the Form section.
If you want to customise a single form, go to Stack Specific Styling by hovering over the form you want to make the change on and clicking on the colour wheel.
Social Media Icons
For the guide on how to set up social media links on your Rocketspark website head here.
Once you've linked your social media to your website, you can decide on how your social icons look site-wide or on a stack-specific level. To change the site-wide design, click on the Edit Design menu in the top left corner and navigate to Social Media Icons. Or use the Social Media Icons tab in Stack Specific Styling to change the design in a specific stack. You're able to adjust the style, colour, size and location of your buttons within a stack.
Select a preferable icon style, customise the colour and adjust the size of these icons.
3. To adjust the colour of these icons to best suit your website click on the 'Icon Colour' drop-down menu. Here you can either choose the social media brand colours or pick your own colours to best suit your own website brand.
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.