Pages

Every page on your site comes with a built in top banner and footer.

The top banner consists of the Caltech word mark, your site title, the (optional) utility menu, and the main site navigation. The site title can be edited on the Setup tab of Site Preferences. The Utility Menu are the items in the upper righthand corner of each page; on this site, those are "IMSS" and "Caltech Sites".

The main site navigation is not created as a separate step, but rather generated automatically when you publish new pages. If you do not want a page to appear in this main navigation menu, remove it by unchecking the "Show in menus" item in the Settings tab when editing that page. You may also add or remove items from your site's main nav menu by unchecking its "Show in menu" checkbox in the Sitemap.

The footer is the teal section along 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 to add a child to a specific page. Or, you can click the "add child page" button that appears when hovering over over a page title. Or, if you are logged in and looking at a page on your site, there will be a small bird icon in the lower right. Clicking that will give you a popup menu with links to edit the current page or create a child page under this one.

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.

Once you have found a page you like, the next thing is to figure out how it was built. Sometimes it's 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 blocks available within the Left Sidebar Layout, Two Column Layout, and Centered One Column Layout.

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.