Tutorial: Drupal 7 Homepage Building Techniques

David G - DrupalOften times when building a Drupal website we treat the homepage different from most other pages on our website. Typically the homepage to a site has a distinct layout from the rest of the website, and empowering clients to be able to place many types of content, or configure the content found within the homepage, is a priority for me when building websites. Here are some common techniques I use when developing homepages with Drupal. I will end this post with a live example of some of these techniques in action.

Technique #1 Controlling the layout of the Homepage:

When creating that custom layout for the homepage of a website you need to think of way to make the homepage have a distinct layout. To create my homepage url I either use a simple Node Page or use Panels to create the content for my homepage. Once I know the URL for my homepage or it’s Node ID:

  • I either create a custom theme template for my homepage node.
  • Liberally create Blocks of content to place throughout my homepage.
  • Use Display Suite to apply a predefined Layout distinct to the homepage content.

Technique #2 Controlling the Content within the Homepage:

Usually the homepage requires custom content, which is likely to change over time. Typically a homepage with either a Slideshow, Upcoming Events, Emergency Notifications, or even random images to use when visiting the homepage needs to be maintained by the staff that manages the website.

So usually my homepages are made up of many Drupal Blocks or Views that pull content which has been published on the website. If the content should be available on the homepage (like slideshow images) but not available anywhere else then we usually install the Rabbit Hole module which allows this content to exist on the website — but not be directly visible by the public.

In order to empower our users to be able to freely select what content goes within the configured layout and design of the homepage we typically make use of the Nodequeue module to allow the endusers ease of selecting and ordering content which appears on the homepage.

A Practical Tutorial:

Our goal is achieve this layout of a homepage:

Example desired homepage from Photoshop mockup PNG file.

Example desired homepage from Photoshop mockup PNG file.

As you can see in the above homepage screenshot the homepage has many sections and items being displayed: a Slideshow, info panels which display additional information on click, upcoming events listing, recently created page listings …

Here is a visible breakdown of the sections:

Graphical breakdown of the homepage visual elements. Their layout and positioning will largely be controlled by CSS.

Graphical breakdown of the homepage visual elements. Their layout and positioning will largely be controlled by CSS.

As seen in the above images some of the homepage content is menu-driven (the purple areas) which defines menus and links to move throughout the website. But, the red areas are content such as Slideshows, Information Panes and Event listings which is content pulled from existing node entries of the website. Nearly all of these entries are controlled by using the Nodequeue module.

For this website here is a view of the nodequeue entries and configuration:

Nodequeues in use on this UCEN website.

Nodequeues in use on this UCEN website.

The frontpage_slideshow nodequeue configuration. This limits the type of content this queue may contain.

The frontpage_slideshow nodequeue configuration. This limits the type of content this queue may contain.

Nodequeue entries for the slideshow content and configuration.

Nodequeue entries for the slideshow content and configuration.

So this set of Nodequeue configuration and items powers the Slideshow at the top of the homepage. The events listing is powered simply from Views as the Frontpage Events block:

Example of frontpage events Views block entry.

Example of frontpage events Views block entry.

And lastly all this configuration and blocks created by Views for the slideshow and events are placed into the homepage by assigning the URL of the created blocks to <front> in Drupal:

Blocks configuration for the content region of the active theme. Note, this lays out the vertical top-to-bottom ordering of content for the homepage.

Blocks configuration for the content region of the active theme. Note, this lays out the vertical top-to-bottom ordering of content for the homepage.

So, this is a rather complete example of some mechanisms you can use when developing your Drupal sites homepage. This is all primarily using really bug-free Drupal modules such as Nodequeue, Views and Drupal Core with Blocks. There are more exotic and somewhat flexible ways to do all this, but these other tools come at cost of requiring a larger learning curve.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *