Working with the Member Wizard Web Template

The Page

The page menu is accessed by clicking on the outside green line pen icon at the top right hand corner after you have logged in to the website template (Admin then enter your login details). Note that in order to login to your website template you must have a User login to your organisation's Member Wizard database and this login must have been given a Role with Full Access to Website. Alternatively you must have Administrator rights to your organisation's Member Wizard database.

Once you have logged in successfully you will see a green line around the 3 elements of your website - Pages, Sections and Panels. You can edit each of these by clicking the pen icon in the top right corner of each.

The Page edit menu is shown to the left. Here you can edit:

Website Settings such as the background colour of the Page or of Text or of Headings and also the Header Colours - the header is the part of your page containing your logo and your menu bar.

There are a wide range of colours you can choose from but we suggest using a light pastel shade as the background for your page as it makes it far easier to read and aids accessibility for those with poor eyesight.

Your logo is taken from your Member Wizard database logo. If it is too large then you need to reduce the size of it and then reload it into your Member Wizard database (Settings/Upload Logo). You can not change it in the website although you can adjust width. There is a text panel next to the logo on your website with you edit to display the name of your organisation. We suggest you centre this text. The menu section will wrap to another line if your logo and organisation panels are too large.

Page Settings - here you can change the name of the page, or designate a page as a Hidden page or a Menu only page.

IMPORTANT:

The page settings form will allow you to adjust the space surrounding the elements on your page. You should use % measurements for horizontal padding as it will allow your page to adjust easily from large screen down to phone or tablet screens.

You can use px (pixels) as the distance top and bottom as this does not effect smaller screen sizes.

The Gap percentage will control the space (gap) between panels within a section.

Hidden pages are pages which do not appear in the top menu bar but are designed to be linked to from other pages within the website. Typically these would be in cases where there is a long text section which you want visitors to the site to be able to access if they wish to read more without the article taking up too much room on the page which contains its summary. With a Hidden page you need to define its URL extension such as 'hidden'. You then use this URL extension when you create a Link Panel. You access a Hidden page via the View page in the Page Menu.

Menu only pages are not pages they are the parent level of a list of other pages such as Gallery in the example shown which results in the menu showing as the example shown in the Manage Pages image to the left. To create the child pages you add a page then move it up under the parent page and use the arrows to the left of it to move it into the child position. The menu then looks like this:

The Manage Pages menu allows you to organise the order in which pages appear in the menu. If you want to move the order just click on the page name and drag it up into the position you wish it to be. Use the arrows to make a page appear as a child page to the page under which it is indented (see above) 

The Add Section item allows you to add Sections to your page. You must add a Section before you can add Panels. You can add background colour to a section and adjust the padding between Panels. 

Sections can also run vertically or horizontally by adjusting the width of the section. For instance if you make two sections 48% wide then they will sit side by side on the screen. You can then put panels within each section and those panels will stay together even though the screen size reduces to phone or tablet size.

Panels

To add a Panel you select Add Panel  from the Section menu. To the left you can see the types of panels you can add to your site. Remember, the Member Wizard website template is linked to a Member Wizard database. Much of the content is drawn from the linked database. 

You can dictate the width of any of the panels by nominating a % width in the edit panel form. If you want to sit two panels beside each other such as a Text Panel and Picture Panel side by side you need to give each a % width less than 50% as there is automatic padding around each panel. Two panels each 45% in width will sit side by side. You can set the relative position of each panel by ensuring that you place the panel you wish to see to the right above the panel you wish to see to the left.

The Types of Panels

There are several different panel types you can work with. Most panels are width adjustable.

Text Panels

As the name suggests these are for text on your page. If you change the % width in the Text Edit field, you can have other panels next to your text panel but remember the system does require a gap between the panels so two panels each of 50% will not fit side by side. Try making one of them 45%.

You can sit multiple panels side by side across your page provided you remember this buffer around each of them.

You enter text into the panel simply by typing it in to the area provided.

Section settings will dictate whether or not your panels contain a background or text colour.

Picture Panels

Images can be uploaded from your device into picture panels.

You can also add a Caption which will appear along the bottom of the image.

If at first you don't see your image once you've clicked Save remember that it takes time to upload to the server...be patient.

Google Maps Panels

You can insert a Google map into your panel. Simply type in the address you wish the map to centre around.

You may need to be specific (street number, street, city). If you can’t get your address to show on the map go to Google maps in your browser and type in the address there.

You may find it is slightly different to what you are entering. Copy the address Google Maps uses and then paste that in your Google Maps panel.

Download Panels

The system is designed so that any document downloads you wish to make available for download need to be stored in the Documents folder in your Member Wizard database.

When you upload the document to make it available you need to check the box marked Public in order to make it able to be selected for download.

Downloads will usually go into your Downloads folder on your device.

Link Panels

These are links which allow you to link one page to another. You firstly create a Hidden Page and then copy the Route of the Hidden Page and use this as the link for the Link button. You only should put the actual page name in the Route eg if you have created a Hidden Page called Read More then the Route is read_more. Similarly the link button link is simply read_more....not the full URL of the page. 

Class Panels

These are only available to organisations who run classes and who have set up the classes in their Member Wizard database.

You do not need to select any file to display the Classes for your organisation, the system will automatically detect and load them from your database.

New Member and Renewing Member Panels

The New Member panel will display the New Member Application Form as set up in Settings/New Member Application in your Member Wizard database.

The Renewing Member panel will request the member's email address and if this is verified it will send the member a membership renewal invoice to their email address.

Member Portal Panel

In order to use the Member Portal, the organisation must have set up the portal in their Member Wizard Database and the member's membership type must have been included their membership type as one of those permitted access via the Portal.

The Member Portal Panel will allow members to login to their Member Portal with either an email address or member number and a password. They will need to have registered via the website by initially providing either their email address or a member number and selecting a password or PIN.

You can add colour to your website page background or to section backgrounds. At this stage colour to the background of Panels is not available however you can colour the text within the panel by using the Format/Text Colour in the text box tool menu.

The Default Website colours menu will let you set the colour for headings, text and background for you entire site. 

The Header Colours menu will let you set a background colour and text colour for just the top header of each page (the part containing your logo and menu items).