Page Designer Tech-Tip

Introduction

Group Package 1 websites contain a mix of default verbiage and imagery, with your group's details. This is managed for you by Scouts Online. There is no ability change the settings.

If you'd like to upgrade to a higher package level, please contact us.

Introduction

The Page Designer is custom build for UK Scouting, allowing you to create stylish pages with a Scout branded look-and-feel.

Modules for text, images, links, contact forms and much more, can be placed in different areas of the page. Each modules is pre-populated with local or Scouting content, easily adaptable to suit your requirements. Some modules have their styling set based on area of the page that you've positioned it, to show you how it could be used.

The width of each areas of the page is adjusted dynamically depending on the device screen size of the website visitor. More technical Site Admin users can personalise the layout of the page areas further.

Create Pages with the Page Designer

Use Cases

The following panels show specific tasks. Click on a panel to see the procedures.

Add a New Page

Add a new menu or non-menu page, ready to add content.

If you haven't found a pre-populated page for your needs, you can create your own page.

To do this, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Switch on a user-definable page in Admin/Page Management OR click the button and scroll down to the highlighted page
Either way, set the fields as follows:
- Change the Menu Title, Menu Sub Title and Page Header
- Set the Privacy of the page. See here
- If the Privacy field is set to anything other than 'Any website visitor', you may want to tick the Show If Private field to ensure all website visitors can see the page on the menu, and know that they'll need to login before seeing the page
- Click
Open the new page, by clicking on the page name at the left-hand side of the Admin/Page Management page, to start designing your page

Fig. 1: Add new page

Adding Modules to Your Page

Add modules to your own user-definable pages.

You can add modules to your own user-definable pages.

To do this, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Open your page, or create it like this
You will see the Edit Toolbox appear on the left of the page. See Fig. 1
Hover over the Edit Toolbox button and click a module from the list. See Fig. 2
Click an area of the page that you want to place your module. See Fig. 3
Some modules may have different content and styling set depending on the area of the page that you place it.
For example, a Links List module will show horizontal list if places in the top or bottom panel, a menu on the left, a vertical image list in the centre or a resource list on the right. See Fig. 4

Fig. 1

Fig. 2

Fig. 3

Fig. 4: Links List styles in different page areas

Editing Module Settings

Once a module has been added to a page, you will want to personalise it.

Once a module has been added to a page, you will want to personalise it.

To do this, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Open your page
Click the below the module you want to change.
If you don't see a , make sure that 'Design Mode' is set to On in the Edit Toolbox.
Edit the module and click
To see details of the fields in a particular module, select the module from the Modules menu above

Move a Module

You can move the area of the page that a module is positioned, and move it up and down within the same page area.

You can move the area of the page that a module is positioned, and move it up and down within the same page area.

To do this, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Open your page
Use the buttons to move the module within and between page areas

Fig. 1: Module controls

Delete a Module

See how to delete a single module, or all modules on a page, here.

You can delete a single module, or all modules on a page.

To do this, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Open your page
Click the button below a module to delete it
To delete all modules on a page, click 'Delete All Modules' in the Edit Toolbar and confirm it

Fig. 1: Module controls

How Others Will See Your Page

See how your website visitors will see your page.

When website visitors open your page, they won't see the salmon-coloured module bars. They may also be using a different device screen size to the one you designed the page on.

To see how your visitor will see your page, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Open your page
In the Edit Toolbox, change the 'Design Mode' to Off
You will now see that the salmon-coloured module bars have disappeared
To see how visitors will view your page on different devices or browsers sizes, un-maximise your browser and resize it to make the browser narrower
Make sure you change 'Design Mode' back to On, so that you see the modules if you open the page again in the future

Advanced Page Layout

You can adjust the width of the page area widths to further personalise your page.

You can adjust the width of the page area widths to further personalise your page.

To do this, follow these steps:

Login with a Site Admin username and password, and make sure you have Content Edit Mode switched on in Members/My Profile
Open your page
In the Edit Toolbox, click 'Adv. Page Layout'
You will now see a textbox containing the HTML that controls the areas (or div's) on your page. See Fig. 1
The class of each div defines its' width
The 'MD' (in col-md-4) states that the class is only used when the screen width is Medium or above. In the case of col-md-4, medium screen widths will set the width of the div as 4/12ths of the page width.
Try reducing the width of the BodyDiv by changing col-md-8 to col-md-7 and increasing the RightDiv by changing it from col-md-4 to col-md-5, and click to see how the panel widths change
Use the to revert back to the default layout, at any time
NB. If you change the layout and then add modules to panels that weren't used, then you will need to before making the change, and changing the Advanced Page Layout again

Fig. 1: Advanced Page Layout

Scouts Online Facebook Page

Scouts Online YouTube Channel

Page Designer Tech-Tip

Introduction

Introduction

Follow Us

Scouts Online