913.888.0772 | imodules.com913.888.0772 | imodules.com

How to Use Encompass like an iModules DesignerPresented by Craig Juneau, Erin Messel & John Stringer

iModules Design Team

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 StringerFront End Web Developer

Craig JuneauSenior Web Designer

Erin MesselSenior Front End Web Developer

Utilizing the News & Events Modules

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

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.

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 headline2. A related image (or thumbnail image)

3. Summary or preview text4. A link to new or existing content (on your site or an external site)

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.

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.

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.

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

Applying saved listing formats

Most admins are familiar with the first step of the news and events listing modules’ settings:

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?

Applying saved listing formatsThis 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.

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!

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 Managerfor more information about adding patterns to your site.

Questions about News & Events

Next up: Content Customizations

Customizing Forms on Encompass

Customization Options on FormsCurrently 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.

Customization Options on Forms cont’d.

The Forms Customizations Big Three:1. By Step 2. By Category3. By Field

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).

CSS Classes on Categories

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

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.

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

Example: Donation Check BoxesAfter Customizations:Before Customizations:

Example: Input & Category AlignmentAfter Customizations:Before Customizations:

Example: Activity StepAfter Customizations:Before Customizations:

Live Examples

• Event Example:http://design.imodules.com/homecoming

• Giving Form Example:http://design.imodules.com/makeagift

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).

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!

Content Customizations

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.

(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?

(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.

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

(1) Taking Control of Your Content with CSSOverwrite.css file location …

(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.

(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 …

(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!

(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.

(2) Going Back to Class with CSS Classes

For more on classes and their creation, please visit the link below:

W3Schools.comhttp://www.w3schools.com/cssref/sel_class.asp

(3) Content Makeover

It’s time to step up your game and give your visitors some content with a little personality!

(3) Content Makeover

(3) Content Makeover

We are going to take your content from this …

(3) Content Makeover

… to this!

(3) Content Makeover

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

(3) Content Makeover

1. We will start by adding a MRCB module on to the page.

(3) Content Makeover

2. Click the newly added block.

(3) Content Makeover3. 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.

(3) Content Makeover

4. We will now be adding content to the left column only. The right column is to be left empty.

(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.

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

(3) Content Makeover

Content goes here HTML shot here

(3) Content Makeover1. The first block of content will be wrapped in a <p> 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

<div></div> tag and have the classes “imgRightOff” and “imgWrap” applied to the div. If no caption, the classes can be added directly to the <img> 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.

(3) Content Makeover

(3) Content Makeover

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

(4) Building a Grid Layout with MRCB

Time to get away from tables and use the MRCB to it’s fullest potential.

(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

(4) Building a Grid Layout with MRCB

This time we will be selecting the 3 column option.

(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.<div class=“imgWrap”>image + content goes here</div>

(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.

(4) Building a Grid Layout with MRCBFor 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 <div class=“paddingtop10”></div>.*4. Click ‘save’ and admire your new grid layout.

*For additional predefined class options, visit the following link. http://designblog.imodules.com/column-snippets

Questions about Content Customizations

Next up: Form Customizations

913.888.0772 | imodules.com913.888.0772 | imodules.com

Questions?