{"id":3546,"date":"2024-12-11T15:55:22","date_gmt":"2024-12-11T20:55:22","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3546"},"modified":"2024-12-11T15:55:22","modified_gmt":"2024-12-11T20:55:22","slug":"montclair-edu-page-structure","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/montclair-edu-page-structure\/","title":{"rendered":"montclair.edu Page Structure"},"content":{"rendered":"<p>When creating and editing pages on montclair.edu, it can be helpful to understand how the pages are structured and what parts of each page are able to be updated by Content Editors.<\/p>\n<p>Each page on montclair.edu is broken into three main sections:<\/p>\n<ul>\n<li><strong>The Header<\/strong><\/li>\n<li><strong>The Middle<\/strong><\/li>\n<li><strong>The Footer<\/strong><\/li>\n<\/ul>\n<p>Content editors mainly work within the middle area of the page.<\/p>\n<p>To provide a consistent user experience and branding, as well as ensure that all montclair.edu websites meet accessibility requirements, the header and footer areas are generally the same structure across all pages on any montclair.edu website.<\/p>\n<div class=\"prpl-band\"><div class=\"prpl-band-content\">\n<h2>The Header<\/h2>\n<p>The header provides consistent site identification and navigation for all sites on montclair.edu in a way that&#8217;s tested compatible across a wide array of devices and that&#8217;s compliant with WCAG 2.0 Level A\/AA accessibility standards.<\/p>\n<p>While some items in the header pull information from the site (like the site name and menu), none of the HTML in the header is directly editable for content creators.<\/p>\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/header-desktop-image.jpg.5.1x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/header-desktop-image.jpg.5.1x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<p>The header of every montclair.edu page contains:<\/p>\n<ol>\n<li>The University Logo, which links to the <a href=\"http:\/\/montclair.edu\">montclair.edu homepage<\/a><\/li>\n<li>The name of the montclair.edu website, which links to the individual website&#8217;s homepage (In the case of the above example, the website name is <em>University Admissions<\/em>)<\/li>\n<li>A white tab that contains the menu for the individual website\u00a0(see below)<\/li>\n<li>A white tab that provides access to montclair.edu Live Search<\/li>\n<\/ol>\n<p>Optionally, a montclair.edu website&#8217;s header may also include a red tab that links to the relevant montclair.edu Apply page.<em> This can be enabled by Digital Communications when the site is set up, but may only link to either the <a href=\"http:\/\/www.montclair.edu\/apply-to-montclair-state\/\">Apply to 精品成人福利在线<\/a> page, Undergraduate Admissions or Graduate Admissions.<\/em><\/p>\n<\/div><\/div><div class=\"prpl-band\"><div class=\"prpl-band-content\">\n<h2>The Middle<\/h2>\n<p>The middle part of the web page is the part that holds the page&#8217;s content. The middle is significantly different depending on whether you&#8217;re using the homepage template or the subpage template.<\/p>\n<h3>The Middle for Homepages<\/h3>\n<p>When using the homepage template (Advanced MSU Page) the middle of the page is a completely free-form area and <em>everything <\/em>that appears on the page must be put there explicitly by the content editor. For details on how to do this, see <a href=\"http:\/\/www.montclair.edu\/web-services\/montclair-edu-website-framework\/wordpress-shortcodes\/homepage-band\/\">Homepage Band<\/a>.<\/p>\n<h3>The Middle for Subpages<\/h3>\n<p>When using the subpage template (Default Template) the middle of the page has a handful of automatically generated elements.<\/p>\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/subpage-components.jpg.5.1x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/subpage-components.jpg.5.1x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<ul>\n<li><strong>Feature Image<\/strong> &#8211; content editors can select a featured image per page and WordPress will take care of building the responsive HTML.<\/li>\n<\/ul>\n<ul>\n<li><strong>Left Menu<\/strong> &#8211; a view of the site&#8217;s menu that shows the visitor which page they&#8217;re currently reading.<\/li>\n<li><strong>Page Title<\/strong> &#8211; this is automatically placed in an H1 tag with the appropriate ID to enable accessible navigation.<\/li>\n<li><strong>Content Area<\/strong> &#8211; the freeform HTML area where editors can directly place content.<\/li>\n<\/ul>\n<p>The <strong>Content Area<\/strong> is the <em>only <\/em>part of a sub-page that is <em>directly<\/em> editable by the content editor. The other parts of the page are generated by the template in order to ensure they&#8217;re fully accessible, responsive and up-to-date.<\/p>\n<\/div><\/div><div class=\"prpl-band\"><div class=\"prpl-band-content\">\n<h2>The Footer<\/h2>\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/Footer-desktop-image.jpg.5.1x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/Footer-desktop-image.jpg.5.1x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<p>The footer area of the page is provided for visitor convenience and is mostly composed of University-wide information and links, but the individual website&#8217;s name and list of top-level menu pages both appear here.<\/p>\n<p>The footer of every montclair.edu website page contains:<\/p>\n<ol>\n<li>The 精品成人福利在线 University logo which links to the montclair.edu homepage<\/li>\n<li>Contact information for the University<\/li>\n<li>Links to 精品成人福利在线 University&#8217;s main social media accounts<\/li>\n<li>The name of the individual website, which links to the website&#8217;s homepage<\/li>\n<li>An abbreviated version of the website menu<\/li>\n<li>The name of the University, which links to the University&#8217;s homepage along with an abbreviated version of the University&#8217;s website Menu<\/li>\n<li>A menu containing links to University policies and other links required for compliance<\/li>\n<\/ol>\n<p>Content editors are able to influence the footer by changing their menus and by changing the site&#8217;s name, but they are not able to directly edit any HTML in the footer.<\/p>\n<\/div><\/div><div class=\"prpl-band\"><div class=\"prpl-band-content\">\n<h2>Site Menu<\/h2>\n<figure class=\"responsive-image-holder wp-caption alignnone\"><img decoding=\"async\" class=\"mlt-responsive-image\" data-original-image=\"\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/site-menu-components.jpg.5.1x.generic.jpg\" src=\"\/responsive-media\/cache\/university-communications\/wp-content\/uploads\/sites\/144\/2024\/12\/site-menu-components.jpg.5.1x.generic.jpg.0.1x.generic.jpg\"\/><\/figure>\n<p>The Site Menu is a standard WordPress menu edited by the site editor. The first two levels of the menu are displayed in the header, but the menu can go deeper (visitors will be able to see deeper links in the Left Menu).<\/p>\n<p>Also in the header, there is an under-menu content area which can contain additional links that you wouldn&#8217;t want to have as part of the navigation. In this example, Undergraduate Admissions uses the under-menu content area to display an additional &#8220;Information For&#8221; menu that gives visitors access to content based on audience. This area is not editable by content editors but can be configured by Digital Communications upon request.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When creating and editing pages on montclair.edu, it can be helpful to understand how the pages are structured and what parts of each page are able to be updated by Content Editors. Each page on montclair.edu is broken into three main sections: The Header The Middle The Footer Content editors mainly work within the middle [&hellip;]<\/p>\n","protected":false},"author":411,"featured_media":3551,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3546","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3546"}],"version-history":[{"count":3,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3546\/revisions"}],"predecessor-version":[{"id":3831,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3546\/revisions\/3831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3551"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}