Church Template for Blocs
Today, I am happy to share with you another new template for Blocs app. Church template is the perfect starting point for websites of churches and other religious organizations.
Church has been one of the most popular template requests from Blocs Templates members for a while. I will be honest, I didn’t know what pages and sections a typical church website should have, so I have done a lot of research before building this template.
Church is available to Blocs Templates members for free
If you have purchased the All Blocs 3 Templates package before, you can re-download the updated template library, which now includes the new Church template.
Although there are a lot of different types of pages on church websites, I have come to a conclusion that my template should include the following church-specific pages in addition to regular about, home, and contact pages:
As you can see form the demo of Church template, I have decided to build a donation section into the navigation bar. This way, it is accessible from any part of the website with just one click. At the same time, if you don’t want to have a Donation function on your Church website, you can simply remove the row in the header and change the button to something else.
Template Release Notes
- All Necessary Pages for Church Websites (sermons, ministries, events, etc)
- Ministry page with modals applied to each ministry
- Sermons page with video modals for each sermon, as well as download buttons set
- Great looking events page with unique event design
- Animated About page with all necessary sections like (pastors, beliefs, story, etc)
- Contact Page with custom form and embedded Google Map widget
- Donate button with Donation Form in the header toggled with Visibility feature
- Fully Responsive navigation menu
- Responsive (breakpoint-specific) margins between links and other elements
- Cleaner typography, font sizes (H1, H2, H3, H4, p, a, etc) optimized for all breakpoints
- Adjusted (darken) color of the toggle icon (via code in Code Editor)
- Special navigation (sidebar) background menu applied and styled accordingly
- Footer with a responsive navigation menu (edit manually if needed)
- Fully customized contact form fields, typography, and effects
- Responsive page header blocs (font sizes and side padding)
- Customized Scroll to Target button
- Fully Responsive Column Width for Page Headers
- Fully Responsive Bloc Padding (per breakpoint, add padding class to new Blocs)
- Customized default button styles for glossy, clean, wire buttons
- Sticky navigation bar shadow removed
- Custom padding for navigation bar applied (varies per breakpoint)
- Disabled focus state blue shadow for form fields
- Default Project Settings adjusted
- Project Export settings adjusted
- Default Global Color Swatches Adjusted (just change the brand colors)
- Cleaner Alert message style applied
Church Template User Instructions
Make sure to add mp3 files with audio recordings to asset manager, and then link each file to the audio player button for the sermon. Also, don’t forget to change the embed code for the video. If you don’t have a video for a sermon, just delete the button with video icon. Also, make sure to change the URL for download icon, so it matches the filename of the mp3 recording located in audio folder. Alternatively, you can replace the audio file with a PDF document.
I originally designed the audio play button to toggle the visibility of a separate audio player bric, which was hidden by default, and was shown on a click, but after consulting with a couple of Blocs Templates users, I have decided to replace it with a regular button, which you can set to any interaction yourself. Depending on where your sermon recording will be stored, you can just link the URL for audio playback.
Church Template heavily relies on Modals. Make sure that you check the IDs of modals before linking them to different links and buttons. Also, if you create a new sermon or ministry, make sure to add an ID to a new Modal, and link it to the new links, buttons or images.
By the way, I have disabled the close button for all modals by default. To close the modal, the visitor needs to click anywhere on the screen. If you would like to have a close button instead, you can select the modal, and enable the close button in the sidebar.
Make sure to change the form submission success URL to your payment platform of choice to receive the donations. Alternatively, you can place a payment from in place of contact form.
If you have any questions or need help with anything, get in touch with me using the Contact page, and I will get back to you as soon as I can.