Table of Contents

JMP Module Examples

More configurations are available simply by using/not using certain sections and turning off, on, or changing more features and settings. These examples will give you a good idea of the options for laying out website content. 

JMP Hero

Usually the first module on the page.

JMP Split

The most common modules. Many configurations available. 

JMP Rich Text

Example 1 (text only. 4 buttons)

JMP Rich Text

Example 2 (full-width image. Can also use it for a single video)

JMP Multi-Column

Example 1 (image columns)

JMP Multi-Column

Example 2 (rich text columns)

JMP Image List

Example 1 (with images)

JMP Image List

Example 2 (without images)

JMP Lead Capture

Example 1 (Content|Form with Image in Middle)

JMP Lead Capture

Examle 2 (Form|Content with Image at top)

JMP Lead Capture

Example 3 (Form on Bottom with floated image)

Tip!

There is a transparent blue arrow at the bottom of the screen. If you click on it, it takes you to the top of the page. 

JMP Hero

Sub-Headline

Rich Text area. Use minimally, if at all.

All this text can be left, center, right justified.

If you have images in mind, let me know.

JMP Split Section

Sub-Headline

Introduction. This spreads across the entire module. It sits above the split part. I'll keep writing so you can see how it goes all the way across.  Remember, you don't have to use every option in the module.  Make the content fit as best as possible. I play around with different layouts quite a bit depending on the content I'm working with. 

Split Headline

Split Sub-Headline

Split Headline

There are more image settings. You can make it round, have different shadows, and more.

Text area. You can change the ratio of the text width vs. the image width, so you don't have too much white space in the text area. If you have a big image and a little bit of text, you can end up with a lot of blank space unless you change the split settings. 

The split is broken down into 12ths. You can do 11:1, 1:11 3:9, 9:3, etc.  Here's an example. (Click and scroll down some and you'll see what I mean. This was before we switched to 12th's)

Conclusion: There are lots of layout options. I made this an H3 vs. paragraph text so it's bigger. 

Don't for get you can left, center, right justify just about everything. 

JMP Rich Text

Example 1

Rich text area. This example only has text. 

JMP Rich Text

Example 2

Containes a full-width image.

Some of Our Clients

JMP Multi-Column

Example 1: Image Columns

Introduction rich text area.

Remember, you don't need to use all the settings and fields. This example has them all turned on.
The key is to make each column consistent in length and style. You can have up to 6 columns across.

Headline

Sub-Headline

Introduction 

Headline

Conclusion - Rich Text Area

Headline

Sub-Headline

Introduction

Headline

Conclusion

Headline

Sub-Headline

Introduction

Headline

Conclusion

Headline

Sub-Headline

Introduction

Headline

Conclusion

Headline

Sub-Headline

Introduction

Headline

Conclusion

Headline

Sub-Headline

Introduction

Headline

Conclusion

Conclusion rich text area. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

JMP Multi-Column

Example 2: Rich Text Columns

You can have buttons under the columns, but in this case, I'm showing an alternative way to link to something else. Too many buttons can look overwhelming. Depends on what the section is and if it needs a button, and how many other buttons are on the page. 

Headline

Subheadline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. More

Headline

Sub-Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. More

Headline

Sub-Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. More

You can also have a single button for the section at the bottom. Like, if you wanted to describe 3-6 things, and they all go to the same page. 

JMP Image List

Example 1

Introduction: The images can be round or square.

Item Headline

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Conclusion: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

JMP Image List Section

Example 2

An image list with no images. The maximum number of items in a row is 3.  

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

JMP Lead Capture

Content|Form with Image in Middle

Introduction. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headline

Sub-Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Sample List Item
  • Sample List Item
  • Sample List Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Headline

Aenean elit tellus, tincidunt sagittis lacinia in, vestibulum id nulla. Suspendisse vestibulum convallis sagittis. In et felis eget magna sodales vestibulum. Nulla odio lorem, dapibus et accumsan quis, rutrum vel nisi. Vestibulum dignissim interdum eleifend.

Form Headline

You can also have a message under the button!

Conclusion: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

JMP Lead Capture

Form|Content with Image at top

Headline

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Sample List Item
  • Sample List Item
  • Sample List Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Aenean elit tellus, tincidunt sagittis lacinia in, vestibulum id nulla. Suspendisse vestibulum convallis sagittis. In et felis eget magna sodales vestibulum. Nulla odio lorem, dapibus et accumsan quis, rutrum vel nisi. Vestibulum dignissim interdum eleifend.

Form Headline

You can also have a message under the button!

JMP Lead Capture #3

Form on Bottom with floated image

Label

Headline

Sub-Headline

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Sample List Item
  • Sample List Item
  • Sample List Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Aenean elit tellus, tincidunt sagittis lacinia in, vestibulum id nulla. Suspendisse vestibulum convallis sagittis. In et felis eget magna sodales vestibulum. Nulla odio lorem, dapibus et accumsan quis, rutrum vel nisi. Vestibulum dignissim interdum eleifend.

Form Headline

You can also have a message under the button!