Back To Top

Public Website Management

 

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.

Available On:
Silver
Gold
Enterprise

 

FAQs

Can I Remove/Edit The Uplifter Banner?

Yes. You can remove/edit all branding elements on your site. For the main banner please navigate to Settings > Themes > select your theme > Header > Images.

Can I Add My Club's Facebook/Twitter/Instagram Feed?

Yes. You can add third party embeddables as noted in the below section, Integrating 3rd Party Plugins

Can I Hide A Page That Is Not Ready?

Yes. Navigate to the page and select Edit Page Details. In the Show In section uncheck (deselect) the check mark next to "Visible to Members". Click Save Page to keep the change. Re-add the check mark to reveal the page once more.

 

Webinar

Public Website Management Wed Dec 11th, 2019: Everything you need to know about managing your public website with Uplifter! Make your site look beautiful with the theme editor. Plus, learn how to create, edit, move, sort or delete pages and content! It’s easy to master your site with Uplifter.


This webinar covers:
  • Getting Ready: 5:24
  • Theme Management 9:09
  • Creating Pages: 35:22
  • Content Editing: 39:28

 

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.

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 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.

Global_Section.png

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.

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.

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

  1. Navigate to your Public Site
  2. Select [+] New Page
  3. Enter desired page 'slug'
  4. 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

  1. Select Edit Page Details
  2. Adjust details
  3. 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 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, 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

  1. 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

  1. Select Edit Page Order
  2. Adjust Order
  3. 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

  1. Select Move Page
  2. Enter the new URL of the page
  3. Select the copy/move option
  4. 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

  1. Select Page Edit PageEdit-Large.png for the section you wish to edit
  2. Edit the content as desired
  3. Select Update
  4. 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

  1. Select Repeat Section RepeatSection-Large.png to add a new section
  2. Select Delete Section DeleteSection-Large.png to remove an unwanted section
  3. 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.

 

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

  1. Click to Edit PageEdit-Large.png your desired page section
  2. Click the Insert Template Template-I.png icon from the toolbar
  3. Use the drop down to select your desired template
  4. Click OK

Add An Image

  1. Click to Edit PageEdit-Large.png your desired page section
  2. Place your cursor where you would like your image to be placed
  3. Click the Media Media.png icon from the toolbar
  4. Upload your desired image (if required)
  5. Select your Images tab and choose your desired image
  6. Click Insert Image
  7. Adjust image size (if required)

Add_An_Image.gif

Note: the file size limit for uploading is 8MB.

  1. Click to Edit your desired page section
  2. Enter your desired text and style it in your desired manner
  3. Highlight your desired text
  4. Click the Link icon from the toolbar
  5. Enter your desired URL into the URL field (be sure to add https:// if the link leads to an external site)
  6. Select your Target (None = the link opens in their current tab; New Window = the link opens in a new tab/window)
  7. Click OK

Add_Link_-_Text.gif

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.
  1. Click to Edit your desired page section
  2. Enter your desired text
  3. Highlight your desired text
  4. Click the Link icon from the toolbar
  5. Enter your desired URL into the URL field (be sure to add https:// if the link leads to an external site)
  6. Select your Target (None = the link opens in their current tab; New Window = the link opens in a new tab/window)
  7. Set the Class to Button
  8. Click OK

Add_Link_-_Text.gif

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.
  1. Click to Edit your desired page section
  2. Add an image to your page (if require)
  3. Single-click on the desired image
  4. Click the Link icon from the toolbar
  5. Enter your desired URL into the URL field (be sure to add https:// if the link leads to an external site)
  6. Select your Target (None = the link opens in their current tab; New Window = the link opens in a new tab/window)
  7. Click OK

Add_Link_-_Image.gif

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

  1. Click to Edit your desired page section
  2. Click the Media icon
  3. Select to Upload your desired file (this button may say different things in different browsers)
  4. Find and upload your desired file
  5. Select the Files tab in the File Browser
  6. Select your desired file to insert it into your page section

Adding_File_To_Upload.gif

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.

Update_Downloadable_Text.gif

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.

  1. Click the Insert Media button (Media.png) 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_Video.gif

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 (SoureCode.png)
  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 (Anchor.png)
  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 (Link.png)
  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

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

My Code Isn't Working

Uplifter uses a 3rd party editing system known as TinyMCE. For safety reasons, TinyMCE strips potentially harmful code from the source code before finalizing. Because of this, embed code that uses a <script> tag will be removed from the source code. Please be sure to obtain embeddable iFrame code for the highest rate of success.

 

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 PageEdit-Large.png icons on the page to make the changes.

Filter_Registration_Page.gif

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 PageEdit-Large.png 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 SoureCode.png 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 SoureCode.png button from the editor toolbar and remove all content present.

Remove_Warning.gif

Filters

Click the Edit PageEdit-Large.png 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.

Filter_Registration_Page.gif

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.

Delete_Filters.gif

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

 

Powered by Zendesk