Demo Page

This is a short excerpt that describes the content of the page in one or two sentences. Don’t make this too long because the title image will take up too much space, leaving the visitor having to scroll down a lot before getting to the text itself.

Paragraph title (Heading 3)

Articles consist of 4 columns that can be used at the writer’s leasure. However: the design of the website dictates that only the two middle columns be used for regular text. This avoids the text to become too wide and making it hard to read because of that.

You can also use x/5 and x/3 width columns of course, but to preserve consistency it is advised to use x/4 columns.

Please note that the first and the last column (i.e. the 1/4 width to my left and 1/4 width to my right) are left empty. These are spacers and are intended to be left empty. You can use a single column spanning the entire width of the page if you like, but that would make this text so wide that it’s hard to read (narrower columns are more readable, especially for people who wear glasses).

Another paragraph (Heading 6 this time, but try to keep this consistent)

And here is some generic filler text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus eget lacus varius aliquam. Pellentesque mattis magna et neque pellentesque, quis semper leo consequat. Aliquam a justo lectus. Maecenas accumsan justo a nisi tempus, et dictum nisi tristique. Sed congue, elit eget efficitur auctor, enim mi elementum sem, a dictum sapien nulla commodo dolor. In semper aliquet odio, a vulputate orci tempor non. Phasellus faucibus augue elit, quis molestie massa faucibus eu. Ut a hendrerit lectus. Morbi in accumsan metus. Etiam euismod eros vitae arcu lobortis, eget sodales justo eleifend.

This is a smaller column (1/4 width) to accommodate for some wider inspirational quote, image, or video on my right hand side. Obviously the body text will continue from the former (1/2 width) column.

Please note that making this text the same height as the column on my right hand side can take some fiddling with copy/pasting text in this column and the next. It might be handy to have two tabs open in your browser when editing this page: one for this edit screen, and one for what the website visitor will see.

And now we’re back to normal: a 1/2 width column to put your content in, inbetween two 1/4 width columns for spacing. And here we have our generic filler text again: lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus eget lacus varius aliquam. Pellentesque mattis magna et neque pellentesque, quis semper leo consequat. Aliquam a justo lectus. Maecenas accumsan justo a nisi tempus, et dictum nisi tristique. Sed congue, elit eget efficitur auctor, enim mi elementum sem, a dictum sapien nulla commodo dolor. In semper aliquet odio, a vulputate orci tempor non. Phasellus faucibus augue elit, quis molestie massa faucibus eu. Ut a hendrerit lectus. Morbi in accumsan metus. Etiam euismod eros vitae arcu lobortis, eget sodales justo eleifend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus eget lacus varius aliquam. Pellentesque mattis magna et neque pellentesque, quis semper leo consequat. Aliquam a justo lectus. Maecenas accumsan justo a nisi tempus, et dictum nisi tristique. Sed congue, elit eget efficitur auctor, enim mi elementum sem, a dictum sapien nulla commodo dolor.


“I am an inspirational quote, image, video, or any other content you might like. In this 1/4 column you can put any content you like. Whether it be a take-away of the article, an image, a video or a combination of those, you can put it here. This, by the way, is Heading 3, italic.”

– George Washington’s cousin

As you can see we can break out to the left hand side as well (using a 1/2 width column for the video, and then a 1/4 width column for this text, and another 1/4 width column for spacing to my right hand side). Design-wise this is a less favourable thing to do, but since it can be done, it is included in this template. Please note that breakouts on the right hand side are visually more appealing.

For illustration, a YouTube video is included on the left hand side (which is less boring than yet another text block). To fill this text block, here is, again, some filler text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus eget lacus varius aliquam. Pellentesque mattis magna et neque pellentesque, quis semper leo consequat. Aliquam a justo lectus. Maecenas accumsan justo a nisi tempus, et dictum nisi tristique. Sed congue, elit eget efficitur auctor, enim mi elementum sem, a dictum sapien nulla commodo dolor.

And here we are again, with a simple 1/4 – 1/2 – 1/4 column. Obviously, you can include other media here as well. And with this, the last piece of filler text will be included: lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus eget lacus varius aliquam. Pellentesque mattis magna et neque pellentesque, quis semper leo consequat. Aliquam a justo lectus. Maecenas accumsan justo a nisi tempus, et dictum nisi tristique. Sed congue, elit eget efficitur auctor, enim mi elementum sem, a dictum sapien nulla commodo dolor. In semper aliquet odio, a vulputate orci tempor non. Phasellus faucibus augue elit, quis molestie massa faucibus eu. Ut a hendrerit lectus. Morbi in accumsan metus. Etiam euismod eros vitae arcu lobortis, eget sodales justo eleifend.

And now we have reached the end of this page. Below is the footer that is on each and every page.