Learn Sections Pro
About the Priority Control
Sections Pro has a control labelled priority. This affects the stacking order of Sections when they overlap. For the technical amongst you, priority is simply a z-index control. If you are non-technical don't worry about it, this page will tell you all you need to know.
Priority is also discussed and demonstrated on the Banded Pages and Angles page and on the Advanced Angles page.
Most times, you will not need to use the Priority control. There are just two cases where you need to think about it.
- When overlapping Sections and/or using connectors, you can use priority to change the default layering order of elements on the page and make sure that your chosen Section is in front or behind adjacent Sections or other stacks.
- If you place a Foundation (or Total Blog) Clearing Gallery inside a Sections stack the Priority MUST BE SET TO ZERO.
Controlling Connector Overlap
Basic Setup
Here are 3 Sections with some connectors.
Top and bottom Margins are set to auto to space them out and allow you to see what is going on.
You can see that, without intervention, elements further down the page will always overlay those above.
Priority 1
Priority 1
Priority 1
Common Setup Problem
If we take the situation on the left and see how it would look without the auto margins enabled we see a common problem.
This is exactly the same 3 Sections stacks, just without margins. It looks as though the bottom connectors are missing but of course they have just been covered by the green one completely.
Priority 1
Priority 1
Priority 1
Now we simply apply some Priority
Priority is technically the z-index but that is not important. All you need to remember that a section with a higher priority will display on top of one with a lower priority regardless of their order on the page.
Priority 1
Priority 2
Priority 1
Neaten things up
We need to add some padding to the Sections to make sure that the overlapping connectors leave space for the content and look good. See the Banded Pages and Angles page for detailed descriptions of this.
Despite having equal padding above and below, out headers are offset towards the top. (The same would apply to Foundation paragraphs and buttons).
This is simply because those stacks have a bottom margin enabled by default. Simply check the remove bottom margin in the Header stack settings and it will be symmetrical.