Jonah is a church website design that is all about balance. Complex, yet intuitive. Clean, yet balanced with great textures.
Jonah features your logo, slogan, image rotator, and three quick link graphics, all above the fold on most computers. Scrolling down the website is a balanced layout with three blog posts, your latest sermon, and four upcoming events. This website design was developed with engaging colors and textures that are sure to keep your visitors visually engaged as they learn more about your ministry.
This article will describe special features of the Jonah 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.
Jonah Pixel Sizes
Homepage Rotator: 2720 wide by 1020 tall
3 Homepage Quicklinks: 622 wide by 282 tall
Subpage Headers: 2720 wide by 768 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.
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-7 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 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.
Ministry Slogan
This design allows you to display a brief slogan or any other special phrase in the header of the website, above your navigation. To edit the text, go to Publish > Widgets > Top Slogan. Please be very brief with the featured text.*
*NOTE: Slogan phrase should be 6–7 words (35–45 characters max).
Times & Directions Drop-Down
This drop-down button is a very unique part of this design and allows you to add your church service times, church address, and a Google Map to your location. If your ministry does not have services, you may want to use this for your hours of operation or other important info. You can edit this section through 3 widgets, by going to Publish > Widgets > Service Times, Header Address and Header Map.
In the “Service Times” widget there are 4 lines. The days of the week use the Heading 4 font and the times use the “Paragraph” font. We suggest that you simply replace the text that is there and do not change the fonts. Please keep the lines very brief.
In the “Header Address” widget there are 3 lines. The “Church Address” title is in the Heading 4 font and the address lines are in the paragraph font. We suggest that you simply replace the address lines that are there and do not change the fonts.
This widget requires embedding a Google Map. Do this by opening a new tab and going to https://www.google.com/maps. Type in your church or ministry name or your address. Once the map is displaying what you want, click SHARE > Embed Map > Custom Size. Type in 425 x 350, then select and copy the Google code. Go to the Header Map widget and click the “Edit HTML” tab. Paste in the Google code and Publish.
Homepage Rotator
The wide image rotator in the Jonah design allows for a large image to promote or announce things. The bottom 1/5 of the Rotator is designed to be partially covered by the Quicklinks section to give the feeling of depth. You can add, remove, replace or link the images by going to Publish > Rotator.*
*NOTE: Recommended pixel size for Rotator is 2720 wide by 1020 tall.
Quicklink Images
The 3 Quicklink images* below the Rotator are essential to this design. To edit these images, go to Publish > Quicklinks. Click the pencil to replace the image and the chain link to link the images (linking to external websites from Quicklinks is not recommended). You can replace any of the images at any time.
*NOTE: Recommended pixel size for Quicklinks is 622 wide by 282 tall.
Featured Blog Posts
This section will display the 3 most recent blog posts and is controlled by the Posts module. You can add new blog posts by going to Publish > Posts. You can also change the title above the blog posts to say whatever you like. To edit the title that displays, go to Publish > Posts > [Blog Name]. Be sure to keep the title very short (2 or 3 words). Blog must be set to “Primary” to display on homepage.
To display text below the blog post title on the homepage, be sure to add a few lines of text into the “Summary” field on the “Content” tab in all of your blog posts. The homepage will display whatever text you add into the “Summary” field, but we suggest 40 words or less for the Summary. This can either be a summary of the blog post or a copy of the first few lines of the blog post into the “Summary” field.
Latest Sermon + Upcoming Event
Each of these sections is controlled by a different module. The top section is controlled by the Sermons module, which you can edit by going to Publish > Sermons. The bottom section is controlled by the Events module, which you can edit by going to Publish > Events. These will each automatically display the latest sermon and 4 upcoming events. Or you can mark a specific sermon and events as featured to display on the homepage.
Footer Navigation
In this section, you can feature the same navigation links as you have created at the top of the website, or you can have links to other featured pages, posts, or events.* You can edit these links by going to Publish > Widgets > Footer Navigation. Keep the items in a bulleted list, as this is how this widget keeps its styling. Link each item by selecting the word(s) and clicking the link tool.
*NOTE: We recommended featuring 6–7 links which are 1–2 word each.
Social Media Icons
This section allows you to display 5 different social media icons in both the header and footer. To add these, go to Publish > Social Links. From there you can edit, add, and arrange different links to social networks your ministry uses.
Footer Address
You can edit the address and contact info in the footer of the website by going to Publish > Widgets > Footer Address. Although we recommend featuring contact info for your visitors, you can use this area for whatever info will best serve your ministry. If you want the email to open an email application, simply type the email address, select it, and click the link tool. From there, click the Email Address tab.
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.