Sections Stack
Examples
You can download the full Sections stack instructions here
See more examples of angles, margins and overlaying on the Layering Content Page of this site
1. To make an overlap
Angle = -3deg
Angle = -6deg
So with margins set to proportional we can use the difference in angles as the negative margin.
In this case, the top stack has bottom margin : none
and the bottom stack has top margin : -3
Note: This only works when you are using proportional margins. With rem margins you will need to check the overlap at various screen sizes
2. To square off an angled section or create an opposing angle
This is exactly the same principle as the above example, just using opposite angles.
Now, obviously in order to full overlap sections without much content (i.e. ones that are not very tall) you will need to add some padding in the section padding settings.
3. Priority - Control the connector overlap
Higher Priority stacks will always overlap lower priority ones.
You only need to worry about priority if you are using connectors on directly abutting stacks.
NOTE: In this example, I have left the Top and bottom margins on auto so that you can see how the arrows overlap as a result of the priority setting
Stacks used on this page
Foundation Theme & stacks
Sections
Grummage Column Stacks
Header Plus
Big White Duck
Free Stacks for Foundation and other RapidWeaver Themes
- Sitemap
Community Links
Newsletter
Sign up below to receive updates on new products and offers first.