Creating a Page
Introduction
This page is meant to guide you through creating a page, from selecting a page template to using layouts and widgets to create good page content.
Selecting a Page Template
There are many page templates when you are creating a page, all of which have different purposes. There are also variants of most of these with "No Search" after the title. The only difference between the base and the No Search versions should be that the Member Search tabs at the top will not be on the No Search versions.
Here is a list of the page templates as of this guide's writing and what they do:
| Template Name | Purpose |
|---|---|
| SiteBase | This template includes only the very baseline code, like CSS, JavaScript, and Google Analytics code, but provides no structure for the page. This should only be used if you're trying to create a page that doesn't look like part of the site. |
| Header / Footer | This template includes the header and footer and no additional layout. You typically would only use this if you are creating a page with structure different than other pages (like the homepage). |
| Landing | This template what you'd want to use for a landing page or other page where you want to put full-width content right at the top of the page. It includes the search (if not No Search) and breadcrumbs/top banner. |
| Interior | This template is what you'd want to use for a page that starts with normal contained content right at the top. It includes everything in the Landing template, but also has a container and some pre-defined spacing added. |
| Interior with Side Nav | This template is set up for a two-column layout with a side nav in the left column. You need to set what the top level page is for the page tree you'd like to display in the side nav. Use this if you're creating pages within a section that has lots of sub-pages you want users to be able to navigate between. |
| Wellness (all templates that begin with Wellness) | The Wellness microsite has several templates, and they follow the same patterns above just with the design of the microsite. |
Page Layout
Layout blocks, found in the container on the right side of the editor under the Layout tab, can be used to create special sections of the page. Try to use these at least once or twice on a page to break up long sections of text content.
The below table lists all of the layout blocks and what they should be used for. Items in bold are the ones you should use most frequently.
section and section-title are what you will typically want to use to created a colored stripe with contained content in it. (section if you don't want a title, and section-with-title if you do.)
You can place layout blocks within each other to create nested sections. For instance, if you want to create a two-column layout with different colored boxes in it, you can use a grid-6+6 layout, then place a plain-div in each one, and add the background color to the plain-div blocks.
| Layout Name | Purpose |
|---|---|
| container | This creates a limited width container instead of letting content go all the way to the edge of the page. Usually any text content should be inside of container. However, if you already see that the page content is contained, you don't need to add any extra of these. |
| embed-wrapper | You should place any YouTube or similar embeds in this layout, and it will scale them automatically as the screen scales. |
| grid-12 | Don't use this unless you know you need it -- use plain-div instead. |
| grid-2+3+2+3+2 | Creates a 5 column layout. The grid uses a 12-column system which is why the columns aren't exactly even. |
| grid-3+3+3+3 | Creates a layout with 4 equal columns. |
| grid-3+6+3 | Creates a layout with 3 columns, the middle twice as wide as the left and right ones. |
| grid-3+9 | Creates a layout with 2 columns, the left being 25% and the right being 75%. |
| grid-4+4+4 | Creates a layout with 3 equal columns. |
| grid-4+8 | Creates a layout with 2 columns, the left being 33.33% and the right being 66.67%. |
| grid-6+6 | Creates a layout with 2 equal columns. |
| grid-8+4 | Creates a layout with 2 columns, the left being 66.67% and the right being 33.33%. |
| grid-9+3 | Creates a layout with 2 columns, the left being 75% and the right being 25%. |
| plain-div | Creates a full width container with no extra additions. |
| section-with-title | Creates a full width section with padding that includes a container and a space to put a title with preset spacing. Defaults to dark blue background color. You can remove bg-primary from the CSS classes on the layout and add another background color to change the background color. |
| section | Creates a full width section with padding that includes a container. You can remove bg-primary from the CSS classes on the layout and add another background color to change the background color. You can remove bg-primary from the CSS classes on the layout and add another background color to change the background color. |
Containers
Many sections of pages switch between contained and full-width areas. To add a full width area when your page is currently in a container, you can take a layout block and place it below the current container and drag it to the left of the container's edge.
For example, the content above this section is in the container, and we added a section-with-title block at full width to add a new colored stripe with a container inside of it.
However, once you're in a contained block, make sure not to add more container blocks because that will add extra unnecessary padding.
Text Width
Usually, you don't want plain text content to cross the entire length of a page. When possible, try to limit it to 75% of the width of the contained element.
There are two ways you can do this. You can create a layout with multiple columns and put images or other text in the other column, like we've done here. You could also create a layout like below by adding a container layout and adding the mw-md class to it.