913.888.0772 | How to Use Encompass like an iModules Designer Presented by Craig Juneau, Erin...
-
Upload
grant-jordan -
Category
Documents
-
view
223 -
download
0
description
Transcript of 913.888.0772 | How to Use Encompass like an iModules Designer Presented by Craig Juneau, Erin...
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?