1. Skip to content

Call us on 07796 405818 or email stephen@mcwebs.co.uk for a free quotation.

Arranging Page Elements

This section will show you how to arrange the elements in a page.

Having inserted a variety of page elements that make up your web page it is possible to re-arrange them changing the look and feel of the page. Using the Up and Down arrows, Parent Page Position field and the Alignment field you can create a different page layout for each page.

Below are 4 examples of different layouts using the same elements. Move your cursor over each part of the Examples below to learn about how each one was created.

Example 1

Page Layout Example 1

Hold your cursor over the image to find out more about the element.

Example 1 Help Text

1. Heading

Heading Type: h1
h1 is selected because this is the main heading on the page.

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

2. Getting the message across Picture

Alignment: Float Left
Float Left places the picture on the left of the page allowing text (3. Text) below to come up to the top of the picture on the right. If the picture is too big then the text below will not be able to sit next to the picture on the left.

3. Text

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.


Example 2

Page Layout Example 2

Hold your cursor over the image to find out more about the element.

Example 2 Help Text

1. Heading

Heading Type: h1
h1 is selected because this is the main heading on the page.

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

2. Getting the message across Picture

Alignment: Float Right
Float Right places the picture on the right of the page allowing text (3. Text) below to come up to the top of the picture on the left. If the picture is too big then the text below will not be able to sit next to the picture on the left.

3. Text

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.


Example 3

Page Layout Example 3

Hold your cursor over the image to find out more about the element.

Example 3 Help Text

1. Heading

Heading Type: h1
h1 is selected because this is the main heading on the page.

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

2. Getting the message across Picture

Alignment: Float Left
Float Left places the picture on the left of the page allowing text (3. Text) below to come up to the top of the picture on the right. If the picture is too big then the text below will not be able to sit next to the picture on the right.

3. Text

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

4. Text
To achieve this layout the original Text element has been split into two elements.

Alignment: Clear Both
Clear Both forces this Text element to stay below the Picture element that is set to Float Left.


Example 4

Page Layout Example 4

Hold your cursor over the image to find out more about the element.

Example 4 Help Text

1. Heading

Heading Type: h1
h1 is selected because this is the main heading on the page.

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

2. Text
This new arrangement was achieved by moving the Text element up to page position 2 above the Picture.

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

3. Getting the message across Picture

Alignment: Centre
Centre places the picture on the centre of the page keeping the text element (4. Text) below it.

4. Text

Alignment: Default
Leaving the alignment as Default means the element will take on the common alignment of the page that the web designer has set up, in this case Left.

Back to top