Layers confusion

I don’t get the layers panel. It doesn’t seem to work the way I’d expect. Example: I have a layout block at the top of my page which is a header. Then beneath that on the page is another layout block for my content. But in the layers panel, the header and the content layers are reversed with the header at the bottom. If I move the header layout block to the top of my layers panel, it moves the header to the bottom of the page! It just doesn’t make sense. What am I missing?

1 Like

The Layer Panel reflects in how you place your element (chronologically) onto the canvas. So you started with the Header Layout Block so that is the first in the Layers Panel. The second Layout Block will naturally go on the top of the Header Layout Block in the Layer Panel.

The exception to this rule is placed Navigation and placed Popups.

Sparkle’s canvas works more like a design app like Affinity Designer as opposed to a website template builder that uses code. Of course when your Publish a Sparkle document it is magically turned into HTML/CSS/javascript with a sprinkle of PHP.

I still don’t get it. I could understand it if moving the layers around in the layers panel just changed the z-index of each element as per your Affinity Designer example. But it literally moves it on the page as well. So if I move the header to the top of the layers panel, it moves it to the bottom of the page. Everything seems back to front and upside down.

It will be something you get use too.
As I mentioned when laying down Layout Blocks they seem to work in a chronological order from bottom up which is a predictable action in the Layers Panel.

Sparkle is forever moving forward so it might be something that will be looked into further down the track?

I’m with Monkeyboy in this topic: the arranging of blocks in the layers panel is a misconception of how layers work and that’s why i avoid using them after some experiments, because it confuses me as well. usually, layers work in a style as if you look from the sky to earth - regardless of their positioning or chronology on the canvas. but when the top block in the layers panel goes to bottom, it suggests, that all other elements will overlap it, if positioned directly over the block. that usually is the concept and understanding of of a layer. so i strongly believe, the recent concept of positioning blocks in the layers panel has to be thought over.


Yes this is not how it should work, we had hoped to be able to solve this in the 4.x cycle but it turned out to be too big of a change. It will be (is already) solved in Sparkle 5.



That’s good news, isn’t it?

Has it also been fixed that when two layout blocks are supposed to swap places, one jumps all the way to the top of the page? Especially when the top block is moved with the one directly below it? I had reported this a long time ago. So far there is no fix for it.

I can make a video about it if desired.

Mr. F.

Not aware of that problem, maybe we missed it. Yes please send a project file and a video showing the problem.


Sorry for the delay. TGIF Night :slightly_smiling_face:

Mr. F.

Thank you for checking and explaining.
Can’t wait to see … you know what.

Mr. F.

I noticed this strange layers behavior as well. Mr F uses the word “naturally”, but for users of any Adobe product, it is not natural at all. Glad the fix is in. For now, I believe the menu needs to be on top, above everything else — so I now understand that to be the BOTTOM of the layers palette, right ?

that would be the absolute top of everything in this case

1 Like