Sidenotes/Margin notes/ Footnotes

Hi All,

I’m new to Webflow and I’m in the process of designing a simple blog.
However, one thing I’d really love would be to use Sidenotes/Margin notes/ Footnotes and I can’t quite pin down how best to do this if it is at all possible.

I’m trying to emulate what they have over on the blog at This is an example (with an image below) End Procrastination – iA

Thanks in advance for any pointers!

G’Day Ian!

This is totally doable!

I attached an image with pink/orange rectangles to represent div blocks.

The first div (1, Pink) wraps everything. I would set this to a vertical, top, center flexbox
The second div (2, orange) wraps the first heading, paragraph, image and caption.
The third div wraps text content. Horizontal, top, space between flexbox
The fourth and fifth divs wrap the text columns. You can set these to your desired width percentage.

Welcome to Webflow! I’m still new too. A grid system would work too and might have certain advantages, but I don’t have a tonne of experience there!
Hope this helps!

This is awesome; thanks, Sammy!
I’m currently working on the design in Figma and had a column grid similar to this, so I’ll try this first and see how it goes.
Thank you for taking the time to answer; I appreciate it.
I’m excited to get stuck in and see what Webflow can do :v:

You’re very welcome!! Feel free to send me a message if you need anymore help with anything! It’s always good to have a friend :slight_smile:

I found this course to be fantastic!! And if you can catch a sale price you can get it for $20!

Thanks again, Sammy!
I might just be in touch, I’ve got a few different types of sites I’m looking to build this year, so I’m sure I’ll have plenty of questions.
I did get that course a few weeks ago and I’m slowly working through it; it’s great stuff so far.


1 Like