Eadon Home Loans wanted to update the look, feel and functionality of their website and make the site mobile ready. The bold new design was created by Scott Hutton of Twenty20 graphics features multiple moving elements and visual build challenges

Scrolling block functions

The Home page of Eadon Home Loans features four scrolling content blocks: the main banner area, the testimonials, the logos and the ‘ticker’ style logos at the bottom.

Each of these elements has been created to allow for easy editing and updating into the future, with Eadon able to login to edit the site and edit these manually.

Site Navigation

The site menu required the display of icons matched to each top level page. We used concrete5’s attributes function to add these icons to each page, meaning they are not hard coded and can be changed at any time by editing the site.

Sub-Navigation drop down and search bar

The sub-nav has also been differently styled, with pages displaying horizontally rather than in a list. We added a slight delay to this action for a smooth effect.

The design required a pop-up Search block, that only displays when the search icon is clicked.  It was important that this pop-up would hide again easily when browsing the submenus of the website.

New mobile menu

This is also the first site to feature our expanded mobile menu script. We've previously discussed our mobile menu approach, but recently we've continue to develop this structure to give us more options. This mobile menu now features an ‘off-canvas’ technique, with the menu sliding in from the left when selected. For browser that don't support this transition, it falls back to a traditional drop down menu.


Version 5.7 of concrete5

The new website for Eadon Home Loans is our first build using concrete5’s new version, 5.7. Version 5.7 features a completely refreshed editing experience, lots of new options and technical improvements.  We've really enjoyed discovering 5.7's new features, in particular the highly improved layout feature, the ability to split page types from page templates and the direct content editing using Redactor (instead of popping up a dialog for editing content).

Other features of this site build include:

  • Inbuilt loan calculators
  • Pop- up search box
  • Composer driven news section
  • Automatic selection of banner image (from parent page)
  • Fully mobile responsive theme (built using Sass, Compass and Susy)

Visit the Eadon Home Loans website.