Simple Text Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshow

Accordions

Document 

Table Display

Tabs

First, navigate to the site (currently http://live-pueblo-county.pantheonsite.io) and login with your username and password. 
The login page can be found at /user. Once logged in, you will see the administration toolbar at the top of the page. Click "Manage" to view content manager options. 

In the administration toolbar, click "Content". This will show you a list of all content on the site. You should first filter the list to only show items from your own Department. Click the drop-down menu under the "Department" filter, select your department, and click "Filter". You may also filter the results based on Content Type, and Status. Your filters will be remembered by the system when you revisit this page.

To create new content, click the "Add Content" button above the filters. You can also select "Content" => "Add Content" from the administration toolbar.

Once on the Add Content page, you can select the type of content you would like to add. See ... for a description of the various content types. Click "Basic Page" to open the form to add a new basic page. Add some test content, and save the page as a Draft. Draft content is not available to the public. Use the Drafts for content that is not yet complete and ready to be published. Save often to avoid losing any work.

Some basic templates have been provided as a starting point for creating your content. The templates below include examples of a few different layouts you may want to use on your pages. Use these templates as a starting point for creating content.

• 3 Column with Header/Footer
• 2 Column with Header/Footer
• Slideshow with columns and content
• Video with columns and content
• Left sidebar with Header/Footer

To clone a template:

1. Open the template in a new tab (CTRL+Click one of the links above). 
2. Click the "Clone" tab above the page content (next to the Revisions tab).
3. Click the "Clone" button on the confirmation page to complete the clone
4. A new cloned page will be created as a draft
5. Add any header media and make sure to change the Department field to your own department

You can also clone any other existing page and use it as a template.

Every page on the website has either a header image or a header video. The header media is the image or video that is displayed underneath the main menu and behind the page title and breadcrumbs.

You can customize the header media for each of your pages or leave it empty to use the default. The website uses a simple hierarchy to determine what media should be displayed by default if the field is left empty.  If no media is provided, the site will first look for the configured department. If the department defines any header media then the page will inherit the image/video from the department settings. Finally, if no header media is configured for the department or no department is selected for the page, then the default homepage media will be used. 

Edit any page to add your own custom header media. The header media field is located directly under the department dropdown. From this field, you can select either "Header Video" or "Header Image".  For videos, only Vimeo is currently supported. Contact the IT department for question about uploading your videos to Vimeo.

Once you've decided on an image or video, you can choose to re-use an existing media item or add a new one. 

The aspect ratio of the header image will change slightly depending on the size of a visitor's browser (table, phone etc). Below are some general guidelines to keep in mind when selecting your header image or video:

1. The most important part of the image or video should be in the center. This will keep it from getting cut-off on phones or wide screens.
2. Do not include text or overlayed graphics. They will get cut-off or covered by page title and breadcrumb section.
3. For images, upload in jpg or png format. The image resolution should be at least 1920px wide by 958px high.
4. Keep videos short, ideally no more than 30 seconds. The video will loop automatically.
5. Audio is not included with the video.
6. The type of videos that work best are short drone style shots with a wide field of view.

Each department has a main landing page that is a little different then other pages on the site. Department landing pages are implemented as "Taxonomy Terms". Taxonomy Terms are used to organize content in Drupal and this allow other pages to be related to specific departments. However, editing a department taxonomy term is very similar to editing any other page with a few additional options.

Department landing pages are not included in the main list of content. To edit your department landing page, first select "Structure" => "Taxonomy" => "Department" from the main administration menu at the top of the page. This will take you to a list of all departments. 

Find your department in the list, and click "Edit" under the "Operations" column. Once on the edit screen, it will look very similar to editing any other page. 

There are two department branding options that you can customize.

1. First, you can upload a default header image or video for the department, this will be used for the department landing page as well as the default for any other department pages.
2. The second option is the branding color. You can select any HTML color from the color picker. This color will be used as the background for the title bar as well as the default color for buttons within your department. When picking a branding color, keep in mind that the title of the page is white so darker colors will allow for better contrast and accessibility.

When setting a branding color, you can also select an opacity value as a decimal between 0 and 1. This will add some some transparency to the title bar. 0 is completely transparent and 1 is completely opaque. 0.8 is a good default value to provide a little bit of transparency while still keeping the title easily readable. 

Finally, below the branding options, you can add widgets such as layouts, slideshows, images etc to the department page similar to any other dynamic page.