Determining Your Church Website’s Basic Layout: The WireframeBy
This post in the Using WordPress to Run Church Websites series is about deciding on your church website’s basic layout structure.
Since this is my tutorial series and there are seriously a near infinite amount variations one could use for a website layout and structure, I’m going to write it the way I do it.
Oftentimes this stage is called doing the “wireframe.” For simplicity, I’m just going to say — the basic layout of your site, OK?
Now, let me walk you through this basic layout by numbers. [Note: For some of you, it's going to seem very elemental. If so, go on to another post. ]
1. GRAPHICAL HEADER — This area will likely include my church logo or some sort of a photo possibly … it may even include two graphic areas.
2. MAIN NAVIGATION BAR – Like most websites, this area will house the main navigational links (or site categories) like “About Us,” “Ministries,” “Resources,” “Calendars,” etc.
3. SIDEBAR – I will also be referring to this sidebar as the “sub-nav sidebar.” This section will likely house an email subscription form, possibly a search box, and the interior pages within our “main navigation” that I referred to in No. 2. For instance, the main navigation may have a link to “About Us.” That section will most likely have several pages like a contact page, pastor bio page, beliefs statement, history, etc. The idea is when someone clicks the “About Us” link, in this sidebar section, all those sublinks will appear naturally. [If you're lost, just be patient, help is on the way!]
One other note about this sidebar section … I think this is one of the key tweaks to make WordPress look less like a blog and more like a typical website. Over the last couple of weekends I’ve been reading and research for how to do this. So I’m excited to walk through it with you.
4. MAIN CONTENT AREA – Obviously this section will be the main text of each page in the website.
5. FOOTER — This will include copyright information, a “contact us” link, phone numbers, address, and maybe even a link to a Google Map for driving directions to your church.
6. PAGE BACKGROUND — I included this element because we’ll be tweaking an existing WordPress themes and possibly the background image or colors.
Note: This is the phrasing I use and will not necessarily match the same terminology used in WordPress help files or even other website designers.
OK, now that you’ve seen the basic layout I use for most of the websites I design, now it’s on to finding a theme that can fit this!