clubrunner website homepage design guide · 2021. 3. 19. · district 5170 the purpose of this...

District 5170

The purpose of this document is to provide guidance in the development of club websites through the utilization of ClubRunner software. It specifically targets the development of the website Homepage.

Each section has reference videos matching the text. In addition, ClubRunner training videos are referenced within each section.

This document is intended to be used by club members with some or limited technical abilities. It should provide some level of knowledge to improve or update ClubRunner website Homepages.

2 PDG Arley C. Marley III Return to Table of Contents March 19, 2021

Table of Contents

Introduction 3

Settings 4

Choosing a Theme 5

Website Designer Sections 5

Developing the Content Section 6

Widgets 8

Working with Custom Widgets (Page Specific) 8

Widget-Customize Properties & Appearance 10

Widget-Modifying the Content 11

Menus & Footers 12

Edit Menu Section 12

Edit Footer Section 13

Creating the Carousel 14

Site Pages and Custom Pages 18

Building a Site Page 19

Sharing Your Stories 26

Adding Social Media Accounts 35

Additional Resources 37


Introduction

Most of the clubs in our Rotary District 5170 use ClubRunner, an interactive website and membership management tool that facilitates easier information sharing and communications with every member within the district. All Rotarians already have a login name and password defined, and depending upon your role in the club or district, various features are available once you enter the members’ section.

It is important to note that your website, once published, can be seen throughout the world. ClubRunner features permit a significant amount of information accessible by club members. In my opinion, the information placed on your Homepage should present an outside view to the world of the relevancy of your club within your local community and the message you wish to convey to the outside world. If your Homepage presents mainly information directed towards your members, you miss the opportunity to share your club stories! See Campaign Opening video.

Make sure that Access Levels are assigned as needed to maintain the Club website. See Administration Overview video.

https://vimeo.com/480976978/9b5784b781

https://www.clubrunnersupport.com/article/333-what-access-levels-are-there-in-clubrunner

https://vimeo.com/484233791/e55b37d441


Settings

Clicking on each of these topics should be self-evident.

Keep in mind that ClubRunner does provide additional information. What is ClubRunner?

Go to Website Designer tab:

https://site.clubrunner.ca/


Choosing a Theme See Administration Overview video.

Community (Next Gen-No Banner) Theme

Several other themes are available. It is best to experiment! See https://www.clubrunnersupport.com/article/924-content-template-in-clubrunner for more detail.

Website Designer Sections See Administration Overview video.

This is where you will accomplish most of your work.


https://www.clubrunnersupport.com/article/924-content-template-in-clubrunner



Developing the Content Section

In my opinion, this is the important section that defines your worldly presence.

The first thing that should be done is to determine the “Content Template.”


There are many template options. I personally like the “Full Width Top Band above Three Columns” template and will be using it throughout this document. I suggest you view the others and choose the one that best fits your needs.

Reviewing the three-column template that I use:

Each section within the template permits the use of Widgets. These provide an easy method by which to define your topics. These are displayed on the left side of the screen as shown below:

Each Widget is a “Drag & Drop” item into the template. When moved into the template, the attributes can then be set and saved. See the examples.


Widgets See Widgets video.

Working with Custom Widgets (Page Specific)

Adding a Page Specific Widget:

1. Drag the “Page Specific Widget” and drop into the desired location in the Right Column.(Note that this can be easily moved later.)

2. The following window will open:

3. Let’s start by giving the widget a title. How about “Test Widget”?

Let’s create a new widget and place it into the Right Column of the template.

https://vimeo.com/484233974/2bd00f7181


1. Select Format to format the text.

2. You can continue by adding to the content area or “Save” and return later to add the content.3. Let’s select “Save.”4. The “Test Widget” is now loaded into the list of widgets and placed into the right column of

the template.

5. When you place the cursor on this new widget, note the following:

6. The widget cannot be seen until it is “Published” as noted by the button at the top of theDesign screen. The “Page Preview” is also not available until after publishing.

Provides a Preview

Modify the content

Customize properties & appearance Removes the widget from

the page but does not delete the widget.

You can move the widget by placing the cursor on the widget and drag to new location.


Widget-Customize Properties & Appearance

1. Fill in each item as desired.2. Go into Format Options to produce desired heading.

One feature is the Source section. If you understand HTML, this can provide more flexibility.

Source Code: <div style="text-align: center;"><span style="font-size:18px"><span style="font-family:arial black,helvetica,sans-serif">Test Widget</span></span></div>

3. When finished, be sure to select “Apply Changes” button.4. And, select the “Save” button to save the Widget appearance.


Widget-Modifying the Content

This section spells out your detailed message! Be clear and concise!

This section provides features such as pasting in a Word or text formatted document. Whether it is loading URL links or embedding images, the user is encouraged to experiment with this section.

Once completed, it can be saved as a draft or published. With either selection, you are directed back to the Homepage.

If saved as a draft, the widget on the template page is orange in color.

If published, the color changes.

Once published, the completed widget should look like this:


Menus & Footers See Menus & Footers video.

Edit Menu Section

This is the main menu and can have a series of drop-down menus. Here are the main headings:

New menu items can be added but note that too many will result in the menu going to multiple lines.

Expanding the entire menu:

https://vimeo.com/484234313/c4a4bd389c


Adding a Menu Item to the Home Page:

As noted by the “Link Type”, many options are available. When an option is chosen, a new drop-down menu appears relating to that specific selection.

In most cases, a checkbox for “Open in a new window” should be selected.

Be sure to “Save,” once the selection is made.

Edit Footer Section

This section is easily created through copy and paste of Word document or using HTML.

Be sure to “Save Footer.”

The basic layout for the Footer can be set through the Templates.


Creating the Carousel See Carousels video.

The carousel is a feature that can bring more life into your website. It can be placed into different sections of the website template but I personally prefer having it at the top of the Homepage.

1. On the Administration Page, select “Edit Photo Albums” under Website Manager

2. Go to “Photo Albums Widget” option:

3. Select “Create New Photo Album” option.

https://vimeo.com/484234116/6d61d2aa77


4. Once a Title is added, the Permalink is automatically created:

5. Add your name as the “Owner.”6. Let’s do not worry about this section at this time.7. Select “Save” button.

The Drop-Down menu has 4 options:

8. Select “Photos”


9. Uploading Photos

Note the section requirements:

I use Photoshop* to create the photo sizing.

1. Check resolution of each photo.2. For combo pictures, created new image with a size of 1100 x 350, 72 dpi.3. Rename combined pictures: (Above listing)4. Used Bridge to drag and place each photo into the 1100x350, 72 dpi image. Place and do

NOT crop. CR looks at the width & height to fit. Saved as “name-1100x350, 72 dpi.jpg”.These were then uploaded into ClubRunner Photo Album.

*PhotoShop is a Trademark product of Adobe, Inc.

Add files & Upload:

Go to Website Designer and add Carousel (See Essentials):


Be sure to “Save.”

Go to “wheel” and setup carousel:

Reviewing how pictures were organized:

Do not forget to “Save.”

The view after Publishing:

Note: When viewing a Published screen and the screen does not match what you have published, select F5 to refresh!

Be sure to select “Show Title” to get:

Source Code: <div style="text-align: center;"><font face="arial black, helvetica, sans-serif">Enterprise Leadership Conference</font></div>system.</em></span></div>


Site Pages and Custom Pages See Site Pages video.

I find these features as major attributes to the ClubRunner website program. First an overview of both.

A Site page always has built in menu navigation on the left side margin. This navigation cannot be taken away. Site pages help organize the layout of pages. Site pages are less useful if you only have a small amount of information, i.e. that fits on one page or less.

However, Site pages are great if you need a series of pages. For example explaining a broad topic like Rotary Grants may require subsections like "What is a Grant?" and "Where to apply," etc. Site pages excel at breaking up and organizing these sections of data.

Site pages cannot use widgets. Only text, links, images, and video.

A Custom page starts off as literally a blank page. The interface to edit a Custom page is very similar to the Website Designer interface (dragging widgets around). A Custom page can have 1 column, 2 columns or 3 columns, appearing in any variation you choose, e.g. wide left/narrow right, or vice versa. With Custom pages you have much more flexibility with the layout and look.

Custom pages are great if you do not have a lot of content (i.e. one page or less).

Custom pages can use widgets. As an example you can setup a custom page that uses the Speakers widget in one column, and the Events widget in the other column. The nice part of using these built in "automatic" widgets is that creating a Speakers/Events page like this means you'll never have to edit that Custom page again, as both the Speakers and Events widgets update themselves every day.

Go to ClubRunner help for more on these.

https://www.clubrunnersupport.com/article/1397-site-pages-vs-custom-pages

https://vimeo.com/484234210/30c478d9f0

https://www.clubrunnersupport.com/article/1397-site-pages-vs-custom-pages


Building a Site Page Select “Edit Site Pages” from the Administration page.

Select “Site Pages”

Select “Create New Site Page”

Give it a “Name”. How about "My New Site Page”?

Reference: https://www.clubrunnersupport.com/article/773-site-pages-library-overview

https://www.clubrunnersupport.com/article/773-site-pages-library-overview

https://www.clubrunnersupport.com/article/773-site-pages-library-overview


Once typed into the Title box, the Permalink is automatically generated.

Check the display locations and Access level.

The Owner is important. The Owner controls the content of this Site Page and access through normal log-in to edit.

Selecting the Format Options allows a better look with various fonts and can add a link and an image. Here I changed the Font.

Be sure to select “Apply Changes.”

The data is added and now select “Create.” The new site page is now linked to the Home Page.

Go to the “Actions” drop-down menu on the right and select “Edit.”


As you can now see, you have a blank slate from which to design your Site Page. This is where you want to make the best use of the information for this page.

I would start with the “Edit Subpage Content” section.

Remember that this is what the viewer will see when opening this page for the first time. Make your message clear and concise. List your contact information and if you have a committee, list them. There is a lot of flexibility with this section.

Now, “Save and Publish.”


This newly created subpage content can be edited at any time as needed.

Now to edit the Menu. This section provides significant flexibility.

Select “Edit Menu.”

Here are some tips to keep in mind when working with this:


1. The subsections can be moved within the site.a. By placing your cursor on the left side of the subsection, a cross appears allowing you

to drag and drop that subsection to a different location on the menu system.2. On the right side of each subsection, the drop-down arrow permits editing or deleting that

subsection. For example, if you have no Photo Albums, I would delete that subsection. Youcan always come back and add it back in. Just select the “Add New Group” button.

3. The Add New Link button at the top or the Add Link button on each subsection permits addingmore links.

Once completed and saved, you will return toe the main subpage view. On the upper right, select the “Preview Subpage” button.

Adding My New Site Page to the Navigation Menu under “Get Involved.”


Going back to the Website Designer, select “Edit Menu.”

Select “Add New Menu Item.”

Let’s give it a title of “Arley’s Site Page.”

Just highlight the respective site page and then select “Save.”


The Manage Home Page Menu page is shown.

Select “Publish Menu.”

Going back to the Home Page:

The new link is created!


Sharing Your Stories See Building Stories video.

This section is all about telling your stories showing the relevancy of your club to the local community and the world.

In the Website Designer section, two widgets are provided to share your stories.

ClubRunner Reference Documents:

https://www.clubrunnersupport.com/article/1304-how-to-create-and-edit-a-story https://www.clubrunnersupport.com/article/1205-widgets-stories https://www.clubrunnersupport.com/article/1206-widgets-news

Note: To view your results, “Page Preview” instead of “Publish” can be selected! However, “Publish” is required to finalize.

Start with the Home Page Stories Widget:

Drag this to here. The Widget will open and give it a name in the properties section.

The Stories widget is used the most. This widget will allow the Club to be able to easily update the website or bulletin with stories. After you create a new story, a window will appear asking where you would like the story to be displayed. You can choose to display it in the Stories widget and other areas. The News Widget is not an option.

The News widget it used if you would like to have stories in more than one location on the page. If you had two Stories widget on the same page they would have the same content. The News widget will allow you to display different content. For an example, if you would like to have stories on the left side of the page and different stories on the right side, you would use the Stories widget on the left or right and the News widget opposite. This would display different content in each side.

https://vimeo.com/484234393/628d4c3eda

https://www.clubrunnersupport.com/article/1304-how-to-create-and-edit-a-story

https://www.clubrunnersupport.com/article/1205-widgets-stories

https://www.clubrunnersupport.com/article/1206-widgets-news


Be sure to “Save”

Going to the content section:

Here are the two stories I have already created:

These two are already loaded into this Widget but I can also review the Story Library.

Source Code: <div style="text-align: center;"><span style="font-size:20px"><span style="font-family:arial black,helvetica,sans-serif">Our Club in Action</span></span></div>

This creates the “Read More” box to continue the story.

I have set 5 stories to display.


This is what is seen on the Home page:

Creating the stories:

Select the Stories Widget:


These two are presently in the same widget as shown above. Select “Create New Story” to be placed in this collection.

Let’s “Create Story” (Adds a New Story)


This configuration (boxes checked) will place this new story with the other two stories in the existing widget. To change, go to Story Library and select drop-down menu on right.


Select “Display Options”

Select “Display on Story List Page” only and “Save.”

This story is now decoupled and can only be seen as part of a new widget. Now we will use the “Home Page News” Widget.

Going to the content section:


This window will now open:

Selecting Page Preview, all of these are seen:

The order of these stories can be moved by selecting here and dragging to new location.


Reviewing the Properties section for this Widget

Note: The Settings options are different between the “Home Page News” Widget and this latest “Home Page Stories” Widget.


Let’s now remove the two stories from the Home Page News that are duplicated in the Home Page Stories.

Check the two to be removed.

Click on the “Remove Selected” button and this message will show:

Select OK.

Only the one story remains in the “Home Page News” section:


Adding Social Media Accounts 1. On the Site Administrations page, scroll down to Website Content.

2. Next, click on the Home Page Content.

3. Click on Home Page Custom Widgets.

4. You are brought to a list of your previously created custom widgets, if any. You will now create anew custom widget on which to place your Social Media links. Click on the orange Add button.

5. This brings you to the Add New Custom Widget page. Enter a name for the widget inthe Title field.

6. Now, click on the Source Code button in the tool bars above the content editing field. This allowsyou to paste HTML directly into the field and have it display correctly.


7. Copy the code in the box below:

<div style="text-align: center; padding: .5em; margin: .5em"> <a href="http://www.facebook.com/pages/Rotary-International/7268844551" target="_blank"><img alt="Facebook" height="30" src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/Facebook_58.png" width="30" /></a> <a href="http://www.linkedin.com/groups?gid=858557"target="_blank"><img alt="LinkedIn" height="30"src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/Linkedin_58.png" width="30" /></a> <a href="http://vimeo.com/rotary" target="_blank"><img alt="Vimeo"height="30"src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/Vimeo_58.png" width="30" /></a> <a href="http://twitter.com/rotary" target="_blank"><img alt="Twitter"height="30"src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/Twitter_58.png" width="30" /></a> <a href="http://www.youtube.com/user/RotaryInternational"target="_blank"> <img alt="YouTube" height="30"src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/YouTube_58.png" width="30" /></a> <a href="https://www.pinterest.com/rotary/" target="_blank"><imgalt="Pinterest" height="30"src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/Pinterest_58.png" width="30" /></a> <a href="https://www.instagram.com/rotaryinternational/?hl=en"target="_blank"><img alt="Instagram" height="30"src="https://clubrunner.blob.core.windows.net/00000000001/Images/Social%20Media/Instagram_58.png" width="30" /></a> </div>

8. Paste the code you just copied into the Custom Widget's editing field

9. Click on the Source button again, and you will see your images

10. To change where the links point to, Right Click on the image, and choose Edit Link

11. Enter the correct link to your Club's social media page, and then click Okay

12. Repeat steps 10 & 11 as required.

37 PDG Arley C. Marley III March 19, 2021

13. You can highlight any image, and delete it to remove the that social media link/site.

14. When you are done, click on Save and Publish.

15. The new Social Media widget is now available for placement on your webpage.

Additional Resources

Club Access Levels: https://www.clubrunnersupport.com/article/333-what-access-levels-are-there-in-clubrunner

ClubRunner does provide extended training through various pre-recorded webinars.

https://www.clubrunnersupport.com/article/1799-video-website-live-designer-webinar-with-zach-w

https://www.clubrunnersupport.com/article/1336-video-clubrunner-101-with-jeffrey-laforteaza

Arley’s Video Library:

Design Campaign (Length 5:24)

Administration Overview (Length 7:52)

Widgets (Length 10:12)

Carousels (Length 8:13)

Site Pages (Length 9:38)

Menus & Footers (Length 4:05)

Building Stories (Length 10:20)

Return to Table of Contents



https://www.clubrunnersupport.com/article/1799-video-website-live-designer-webinar-with-zach-w

https://www.clubrunnersupport.com/article/1336-video-clubrunner-101-with-jeffrey-laforteaza

https://vimeo.com/480976978/9b5784b781


https://vimeo.com/484233974/2bd00f7181

https://vimeo.com/484234116/6d61d2aa77

https://vimeo.com/484234210/30c478d9f0

https://vimeo.com/484234313/c4a4bd389c

https://vimeo.com/484234393/628d4c3eda