Mosaic is a fun and modern church website design with a postcard-like layout which prominently displays your Twitter feed.
Mosaic features a simple design for those who love to stay minimal. Let your hero graphics stand out with the postcard-like image rotator you can link to either sermons, ministries, events, etc. to create an effective promotional tool. Another feature that sets this website design apart is the visually prominent “Latest Tweet” and “Follow Us” button on the homepage to help you engage with your visitors.
This article will describe special features of the Mosaic 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.
Mosaic Pixel Sizes
Homepage Rotator: 2280 wide by 918 tall
Subpage Headers: 2280 wide by 520 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 1–2 words. 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.
Service Time(s)
This design allows you to display a sentence about your service time(s) in the header of the website, above your navigation. If your ministry doesn't have service times, feel free to use this section to say whatever you need. To edit the text, go to Publish > Widgets > Services. Please be very brief with the featured text.*
*NOTE: Service Times sentence should be 7–9 words total (30–40 characters max).
Social Media Icons
This section allows you to display different social media icons in the header. 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 to connect with people.
Homepage Rotator
The image rotator in the Mosaic design allows you to promote your ministry. You can add, remove, replace, or link the images by going to Publish > Rotator.*
*NOTE: Recommended pixel size for Rotator is 2280 wide by 918 tall.
The Latest Tweet
This design is very unique because it displays the Latest Tweet from your Twitter Account, right on the homepage below your Image Rotator. To link your Twitter Account, go to Admin > Settings > Twitter Account Settings. 
Contact Information
You can edit your address, phone number, and email in the footer of the website by going to Publish > Widgets > Church Info. Although we recommend featuring contact info for your visitors, you can add whatever info will best serve your ministry. Be sure to keep your text in the “Paragraph” font and in a bulleted list. 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.
