Section Overlap Methods

Method 1

Inner Section. 2 Columns. 

Image next to content 

Method 1

Sample 1

Vestibulum ac blandit tellus. Cras a tortor vestibulum, scelerisque nisi semper, vehicula justo. Ut pulvinar ornare urna, nec pharetra purus venenatis vel.

Method 2

Here Image is the assigened background.

Vestibulum ac blandit tellus. Cras a tortor vestibulum, scelerisque nisi semper, vehicula justo. Ut pulvinar ornare urna, nec pharetra purus venenatis vel.

Method 2

Sample 1

Here Image is the assigened background.

Vestibulum ac blandit tellus. Cras a tortor vestibulum, scelerisque nisi semper, vehicula justo. Ut pulvinar ornare urna, nec pharetra purus venenatis vel.

Section Above

This offset height is set with padding and margin applied to the header elements

Additional Row

Above

You can also position rows above or below a central row

or

Below

Adding extra columns to inner section

Use Empty Columns

For Creative Spacing

Above or Below Positioning

Use stacked rows

This is one row on top of another row.

This is a sample of how to start. Vestibulum ac blandit tellus. Cras a tortor vestibulum, scelerisque nisi semper, vehicula justo. Ut pulvinar ornare urna, nec pharetra purus venenatis vel.

Now apply negative margins to overlap

When the box needs to be wider than the column percentage

Addition copy in lower row. Vestibulum ac blandit tellus. Cras a tortor vestibulum, scelerisque nisi semper, vehicula justo. Ut pulvinar ornare urna, nec pharetra purus venenatis vel.

Adding extra columns to inner section

Step 1: Setup rows

Step 2: Arrange

Step 3: Add Animation to images