The Home Page allows up to 9 content sections to be assigned to a page. These sections can contain basically anything that a page can contain (text, images, videos, etc).  These sections will display under the header image/rotator/header video space on your homepage.

Sections may be reorder in the 1-9 placement which correlates as top-bottom on the page. You can assign a section as 'None' to remove it, and you can create your own new sections to add to the home page.

Not all of the sections need to be used and can be changed whenever you would like different content on the homepage.

In order to edit sections, you will need to first navigate to CONTENT > Sections > Click on the name of the section you wish to edit.

Once you are in the Section Editor, you should see a screen that looks similar to the image above. Below is a description of the different fields you see in the image:

#1 - Name: This is the name of the section and is not displayed on the website anywhere

#2 - Description: This is an optional field that is mostly used for SEO.

#3 - Category: This is used for internal organization/permissions only. It is an optional field.

#4 - CONTENT: This is the main content block and resembles the content/styles of the page content. Often times sections use Monklets or Forms and you can add in a Monklet or a Form by clicking on the Insert button in the tool-bar and then selecting the monklet or form you wish to us in that section.

#5 - Background Color: This field allows you to designate a specific background color that this section will have. You will need to use the hex code of the color and you can find hex codes here.

#6 - Background Image: This serves as the section background image.  This image should be 1,600px in width by the desired height (for retina images you can use 3,200px in width).  The height will depend on the amount of content in the section.  A recommended height would be between 600px and 1,200px (double for retina).

#7 - Dark Background: This changes the color of all text within the section to be the "Dark Color" option in the color picker. *NOTE - This does not change the color of any text that is a link.

#8 - Full Width Container:  This option removes the container that constrains the content to be in the middle of the screen and instead displays the section's content at the full width of the screen.

#9 - Parallax Background: This option turns the background image into a parallax background. 

#10 - Remove Padding: This option removes the padding (blank space) at the top and bottom of the section.

This section is designed to show 4 links that are commonly used on your site in a prominent way that will prompt the user to click on the buttons to learn more about that topic.

This section uses a uses a Monklet (to provide the button styling) that calls on a link list, which provides the links & icons. Therefore, to edit the links & icons, navigate to CONTENT > Link Lists > Home Featured Buttons

1. Name: This is the text that will be within the button
2. Parent: This is not used in the "Home Featured Buttons"
3. Link: Either select an item (page, event, sermon, etc.) to link to by pressing "View All" or enter a URL if you wish to link to an external site (i.e. linking to your online giving portal).
4. Open link in new window: It is recommended that you check this box if you are linking to an external site
5. Image: This is not used in the "Home Featured Buttons"
6. Description: This is not used in the "Home Featured Buttons"
7. Icon Class: This is where you can designate which icon will show up to the left of the text within the button. A list of available icons can be seen here: fontawesome.io/icons.

This section is designed with a Monklet that will display the most recently published sermon (published in the Sermons Module: CONTENT > Sermons). You can add a background color or background image, as well as use the Dark Background, Full Width Container, Parallax Background and/or Remove Padding if you would like to by going to CONTENT > Sections > Home - Sermon.

This section displays 3 images at a time (each image being a link) but allows the user to click to the right or to the left and scroll through more images/links if there are more images/links in the link list.

This section uses a Monklet (to provide the styling & the scrolling ability) that calls on a link list, which provides the images, links & icons. Therefore, to edit the images, links & icons, navigate to CONTENT > Link Lists > Home Featured Carousel

1. Name: This is the text that will display over top of the image
2. Parent: This is not used in the "Home Featured Carousel"
3. Link: Either select an item (page, event, sermon, etc.) to link to by pressing "View All" or enter a URL if you wish to link to an external site (i.e. linking to your online giving portal).
4. Open link in new window: It is recommended that you check this box if you are linking to an external site
5. Image: Either select an image already uploaded to the media module by pressing "View All" or upload a new image by clicking on the "upload a new image" link".
*NOTE: The recommended image size is at least 375 pixels wide by 375 pixels high. No matter what, you will want an image that uses a 1:1 ratio.
6. Description: This is not used in the "Home Featured Carousel"
7. Icon Class: This is where you can designate which icon will show up over top of the image and above the name. A list of available icons can be seen here: fontawesome.io/icons.

This section is designed to display the 3 published events that are soonest to happen (published in the Events module: EVENTS > Events). 

The "view all events" button is controlled within the section, rather than getting pulled in by the monklet. You can update what that button says and/or where it is linked to by going to CONTENT > Sections > Home - Events. This is also where you can go to add a background color or background image, as well as use the Dark Background, Full Width Container, Parallax Background and/or Remove Padding if you would like to.

This section is designed to display the 3 published blog posts that are soonest to happen (published in the Events module:  CONTENT > Blogs > Blog Posts). You can add a background color or background image, as well as use the Dark Background, Full Width Container, Parallax Background and/or Remove Padding if you would like to by going to CONTENT > Sections > Home - Posts.

This section is designed to display the 3 published events that are soonest to happen (published in the Events module: EVENTS > Events) and that have also been given the category of "Stories".

You can change which category it will pull from by updating the monklet call's inline parameter in the section editor (see below). Make sure your category name is not capitalized in the monklet call and if your category name is more than 1 word you will need to create a "Slug" (which is a web-friendly version of a title). You can create a slug by using this tool: tools.ekklesia360.com/slug

The heading of "STORIES" and the "view more" button are controlled within the section, rather than getting pulled in by the monklet. You can update what that button says and/or where it is linked to by going to CONTENT > Sections > Home - Stories. This is also where you can go to add a background color or background image, as well as use the Dark Background, Full Width Container, Parallax Background and/or Remove Padding if you would like to.

If you are having trouble with this, feel free to contact your Onboarding Specialist or our Support Team for assistance.

This section displays 3 images at a time (each image being a link) but allows the user to click to the right or to the left and scroll through more images/links if there are more images/links in the link list.

This section uses the Full Width Container and Remove Padding check boxes and a Monklet (to provide the styling) that calls on a link list, which provides the images, links & icons. Therefore, to edit the images, links & icons, navigate to CONTENT > Link Lists > Home Featured Links

1. Name: This is the larger text that will display over top of the image
2. Parent: This is not used in the "Home Featured Links"
3. Link: Either select an item (page, event, sermon, etc.) to link to by pressing "View All" or enter a URL if you wish to link to an external site (i.e. linking to your online giving portal).
4. Open link in new window: It is recommended that you check this box if you are linking to an external site
5. Image: Either select an image already uploaded to the media module by pressing "View All" or upload a new image by clicking on the "upload a new image" link".
*NOTE: The recommended image size is at least 450 pixels wide by 450 pixels high. No matter what, you will want an image that uses a 1:1 ratio.
6. Description: This is the larger text that will display over top of the image and under the Name
7. Icon Class: This is where you can designate which icon will show up over top of the image and above the name. A list of available icons can be seen here: fontawesome.io/icons.