Components and Page Editor

1. Components and Page Editor • To add a component via Page Editor, go to the View tab and check the Designingcheckbox to enter Designing mode. • Next, simply click the Component button under the Home tab. • You will notice that grey Add to here icons now show up throughout the page. These are the locations in which you are able to add various components.

2. Components and Page Editor (continued) • Upon clicking one of the Add to here icons, a list of insertable components will be shown in a pop-up window titled Select a Rendering. Pick the desired component and click Select. • For further instructions on adding components, search this document for the proper component and follow the directions listed there. NOTE: In Page Editor, use Designing mode when adding components, setting associated content, and moving componentsaround on a page. Use Editing mode when editing the content of an existing component.

3. Data-Sources > Existing and New • After adding a component, you are able to choose between Select Existing Contentor Create New Content. • If Select Existing Contentwas chosen, select the appropriate content in the tree and hitok. • When choosing Create New Content, namethe new content, selecta location where the content will be saved, and then click ok.

4. Creating Data-Sources > Branches • To createcontent / data-sources from a branch using contenteditoryou must follow these steps. • *In this example we will be using the InterestingInfoBranch.* • InContentEditor, navigate to the appropriate folder within site-data. • Rightclickon that same folder, click on Insertand select InsertfromTemplate. NOTE: Be sure to save your work often by clicking the floppy disk button in the top left corner of the page editor toolbar.

5. Creating Data-Sources >Branches (continued) • Click the browse tab, locate and click on the BranchInterestingInfo template within the Branches node, give your item a name, and click Insert. • You will now seeyour new content / data-source neatly organized within your tree. • The parentitem holds your categoriescalled InterestingInfoCategory, and your categorieshold your • text items called InterestingInfoItems. • You must now editthe itemsthat were created by clickingon the children items and changingthe data in the fields. You can also editthe name that appears in the treeby clickingon the item and hitting F2on your keyboard or rightclicking the item and clicking Rename. InterestingInfoCategory InterestingInfoItems NOTE: See the Interesting Info slide for more information on adding this component.

6. Creating Data-Sources >Branches (continued) • If a secondcategory needs to be created, select the parent item, rightclick the item, click Insert, click InterestingInfoCategory, give the item a name, and click ok. • Your new item will show up in the tree and you may now add children items to it. • The processof adding children to categories is the same as the steps above. Select a category, right click it, click on Insert, choose InterestingInfoItems, • give it a name, and click ok. NOTE: Be sure to change the default data. This can be done within “Content Editor” or “Page Editor.”

7. Feature Box > Picture, Title, and Text • The Feature Boxis a small component that uses a Picture, Title, and RichText of your choice. • After adding this component to your page click inside the edit box so the Feature Boxedit buttons become visible. • Clicking the blue box with the checkmark brings up a new window where you will add content within the editable fields. NOTE: You will not see an image edit frame until an image is added to the component. This is the intended practice for this component

8. Feature Box >Picture, Title, and Text • Be sure to edit all fields appropriately. • To change or insert a Link, click on one of the Link buttons and follow the instructions on the insert link slides. • Be sure to edit the Text field by clicking one of the Textbuttonsabove the field and entering your text or html. • To change or insert an Image, click the browse button and follow the instructions on the insert image slides • After all of your content is entered hit ok. • Save your work by clicking the floppydisk icon in the topright corner of page editor.

9. Social Media Buttons > Follow Us • Once the component is added to the page you will need to click the whitespace next to the title to bring up the edit buttons. • Click the blueboxwith the checkmark to open the content editor window. • To add or edit a link, click on the Insert External Link above the Social Media title and fill the URL field with your Social Media Profile link. • You can also edit the Title of the component by changing the text in the Title field. NOTE: If a field is left blank the button will not appear on the page.

10. Social Sider Bar > Twitter Feed • Once the component is added to the page you will need to click the whitespace to bring up the edit buttons. • Click the blueboxwith the checkmark to open the content editor window. • Fill-in all the fields in order to allow the component to pull in the Twitter posts. NOTE: If a field is left blank the component will not appear on the page.

11. Announcement Bar >Title and Text • The Announcement Bar is a component that is used to display special announcements. It can be added to any page type. • When you add an Announcement Bar to a page and create new content, it will appear like this in Editing mode. • Notice that both fields contain the message No text in field. You can click on either field and begin to add text directly onto the page. NOTE: When both text fields are empty, the Announcement Bar will be invisible outside of Page Editor. If the page is published in this state, site visitors will not see the bar at all. This allows you to leave it on the page for future use, and to add or remove content as needed.

12. Galleries > Add Videos and Images. • There are five gallery styles to choose from. #1 through #4are good choices for displaying both Images and YouTubevideos, while #5 is best for Images. • Galleries can go in the center column of a three-column page, or the right column of a two-column page. • To add a gallery in Page Editor, click the Component button and choose an appropriate Add to here icon. • In the Select a Rendering dialog, choose which gallery style you would like to use, then click “Select”.

13. Galleries (continued) • In the Select the Associated Content window, you can select existing gallery content or create new gallery content. • After selecting the content for the new gallery and clicking OK, click the Save icon in Page Editor. • If you created new content, the gallery will now appear on the page with a couple of sample slides that you can edit, add to, and further customize. • If you enter Editing mode and click a blank area on a gallery, a toolbar will appear. Clicking the green plus sign edit button will allow you to add more slides to the gallery.

14. Rich Text • The Rich Text component can be placed in the right column of a three-column layout, and allows you to add custom content. • As you can see in the example screenshot, this component can contain multiple lines of text and images. Beyond that you can style and format your text in various ways. • In addition, if you want to use customHTML for display on a page, this component will allow you to do so. • Once you have added a new Rich Text component to a page through Page Editor, you will see an empty bordered component with text inside of it that reads [No text in field].

15. Rich Text (continued) • To edit the content of this component, go into Editing mode. Now you can click on the text and immediately begin editing it. • If you would like to have more options in terms of styling the text, addingimages, or manipulating markup, click on the far left icon in the toolbar that appears. • You can now edit the text in this window, using the various buttons to add features and styles to your text. • Note that the Design tab is selected by default when you open this window. If you select the HTML tab, you can add markup directly to the text area, which can then be rendered on the page (within this component). • When you are finished, click Accept and make sure to save the page.

16. Rich Text with Title • The Rich Text with Title component is a specialized, left-column version of the standard Rich Text component. It allows you to enter a pre-styled Title and multiple lines of text with whatever formatting you choose. • If you have added the component to a page without using existing content, you will be presented with two fields that read No text in field. • Just go into Editing mode and you can immediately enter text in each of the these areas. Just make sure to click Save when you are finished! • This component is perfect for displaying things like office hours or contact information.