Understanding page layouts

Apr 26, 2014 5:06 pm

What are Page Layouts?
Page Layouts are the fundamental properties of a Freedom website. They determine how the live website appears, and everything that displays on the live site is added to a page layout.

Page layouts contain HTML as well as special "includes" that reference other Freedom content, such as module layouts and widgets.

There are four "System" page layouts, which appear in the Pages tab of the Layouts Module:

  1. The Home layout determines what appears on the website’s homepage.
  2. The Default layout can be thought of as the “Interior” layout. It determines what appears on the site’s interior pages, or pages other than the homepage. Freedom sites can have different layouts for different interior pages, but this one is the default. Other interior pages can be creating using display types.
  3. The Email layout determines how emails sent by the system appear.
  4. The Landing can be used to create a landing page that appears before the homepage, such as a language selection screen or a Flash intro.

Just about every Freedom website will have at least the Home and Default page layouts, which determine the HTML of the homepage and interior pages, respectively.

Additional Page Layouts

  • Additional page layouts can be created that are sections of a full page, like a header or footer. These are inserted into other page layouts. For more information, see Inserting one page layout into another.
  • Display types allow you to create separate interior pages for different sections of the site. An example is a site with a different design for one of its sections. Click here to learn more about display types.

Examining a Page Layout

The Content Variable
The Default layout and display types use a special [[Content]] variable which places content from the Blue Interface onto the site. For information on inserting website content into a page layout, see The Content variable.

In Freedom, Includes are special content inserted into the HTML, which can be identified by their [[double brackets]]. An include can be anything from the content of an About Us page to a small widget that displays the current date or weather. There are several different kinds of includes, each of which can be accessed from its own toolbar icon in Page Layouts.

Insert a Page Layout
Click to view a list of available page layouts. It is a good idea to replace repeating HTML with a page layout. For example, place the <head> of a webpage in a webpage called [[header]]. This will let you make changes to the <head> of your site in one location.

Insert a Module Layout
Click this button to insert a module layout, for example for placing an events lister on the homepage of your site.

Insert a Widget
Click to view a list of available widgets. Widgets are like module layouts, except are usually simple things that don't provide their own HTML layout, such as "Bookmark this page" links, Flash objects or a display of the current date.

Insert a Variable
Variables will include System Default variables like [[Content]], [[Page_Title]], [[Meta Tags]] and [[Site Url]].

Insert Predefined Snippet
Predefined snippets are bits of code you can insert to make building a page from scratch quicker. These snippets help if you can't remember the syntax for referencing a JavaScript file, stylesheet or Doctype syntax. Also within this tab are basic HTML layouts, table layouts and more.

Insert a Custom String Value
If you've added custom string values, they will be added to this list.

Insert a Color Value
Click the paint bucket to view a set of web friendly colors. Click the color to insert it's hex-code value. Also, if you've added any values to the site's color palette (via the Stylesheet module), they will appear within this popup.

Insert a Module Link
Use this button to create links to module layouts.

Insert an Image (or any file) Name
Use this button to reference a file within the file manager.

Disable ACE Editor
This disables line numbers, color-coded HTML and other features, reverting to the old Freedom version 6 HTML Editor.

Toggle Stylesheet
While editing a page layout, you can toggle the stylesheet by clicking the "Toggle Stylesheet View" link in the Toolbar.

Text Area
The text area contains all of your HTML and includes.

Below the Text Area
Make this page layout a Display Type
Check the box to make this Page Layout a display type.

Make this display type secure (https://)
Check the box to make this Page Layout a secure display type.

Membership Access
Set a restriction to this page layout. Login will be required if an option is selected.

Login Display Type
Select a Login display type.