This short users’ guide describes the Landing Pages feature of VolunteerHub (www.volunteerhub.com), a Software-as-a-Service (SaaS) product designed to enable non-profit organizations to better communicate with their volunteers.
The Landing Pages feature allows you to control your users' experiences depending on how they enter the website. Use this new Landing Pages interface to display an Events page where a user is directed when he or she is ready to sign up for volunteering opportunities. The word “new” denotes a version in which VolunteerHub introduces multiple landing pages so users can experience different customization when entering your VolunteerHub website.
About this Wikipage
The main purpose of this document is to describe how you can use the Landing Pages interface to edit/modify the landing page, in particular the Events page of the VolunteerHub website. The following table may help you find information quickly in this guide:
If you want to:
|Access the website||How to Access the Website|
|Edit or add a landing page||
How to Edit or Add a Landing Page
|Discover the main differences between older and newer versions of the Landing Pages interface||
How to Access the Website
Access your VolunteerHub site using a web browser and the following steps:
Open a web browser and enter the website address of your Hub as provided by your organization. For example- http://audition2.volunteerhub.com
Figure 1: Enter the web address of your Hub in your browser address field.
Click on the Sign In link on the Events page shown below.
Figure 2: Click on the sign in link to access the sign in page.
Enter your registered username and password and click on the Sign In button.
Figure 3: Enter your username and password and click on the sign in button.
If you do not already have an account, you must register as a new user. To register, click on the Register button to access the registration page.
Figure 4: The screenshot of the page you go to after sign in.
The above is a screenshot of the page you go to after sign in.
The page shows the following tabs: Events, People, Reports and Setup.
How to Edit or Add a Landing Page
You can edit or add a landing page via the Landing Pages sub tab under Setup tab.
To access the Landing Page take the following steps:
Click on the Setup tab as shown in Figure 5.
Figure 5: The Setup tab showing its sub tabs and new Landing Pages sub tab.
The Setup tab reveals the following five sub tabs: Organization, User Form, Billing, Embed, and Landing Pages (shown in Figure 6).
Figure 6: The screenshot showing the Landing Pages sub tab under the Setup tab.
Click on the Landing Page sub tab as shown in Figure 6.
Figure 7: The screenshot showing Landing Pages and its features.
The Landing Pages shows the following options(See Figure 7.):
- Name: Name of the Landing Page, here shown as “Default”.
- URL: Landing Page’s Internet address.
- Edit: Button for accessing the Landing Page settings to edit.
- Add Landing Page: Use it for adding a new Landing Page.
How to Edit the Landing Page
To edit an existing Landing Page, follow these steps:
Figure 8. The screenshot shows the Edit button in the Landing Pages sub tab.
Click on the Edit button on the Landing Pages screen as shown in Figure 8.
The Landing Page settings page will open. There are four sections, each with its own set of options: Name and URL, Behavior, Look and Feel and Messages.
Name and URL
The Name and URL section gives you the option to name your landing page and assign a web address to it.
Figure 9: The screenshot shows the Name and URL section in the Landing Page edit options.
Enter a name in the Name field to identify the Landing page. In Figure 9 it is shown as “Default”.
Enter an URL by which the users access your landing page. You can leave this blank in that case, a randomly assigned value will be given.
The Behavior options allow you to control how Events are displayed and who sees them.
Figure 10: The screenshot shows the Behaviour section on the Landing Page edit options.
Under the Event Group field, click on the drop down button (as shown in Figure 10) to select where to display Events.
Click on the check box to select who can see Events.
Look and Feel
The Look and Feel options allow you to customize the appearance of your landing page.
Figure 11: The screenshot shows the Look and Feel section in the Landing Page edit options.
Enter your chosen name under the Title Text field to be displayed in your VolunteerHub site (as shown in Figure 11). In the example, the name is given as “audition2”
Under the Title Graphic field, click on the Choose File button to select and upload a graphic or logo to be displayed.
Under Title Elements field, click on one of the radio buttons to select an option to display:
- No text or graphic
- Text only
- Graphic only
- Both text and graphic
Under Title Alignment, click on the radio button to display the title aligned left, center, or right.
Under the Primary Color field, click on the colored box at the right side to edit the background color of your site. This will open a color palette (as shown in Figure 12). To edit, drag the slider to select the correct hue within the square box. To change the color spectrum, drag the slider in the next box up and down. If you know the HTML code of your color, you can enter it in right bottom box. You can also revert to the previously selected color by clicking on color box in the top right.
The primary color will be the color for the larger navigation bar in the site.
Figure 12: The screenshot shows color selector of the Look and Feel section in the Landing Page edit options.
To change the Secondary Color, follow the same steps as step 10 for the primary color. The secondary color will be the color for the smaller navigation bar.
Figure 13 below shows new colors which were selected for both Primary and Secondary Colors.
Figure 13: The screenshot shows new selected colors for both Primary and Secondary Colors.
Figure 14 (below) shows a comparison of both the previous and new color scheme of the website.
Figure 14: The screenshot shows both the previous and new color schemes of the website.
The Message section of the Landing Page gives you the option to set and display your messages to the users as shown in Figure 15. You can also format the message text here.
Figure 15: The screenshot shows the Messages section in the Landing Page edit options.
Under the Schedule Message field, enter the message that you would like to display at the top of the events list on the Events page, as shown in Figure 15.
Under the Sign In Message field, enter the message that you would like to display when the user signs in to your site.
Under the New User Message, enter the message that you would like to display at the top of the first page of the User Registration page for new users’ field (as shown in Figure 15).
Under the Join Code Message field, enter the message that you would like to appear at the top of the Join Code page, as shown in Figure 15. A Join Code Message may explain what a join code is or give instruction showing how you may obtain a join code.
Click on the Save Landing Page button.
How to Add Landing Page
To add a new landing page, take the following steps:
Click on the Add Landing Page link shown in the Figure 16.
Figure 16: The screenshot showing Add Landing Page link in the Landing Pages sub tab.
This will open New Landing Page settings as shown in Figure 17.
Next, follow the same steps used for editing the landing page.
Figure 17: The screenshot showing New Landing Page settings.
The illustration shows the main difference between the older (a) and newer (b) versions of the Landing Pages interface.
Figure 18: A comparison between older and newer versions of the Landing Page interface.
In the older version (a), you can find both Look and Feel and Messages options via Setup/Organization and Setup/Look and Feel tab.
In the newer version (b), you can find the same Look and Feel and Messages options via Setup/Landing Pages tab.