Index
Overview
Uplifter offers the ability to host a public facing website within the standard software. This is available on the Fully Uplifted tier (and also for older clubs grandfathered into the Step Up tier). 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.
The Theme Editor is found by navigating to Settings > Themes. In order to access the public editing tools, you will need the following permissions: Admin, Manage Public Content, Manage Site Theme.
FAQs
Can I Remove/Edit The Uplifter Banner?
Can I Add My Club's Facebook/Twitter/Instagram Feed?
Can I Hide A Page That Is Not Ready?
Webinar
Additional Resources
The article below speaks to the general features and functions available on Uplifter for public site creation. For a guide to setting up your site with explicit instructions you may be interested in our article Let's Build Your Site. Additionally, our article Uplifter Calendar can help you customize and embed the perfect calendar to showcase your programs.
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.
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 Preview your site as it would be viewed on a mobile device as well as Save your changes at anytime.
While adjusting elements within the Theme Editor you will notice the preview updates in real time for your review.
Global
The Global section deals with a select few settings that manage site-wide settings. This is also where you can introduce custom CSS.
Fixed Width: Set the width of your site. This allows you to set a fixed width, or select 100% to always fill the screen.
Body Content Padding: Set the amount of white space between the major sections (header, body, footer).
Public CSS Override: Enable the ability to add custom CSS to the public side of your system. Please note using this feature requires you to implement, validate, and maintain any code you add.
Header
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.
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 any unwanted or erroneous images or Restore 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).
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.
Footer
The Footer section deals with the site's footer bar and below. This includes the bottom navigation bar, footer background and link colour.
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.
Additional Images
The Additional Images section offers the customization of your Favicon and Email banner.
Favicon: The Favicon is the icon that displays on the left-hand side of a browser tab when a user accesses your site. By default, this will be an Uplifter branded favicon. Upload your desired ".ico" file to replace this.
Email Top Banner: The banner image that is shown at the top of all outbound emails from your organization. By default, this will be an Uplifter branded banner. Upload your desired image to replace this.
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'
- Click Save Page
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 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.
ie. http://yoursite.uplifterinc.com/'slug'
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 Edit Page Details from the top right corner, along the page toolbar. Selecting Edit 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 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, as all recipients of this URL will be able to share the hidden page with any other user.
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.
Note: The following fields will only be visible when the "Create Page Redirect" template is selected from the template drop down menu.
Redirect Target: The web address which you would like the user to be redirected to when they land on the current page. The full address including the protocol is required for the redirect to work correctly. The redirect link can point to another page on your site or an external link to any other website.
Redirect Type: The type of redirect to use. For more information, consult google documentation on redirect types.
Delete a Page
- Select Delete Page
To delete a page from your site first navigate to the page in question. Select Delete Page 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!
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.
Move Page
- Select Move Page
- Enter the new URL of the page
- Select the copy/move option
- Click Copy/Move
To move a page to a new location first click the Move Page option. In the menu you may now specify the new URL where you would like the page to reside. All admin-created public pages of your site will start with /pages/. The text thereafter will dicate the location. Note that you can move your page to become a sub-page of an existing page of your site. This can be done by adding the parent page's slug before the child page's slug.
Next you will need to select a copy/move method:
Copy current page to new location: Copy the content of the current page and recreate it in the new location. Leave the current page intact.
Copy content to new location & delete this page: Copy the content of the current page and recreate it in the new location. Remove the current page.
Move content and revision history to new location: Copy the content of the current page and recreate it in the new location. Additionally move all of the existing revisions to the new location. Remove the current page.
To finish up click Copy/Move. Please also be sure to click Save Page once the changes are completed.
Page Section Management
Once you have created and adjusted your page as desired you can begin to add page content. This begins with working with your sections. Certain sections may also be repeating or global, giving them special properties in the syste.
Editing Page Content
- Select Page Edit 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 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 to add a new section
- Select Delete Section 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 . 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 . 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 are "global" elements/sections. This means that you will see these sections repeated on many, if not all, public pages of your site.
Page Content Management
Within each section you can customize and edit the content therein. This is as easy as selecting the Edit icon for the section and starting to type. You can also use the editor toolbar to perform basic or advanced actions.
Templates
- Click to Edit your desired page section
- Click the Insert Template icon from the toolbar
- Use the drop down to select your desired template
- Click OK
Add An Image
- Click to Edit your desired page section
- Place your cursor where you would like your image to be placed
- Click the Media icon from the toolbar
- Upload your desired image (if required)
- Select your Images tab and choose your desired image
- Click Insert Image
- Adjust image size (if required)
Note: the file size limit for uploading is 8MB.
Add A Text Link
- Click to Edit your desired page section
- Enter your desired text and style it in your desired manner
- Highlight your desired text
- Click the Link icon from the toolbar
- Enter your desired URL into the URL field (be sure to add https:// if the link leads to an external site)
- Select your Target (None = the link opens in their current tab; New Window = the link opens in a new tab/window)
- Click OK
Tips to working with links:
- If you are linking to a site outside of your Uplifter be sure to prepend https:// to your URL
- If you are linking to a site outside of your Uplifter site it is best practice to set the Target to New Window so that users do not lose their page.
- If you are linking to somewhere within your Uplifter site you can ignore the root URL. Ex. to link to myclub.uplifterinc.com/registrations you can just enter /registrations into your URL field.
Add A Button Link
- Click to Edit your desired page section
- Enter your desired text
- Highlight your desired text
- Click the Link icon from the toolbar
- Enter your desired URL into the URL field (be sure to add https:// if the link leads to an external site)
- Select your Target (None = the link opens in their current tab; New Window = the link opens in a new tab/window)
- Set the Class to Button
- Click OK
A button created in this fashion will use your site's default button styles. You can update your site's button styles via Settings > Themes > select your theme > Body > Text/Links/Actions > Fields and Buttons.
Tips to working with links:
- If you are linking to a site outside of your Uplifter be sure to prepend https:// to your URL
- If you are linking to a site outside of your Uplifter site it is best practice to set the Target to New Window so that users do not lose their page.
- If you are linking to somewhere within your Uplifter site you can ignore the root URL. Ex. to link to myclub.uplifterinc.com/registrations you can just enter /registrations into your URL field.
Add An Image Link
- Click to Edit your desired page section
- Add an image to your page (if require)
- Single-click on the desired image
- Click the Link icon from the toolbar
- Enter your desired URL into the URL field (be sure to add https:// if the link leads to an external site)
- Select your Target (None = the link opens in their current tab; New Window = the link opens in a new tab/window)
- Click OK
Tips to working with links:
- If you are linking to a site outside of your Uplifter be sure to prepend https:// to your URL
- If you are linking to a site outside of your Uplifter site it is best practice to set the Target to New Window so that users do not lose their page.
- If you are linking to somewhere within your Uplifter site you can ignore the root URL. Ex. to link to myclub.uplifterinc.com/registrations you can just enter /registrations into your URL field.
Add A File For Download
- Click to Edit your desired page section
- Click the Media icon
- Select to Upload your desired file (this button may say different things in different browsers)
- Find and upload your desired file
- Select the Files tab in the File Browser
- Select your desired file to insert it into your page section
If you would like to update the displayed text for your file select to Edit the page section the text is contained in. Single-click on the text, then choose the Link icon from the toolbar. Update the Text To Display field and click OK.
Using the Content Editor
NOTE: Placing your cursor over an icon in the toolbar will give a short description of its function.
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.
- Click the Insert Media button () to bring up a File Browser
- Click the Embed Video tab
- Paste the video URL into the box
- 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.:
- Click the Source Code button ()
- Add or edit the HTML as required
- 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:
- Click the location on the page you would like to add an anchor (The location where you want to send people to)
- Click the Anchor button ()
- Enter a Name to describe the anchor for your reference (not publicly visible)
- Click Ok
Link to an Anchor
After inserting an anchor anywhere on a page, you can link to it from the same page:
- Click the place on the page you would like to insert the link
- Click the Insert Link button ()
- From the Anchors drop-down list, select the Anchor you would like to link to
- Url: Do not change this, or the anchor won't work.
- Text to Display: change to whatever you want to be visible to the user
- Optionally add a title and target
- 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.
- Ensure you are logged into your Uplifter admin account.
- Navigate to the public page you wish to edit.
- Select the Page Edit icon for the section you would like to add to.
- In the toolbar, select Source Code
- Discern the area you wish to implement the plugin/widget and paste your code.
- 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.
- Select Update in the content editor and review your changes on the page.
- 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.
https://developers.facebook.com/docs/plugins/
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
My Code Isn't Working
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 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!