Heading one
Heading two
Heading three
heading four
Poster
Whatever it is, the way you tell your story online can make all the difference.
Collage
Whatever it is, the way you tell your story online can make all the difference.
Card
Whatever it is, the way you tell your story online can make all the difference.
Overlap
Whatever it is, the way you tell your story online can make all the difference.
Stack
Whatever it is, the way you tell your story online can make all the difference.
Stylish sections
This next section showcases the coded sections we have used to build the site.
Each element is a ‘page section’ so you can colour and style it individually and add borders to get the grid look
The widths of the sections have been altered to 10%, 33.3% 40%, 50%, and 60% to achieve different looks
This means the sections in any scroll must add up to 100%, but you can have any component as long as they add up to 100%,
10, 30, 30, 30
40, 60
50, 50
33.3, 33.3, 33.3
10, 40, 50
When you are in ‘edit mode’ every section will stack on top of the other to make editing easier. To change the order, simply press the up and down arrow on the section
A note on borders
You’ll notice that the lines don’t match up with the section below because the WRONG section has had the line applied. Make sure you consistently have blocks stacking the same to avoid mis alignment of lines.
The section to the left here, should have no line added. Instead, this section should have the line added by pressing content alignment and pressing the line with the arrow to look like the image below
10% | 40%
the width of this section is 50%, but there is a line 10% of the way into the block
set width to 47
set width to M
50%
set width to 45
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
To overwrite the width you can select S, M or L after adjusting the width
33.3%
This section is 33.3%
33.3%
set width to 33
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned.
To overwrite the width you can select S, M or L after adjusting the width
33.3%
This section is 33.3%
40%
set width to 44
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
60%
set width to 46
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
10%
set width to 43
to hide section on mobile align content to bottom
30%
set width to 31
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
30%
set width to 31
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
30%
set width to 31
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
50%
set width to 45
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
To make the top sticky set height to 96 and then press M or L depending on the effect you want to achieve
50%
50%
set width to 45
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned
50%
set width to 45
to add a border to the left or right, justify the content alignment left or right to see the border. or no border leave as center aligned