• Getting Started
  • Writing for UQ Drupal
  • Configuring site title
  • Site Editor Training
  • Planning your website
  • Administrator view
  • Alert boxes
  • Content Writing
  • Building a homepage
  • Writing for the Web
  • Site Coordinator Training
  • Banners
  • User types
  • Legacy system support section
  • Accessibility
  • Blocks
  • UQ School Template Training
  • Logging in
  • Administration
  • Brand Colours
  • Views
  • Design & Build
  • Images for the web
  • Buttons
  • Display Suite
  • UQ Base theme: Style Guide
  • Equal height elements
  • Search Engine Optimisation
  • Image Styles
  • For Developers
  • DS Inception
  • Forms
  • Drupal Glossary
  • Creating a sandbox
  • Icons
  • How to create banners
  • Training
  • List with lead
  • Google Analytics
  • UQ School Theme: Style Guide
  • Panels
  • UQ Base Regions
  • Utility classes
  • UQ Base theme
  • Quicktabs
  • Webforms
  • Tables
  • Toggle
  • Typography
  • UQ News RSS feeds
  • Block grid
  • Demo form
  • Date and Time
  • Grid
  • Menus
  • Name space standards
  • Theme settings
  • URL patterns
  • Central data
  • Maintenance mode
  • Site search
  • Developer Virtual Machine
  • Developer Contribution Workflow
  • UQ Base theme updates
  • Modules available for use in UQ Drupal
  • Migration Classes
  • DS Inception V3
  • Automated Tests
  • Building a homepage

    This functionality is available to Site Coordinators and Administrators only.

    A homepage has multiple roles; it acts as a portal into key areas of the site, and showcase the latest and most important things your audience/s should know about. The homepage is usually where visitors spend the least amount of time, but come back to the most often, so they should be simple and focus on the highest value information.

    A good homepage represents what the visitors need to know and do on the site. Visitors are visiting with a purpose, therefore, your homepage content and design should reflect what your visitors need.

    Starting with promoted content

    A freshly created Release 1 starter site will come with a basic homepage. This uses the DS Inception module to easily place content into a variety of available layouts.

    While there are many different ways to lay out a homepage, in this tutorial we will focus on creating the following:

    Finished homepage with banners and promoted content


    Step 1

    Before we can create a homepage we need some content on the site. These will be featured on the homepage so visitors can click through to these pages.

    Firstly install the content types you'll need. Go to Central Things Manager in the admin menu.

    Click the Install Things tab and select the Basic Page content type. Click install and the site will setup the content type for you (this only needs to be done once). Return to the homepage.

    You can now build pages so start by creating a page that represents four large sections in your website, eg. About, Study Options, Current Students, and Contact. (You can always change these later or use ones that make more sense to your site)

    Add some text to the Summary and Body fields.

    For each page, open the Publishing Options tab on the edit screen and tick 'Published' and 'Promoted to front page'. This won't do anything just yet because we still need to display them on the homepage.

    Add a Featured Image and click Save.


    Step 2

    On the homepage, select Add Element on one of the Inception drop zones and select View. This will add a "view" element.

    Adding a view to an Inception zone

    This will bring up a list of the available Views to use on the site.

    Inception add View element screen

    We want to select from the List with Lead set, and choose the Title, Summary, Image option.

    Selecting Title, Summary, Image option from the List with Lead view

    This View is pre-configured to display any 'promoted to front page' nodes in a grid layout. You now have a hompage that displays a grid of promoted pages, allowing visitors to navigate into the key sections of your site.

    Step 2 showing promoted items in a grid


    Step 3

    We are using the List with Lead view but we haven't added our lead text yet, it's just using a default to show us where this will sit. Now lets put some introductory text to the left of our grid of promoted items.

    Hover over the view and click on the Cog icon in the element toolbar. This will bring up the settings from when we added the view.

    Inception toolbar for a View element

    Expand the Custom View Options to reveal a Custom Header field. This is where you can enter your lead text. It might be providing context to the featured items in the grid, or it might be a short summary of the purpose of the site.

    Save the changes then jump back to the homepage to see how it looks. The text is now displaying on the left column and the promoted items have moved across the accomodate.

    It's working but it looks a bit plain, so now we add a style class and configure the columns to fit the number of promoted items we have.


    Step 4

    Click the Cog icon in the element toolbar again. This time we will use the Additional classes field to set the style class we want to use. There are a few style variations available for this View but we want to use 'reversed' for now. This will put a light grey background behind the promoted items and block them out with some subtle detailing.

    Save changes and return to the homepage.

    Congratulations you have just built your first functioning homepage in the UQ Drupal platform!

    Next: Featuring content with banners

    Previous (Content Writing)Next (Writing for the Web)