1.Overview

For the HubSpot CMS, Creed is a minimal design, free religious theme with a contemporary style. It is created explicitly for websites relating to churches, prayer groups, Christian charities, leaders of Divine, communities of believers, volunteers, fundraisers, non-profit organizations, temples of compassion & prayers, and mosques. Note: All our free HubSpot themes are easy to customize yet they come with 30 mins of free 1-on-1 consultation by MakeWebBetter experts. Book your slot now It has 8 theme pages, 26 drag-and-drop modules, and 8 reusable sections. Check out all the different theme components below.

Features
  1. Codeless HubSpot theme for self customization.
  2. Responsive HubSpot theme. Works well on all device types. 
  3. Multi-language support for wider audience understanding. 

2.Edit Theme Settings

After you create a page using the creed theme, you can edit themes settings by going to the theme section of the edit page menu.

edit page

Under the edit theme settings you have the following options:

2.1.Global Color

The global color setting will have an effect on the color of the entire website. You can change the primary, secondary, tertiary, heading, and body background color.

global colour

2.2.Global Fonts

Similar to global colors, global fonts are responsible for all fonts displayed on your website.

global fonts

2.3.Typography

Typography means arranging letters and texts such that the content is legible, visually appealing, and clear to the visitors. You can change the typography of each heading, H1, H2, H3, H4, H5, H6, body and links.

typography

 

For all the headings, you can change the font, line height, letter spacing, and text transformation. For mobiles, you can change the font size, and line height.

typography 02

Similar settings are available for the body and links.

2.4.Buttons

Button settings on your website include dark and light button settings.

button


You can edit the button text font size, line height, button spacing & padding, button corner radius and enable button animation. You can edit text color, background color, and border of buttons too.

2.5.Spacing

Spacing in the theme settings options is for maximum content width.

spacing1

 

You can also edit the section spacing, both horizontal and vertical.

spacing2

2.6.Website Header

For the website header, you can enable box shadow, edit the box shadow colors, and change the website header background color.

website header

From the menu option, you can change the menu font for desktop, text transformation, line height, and font size for mobile. You can also change the drop-down text color, background color, hover text, and background color.

2.8.Forms

You can edit the form title text, background color, spacing, border, and form corner. (The border-radius only alters the top left and top right of the title)

forms


You can change the font, line height, and letter spacing of the text labels, edit the help text font, rich text font, GDPR text font, change the color of the placeholder and background, adjust the spacing, border color, style, and width, border coloron focus, and corner radius of the form fields.

You can also change form background spacing, border style, corner radius, error message font and color, line height, letter spacing, text transformation, and spacing.

2.9.Tables

You can change the text color and background color of the table header, table body, and table footer. You can change the spacing, padding, border style, color, and width of the table cells.  

table

2.10.Blog Setting

Blog settings include enabling sidebar and other blog post settings. From the sidebar, you can enable topics, popular posts, and subscription forms.

blog settings

From the blog settings, you can change paragraph content font size, line height, and letter spacing, enable hiding/showing the author’s name, timestamp, tags, and related posts, and edit border-radius.

blog settings

2.11.System Page Setting

The system page settings allow you to replace or remove the system page icon or image, add alt text and decide on image loading. These settings are available for Error page 404,  500, email unsubscribe, and password prompt.

system page settings

3.Modules

Modules are small editable components that you can add to your website and landing pages. Just drag and drop them anywhere you want. Consider the following 26 modules present in the Creed free HubSpot theme. 

3.1.Accordion

Use the accordion module when you want to display content in question-answer format. Create vertical sections for your content with the answer dropdown. Visitors have the option to show or hide related content gradually.

You can add multiple questions and answers to the FAQ section. Each accordion has options to edit content and icon position choice. You can also replace and remove the opening and closing icons.


From the style tab, you can change the accordion background color, its spacing from the margin above and below, border radius, and enable or disable box shadow. Other options include adjusting the title and content font and spacing and overwrite content color.

3.3.Blog Listing

The blog listing module allows you to add blogs as a list in a number of rows and columns.

 

From the blog meta information, you can enable featured images, tags, title, authors, publish date, description, button, button text, enable/disable box shadow, set box shade select category or sub-category, and edit author and pagination label.

From the sidebar option, you can add a search bar, edit category titles, subscription form titles, popular post titles, etc.

From its style tab, you can change the title font, hover, and normal font color of the title, popular post, and other widgets.

3.5.Customizable Button

Add a donation, join the event or sign-up button on your website pages. Three types of buttons are available, namely, filled dark outlines dark, and filled light.



You can select button type, edit button text, and attach links.

From the style tab, you can change the button alignment, background color, and border color for button hover and normal state. Additionally, you can adjust button spacing, text font, line-height, spacing, border style, color, width, etc.

3.6.Card

Add title and images or icons in cards for quick pointers on your website/landing pages. You can select upto four columns for card displays.

* Four-column choice


You can enable icons or images for cards, enable title and description, set icons or images, add multiple cards, etc. For each card, you can replace or remove the card icon or image, edit the heading and add content.

From the card style tab, you can change the alignment for desktop, edit card corners, and background & heading color, and box spacing for mobile and desktop.

3.8.Progress Bar

The progress bar shows activity in progress and how much of it is left. You can add a horizontal progress bar for showing your fund collections.  

 


You can add a start and end label, progress percentage, and enable progress count. You can add the title and amount to each progress count.

From the style tab, you can edit the progress bar radius and fill color, progress bar label text, and color, and adjust the maximum width for mobile and desktop.


 

3.9.Custom Form

Add a custom form according to your website’s requirements. You can add any form you want, like subscribe, donation, contact, etc.

You can select the form layout from a single field form, multiple field form, and single field form (button at the bottom).


You can choose the form layouts, edit the form title, choose an existing form or create a new one. You can also edit the form content by adding or removing fields. Additionally, you may edit the thank you text. Other options include enabling form box-shadow, and input field box shadow.

 

3.10.Custom Image

You can add an individual image to your website page through the image module.

For the image module, you can replace or remove the image, mention alt text, adjust size, and image loading, etc.


From the image style tab you can change desktop and mobile alignment and image corner radius.

3.11.Donation Form

Collect donations from volunteers and sponsors via donation form. Contact us for customization.  

You can edit the form title, choose a form for donation, enable box shadow, replace or remove the image, and enable content over the image, too.

From the style tab, you can edit the form background color, maximum width, input field background and border color, form title border bottom color, text color over the image, and image corner radius.    

3.12.Event Listing

The event listing module displays events in a list so that your visitors know what’s going on or upcoming in your community. You can add details and images related to your event to make it attractive.

You can add multiple listings for events, enable lists, and accept links.


For every event card, you can replace or remove the image, set image loading, change the title, add or edit the list, and edit the acceptance link and text.

3.15.Header Controls

The header controls can be edited from the global content editor. The header appears on the top of your website and landing pages.

You can select the display mode of the language switcher from hybrid, PageLang, and localised. You can enable or disable the search option and edit its placeholder text, enabling the action button type and text. For instance, in the above image the button text is, “Donate Us”.

 

From its style tab, you can change the background color and icon color.

 

3.16.Header Toggler

Drag and drop the header above the menu component for best results. You can select an icon or image for the toggle open and close option.

 

From the style tab, you can adjust spacing and padding of the toggler.

3.17.Icon Box

Icon box module is used to add multiple icons and their descriptions on landing pages.

 

  • Icon box with Title content ( Compact layout, 3 columns)

  • 2 column card layout


    You may select the icon box layout from card or compact, the number of columns you want to show, select icons or images for the icon box, add content, and enable box shadow.   

3.18.Logo

Add your custom logo with a logo module on your website pages.

You can enable a custom logo, replace or remove your custom logo image, add alt text, adjust image size, and add links. 

 

3.19.Map Slider

If your church or religious institution has multiple branches, you can use this module too .

The map slider settings has options to change the title text, subtitles and container. You can add the map API, pointer details, map JSON, adjust the map zoom level, set center latitude and center longitude.

3.20.Map

The map module will add a virtual map to your website. The map module is for adding maps on your website. You can replace or remove the location pointer.

From the style tab, you can edit the border-radius and height for desktop and mobile, card title color, and background color. You can add center latitude and longitude as well.


The map settings from the style tab allow you to edit map corners, desktop, and mobile height.

3.22.Pastors

The pastor module is to display your religious individual or the head of your religious institutions.

You can add multiple pastors’ images and other details.

For every pastor, you can remove and replace the image, member’s name, and designation, enable social links and update its URLs and icons too.  

3.23.Social Follow

The social follow module allows you to add your social platforms like Twitter, Instagram, Facebook, and LinkedIn on your website pages, header, or footer. 

hubspot creed documentation

You can select which social media links you want to add and replace or remove icon accordingly. 

social follow

You can change the background color, edit the icon radius, and change the horizontal desktop and mobile alignment from the style tab.

3.24.Spacer

The spacer module adds white space to the website and landing pages. With the spacer module, you can add vertical spaces between sections and modules as and when required.

spacer

You can adjust the height for desktop, mobile and tab and change background color.  

 

spacer

 

3.25.Title Content

The title content module allows you to add a title on any page. There is an option to add a mini title, edit content, and add primary & secondary buttons.

title content

You can enable a mini title, format the title content, add a button, and replace or remove the list icon. 

title content

You can also enable a primary and secondary button. Select the button type and edit the text to add these buttons. 

title content

  • Title content with the primary and secondary button
title content

 

3.26.Video Popup

Using the video module, you can add a video to your website or landing pages. These are very easy to work with and increase your page’s engagement rate. You can show your church or other religious and social activities videos. 

video popup

You can remove or replace the video poster, adjust the size of the poster, set the maximum size, replace or remove the play icon, select icon position, and add the video link.  

video popup

You can set alignment, enable overlay, change overlay color, overwrite icon color, and change it’s background color, and the border radius.

video popup

 

4.Sections

There are 8 reusable sections in the creed theme. You can select any of the following and edit its content to fit your website needs.

4.1.Contact Us

4.2.Donation CTA

4.3.Donation Form

Suggest Edit