Page Layout

How to

1. Access Page Layout Editor
2. Create a new Page Layout
3. Edit an existing Page
4. Alter Section attributes and styles
5. Use Row and Column Spans

Accessing Page Layout

To edit a page layout first locate the Masterpage you wish to edit. To edit a Masterpage you must be logged in with the Aplinx toolbar visible at the top of your screen.

• Click the button on the Aplinx toolbar.
• Select 'Masterpage' from the Applications menu.

The Masterpage Manager will load in the same window.

• Select the radio button for the Masterpage you wish to edit and click 'Edit' in the manager's menu on the left of your screen.
• If you would prefer to create a new Masterpage, instead click 'New'. Follow the steps outlined in Masterpage for more information on this step.
• Your window will reload showing the current objects in your Masterpage. The next image below shows a new Masterpage with no current layout. Selecting the 'Click to Edit' button from the brown actions toolbar will show the edit menu for this template.

• The next image represents an imported template. To access the Page Layout editor in either situation select 'Edit Page Layout' from the edit menu on the left of the screen.

When 'Edit Page Layout' is selected the Page Layout Manager will load. What you see here depends on the complexity of your Masterpage. Right: Editing an Imported Masterpage layout Below: Creating a new Masterpage layout

Creating a new Masterpage Layout

Before creating a new page layout it is good to have some idea of what you would like the template to look like. Making a rough template design on paper or in your mind can help with this. The image below represents the Masterpage created in the following example.

• Access the Masterpage manager and create a new template, as outlined above or in the Masterpage section of this manual.

• Select 'Click to Edit' from the brown actions toolbar to load the edit menu.
• A new window will load, similar to the image below. Select 'Insert' to begin adding sections to your page.

After clicking 'Insert' this window will refresh. The first section in the Masterpage will be visible.

Adding sections to a Masterpage

More sections can be added next to, below or above a section by clicking the button. This will make a small menu visible.



Selecting the menu item for the desired position of the new section will cause the Layout Editor to reload. The new section will be shown in the position selected.

To populate your template, continue adding sections in the desired positions. Sections may be added in any order to the page. Default naming, column and row spans will be applied to each section. These attributes can be changed to better suit each section dependant on your needs - see Layout Styles and Attributes or Row/Column Spans for more information.

Content can now be added to this Masterpage. For more information on adding content see Masterpage and Page Content.

Please note:

Nothing will appear on individual pages in your site until content has been added to the primary Masterpage. Also, nothing may be customized on individual pages until Editable Content Regions have been included in the Masterpage template.

Editing an Existing Page

To edit an existing Masterpage template you must be logged in with the administrator toolbar visible at the top of your screen. Access Masterpage as described above. The image below shows an imported Masterpage template.

• To add content select the button in the correct section.
• To edit or remove existing content select the button above the desired object.

More information on adding, removing and editing content is available in Page Content and Editable Content Regions.
Here we are interested in editing the page layout.

• Select the  button from the brown actions toolbar to load the Edit Masterpage menu for the template.

• Selecting 'Edit Page Layout' will load the layout editor.

Additional sections can be added in the same manner as described above. Multiple objects may be inserted as content into each section.

Once inserted, each section in the template will appear similar to this:

To remove a section from the page select the button. To edit the section properties select the button. Section properties are explained in Layout Styles and Attributes.

Layout Styles and Attributes

Section Properties

Section Properties can be accessed by clicking on the button of each section. Any styles that are set here will overide the defaults of that style type set in Additional Settings. The Section Properties window appears similar to this:

Each of the attributes in 'Additional Settings' are outlined below:

• When the box next to 'Locked' is ticked, the and buttons for all content objects in that section do not appear.
• The 'Section Name' is merely an identifying icon for you - the creator/editor of the website - that appears when editing the Masterpage template.
• 'Section Width' defaults to 100% for the first section added to a horizontal row. Additional sections in a horizontal row will have no default width value. Deselecting the percentage box will set the width in pixels. Widths set here will be percentages of the page width set in Additional Settings.
• 'Section Height' is not given a default value. Deselecting the percentage box will set the height in pixels. If the contents of a section take up more room than has been allocated in 'Section Height' this attribute may be ignored dependant on the Internet browser being used.
• 'Column span' and 'Row span' allow sections to expand to span multiple columns or rows in the page's layout. Each section will default to a column and row span of one column wide by one row high. These are explained in further detail in Row/Column Spans.
• 'Section Style' is selected by clicking on the 'Pick' button. This will load a new page containing the Style Manager. If you already know the ID number of the style you may instead type this number into the text box. Individual elements in the selected style will overide similar attributes in the page style set in Additional Settings.
• 'Object Alignment' determines whether objects are added to a section 'top to bottom' or 'left to right'. The default value is vertical - where each new object in a section is added below the others (or 'top to bottom'). 'Object Alignment' also determines the direction of movement in the drag and drop function used to rearrange content within a section.
• Ticking the box next to 'Stretch Objects' enables even spacing of all objects placed into the section. This is particularly handy when creating horizontal menus. Ticking the box here will space the menu items evenly across the width of the section.
• Ticking the box next to 'Internal Scrolling' enables a scroll wheel on the right or bottom edge of the section you are editing. Position of the scroll wheel is determined by the section's height and width against the height and width of any objects placed within that section.
• 'Section Padding' will add the nominated amount of blank space around each object that is inserted into the section.
• If the object inserted into a section does not fill the section, its position within the section is determined by the 'Horizontal Alignment' and 'Vertical Alignment'. In the settings example above, an object smaller than the section would appear on the far left (with some space on the right) and positioned with some space top and bottom. Changing the 'Vertical Alignment' to 'TOP' would move this vertical space to the under side of the object.
• 'Decoration' determines if a frame should surround or partially surround the section. No decorations are selected by default. Selecting one of the radio buttons next to Type 1, Type 2 or Type 3 will load options for that type into the window above the 'Save Changes' and 'Cancel' buttons. A 'Preview' button is also made available - the decoration settings can therefore be changed an example viewed before committing to any changes.

Select 'Save Changes' when done.

Additional Settings

Additional Settings govern the entire page. For example:

• The width and height of your Masterpage in a browser window
• The alignment (top, left, right, center) of the page's content
• Default styles for the entrie page

To edit these, select the 'Additional Settings' button from the Layout Editor Menu. A new page showing the setting options will load in the same window.

• 'Width' is much the same as described above in section attributes, but instead of being for individual sections this width setting determines how much of the Internet browser window is taken up by the webpage's main content. If the tickbox next to the percent sign is not selected this width will be measured in pixels.
• The 'Height' of your webpage is measured in pixels. If this setting is left blank, the page height will be determined by its content. If content in a webpage takes up more room than has been specified in 'Height' this attribute may be ignored, dependant on the Internet browser being used.
• If the objects or sections on a page do not fill it, their positions relative to the page are determined by the 'Horizontal Alignment' and 'Vertical Alignment'.
• The 'Style ID' for the Masterpage is selected by clicking on the 'Pick' button. This will load a new page containing the Style Manager. If you already know the ID number of the style you may instead type this number into the text box. Styles selected for individual objects on the page may overide similar attributes in the style selected here. See the Style Manager for more information on setting styles.

Row and Column Spans

Row and Column spans help to manipulate the page layout. The images below show how column spans can help create the desired page layout.

To create a Masterpage with nonstandard column or row spans, you will first need to populate a new template with sections. Changing the column or row span of the appropriate section/s can be done when editing a section's attributes. Editing the section's attributes can be done as each is created, or at any time afterwards.