The basic layout of each page is determined by the Page Layout area of its Edit Navigation Page. The default is a single column layout, but Admins can select from several choices to broadly structure individual web pages. After the Page Layout is chosen Admins place Content Items within the Layout Areas created and order them as they wish to achieve their layout/design/functional goals.
Note: Content Items (parts of a page) can also have their own layouts.
Establishing Page Layout
To change the Page Layout of a page, go to the Navigation Page and take the following steps:
- Select the page by clicking on the name of the Page Folder for the page whose layout you want to edit. You will know it is selected when it is surrounded by a light-blue box
- Click "Edit" on the Navigation side. This will open the Add/Edit Navigation Page for that page.
- Scroll to the bottom where you will see a field called "Page Layout". The default layout "Single Column" will be pre-selected. Click on the down-arrow to expose the full list of layout options. Select the layout option of your choosing.
- Click "Save". The changes will be made and you will be returned to the Navigation Page.
The page will now be in the new layout. If the page has multiple Content Items you will see numbers next to them on the Content side of the Navigation Page. It is recommended you immediately check to see if the Content Items are rendering in the areas of your choosing. Change the order or area of Content Items as needed.
Changing the Layout Area of a Content Item
It is very easy to change the area of the page where a Content Item Renders. On the Navigation Page, the numbers to the right of the Content Item name indicate where it is currently rendering.
Starting on the Navigation Page, take the following steps to change the layout area where a Content Item is rendering.
This will render the Content Item in the area selected.
Changing the Order of Content Items
The number associated with a Content Item identifies the area of the page where it will render - but it does not indicate whether it will render above or below other Content Items in that area (those with the same number). As is logical, items with the same content area number render top to bottom in the order listed on the Navigation Page. Therefore, Admins need only re-order the Content Items list to change the top-to-bottom order of Content Item rendering.
On the Navigation Page, take the following steps to change the Content Item order.
- Select the page by clicking on the name of the Page Folder for the page whose layout you want to edit. You will know it is selected when it is surrounded by a light-blue box. This will also expose the list of Content Items on the right-hand Content side.
- Select the Content Item you wish to move. Do this by clicking on the name of the Content Item on the right-hand Content side. This will highlight that Content Item in a royal blue box.
- With the Content Item highlighted, click "Cut" on the right-hand Content side of the Navigation Page.
- Click on the name of the Content Item you wish to place the cut Content Item after. This will highlight the "leading" Content Item.
- Click "Paste" on the right-hand Content side of the Navigation Page.
After a few seconds, you will see the list reorder. You may have to make several changes to the order to get the list in the order of your choosing.
Mixed Page Layouts
A common design element is a band of content stretching across the full browser width of a page while other layout areas respect a narrower width setting. Two special page layouts allow this presentation to be achieved for Higher Logic web pages. "Mixed" page layouts combine 100% width content items with 1200px width content items to achieve this page presentation. Designers and others with CSS skills can take advantage of the 100% content items to have a picture or carousel fill the entire browser at page top while more textual content is displayed below.
Two Mixed page layout options provide multiple 100% width layout slots in combination with other row combinations totalling 1200px max width. Mixed Layout 1 contains 3 layout slots at 100%. Mixed Layout 2 contains four 100% width rows.
The Mixed Page Layout options can be used when full width content display is not desired. As with any other Page Layout horizontal rows with no content will not occupy any space.
Note that the 100% width areas of Mixed Page layouts will only achieve 100% browser width with a Site Frame setting at Full- Width is 100%. Establish this setting on the Layout tab of the Website Setup Wizard.