Creating/Editing Page Layouts


Regular content pages place content into one large area on a page (a large rectangle to the right of the menu). Although this is sufficient for most pages, sometimes a more sophisticated page layout is desired. For example, users would like to create a page with two columns rather than one large area. Layout pages can accomplish this.

 

Page layouts are specialized types of pages. Each page layout organizes a page in a specific way. Example page layouts include organizing a page into two large columns or two columns with two areas in each column. The main Geneseo pages such as Alumni, Academics, News & Events, etc. are examples of sophisticated page layouts.

 

General Drupal users are able to choose from four types of page layouts:
     Layout 1: Page layout with two columns and the menu on the right
     Layout 2: Page layout with two columns and the menu on the left
     Layout 3: Page layout with two columns, each with two areas, and the menu on the left
     Layout 4: Page layout with two columns; the left column is one large area and the right column has three areas; menu is on the left
     Layout 5: Page layout with large area at top, two columns below each with two areas; three areas in right column,  two in left; menu is on the left
     Layout 6: Page layout extension with 3-4 areas in middle column, two in left; menu on left

 

Mini1

Layout1

Layout 2

Layout 2

Layout 3

Layout 3

Layout 4

Layout 4

 Layout 5

Layout 5

 Layout 6

Layout 6

Note: Both Layout 5 and Layout 6 have areas that are collapsible.  For Layout 5, if area 6 is left blank, area 4 will fill that section and if area 7 is left blank, area 5 will fill that section.  For Layout 6, if area 6 is left blank, area 5 will fill that section.

 

Page layouts do not contain page content themselves, but are rather containers to hold the content of other pages. Layout pages consist of multiple areas. Each area can contain one or more content pages. Think of it as ‘placing' a content page in an area of a layout page.

 

Therefore, in order to create a two column page with content in each column, three pages actually need to be created. Two content pages, each containing the content of a column, and a layout page need to be created. The layout page will then hold each of the content pages in a column.

 

Create a Layout Page:

To create a layout page, click ‘Create Content' on the Administrative Menu. Then click the layout type you would like to create (Layout 1, Layout 2, Layout 3 or Layout 4). The layout page will appear in edit mode.

 

Enter the title of the page and select which site the page is being created for. Below the title and site fields is an image showing the page layout. Each area of the layout is displayed as a black box with a number in it. These areas represent spaces where content pages can be placed. An example layout image is shown below (Layout 4).

 

Layout

 

To place a content page in one of the areas, the content page must have already been created (e.g. a site page, slideshow, webform, etc.). Each content page has a specific id number, called the Node ID or NID. To place a content page in a layout area, you must first find the Node Id of the content page.


Find the Node ID of a page:

Click ‘Site Contents' in the Administrative Menu then click ‘Contents For Site: <sitename>'. The Node ID of a page is displayed to the left of the page title.

 

Nid

 


Add Node IDs to the Areas:

Once the Node ID of a content page is located, this Node ID can be associated with an area on the layout page. Below the layout image are area boxes titled Area 1, Area 2, etc.

Area

Each of these area boxes corresponds to the same numbered area on the layout image.

To place a content page in an area, enter the content page's Node ID in the Node ID field of the area you would like the content page to appear in. Leave the Page Type as ‘Block'. Repeat this process to place content pages in each of the page layout areas.

 

If you would like to add multiple content pages to the same area, click the 'Add Another Node/View To This Area'. Another Node ID field will appear in the same area section. Insert an additional node ID into the Node ID field which just appeared.


When finished, click ‘Save' to save the layout page.

 

Example:
Create a layout page of type, Layout3 (a layout with four areas). A slideshow should be displayed in one area, while the other three areas should contain text. The page should eventually look like the image on the left below. The image on the right below highlights the four distinct areas in the page layout. Each of these areas will contain a separate content page, each with its own Node ID.

 

Egs

 

 

We first need to create the four content pages. Create one Slideshow page (click ‘Create Content' -> ‘Photo Slideshow') and three content pages for your site (e.g. CIT, Biology, etc.). Each content page should contain the text of one of the areas in the images above.

 

Next, locate the Node ID for each of the four pages. Click ‘Site Contents' then click ‘Contents for Site: <sitename>'. Write down the Node ID for each of the four pages you created. For this example, assume our Node IDs are 10, 11, 12 and 13.

 

Next, create a Layout3 page by clicking ‘Create Content' and then clicking ‘Layout3'. Enter a page title and select the site to create the page for. To place the content of Node ID 10 in area 1, type 10 in the Node ID field in the Area 1 section. Type 11 in Area 2, 12 in Area 3 and 13 in Area 4.