How to Create Custom Stack Backgrounds

While we have our default stack design settings, introducing custom shapes such as wavy, slanted, or curved stacks can elevate the visual appeal of your website.

In this guide, we'll walk you through how to create custom stack designs using simple techniques.

Creating the custom stack design

Before you start editing the stack on your website, you will need to design your custom stack first. You can do so by opening an editing app such as Adobe Illustrator, Figma or Canva. Feel free to use other editing apps if you wish.

1. Once in the editing app, create a document that is 2400px (width) to start. This is just a guideline, so feel free to change this size if you'd like.
2. Create your custom stack design, using shapes, drawing tools or the curvature tool. These could be wavy, angular, or curved - completely up to you! 
   
   This is what it could look like using Figma.
   
3. Export this shape as a .PNG file. If you're using Figma, you will need to select the shape you have created to export that particular shape. On the right-hand panel, you will be able to see Export at the very bottom.
   
   
   Click 'Export...' to download the shape as a .PNG file. This should show up in your Downloads folder.
4. Head to your Rocketspark website to add to your page.

Implementing the custom stack on your website

1. Log into your dashboard How do I log in to my website Dashboard?
2. Go into Editor mode and find the area where you want to add the custom stack.
   
3. Create your stack and add the information in. You can also use Preset stacks as a starting point for the design of your stack.
   Make sure the background colour of the stack is the same colour as the custom shape you have created.
   
   Here I used a preset stack, and changed the stack's background colour by selecting the Stack Design pencil button  and into the Stack Background section, where you will see the 'Stack background colour' option. Make sure to save any changes you have made!
   
   
   These additional links may be useful if you would like more information on editing your stack:
   How do I add a background to a stack?
   What's the difference between a stack and a block?
   How to Change Stack Specific Styling?
4. After you have created the main stack with the content, you will add a new stack right below by clicking on the Add Stack button that appears as you hover over the main stack.
   
5. Click on the Blank tab and select a 1-column stack.
   
   
   
6. Click on the Stack Design pencil button button for the new blank stack, and head to the Stack Background option.
7. Click on the Image tab, where you will upload the custom shape you have created in the editing app.
   
8. It should look something like this
   
9. Make sure to click Save changes.
   
10. If there are no blocks inside the custom stack, it's likely that it will not appear correctly on the page preview. 
    
    It is recommended to add a block, such as a button, a short piece of text, or even a code block with <br> inside it. This <br> code is a breakline code that appears invisible on the page preview but makes it so that there is content in the stack.
11. You can adjust the top and bottom stack spacing to better fit the custom stack. To do so, you can either use the small blue lines inside of the stack, or edit the spacing through the stack-specific design with Width & Spacing settings.
    
    The blue lines appear when hovering over the stack, and will look like this. You can drag these lines up/down to increase/decrease the spacing for that side. 
    
    In-context editing - adjust the width and spacing of a stack
    
    Alternatively, you can edit the stack spacing by clicking on the Stack Design pencil button   and selecting the Width & Spacing section.
    
    From here, scroll to the bottom of the Width & Spacing settings where you will find the Stack spacing settings. You can check the 'More specific spacing options' to individually adjust the sides of the stack.
    
    How to adjust content width & spacing for a stack?
    
    
12. Make sure to click Save changes to ensure your modifications have been saved.
    

In the end, with some adjustments in spacing, it can look something like this!

Some things to Note

• If the custom stack appears blurry, it's worth experimenting with the dimensions of the width of the shape, and the details of the shape. If 2400px appears blurry, try decreasing/increasing the size. You can even play with the actual shape itself to see if this affects the resolution of the stack.
• If the file size of the custom shape is too large, it may affect the loading speed of your page. Try to keep the file you're uploading at a reasonable size
• Test the custom stack's appearance on different screen widths to ensure it displays correctly.
• Make sure to check the mobile spacing of the custom stack! Stack spacings tend to downsize in mobile view, so while detailed custom shapes are great on desktop view, keep in mind that they may not appear the same on mobile. 

Please reach out to support@rocketspark.com if you need any help with this.