Missio is a beautifully modern church website design, abundant with clean lines, large graphic areas, minimal color, and crisp type.
Missio features a unique, graphical content layout as you scroll down the website. The navigation area and service times creatively overlap the large image rotator on the homepage. Below that, the sermon block and five large quick link graphics will help you create a stunning look. This website design helps you provide valuable info for first-time visitors before they visit your church.
This article will describe special features of the Missio design, and help you manage the content on your website. If you still have questions after reading this Guide, please review all of the videos and articles in the Help Center.
To see our preview of this design: missio.churchplantmedia.com.
Missio Pixel Sizes
Homepage Rotator: 2400 wide by 1572 tall
4 Quicklinks (positions 1, 2, 3, & 5): 562 wide by 562 tall
1 Quicklink (position 4): 1176 wide by 562 tall
Subpage Headers: 2400 wide by 730 tall
Sermon Series: 1000 wide by 672 tall
Featured Blogposts: 618 wide by 398 tall
Featured Events: 310 wide by 200 tall
To crop and resize your images we recommend using either Adobe Photoshop Elements (under $100) or a free alternative like Pixlr (https://www.pixlr.com/web) or Canva (https://photo-editor.canva.com). There is also a free version of Photoshop that you can use here: http://www.photoshop.com/tools.
A Word About Saving Images
Larger pixel sizes look better on Retina Displays but they can also be large file sizes if they are not optimized. To reduce file sizes and help speed up load times, be sure to use “Save for Web & Devices” in Photoshop or a similar setting in other tools. Always save photos at 50%–70% quality (or lower).
Adding Your Logo
To add your logo to the site follow these steps:
- Make sure the logo file is a transparent png.
- Name it logo.png and save to your computer.
- Login to the CMS and go to Publish > Files.
- Search for "logo" and you'll see "logo.png" listed.
- Click the filename and then: Upload a New File.
- Select your logo file and click: Start Uploading.
- Click: Save to publish the logo to the website.
- Your logo will now appear in the header.
If any adjustments are needed, please let us know by creating a case in the Help Center (FYI: you may need to clear your cache to see the new logo appear on your site).
A Word About Fonts
We normally limit the number of font options that are available, because we have found that the more font options we give, the more disjointed the site becomes (different font styles, effects, sizes, colors, etc.). Consistency is key, so limiting the font selection to a predetermined “matching” fonts list is usually best.
To see a list of the 7 font styles you have available, go to:
https://missio.churchplantmedia.com/styles
You can utilize these styles by using the “Format” drop-down box while editing a page.
Main Navigation + Pages
The navigation allows for about 6-8 top level links to pages and an unlimited number of 2nd and 3rd level links. You can fit more top level links if you limit each top level link to a single word. When we install the site there is a “Home” link to the homepage for usability reasons, however, this link can be removed to create room for another link as needed. To create pages or manage the navigation go to Publish > Pages and Publish > Navigation. It will be easier to organize your navigation by first creating most of your pages.
A Word About Intro Paragraphs:
This design has a special hard coded feature on all subpages that draws attention to the first paragraph with a different font. This is a great way to grab the attention of your visitors, so you will want to write the first paragraph in such a way that it will stand out. This is currently a hard coded feature that cannot be changed. Please do not use the Intro Paragraph format for all of the text on the page.
A Word About Links + Page Content:
For usability reasons, please do not link top level navigation items to external websites. Think of your navigation as an elevator to floors in your building and not as a map out to the world. And when creating pages or a blog, please avoid using the words “Coming Soon” or “Under Construction” as the only content on the page. A good rule of thumb is: always under-promise and over-deliver.
A Word About SEO (Search Engine Optimization):
Be sure to add 150-160 character descriptions to all of your pages, including your “Home” page. These will be displayed on Google when people search for your website. Make sure that these are different for every page, but be sure to use keywords that people will be using on Google as they search for your church or ministry. And when you add your page content, make sure you use those same keywords in your text. A great resource for learning about SEO is the Beginners Guide to SEO by Moz.
Character Count Online is another helpful tool that will come in handy when creating page descriptions and other content: http://www.charactercountonline.com.
New to Our Church? Button
This design allows you to prominently display a “New Here” style button in the header of the website, above the navigation. You can link this button to a page in your site that gives people all the info they will need to learn more about your ministry. If your organization would prefer to link to a different type of page, feel free to use this section as needed. To edit the text, go to Publish > Widgets > New/Church Name. Please be very brief with the text that you add into the widget.* To link the button, select the text and click the link tool and select a page. For usability reasons, this button should link to an internal page inside the website.
*NOTE: Limit phrase to about 4 words total (24 characters max).
Service Times + Button Links
This design features a service times section and 2 Quicklink hover buttons below the navigation. The service times section is designed to include a full sentence briefly inviting people to join you whenever you meet and the hover buttons are designed to link to pages with maps and more info.* If you do not have Service Times, feel free to use these areas in whatever way it will serve your ministry.
To edit these, go to Publish > Widgets > Homepage Service Times, Homepage Button 1, and Homepage Button 2. Simply replace the sentences/words with your text. To edit the links (which will display as buttons) first select the links and click the break-link button. Then change the words to whatever you want the buttons to say. To create the buttons, select the text and click the link tool. From the “Insert a Link” menu, click Pages > Insert Link. Be sure to add the button text in all caps.
*NOTE: Limit sentence(s) to about 15-18 words total (88 characters max) and the 2 links to 1-3 words each (15 characters each).
Homepage Rotator
This very large Image Rotator is one of the most memorable parts of the Missio design. This particular design is unique because the color behind the navigation and Service Times is semi-transparent and it covers the top 1/4 of the images in the Rotator. This provides a subtle, yet very artistic effect in the design. This same effect is built into the subpage header images. You can add, remove, replace or link the images by going to Publish > Rotator.*
*NOTE: Recommended pixel size for Rotator is 2400 wide by 1572 tall.
Latest Message
This section is controlled by a different module. To add sermons, go to Publish > Sermons. Be sure to add the sermon into a sermon series and add audio and/or video media. If your ministry does not have sermons, you will need to add at least 1 audio or video for this area.
Quicklink Images
The 5 Quicklink mages* and titles below the Rotator are essential to this design. Images #1, #2, #3, and #5 are all squares and image #4 is a rectangle. To edit these images, go to Publish > Quicklinks and click the pencil to replace the image. You can manage the images here at any time. You can also link these images to pages from this area (linking to external websites from Quicklinks is not recommended).
*NOTE: Recommended pixel sizes for square Quicklink is 562 wide/tall and rectangle Quicklink is 1176 wide by 562 tall.
Homepage Mission Statement
You should use this area to display the mission or vision statement of your ministry. If you do not have a mission statement, you may want to feature a Bible verse. Although the website will display whatever you add here, please be as brief and succinct as possible. To edit this section, go to Publish > Widgets > Slogan.*
*NOTE: Slogan should be no more than 20-30 words total (130-150 characters max).
Social Media Icons
This section allows you to display up to 7 social media icons. To add these, go to Publish > Social Links. From there you can edit, add, and arrange different links to the social networks your ministry uses for outreach and connection.
Footer Navigation
This section automatically displays all top level and 2nd level links that you add into the navigation module (see navigation notes above). Because this design features these navigation links in the footer, you will want to pay special attention to how many subpages you have under each top level navigation item. For both usability and design reasons, every top level page should have at least a few subpages below it.
A Word About Events
When adding events into the Calendar, please do not forget the most important event of your week. Believe it or not, many churches forget to add their weekly gathering as a reoccurring event. Be sure to add the time(s) and location along with some helpful info about what people can expect if they visit.
A Word About Settings
You are also able to connect your website to various 3rd party social media and other services by going to Admin > Settings. In this area you are able to select a Bible version that will display whenever a Bible verse is written out on your pages and in your Sermons/Podcasts. You can also connect a Twitter account and/or Facebook page to share new posts every time you publish new Sermons, Events, and Blog Posts. You are also able to add your Google Analytics account to track all of your visitor statistics and your Google Sitemap Verification Code. Lastly, if you do not have online giving, you can easily connect a PayPal account that will create an “Online Giving” page that you can add into your navigation.
