• Steps
• Tips & Tricks

Steps

1. We will begin by creating a new page and choosing the option “Start from scratch”.
2. Place the column on the new page and go to the row (using the upper arrow ↑).
   1. Extend its width to the full-size
   2. Set the height to ‘100VH’
      Note: VH stands for viewport height, and it’s used when you want components to occupy the full height of a page.
3. Come back to the column and go to its alignment options.
   1. Set the vertical alignment to the top. This way, when we drop new components onto this column they will appear and stay at the top.
4. Place a box on the page and and go to its styling options.
   1. By default, boxes have inner spacing, and we need to set that to none.
   2. Name the box component Header or HeaderBox so we can differentiate it later.
5. Now we are going to create the body and footer sections.
   1. On the Header box click on the Duplicate icon twice. This will add two new boxes below and keep our setting of removing the inner spacing just like we want it to.
      
      
      
      
   2. Select the middle box and update the name to Body or ContentBox just so it’s easy to locate later.
   3. After updating the name, navigate down to the option that says, “Stretch when in a flexbox” and check the box. This will make the box take up the space in the middle of the page leaving the footer box at the bottom and the header at the top.
      
      
      
      
   4. On the footer box, update the name to Footer or FooterBox to make sure it’s identifiable later.

With these steps completed the page now has a sunken footer. It is now ready to add content into the header, footer, and middle content boxes.

Tips & Tricks

If you duplicate the page, you can treat it like a page template and reuse this design in your application as many times as needed.

Add partials into the header and footer boxes allowing you to carry over consistent headers and footers across the entire application as you duplicate the page. Note: it is currently not possible to create page templates with partials in them so duplicating a page is the best we can do.