{"id":936,"date":"2023-11-03T11:55:29","date_gmt":"2023-11-03T15:55:29","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=936"},"modified":"2026-08-10T21:15:33","modified_gmt":"2026-08-11T01:15:33","slug":"homepage-components","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced-training\/advanced-training-module-1-homepage-design\/homepage-components\/","title":{"rendered":"Homepage Components"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Homepage Components\n                    <\/h1>\n                \n                                \n                                    \n\n<p class=\"wp-block-paragraph\">Advanced Training Module 1: Homepage Design<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\">There is no single formula for a successful homepage. Every department, service, research group, and administrative unit has different goals and audiences.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, most effective homepages share several common components that help visitors understand the site, find important information, and take action.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you design your homepage, think carefully about what your audience needs to know, what you want them to do, and what content deserves the most attention.<\/p>\n\n\n\n<h2 id=\"homepage-banner\" class=\"wp-block-heading\">Homepage Banner<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The homepage banner, sometimes called a hero section, is often the first thing visitors see.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A homepage banner should clearly communicate:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Who you are<\/li>\n\n\n\n<li>What you do<\/li>\n\n\n\n<li>Who you support<\/li>\n\n\n\n<li>Why visitors should explore further<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A strong banner often includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A clear title<\/li>\n\n\n\n<li>A short description<\/li>\n\n\n\n<li>An image<\/li>\n\n\n\n<li>A call-to-action button<\/li>\n<\/ul>\n\n\n\n<h2 id=\"introduction-or-welcome-message\" class=\"wp-block-heading\">Introduction or Welcome Message<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A short introduction can help visitors quickly understand the purpose of your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This section should answer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What does your department or service provide?<\/li>\n\n\n\n<li>Who is it intended for?<\/li>\n\n\n\n<li>What information can visitors find here?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Keep introductory content concise and focused.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Most visitors scan homepages rather than reading every word.<\/p>\n\n\n\n<h2 id=\"service-or-program-highlights\" class=\"wp-block-heading\">Service or Program Highlights<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many visitors arrive looking for a specific service, program, or resource.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Highlighting your most important offerings near the top of the homepage can help visitors reach the information they need quickly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Academic programs<\/li>\n\n\n\n<li>Student services<\/li>\n\n\n\n<li>Research opportunities<\/li>\n\n\n\n<li>Support resources<\/li>\n\n\n\n<li>Community initiatives<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Featured Cards are often an effective way to showcase important services and programs.<\/p>\n\n\n\n<h2 id=\"featured-content\" class=\"wp-block-heading\">Featured Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Featured content helps draw attention to information that is particularly important or relevant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Research highlights<\/li>\n\n\n\n<li>Student success stories<\/li>\n\n\n\n<li>New initiatives<\/li>\n\n\n\n<li>Strategic priorities<\/li>\n\n\n\n<li>Featured resources<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Not every piece of content needs to appear on the homepage. Focus on the content that best supports your goals.<\/p>\n\n\n\n<h2 id=\"news-and-events\" class=\"wp-block-heading\">News and Events<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Displaying recent content helps communicate that your website is active and current.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Homepage News or Event sections often include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recent announcements<\/li>\n\n\n\n<li>Upcoming events<\/li>\n\n\n\n<li>Workshops<\/li>\n\n\n\n<li>Deadlines<\/li>\n\n\n\n<li>Important updates<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using dynamic News Cards or Event Cards helps keep this content updated automatically.<\/p>\n\n\n\n<h2 id=\"calls-to-action\" class=\"wp-block-heading\">Calls to Action<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Every homepage should encourage visitors to take a next step.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A call to action (CTA) directs visitors toward important tasks or information.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply Now<\/li>\n\n\n\n<li>Explore Programs<\/li>\n\n\n\n<li>Contact Us<\/li>\n\n\n\n<li>View Events<\/li>\n\n\n\n<li>Request Support<\/li>\n\n\n\n<li>Learn More<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Your primary call to action should be prominent and easy to find.<\/p>\n\n\n\n<h2 id=\"pathways-to-more-information\" class=\"wp-block-heading\">Pathways to More Information<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Visitors should be able to quickly move from the homepage to the information that matters to them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can be accomplished through:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigation menus<\/li>\n\n\n\n<li>Featured Cards<\/li>\n\n\n\n<li>Buttons<\/li>\n\n\n\n<li>Index sections<\/li>\n\n\n\n<li>Quick links<\/li>\n\n\n\n<li>Listings<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A homepage should act as a starting point rather than a destination.<\/p>\n\n\n\n<h2 id=\"images-and-visual-content\" class=\"wp-block-heading\">Images and Visual Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Images help create visual interest and communicate your department&#8217;s identity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When selecting homepage images:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use high-quality photography<\/li>\n\n\n\n<li>Ensure images support the content<\/li>\n\n\n\n<li>Avoid decorative images without purpose<\/li>\n\n\n\n<li>Consider accessibility and mobile viewing<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Strong visuals can help reinforce key messages and make a homepage more engaging.<\/p>\n\n\n\n<h2 id=\"common-homepage-structure\" class=\"wp-block-heading\">Common Homepage Structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many successful homepages follow a structure similar to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Homepage Banner\nIntroduction\nFeatured Programs or Services\nFeatured Content\nNews and Events\nCall to Action\nContact Information<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is only a starting point. The right structure depends on your audience and website goals.<\/p>\n\n\n\n<h2 id=\"homepage-review-checklist\" class=\"wp-block-heading\">Homepage Review Checklist<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When reviewing your homepage, ask:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 Is it immediately clear what the site is about?<\/li>\n\n\n\n<li>\u2705 Can visitors quickly find your most important services or information?<\/li>\n\n\n\n<li>\u2705 Are important actions clearly visible?<\/li>\n\n\n\n<li>\u2705 Does the homepage showcase current content?<\/li>\n\n\n\n<li>\u2705 Is there a logical flow from top to bottom?<\/li>\n\n\n\n<li>\u2705 Does each section serve a purpose?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If the answer is yes to most of these questions, you&#8217;re likely on the right track.<\/p>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try It Out<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Review your homepage and identify its major components.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify one component you could improve to better support your visitors.<\/li>\n\n\n\n<li>Does your homepage include a clear banner or introduction?<\/li>\n\n\n\n<li>Are your primary services, programs, or resources easy to find?<\/li>\n\n\n\n<li>Is there a clear call to action?<\/li>\n\n\n\n<li>Does the homepage highlight news, events, or featured content?<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn the common components of effective homepages and how each section helps visitors find information and take action.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":532,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[67],"class_list":["post-936","page","type-page","status-publish","hentry","cu_page_type-advanced-training-module-1"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=936"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/936\/revisions"}],"predecessor-version":[{"id":4290,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/936\/revisions\/4290"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/532"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=936"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}