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.

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 + New Page 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 Save Changes
  • 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 Save
  • 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 Left Up Down Right 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 Delete 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 Save Layout to see how the panel widths change
  • Use the Reset Layout 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 Reset Layout before making the change, and changing the Advanced Page Layout again

Fig. 1: Advanced Page Layout

Design Your Home Page

If you'd like a bespoke website home page design, you can set it up with the page designer.

If you'd like a bespoke website home page design, you can set it up with the page designer.

NB. You should consider that adding lots of modules to your home page will affect the time that it takes for your website home oage to load.

To setup your own home 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 the Admin/Group Details page and select one of the User-Definable Home Page Design. Please refer to Fig. 1 to see how the three default layouts appear.
  • Open the Admin/Global Settings page and select one of the User-Definable Home Page Design. Please refer to Fig. 1 to see how the three default layouts appear.
  • Move to your home page and add modules from the Edit Toolbox.
  • Some modules come with default settings that mimic the 2022 home page design, based on where you place them on the page. This helps speed up the setup process for you.

Get Started with the 2022 Home page design

To replicate the 2022 home page design (similar to Fig. 1), follow these steps:

  • Use the "User-Definable - Mixed Width" home page design.
  • Open the home page
  • In the 'Edit Toolbox', select Use Page Designer
  • Add an Image Banner module to the Top area of the page.
  • Add a Links List module to the Top area.
  • Add an Group Finder module to the Top area.
  • Add a Spacer module to the Body area.
  • Add an Events List module to the Body area.
  • Add an HTML Panel module (Who are we) to the Body area.
  • Add a News List module to the Body area.
  • Add an Image Banner (Parallax) module to the Body area.
  • Add a Photo Gallery module to the Body area.
  • Add an HTML Panel (Social Links) module to the Bottom area.
  • Add a Social Media Feed module to the Bottom area.
  • Add an Neckerchief List module to the Bottom area.

You could also add Text/HTML modules as titles for the 'Future Events', 'News & Blogs' and 'Photo Gallery' sections.

Full Width Layout

Full width for Top, Left/Body/Right and Bottom areas areas

Mixed Width Layout

Full width for Top and Bottom areas & limited width for the Left/Body/Right areas

Limited Width Layout

Limited width for Top, Left/Body/Right and Bottom areas areas

Fig. 1: Base layout options - Full Width, Mixed Width and Limited Width

Follow Us

Contact Us
Facebook

Scouts Online Facebook Page
YouTube Channel

Scouts Online YouTube Channel
© 2014 www.ScoutsOnline.co.uk

Scouts Online