Anatomy of a website: How to build a brilliant responsive site

Sections are the building blocks used to create your Moonfruit responsive website. When you add a page in-editor, you can mix and match these ready-made sections to create your page layout.

Our section templates are split up into 4 main categories: Navigation, Header, Body and Footer. In this post, we run through how to use these sections to create a fully responsive website with Moonfruit.

Navigation

Your menu plays an essential role in navigating your website and should be visitor-focused, accessible and intuitive. Placing your site navigation in the header area means it will display automatically at the top of every page. For longer pages or one page websites, try using a fixed menu for the best user experience.

To add a menu to your page, first click the (+) icon to add a new section. Choose the ‘Navigation’ category, then click the menu thumbnail to add the navbar element to your page.

Header

A header is always above the fold (part of the page that’s visible before you scroll) and it’s the place to strike that first connection with your visitors. The focus should be on your value proposition –  i.e. why people should buy your product or service and what sets you apart. 

To add a header to your page, click (+) to add a new section and choose the ‘Header’ category. Then choose from our selection of pre-made and fully customisable header templates.

Body

In a world of instant gratification, it’s vital to get your message across quickly. After you attract your visitors with a stand-out header,  it’s time to think about how to present the details and tell your story. Use bullet points and subheadings to highlight key points, and avoid hard to read walls of copy by making good use of images and divider elements.  

We’ve added specialised body section templates to make building your page that much easier –  from contact and about us sections, to content cards and galleries. To add one to your website, click (+) to add a new section and navigate to the ‘Body’ category.

Footer

Finally, the footer section. It may not be the most exciting aspect of your website in terms of design,  but as somewhere your visitors will regularly look to for important links, it shouldn’t be neglected. This is the best place for links to your FAQs, Ts & Cs, contact information, and social pages. A simple and organised design is key, in keeping with the tone of the rest of your website. 

Place your footer section in the dedicated footer area so that it displays automatically on every page. You can find our footer templates under the ‘Footer’ category when you add a new section.

Use our section templates to build a beautiful responsive website in seconds, then customise to make it your own through the Moonfruit responsive editor. Get started with a free 14-day trial.