D R U P A L U S E R G U I D E

Copyright 2016 Cyberwoven, LLC, all rights reserved. All information contained within is confidential.

www.purepowertechnologies.com

PurePOWER Technologies

LOGGING INTo log into Drupal, visit http://www.purepowertechnologies.com/user and enter your Username and Password.

ADDING AND EDITING CONTENTTo add new content to the website, navigate to the Content Menu and click Add Content. This will display a list of all the manageable content types on your website. Details about creating each type of content are included below.

For all content types, clicking Save will immediately publish the content to the live site. To save content without publishing, navigate to the Publishing Options tab, unselect the Published checkbox, and then click Save.

View a specific content type: Basic Page Case Study Leadership Leadership Location News Homepage Spotlight Product Spotlight Webform

1

Adding a Basic PageOn the Create Basic Page screen:

Enter the page Title. This will display on the page and determine the page’s URL path.

Upload an Internal Image to display above the Body content, in the header of the page (optional). Images should be at least 1570 x 666 pixels. Cyberwoven recommends compressing any images before uploading them (using tinypng.com) to keep the file size small.

Enter Intro text (optional). This will display in the header area of the page. Enter content in the Body. Add additional content layers to display on the page (examples: Spotlight,

Case Study, Work With Us)

To place this page within one of the existing menu structures, navigate to the Menu Settings section and select the Provide a Menu Link checkbox. The Menu Link Title will automatically populate with the page Title. Next, select the parent item.

Adding a Case StudyThis is for the Case Study layer you can add on the homepage or internal pages. This is meant as a teaser, so content should be an overview and should link to the Case Studies page under Services for more detail. On the Create Case Study screen:

Enter the Case Study Title. This will display as the page title. Enter content in the Body. Upload a photo to accompany the Case Study. ). Images should be at least

1199 x 600 pixels. Cyberwoven recommends compressing any images before uploading them (using tinypng.com) to keep the file size small.

Enter information for the Case Study’s button under Link. The Title is what the button will say, and the URL is where it should go.

2

Adding a Leadership personOn the Create Leadership screen:

Enter the First Name, Last Name and Job Title of the person you wish to add to the Leadership section.

The following fields are Optional. They should be completed for Executive Team and Staff Members, but left empty for most Board Members. Optional fields include:

o Location (the options in this dropdown are determined by the Leadership Location content type)

o Phone o Faxo Email Address

Upload a thumbnail photo. This will display on the Leadership page. Images should be square, 248 x 248 pixels and a .png.

Upload an additional photo in the Photo 2 field. This will display on the bio page. It should be a transparent .png at least 708 x 742 pixels.

Select the appropriate Leadership Category from the dropdown. This places the image in the correct category on the Leadership page.

Enter content in the Bio field. Under Misc Info, this is what displays in the sidebar box on the bio page

(example: Hometown). Enter a Headline and Text, as well as an optional Link for each item in the sidebar. You can add multiple text groupings into the sidebar by clicking the Add Another Item button.

Choose a Sort Priority from the dropdown. This will order the Leadership person within their category on the Leadership overview page.

Adding a Leadership LocationOn the Create Leadership Location screen:

Enter the Title of the location. Enter the Address.

3

Enter the City. Enter the State abbreviation. Enter the Zip Code.

Once saved, this will appear in the available dropdowns for the Leadership content type.

Adding a News SpotlightThis is for the News Spotlight that you can turn on or off on the homepage. This is meant as a teaser, so content should be an overview and should link to an internal page for more detail. Only one of these can be published at a time. So, when you add a new News Spotlight, you should unpublish any old ones.On the Create News Spotlight screen:

Enter the Title. Enter the Headline. Enter content in the Short description. Enter information for the News Spotlight’s button under Link. The Title is what

the button will say, and the URL is where it should go.

Adding a ProductThis is for the Product listing on a Product Category page. On the Create Product screen:

Enter a Title. Select from the Product Category dropdown. Enter Intro content. Enter Body content.

Adding a Spotlight

4

This is for the Spotlight layer you can add on the homepage or internal pages. This is meant to showcase a partnership (testimonial), employee, or other content where a quote can be featured.On the Create Spotlight screen:

Enter the Title. Enter the Full name. Enter the Job Title. Upload a photo to accompany the Spotlight. Images should be at least 519 x

478 pixels. Cyberwoven recommends compressing any images before uploading them (using tinypng.com) to keep the file size small.

Enter content in the Short description.

Adding a WebformOn the Create Webform screen, enter the Title and Body (the body will display above the webform). To make the webform display as a page in the navigation, check Provide a menu link in the Menu settings. The Menu link title will automatically populate with the page Title. Selecting a Parent item will nest your new page beneath an existing page in the site map. Click Save.

On the next screen, add the desired form components by specifying the Label, field Type, and whether the field should be required. Click Add. If necessary, add additional customizations to the component on the Edit Component page. Click Save Component. Details about some commonly used form components are below.

Radio buttons allow a user to make a single selection from a list of options. To add radio buttons to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. Click Save Component.

A checkbox list allows a user to make multiple selections from a list of options. To add a checkbox list to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. Select the Multiple checkbox under Option Settings. Click Save Component.

5

o To display a single checkbox option, enter just one Value. A select list allows a user to make a selection from a list of options. To add a

select list to a webform, choose Select Options for the field Type and click Add. On the Edit Component page, expand the Options section and fill in the Values. In the Display section, check the Listbox option. Click Save Component.

o To enable multiple selections, select the Multiple checkbox under Option Settings.

If you’d like to have form submission notifications automatically emailed, navigate to the Emails subtab, enter the email address that should receive the notifications, and click Add. On the Edit E-mail Settings screen, add any additional customizations to the notification email and click Save e-mail settings.

To view webform submission data, click the Content link in the top toolbar and select the Webforms tab. Use the controls under View to see the form’s submissions, view an analysis of the submission responses, see a table of the responses, and download the submission data.

There are also several content types that you cannot add new versions of, but you can edit existing Content. Do access this content, click on Content in the black toolbar. Then, filter by Type. This includes:

BlurbThis is the Work with Us layer that you can embed on internal pages.

Front PageThis is the homepage of the site. This is where you can choose what News Spotlight displays, as well as what Case Study or Spotlight is shown.

Inline WYSIWYG Content

6

This is The PurePOWER Advantage content that is shown within the About Us page.

Leadership PageThis is the main overview page for leadership where all headshots are seen. This is where you can edit the intro content and what Additional content, like Case Studies, are shown.Products PageThis is the main overview page for Products where all categories are seen. This is where you can edit the intro content and what Additional content, like Case Studies, are shown.

MANAGING TAXONOMIESTaxonomies are used to categorize and standardize types of content on your website. To manage taxonomy terms, navigate to the Structure menu and click Taxonomy. Details about management options are included below.

To view all terms in a taxonomy list, click List Terms. To edit an existing term, click edit and update the Name field. Click Save. To delete a term, click edit and then click Delete. To rearrange the order of the terms in a list, click the cross next the term and

drag it to the preferred placement. Click Save.

USING THE RICH TEXT EDITOR

The rich text editor simplifies HTML editing. Most of the tools are similar to those found in word processing programs like Microsoft Word. Details about the commonly used web-specific components are below.

7

Source

The source view allows you to see the HTML and make changes directly in the code. Cyberwoven does not recommend using this view unless you have experience working with HTML.

Paste Options

There are three different options for pasting text from another source into the editor. Details regarding each option are included below.

Paste – this is default method and pastes text verbatim into the editor. To avoid style conflicts within the HTML, Cyberwoven does not recommend using this option.

Paste from Word – this method attempts to preserve basic formatting when pasting text developed in Microsoft Word. To ensure design continuity, Cyberwoven does not recommend using this option.

Paste as Plain Text – this method strips out all formatting, leaving only plain text. Cyberwoven recommends always using this option.

Images

8

To insert an image, click the image button in the toolbar. The Image Properties dialog window that opens will let you set configuration options. Details about each property tab and its options are included below.

Image InfoThe Image Info tab allows you to select your image and configure the way it appears on the page. Cyberwoven recommends always resizing images before uploading them to the website to ensure appropriate scaling on smaller screen sizes. Details about each configuration option are included below.

URL – if you know the image’s URL, enter it here. If you don’t know the URL path, you can use the Browser Server button to select from images saved on the website.

Alternative Text – a text description of the image that tells users with assistive devices (like screen readers) what the image is about.

Width – the image’s pixel width. By default this is the size of the original image.

Height – the image’s pixel height. By default this is the size of the original image.

Border – the pixel size of the solid border around the image. A default border style has been built into your website. To ensure design continuity, Cyberwoven does not recommend adding custom borders.

HSpace – the horizontal pixel spacing (or padding) between the image border and surrounding elements.

VSpace – the vertical pixel spacing (or padding) between the image border and surrounding elements.

Align – the alignment of the image in the document can be set to right or left.

Please note: by default, the image dimensions ratio is locked, which is indicated by a Lock icon. This means that when you change the width or height values, the other one will be adjusted automatically. Cyberwoven recommends always keeping the image ratio locked to ensure images maintain their original proportions. To change the image back to its original size, click the Reset button.

Link

9

The Link tab lets you assign a link to an image, converting the image into a clickable link. For information on linking options, see the Hyperlinks section.

UploadThe Upload tab allows you to add new images to the website. To upload an image, click the Browse button. Select the image you want to upload and click the Send it to the Server button. The Link Info tab will open and the URL of the uploaded image will automatically appear in the URL field.

AdvancedThe Advanced tab lets you configure additional image options such as assigning it an ID, a class, a longer description, a tooltip, or CSS style properties. Defaults for all of these have been built into your website to ensure design continuity. Cyberwoven does not recommend making custom configuration using this tab.

Tables

To insert a table, click the table button in the toolbar. The Table Properties dialog window that opens will let you set configuration options. Details about each property tab and its options are included below.

Table PropertiesThe Table Properties allows you to configure your table and the way it appears on the page. The only required properties are the number of Rows and Columns. Defaults for the other properties have been built into your website to ensure design continuity. Cyberwoven does not recommend making any other custom configurations using this tab.

Advanced

10

The Advanced tab lets you configure additional table options such as assigning it an ID, a class, a language direction, or CSS style properties. Defaults for all of these have been built into your website to ensure design continuity. Cyberwoven does not recommend making custom configuration using this tab.

Once inserted into the document, content can be entered into the table and additional modifications can be made. Details regarding commonly used cell, row, and column modifications are included below. To access these options, double click or right click the table to reveal the table menu.

Rows Insert Row Before – inserts a new row before the one that contains the cursor. Insert Row After – inserts a new row after the one that contains the cursor. Delete Rows – deletes a row that contains the cursor.

Columns Insert Column Before – inserts a new column before the one that contains the

cursor. Insert Column After – inserts a new column after the one that contains the

cursor. Delete Columns – deletes a column that contains the cursor.

Cells Insert Cell Before – inserts a new cell before the one that contains the cursor. Insert Cell After – inserts a new cell after the one that contains the cursor. Delete Cells – deletes a cell that contains the cursor. Merge Cells – merges multiple cells in one. This option is only available if two

or more cells are selected. Merge Right – merges the selected cell with a cell on its right. The content of

both cells becomes joined. This option is only available if no more than one cell is selected.

Merge Down – merges the selected cell with a cell located on its bottom. The content of both cells becomes joined. This option is only available if no more than one cell is selected.

11

Split Cell Horizontally – splits the selected cell in two, creating a new cell on its right. The content of the cell appears in the original, left cell. This option is only available if no more than one cell is selected.

Split Cell Vertically – splits the selected cell in two, creating a new cell on its bottom. The content of the cell appears in the original, upper cell. This option is only available if no more than one cell is selected.

Cell Properties – opens the Cell Properties dialog window that lets you configure cell size, type, color, and content alignment. Defaults for all of these have been built into your website to ensure design continuity. Cyberwoven only recommends customizing the cell properties listed below.

o Rows Span – this setting stretches the cell downward over several rows. Entering a numeric value sets the rowspan attribute.

o Columns Span – this setting stretches the cell to the right over several columns. Entering a numeric value sets the colspan attribute.

o Horizontal Alignment – the horizontal alignment of table cell contents. The following options are available: Left, Center, and Right.

o Vertical Alignment – the vertical alignment of table cell contents. The following options are available: Top, Middle, Bottom or Baseline.

To delete the whole table and its contents, use the Delete Table option.

12

Text Formatting

A variety of text formats have been built into your website to make content styling easier. To apply a format, highlight the text you’d like to change and then select the desired format from the dropdown menu.

To ensure design continuity, Cyberwoven does not recommend using any non-custom styles or formats.

Hyperlinks

To insert a link, select the text you want to link and click the link button in the toolbar.The Link dialog window that opens will let you choose the link type and configuration options. Details about each link tab and its options are included below.

Link InfoLink Type specifies the category of the link that will be inserted. Details about each type of link are included below.

URL – the web address of any online resource, like a website, a document, or an image (i.e. http://example.com/about.html or http://example.com/images/image1.jpg). Other options associated with URL links are included below.

o Protocol specifies the communication procedure used with the web address. You can choose between the following options: http://,

13

https://, ftp://,news://, or <other>, but most of the time this selection is not needed.

o URL specifies the web address that the link is pointing to. If linking to another page on your website, enter the relative URL (i.e. /about-us) rather than the absolute URL (http://example.com/about-us).

o You can also use the Browser Server button to link to a specific file on the website.

Link to anchor in the text – an internal link pointing to a designated point on a webpage (i.e. #anchor1). Other options associated with anchor links are included below.

o Anchor links can be specified by selecting from the By Anchor Name or By Element Id dropdown. Cyberwoven recommends using the By Anchor Name dropdown for selecting an anchor.

E-mail – an e-mail address (i.e. mailto:myname@example.com). Other options associated with email links are included below.

o The email address, default message subject, and default message body are all customizable.

TargetOnly applicable if Link Type = URL, the Target tab specifies the location where the link will open after you click it. Details regarding the most commonly used target options are included below.

<not set> – the default setting that opens the link in the same browser window or tab. Cyberwoven recommends using this option for all internal links.

New Window (_blank) – the setting that opens the link in a new window. Cyberwoven recommends using this option for all external links.

UploadThe Upload tab allows you to add new files to the website. To upload a file, click the Browse button. Select the file you want to upload and click the Send it to the Server button. The Link Info tab will open and the URL of the uploaded file will automatically appear in the URL field.

14

AdvancedThe Advanced tab lets you configure additional link options such as assigning it an ID, a class, a tab index, a tooltip, or CSS style properties. Defaults for all of these have been built into your website to ensure design continuity. Cyberwoven does not recommend making custom configuration using this tab.

To remove a link, select the link and click unlink icon.

Anchors

To insert an anchor, press the Anchor button on the toolbar. In the Anchor Properties window, enter the Anchor Name. Cyberwoven recommends only using letters and numbers and excluding spaces in anchor names. Please note that anchors can be tied to a point on the page or content on the page, depending on how they’re set up. To remove an anchor, right click on the anchor icon and select Remove Anchor from the menu.

For information on linking to an anchor, see the Hyperlinks section.

MANAGING NAVIGATION MENUSTo adjust which pages display in the menus, click the Structure link in the top toolbar and then click Menus. Next to the menu you’d like to edit, click list links. Click and drag to reorder or reorganize the pages in the menu. Click Save Configuration.

15

MANAGING URLSAliasesAn alias or vanity URL is a different name for an existing URL path. To create a new alias, navigate to Configuration / Search and Metadata / URL Aliases / Add Alias. In the Existing System Path field, enter the relative URL of the page you want to create the new alias for. In the Path Alias field, enter the new alias. Click Save.

Existing aliases can be managed by navigating to Configuration / Search and Metadata / URL Aliases.

RedirectsA redirect sends a URL path to a new location. To create a new redirect, navigate to Configuration / Search and Metadata / URL Redirects / Add Redirect. In the From field, enter the relative URL of the old path. In the To field, enter the relative URL of where you want to old path to go. Click Save.

Existing redirects can be managed by navigating to Configuration / Search and Metadata / URL Redirects.

16