• Website workspace
• General
• Layout
• Workspace Area
• About Pages
• Managing Pages
• Activating and De-activating Pages
• Working with Web Content
• Creating a Form
• Creating a Search Page
• Paragraph Types

Website workspace

General

Editors work mostly in the Website workspace, which opens, by default, when you login to AdminCentral.

The Website workspace allows you to manage your web pages, create new pages, edit current ones, and to do all related tasks that are necessary to manage and build your website.

Whilst working through this section, we encourage you to experiment with and test the various options. As they say: “practice makes perfect”. You should be able to reproduce all of the explanations and examples that we provide.

This section of the manual assumes that you have Magnolia's default installation running. The default installation contains all of the sample content and templates that are referred to.

Even If you are working on a customized installation, you should not experience too much difficulty in adapting the illustrations to suit your specific circumstances

Layout

After you login to the Author instance of Magnolia, AdminCentral will open and the Website workspace will be displayed by default. If, for any reason, this does not happen you can open it by clicking on the Website button in the navigation area in the left-hand column.

The workspace is divided into two distinct areas: the navigation area, located on the left-hand side and the workspace area to the right.

The navigational buttons which allow you to access the different workspaces appear in navigational area.

Workspace Area

General

The Website workspace area has five columns.

• Page: The page name of each web page;

• Title: The title of each web page;

• Status: This status indicator which shows whether or not a web page has been activated, i.e. published to a pubic instance;

• Template: The name of the template used to create each web page; and

• Mod. Date: The date on which each web page was last modified.

These page properties and elements are dealt with more fully in the individual sections that follow.

Selecting Pages

In order to work on a specific page, you first need to select or highlight it.

To select a specific page row, click on any of the elements within the row.

When you point to any of the elements, the row will become highlighted by a light blue rectangle and when you click, the rectangle will darken, indicating that it is selected.

Command Bar

The command bar, which contains the main commands, is located at the bottom of the workspace area.

You can use any of these commands by simply clicking on the relevant command.

Whereas the New page and Refresh commands are always active, the Open page, Activate this page and De-activate commands are page specific, and only become active and clearly visible when a specific page is selected. When no page is selected they are transparent and will not work.

To select a page, click on any of the page elements in the page row and it will be highlighted by a blue rectangle indicating that it is selected.

The use of these commands is dealt with in detail in individual sections.

Command Menu

You can also access the main commands and certain additional commands by right-clicking with your mouse to activate the command menu.

There are three ways to access the command menu.

• If your task relates to a specific page, you can either:

• First select or highlight the page row, by clicking on any of the page elements within the row.

  When you click, the row will become highlighted by a blue rectangle, indicating that it is selected. Next, right-click anywhere in the workspace area and the command menu will appear: or

  

• Alternatively, without first selecting a particular row, simply point to and right-click on any of the page elements of the page.

  When you point, the row will become highlighted by a light blue rectangle, and when you right-click, the rectangle will darken and the command menu will appear.

  

• If your task does not relate to a specific page:

• Simply right-click anywhere in the workspace area, other than on any page element.

You will know when you are pointing to a page element because a light blue rectangle will appear. You can right-click anywhere where this does not happen.

You can use any of the commands in the menu by simply clicking on the relevant command.

When a specific page is selected all of the commands in the menu are clearly visible and active, but when no page is selected only the commands which are not page-specific, i.e. New page and Export/Import tree to xml, will be clearly visible and active. The page-specific commands, such as Open, Delete, Copy and Move will appear transparent and will not work.

Search Function

General

Magnolia has a built-in search function which allows you to search through the content of your pages. The search function is very useful for locating specific pages or information, especially when your site is large and contains many pages.

The search box is located in the bottom right-hand corner of the workspace area.

To use this function, type a search term in the search box and then press the Enter key on your keyboard.

The page will reload to display all of the pages that contain the search term in the search workspace area.

To create the screenshot below, we entered the term “workspace” in the search box.

Layout

There are three columns in the search workspace area:

• Name: The page name of the page;

• User: The user who created or last modified the page; and

• Title: The page title.

In addition, there is a grey panel to the right of the columns which facilitates different grouping options.

The addition of the User column in the search workspace, which is not displayed in the normal workspace area, can be extremely useful in locating a specific page.

By default, the pages in the Search workspace area are displayed in the same order as they appear in your page structure in the normal workspace area.

To demonstrate the default search page order, in the screenshot below we have highlighted the first four search result files as they appear in the page structure in the normal workspace area. If you compare the screenshot above with the one below, you will note that the sequence is identical.

Grouping Options

The grey panel, on the right-hand side of the columns, offers further grouping or sorting options.

This panel can be used to re-group or re-sort the pages that contain the search term and offers hierarchical sorting or grouping options to the second level.

The first grouping level is by User, and the link, named User, which facilitates this, appears beneath the “Group by” category heading.

To sort your pages by User, click on the User link and the search workspace area will reload to display the files grouped by User.

The second grouping level headed, “Sort within a Group by”, offers you the choice to further group your pages, within the first sorting level, by either Name or Title.

To further group your pages by either Name or Title, click on either of these links and the Search workspace area will reload to display your files grouped first by User, and then by either Name or Title.

To create the screenshot below, we clicked on the Name link in the “Sort Within Group by” category, and the pages now appear in alphabetical order by page name.

To create the screenshot below, we clicked on the Title link in the “Sort Within Group by” category, and the pages now appear in alphabetical order by page title.

Search Levels

Magnolia’s search function operates simultaneously on four levels. Before returning your search results, the search function searches through:

• The name of your pages;

• The title of your pages;

• The actual content of your pages; and

• The information inserted in the Page properties window when you create and amend pages. This is discussed in detail in Setting Page Properties.

Choosing Search Terms

The search function works in much the same way as many others, that you are no doubt already familiar with, do. A good example would be a basic Google search.

Choosing the right search term is the key to finding the information that you are looking for and it is always best to be as specific as possible. If you are unsure of the precise page that you are searching for, you can always start with a broad search term and later narrow it down by including additional search terms.

The sections below detail the basic rules for searching.

Capitalization

Searches are not case-specific. Regardless of the case in which you enter the search term, or the case in which the search term appears in the page name, title, content or related information, the page will be included in the search results.

For example, if you were to enter the term “WoRKspAce”, the search function would still return all results which contain the term “workspace”, “Workspace” or “WORKSPACE”.

Multiple Search Terms

Multiple search terms can be included and are useful in narrowing down your search. When you enter multiple search terms the search function searches for pages that contain only all of the terms. The more terms you enter, the more you will narrow down your search.

Specific Phrases

You can search for a specific phrase. If you can recall the exact phrase, place it in quotation marks and the search results will contain only those pages that contain the exact phrase.

If you cannot recall the exact phrase, include as many terms as you can, but in this instance omitting the quotation marks.

Excluding Terms

You can exclude pages containing specific terms by using a minus sign (-).

For example, if you enter the words “workspace –website”, your search results will include all files containing the work “workspace”, excluding those that additionally contain the word “website”. When using the minus sign, include a space before the minus sign and exclude a space after it.

Common Words Excluded

The search function automatically excludes common words, such as “and”, “where” and “how”, so it is unnecessary to include these terms.

For example, if you insert the words “website and workspace” or “website workspace”, your search results will be identical because the word “and” is automatically be excluded.

Including Common Words

It may, on occasion, be necessary to include common words that are automatically excluded by the search function. If this is the case you can include them by using the plus (+) sign.

if you would like, for example, to find all pages containing the words “workspace” and “how”, insert “workspace +how” into the search box. When using the plus sign, include a space before the plus sign and exclude a space after it.

Word Variations

The search function automatically includes natural extensions or derivatives of words, but does not include word shortenings.

If you search for the singular of a word, the plural will automatically be included, but only if it is an extension of the singular. For example, singular: “market”, plural “markets”. If the plural is not an extension of the singular, it will not be included. For example, singular “goose”, plural “geese”.

The word “market”, its plural “markets” and a derivative of it “marketing”, provides a good example:

• If you search for the search term ‚Äúmarket‚Äù, the results will include pages that contain both the words ‚Äúmarkets‚Äù and ‚Äúmarketing‚Äù;

• If you search for the search term ‚Äúmarkets‚Äù, the results will exclude pages that contain the word ‚Äúmarket‚Äù, and obviously also the word the word ‚Äúmarketing‚Äù;

• If you search for the search term ‚Äúmarketing‚Äù, the results will exclude pages that contain the word ‚Äúmarket‚Äù and ‚Äúmarkets‚Äù.

Working with Search Documents

The search workspace contains a separate set of commands which are relevant to conducting searches and working with pages in the search results.

Command Bar

The command bar is located at the bottom of the workspace area and includes two commands: Open page and Show in navigation.

You can use either of these commands by simply clicking on the relevant command.

As all of the commands are all page-specific, they will only be clearly visible and active when a specific page or row is selected.

The use of these commands is dealt with in detail in individual sections.

Command Menu

You can also access the Search workspace commands by right-clicking to activate the command menu.

To open the command menu, either:

• Select the page row by clicking on it, and then right-click anywhere within the highlighted row: or

• Alternatively, without first selecting a row, right-click on any of the page elements within a particular row.

  When you point, the row will become highlighted by a light blue rectangle and when you right-click, the rectangle will darken, indicating that it is selected.

  

In both of the above instances, the command menu will appear as soon as you right-click.

To use any of the commands in the menu, simply click on the relevant command.

Using the Commands

The Open Page command will open your page in the Editing window.

Working in the Editing window is discussed in The Editing Window.

In addition to using the Open page command in either the command bar or the command menu, you can also open the page by double-clicking on the page icon to the left of the page name.

The Show in navigation command allows you to view the file found in the search results in its position within the navigational page structure.

When you click on the Show in navigation command, the window will reload to display the normal workspace area and the selected page will be highlighted within the navigational structure.

Error Messages and Warnings

While working in the Website workspace, if you attempt to do anything that is not possible, a small error dialog window will open advising you of this.

The following screenshot is an example of the type of message that you could receive. If you receive this or a similar message, click on the OK button and you will be returned to the workspace area.

Before Magnolia performs certain actions which could have serious consequences, such as when deleting pages or nodes, you will receive a warning message. A small warning dialog window will open requesting you to confirm your choice. To do so, click on the OK button.

User Information

Magnolia has a sophisticated security system and you can only gain access if you have valid login credentials, i.e. a username and password.

The username that you are logged in under is displayed in the top right-hand corner of the workspace area.

Directly to the right of your username, there is a Logout link. To logout of Magnolia, click on this link.

We strongly suggest that you always logout of Magnolia whenever you are away from you computer for any length of time.

Resizing Columns

The columns in the Website workspace can be resized by simply dragging the right-column edge to the size that you would like.

This can be useful when you have lengthy information inserted in either the Page or Title column, or have a smaller computer screen.

To resize any of the columns, do the following:

• First point to the right-hand column border of the column you would like to resize, click on it and keep your left mouse button held down.

  When you point, your mouse pointer will change into a horizontal double-arrow, and when you click, the color of the right-hand column border will change from green to black.

  

• Next, drag the column border, in either direction, and then click on the position where you would like the repositioned border to appear.

  While you are in the process of dragging the border, your mouse pointer will change into a “no-entry sign”.

  

• Next, release your left-mouse button. Your mouse pointer will change back into to a horizontal double-arrow and a duplicate black column border line will become attached to your mouse pointer.

  You can now move your mouse pointer, in either direction, and the black border line will move together with your mouse pointer.

  

• Next, select an appropriate position for the new column border and click on it. The new column border will now appear in the selected position.

  

About Pages

Page Structure

Pages have a hierarchical tree structure that you will probably already be familiar with.

Sub-pages or child pages can be created and there is no limitation on the number of sub-page levels.

Magnolia refers to pages, including their sub-pages, as a node and you may see this term in some of the error and warning dialog boxes. A node could refer to a single page with no sub-pages, a top-level page and its sub-pages, or a mid-level page and all its pages on lower levels.

The content of the small square to the left of the page icon indicates whether:

• Plus sign ( + ): the page has sub-pages;

• Minus sign ( - ): the page has sub-pages that are displayed; or

• Period ( . ): the page does not have sub-pages.

To expand or collapse a page that has sub pages, click within the small square and the sub pages will either appear or be hidden.

Page Names

You may give your pages any page name that you choose to.

Page names may include letters, numerals and/or an under-score (_), but certain keyboard characters are disallowed.

The disallowed characters are: ampersand ( & ); asterisk ( * ); at ( @ ); back quote ( ` ); back slash ( \ ); braces ( {} ); brackets ( [] ); carat ( ^ ); close brace ( } ); close bracket ( ] ); close parenthesis ( ) ); colon ( : ); comma ( , ); curly braces ( {} ); dollar ( $ ); double quote ( " ); equal ( = ); exclamation point ( ! ); forward slash ( / ); greater than ( > ); less than ( < ); open brace ( { ); open bracket ( [ ); open parenthesis ( ( ); parenthesis ( () ); percent ( % ); pipe ( | ); plus ( + ); pound or hash ( # ); quote ( " ); semi colon ( ; ); single quote ( ' ); slash ( / ) and tilde ( ~ ).

If you inadvertently do include a disallowed character, Magnolia will substitute it with a dash (-). This will also happen if you include a blank space.

Magnolia uses the page name to create URLs for your web pages, so bear this in mind when choosing an appropriate name.

How to name new pages and rename current ones is dealt with in Creating New Pages - Naming Pages.

Page Title

Like page names, you may give your pages any title that you choose. The title may be completely different from the page name and there are no disallowed characters.

If you do not later make appropriate changes in the Editing window, Magnolia will use your page title:

• As the main heading of your web page;

• As the navigation title In the navigation bar of your web page; and

• In the browser titles and window tiles of your web page.

Bear this in mind when choosing an appropriate title.

How to insert a title into a new page or to modify the title of a current page is discussed in Creating New Pages - Inserting a Page Title.

Page Templates

All web pages in Magnolia are based on templates.

There are a number of samples that come with the default installation and it is possible to create new ones.

For normal web pages you can choose between a plain text, single-column and a two-column template. Sample templates are also provided for mail, forms and search pages.

The screenshot below is a web page based on the sample two-column template.

Using the different templates is dealt with in Creating New Pages - Selecting a Template.

Page Content Elements

Each web page is made up of a number of content elements. For most web pages there is a header and footer section, a navigational bar or column on the left-hand side, and one or more content columns to the right of the navigation bar.

Within each content column, it is possible to create a virtually unlimited number of paragraphs or distinct content areas. Paragraphs are inserted sequentially from top to bottom, but it is possible to change the sequence by moving them. Adding paragraphs and Moving paragraphs are discussed in individual sections.

The default installation of Magnolia contains a number of different sample paragraph types including the:

• Text and Image paragraph;

• Editor paragraph;

• Link paragraph;

• Table paragraph; and

• Download paragraph.

These different paragraph types allow you to easily include different types of content on your pages.

The screenshot below demonstrates a few of the sample paragraphs that are available.

Failing later amendment in the Editing window, some page elements, such as the titles in the navigation bar and the main page heading, will be created from the information you provide in AdminCentral. Others, such as the header, content paragraphs and the footer are created in the Editing window which is accessed from Admin Central. Working in the Editing window is discussed in detail in Working with Web Content.

Viewing Pages

Pages can be viewed at any time and you can monitor your work in almost real time as you go along.

Pages can be viewed by simply opening them in the Editing window and previewing them. This is discussed in Opening existing pages and Previewing pages.

Keyboard Shortcuts

Magnolia contains its own set of commands which vary from workspace to workspace and can be activated by using right-clicking with your mouse. For this reason, when working in some areas of Magnolia, the normal right-mouse commands that you may be familiar with, such as copy and paste, will not work. However, the associated keyboard shortcuts in Windows do work, and you may want to use these.

Managing Pages

Pages are created and managed in AdminCentral and their actual page content is added and modified in the Editing window.

This section deals with managing pages in AdminCentral. Adding and modifying the content of web pages is fully discussed in Working with Web Content.

Opening Pages

Existing pages are opened using the Open page command which is available in both the command bar, at the bottom of the workspace area, and in the command menu, which is activated by right-clicking with your mouse.

There are four different ways to open an existing page.

To open a page, do any of the following:

• Select the page that you would like to open by clicking on any of the elements in the page row. When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

• Next, either:

• Click on the Open page button in the command bar at the bottom of the workspace area; or

  

• Right-click anywhere in the workspace area, to activate the command menu, and then click on the Open page command in the command menu; or

  

• Alternatively, without initially selecting a particular row, point to and right-click on any of the page elements in the row of the page that you would like to open.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Open page command in the menu.

  

• As a further alternative, simply double-click on the page icon to the left of the page name.

  

When you click on the Open page command or double-click on the page icon, the page will open in a new tab or window in your browser. This window is referred to as the Editing window.

In the Editing window you will be able to preview and modify the page.

Working in the Editing window is fully discussed in Working with Web Content.

Creating New Pages

Web pages are made up of a number of elements or components. Some of these originate in AdminCentral, while others are added in the Editing window.

The elements which are added in the Editing window are discussed in Working with Web Content. This section deals only with the elements added in AdminCentral.

In AdminCentral, there are four essential steps when creating new pages:

• Create the page;

• Name the page;

• Insert a page title; and

• Select a page template.

These elements are discussed in the sections that follow.

Creating the Page

The procedure for creating main or top-level pages differs slightly from that of creating sub-pages. The major difference is that when creating a main page, no current page should is selected in the workspace area, whereas when creating a sub-page, a higher-level page should be selected.

The difference between a main page and a sub-page in is highlighted in the screenshot below.

Creating Main pages

There are three ways to create a new main or top-level page.

To create a new main page, do any of the following:

• Without highlighting a specific page, click on the New page button in the command bar at the bottom of the workspace area; or

Only the New page and Refresh command buttons will be clearly visible and active in the command bar because these commands are not page-specific.

• Without highlighting a specific page, right-click anywhere within the workspace area and select the New page command from the command menu that appears; or

  

• Right-click within the small square next to the page icon of any main page.

  

  Next, select the New page command from the command menu that appears.

  

  If you right-click on any of the page elements in a specific page row, that page will be selected, and a sub-page and not a main page will be created.

Your new page, presently named “untitled”, will appear at the very bottom of the navigational tree.

Once your page has been created, you will be able to move it to a more appropriate location in your page structure.

How to move pages is discussed in Moving Pages.

Creating Sub-pages

There are three different ways to create a new sub-page.

To create a new sub-page, do any of the following:

• Select the higher-level page that you would like your new page to be a sub-page of, by clicking on any of the elements in the page row. When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

• Next, either:

• Click on the New page button in the command bar at the bottom of the workspace area; or

  

• Right-click anywhere in the workspace area, to activate the command menu, and then click on the New page command in the command menu; or

  

• Alternatively, without initially selecting a particular row, point to and right-click on any of the page elements in the row of the higher-level page.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the New page command in the menu.

  

Your new page, presently named “untitled” will appear as a sub-page of the higher-level page at the bottom of the list of the current sub-pages.

Once your page has been created, you will be able to move it to a more appropriate location in your page structure.

How to move pages is discussed in Moving Pages.

If you create one or more pages directly after each other, Magnolia will add sequential numerals, starting with “0”, at the end of the word “untitled” so that they can be easily identified, until such time as you name these new pages.

Naming Pages

Page names appear in the first column of the workspace area, headed Page.

New pages can be named, and the names of current page changed, by simply inserting a new or different name.

To change the name of a new page from “untitled”, or to rename a current page:

• First double-click on the current page name.

  

• A white text box containing the current page name will appear.

  In this text box, highlight the current page name;

  

• Next, insert a new name, by typing it in the text box;

  

• After you have inserted your new page name, press the Enter key on your keyboard to save it. The window will reload and your page will now bear the new name that you have assigned to it.

Magnolia uses the page name to create the URL of your web page, so do try to be as specific as possible when naming your page.

For more information about page names and permissible characters, please refer to About Pages - Page Names (link).

Inserting a Page Title

Page titles appear in the second column of the workspace area, headed Title.

A title can be inserted for new pages, and the titles of current page changed, by simply inserting a new or different title.

When you first create a page, or if a current page has no title, there will be a dash ( - ) in the title column of the page row.

To insert a title for a new page, or to change the title of a current page:

• First double-click on the dash, in the case of a new page, or on the current page title, if there is one;

  

• If the page currently does not have a title, a blank white text box will appear. If the page currently does have a title, a white text box containing the current title will appear;

• In this text box, highlight the current title, if any and insert a new title by typing it in the text box;

  

• After you have inserted your new page title, press the Enter key on your keyboard to save it. The window will reload and your page will now bear the new title that you have assigned to it.

  

The page title can be completely different from the page name.

Page titles are important as Magnolia will, by default, use the title created in AdminCentral as the main title of your web page, in navigational menus, and in window and tab headings, unless you later change these in the Editing window. Changing these elements is fully discussed in Working with Web Content.

Unlike page names, there are no disallowed characters for page titles. For more information about page titles, please refer to About Pages - Page Titles.

Selecting a Template

All pages created in the Website workspace are based on a template.

There are a number of built-in sample templates in the default installation of Magnolia. The templates available in your specific installation may be different, but you should have no difficulty adapting the illustrations and examples to your circumstances.

While creating a new page adds a new node to your website, the template you select specifies the way in which your web page will be displayed.

The template attached to each page appears in the fourth column of the workspace area, headed Template.

When you create a new main page, Magnolia will, by default, select the plain text template. When you create a new sub-page, the template attached to the higher level page will be selected by default.

To select a new template:

• Double-click on current template name in the template column;

  

• A drop-down box surrounding the current template name will appear. Click on the down-arrow on the right-hand side of this box;

  

• A drop-down menu, listing all the available templates, will appear. Select a new template from the available options by clicking your selection.

  

• The new template that you selected will now appear in the template column.

  

The following screenshots are of the sample one-and two-column templates in preview view.

One-Column Template

Two-Column Template

There are a number of other sample templates available in the default installation.

The sample Form Page and Search templates are discussed in Creating a Form and Creating a Search Page respectively.

The Sitedesigner: Content and Layout templates, as well as the sample Developers Showroom template, relate to web design and are therefore beyond the scope of this manual, and will not be dealt with.

Editing Pages in Admin Central

You can edit the page name and title of any page in AdminCentral by double-clicking on the current name or title and inserting an amended one into the text box which appears. This is fully discussed in Naming Pages and Inserting a Page Title.

You can also change the template associated with any current page in AdminCentral by selecting a new template in the template column. This can be done at any stage, even after content has been added in the Editing window.

If, for example, you change a page based on the two-column template to one based on:

• The one-column template, the content in the second column will simply not be displayed. Magnolia, however, retains this information and if you were to again change back to the two-column template, the content in the second column would once again be displayed; or

• The Form page template, you will then be able to additionally add form paragraphs to the page; or

• The Search template, the search function will appear at the bottom of the page, but the original paragraphs will remain unaffected.

Page Status

The page status of each page is indicated in the third column of the workspace area, headed Status.

The page status refers to whether, or not, a page has been activated, i.e. published to a public instance.

There are three possible indicators:

• Red: the page has not been activated or has been de-activated;

• Green: the page has been activated; and

• Orange: the page has been activated, but has been modified since its last activation.

The status indicator is inserted automatically and can only be changed by either activating or deactivating the file or folder. This is fully discussed in Activating and De-activating Pages.

Page Modify Date

The page modification date of each page in listed in the fifth column of the workspace area, headed, Mod. Date.

Each time a page is modified in any way, Magnolia records the date and time of the change and updates the information in the Mod. date column. This information is inserted automatically and cannot be changed in the workspace area.

The page modification date is different from the page version date. New versions of a page are only created and dated only on activation of the page, whereas the page modification date is updated each time a change is made to the page. Page versions are fully discussed in Page Versions.

Copying and Positioning Copied Pages

It is possible to duplicate any on the existing pages in AdminCentral.

Pages are copied using the Copy page command which is available in the command menu.

Copied page can be moved to any location within the page structure by simply dragging the copy of the page and dropping it in its new location.

Copying Pages

To copy a page, either:

• Select the page that you would like to copy by clicking on any of the elements in the page row.

  When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

  Next, right-click anywhere in the workspace area, to activate the command menu, and then click on the Copy page command in the menu; or

  

• Alternatively, without initially selecting a particular page, point to and right-click on any of the page elements in the row of the page that you would like to copy.

  When you point a light blue rectangle will highlight the row, and when you right-click the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Copy page command in the menu.

  

When you click on the Copy page command, Magnolia copies the page and a duplicate page name and icon of the page you are copying, becomes attached to your mouse pointer. This icon will move with your pointer and you can now drag it to the location where you would like the duplicate page to appear in the navigational tree.

Positioning your page is dealt with in the next section: Positioning Copied Pages.

You can copy pages to and from any location in the page structure.

For example, it is possible to:

• Copy a main page and position the duplicate as a sub-page of any other main page, or lower level page, within the page structure; and

• Copy a sub-page or lower level page and position the duplicate as a main page.

When you copy a page:

• The page name of the copied page will be identical to that of the original page name.

  There is one exception to this rule. When the duplicate page is positioned as a main page, an identifying numeral is added to the end of the page name.

  For example, if you copy the “home” page, which is a main page, and position the duplicate page also as a main page, the duplicate will be named “home0”. However, if you position the duplicate page as a sub-page, an identifying numeral will not be added to the duplicate page.

Copy Positioned as Main Page	Copy Positioned as Sub-page

If you make more than one copy of an individual page, and position the copies as main pages, the numerals at the end of the duplicated pages names will be sequential, for example “home1,.2, 3 etc”;

• Sub-pages of the higher-level page will also be copied and the duplicate page will have identical sub-pages linked to it.

• Identifying numerals are only added, if applicable, to the page name of the actual page that is copied. Identifying numerals are not added to the page names of duplicated sub-pages of a main or higher level page;

• The page title of the copied page and all sub-pages will be identical to those of the originals;

• The template attached to the copied page and all sub-pages will be identical to those of the originals;

• The modification date of the copied main page is the date of duplication, but the modification date of the any duplicated sub-pages is the modification date of the original sub-pages. The modification date of the original page/s remains unchanged;

• The content of the copied page and all sub-pages will be identical to those of the originals.

To create the screenshot below, we copied the “getting-started” main page and positioned the duplicate, as a main page, directly below it. The similarities and discrepancies between the original page and the copied page are highlighted.

Positioning Copied Pages

Copied pages may be positioned in any location within your page structure.

Pages are positioned by simply dragging the duplicate page name and icon to the location that you would like copied page to appear in.

When positioning your page there are two options. You can position the copied page either between current pages or as a sub-page of any current page.

The procedure for these two options varies slightly and is discussed in the sections that follow.

Positioning Between Pages

To position a copied page above or below a current file or folder within the page structure:

• Firstly, copy the page;

Using the Copy page command is discussed in detail in Copying Pages.

• Drag the duplicate page name and icon to the position where you would like the duplicate page to appear.

  When you indicate with your mouse pointer to a possible location, a solid line will appear, indicating that you are pointing to a possible location;

  

• Click on the new location.

  

When you click on the new location, the workspace area will reload and your duplicated page will appear in the location that you positioned it in.

The screenshot below shows the page which was copied and positioned in the three previous screenshots, in its duplicate-location.

When positioning a page, if you indicate with your mouse pointer to any location that is not a possible position, a small “no-entry sign” will appear over the page icon, indicating that the position that you have pointed to is not a possible location.

Positioning as a Sub-page

To position a copied page as a sub-page of another page within the page structure:

• Firstly, copy the page;

  

  Using the Copy page command is discussed in detail in Copying Pages.

• Drag the duplicate page name and icon to the page that you would like the copied page to be a sub-page of.

  

  While you are in the process of dragging the duplicate page name and icon, the original page remains highlighted by a darker blue rectangle.

  When you point to the name of the page that you would like the copied page to be a sub-page of, the page row of this page will become highlighted by a lighter blue rectangle. This lighter blue rectangle indicates that you have located a possible location and will only appear when you point to the actual page name and not anywhere else along the page row.

• Point to the page name of the higher-level page and click on the page name.

  

When you click on the higher-level page, the workspace area will reload and your duplicate page will appear as a sub-page of the page that you clicked on.

The screenshot below shows the page which was copied and positioned in the three previous screenshots, in its duplicate-location. The duplicate page appears at the bottom of the list of current sub-pages.

When positioning a page, if you indicate with your mouse pointer to any location that is not a possible position, a small “no-entry sign” will appear over the page icon, indicating that the position that you have pointed to is not a possible location.

Once you have copied and positioned your page, you can begin to rename your page, insert a new title and select a template. These topics are fully discussed in Creating New Pages.

Moving and Positioning Moving Pages

It is possible to move any on the existing pages in AdminCentral.

Pages are moved using the Move page command which is available in the command menu.

Page can be moved to any location within the page structure by simply dragging the page from its old location and dropping it in its new location.

Moving Pages

To move a page, either:

• Select the page that you would like to move by clicking on any of the elements in the page row.

  When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

  Next, right-click anywhere in the workspace area, to activate the command menu, and then click on the Move page command in the menu; or

  

• Alternatively, without initially selecting a particular page, point to and right-click on any of the page elements in the row of the page that you would like to move.

  When you point a light blue rectangle will highlight the row, and when you right-click the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Move page command in the menu.

  

When you click on the Move page command:

• A solid line is drawn through all the page elements to indicate that the page is in the process of moving; and

• A duplicate of the page name and icon of the page you are moving becomes attached to your mouse pointer.

The page name and icon will move with your pointer and you can now drag the page to another location within the page structure.

Positioning your page is dealt with in the next section: Positioning Moving Pages.

You can move pages to and from any location in the page structure.

For example, it is possible to:

• Move a main page and position it as a sub-page of any other main page, or lower level page, within the page structure; and

• Move a sub-page or lower level page and position the duplicate as a main page.

When you move a page that has sub-pages, the sub-pages will also be moved.

Positioning Moving Pages

Moving pages may be positioned in any location within your page structure.

Pages are positioned by simply dragging the duplicate page name and icon to the location that you would like moving page to appear in.

When positioning your page there are two options. You can position the moving page either between current pages or as a sub-page of any current page.

The procedure for these two options varies slightly and is discussed in the sections that follow.

Positioning Between Pages

To position a moving page above or below a current file or folder within the page structure:

• Firstly, click on the Move page command:

Using the Move page command is discussed in detail in Moving Pages.

• Drag the duplicate page name and icon to the position where you would like the moving page to appear.

  When you indicate with your mouse pointer to a possible location, a solid line will appear, indicating that you are pointing to a possible location;

  

• Click on the new location.

  

When you click on the new location, the workspace area will reload and your page will appear in the location that you moved it to.

The screenshot below shows the page which was moved and positioned in the three previous screenshots, in its new location.

When positioning a page, if you indicate with your mouse pointer to any location that is not a possible position, a small “no-entry sign” will appear over the page icon, indicating that the position that you have pointed to is not a possible location.

Positioning as a Sub-page

To position a copied page as a sub-page of another page within the page structure:

• Firstly, click on the Move page command;

  

  Using the Move page command is discussed in detail in Moving Pages.

• Drag the duplicate page name and icon to the page that you would like the moving page to be a sub-page of.

  

  While you are in the process of dragging the duplicate page name and icon, the original page row remains highlighted by a darker blue rectangle.

  When you point to the name of the page that you would like the moving page to be a sub-page of, the page row of this page will become highlighted by a lighter blue rectangle. This lighter blue rectangle indicates that you have located a possible location and will only appear when you point to the actual page name and not anywhere else along the page row.

• Point to the page name of the higher-level page and click on the page name.

  

When you click on the higher-level page, the workspace area will reload and your page will appear as a sub-page of the page that you clicked on.

The screenshot below shows the page which was moved and positioned in the three previous screenshots, in its new location. The moved page appears at the bottom of the list of sub-pages and the sub-pages of the moved page have also been moved.

When positioning a page, if you indicate with your mouse pointer to any location that is not a possible position, a small “no-entry sign” will appear over the page icon, indicating that the position that you have pointed to is not a possible location.

Deleting a Page

It is possible to delete any on the current pages in AdminCentral.

Pages are deleted using the Delete page command which is available in the command menu.

When you delete a page it will be deleted permanently and it is not possible to restore deleted pages. Any sub-pages of the deleted page will also be deleted.

To delete a page, either:

• Select the page that you would like to delete by clicking on any of the elements in the page row.

  When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

  Next, right-click anywhere in the workspace area, to activate the command menu, and then click on the Delete page command in the menu; or

  

• Alternatively, without initially selecting a particular page, point to and right-click on any of the page elements in the row of the page that you would like to move.

  When you point a light blue rectangle will highlight the row, and when you right-click the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Delete page command in the menu.

  

When you click on the Delete page command, a warning dialogue window will open, advising you that the node or page will be deleted immediately and requesting that you confirm your choice. Click on the OK button to do so.

When you click on the OK button, the workspace area will reload and the deleted page will no longer appear in the page structure.

.

When you delete a page that has sub-pages linked to it, these will also be deleted. If you do not want to delete the sub-pages, first copy or move them to another location before you delete the higher-level page. For more information about copying and moving pages, please refer to Copying and Positioning Copied Pages and Moving and Positioning Moving Pages.

Page Versions

Magnolia has built-in page versioning which automatically saves previous versions of you web pages and allows you to revert to previous versions if necessary.

This functionality can be extremely useful in many instances, for instance when you want to display a different version of a page for a defined period or if you simply decide that you prefer a previous edition.

There is an important difference between saving pages and activating pages. Magnolia will store versions of a page that have been activated, i.e. published to the public instance/s, but does not store a different version of a page each time it is saved. Until such time as you activate a page, it will not be available as a distinct version.

In the default installation of Magnolia, the ten most recent versions of any page are stored.

Page versions are accessed using the Versions command.

The Versions Command

The Versions command is available in the command menu which is accessed by right-clicking with your mouse.

To access previous versions of a page, either:

• Select the page, by clicking on any of the elements in the row.

  When you click on any of the page elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

  Next, right-click anywhere in the workspace area, to activate the command menu, and then click on the Versions command in the menu; or

  

• Alternatively, without initially selecting a particular page, point to and right-click on any of the elements in the page row.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Versions command in the menu.

  

When you click on the Versions command, the Versions window will open.

In the Versions window all the previous versions of the selected page are displayed.

The window is divided into two sections. The page information is displayed in the left-hand section, and the grey panel to the right offers grouping and sorting options.

The page information section contains three columns:

• Name: the page name;

• Date: The date on which the page was activated. By default, the date is displayed in ascending order, with oldest version appearing in the first row and the newest in the last row; and

• User: The user who modified each version of the page.

Grouping Options

In the Versions window on the right-hand side of the workspace, there is a grey panel which offers grouping and sorting options.

This panel can be used to re-group or re-sort the files and offers sorting or grouping options to the second level.

If you click on the User link in the “Group by” section of the panel, the window will reload and the reloaded window will display the information grouped alphabetically by User name. Similarly, if you then click on the Date link in the “Sort Within Group by” section, the information will be sorted first by user name and then by date.

These functions can be extremely useful in identifying a specific version of a page, especially when there are a large number of previous versions to which many users have contributed.

Commands

There is a command bar at the bottom of the Versions window which contains two commands: Show and Restore.

These commands are also available in the command menu which is accessed by right-clicking with your mouse.

Show Command

The Show command allows you to view a particular version of a page. When you click on the Show command, the page will open in a new a tab or window in your browser where you can view the particular page version.

The Show command is available in both the command bar at the bottom of the versions workspace area, and in the command menu which is accessed by right-clicking with your mouse.

To use the Show command:

• Select the page version that you would like to view by clicking on any of the elements in the page row.

  When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

• Next, either:

• Click on the Show button in the command bar at the bottom of the workspace area; or

  

• Right-click anywhere within the blue triangle highlighting the page row , to activate the command menu, and then click on the Show command in the command menu; or

• Alternatively, without initially selecting a particular row, point to and right-click on any of the elements of the row of the version that you would like to view.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Show command in the menu.

  

When you click on the Show command, the page will open in a new tab or window in your browser where you can view the page version.

You can open multiple versions of the page in different tabs or windows at the same time. This allows for easy comparison of the different versions. To open a further version simply select it and click on the show command. The further version will be displayed in a new tab or window.

Restore Command

The Restore command restores the selected page version of as the available version in the Website workspace.

The Restore command is available in both the command bar at the bottom of the versions workspace area, and in the command menu which is accessed by right-clicking with your mouse.

To use the Restore command:

• Select the page version that you would like to view by clicking on any of the elements in the page row.

  When you click on any of the elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

• Next, either:

• Click on the Restore button in the command bar at the bottom of the workspace area; or

  

• Right-click anywhere within the blue triangle highlighting the page row , to activate the command menu, and then click on the Restore command in the command menu; or

• Alternatively, without initially selecting a particular row, point to and right-click on any of the elements of the row of the version that you would like to restore.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Restore command in the menu.

  

When you click on the Restore command, a message dialog window will open advising you that the selected version has successfully been restored as the page version available in the Website workspace. Click on the OK button to complete the action.

If you now open the restored page in AdminCentral by double clicking on the small page icon next to the page name, the selected version of your page will be displayed in the Editing window.

Refreshing the Workspace

The Refresh command allows you to refresh or reload the Website workspace.

While the workspace will reload automatically after using most commands, this added function can be extremely useful. For instance when you have selected or highlighted a page in error and would then like to deselect all pages, or when you have expanded a number of sub-pages and would like to collapse them all simultaneously.

The Refresh command is available in the command bar at the bottom of the workspace area.

To use the Refresh command, simply click on the Refresh button and the workspace window will reload.

While the workspace area is reloading the content will momentarily disappear and you will only see the word “Loading...” in the workspace area.

When the page has refreshed, only main or top-level pages will be displayed in the workspace area.

Activating and De-activating Pages

About Activation

In a typical Magnolia installation, there is a single Author instance and one or more Public instances.

The Author instance allows you to manage, edit and create your content in a separate and non-public environment. Until a page is activated or made public, your amendments will only be visible to other editors and role-players within your organization. Your actual website is in the public instance/s of Magnolia. This separation allows you to edit content at your own pace, and to make it available, or publish it, whenever you would like to.

Activation is the process of publishing your content. Magnolia simply copies pages from the Author instance to the Public instance/s.

Whether your page/s will be activated immediately or not will depend on the modules of Magnolia that are installed and the procedures relevant to your organization.

If the Workflow module is installed, you may have to wait for someone else, typically a publisher, to approve your activation. If the Workflow module is not installed, your pages will be activated immediately.

The activation status of each page is indicated in the Status column of the workspace area.

There are three possible indicators:

• Red: the page has not been activated or has been de-activated;

• Green: the page has been activated; and

• Orange: the page has been activated, but has been modified since its last activation.

Once activated, you can view your pages in the Public instance of Magnolia.

In many instances the page URL of the page in the author instance will correspond to that of the public instance, save for the substitution of the word “Public” for ‘Author” where appropriate.

For example the URLs for the “home” page in the Author and Public instances could be:

• Author instance: http://localhost:8080/magnoliaAuthor/home.html

• Public instance: http://localhost:8080/magnoliaPublic/home.html

If this is not the case in your circumstances, your systems administrator will be able to provide you with further details.

Pages are activated using, either the:

• Activate this page command, which is available in both the command bar and the command menu; or

• Activate incl. sub pages command, which is available in the command menu.

As the name implies, the Activate this page command facilitates the activation of a single page. Whereas the Activate incl. sub pages command allows you to activate multiple pages in a single action.

The use of these commands is fully discussed in Activating Single Pages and Activating Multiple Pages.

About De-activation

Deactivation is the process of removing your content from the Public instance so that it is no longer publically visible on your website. The de-activation process is the exact reverse of the activation process.

When you de-activate a page, Magnolia removes it from the Public instance/s, i.e. from your website/s. If a single page appears in more than one place in your site/s it will be removed from all places. The page will, however, still be available in AdminCentral in the Author instance for further use.

There is a difference between de-activating pages and deleting pages. When you delete a page in AdminCentral, Magnolia will first automatically de-activate it and remove from the public instance. While when you de-activate a page, it will only be removed from the public instance/s, but will still be available in AdminCentral.

Activating Single Pages

Single pages are activated using the Activate this page command which is available in both the command bar and the command menu.

If you activate a page that contains sub-pages, the sub-pages will not automatically be activated. To activate the higher-

To activate a single page, either:

• Select the page that you would like to activate by clicking on any of the elements in the page row.

  When you click on any of the page elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

  Next, either:

• Click on the Activate this page button in the command bar at the bottom of the workspace area; or

  

• Right-click anywhere in the workspace area, to activate the command menu, and then click on the Activate this page command in the menu; or

• Alternatively, without initially selecting a particular page, point to and right-click on any of the elements in the page row of the page that you would like to activate.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Activate this page command in the menu.

  

If the Workflow module is not running on your installation, when you click on the Activate this page command, your page will be activated immediately and the indicator in the Status column in the workspace area will change from red to green.

If the Workflow module is running on your installation, notification of your activation will be sent to the appropriate person in the workflow chain of your organization. In this instance, when you click on the Activate this page command, the Edit window will open.

The Edit window contains a single function area: Activation.

In the Comment section of the Activation area, insert an appropriate comment to accompany your activation request, and then click on the Save button in the bottom right-hand corner of the window.

After you click on the Save button, the Edit window will close and you will be returned to the workspace area which will reload.

Once the workspace area has reloaded, a message dialog window will open advising you that the workflow process is in progress and that the relevant person has been notified. Click on the OK button to close the dialog window.

Activating Multiple Pages

It is possible to activate a higher-level page and all of its sub-pages simultaneously, using the Activate incl. sub pages command, which is available in the command menu.

When you use this command, not only will the sub-pages of main pages be activated simultaneously, but also any sub-pages of sub-pages, i.e. third- and lower-level pages.

Higher-level pages that contain sub-pages are indicated by a plus sign ( + ) in the small square next to the page icon in the Page column of the workspace area.

To activate a multiple pages, either:

• Select the higher-level page that you would like to activate by clicking on any of the elements in the page row.

  When you click on any of the page elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

• Next, Right-click anywhere in the workspace area, to activate the command menu, and then click on the Activate incl. sub pages command in the menu; or

  

• Alternatively, without initially selecting a particular page, point to and right-click on any of the elements in the page row of the page that you would like to activate.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the Activate incl. sub pages command in the menu.

  

If the Workflow module is not running on your installation, when you click on the Activate incl. sub pages command, your page will be activated immediately and the indicator in the Status column in the workspace area will change from red to green.

If the Workflow module is running on your installation, notification of your activation will be sent to the appropriate person in the workflow chain of your organization. In this instance, when you click on the Activate this page command, the Edit window will open.

The Edit window contains a single function area: Activation.

In the Comment section of the Activation area, insert an appropriate comment to accompany your activation request, and then click on the Save button in the bottom right-hand corner of the window.

After you click on the Save button, the Edit window will close and you will be returned to the workspace area which will reload.

Once the workspace area has reloaded, a message dialog window will open advising you that the workflow process is in progress and that the relevant person has been notified. Click on the OK button to close the dialog window.

De-activating Pages

Pages are de-activated using the De-activate command which is available in both the command bar at the bottom of the workspace area, and in the command menu which is activated by right-clicking with your mouse.

Unlike the activation process, when de-activating pages:

• It is not possible to de-activate a single higher-level page without also de-activating the sub-pages. When you de-activate a main or higher-level page, all of the sub-pages will also be de-activated.

• The workflow process is not invoked when using the De-activate command and your pages will be de-activated immediately, regardless of whether the Workflow module is installed or not.

To de-activate a page:

• Select the page that you would like to de-activate by clicking on any of the elements in the page row.

  When you click on any of the page elements, the row will become highlighted by a blue rectangle, indicating that it is selected.

  

  Next, either:

• Click on the De-activate button in the command bar at the bottom of the workspace area; or

  

• Right-click anywhere in the workspace area, to activate the command menu, and then click on the De-activate command in the menu; or

• Alternatively, without initially selecting a particular page, point to and right-click on any of the elements in the page row of the page that you would like to de-activate.

  When you point a light blue rectangle will highlight the row and when you right-click, the rectangle will darken, indicating that it is selected, and the command menu will appear.

  Next, click on the De-activate command in the menu.

  

When you click on the De-activate command, the workspace area will reload and the status of your page will be indicated de-activated, i.e. the indicator in the Status column will be red in color.

Working with Web Content

Web content is added and amended in the Editing window.

The Editing window is accessed from AdminCentral by simply opening any page.

When you open a page, the page will open in a new tab or window in your browser. This tab or window is referred to as the Editing window.

There are various ways to open a page which are fully discussed in Opening Pages.

The Editing Window

The content of the Editing window looks very similar to an actual web page. The significant difference is that here you can amend and add content to your page while viewing your changes as you work. The Editing window is incredibly powerful and facilitates many possibilities.

The appearance of your web page will depend on the template you select.

Some of the page elements, such as the navigation bar, are defined by the template and cannot be altered, but most elements can be changed.

The Editing window contains a number of green edit bars and function buttons which are extremely simple to use.

The following is a screenshot of a typical Editing window and shows the essential additions.

The use of all of the function buttons is fully discussed in discussed in individual sections that follow. In summary, the:

• Preview button allows you to view your page as it will appear to your site visitors;

• AdminCentral button returns you to the AdminCentral window;

• Properties button allows you to set your page properties;

• Edit button allows you to edit a current paragraph;

• Move button allows you to move or re-position a current paragraph;

• Delete button allows you delete a current paragraph; and

• New button allows you to add a new paragraph.

When you click on any of the Edit buttons a new dialog window, the Edit window, will open. Any reference in this manual to the Editing window refers to the browser window and should not be confused with the Edit window which refers to the smaller dialog window which is accessed from the Editing window.

When working in the Editing window, you can use the navigation bar of the page to navigate to and change any of your pages. It is not necessary to individually reload each page from AdminCentral.

When you click on the Properties, Edit and New buttons the Page properties, Edit and Create new paragraph dialog windows will open respectively. These windows open with a single click on the respective buttons. If you double-click the dialogue window will open twice which could cause some confusion.

Content Paragraphs

In Magnolia, paragraphs can be defined as distinct content areas on a page. Paragraphs are easily distinguishable in the Editing window, as above each distinct area you will see a green edit bar that contains function buttons.

The edit bars of current paragraphs contain Edit, Move and Delete function buttons which allow you to edit the paragraph content, move the paragraph to a different position on the page, and delete the entire paragraph, respectively.

The edit bars of content areas where it is possible to add new paragraphs contain a New button which allows you to create an entirely new paragraph. New buttons appear at the bottom of the content columns of current pages, and at the top of the content columns of new pages.

Previewing Pages

The Preview function button, located in the top left-hand corner of the screen, allows you to preview your page to see exactly how it will appear to your site visitors.

To preview a page, click on the Preview button.

The Editing window will reload and the edit bars and function buttons will no longer be visible. The only addition to the page is a small button containing a double-greater-than sign in the top left-hand corner of the page.

To return to editing mode, click on the double-greater-than sign button and you will be taken back to the Editing window where you can make further changes to your page.

AdminCentral Button

The AdminCentral function button, located in the top left-hand corner of the Editing window, can be used to quickly navigate back to AdminCentral. This function can be extremely useful when you have many windows open simultaneously.

If your browser is set to open a new page in a new window, as opposed to a new tab, when you click on the AdminCentral button you will immediately be taken back to AdminCentral window, where the workspace will reload.

If your browser is set to open new windows in a new tab, you will not be returned directly to AdminCentral tab.

When you click on the AdminCentral button, the AdminCentral window will reload and will see the word “Loading” in place of the words “AdminCentral” in the tab header. To navigate back to AdminCentral, simply click on the tab header.

Saving in the Edit and Page Properties Windows

In the Editing window, when you click on the Properties, New or Edit function buttons, new dialog windows will open.

When you click on the:

• Properties button, the Page properties window will open;

• Edit button, the Edit window will open; and

• New button, either the Create new paragraph window or the Edit window, will open.

The use of these windows is fully discussed in Setting Page Properties, Editing Paragraphs and Adding Paragraphs, but is introduced briefly here merely to demonstrate the use of the Save and Cancel buttons.

The Page Properties window has three different function areas which are accessed by clicking on the function buttons at the top of the window.

The contents of the Edit window varies according to the paragraph type selected and the available function areas differ accordingly. There could be between one and three different function areas. The screenshot below is of the sample Editor paragraph.

In all of these windows, Save and Cancel buttons are located in the bottom right-hand corner of the window.

When working in these windows, it is essential that you save any entries that you make.

To:

• Save your entries click on the Save button; and

• Cancel your entries, click on the Cancel button.

When you click on either the Save or Cancel button, the window will close and you will be returned to the Editing window where your changes will be reflected.

It is only necessary to only click once on either the Save or Cancel buttons. Do this once you have completed all of the entries in all of the function areas. If you click on either of these buttons prior to completing your entries in all function areas, you will need to re-open the Page properties or Edit windows to complete the balance of your entries.

For example, when working in the Page properties window, if you click on the Save button after completing your entries in only the General properties function area, the Page properties window will close and you will need to re-open it to complete your entries in the Meta and Activation areas.

Setting Page Properties

The Properties function button is located in the top right-hand corner of the Editing window and allows you to set individual properties for each of your web pages.

Page properties include, the page header, title, navigation bar content, meta tags and activation details.

To set the properties for your page, click on the Properties button. The Page properties window will open.

At the top of Page properties window there are three function buttons: General properties; Meta and Activation.

Clicking on any of the function buttons will cause the window to reload, allowing you to insert appropriate content in these three different areas.

The function area that is currently active is indicated by a lighter green button and the inactive function buttons remain a darker green.

The manner in which you insert content is mostly self explanatory and varies between typing into text boxes, clicking within a check box and using an upload function that most users will probably already be familiar with.

If you have already set your page properties and would like to edit then, simply re-open the Page properties window and insert your amendments in exactly the same manner as you would do when setting them for the first time.

The three function areas are discussed in the sections that follow.

General Properties Area

The General Properties function allows you to set or amend the main page title, navigation title, content title and header. The function area is divided into corresponding sections.

To access the General Properties area of the Page properties window, click on the General properties button at the top of the window. When the General properties area is active, the General Properties button will be a lighter green that the other function buttons.

Main Title

The main title is the page title or heading which appears at the top of the most prominent content area of your page. Its exact positioning will depend on the template you select.

The page shown in the screenshot above was created using the sample two-column page template which is included in the default installation. In this instance the main title appears at the top of the first content column.

The formatting, font attributes and color of the main title are determined by the template selected and cannot be altered in the Website workspace. While it is possible to alter the template itself, and/or the options offered to editors in this regard, these types of tasks are beyond the scope of this manual.

To include a main title on your web page, simply type it into the Main title text box in the General properties area of the Page properties window.

If you have previously inserted a main title and would like to revert to it, enter the first character/s of the previous title into the main title area and a drop-down box containing all previous titles will appear. You can select a one by clicking on it and it will automatically be inserted into the Main title box. This can be extremely useful when you want to revert to a previous choice or slightly modify one.

If you do not enter a main title in this text box, Magnolia will by default, use the title contained the title column of AdminCentral, and failing such title, the page name in the page column of AdminCentral, as the main title of your page.

When choosing your main page title, bear in mind that it will be used in both the title bar at the top your screen and in the individual window tab headers.

Your main title will also be used by some search engines in their search results, so it is best to keep it under 80 characters and include your keywords, if possible.

Navigation Title

The navigation title is the title of any particular page that appears in the navigation bar of your website.

To include your navigation title, type it into the Navigation title text box in the General properties area of the Page properties window.

You can choose not to display a particular page in the navigation bar at all. Once activated, the page will still be visible and active on your website, but will simply not appear in the navigation bar.

To exclude your page from the navigation bar, check the small square beneath the Navigation title box by clicking within the square and a green tick will indicate your selection.

If you do not enter a navigation title in this text box, Magnolia will by default, use the main title that you entered into the main title text box above.

If you have entered neither a main title nor a navigation title, the title contained the title column of AdminCentral, and failing that, the page name in the page column of AdminCentral, will be used as the navigation title of your page.

When entering a navigation title, try to keep the structure of the template that you are using in mind. If you enter an extremely long navigation title, Magnolia will accept it, but the appearance of your web page may not be to your liking.

Content Title

The Content title text box is included here for the sake of completeness, but has no effect or bearing on the sample templates and for the purposes of this manual is best ignored.

If you enter a content title in this box it will not appear on your web page or affect any other page properties that you may have entered.

The Content title may, however, be a viable option when using templates other than the samples provided in the default installation.

Header Image

You can insert a header image into, or change the current header image of, your page by uploading a new image. Magnolia will accept all of the common image file types.

In order for your page to display attractively you will need to scale your new image to fit in with the design of the template you are working with.

To upload a new header image:

• Click on the Browse button in the Header image section in the General properties area of the Page properties window.

  

  In Windows, the standard File Upload window will open where you can locate your image on your computer.

  

• In the File Upload window, navigate to the location of your new image and either double-click on the file name, or highlight the file name and then click on the Open button at the bottom of the window.

• When you double-click or click on the Open button, you will be returned to the General properties area of the Page properties window. The file path will now appear in the Header image box and the actual file name if the Filename box.

  

• Your new header will appear on your page once you have saved all of your entries in the Page properties window.

You can insert or alternative text for your header image in the alt text box located directly below the Header image section in the General Properties area.

To insert alt text, simply type appropriate text into the box provided.

Alt text is the text that your site visitors will see while images are downloading or when they mouse over an image. It is displayed in a small yellow square when you mouse-over an image and its inclusion is important for search engine optimization purposes and to add a professional finish to your page.

Your header image will automatically be inherited by all new sub-pages that you create for your page.

If you create a new main page you will have to upload your image once again. Depending on the complexity of your page, you may want to copy a page which contains your header in AdminCentral and then delete all of the contents when creating a new main page. How to copy a page in AdminCentral is fully discussed in Copying and Positioning Copied Pages.

Once you have saved your header image, a thumbnail of your image, its dimensions and file name, as well as a Remove file button will appear in Header image section of the General properties area.

To upload a different header image, click on the Remove file button. The window will reload to display empty Header image boxes and the Browse button. You can now upload a different image by following the procedure described above.

Meta Area

The Meta function of the Page properties window allows you to enter the meta tags i.e. the page description and keywords, for your page. These are extremely important for search engine optimization purposes.

To access the Meta area of the Page properties window, click on the Meta button at the top of the window. When the Meta area is active, the Meta button will be a lighter green that the other function buttons.

The Meta area is divided into two sections: Meta description and Meta keywords.

Meta Description

Search engines that use Meta tags will use your meta or page description in their listings on their search results page. This is the portion that appears in the search results below your main title. For this reason, it may be best to keep it under 200 characters and include your important keywords.

To insert your meta description, type it into the Meta description text box in the Meta area of the Page properties window.

Meta Keywords

Keywords are all important when it comes to search engine optimization.

To enter your page keywords, type them, separated by commas, into the Meta keywords text box in the Meta area of the Page properties window.

Activation Area

The Activation function allows you to determine when your page will “go live” on the Internet and be visible to your site visitors, and when, if at all, it will be de-activated and no longer be visible. This can be extremely useful if you are, for example, running a limited promotion or pre-preparing copy for a product to be launched at a later date.

If you would like your page to be permanently and immediately available you can simply ignore this function and follow the normal activation process described in Activating and De-activating Pages.

To access the Activation area of the Page properties window, click on the Activation button at the top of the window. When the Activation area is active, the General Properties button will be a lighter green that the other function buttons.

The Activation area is divided into two sections: Start date and End date.

Start Date

To enter a date for your page to be activated, either:

• Enter the date manually by typing it into the Start date text box in the yyyy-mm-dd format; or

• Click on the Select date button to activate the calendar.

  

End Date

To enter a date for your page to be de-activated, either:

• Enter the date manually by typing it into the End date text box in the yyyy-mm-dd format; or

• Click on the Select date button to activate the calendar.

  

Using the Calendar

When you click on the Select date button in the Start date or End date section, the calendar will appear. The calendar is simple to use and offers many possibilities.

When you point to the different areas of the calendar, the instructions relevant to that particular area will appear in the row at the very bottom of the calendar.

For example, if you mouse over the greater than sign in the second row to the right of the word “Today”, the greater than sign and the small down arrow next to it will both become highlighted, and the instructions in the bottom row will change to “Next month (hold of menu). Following these instructions, if you then click on the greater than sign, the calendar will display the following month, and if you click and hold on the small down-arrow a drop-down menu containing all the months of the year, will appear. You can select the appropriate month from the menu by clicking on it.

All of the different options on the calendar work in exactly the same way and are annotated in the screenshot below.

Once you have located the date you would like to insert in either the Start date or End date text box, click on the selected date and it will automatically be inserted into the appropriate text box in the Activation area of the Page properties window.

Adding Paragraphs

The New function button allows you to add new paragraphs or new distinct areas of content to your page.

In all areas of your page where it is possible to add content you will see a New button on the green edit bar.

Once completed, your new paragraph will be positioned directly below the green edit bar that contains the New button.

If you are creating a new page, the New buttons will appear at the top of the content areas defined by the template.

If you are editing a current page, the New buttons will appear beneath the current paragraphs.

Paragraphs can be moved to a more appropriate position within the same column. How to move paragraphs is fully discussed in Moving Paragraphs.

Once you have added and saved a new paragraph you will then have the option to add a further paragraph directly below it.

To add a new paragraph:

• Click on a New button in the Editing window;

  

• The Create new paragraph window will open.

.

The various paragraphtypes that may be used in any particular content area are listed in the Create new paragraph window;

• Select a paragraph type, by either clicking within the small circle next to, or on the name or description of the appropriate option.

  When you mouse over any of the options, they will become underlined indicating that the hyperlink is active.

  The following screenshot is of the new paragraph options available in the main content area of the two-column template.

  

  The paragraph types that may be used in any particular content area is determined by the page template and the content of the Create new paragraph window will vary accordingly;

• Once you have selected a paragraph type in the Create new paragraph window, the Edit window will open.

  The screenshot below if of the Edit window on the sample Editor paragraph.

  

• Insert your content and define the paragraph properties in the Edit window.

  Inserting content and using the various Edit windows is fully discussed in Paragraph Types.

The paragraph types that are available in the different content areas of the page vary and are determined by the page template. In some areas the template may allow you to choose from a wide range of possible paragraph types, while in other areas you may be limited to perhaps only one type of paragraph.

For example, in the sample two-column template shown in the screenshot below, you can choose from various different paragraphs types in the main content area, but are limited to a simple text paragraph in the right-hand column content area.

If only a single paragraph type is permitted by the template in a specific content area, the Edit window of the permitted paragraph type will open when you click on the New button, and not the Create new paragraph window. The Create new paragraph window is only necessary when you are required to choose between paragraph types.

Inserting content and using the various Edit windows is fully discussed in Paragraph Types.

Editing Paragraphs

The Edit function button allows you to edit current web content.

You can amend the content of your pages as many times as you need to, while reviewing your changes in almost real-time.

In the Editing window there are green edit bars, containing Edit buttons, above all the content paragraphs.

To edit a paragraph:

• Click on the paragraph‚Äôs Edit button and the Edit window will open.

  

  The content of the Edit window varies according to the paragraph type used to create the original paragraph that you are editing.

  For example:

• If the Editor paragraph was originally used to create the paragraph, the Content and Paragraph properties areas will be available in the Edit window; whereas

• If the Text and Image paragraph was originally used to create the paragraph, the Text, Image and Paragraph properties area will be available in the Edit window.

It is not possible to change the original paragraph type using the Edit function.

If you would like to use a different paragraph type, it would be best to first create a new paragraph using the type of your choice. Then, delete the original paragraph and move then new one to the position of the original paragraph on your page. How to add new paragraphs, delete current paragraphs and move paragraphs are fully discussed in Adding Paragraphs, Deleting Paragraphs and Moving Paragraphs.

Using the different paragraph types is fully discussed in Paragraph types.

Deleting Paragraphs

The Delete function button allows you to delete an entire paragraph with a single click of your mouse.

In the Editing window, the green edit bars of all current paragraphs each contain a Delete button.

To delete a paragraph:

• Click on the Delete button of the paragraph that you would like to delete.

  

• You will receive a warning message asking you to confirm your choice. Do so by clicking on the OK button.

  

• Once you click on the OK button the paragraph will permanently be deleted from your page.

  It is not possible to restore a paragraph after it has been deleted.

Moving Paragraphs

The Move function button allows you to move, or change the sequence of, paragraphs within the same content column.

Paragraphs are moved by dragging them from their current location and dropping them in a new one.

You can move a paragraph from any higher to any lower position, and vice versa.

In the sample templates, it is not possible to move paragraphs between content columns from. For example, you cannot move a paragraph in the main content area to the second-column content area.

In the Editing window, the green edit bars of all current paragraphs each contain a Move button.

To move a paragraph:

• Firstly, click on the Move button of the paragraph that you would like to move.

  The entire edit bar and all the function buttons will become a lighter shade of green and a green rectangle will become attached to your mouse pointer. This rectangle will move with your pointer;

  

• Next, drag the green rectangle to the position on your page where you would like to insert the moving paragraph;

  

  When you mouse-over any of the edit bars of the other paragraphs on the page, the words “Move the paragraph selected above this one” will appear within the green rectangle, indicating a possible position;

  

• When you have located a suitable position for your paragraph, click on the edit bar of the paragraph above which you would like your moving paragraph to appear;

  

• When you click on the edit bar, your paragraph will move to its new position.

  The screenshot below shows the paragraph moved in the previous four screenshots in its new position.

  

Editing the Footer

The Edit Footer function button allows you to add additional information to the footer.

The Edit Footer button is located below the last paragraph in the main content area of the Editing window.

When you create a new page the footer section will be empty except for the “Magnolia Powered” branding which appears on the bottom right of the footer section of the page.

To insert further information into the footer section:

• Click on the Edit Footer button at the bottom of your page and the Edit window will open.

  

  In the Edit window there is a single text box, headed Additional footer line.

• Insert your information into the Additional footer line box and then click on the Save button in the bottom right-hand corner of the window.

  

• When you click on the Save button, the Edit window will close and you will be returned to the Editing window where the additional text will appear in the footer section of your page.

  

If you are familiar with HTML, you can, for example, reformat your text or insert links, by adding some simple code.

The following sample code will center the additional footer line and insert links for both “Magnolia International” and the contact email address.

“<center><a href="http://www.magnolia-cms.com" target="_blank">Magnolia International Ltd.</a> Maiengasse 30, 4056 Basel, Switzerland Tel +41 61 228 9000 (9AM-5PM GMT+1) <a href="mailto:info@magnolia-cms.com">info@magnolia-cms.com</a></center> <br />”

You can adapt this code by making appropriate changes to suit your circumstances.

Once you have amended the code, insert the code into the Additional footer line box in the Edit window.

Your additional footer line will now be centered and contain a URL and email link.

Creating a Form

With Magnolia creating forms is simple and there is no need for additional scripts or other complexities. Forms can be extremely useful in many instances, such as when setting up a Contact us page or when conducting a survey.

The default installation of Magnolia includes a sample form template, named Form page, which is available in the Template column in Admin Central.

The Form template, which has two content columns, offers the option to include paragraph types that are suitable for forms in the main content area. Form paragraphs cannot be included in the right-hand column content area.

The form template is almost identical to the two-column template. The only difference is that the form template allows you to include form paragraphs, in addition to the paragraphs available in the two-column template, and to set form properties.

The screenshot below shows a page based on the form template.

You can convert a current page into a form page by simply selecting the Form page template in AdminCentral.

To create a new form page:

• Create a new Page in AdminCentral and choose the sample Form page template.

  

  How to create a new page and select a template is fully discussed in Creating New Pages and Selecting a Template.

• Next, open your new page in the Editing window.

  

  There are various ways to open a page which are fully discussed in Opening Pages;

  In the Editing window, the form template appears almost identical to the two-column template, with the exception that with the form template there is a Form Properties button, in addition to the Page Properties button, in the top right-hand corner of the window.

  The form properties function allows you control the information collected by your form;

  In the Editing window you can add form paragraphs and set the form and page properties. These topics are dealt with below in Setting Form Properties; Setting Page Properties and Adding Form Paragraphs.

Setting Form Properties

The Form Properties function button allows you to determine precisely what will happen to information provided by a site visitor after they submit the form.

To set the form properties:

• Click on the Form Properties button in the top right-hand corner of the Editing window;

  

• The Edit window will open;

  

• The Edit window contains a single function area, Input field which is divided into numerous sections:

• In the Recipients and Cc recipients text boxes, insert the email address/es of the people who should be advised whenever a site visitor submits the form.

  

  An email containing the information provided in the form will be sent to each recipient.

  If you would like to insert multiple email addresses in either box they should be entered on separate lines using the Enter key on your keyboard;

• In the Reply to recipients text box, insert an accompanying message to the recipients of the form information. This message will be included in the email sent to the recipients;

  

• In the Sender text box, insert the email address that should be displayed in ‚ÄúFrom:‚Äù section in the header of the email.

  

  In order to identify emails emanating from your form, it is preferable to set up a unique email address for this purpose. The manner in which you do this is beyond the scope of this manual and you may need to contact your systems administrator for assistance in this regard.

  Depending on the configuration of your server, the sender email address may be required to be hosted on the server itself;

• In the Subject text box, insert a subject line for your email. The inserted content will appear in the subject line of your email.

  

  The Subject text box offers a further way to identify emails emanating from your form and is used in exactly the same way as the subject line in all other email programs. If you have multiple forms on your site which are all sent from the same sender email address, the subject line can be used to identify emails emanating from a specific form.

• In the Mail server text box, insert the details of your mail server.

  

  Emails emanating from your form are sent through your mail server which Magnolia needs to be able to identify.

• The Alert text for mandatory fields text box allows you to create a unique error dialog window that will alert your site visitors that they have not filled in all the mandatory fields on your form.

  In this text box, insert the text that you would like to appear in the alert window.

  

  The actual text that you insert into this box will automatically be included in the alert window.

  

  If a site visitor fails to complete any of the mandatory fields, when they click on the submit button of your form they will receive a message advising them of this.

  Inserting mandatory fields is discussed in the next section: Adding Form Paragraphs;.

• The Page redirected to after submission box allows you to direct your site visitor to a new page after they have submitted their form. You may, for example, want a Thank you page to appear once your visitor has clicked on the submit button. In order to do this, you will first need to set up a new page and you can find detailed information about how to do this in Creating New Pages.

  To redirect you visitor to your new page click on the Browse button next to the Page redirected box.

  

  A new window, displaying your page structure, will open.

  Locate your redirection page in this window, click on it to highlight it, and then click on the OK button in the bottom right-hand corner of the window.

  As soon as you highlight the file, its file path will appear in the last box of the window

  

  When you click on the OK button, you will be taken back to the Edit window where the file path of the selected page will appear in the Page redirect box.

  

  On you website, when a site visitor successfully submits your form, they will be directed to the selected page.

  

• The Track mail option allows you to create a record of the emails in a csv file. If enabled, a csv file will be written to the Magnolia log folder.

  To enable the Track mail option, click within the small square next to it and a green tick will indicate your selection.

  

  If you are in any doubt as to whether this option is required in your circumstances, we suggest that you leave it unchecked or contact your systems administrator in this regard. Whether, or not, this option is enabled, will in no way affect the functioning of your form, and you can safely ignore it.

Setting Page Properties

The procedure for setting page properties for forms and standard web pages is identical.

The function of the Page Properties button in the Form template is identical to the function of the Properties button in the one- and two column templates and is fully discussed in Setting Page Properties.

Adding Form Paragraphs

The Form page template offers the option to include paragraph types that are suitable for forms in the main content area of your page.

In addition to the paragraph types available in the main content area of the one- and two-column templates, there are three further paragraph types which relate specifically to forms. These are the sample Text Field, Selection and Submit button paragraphs.

To insert form paragraphs:

• In the Editing window, click on the New button in the main content of your form page;

  

• The Create new Paragraph window will open.

  

  In the Create new paragraph window, in addition to the paragraph types available in the one- and two-column templates, there are three new sample paragraph types that relate specifically to forms at the bottom of the window. These paragraph types are Text field; Selection and Submit button.

  

  These paragraphs allow you to insert text fields of varying sizes, check boxes, radio buttons, select boxes and submit buttons.

• Select a paragraph type, by either clicking within the small circle next to, or on the name or description of the appropriate option.

  When you mouse over any of the options, they will become underlined indicating that the hyperlink is active.

  

• Once you have selected a paragraph type in the Create new paragraph window, the Edit window will open.

  The screenshot below if of the Edit window on the sample Form: Text field paragraph.

  

• Insert your content and define the paragraph properties in the Edit window.

  Inserting content and using the various Edit windows is fully discussed in Paragraph Types: Form Text Field Paragraph; Form Selection Paragraph and Form Submit Button Paragraph.

To demonstrate the possible uses of some of the form paragraph types, we created a sample contact us page which is shown in the screenshot below.

Creating a Search Page

With Magnolia it is really simple to create a search page and there is no need for any specific programming or design knowledge. The specifics of the search function are determined completely by the template and there is no need to define its functionality.

The default installation of Magnolia includes a sample search template, named Search, which is available in the Template column in Admin Central.

The Search template, which has two content columns, offers the option to include a search box at the bottom of the main content area of a page. In the sample templates it is not possible to include a search function in the right-hand column content area.

The search template is almost identical to the two-column template, with the only addition being the search function. All of the paragraph types available in the two-column template are also available in the search template.

The screenshot below shows a page based on the search template template.

You can convert a current page into a form page by simply selecting the Search template in AdminCentral.

To create a new search page:

• Create a new Page in AdminCentral and choose the sample Search template.

  

  How to create a new page and select a template is fully discussed in Creating New Pages and Selecting a Template.

• Next, open your new page in the Editing window.

  

  There are various ways to open a page which are fully discussed in Opening Pages;

  In the Editing window, the search template appears almost identical to the two-column template, with the exception that the search function appears between the footer section and the content area for new paragraphs.

  In the Editing window you can add new content paragraphs in the second column content area and above the search function in the main content area, and set the page properties. These topics are fully discussed in Adding Paragraphs and Setting Page Properties.

Search Results

The search function works in exactly the same way as most others, that you are probably already familiar with, do.

A site visitor can enter a search term into the search box and then click on the Enter key.

After a visitor has clicked on the Search button, your website will return a list of all web pages that contain the search term, beneath the search box. The search term will be highlighted within the results.

The search results include:

• The page title;

• An extract from the content of the page, if the term is included in the content area;

• A link to the page; and

• The date on which the page was last modified.

.

Paragraph Types

General

Magnolia has built-in paragraph types that allow you to include, otherwise complicated types of web content, on your pages with ease.

In Magnolia, paragraphs can be defined as distinct content areas on a page. Paragraphs are easily distinguishable in the Editing window, as above each distinct area you will see a green edit bar that contains function buttons.

The paragraph types discussed in this section are all included as samples in the default installation of Magnolia.

The format, style, options available and types of paragraphs available may vary considerably from installation to installation. It is beyond the scope of this manual to provide guidance on paragraph types that are unique or specific to a particular installation. If you experience any difficulties adapting the contents of this section to your circumstances, please contact your systems administrator for advice.

The way that you create the different paragraph types, and the available options in the Edit window each type, are discussed in detail in the individual sections that follow.

There are five sample paragraph types, suitable for normal web pages. These are the:

• Text and Image Paragraph;

• Editor Paragraph;

• Text Paragraph;

• Link Paragraph; and

• Download Paragraph.

There are three paragraph types, suitable for form pages. These are the:

• Form Text Field Paragraph;

• Form Selection Paragraph; and

• Form Submit Button Paragraph.

How to add new paragraphs to a page, edit current paragraphs and save the content of a new or edited paragraph are fully discussed in Adding Paragraphs, Editing Paragraphs and Saving Contents in the Dialog Windows.

For the sake of completion the procedure for adding new paragraphs and editing current paragraphs are briefly summarized again here.

To add a new paragraph:

• In the Editing window, click on any New button and the Create new paragraph window will open;

• In the Create new paragraph window, select the paragraph type that you would like to add to your page.

  You can select the paragraph type by either clicking within the small circle next to the paragraph type or by clicking on the name of the paragraph.

  When adding a new paragraph, the paragraph types available in the Create new paragraph window depend on the limitations, if any, determined by the template that you are working on;

• Once you have selected your paragraph type, the Edit window of that particular paragraph type will open.

To edit a current paragraph:

• In the Editing window, click on the Edit button of the paragraph you would like to edit; and

• The Edit window of the original paragraph will open.

The paragraph type is determined when the paragraph is first created and the type cannot be changed in the Edit window, but the contents can be edited.

The Edit Window

Page content for the different types of paragraphs is inserted in the Edit window.

The Edit window of each paragraph type is unique to that specific paragraph type, but certain function areas within the Edit window are common to more than one paragraph type. For example the Paragraph properties function area is available in all sample paragraphs, with the exception of the Text paragraph

The Edit windows of the various paragraph types are separated firstly into distinct function areas which are accessed by clicking on the function buttons at the top of the Edit window. The active function area is indicated by a lighter green function button and the inactive areas by darker green function buttons. When you click on any of the function buttons the Edit window will reload and the options relevant to the new function area will be displayed.

Within each function area there are distinct sections which allow you to insert, and/or control the behavior of, your content.

In the bottom right-hand corner of each function area there are Save and Cancel buttons which allow you to either save or cancel your entries.

The screenshot below is of the Edit window of the Text and Image paragraph and highlights the points made above.

When you click on either the Save or Cancel button, the Edit window will close and you will be returned to the Editing window where your entries or changes will be reflected. It is therefore best to only click on either of these buttons once you have completed your entries in all of the different function areas. A single click on either button will save or cancel all of your information at the same time. If you click on either button after each entry, the Edit window will close, returning you to the Editing window, and you will have to open the Edit window once again to complete the rest of your entries.

The Cancel button cannot be used to cancel a single entry. When you click on the Cancel button all of you unsaved entries in the Edit window will be lost.

Text and Image Paragraph

The sample Text and image paragraph allows you to include a title, body text and an image in your paragraph.

The Text and Image paragraph is very similar to the sample Editor paragraph which is discussed in the next section. The essential difference between the two paragraphs is that the Editor paragraph allows you more freedom as it contains a full text editor, whereas the Text and Image paragraph is slightly limiting with regard to text fonts and image placement. The detailed differences between these two paragraph types will no doubt become apparent once you have worked through both sections.

There are three function areas in the Edit window of the Text and Image paragraph: Text; Image and Paragraph Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Text area is active on opening the Edit window.

Text Area

The Text function area of the Edit window is divided into the Title section and the Text section:

• In the Title section, insert your paragraph title by simply typing it into the text box.

  

  The formatting of your paragraph title is determined by the template that your page is based on. This helps to maintain uniformity on your website.

• In the Text section, insert the body text of your paragraph by typing it into the box and formatting it using the text editor.

  

  You have more flexibility with the body of your paragraph than with the title, as the Text section contains a text editor.

  

  The commands, depicted by the symbols in the screenshot of the text editor above, from left to right, are:

• Bold;

• Italics;

• Insert special character;

• Insert/edit hyperlink;

• Remove link;

• Copy;

• Paste;

• Paste as plain text;

• Paste from Word;

• Numbering;

• Bullets;

• Undo; and

• Redo.

  With the possible exception of the Paste commands, you will no doubt already be familiar with most of the commands in the text editor. They function in exactly the same way as those in most work processing programs do.

  The Paste from Word command allows you to paste directly from a Microsoft Word document, while choosing to ignore or retain font and style definitions. When you click on this command, a dialog window will open and you should follow the instructions in this window.

  The Paste as plain text command can be extremely useful if you are copying content from other programs because it essentially removes all previous formatting, allowing the underlying uniform template-based formatting to display on your page. When you click on this command, a dialog window will open and you should follow the instructions in this window.

Image Area

The Image function allows you to upload an image file and insert it into your paragraph.

To access the image function area, click on the Image function button at the top of the Edit window. The window will reload to display the appropriate options for uploading your image.

The Image function area of the Edit window is divided into three sections: Alt text, Alignment and Image.

• In the Alt text section, insert your alt text into the Alt text box.

  

  Alt text is the text that your site visitors will see while images are downloading or when they mouse over an image. It is displayed in a small yellow square when you mouse-over an image and its inclusion is important for search engine optimization purposes and to add a professional finish to your page.

• The Alignment section allows you to select whether your image will be displayed to the left or to the right of your text.

  In the Alignment section, select the appropriate option by clicking within either of the small circles and the radio button will indicate your choice.

  

• The Image section allows you to upload the image to be inserted into your paragraph.

  To upload your image:

• Click on the Browse button in the Image section;

• In Windows, the standard File Upload window will open where you can navigate to your image on your computer.

  

  Once you have located your image, highlight it, and then click on the Open button in the bottom right-hand corner of the window. You can also simply double-click on the file name.

• Once you click on the Open button, the File Upload window will close and you will be taken back to the Magnolia Edit window.

  The file path of your image and its file name will now appear in the Image section of the window.

  

  Once you have saved the contents of the Edit window, your image it will be displayed in your paragraph in the position that you selected.

  

  If you edit the paragraph at a later stage, a thumbnail of your image, its dimensions and file name, and a Remove file button will be displayed in the Image area of the Edit window.

  

  To upload a new image, click on the Remove file button. The current image will be removed and the window will reload to display the Browse button which allows you to navigate to and upload a new image.

Paragraph Properties Area

The paragraph properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

To access the Paragraph properties area, click on the Paragraph properties button at the top of the Edit window and the window will reload to display the appropriate options for setting your paragraph properties.

The Paragraph Properties function area of the Edit window is divided into two sections: Line and Spacer.

• The Line section allows you to choose to draw a line above your paragraph.

  To select this option, click within the small square and a green tick will appear, indicating your selection.

  

• The Spacer section allows you to select the amount of white space that will appear below your paragraph.

  There are three options: No spacer; Single blank line and Double blank line. To access these options click on the small down-arrow in the Spacer area and a drop-down box will appear. Select the appropriate option by clicking on it and your choice will appear in the Spacer box.

  

Viewing your Paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of any area of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Editor Paragraph

The sample Editor paragraph has a built in full text editor which allows you to fully control the text and formatting of your paragraph, upload images and flash files, insert tables and to edit your HTML code.

The major difference between this paragraph and the Text and Image paragraph is that with the Editor paragraph your paragraph content, including your title and images, is entered and formatted together using the full text editor in the Content section of the Edit window. The Content section replaces the separate Text and Image areas of the Text and Image paragraph. The Paragraph properties function is common to both paragraphs.

There are two function areas in the Edit window of the Editor paragraph: Content and Paragraph Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Content area is active on opening the Edit window.

Content Area

The Content area of the Edit window contains a single section, headed Content. The full text editor is included in this section and offers many exciting functions.

To insert your paragraph content, simply enter it into the Content section and use the full text editor to enhance it, and to add features, such as tables, images and flash files.

Using the full text editor you can vary the style, font and color of your text, upload images and flash files, insert tables and edit the source code of your page.

In the screenshot below we have labeled the command buttons that facilitate all of this.

The following is a full list of the commands available in the full text editor. They are depicted by the symbols in the screenshot below, starting in the first row from left to right and then continuing in the second row from left to right:

• Bold;

• Italics;

• Insert special character;

• Insert/edit hyperlink;

• Remove link;

• Copy;

• Paste;

• Paste as plain text;

• Paste from Word;

• Align left;

• Align center;

• Align right;

• Justify;

• Numbering;

• Bullets;

• Undo;

• Redo;

• HTML mode;

• Select style;

• Select font; and

• Select color.

You will no doubt be familiar with the use of most of the commands as they function in exactly the same way as those in most other word processing programs. When you click on any of the more complex commands, dialog windows containing clear instructions will open, and guide you through the process. Follow the prompts and options contained in these dialogs.

If you click on the Source button on the far right-hand corner of the editor, you will be able to view and edit the HTML code of your page.

Paragraph Properties Area

The paragraph properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

The options available in the Paragraph properties area of the Editor paragraph are identical to those available in the Paragraph Properties area of the Text and Image paragraph and are fully discussed there.

Viewing your paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of any area of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Text Paragraph

The sample Text paragraph allows you to include a title and body text.

The Text paragraph is identical in all respects to the Text and Image paragraph, with the exception the Image area of the Edit window is omitted.

The Text paragraph is not offered as an option in the Create new paragraph window, as the Text and Image paragraph can be used for inserting a paragraph which contains only text, by simply omitting the options contained in the Image area of the Edit window.

In the two-column template, the page template allows only Text paragraphs to be added in the right-hand column content area.

When you click on the New button in right-hand column content area, the Create new paragraph window will not open to allow you to choose between varying paragraph types. Instead, the Edit window of the Text paragraph will open directly. This is because only Text paragraphs are permitted in this area.

There is a single function area in the Edit window of the Text paragraph: Text.

Text Area

The Text function area of the Edit window is divided into the Title section and the Text section:

• In the Title section, insert your paragraph title by simply typing it into the text box.

  

  The formatting of your paragraph title is determined by the template that your page is based on. This helps to maintain uniformity on your website.

• In the Text section, insert the body text of your paragraph by typing it into the box and formatting it using the text editor.

  

  You have more flexibility with the body of your paragraph than with the title, as the Text section contains a text editor.

  

  The commands, depicted by the symbols in the screenshot of the text editor above, from left to right, are:

• Bold;

• Italics;

• Insert special character;

• Insert/edit hyperlink;

• Remove link;

• Copy;

• Paste;

• Paste as plain text;

• Paste from Word;

• Numbering;

• Bullets;

• Undo; and

• Redo.

  With the exception of the Paste commands, you will no doubt already be familiar with most of the commands in the text editor. They function in exactly the same way as those in most work processing programs do.

  The Paste from Word command allows you to paste directly from a Microsoft Word document, while choosing to ignore or retain font and style definitions. When you click on this command, a dialog window will open and you should follow the instructions in this window.

  The Paste as plain text command can be extremely useful if you are copying content from other programs because it essentially removes all previous formatting, allowing the underlying uniform template-based formatting to display on your page. When you click on this command, a dialog window will open and you should follow the instructions in this window.

Viewing your Paragraph

Once you have competed your entries in the Edit window, click on the Save button in the bottom right-hand corner of the Text area.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Link Paragraph

The sample Link paragraph is designed to allow you to quickly and easily insert an external or internal text hyperlink as a separate paragraph on your page.

Although you can insert a text link in both the Text and Image paragraph and the Editor paragraph, the Link paragraph will often prove extremely useful.

There are two function areas in the Edit window of the Link paragraph: Link and Paragraph Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Link area is active on opening the Edit window.

Link Area

The Link area of the Edit window is divided into two sections: Link and Link text.

• The Link section allows you to choose between inserting and internal or an external text link.

• To insert an internal link, i.e. one which links to a page of your site, select the internal link option by clicking within the small circle next to the Internal link option and the radio button will indicate your selection.

  Next, click on the Internal Link button;

  

  A dialog window, displaying all of the pages in your page structure, will open.

  

  In this dialog window, locate the page you would like to link to, highlight it by clicking on it, and then click on the OK button in the bottom right-hand corner of the window.

  When you click on the selected page, its file path will automatically appear in the row at the bottom of the window.

  When you click on the OK button, the dialog window will close and you will be returned to the Edit window, where the selected page will now appear in the Link box of the Link section.

  

• To insert an external link, i.e. one that links to a page on an external site, in the Link section select the external link option by clicking within the small circle next to the External link option and the radio button will indicate your selection.

  Next, in the Link box, insert the full URL, including the protocol, of the external page that you would like to link to.

  

• The Link text section allows you to insert the linked text that you would like to appear on your page.

  To insert your text, insert it into the Link text box.

  

  If you leave the Link text box blank and have inserted:

• An internal link, the page title of the internal page that you linked to, will appear on your page as your link text; and

• An external link, the URL you inserted into the Link section will appear as the text link on your page.

Paragraph Properties Area

The paragraph properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

The options available in the Paragraph properties area of the Link paragraph are identical to those available in the Paragraph Properties area of the Text and Image paragraph and are fully discussed there.

Viewing your paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of any area of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Table Paragraph

The sample Table paragraph allows you to quickly and easily insert a table as a separate paragraph of your page by simply copying and pasting the data from the program in which you created the table.

Although it is also possible to insert a table using the full text editor in the Editor paragraph, this paragraph provides a simple alternative.

There are two function areas in the Edit window of the Table paragraph: Table and Paragraph Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Table area is active on opening the Edit window.

Table Area

The Table area of the Edit window is divided into two sections: Table Data and Options.

• The Table data section of the Table area allows you to paste your table data in the text box provided.

  To insert your table data, simply copy your entire table from the program that you created it in, for example Microsoft Word or Excel, to the clipboard.

  The table in the screenshot below was created in Word.

  

  When you have copied your table, paste it into the Table data box, by either right-clicking and then choosing the paste command from the menu, or using the Ctrl+V keyboard command.

  

  Do not be too concerned if the formatting does not appear to be identical to the original table, because the end-result will be perfect.

  After pasting your table data, you can amend it in the Table data box by deleting any errors and inserting their corrections. It is not necessary to first amend your data in the original program and to then re-paste it.

  However, if you would like to add additional rows or columns, you will need to do this in the original program.

• The Options section of the Table area offers various formatting options.

  You can choose to make the first row distinctive as the table header, alternate the background colors of the rows, draw horizontal and vertical lines, minimize the font and change the cell alignment.

  To select from these formatting options, click within the small squares next to them and green ticks will indicate your selections.

  

Paragraph Properties Area

The paragraph properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

The options available in the Paragraph properties area of the Table paragraph are identical to those available in the Paragraph Properties area of the Text and Image paragraph and are fully discussed there.

Viewing your Paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of any area of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

To create the screenshot below, we first added an introductory paragraph using the sample Editor paragraph, and them added our table paragraph.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Download Paragraph

The sample Download paragraph allows you to upload a file that can be downloaded on your site by your site visitors. When a visitor clicks on the document link, the file will be downloaded to their computer.

There are two function areas in the Edit window of the Download paragraph: Document and Paragraph Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Document area is active on opening the Edit window.

Document Area

The Document area of the Edit window is divided into two sections: Linked Text and Document.

• The Linked text section allows you to insert the text of the download link that will appear on your page.

  To insert your text, type it into the Linked text box.

  

  If you leave the Linked text box blank, the file name of your uploaded file will appear on your page.

• The Document section of the window allows you to upload the document that your site visitors will download.

  To upload your document, click on the Browse button in the Document section.

  

  In Windows, the standard File Upload dialog window will open where you can locate your document on your computer.

  

  Once you have located your document, click on it to highlight it, and then click on the Open button in the bottom right-hand corner of the window.

  When you click on the Open button, the File Upload window will close and you will be returned to Magnolia’s Edit window.

  The file path and file name of your document will now appear in the Document section of the window.

  

  On your page, in addition to your linked text, the file type, size and an icon of the program in which the document was created will also be displayed.

  If you edit the paragraph at a later stage, the file name, a link to your document and a Remove file button will be displayed in the Document section area of the Edit window.

  

  To upload a new document, click on the Remove file button. The current document will be removed and the window will reload to once again display the Browse button. Click on the Browse button to navigate to, and upload, a new document following the processes described above.

Paragraph Properties Area

The paragraph properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

The options available in the Paragraph properties area of the Download paragraph are identical to those available in the Paragraph Properties area of the Text and Image paragraph and are fully discussed there.

Viewing your Paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of any area of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Form Text Field Paragraph

The sample Form Text Field paragraph is one of three form paragraphs that are available in pages based on the Form template.

The Form Text Field paragraph allows you to insert various kinds of text fields as a separate paragraph on your page.

There are two function areas in the Edit window of the Text Field paragraph: Input field and Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Input field area is active on opening the Edit window.

Input Field Area

The Input field area of the Edit window is divided into three sections: Field title, Mandatory and Lines.

• The Field title section allows you to label or introduce your text box.

  The text that you insert will appear on your page either above or before your text box. You can choose to include an entire sentence, or simply a title or heading. .

To include a field title insert your text into the Field title text box.

• The Mandatory section allows you to determine whether, or not, a field is mandatory.

  If you choose to make a field mandatory, your site visitors will not be able to successfully submit the form unless they provide the requested information. If they fail to complete a mandatory field, on submission of the form, they will receive a message advising them of this. Mandatory fields are indicated by an asterisk on your page.

  To make your text field a mandatory one, click within the small square and a green tick will indicate your selection

  

• The Lines section allows you to choose the size of the text area. There are three available options: a single line; a small text area and a large text area.

  The screenshot below demonstrates the three different options available.

To select the size of your text area, click within the appropriate small circle in the Lines section and the radio button will indicate your selection.

Properties Area

The Properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

The options available in the Properties area of the Form Text Field paragraph are identical to the options available in the Paragraph properties area of the Text and Image paragraph and are fully discussed there.

Viewing your Paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of either area of the Edit window. All of your entries will be saved and you will be returned to the Editing window where your paragraph will be displayed.

To create the screenshot below we used the Editor paragraph to add the introductory paragraph and then added two Text Field paragraphs below it.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Form Selection Paragraph

The sample Form Selection paragraph is one of three form paragraphs that are available on pages based on the Form template.

The Form Selection paragraph allows you to insert radio buttons, select boxes and check boxes as separate paragraphs on your page.

There are two function areas in the Edit window of the Form Selection paragraph: Input field and Paragraph Properties.

When you click on any of the function buttons, the Edit window will reload to display different input options.

The active area is indicated by a lighter green function button and by default the Input filed area is active on opening the Edit window.

Input Field Area

The Input Field area of the Edit window is divided into two sections: Input field and Paragraph properties.

• The Field title section allows you to label or introduce your input field/s. The text that you insert will appear on your page either above or before your fields. You can include an entire sentences, or simply a single word or title.

  

  To include a field title insert appropriate text into the Field title box in the Input field area.

  

• The Mandatory section allows you to determine whether, or not, a field is mandatory. If you choose to make a field mandatory, your site visitors will not be able to successfully submit the form unless they provide the requested information. If they fail to complete a mandatory field, on submission of the form, they will receive a message advising them of this. Mandatory fields are indicated by an asterisk on your page.

  To make your selection field a mandatory one, click within the small square and a green tick will indicate your selection.

  

• The Input type section allows you to choose the type of selection field. There are three available options: Radio buttons; a select box and checkboxes.

  The screenshot below demonstrates the available options.

  

  Radio buttons and the select box allow a visitor to choose a single option, while with check boxes multiple options may be selected.

  To select the type of input option, in the Input type section, click within the appropriate small circle and the radio button will indicate your selection.

  

• The Values section allows you to insert the text that will appear next to the radio buttons and check boxes, and in the drop-down menu of the select box.

  You can choose to include entire sentences, or simply a single word or heading.

  

  To insert your values, type them into the text box in the Values text box. Each value should begin on a new line.

  

Paragraph Properties Area

The paragraph properties function allows you to distinguish your paragraph by drawing a line above it and selecting the amount of space that will appear below it.

The options available in the Paragraph properties area of the Form Selection paragraph are identical to those available in the Paragraph Properties area of the Text and Image paragraph and are fully discussed there.

Viewing your Paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of any area of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

To create the screenshot below we used the Editor paragraph to add the introductory paragraph and then added two Form Selection paragraphs below it.

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.

Form Submit Button Paragraph

The sample Form Submit Button paragraph is one of three form paragraphs that are available on pages based on the Form template.

The Form Submit Button paragraph allows you to insert a Submit button on to your page.

There is a single function area in the Edit window of the Form Submit Button paragraph: Properties.

In the Form Submit Button paragraph, the options that are available in the Paragraph properties area of the other paragraphs are combined with the button text option, in a single function area.

Properties Area

The Properties area of the Edit window is divided into three sections: Save Button Text, Line and Spacer.

• The Save button text section allows you to insert the text that will appear on your submit button.

  You can include a single word, for example “Submit”, or an entire sentence.

  If you include lengthy text, the button size will automatically expand and contract to adapt to the length of your text.

  

  When working in the sample templates, we recommend that you limit your text to a maximum of 70 characters or the button may extend beyond the defined width of the content area.

  To insert your button text, type it into the Save button text box.

  

• The Line section allows you to choose to draw a line above your paragraph.

  To insert a line above your paragraph, select this option by clicking within the small square and a green tick will indicate your selection.

  

• The Spacer section allows you to select the amount of white space that will appear below your paragraph. There are three options: No spacer; Single blank line and Double blank line.

  To access the Spacer options click on the small down-arrow in the Spacer section and a drop-down box will appear. Select the appropriate option by clicking on it and your choice will appear in the Spacer box.

  

Viewing your Paragraph

Once you have competed all of the available options in the Edit window, click on the Save button in the bottom right-hand corner of the Edit window.

When you click on the Save button, the Edit window will close and you will be returned to the Editing window where your paragraph will be displayed.

To create the screenshot below we created a short form by inserting an introductory Editor paragraph, then two Text Fielded paragraphs, and lastly the Submit Button paragraph

You can make any necessary changes to your paragraph it by clicking on the Edit button in the Editing window and repeating the processes described above.