In this post, I will show you how you can build an (almost) free church website with the Divi Website Builder. You will be able to build your church website on Divi without paying a developer and, as a bonus, learn a skill set to help out your friends and colleagues in ministry. Divi church websites are beautiful sites that are easy to update and look great!
Want to skip ahead? In this guide to Divi Church Websites, we will cover:
Tools Needed for Divi Church Website
There are a couple of tools you will need to invest in. The title says “Building an (Almost) Free Church Website with Divi Website Builder” and this is the “almost” part. That said, these tools are affordable and, in my opinion, worth it. So here’s your shopping list:
*quick note: these are all affiliate links. I give this information away for free because I want to help people, but these links give me a referral commission and help me to keep making helpful content. Think of clicking a link as sending me a gift card for coffee. Also, you should know that I use every tool that I recommend. Thanks!*
- Divi Theme – $249 one time or $89/yr. This is one of the leading WordPress themes and has countless free tutorials online. To me, this is immensely worth it and you should go ahead and spend the money. On top of that, this license allows for unlimited sites. That means that you can build your own church’s website and your friend’s church website without paying for a second license. If it is still too much, you can use one of the many free themes on WordPress.org or you can get a free year of Astra Pro with Cloudways Hosting so that is worth considering if you are really tight on cash! Divi is also on sale sometimes so you could always wait.
- Cloudways Hosting – $12/mo – After getting set up with Divi, use this link to sign up for Divi optimized hosting by Cloudways. You can read more about hosting in the hosting section.
- Domain – NameCheap – Price Varies – You can use whatever domain name service you want. I chose NameCheap because the Cloudways tutorials use NameCheap so setting up DNS will be super easy.
Step 1 – Get A Domain
You probably already have a domain for your church website. If not, head to namecheap and buy a domain. If you are struggling to select a domain for your church website, consider these things when selecting.
Things to Consider When Choosing a Domain
- Is there some recurring name your church uses on Facebook or Instagram? Use that! It will make it easy to remember your url.
- Are you willing to consider a .co or a .church to get an easier to remember url? Sometimes these cost more but can be worth the investment.
- A shorter url will be easier to live with than a longer one. Remember that you will be using this url on graphics and facebook post. No one wants to write 14 words on a graphic.
Step 2 – Set Up Hosting
As mentioned above, I recommend using Cloudways for hosting. There is cheaper hosting out there. You could go to Bluehost or GoDaddy and get cheaper hosting. I want to urge you not to do so. When I first started out, a client hosted a site on GoDaddy. It was a nightmare. Bluehost is fine but it can be surprisingly slow. I wrote an article for Church Tech Today that explains WHY they are slow. In short, you are paying for a small amount of shared server space and frankly paying too much for it.
Cloudways is cloud based VPS-styled hosting. You will get better hosting that’s optimized for Divi with great customer support and daily backups. I am begging you to spend a little more on hosting so that you don’t hate your past self for not spending a little more on hosting.
But wait…there’s more!
That $12/month buys you a whole server, not just a site. You can host 10-20 low traffic sites on ONE server. That means that you could potentially sell hosting to your friends site that you build with the Divi License you already bought…look at you…having a business with recurring revenue.
Important Note: Purchase your Divi License before you purchase your hosting! This will allow you to link your Divi and Cloudways accounts to build a perfectly optimized Divi church website.
Step 3 – Start With a Template
So now you have a theme, hosting, and a domain. You are almost ready to go! This tutorial is meant to be short and easily accessible, so we will keep this part short. If this is your first website, start with one of Divi’s many templates and you are well on your way. Your Divi church website will look professional without any skills as a web designer. These templates can provide a perfect base to start from for your website.
How to Wire-frame a Landing Page for a Church Website
If you are wanting to go a little deeper into design and not lean as heavily on a template, the following is my go to layout for a home page. It comes from Donald Miller’s excellent book Marketing Made Simple
- Header – Say what you are and what you do
- Stakes – State the problem you solve
- Value – Communicate the value you provide
- Guide – Present your church as the guide who has been there and can help
- Plan – Communicate a three step plan that leads people to your desired action (showing up in church)
- Video – a video talking about your church targeted towards new people focusing on THEM, not you
- Explanatory Paragraph – 500-800 words of text designed to help you rank in search engines.
- Call To Action – You want to build the whole page around your call to action. I have always chosen a “plan a visit” link that links to a page targeted specifically at new people. This section of your site is a big swing attempting to get them to that page.
- Junk Drawer – Footer
If you have these things on your home page, it will go a long way towards making a great website!
In addition to all of the above, the most important thing you can do for your Divi Church Website is build your site with the user in mind. What are people looking for when they come to your site? Service times? Address? The bulletin (i know…I know…believe me…I know…)? Whatever it is, build your site to be easy to use and people will be thrilled. This will help you more than anything else in building your church website.
Step 4 – Set Up Sermons
Setting up a sermon portal is a key part of any church website. With Divi, a plug in called Series Engine, and a lot of CSS code, you can make a great sermon page for your church website. Series Engine is pretty straightforward and easy to use. Also their support is top notch. They have great set up tutorials and they are an established plug-in used by a lot of churches.
Making Series Engine Look Good (A Little More Advanced But Try It!)
If Series Engine has a downside, it is how bland and grey it looks. There is some built in customization but making it look great will take some effort. For my clients, I use the following CSS to make it look great. The following CSS code displays your series page as pictured above and makes your buttons and other text fit the theme of the rest of your site. If you copy/paste this into your custom CSS in Divi. Those hex codes next to –color-primary: and –color-secondary: should be replaced with your theme colors. Use a site like this to look up your hex codes.
Divi>Theme Options>Scroll Down to the Custom CSS Box and Paste this.
Click Here to Scroll to the Next Section
:root {
--color-primary: #154822;
--color-secondary: #006e90;
}
/*** Series Engine ***/
/* Series Layout */
@media (min-width: 700px){
#seriesengine .enmse-related-area.card-view {
padding: 0px 0 0 0 !important;}
}
.enmse-message-card {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
border-radius: 4px;
overflow: hidden;
}
@media (min-width: 700px){
#seriesengine .enmse-message-card {
display: flex;
flex: 1;
flex-basis: auto;
justify-content: center;
flex-direction: column;
width: 42%;
margin-bottom: 20px!important;
margin: 0 15px 20px 15px;
box-sizing: border-box!important;
background-color: #eae8e6;
max-width: 470px;}
#seriesengine .enmse-message-card.enmse-middlecard {
margin: 0 15px 20px 15px;}
}
@media (max-width: 699px){
#seriesengine .enmse-message-card {
display: table;
width: 100%;
padding: 0;
margin-bottom: 20px !important;
margin: 20px 15px 20px 15px;
margin: auto;
margin-top: 20px !important;
box-sizing: border-box!important;
background-color: #eae8e6;}
#seriesengine .enmse-message-card.enmse-oddcard,#seriesengine .enmse-message-card.enmse-evencard,#seriesengine .enmse-message-card.enmse-middlecard {
margin: 20px 0 20px 0 !important;}
}
#seriesengine .enmse-message-card img {
width: -webkit-fill-available !important;
height: auto !important;
border: 0 !important;
box-shadow: none !important;
}
#seriesengine h3.enmse-more-title {
display: none !important;
}
#seriesengine .enmse-message-card:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#seriesengine .enmse-media-container.modern {
padding: 10px;
border-radius: 4px;
}
/* Filter Dropdowns */
@media (max-width: 700px){
#seriesengine .enmse-selector.four select, #seriesengine .enmse-selector.three select, #seriesengine .enmse-selector.two select {
margin: 10px 0 10px 0 !important;}
}
@media (min-width: 700px){
#seriesengine .enmse-selector.three select {
border: 1px solid #222 !important;
background-color: #ffffff !important;
color: #222 !important;
font-size: 17px !important;
vertical-align: middle;
height: 40px !important;
display: inline;
background-image: none !important;
-webkit-appearance: menulist !important;
appearance: menulist !important;
margin: 0px 10px !important;}
}
@media (max-width: 699px){
#seriesengine .enmse-selector.three select {
border: 1px solid #222 !important;
background-color: #ffffff !important;
color: #222 !important;
font-size: 17px !important;
vertical-align: middle;
height: 40px !important;
display: inline;
background-image: none !important;
-webkit-appearance: menulist !important;
appearance: menulist !important;
margin: 10px 0px !important;}
}
#seriesengine .enmse-selector {
background-color: transparent !important;
}
#seriesengine select {
text-align:center !important;
}
/* Listen / Watch Buttons */
@media (min-width: 700px){
#seriesengine .enmse-message-card .enmse-card-links a {
height: auto;
line-height: 22px;
font-size: 13px !important;
text-transform: uppercase;
color: #FFF;
cursor: pointer;
width: 45%;
display: inline-block;
text-align: center;
font-weight: 600;
letter-spacing: 3px;
background: var(--color-primary) !important;
transition: all 0.2s ease 0s;
border-radius: 2px;
padding: 15px 5px;
margin: 5px 4px;}
}
@media (max-width: 699px){
#seriesengine .enmse-message-card .enmse-card-links a {
height: auto;
line-height: 40px !important;
font-size: 13px !important;
text-transform: uppercase;
color: #FFF;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight: 600;
letter-spacing: 3px;
background: var(--color-primary) !important;
transition: all 0.2s ease 0s;
border-radius: 2px;
width:80%;
margin: 15px 0px;}
}
#seriesengine .enmse-message-card .enmse-card-links a:hover {
opacity: 0.9;
}
#seriesengine .enmse-message-card p.enmse-card-links {
margin: 0px 0 5px 0;
}
/* Navigation */
#seriesengine a.next.page-numbers, #seriesengine a.previous.page-numbers {
background-color: var(--color-primary) !important;
}
#seriesengine a.page-numbers {
color: #222;
}
#seriesengine .page-numbers.current {
background-color: #928983;
color: #FFF;
}
@media (max-width: 700px){
#seriesengine a.next.page-numbers, #seriesengine a.previous.page-numbers {
display: inline-block;
width: auto;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
border-radius: 3px;
padding: 3px 16px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 15px !important;
font-weight: bold !important;}
}
/* Date */
#seriesengine .enmse-message-card h6 {
text-align: center !important;
font-size: 15px !important;
padding: 0 10px 10px 10px;
color: var(--color-primary) !important;
font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif !important;
}
/* Title */
#seriesengine .enmse-message-card h5 {
text-align: center !important;
font-weight: 700 !important;
font-size: 18px !important;
padding: 0 20px 0px 20px;
color: #222;
font-family: 'Josefin Sans',Helvetica,Arial,Lucida,sans-serif!important;
letter-spacing: 1px;
line-height: 1.3;
width: 80%;
display: table;
margin: auto;
}
@media (max-width: 699px){
#seriesengine h2.enmse-modern-message-title {
color: #222;
font-size: 20px !important;
font-weight: 700;
line-height: 1.2;
margin: 0 0 5px 0;
text-align: center;
font-family: 'Josefin Sans',Helvetica,Arial,Lucida,sans-serif!important;}
#seriesengine h3.enmse-modern-message-meta {
color: var(--color-primary);
font-size: 16px !important;
font-style: normal;}
}
@media (min-width: 700px){
#seriesengine h2.enmse-modern-message-title {
color: #222;
font-size: 28px !important;
font-weight: 700;
line-height: 1.2;
margin: 0 0 5px 0;
text-align: center;
font-family: 'Josefin Sans',Helvetica,Arial,Lucida,sans-serif!important;}
#seriesengine h3.enmse-modern-message-meta {
color: var(--color-primary);
font-size: 18px !important;
font-style: normal;}
}
/* Scripture */
#seriesengine .enmse-message-card p.enmse-scripture-info {
display:none !important;
text-align: center;
font-size: 15px !important;
padding: 8px 15px 0 15px !important;
color: #928983;
font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif!important;
letter-spacing: 1px;
}
/* Name */
#seriesengine .enmse-message-card p.enmse-speaker-name {
display:none !important;
text-align: center !important;
font-size: 16px !important;
padding: 0 10px 4px 10px;
font-style: normal;
color: #222;
font-family: 'Open Sans',Helvetica,Arial,Lucida,sans-serif!important;
letter-spacing: 1px;
}
/* Downloads */
#seriesengine .enmse-player .enmse-modern-player-details p.enmse-downloads {
background-color: transparent;
}
@media (min-width: 700px){
#seriesengine .enmse-player .enmse-modern-player-details p.enmse-downloads a {
height: auto;
line-height: 16px;
text-transform: uppercase;
color: #FFF;
cursor: pointer;
width: 15%;
display: inline-block;
text-align: center;
font-weight: 600;
letter-spacing: 3px;
background: var(--color-primary) !important;
transition: all 0.2s ease 0s;
border-radius: 2px;
padding: 15px 5px;
margin: 5px 4px;}
}
#seriesengine .enmse-player .enmse-modern-player-details p.enmse-downloads a.enmse-pdf:before {
opacity: 1;
}
#seriesengine .enmse-player .enmse-modern-player-details p.enmse-downloads a:hover {
opacity: 0.9;
}
p.enmse-related-topics {
display: none;
}
#seriesengine .enmse-player .enmse-player-details p.enmse-related-topics a, #seriesengine .enmse-player .enmse-modern-player-details p.enmse-related-topics a, #seriesengine .enmse-player .enmse-modern-player-details p.enmse-modern-scripture a {
color: #928983;
text-decoration: none;
}
/* Player */
#seriesengine .enmse-player {
background-color: transparent;
padding: 0 0 8px 0;
margin: 0 0 15px 0;
line-height: 0 !important;
clear: both;
}
@media (min-width: 700px){
#seriesengine .enmse-media-container {
background-color: #eae8e6;
width: 80%;
display: table;
padding: 4px;
line-height: 0 !important;
margin: auto;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
}
@media (max-width: 699px){
#seriesengine .enmse-media-container {
background-color: #eae8e6;
width: 100%;
display: table;
padding: 4px;
line-height: 0 !important;
margin: auto;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
}
/* Social Icons */
#seriesengine .enmse-share-details.modern ul li a {
background-color: var(--color-primary) !important;
border-radius: 3px;
font-size: 27px;
}
#seriesengine .enmse-share-details.modern ul li a:hover {
opacity:0.9;
}
#seriesengine .enmse-share-details.modern ul li.enmse-facebook a:before,#seriesengine .enmse-share-details.modern ul li.enmse-twitter a:before, #seriesengine .enmse-share-details.modern ul li.enmse-email a:before, #seriesengine .enmse-share-details.modern ul li.enmse-share-link a:before {
opacity: 1;
color: #FFF;
}
/* Correct Hidden Tabs */
ul.enmse-modern-player-tabs.hidden.hidden {
display: none;
}
/*** End Series Engine ***/
Bonus: Create Sub Page Templates
This one is a bit of a bonus tip. Once you are in the process of building your Divi Church Website, you will have page templates that you want to reuse. For example, your men’s ministry, women’s ministry, youth ministry, kids ministry, etc. pages might end up looking really similar. Divi makes this EASY. This video shows you how to save a page to your library for use on other parts of your site.
Step 5 – Launch
Now, we get to do the fun part! We launch your site!! Cloudways has provided an excellent guide on taking your site live here!
Questions? Contact Me.
I am giving this guide away for free because I believe that every church should have a great website that they LOVE. If I can help your church get there, contact me. It would be my personal joy to help you avoid some of the headaches I had when I was in your shoes.
0 Comments