1. 913.888.0772 | imodules.com How to Use Encompass like an iModules Designer Presented by Craig Juneau, Erin Messel & John Stringer iModules Design Team

2. What to expect from this session We are going to look at strategies and tools the iModules Design Team uses that are also available to Encompass admins, including: Using the news and events listing modules for patterned content Customizing registration and donation forms with CSS classes and page verbiage Utilizing the mobile-ready content blocks to their full potential John Stringer Front End Web Developer Craig Juneau Senior Web Designer Erin Messel Senior Front End Web Developer

3. Utilizing the News & Events Modules

4. What to expect from this session Why use the news module for content? When could the news module be used instead of content blocks? How to apply saved listing formats for both news and event listings How to modify and create new listing formats

5. Why use the News or Events Module? Maintain content consistency, even with inexperienced content administrators or content creators Reusable patterns allow advanced functionality on multiple pages quickly and easily News content can be archived or published on a certain date Events will automatically be removed once complete Content can be pulled into emails, which can be patterned too! Mobile-friendly patterns can be created by iModules but easily maintained by you.

6. When could the News Module be used instead of content blocks? To display a list of related content, each item in the list should have at least 2 of the 4 following pieces: 1.A title or headline 2.A related image (or thumbnail image) 3.Summary or preview text 4.A link to new or existing content (on your site or an external site)

7. A few examples of custom News listings News Articles with Thumbnails (3 Across): This layout is not available by default but can be added to your site by contacting your Account Manager or Application Support.

8. A few examples of custom News listings More Uses to Consider: Membership Benefits List Featured Quotes from Alumni, donors, etc. Frequently Asked Questions Clubs, chapters or organizations list With the power of patterned content layouts, you can quickly and easily manage lists of related content. This is especially helpful for sites using a hybrid or mobile-ready templates.

9. Email Integration News and events can be pulled directly into the iModules email marketing tool, eliminating redundant work. Using the same types of patterning techniques, you can quickly add content to emails without fighting formatting or recreating content.

10. Applying saved listing formats When you first add a news listing to a page, this is how your content will display: the linked title and summary text of each article. Once the module is on the page, turn on Content Builder so you can go into the module settings. Default news layout

11. Applying saved listing formats Most admins are familiar with the first step of the news and events listing modules’ settings:

12. Applying saved listing formats Most admins are familiar with the first step of the news and events listing modules’ settings: But what about the second step?

13. Applying saved listing formats This is where we can select a saved listing format (pattern) to apply or choose to modify it. There are three parts of this step: 1.List of all saved formats (on the left). 2.Module Display Format Preview (Remember: this preview does not display using your site’s CSS, so don’t worry if it looks “wrong”) 3.The “Edit the selected Module Display Format” check box.

14. Applying saved listing formats 0 If you want to select a saved format, just pick the one you want from the left, and then click “Load Content”. This will load the saved pattern up for you, so all your articles or events displaying in the module will be formatted with the selected pattern. Note: You can have the same news listing type (set of articles) display with many different patterns across your site!

15. Helpful Links For a full list of available tokens (news & events) and their output previews: http://designblog.imodules.com/cms-tokens If you want to review any of the examples, be sure to check out: http://designblog.imodules.com/sizzlernewsdemo …or contact your Account or Implementation Manager for more information about adding patterns to your site.

16. Questions about News & Events Next up: Content Customizations

17. Customizing Forms on Encompass

18. Customization Options on Forms Currently there are few design customization options built into the Encompass forms system. To get a different look for forms, use CSS to target specific classes on form steps, categories or fields, or element IDs on elements generated by Encompass.

19. Customization Options on Forms cont’d. The Forms Customizations Big Three: 1.By Step 2.By Category 3.By Field

20. CSS Classes on Steps This class (and any styling added to it) will help target or change the styling for the elements in that step ONLY (not the whole form).

21. CSS Classes on Categories This class (and any styling added to it) will help target or change the styling for elements in that category.

22. CSS Classes on Fields This class (and any styling added to it) will target or change the styling of the element to which it is applied.

23. But what can I DO with these classes? Change how the input boxes look Change where the fields sit in relation to each other Stack a field’s label on top of its input Align a checkbox to the left of its label Float 2 fields or categories side by side (or even three across!) Highlight important information or fields

24. Example: Donation Check Boxes After Customizations: Before Customizations:

25. Example: Input & Category Alignment After Customizations: Before Customizations:

26. Example: Activity Step After Customizations: Before Customizations:

27. Live Examples Event Example: http://design.imodules.com/homec oming http://design.imodules.com/homec oming Giving Form Example: http://design.imodules.com/makea gift http://design.imodules.com/makea gift

28. A few notes… Don’t forget to check Page Verbiage in Verbiage Builder! Some default text or inline styles can be managed there, so you can change many system pieces to fit your style (note: these changes are global in many cases, so be careful).

29. A few notes… These changes use fairly advanced CSS techniques, but are still available to those brave enough to try it out! o Keep in mind: if you do put in custom CSS, it is up to you to test and maintain these new styles, so be sure to check your work on multiple browsers and devices!

30. Content Customizations

31. Advanced Techniques in Content Management Taking Control of Your Content with CSS. Going Back to Class with CSS Classes. Content Makeover with Mobile Ready Content Block or (MRCB). Building a Grid Layout with MRCB.

32. (1) Taking Control of Your Content with CSS 1.What is an overwrite.css file? 2.Where is the overwrite.css located? 3.Who is the Owner of the overwrite.css file?

33. (1) Taking Control of Your Content with CSS What is an overwrite.css file? The overwrite.css is an external CSS file that allows admins the ability to style elements within an HTML document.

34. (1) Taking Control of Your Content with CSS Where is the overwrite.css file located in Encompass? 1. Click on the Document Icon in the WYSIWYG editor.

35. (1) Taking Control of Your Content with CSS Overwrite.css file location …

36. (1) Taking Control of Your Content with CSS Overwrite.css will be blank by default. In order to make changes to the overwrite.css, you must first delete it from the document manager. Upload the new overwrite.css file from your desktop.

37. (1) Taking Control of Your Content with CSS Who owns the overwrite.css file? YOU Talk to your AM or PM if this is right for you. Side effects may include …

38. (2) Going Back to Class with CSS Classes Now that you have your overwrite.css file up and running, it’s now time to start working with classes!

39. (2) Going Back to Class with CSS Classes Classes Defined by YOU in either the overwrite.css file or a style block. Classes can be applied to any HTML element in order to change the default appearance of that element.

40. (2) Going Back to Class with CSS Classes For more on classes and their creation, please visit the link below: W3Schools.com http://www.w3schools.com/cssref/sel_class.asp

41. (3) Content Makeover It’s time to step up your game and give your visitors some content with a little personality!

42. (3) Content Makeover

43. We are going to take your content from this …

44. (3) Content Makeover … to this!

45. (3) Content Makeover Tools we will be using for this makeover include … The Encompass “Mobile Ready Content Block” Overwrite.css + Classes Content + images

46. (3) Content Makeover 1. We will start by adding a MRCB module on to the page.

47. (3) Content Makeover 2. Click the newly added block.

48. (3) Content Makeover 3. For this exercise, we are going to select the 70/30 split. This will allow us to push the image to the right without actually pushing it too far beyond the sites width.

49. (3) Content Makeover 4. We will now be adding content to the left column only. The right column is to be left empty.

50. (3) Content Makeover 6. After you have added your content, with the editor open we are going to click on the “HTML” button in order to add in our classes.

51. Welcome to the HTML view. You can copy and paste the code into another editor (Dreamweaver or Notepad++) for easier editing.

52. (3) Content Makeover Content goes here HTML shot here

53. (3) Content Makeover 1.The first block of content will be wrapped in a paragraph tag and have the “largeText” class applied to it. 2.If the image is to show a caption, it will need to be wrapped in a tag and have the classes “imgRightOff” and “imgWrap” applied to the div. If no caption, the classes can be added directly to the tag. 3.Click “save” and your done! – A word of caution when using the “imgRightOff” class. If media queries are not being used to prevent the image from going off the screen in mobile devices, you might not use this class.

54. (3) Content Makeover

55. The following link will provide you with a working example of the Makeover and more: http://design.imodules.com/makeover

56. (4) Building a Grid Layout with MRCB Time to get away from tables and use the MRCB to it’s fullest potential.

57. (4) Building a Grid Layout with MRCB Benefits Cost effective Stackable for mobile devices Flexible for all devices You are in control of columns and design

58. (4) Building a Grid Layout with MRCB This time we will be selecting the 3 column option.

59. (4) Building a Grid Layout with MRCB Many of the same steps from the “Content Makeover” are used to create the Grid layout. 1.Add content. 2.Wrap content in the following wrapper like before. image + content goes here

60. (4) Building a Grid Layout with MRCB But how do we make more rows? Drag a new MRCB on to the stage for each additional row. Repeat steps, from previous screens, for selecting 3 columns and adding content to each MRCB.

61. (4) Building a Grid Layout with MRCB For multiple row layouts follow these instructions to create additional space between rows. 1.Drag a MRCB on to the stage in between each row. 2.Select single column. 3.Add a.* 4.Click ‘save’ and admire your new grid layout. *For additional predefined class options, visit the following link. http://designblog.imodules.com/column-snippets

62. Questions about Content Customizations Next up: Form Customizations

63. 913.888.0772 | imodules.com Questions?