Because I use this stack very often and wanted to make it easy for me to style a new image for the Elevator stack, I build a Affinity Designer document for this. Once I did this, it is very easy to modify the images without to fiddle around with pixels.

The stack in RapidWeaver looks like this:

Elevator Stack in RapidWeaver

After clicking on the Custom Image checkbox, it turns to this:

As you can see, the image size is pre-defined with 51 pixel. I like this size of the image and create a new Affinity Designer document with a transparent background with 51 pixel width and 102 pixel height. Now I place a square box in the upper half of the document, give it a nice blue color and make the corners round with 10 pixel.

Now I add an effect to this square box, in this case a 3D effect with 3 pixel radius.

Add something to show that it goes up into the box. In my example I place a chevron. Select all and duplicate it and place it in the empty part of the document. Select only the top of them and reduce the opacity to 80% or what you like. The top box will be transparent on your website and the background will be visible, but if you click on it, the lower box will be shown.

All is done. Only the image has to be created. Select all elements and select Export under the file menu. Choose PNG (PNG-24) and select Selection without background under the area pull down menu. 

Wow, a perfect and nice looking image for the Elevator Stack is born.

Now you only need to drag and drop it into the stack settings.


You can download the image and the Affinity Designer document here:

Elevator_Template.zip