Website Designer Content Guide ClubRunner 3.0. Table of Contents

Transcription

1 Table of Contents General Overview:... 2 Designer Location... 2 Edit Content... 4 Adding Widgets:... 5 How to Add Custom Widgets:... 7 Widget Properties:... 9 Organizing the Widgets:... 9 Page Preview: Publishing the Home Page: Page 1

2 General Overview: Welcome to Website Designer 3.0, the homepage template designer from ClubRunner. You now have the ability to launch the website you ve always wanted, with a personalized design and the flexibility to configure and customize your site to express your club s style. You can pick your theme, configure your layout, design your navigational menu, and even add customized content throughout and as always, no coding or special skills required. Just to make things even smoother, you won t have to worry about converting over your existing content we ve already ported over all your website content to the new designer and selected a default layout and theme to get you started right away! Designer Location Step 1: Login to your ClubRunner 3.0 website. Click on the Member Login link found in the top right corner of the homepage. Step 2: Next you will be taken to the Login screen. Here enter you Login Name and Password. Page 2

3 Step 3: Member Area. Now back on the homepage click on the Member Area link found in the top right corner. Step 4: On the Administration Page, click on the Website (tab) Website Designer (link) Step 5: Next click on the Designer button found on the left side. That s it; you should be taken to the Website Designer 3.0 screen. Page 3

4 Edit Content Click on the Edit Content button to get to the Page Designer screen. Content Template: The Content Template button defines the Home Page layout of the site. Currently there are 7 templates to choose from: Simply click on the template that you would like to choose and then click on the Confirm button to activate it. Page 4

5 Adding Widgets: What is a widget? A Widget is a generic term for a bit of self-contained code that displays a program, or a piece of a program. The Widgets are grouped by similarity. Simply click on the group tab to see the widgets within. When you have the group selected and you see the list of widgets you can mouse over the widget to see a preview of what the widget would look like by clicking on the Magnifying Glass icon. Page 5

6 If you have previewed the widget and you like what you see then simply left click and drag the widget from the left and drop it within the layout on the right side. Depending on where you drop the widget it will resize automatically. Page 6

7 How to Add Custom Widgets: Step 1: On the Page Designer screen click on the Custom Widgets [Global] (tab). Step 2: You should see the first Widget in the group is called Global Custom Widget. Left click and drag the widget to the layout on the right side. Step 3: As soon as you drop the widget you will be taken to the Edit Custom Widget page. Here you would customize the widget to your liking (add images, movies, text, ect.). Note: When giving the Custom Widget a title you should be aware that the Custom Widget will be added to the list of custom widgets based on the Title. Page 7

8 Step 4: Once you are finished with your custom widget you have three options to choose from: This will save the new Custom Content and publish it to indicate that the widget is complete. This will save the widget in draft mode indicating that more changes need to be made. (Note: Widget colour will change Orange) Will cancel and changes made and NOT create the Custom Widget. Step 5: When you go back to the Page Designer screen and you click on the Custom Widgets [Global] (tab) you will see your custom widget added to the list. That custom widget can now be used throughout the site without having to recreate it again. When a custom widget is Published it will appear as a blue widget: When a custom widget is in Draft Mode it will appear as an orange widget: If you edit a drafted Custom Widget you will be taken to a compare screen. From there you have the option of editing the Draft Version or Abandoning the Draft and Edit the Published Version. Page 8

9 Widget Properties: Once you have moved a widget to the right side layout you then have 4 options within that widget (Note: Not all widgets will contain 4 options, some will contain 3 instead): Preview This will give you the ability to see what the widget would look like live on your homepage. Edit Content This will take you to the area where you can edit the content within the widget. For Example if you clicked this option on the Stories widget then it would take you to the Stories for Home Page screen. Properties This defines the look of the widget. In here you can change the widget title, border colors, header colors, background colors, ect. Remove This will remove the widget from the homepage layout. You can easily drag and drop it later from the Toolbox! Organizing the Widgets: With all Widgets a tool will appear to the right side of the widget, this tool is used to move the widget to the desired location on the home page. Simply left click and hold on the tool and drop the widget in the layout area on the right side. Step 1: Left click and hold on a widget that you would like to move. Step 2: Now move the widget to the desired location on the layout area (right side). Step 3: Now release the left click and watch the widget drop in and resize automatically. Page 9

10 Page Preview: On the Page Designer screen you have the ability to Preview what the Home Page is going to look like before committing to the changes. To do this simply click on the Page Preview button found in the top right corner. A Preview of the homepage appears. Note that links will NOT be active in preview mode. To go back to the Page Designer screen simply click on the the top right corner. button also found in Page 10

11 Publishing the Home Page: Once you have made all of your changes to the homepage you MUST click on the button to save the changes to the live site. Step 1: Click on the button found in the top right corner. Step 2: Next you will see a Confirmation message box popup. Click OK to continue or Cancel to abort. Step 3: When the Publishing is finished you will see a message at the top right corner with a date and time of completion. Page 11