Learn Sections Pro

Advanced Angles

Introduction

Before tackling this page, you should be totally familiar with the principles outlined in the Banded Pages and Angles page of this project.

In this demonstration, we will be dealing with concepts of overlapping angled and non angled sections to make other shapes and square off angles.

If this sounds daunting, it is not. Just imagine you have a series of paper cut out angles Sections and you wanted to overlap them to make other shapes. You would simply slide one under another. This is all we will be doing here.

Once again, we will be using negative margins to achieve this but thanks to Sections automatic proportional sizing it is really easy if you follow a couple of simple rules a long the way.

Some of the following content has Sections with semi transparent backgrounds so that you can see one Section overlapping another. This is obviously just for demonstration purposes.

Our Basic SetupTwo adjoiing angled Sections

Recall that with out default settings of Top and Bottom Margin set to None , our two sections will directly abut.

To stop the angles overflowing this area and anything below, we will just set the top margin of the blue section to auto and the bottom margin of the green section similarly.

This will be our starting point.

Different Adjacent AnglesTwo adjoiing angled Sections

In order to construct different angles and thus do things like squaring off the bottom of a section, to make a wedge shape it is important to remember that the section will skew around its horizontal center point.

Different Adjacent Angles

Notice the center of rotation and that the green section is overlapping the blue one on the right and underlapping it on the left by the same amount.

Fortunately Sections Pro provides us with a magic number to handle this gracefully.

The Magic Margin NumberThe Difference In Angles

To remove the white space on the left and ensure that we get a full overlap, we use this simple rule:

Set the negative margin equal to the difference in angles

(as a percentage using the proportional setting).

Angle: -3 deg

Angle: -6 deg
Top Margin: None

Angle: -3 deg

Angle: -6 deg
Top Margin: -3%

Now we can have fun

Just remember that the negative margin MUST be set to PROPORTIONAL and that half the angle will cause an overlap of half the width.

The above layout is not that useful but we can now construct some real world use cases.

Squaring off an angleTwo adjoiing angled Sections

In order to construct different angles and thus do things like squaring off the bottom of a section, to make a wedge shape it is important to remember that the section will skew around its horizontal center point.

Just apply the rule

Difference in angles = 4

therefore

Top Margin -4%

Now correct the heightSet the padding

So far, we have had some content in the green section to show the settings. In reality, we want it to be just as high as it needs to be to square off the angle.

Think about what we already know. The difference in angles as a percentage will give us half the height of the angle.

So all we need to do is set the bottom padding on the green section to be twice our magic number - in this case 8%.

Angle: -4 deg

Angle: 0 deg
Top Margin: -4%

Angle: -4 deg

Putting it all into practice

We can now create some Sections that demonstrate our skills, changing the angle and square off the first and last Section

My Sections

Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage craft beer biodiesel

And that, ladies and gentlemen, is how we do that.