Website Manual
Contents Introduction
5
Let’s Take a Quick Look Around
6
Homepage Features Dynamic Homepage Feeds About Lax Kw’alaams Elected Council Members Staff Members Gallery Band Owned Businesses Employment Opportunities Getting Here Ferry Schedules Local Business and Services Community News Events FAQs
6 7 8 9 10 11 12 13 14 15 16 17 18 19
General Site Administration
20
Front-End vs. Back-End Getting to know the ‘Back-End’ User Roles: Administrator/Editor WordPress Dashboard: Logging In
20 21 22 23
Adding Content/Media to Pages
25
Editing Static Content Media: Add Image Media: Edit Image
25 27 28 3
Media: Featured Image Homepage: Add/Remove Images to Slider
Custom Post Types +New: Elected Council Members +New: Administrative Contact +New: Band Owned Business +New: Employment Opportunity +New: Ferry Schedule +New: Local Business and Services +New: Community News +New: FAQ +New: Event Editing Existing Post-Types
29 30
32 33 33 34 35 36 37 38 39 39 40
4
Introduction This document is designed to make it easy for Lax Kw’alaams (aka LKB) to edit and add information to their website www.laxkwalaams.ca. Set out as a step-by-step guide, it describes the main sections, the different types of content, and how to edit and add new information. If you have any questions about how to make changes to the site, please refer to this manual or contact us.
5
Let’s Take a Quick Look Around Homepage Features • Slideshow Banner • Latest News • Facebook Feed • Employment Opportunities • Social Media Icon • Ferry Schedule • Image Gallery Preview • Interactive Map • Contact Information
6
Dynamic Homepage Feeds Dynamic content will appear on the homepage of your new website ensuring content remains fresh, and encourages return visits to the page. These pages include: • Latest News • Facebook Feed • Employment Opportunities • Image Gallery Preview
7
About Lax Kw’alaams This page provides a brief description of Lax Kw’alaams including segments on History, Traditional Economy, and People.
8
Elected Council Members Mayor, Deputy Mayor, and Councillor have a page designated to them. They are represented by: • Photograph • Name • Title • Portfolio Responsibility • Contact Information
9
Staff Members This page features all CCIB staff. Each staff member is represented by: • Name • Position • Contact information This section is also searchable to help optimize user experience.
10
Gallery This page features LKB photographs which have been posted in the “Lax Kw’alaams” album on the Lax Kw’alaams Facebook Page.
These images automatically update in the Gallery and then appear dynamically on the homepage when images are added to this Facebook Album!
11
Band Owned Businesses Pages have been created for each of LKB’s Band Owned Businesses. Each business is represented by: • Logo • Name • Brief Description • Contact Information
12
Employment Opportunities Job postings for can be posted on the Employment Opportunities page. This section features: • Searching jobs by keyword or location • Organizing by: freelance, full-time, internship, part-time, or temporary
Selecting a job will allow visitors to view: • Job location/Job details/Application instructions • Age of posting • Direct link to employer’s website (if posted)
13
Getting Here Getting to Lax Kw’alaams can be a challenge for those who don’t know the route; so a page dedicated to getting to the community has been created. This page includes: • Descriptive summary of getting to the community • Plane/Boat options • Interactive Google map
14
Ferry Schedules This page provides information about the Spirit of Lax Kw’alaams ferry that runs between Prince Rupert and Tuck Inlet (Lax Kw’alaams). This page includes: • Current Fares • Current Ferry Schedule • Contact Information
15
Local Business and Services Local businesses and services in the community are displayed here. The page features: • Interactive Map • Sort/Categorization Capability • Business/Service general information/contact details • Current Ferry Schedule • Contact Information
16
Community News “Community News” is a section of the website which can be updated regularly to provide relevant community information like: • Community announcements; • LKB announcements; and • Announce newsletters and provide direct links to them. These posts will be dynamically displayed on the homepage as “Latest News” and can also be Featured to draw more attention to important announcements.
17
Events Any relevant LKB events will be posted on this page. • Calendar events are dynamically pulled from the LKB Facebook Page.
18
FAQs This page is dedicated to answer member-driven Frequently Asked Questions on particular topics. This page also allows site visitors to sort/categorize the questions by topic.
19
General Site Administration Front-End vs. Back-End It is important to make a clear distinction between your website’s front-end and back-end. The front-end of the website is what people see whereas the back-end of the website is where it is managed. What you add in the back end is ultimately what you and your visitors will see in the front-end. Below a page is represented in the back and front end - the left image (back-end) is used to create the right (front-end).
20
Getting to know the ‘Back-End’ This website uses a Content Management System (CMS) that allows for updating from a central interface by multiple users with various permissions. To make changes, you need to have access to the site as an “Administrator” or “Editor”.
21
User Roles: Administrator/Editor The Administrator oversees the website. They manage the look and feel of the website (design), including editing and importing or exporting data from the dashboard (often referred to as the ‘back end’ because regular website visitors do not see it). The administrator manages users, meaning they assign different levels of permissions to different users. Editors can create, edit and publish content to the website. They can also moderate comments and reply to comments from site visitors (if relevant). An editor can edit or delete others’ pages, posts, private pages and posts, and published pages and posts.
22
WordPress Dashboard: Logging In The “Dashboard” is the control panel back-end of your new website. It is where you control your pages, posts, users, and so much more. To log in: 1. Enter the URL of your website followed by: /wp-admin • www.laxkwalaams.ca/wp-admin • You will be prompted to log in:
• After entering your login details, you will be directed to the WordPress dashboard for your website.
23
NOTE: While logged in to the site, you can re-access the “Dashboard” from anywhere on the site (if you navigate away) by following these steps: 1. Hover your mouse over “Lax Kw’alaams Band” in the top left of the page — a drop-down menu will appear. 2. Select “Dashboard”.
3. You are now in the dashboard of the website. It is in this area where administrators manage the site. 4. By exploring the column on the left, you will notice that each menu item and page on the website is represented. 5. Be careful. What is created in the back-end of the website can also be broken or destroyed completely. If you are unsure about creating/deleting any components in the back-end, err on the side of caution and ask for help.
24
Adding Content/Media to Pages Pages have both ‘dynamic’ and ‘static content’. The website has been developed to update dynamic content through simple steps in as many areas as possible — while static content needs to be added or edited manually.
Editing Static Content Follow the steps below: 1. Sign in to your account as outlined above. 2. Navigate to one of the static pages you would like to edit using the menu in the dashboard. a. Note: Your only static page is “Getting Here”. 3. At the top of the page click “Edit Page”.
25
4. The content will appear in the WYSIWYG (“what you see is what you get”) editor (see below). • Unless you know HTML coding, ensure the “Visual” tab is selected.
5. The WYSIWYG editor enables you to change or format content in a way similar to creating emails or a Word document. 6. For your static page, you can add/format text and add media, such as images (adding an image can be done by following the steps on the next page). 7. After making any edits to the static page, ensure you click the “Update” button to save any changes. If you do not “Update” the page before navigating away, your changes will not be saved.
26
Media: Add Image You can add images to your pages by uploading new files or adding files from the site’s existing media library. Upload Files: • Click “Add Media”. You will then be given an option to upload a file from your computer or select one that has previously been uploaded to the website. • Select “Upload Files” and then either drag and drop the file onto the screen or locate it on your hard drive by clicking “select files”. • This uploads the file to the website’s “Media Library”. Select it and you can then click the “Insert into page” button. Add media from media library: • To add a file from the media library, click “Add Media” and locate the file in the “Media Library” (which automatically appears). • Click “Insert into page” at the bottom of the page.
27
Media: Edit Image WordPress gives you two ways to edit images once you have added them to static pages. Option 1: Following the “Add Media” steps outlined in the previous section, before clicking “Insert into page” you will see this screen (right): • Here you can add a title, caption, and description of the image as well as adjust the image’s alignment and size. Option 2: Once an image has been added to a page, you can edit it by selecting the image in the WYSIWYG editor and clicking the button pictured below. a. This will generate an image editing tool where you can change the image’s size and alignment as well as change the title or add a caption. b. Again, once you have completed any work on a page click the “Update” button to ensure all changes will be saved.
28
Media: Featured Image The Featured Image represents the contents, mood, or theme of a post or a page. Posts and pages have a single featured image (set in the back-end) and is displayed as a thumbnail on the front-end of the website. Set Featured Image: • With the editor open on the page or post you want to display a unique thumbnail image for, locate the Featured Image link in the bottom right corner.
• You will see an uploading screen identical to that used when inserting an image into a post/page. Follow the onscreen prompts (as explained above). Remove Featured Image: • To remove or change a featured image, simply re-open the post or page editor and click remove featured image in the featured image module.
29
Homepage: Add/Remove Images to Slider If you would like to change or edit your photos in the homepage slideshow banner, please follow the steps below: 1. Hover your mouse over where it says “Lax Kw’alaams” on the top left of the page — a drop-down menu will appear. 2. Select “Dashboard”. 3. On the left-hand sidebar, hover your mouse over “RoyalSlider”, and click on “Edit sliders”. 4. Click on the title “Homepage Slider”. 5. Hovering your mouse over the images will bring up action buttons: a. Remove a slide, click the ‘X’ (circled in yellow below) b. Edit a slide, click the pencil icon (circled in red below) c. Duplicate a slide, click the icon circled in blue
30
6. To add new images, click on “Add Images”, and upload from your existing media library or from your computer. a. Note: Images uploaded to the homepage slideshow need to be of high quality and very visually appealing. Photo size is 1026 pixels (width) x 410 pixels (height). 7. To change the order of your slideshow, simply drag and drop photos into the desired order. 8. Click on “Save Slider”.
31
Custom Post Types Many pages are built using “custom post type” — this design strategy makes your website exponentially easier to create and maintain content for your website. The following sections outline adding/editing content for each of these post-type pages: • Elected Council Members • Administrative Contacts • Band Owned Business • Employment Opportunities • Ferry Schedule • Local Business and Services • Community News • Events • FAQs
32
+New: Elected Council Members 1. Hover your mouse over +New in the admin bar and select Elected Council Member. 2. You will be taken to the WYSIWYG editor (explained above). 3. Where it says “Enter title here” add the Council Member’s name. 4. In the WYSIWYG editor (explained above) add relevant details (Portfolio responsibilities, etc). 5. Set a “Council Member Photo” using the same process as adding a featured image (explained previously). 6. Click “Publish”.
+New: Administrative Contact 1. Hover your mouse over +New in the admin bar and select “Administrative Contact”. 2. Add the person’s Email. 3. Add the person’s Phone Number. 4. Click “Publish”.
33
+New: Band Owned Business 1. Hover your mouse over +New in the admin bar and select “Band Owned Business”. 2. Add the name of the business where it says “Enter title here.” 3. Add a description for your business in the WYSIWYG text box. 4. Include any relevant contact information: a. Business Phone number b. Business Email c. Business Website d. Business Address 5. Set the Business Logo using the same process as adding a featured image (explained previously). 6. Click “Publish”.
34
+New: Employment Opportunity 1. Hover your mouse over +New in the admin bar and select “Job Listing”. 2. Add the name of the job opportunity where it says “Enter title here.” 3. Add a description for the job opportunity in the WYSIWYG text box. 4. Categorize what type of job it is in the “Job Types” module (Freelance, Full Time, Internship, Part Time, Temporary). 5. Add any relevant “Job Listing Data” (these are all optional): a. Location b. Application Email c. Company Name d. Company Website e. Company Tagline f. Company Twitter g. Company Logo h. Job Expiry 6. Click “Publish”.
35
+New: Ferry Schedule 1. Hover your mouse over +New in the admin bar and select “Ferry Schedule”. 2. Add the name of the Ferry Schedule where it says “Enter title here.” 3. Add a description for the Ferry Schedule in the WYSIWYG text box. 4. Add relevant Ferry Schedule information: a. Reservation Phone Number b. Vehicle and Driver Rate c. Adult Rate d. Senior/Student Rate e. Children 5 and Under Rate 5. Click “Publish”.
36
+New: Local Business and Services 1. Hover your mouse over +New in the admin bar and select “Map Location”. 2. Under “Location Details” you can find a location by entering a street address (pin will be dropped at that address). a. Note: In the event the location has no physical address you can manually navigate with your cursor on the map (make sure you zoom in!) and double-click to “drop a pin”. b. Alternatively, you can also manually use latitude/ longitude coordinates to generate a location using the following formate: xx.xxx (lat) and -xxx.xxx (long). 3. Categorize the business/service under “Location Categories”. 4. Add a short description of the program/service. 5. Set a “Featured Image”. 6. Ensure the address (automatically generated) is appropriate. 7. Click “Publish”.
37
+New: Community News 1. Hover your mouse over +New in the admin bar and select “Post”. 2. You will be taken to the WYSIWYG editor (explained above). 3. Add a title, media, and text using the editor 4. Choose the “Featured” category if you’d like your post featured in the Latest News slider on the homepage
5. Set a Featured Image 6. Click Publish
38
+New: FAQ 1. In the Dashboard, hover your mouse over the left hand column where it says “FAQs” and select “Add New FAQ”.
2. You will be taken to the WYSIWYG editor (explained above). 3. Add the question where it says “Enter title here” in the following format: Q. <add question>? 4. Add the answer in the text box. 5. Choose a relevant category for the question. 6. Click Publish
+New: Event Events are automatically integrated from the Lax Kw’alaams Facebook Page. To add a new event, contact your Facebook Page administrator.
39
Editing Existing Post-Types Once Post-types are created, you can edit them using the following steps: 1. Access the back-end of your website (you will notice all your custom post-types appear in the left hand column). 2. Navigate your cursor to the appropriate section and click it. 3. Locate the post you would like to edit (hover your mouse over top of it and a menu will appear), and select edit. 4. Edit the post. 5. Click publish.
40
41