Password Protection

You can limit access to a set of pages using a login/password combination. All pages have a “Protect With Password” setting, which lets you select groups of users who will be able to access the page. Users, and user groups, are configured in the site settings.

To control who can view certain pages on a website, you specify groups of users who can have access. This means you must create at least one group and add users to it. For instance, if your website is for public viewing but you also have pages for only staff, you might create two groups like sales and general. For example, you might have an employment policy page for ALL staff and a sales page with sales-related info for sales staff only. You'd create groups like "Staff" and "Sales" and assign users accordingly. Sales people would belong to both groups, while others would only be in the "Staff" group.

Additionally, you create individual users, each with their own username and password. When they enter that information into a login form, they will be able to access all pages that they are authorised to view. The login page, with its form, is created by Sitely automatically when you first set up password protection in the site settings. Although this is an essential Sitely-generated page, you can style it just like any other page in your website. Furthermore, you can add a login form to any other page in your website by adding it from the elements panel. 

So, to start protecting pages in your site, go to the site settings and choose Password Protection from the list of options. It looks like this.

Begin by creating your first User Group - Click the Edit User Groups button to open the User Group dialogue:

Repeat this process for every group you need. When you’re done, click the Back Button to return to the settings dialogue. You should then click on the Edit User Accounts button to create individual users. This is how the dialogue looks:

The Edit button allows you to allocate each user to one or more groups. Simply put a checkmark next to the groups the user belongs to.

All that really remains to be done is to create your protected pages. These are just like any other page in your website, but with the addition of an extra setting in the Pages tab on the right of the screen. There you will see the option to Protect with Password. It looks like this:

When you check the option, an Edit button will appear. when that button is clicked, a panel will open where you can choose which groups are allowed to view the page.

Important Information About Page Protection

Page protection only works when your site is published to a server running PHP. This is a server-side language that is used to perform many functions - including password protection of pages. But, you don’t have to worry about coding because Sitely takes care of all that for you - just be sure that your web host has PHP installed on your hosting account (most do).

When you have a page with a login form (including the one created by Sitely), there are a couple of additional options you need to set on the login form itself. Select the login forms to see these additional options - they look like this:

This is where you instruct your website where to send people after they login to the protected areas. The first options will be pages for the Groups you set up on your system. In the example above there are three groups, Parents, Student and Teachers. You select the protected page where each of the group members will be sent after they successfully login. Typically, these pages will be a sort of group landing page with content that is only relevant to each specific group. These pages can contain their own menu or other navigation structure that links to other pages that the group can access. The ‘Other Access’ option is used to direct users to a page if, for some reason or another, they have not been allocated a specific group. The last option, Page Following Logout, would be an UNPROTECTED page in your site that people get sent to AFTER they logout. (typically, this would be the main home page, but can be any page you designate here).

In the Password Protection section of the Site Settings, you can specify a period of time that users will remain logged in for. After that time expires, users will automatically be logged out. However, you should always encourage users to manually logout after they’ve finished viewing protected pages. You do this by placing a button on each protected page with the On-Click action set to ‘Logout’.

This will ensure that users will not be leaving private information exposed to ‘prying eyes’ if they leave their computer or device unattended.

If a preferred customer enters a correct username and password, when the page is visited it could display something like this.

Notice that the login form is no longer visible. Furthermore, it’s been replaced by a message offering a discount code. This is easily achieved in Sitely by making elements of a web page only visible to certain users. In the above example, the login form was made visible ONLY to logged out users, whilst the discount message was made visible to ONLY logged in users. This is achieved over in the Arrange Tab on the right of the screen. Just select any element on any page and select one of the options shown here.

It’s important to remember that when you use this option in your normal web pages, the pages will automatically convert to PHP, rather than HTML pages. In normal website use, this isn’t so critical, as either type of page will display perfectly well. However, when you preview locally, you won’t be able to test the features until you publish to a server environment. For example, if we were to locally preview the example home page above, it would look something like this.

This is because when we display the page outside of a server environment, we can see all the elements on the page - there is no PHP function to selectively display the content to specific users. So, although your pages may look like they have lots of overlapping elements during a local preview, everything will work seamlessly once you’ve published to your web server. It should also be noted that when creating pages like this, where different logged in users see different page content, the Sitely interface has a helpful visibility icon to make things easy to edit on the canvas. When you’ve set up your user groups, the visibility icon will allow you to selectively display and hide content on the canvas for each group while you create the page content. The icon can be seen here.