New website Training:

Transcription

1 New website Training: Table of Contents 1. Logging in and out of the new site. 2. Edit Content a. How to edit content b. Paragraph types c. Adding links d. Adding an image e. Adding a document f. Saving pages after editing 3. Reverting Back to a Previous Version of a Page 4. Calendars 5. Adding a New Page

2 Logging In and Out of the Site Logging In 1. Go to the website in any browser (Firefox, Chrome, Internet Explorer ) and click the Login link at the bottom of the page. 2. Enter your user name and password that the Sarpy Information Systems department provided to you for your Drupal website. Do not share your user name and password with others, if you have another individual that needs to update the website, contact Sarpy Information Systems department and we will gladly set up another user name and password for you. 3. Once you are logged in you will see a black bar at the top of the screen with your username in it.

3 Logging Out If you are using a public or shared computer, you will want to be sure to log out of the website after you are done making your changes to the website. To do so click the Log out at the top of the page next to your username.

4 Editing Content How to Edit the Content of a Page You are able to edit any content in the main body section of the page. Editing the content may consist of any of the following: Editing text on the page, uploading new images or files, etc. To edit a page, go to the page you want to edit and click Edit as seen in screen shot below: NOTE: Depending upon your permissions, you may not have access to edit certain areas of the website. Contact the Sarpy County Information Systems department (helpdesk@sarpy.com) if you need your permissions adjusted or if you need us to edit/update any pieces that you do not have access to. After click Edit you will see the different paragraphs on the page (pictured below). There are two sections to each page the Main Content Next to Sub-Menu and Main Content Under Sub-Menu. Each section has its own paragraphs. Click on Edit for the paragraph you want to edit to open the editor. Paragraphs allow you to easily rearrange the order of the sections by clicking and dragging the arrows on the left side.

5 Paragraph Types Visual Examples Accordion: A collapsible section. Full Width Layout: Spans the entire width of the container. Three Column Layout: Three vertical columns. Two Column Layout: Two vertical columns. Left Column Layout (1/3 Left Column & 2/3 Right Column): Smaller left column. Right Column Layout (2/3 Left Column & 1/3 Right Column): Smaller right column. Featured Well: Gray colored background section utilized to bring attention to.

6 Edit Content Editor and Expanding the Editor Once you have clicked Edit on the paragraph you want to edit, you will see the Content in the Editor. The editor is very similar to Microsoft Word, where you have the options to change text size, use spellcheck, copy and paste, underline text, etc. By default the editor window is small. There are two ways to expand the editor to see more content as seen below.

7 Adding Links to your Content If you want to add a link to your content you will follow these steps: 1. Navigate to the page you want to add the link to and go into the Editor of this page (as we went over previously). 2. Once you have typed the text to be used for your new link, highlight the text by clicking and dragging your mouse over the text. 3. Next, you can either click the link icon (for outside link) or the link with a plus sign (for linking to a page inside our site). 3-a. External links (you clicked the link button). a. In the box that pops up, insert the link that you want the text you highlighted to go to. (Example: the text highlighted above will go to b. When linking to a webpage that is outside of our site, it is good practice to make the link open in a new window or tab. This way when the user clicks on the link they can still get back to your website without having to click the back button in their browser. To do this, click the Target tab of the popup box and select New Window (_blank) from the drop down menu, as pictured below.

8 3-b. Internal Links (you clicked the link button with the plus sign). a. The Linkit box will appear once you have clicked the link button with the plus sign. b. The text box titled Search for Content is the one you will want to use. If you start typing in the title of the page you want to link to, the results will start showing up under Content. In our example we will link to the Treasurer. c. After you select the page, you will see the Link URL * box fills in with the page name for you. You don t need to select anything in the Options box, just click the Insert Link button at the bottom of the Linkit box. 4. Once you have inserted your link you will want to save your page (see the section on saving the page).

9 Adding an Image While editing a page, you have the option to insert an image into the page. Underneath the editor, you will find a section titled Image with an option to choose a file to upload to the website (pictured below). Before uploading and inserting an image you will need to place your cursor in the editor where you want the image to be placed. 1. When uploading an image through the Image box, you will select the Choose File button and find the image on your computer that you want to upload to the webpage. Once the file is selected, click the upload button. 2. You will notice that after the image uploads, you will see a preview of the image with image size and name listed next to it, along with an insert button. The insert button will place the image onto the page where your cursor is located, but prior to inserting the image we need to add alternative text. 3. Adding alternative text to images you upload to your site is something we want to do every time. The text needs to be a short and clear description of what the image shows. Entering alternative text for images allows your site to meet certain 508 compliance standards, more specifically, if a user is viewing your website with a screen reader and cannot see the image, the screen reader reads the alternative text attached to the image to let the user know what is on the page. 4. Once you have entered in the alternative text for the image, click the Insert button. If you have a large image, it will need to be resized as shown in the next step. 5. To resize the image, hover your mouse over the image in the editor and you will see a black square on the bottom-right corner of the image. This black box allow you to resize the image by clicking and dragging the black box until you reach the desired size. 6. Once resized you have successfully inserted an image. You can now save your page (see the saving page section).

10 Adding a Document/File While editing a page, you have the option to insert a document onto the page. Underneath the editor, you will find a section titled File with an option to choose a file to upload to the website (pictured below). Before uploading and inserting a file you will need to place your cursor in the editor where you want the file to be placed. 1. When uploading a file through the File box, you will select the Choose File button and find the file on your computer that you want to upload to the webpage. Once the file is selected, click the upload button. 2. Once the file is uploaded, you will see a drop down box where you have the choice for the style of the link. By default, the link to file (with icon) is selected. The icon will help users know that when clicking on the link it will open a document, instead of a regular webpage link. 3. In the description box, you will want to add the text you want displayed on the webpage. For example, if you are uploading a meeting agenda, you might type Meeting Agenda in the description box. 4. When users click on a document link, it is always best if the document opens in a new window or tab. To do this highlight the new link you just placed on the page and click the grey link button in the toolbar. This will bring up the link dialog box.

11 5. Click on the Target tab and select New Window (_blank) from the Target dropdown list. Then click OK. 6. Once you have entered the description, click the insert button and save the page (see the saving page section).

12 Saving Pages after Editing Whenever we edit a page and are saving the changes it is important to note what changes were made. This is important in the event we need to revert back to an older version of the page (this will be covered in the next section). To add these notes you will need to go to the Revision information section at the bottom of the page, above the Save button. Enter in a short description of what was changed on the page. Once a description is entered you can click the Save button to save your changes.

13 Reverting Back to a Previous Version of a Page To revert back to a previous version of a page: 1. Click on the Revisions tab on the page you are wanting to revert. 2. On the Revisions tab, you will see a list of all the available versions of the page. In the left column, you will see the revisions are listed by date with the user who updated it next to the date. 3. To preview what the page looked like on that date, click on the date. 4. In the right hand column, you can click on revert to revert back to how the page was on that date.

14 Calendars There are several calendars on our website. You may not have permissions to create calendar content. If you do you will follow these steps to create a new event on the calendar: 1. Hover your mouse over Content at the top left side of the black administrative tool bar at the top of the page and click Add content 2. The Add content page will then open. If you have permissions to a calendar type content you will see some sort of Agenda type content listed to choose from, along with the other content type you have permissions to create (a page for example, which will be covered in another section). Examples of items that could be listed, depending on your permissions, are: Board of Adjustment Agenda Board of Corrections Agenda Board of Equalization Agenda Personnel Policy Board Agenda Planning Commission Agenda County Board Agenda Teen Court Calendar Community Events 3. Click on the Agenda/Calendar content type would like to create. For example you could see County Board and County Board Agenda. You would then click on County Board Agenda to create a new calendar item for the County Board calendar.

15 4. On the Create Agenda/Calendar event page, you will be prompted to enter a Title, Main Content, and the date and time. There is also an Address and a Meeting Room section that is meant to give the location of the event, by default the address is the Administration Building address, and the Meeting room is Sarpy County Board Room, you may change this if needed. 5. Add the Title and the Date and Time 6. Choose a Paragraph Type and click Add new Paragraph to add a paragraph to the Main Content section, you will most likely choose Full Width Layout as the Paragraph Type (see the Paragraph Types section of this document for examples of the types). 7. Enter Event Info into the new Paragraph.

16 8. You can also attach documents to the events (example: meeting agenda) in the File section. You can learn how to upload and insert a file/document into your paragraph by going to the Adding a Document/File section of this document. 9. Once you have entered in the Title, the Data & Time, and added all of the information, click the Save button at the bottom of the page. 10. The Event will now show up on the calendar and will show up in the Upcoming Events feed on the home page (if your event is happening soon).

17 Adding a New Page This section covers how to add a new page to the website. Before you add a new page to the website, ask yourself the following questions: Does the information need to be printed, such as a form or public notice? If yes, uploading the information as a pdf and including the link on the correct page(s) may be better and easier for the user. Does the information go along with something else that is already on the website? If yes, maybe the information can be added to the existing page instead of creating a new page. Use the following steps to add a new page to the website: 1. Hover your mouse over Content at the top left side of the black administrative tool bar at the top of the page and click Add content 2. The Add content page will then open. The content that you have permissions to create will be listed on this page. 3. Click on the content type would like to create. For example you could see the name of your office (such as Assessor, Clerk, or Register of Deeds). 4. The Create page will open where you will add the Title and Paragraphs (content). 5. Enter the Title for your new page. Be sure to keep the title specific to the contents of the page. The title you enter is what will be used to create the name of the new page, so it needs to be specific and clear as you will need to link to it later. 6. There are two sections for content Top Content Next to Sub-Menu and Main Content Under Sub Menu. You will want to add a paragraph to the Top Content Next to Sub-Menu. Do this by selecting a paragraph type and clicking Add new Paragraph. You can add multiple paragraphs to each section to separate content on the page. See screenshot on next page.

18 7. When you click the Add new Paragraph or Add another Paragraph buttons, you will see the editor open for that paragraph. Enter in the contents you want displayed in that section of the page. Be sure to use the WYSIWYG (What You See Is What You Get) tool bar that is similar to Microsoft Word to format any of the text on your page. 8. Once you have completed adding the text you want to the paragraph(s), click the Save button at the bottom of the page. 9. Complete! You have successfully created a new page. Note: See adding a link to an existing page section of this document to add a link to your new page.