The new Layout Manager makes it easy to create great looking websites using a graphical user interface. A variety of "widgets" can be added and moved around, and the site can be styled change colours, backgrounds and fonts. A full preview mode means that you can view all your changes before publishing them to your website.
There are three parts that make up an overall site design:
- The Home Page template: This controls how the home page is layed out (i.e. what content appears in which area of the page)
- Non-Home Page template: This controls how pages other than the home page are layed out. It is important to note that this template must be set up separately to the home page - e.g. if you add a banner to the home page, you must also add the same banner (or a different one if you like) to the non-home template
- Styles Manager: This controls colours and other design aspects of the entire site
Any changes you make to the templates or style editor can be previewed before being published. As you make changes, click the Save button. Once Saved, you can click the Preview button to popup your website in Test/Preview mode which will show you the changes in a fully functional website. You can browse to any page you wish in the normal way, and only you will see your recent changes. It is important to understand that in Preview mode the latest saved versions of the templates and style editor will apply. Close the Preview window when you are finished.
Note: Previewing your site sets a special cookie on your machine that is cleared when you close the preview window. If you don't close the window you may be 'stuck' in Preview mode when you visit the site normally. You can always clear the cookie by closing your browser and all windows totally, then re-opening.
To publish your changes to the web site, click the Publish button on the template pages and/or the Style editor as applicable. Each must be done separately, and changes will immediately be available on your web site.
Note: If you ‘Save’, but don't ‘Publish’ your changes, you can still return to the Layout Manager later on to carry on from where you left off. Previewing and Publishing can also be done from the Site Layout Manager page.
Editing your templates
Click the Edit link of the template you wish to edit from the Layout Manager page. If this is the first time you have edited the template, the default template will load.
A template is divided into three main sections which span the width of the page - header, main content, and footer. Within the Main content section you can have one column (that spans the entire width), or two columns either left aligned or right aligned. If available, choose the number of columns from the selector at the top of the screen. If this selector is not visible, this feature has been locked. It is best to choose your number of columns before you start, as changing later may mean you need to set up the content area again.
Adding rows and widgets
A widget is something that you can add to your layout which will display various content or information.
Before you can add a widget to a layout you must first add a row to the bottom of the section you are working with. A row can contain one, two, or three "cells" of varying width depending on your requirements. To add a row, click the +ROW button at the bottom of the section you are working with. Select the number of cells and click OK. The row will be added underneath.
Once the row has been added, click the +WIDGET button within the cell you wish to add the widget. The widget selection screen will popup. Select the widget and enter the required configuration information (see list of widgets below for help with this). Click OK to add the widget to the row. Repeat the process for other widgets and rows in the three sections of the page.
To edit a widget's configuration, click the Edit button (round cog) at the top right hand corner of the widget as viewed within the template. Change the necessary information and click OK. Note, if the Edit button is not visible it means that the widget cannot be configured.
To delete a widget, click the Delete button (red cross) at the top right hand corner of the widget as viewed within the template. Click OK at the confirmation popup. Note, if the Delete button is not visible it means that the widget cannot be deleted (this usually means it has been made compulsory by your governing organisation).
Deleting an entire row
To remove an entire row , click the Delete button (red cross) at the top right hand corner of the row as viewed within the template. Click OK at the confirmation popup. Deleting a row will also delete any widgets contained within the row. Note, if the Delete button is not visible it means that the row cannot be deleted (this usually means it has been made compulsory by your governing organisation).
Moving widgets and rows
Widgets may be moved to another position within the same row by selecting anywhere within the widget and dragging to another position.
Editing your styles
Click the Site Styles Edit link from the Layout Manager page. The styles manager allows you to control many of the core styles for your website. If this is the first time you have edited the styles, the defaults will load.
Note: styles affect all pages on your site (home and non-home).
A breakdown of the customisable items and the styles that they set is provided below:
- Primary Colour - Sets the banner* background colour, menu background colour and widget header background colour
- Secondary Colour - Sets the banner* text colour, menu text colour, menu hover colour and widget header text colour
- Background - This controls the background of the site – ie. the space to the left and right of the site layout. It does not apply to the background of the site content itself
- Background Colour - Sets the website background colour
- Background Image - Allows an image to be used for the site background. This will be visible to the left and right of the main content (bot not behind the content). Note - care should be taken to use an image with as small file size as possible to ensure the site loads quickly
- Background Repeat - Can optionally be set if using a background image. The image can be set to either not repeat, or repeat horizontally, vertically, or both. This is also dependent on the dimensions of the background image itself
*Not applicable if an image is used instead of text in the Banner widget
- Item Padding - This is the space (in pixels) between the menu text and the border for each individual menu item.
- Text Size - The font size for the menu text in points (pt)
- Font Family - The font used throughout your website (headings, news items, menu and body text)
Note: If you have a larger number of menu items it is recommended to set a small padding
Widgets are areas of a page that can output certain content or functionality, below is a list of all the widgets available using the new Layout Manager:
Insert text or an image that displays as the banner of your website. If you wish to use an image for your banner it must first be uploaded to the File Manager (Content > File Manager) before it can be selected. A link can also be set for the banner, by default the banner displays your club name in text and links to the site home page.
*Ideal dimensions to use for a banner are 980 x 180 pixels.
Inserts the site menu as defined in the Edit Menu (Site > Edit Menu) admin page. The menu can be multiple levels deep and will scroll horizontally if it exceeds the site width, however it is recommended that you limit the top level of your menu to 8-10 items. The menu padding, font size and colours can be updated via the Styles Manager.
Inserts an image that displays on your website. Before an image can be selected it must first be uploaded to the File Manager (Content > File Manager). A destination link can also be set for an image via the widget.
Note: Images will scale to fit within the widget area however it is recommended that you resize images to the correct dimensions prior to uploading them to the file manager.
Images should be optimised to as small file size as possible (ideally < 50kb) to ensure the site loads quickly. Photos taken directly from digital cameras and phones will normally be too big in both dimensions and file size to use directly without re-sizing or optimisation.
Inserts an iFrame of an html page that is then displayed on your website. To display Html content on your website an Html pages must first be created via the HTML Page Manager (Content > Html Pages > General Pages). Overflow content is handled via a scroll bar however, to ensure content is displayed neatly on the page, it is recommended that you avoid using set widths within your html.
Inserts an advert directly from your Advert Manager (Site > Advertising > ...) to the website. To display an advert via the widget:
- Create an advert via the advert manager
- Assign the advert a position via the Advertising Placement page
- Within the widget, enter the advert position number in the Ad Position field
Inserts a YouTube player on your website containing videos from a YouTube playlist (which is controlled/maintained via your YouTube account). The widget requires a YouTube Playlist ID to be entered. To obtain your YouTube Playlist ID:
1. View your YouTube playlist
2. Click Share
3. Copy the URL
4. Extract everything after the letters: "list="
E.g. for the following URL:
http://www.youtube.com/watch?v=TXKiqJqOxkA&feature=share&list=PLEpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2 your Playlist ID would be EpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2
You would just need to copy the following:
PLEpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2 your Playlist ID would be EpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2
Displays current event items in chronological order from the Event Maintenance (Content > Events) section in a variety of formats.
Inserts a feed from your designated Twitter account. To set the twitter account you will need to enter your twitter handle. To obtain your Twitter handle:
- Go to your Twitter page (e.g. https://twitter.com/interactsport)
- Your handle is the text at the end of the string (interactsport in the above example)
Inserts a feed from your designated Facebook account. To set the Facebook account simply paste the URL of your Facebook page into the Facebook URL field e.g. https://www.facebook.com/InteractSportOfficial
Inserts a Scoreboard widget that draws content directly from your Results and Statistics. The widget displays Latest Results, Upcoming Matches and Ladders for your entity and can be set to full or compact mode. Compact mode is best used when you insert this widget down the RH column.
Creates a widget that displays progressive live scores for matches scored using the MyCricket Scorer app.
Inserts a Top Performers widget that draws content directly from your Results and Statistics. The widget displays Best Batting (aggregate), Best Bowling (most wickets), Best Batting Average and Best Bowling Average for your club/association.
Inserts a news rotator which displays current news items from the News Manager (Content > News). To display a news item within the rotator you must check the “Show in News Rotator” box when creating/editing the news item.
Note: Ideal dimensions to use for images is 500 x 455 pixels.
Additional website, logo & banner design services are available through our online partner InteractSport, click here for more information.