Stacks are the building blocks of your Rocketspark website, providing a base on which content can be added and customised to create visually appealing content. You can change the Stack Specific Styling 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 the three options you can have for Stack Background—Colour, Image, or Video. By selecting a colour, uploading an image or embedding a video, the background of the entire stack will be changed. For more information about Video Stack Background, see this help guide.
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 this change or change the padding in the Width & Spacing options tab.
Vertical Position adjustment
Once you upload a background image, you'll 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.
Stack background parallax
Add interest and depth to your website.
A Parallax (scrolling background) is a vertical positioning option that allows your stack background images to stay stationary as the page scrolls, so more of the image will be revealed as the website viewer scrolls up or down. As a viewer scrolls through a web page, objects in the foreground and background are perceived to move at different paces.
How to achieve this effect.
First you'll need to either add a Stack or select an existing Stack to edit. Learn about getting started with Stacks/ Stack Specific Design options here.
1. Open the Stack Background tab and upload an image. Only once you've added an image (or already have an image in place) will the Vertical Position alignment control tab be visible.
2. Select Parallax (scrolling background) from the Vertical Position drop down menu. Reduce the Picture Opacity if required, for a more subtle effect.
Learn more here: How to add Parallax (scrolling background) to your website?
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 your paragraphs to suit a desktop and a mobile view.
Note: Stack Specific controls to override the site-wide options.
1. Click on Headings & Paragraphs.
DESKTOP view is open by default. As you update the design settings the changes will be made instantly to the content of the stack on your website and will automatically be optimised for your mobile website. We do recommend you check your mobile preview so that you can make any necessary design adjustments if needed.
2. Select your font style and font size for your H1, H2, H3, and Paragraph respectively.
Text colour is important. You can fill in your colour number in this section if you have it. Alternatively, you can play with the colour wheel and make your colour selection from there.
Note: You won't have a live preview of any adjustments you make in Mobile view. For a Mobile preview, save your changes, then flick over to Mobile Preview at the top-centre of your window to see the change.
3. Flick over to the Mobile tab to check your mobile preview.
Edit the size and colour of your text for your mobile view if required and Save changes.
See our guide here for how to adjust text size on mobile, site-wide.
The Buttons menu here will allow you to customise the design, colour, font and size of the buttons in the Stack. To set your button text size, button width and alignment site-wide, go to your SITEWIDE settings from your Dashboard or see our help guide.
Note: Stack controls override the site-wide options.
1. Click on the Button tab. DESKTOP view is open by default.
2. Change the Button style, Button Border size and colour (if applies), Button font, font size and font colour, as well as your Button Background colour.
You can choose between Standard and Compact buttons, each of which has 8 different button styles selectable from the Desktop tab. Once you have selected a style you can adjust Border size and select a colour you'd like the border to be.
3. 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 its size and colour customised to your liking.
Note: The font you choose here will apply to your mobile website too.
4. Click on the Mobile tab.
Here you're able to choose a Mobile Button Border Colour and adjust Button Font Size and Button Background Colour for the mobile view.
Note: You won't have a live preview of any adjustments you make in the Mobile view. For a Mobile preview, save your changes, then flick over to Mobile Preview at the top-centre of your window to see the change.
Width & Spacing
With Width & Spacing, you're 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 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.
The Mobile Width & Spacing are optimised for your mobile display by default. You also have the option to make manual edits to mobile width & spacing by moving the toggle to MOBILE in your Stack Specific Design Options Width & Spacing control menu.
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 to all the forms on your website, go to Change 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 the 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, and 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.