Public Website Management

 

Overview

Uplifter offers the ability to host a public facing website within the standard software. This is available on the Step Up tier or higher. With easy to use tools and templates you can recreate your existing site or build a brand new one from the ground up. Utilizing the public facing site offers a streamlined experience for your members and can save your club site hosting costs. 

 

Select Your Theme

The first step to establishing a public site to call your own is to set your theme. To do so, please navigate to Settings > Themes. Here, you can select your desired overall site theme. Each theme will offer a slightly (sometimes greatly) different feel. Be sure to test them out to find the one that suits your club the best! For those clubs affiliated with Skate Canada, you will find a Skate Canada Theme available in the list.

1.png

Once you have selected an overall theme you will be brought to the Theme Editor!

 

Theme Editor

Uplifter's Theme Editor offers a deep level of control over your site's look and feel while being easy to use and navigate. The Theme Editor is segmented into four basic listings: Header, Body, Footer, and Additional Images. Along the top of the Theme Editor you can select to PreviewMobile.png Preview your site as it would be viewed on a mobile device as well as Save your changes at anytime. 

2.png

While adjusting elements within the Theme Editor you will notice the preview updates in real time for your approval.

The Header section deals with the main navigation bar and above. This includes the top navigation bar and banner images for both standard and mobile. 

3.png

Images: The Images section of the Header menu offers the options to upload a banner image for your club on both standard and mobile. Your full window banner must be 950px (width) by 100px - 200px (height) for a successful upload and implementation. Your mobile view banner/logo should be 75px - 320px (width) by 65px (height) for a successful upload and implementation. 

To upload an image select the [Choose File] button below the respective image you wish to change. Use the file navigator to find your desired image and select "Open" (or similar) to choose the file. You can select to Delete Delete-L.gif any unwanted or erroneous images or Restore Restore-L.gif any accidentally deleted images. 

Top Navigation Bar: The Top Navigation Bar section of the Header menu offers the ability to select a specific font for the top navigation bar. You can also select text, background, dropdown, and hover colours. For more control, be sure to expand any "Simple Mode" sections to view the "Advanced Mode" options. 

Main Navigation: The Main Navigation section of the Header menu offers the ability to select a specific font for the main navigation bar. You can also select text, background, dropdown, and hover colours. For more control, be sure to expand any "Simple Mode" sections to view the "Advanced Mode" options. 

Background: The Background section of the Header menu offers the ability to change the background colour of your banner. This does not affect the main portion of the site, only that which lies behind your banner. This is especially useful for banners with translucent/transparent portions. 

Body

The Body section deals with all elements of your page between the main navigation bar and your footer. This includes your club's filter location, fonts, links, buttons, attention messages, and colours for both your standard pages as well as your system generated pages (Registration, Checkout, Shopping Cart, News, and Contact Us).

4.png

Side Navigation & Filters: The Side Navigation & Filters section of the Body menu allows for the toggling of the site's filter position. This can either be left or right and can have quite a notable effect on your site's flow.

Text/Links/Actions: The Text/Links/Actions section of the Body menu offers the ability to select a specific font for the overall site. You can also select text, heading, and hover colours; link active and hover colours; and button active and hover colours. For more control, be sure to expand any "Simple Mode" sections to view the "Advanced Mode" options.

System Attention Message: The System Attention Message section of the Body menu allow you to adjust the font and background colour of system alerts and notices.

Shopping Cart: The Shopping Cart section of the Body menu offers the ability to select text and background colours for the Shopping Cart and Checkout pages. For more control, be sure to expand any "Simple Mode" sections to view the "Advanced Mode" options.

The Footer section deals with the site's footer bar and below. This includes the bottom navigation bar, footer background and link colour. 

5.png

Footer Bar: The Footer Bar section of the Footer menu offers the ability to select a desired colour for both the text and background of the footer bar.

Footer Area: The Footer Area section of the Footer menu allows users to control the colour of the footers main background portion along with texts and links therein.

 

Public Page Management

Once your theme has been selected and updated to suit your clubs look it's time to create some public pages to offer your members information, news, contact information, and more. The first step is to create, edit, and adjust the pages themselves. 

Create A Page

  • Navigate to your Public Site
  • Select [+]New Page
  • Enter desired page slug

To create a page on your public site you should sure you are logged in. Next, select any instance of [+]New Page where you would like to add a new page to your site. This is most readily found along your main navigation bar. However, you can also add pages to your drop downs by hovering over a page and selecting the [+]New Page option below the menu item. Once you have selected [+]New Page you will be prompted to enter a page slug. A page slug is what will be added to the URL of the page. Enter your desired slug and select OK. You will be taken to your newly created page.

If you would like to add a page to your top navigation bar or footer navigation bar you can do so by first creating the page, then adjusting the Page Details. Once you have selected [+]New Page you will be prompted to enter a page slug. A page slug is what will be added to the URL of the page. Be sure to select Save Page to keep any newly created pages.

Edit Page Details

  • Select Edit Page Details
  • Adjust details
  • Select Save Page

Once you have created a page you will want to update the page details. This is done by selecting Page Details from the top right corner, along the page toolbar. Selecting Page Details will expand a menu that offers the ability to adjust the basic elements of the page. Once you are done adjusting the details be sure to select Save Page to keep any adjustments made. 

Page Template: Using the Page Template drop down you can select a basic overall template for the page. Be sure to play around with the various options to see what works best for you. Please note, selecting 'Registration Full Page' will offer sub-template styles via the page content edit option (see: Customizing Your Registration Page(s)).

Revisions: The Revisions drop down menu will offer the ability to revert back to any previously saved versions of the page. Should you make erroneous or dramatic changes that you do not wish to keep you can simply select a revision listing from the menu to return the page to what it once was. Be sure to select Save Page to keep this return.

Meta Tags: Meta tags can be used to add tracking information or keywords for search engine optimization. To add a tag, select +Add Tag and enter the name of the tag you will be applying. Below, enter the tag content. Select Save Page to keep any changes. Select Delete Delete-L.gif to remove any unwanted tags.

Show In: By toggling the elements within the Show In section you can manipulate where your page will display. Selecting Main Menu, Top Nav, Bottom Nav, or any combination of the three will place a page link within those menus bars. Selecting Site Map will either enable or disable the visibility of the page for the general public. Please note, If you deselect all options in Show In and save your page you will only be able to return to it via the explicit URL.

Hidden Pages can be created by selecting one of the menu items and deselecting the Site Map option. This is useful for editing but can also be used in instances where you would like to offer a URL for only specific members to see while the general public is kept unaware. Please note, however, that this is in no way a 'secure' page and should not contain sensitive information. 

Page Title: Enter a value in this field to update the title of the page. This affects the link displayed in your menus as well as the tab in your browser.

Keywords: The Keywords field allow you to enter comma separated keywords to your pages. Things like registration, Canskate, Dance, etc. The few and more succinct the better.

Description: A summary/description of your page and its contents/purpose. The more succinct the better.

Edit Page Order

  • Select Edit Page Order
  • Adjust Order
  • Select Save Changes

To update the order of your pages select a page at the level you wish to make the adjustments* at, then select Edit Page Order. Drag and drop your pages into the desired order and select Save Changes to keep your adjustments. 

*The level you wish to adjust may vary. If you wish to adjust your main navigation bar for instance, you would select one of the links along the bar itself - perhaps "Registrations". If you would, instead, like to update the order of sub pages you would then wish to select to navigate to one of the sub pages before select Edit Page Order.

Delete A Page

  • Select Delete Page

To delete a page from your site first navigate to the page in question. Select Delete from the page toolbar along the top of the page. You will be asked to confirm. Select OK if this page and its contents are no longer needed. Please note, you cannot renege this action once confirmed!

 

Page Content Management

Once you have created and adjusted your page as desired you can begin to add page content. With Uplifter's page editors you can quickly and easily add the content you wish. To begin, select the Page Edit icon PageEdit-Large.png on your new or existing page to open the page editor.

Editing Page Content

  • Select Page Edit PageEdit-Large.png for the section you wish to edit
  • Edit the content as desired
  • Select Update
  • Select Save Page

To begin editing a page select Page Edit PageEdit-Large.png to begin editing a specific section of the page. Using the page editor tools, enter and format your information, images, and links as desired. Once you are happy with your page information, select Update within the editor and don't forget to select Save Page from the page toolbar to keep the changes.

Repeating/Deleting Sections

  • Select Repeat Section RepeatSection-Large.png to add a new section
  • Select Delete Section DeleteSection-Large.png to remove an unwanted section
  • Select Save Page to keep your changes

Some page templates (selected via the Page Details) will offer the ability to add or remove sections of the page to suit your needs. To add a new section to the page, select Repeat Section RepeatSection-Large.png. This will open a content editor with the information copied from the section of origin. Update the information as desired and select Update to save the new section to the page. To remove any unwanted sections, select the Delete Section icon DeleteSection-Large.png. Please note, you cannot delete the initial/original section. Don't forget to select Save Page after any desired changes have been made.

Global Sections

Sections of pages marked with the globe icon Global-Large.png are "global" elements/sections. This means that you will see these sections repeated on many, if not all, public pages of your site.

Using the Content Editor

NOTE: Placing your cursor over an icon in the toolbar will give a short description of its function.

Insert an Image

  1. Click the Insert Media button () to bring up a File Browser
  2. Click Choose File to select a file to upload to the site
  3. Click the Images tab to view currently uploaded images
  4. Select an Image
  5. Edit width, height, title and description if desired
  6. Click Insert Image

Note: the filesize limit for uploading is 8MB.

Insert a Link

  1. Click the Insert Link button () to bring up a File Browser,
  2. Enter the website address in the URL box
  3. Enter the text you want to be used for the link in the Text to Display Box
  4. Title: optional, is the message that appears when a user hovers over the link
  5. Target: optional, indicate whether to open the link in a new window or not
  6. Click Ok

Use an Image as a Link

After inserting an image (see above):

  1. Click the image to select it
  2. Click the Insert Link button (
  3. Enter the URL and optionally a Title and Target
  4. Click Ok 

Embed a Video

If you have uploaded a video to another site such as YouTube or Vimeo, you can add it to your site with just the video URL.

  1. Click the Insert Media button () to bring up a File Browser
  2. Click the Embed Video tab
  3. Paste the video URL into the box
  4. Click Insert Video

Add Custom HTML

You can also add custom HTML to your page. This functionality allows for basic in-line CSS and the inclusion of widgets from sites like Facebook, Twitter, etc.:

  1. Click the Source Code button (
  2. Add or edit the html as required
  3. Click Ok 

Note: Many sites will offer easy-to-use/copy-and-paste HTML to embed widgets on your site. While many of these will function perfectly, we do not directly support their use and cannot guarantee their functionality. 

Insert an Anchor

You can add an "anchor" anywhere on the page. An anchor is an invisible placeholder that you can link to from the same page, so that you can send people to a specific place on the page when they click a link. To insert an anchor:

  1. Click the location on the page you would like to add an anchor (The location where you want to send people to)
  2. Click the Anchor button ()
  3. Enter a Name to describe the anchor for your reference (not publicly visible)
  4. Click Ok

Link to an Anchor

After inserting an anchor anywhere on a page, you can link to it from the same page:

  1. Click the place on the page you would like to insert the link
  2. Click the Insert Link button (
  3. From the Anchors drop-down list, select the Anchor you would like to link to
  4. Url: Do not change this, or the anchor won't work.
  5. Text to Display: change to whatever you want to be visible to the user
  6. Optionally add a title and target
  7. Click Ok

 Upload Other Files

You can upload files such as pdf's, word documents, and video files which you can then add for users to download (see below):

  1. Click the Insert Media button () to bring up a File Browser
  2. Click Choose File
  3. Select the file in your file system you would like to upload
  4. Click Open
  5. Wait for the file to automatically upload. You will now see the file in the Files tab.

Insert Other Files to be Available for Download

After uploading a file such as a pdf, word document, or video file (see above), you can insert a download link onto your page for the file:

  1. Click the place on the page you would like to add a download link
  2. Click the Insert Media button () to bring up a File Browser
  3. Click the Files tab
  4. Click the file you want to add to your site
  5. You can change the link name by clicking the link and then clicking the Link button (
  6. Change the Text to Display to whatever you like
  7. Click Ok

IMPORTANT: Once you have completed any edits to a content section, click Update to confirm changes to that section, and then click Save Page at the top right of the site or the changes you just made will be lost when you leave the page.

Integrating 3rd Party Plugins

Third party plugins can be used on your site to add some interesting features, such as Facebook like button, a Twitter timeline or Tweet button, or a Photobucket Slideshow gallery, for example. To add these plugins, you need to find the code from the third party's website, and then copy and paste it into your site. See below for more specific steps.

Add Third Party Plugin to your Site

Many developers outside of Uplifter will create applications, widgets, or other tools that can be used/implemented on your Uplifter site. Sites and services like Facebook, Twitter, and Photobucket offer their own code snippets that offer the chance to enhance your visitor's experience. To use these snippets please follow the directions below. However, please note that third party code is not directly supported. As such, we cannot promise it will function as desired on your Uplifter page.

  1. Ensure you are logged into your Uplifter admin account.
  2. Navigate to the public page you wish to edit.
  3. Select the Page Edit PageEdit-Large.png icon for the section you would like to add to.
  4. In the toolbar, select Source Code SoureCode.png

    7.png

  5. Discern the area you wish to implement the plugin/widget and paste your code.
  6. Select OK in the Source Code editor and review your changes in the content editor. Please note, some code may be rejected by the editor. It is also possible the code will not be functional when viewed through the content editor and may require you to proceed to step 7.
  7. Select Update in the content editor and review your changes on the page.
  8. Select Save to save any desired changes to the page.

Finding Third Party Plugin Code

Many popular sites and applications will offer third party plugin/widget code that you can implement on your Uplifter page. Some of the more popular options will have dedicated pages for your use. Please find a few examples (but certainly not an exhaustive list) below, and always be sure you are implementing code from trusted sources.

Facebook

https://developers.facebook.com/docs/plugins/

Twitter

https://publish.twitter.com/#

https://about.twitter.com/resources/buttons

https://dev.twitter.com/web/embedded-timelines

Photobucket Slideshow

http://support.photobucket.com/hc/en-us/articles/200724144-How-to-Create-and-Share-Slideshows#embed

 

Registration Pages

The registration page can be customized and new custom registration pages added to the Registration menu. This allows admins to add pages that are pre-filtered and pre-organized by category, season, or otherwise, and make the registration process simpler for their members.

Main Registration Page

Admins have the ability to update the main registration page that members arrive to when clicking the Registration button in the menu. You can update the message at the top of the page, change the overall template layout, and choose default filters for the programs that will display. While logged in, click the Edit  icons on the page to make the changes.

Secondary Registrations Page(s)

When creating a new public-side page, select the Registration Full Page template to create a new registration page. This is how you can create extra customized registration pages that might be for a specific category, category level, or season.

Top Message

Click the Edit  icon beside the top message to begin customizing this message.

  • If you would like to remove the yellow background from the banner, select the Source Code  button from the editor toolbar and remove the code: <div class="warningMsg" style="margin-bottom: 10px;">.
  • If you would like to remove the alert message all together, select the Source Code  button from the editor toolbar and remove all content present.

Filters

Click the Edit  icon beside Program Registrations to begin customizing the default filters for this registration page. This will let you customize the list of programs members will first see when landing on this registration page.

After selecting to edit you will be presented with a list of your currently available programs along with available filters. 

By selecting filters from the Filters Available section you will reduce the listed programs and applicable filters available to members. As you add filters they will be listed below the drop down menu. By selecting Delete Delete-L.gif you can remove the selected filter. 

Once you are happy with the filters you have applied be sure to Update your segment and Save your page!

 

Powered by Zendesk