Homepage Template Examples

The homepage is maybe the most important page of your site. Visitors to your homepage should be able to quickly find the information they're looking for either on the homepage itself or via links to inner-pages.  At the same time, your homepage must give a good first impression to visitors. Therefore it must be clear to understand but also have a nice design. Keep in mind that most who visit a website only ever reach the homepage and do not click further. It is important to keep a balance of information, calls to action and simple design.

1: Homepage with Jumbotron & Content Teasers

A visual homepage supported by a Jumbotron at the top. You need to decide whether an individual Jumbotron works well in a mobile view or not. Using text on Jumbotrons can sometimes make mobile views cluttered. In that case, you can easily change the setting for the Jumbotron to be only shown on desktops and just create a headline text that is only visible on the mobile. Under the Jumbotron is an introduction and three teasers to inner pages.

Click on Enlarge below the image to see the modules explained.

2: Long Homepage with Full-width Modules

You can successfully have a lot of content on your homepage, it just needs to be split up visually to make it clear. This is easiest done with full width modules. You should decide whether all the content should be available on the mobile version and change the settings appropriately. In the example below, we have made a 1:1 example of the content in both versions to give you an idea of how it would look. 

Click on Enlarge below the image to see the modules explained.