Pages
Every page on your site comes with a built in top banner and a footer.
The top banner consists of the Caltech word mark, your site title, the utility menu, and the main site navigation. The site title can be edited on the Setup tab of Site Preferences. The utility menu is the name for items in the upper righthand corner of each page; on this site, the items are "IMSS" and "Caltech Sites". The main site navigation is not created as a separate step. It is created and edited automatically when you publish new pages. If you do not want a page to appear in this automatically created navigation, remove it by unchecking the "Show in menus" item in the Settings tab on the page you are editing. You may also add or remove items from your site's menu by checking or unchecking the "Show in menu" item in your site's Sitemap.
The footer is the blue section at the bottom of the page containing the torch icon, the Caltech wordmark and address, and a set of footer links. If you want to remove the log in link from the footer, you can do that at the bottom of the "Theme and Menus" tab of Site Preferences. That tab is also where you can add additional links, for example one for "Directions", or "Contact Us" - see the Footer Menu section of that tab.
Creating pages
To create a new page, you have several options. On the sitemap, you can click the plus sign with the teal background in the right column. There is also a "add child page" option when you hover over a page title. And if you are logged in and looking at a page on your site, there will be a bird icon in the lower right. Hovering over that will give you links to edit the current page or create new page under this one in the page tree.
Page Structure
Everything in between the site navigation and the footer is built by you. So how do you get started? The easiest way is to look and see what other people have done.
Imitation is the sincerest form of flattery
Once you have found a page you like, the next thing is to figure out how it was built. Sometimes it is easy to guess the name of the block you are seeing, e.g. "Image with Side Thumbs" but others are not so obvious. You can look through the "Block Gallery" section of this site, or you can use your browser's developer tools to inspect the section of the page you are interested in. For most browsers, right click on the section of the page whose name you want to know and choose "Inspect Element". If you do this for the purple quotation above, you will see HTML starting with:
<section class="block-AirspaceQuoteBlock">
Now we can look for a block with a similar name and soon find a "Quote Block" in the top row of blocks allowed in a Left Sidebar Layout, Two Column Layout, or Centered One Column Layout.
Deconstructing a Page
The image below shows how the Strategic Communications team built the research page: https://www.caltech.edu/research. The two main sections (outlined in blue) are "Header" and "Body". If you have some stunning, large format graphics, you may want to show them off using the header image carousel block.
Looking at the "Body" section, you can see it is built in stripes. Some elements start with one of our layout blocks - the Left Sidebar Layout in the first section and then the Centered One Column layout further down the page. While other elements (the stats block and two carousels at the bottom of the page) are inserted directly into the page at the top level.
